kuailelunwen_new_houtai/src/views/agent/payInfoSetting.vue

<template>
    <div class="main-content12 payInfo_wrap">
        <!-- page content -->
        <div class="site-setting-wrap min-flex-right">
            <div class="siteMessage flex-common">
                <h3>支付授权</h3>
                <el-form v-if="payType == payTypeTaoBao">
                    <div class="flex-wrap">
                        <div class="flex-left" style="max-width:100%">
                            <div class="beforeNotice">
                                <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
                                <p class="mt12 flex">
                                    请确保使用要添加的淘宝主账号登录并授权
                                </p>
                                <p class="mt10 flex">
                                    如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面
                                </p>
                            </div>
                        </div>
                    </div>
                </el-form>
                <el-form v-else-if="payType == payTypeWeixin">
                    <div class="flex-wrap">
                        <div class="flex-left">
                            <GuipFormItem column="column" class="mb24" label="1. 公司简称">
                                <span class="desc" slot="formRight">请输入公司简称，便于您区分账号所属公司</span>
                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.short_name"
                                    prop="company_short_name" placeholder="6字以内">
                                </GuipInput>
                            </GuipFormItem>
                            <GuipFormItem column="column" class="mb24" label="2. 支付商户号（mch_id）">
                                <span class="desc" slot="formRight"><a href='https://pay.weixin.qq.com/'
                                        target='_blank'>微信支付平台</a>＞账户中心＞商户信息＞微信支付商户号</span>
                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.mch_id"
                                    prop="mch_id" placeholder="请输入商户号">
                                </GuipInput>
                            </GuipFormItem>
                            <GuipFormItem column="column" class="mb24" label="3. 微信支付秘钥">
                                <span class="desc" slot="formRight"><a href='https://pay.weixin.qq.com/'
                                        target='_blank'>微信支付平台</a>＞账号中心＞账户设置＞API安全＞APIv2密钥；<p class="mt10">
                                        注意，支付密钥不能设置为纯数字</p></span>
                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.apiv2"
                                    prop="payinfo.apiv2" placeholder="请输入微信支付秘钥">
                                </GuipInput>
                            </GuipFormItem>
                            <GuipFormItem column="column" class="mb24" label="4. 公众号APPID">
                                <span class="desc" slot="formRight"><a href='https://mp.weixin.qq.com/'
                                        target='_blank'>公众平台</a>＞设置与开发＞基本配置＞公众号开发信息＞开发者ID（APPID）</span>
                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.appid"
                                    prop="payinfo.appid" placeholder="请输入公众号APPID">
                                </GuipInput>
                            </GuipFormItem>
                        </div>
                        <div class="flex-line"></div>
                        <div class="flex-right">
                            <div class="preview">
                                <div class="preview-title">
                                    <p>预览支付二维码</p>
                                </div>
                                <div class="preview-content">
                                    <span v-if="!payinfo.appid || !payinfo.apiv2 || !payinfo.mch_id" class="desc_title">请先配置收款信息</span>
                                    <span v-if="payinfo.qrcode_error" class="desc_title">{{ payinfo.qrcode_error }}</span>
                                    <!-- 有二维码的情况 -->
                                    <QrCode v-if="qrCodeDataUrl" :imageUrl="qrCodeDataUrl" text="微信扫码支付">
                                        <div class="flex gap8" slot="desc">
                                            <img style="width: 16px;" src="@/assets/register/weixin.svg" alt="">
                                            <span class="qrcode-title ft12">微信扫码支付</span>
                                        </div>
                                    </QrCode>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-form>
                <el-form v-else-if="payType == payTypeAlipay">
                    <div class="flex-wrap">
                        <div class="flex-left">
                            <div v-if="payinfo.is_pay_public == 0">
                                <GuipFormItem column="column" class="mb24" label="1. 公司简称">
                                    <span class="desc" slot="formRight">请输入公司简称，便于您区分账号所属公司</span>
                                    <GuipInput slot="formDom" ref="GuipInput" column="column"
                                        v-model="payinfo.short_name" placeholder="6字以内"></GuipInput>
                                </GuipFormItem>
                                <GuipFormItem column="column" class="mb24" label="2. 公司支付宝账号">
                                    <span class="desc" slot="formRight">仅支持已签约 “当面付” 功能的公司支付宝</span>
                                    <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.account"
                                        placeholder="请输入公司支付宝账号"></GuipInput>
                                </GuipFormItem>
                            </div>
                            <div v-if="payinfo.is_pay_public == 1">
                                <div class="beforeNotice">
                                    <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 须知</h4>
                                    <p class="mt12">使用平台“支付宝支付”，平台收取5%的服务费</p>
                                    <p class="mt12 flex">使用平台“支付宝支付”，真实姓名必须和支付宝账号实名认证姓名统一</p>
                                </div>
                                <GuipFormItem column="column" class="mb24" label="1. 收款人姓名">
                                    <span class="desc" slot="formRight">请输入支付宝绑定的银行卡的持卡人姓名</span>
                                    <GuipInput slot="formDom" ref="GuipInput" column="column"
                                        v-model="payinfo.receive_payment_name" placeholder="6字以内"></GuipInput>
                                </GuipFormItem>
                                <GuipFormItem column="column" class="mb24" label="2. 收款支付宝账号">
                                    <span class="desc" slot="formRight">请输入有效账号</span>
                                    <GuipInput slot="formDom" ref="GuipInput" column="column"
                                        v-model="payinfo.receive_payment_account" placeholder="请输入有效收款支付宝账号">
                                    </GuipInput>
                                </GuipFormItem>
                            </div>
                        </div>
                        <div class="flex-line"></div>
                        <div class="flex-right">
                            <div class="preview">
                                <div class="preview-title">
                                    <p>预览支付二维码</p>
                                </div>
                                <div class="preview-content">
                                    <span v-if="!payinfo.account" class="desc_title">请先配置收款信息</span>
                                    <span v-if="payinfo.qrcode_error" class="desc_title">{{ payinfo.qrcode_error }}</span>
                                    <!-- 有二维码的情况 -->
                                    <QrCode v-if="qrCodeDataUrl" :imageUrl="qrCodeDataUrl" text="支付宝扫码支付">
                                        <div class="flex gap8" slot="desc">
                                            <img style="width: 16px;" src="@/assets/pay/pay_3.svg" alt="">
                                            <span class="qrcode-title ft12" style="color: #006AFF;">支付宝扫码支付</span>
                                        </div>
                                    </QrCode>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-form>
                <el-form v-else-if="payType == payTypePdd">
                    <div class="flex-wrap">
                        <div class="flex-left" style="max-width:100%">
                            <div class="beforeNotice">
                                <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
                                <p class="mt12 flex">主账号登录并授权。<a :href="payinfo.authurl" class="flex"
                                        target="_blank"><img src="@/assets/site/form_linkActive.svg" alt="">去授权</a></p>
                                <p class="mt12 flex gray">如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面。</p>
                                <p class="mt5 flex gray">授权成功后点击下方“同步授权”。</p>
                            </div>
                            <GuipFormItem column="column" class="mb24" label="账号名称">
                                <!-- <span class="desc" slot="formRight">账号名称</span> -->
                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.account"
                                    placeholder="请输入账号名称"></GuipInput>
                            </GuipFormItem>
                        </div>
                    </div>
                </el-form>
                <el-form v-else-if="payType == payTypeJingdong">
                    <div class="flex-wrap">
                        <div class="flex-left" style="max-width:100%">
                            <div class="beforeNotice">
                                <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
                                <p class="mt12 flex">请确保使用要添加的京东主账号登录并授权</p>
                                <p class="mt10 flex">如未购买＂快乐论文检测服务＂服务或已过期，会跳转到购买服务页面</p>
                            </div>
                            <GuipFormItem column="column" class="mb24" label="账号名称">
                                <!-- <span class="desc" slot="formRight">账号名称</span> -->
                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.account"
                                    placeholder="请输入账号名称"></GuipInput>
                            </GuipFormItem>
                        </div>
                    </div>
                </el-form>
            </div>
        </div>
        <Footer></Footer>
        <div class="register-btns">
            <GuipButton type="system" :btnstyle="{ width: '144px', height: '46px' }" @click="cancle">取消</GuipButton>
            <GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="addPayment">{{ confirmText
            }}</GuipButton>
        </div>
    </div>

</template>
<script>
import store from '@/store';
import { mapState } from 'vuex';
import GuipFormItem from '@/components/GuipFormItem.vue';
import GuipInput from '@/components/GuipInput.vue';
import GuipButton from '@/components/GuipButton.vue';
import Footer from '@/components/Footer.vue';
import QrCode from '@/components/QrCode.vue';
import QRCode from 'qrcode'
// 收款方式
const PAY_TYPE_TAOBAO = 0;    // 淘宝
const PAY_TYPE_WEIXIN = 2;    // 微信
const PAY_TYPE_ALIPAY = 3;    // 支付宝
const PAY_TYPE_JINGDONG = 4;  // 京东
const PAY_TYPE_PDD = 11;      // 拼多多

export default {
    // 收款方式设置
    name: '',
    props: [''],
    components: {
        // GuipRadio,
        GuipFormItem,
        GuipInput,
        // GuipTextarea,
        // CustomDropdown,
        GuipButton,
        QrCode,
        Footer,
        // GroupFormBtns

    },
    data() {
        return {
            payinfo: [],
            payType: -1,
            // 收款方式
            payTypeTaoBao: PAY_TYPE_TAOBAO,
            payTypeWeixin: PAY_TYPE_WEIXIN,
            payTypeAlipay: PAY_TYPE_ALIPAY,
            payTypeJingdong: PAY_TYPE_JINGDONG,
            payTypePdd: PAY_TYPE_PDD,
            confirmText: '保存',
            qrCodeDataUrl: ''
        }
    },
    computed: {
        ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
    },
    created() {
        store.commit('SET_CUSTOMIZE', true);
        store.commit('SET_SLIDER_MENU', 'paySettingData');
    },
    mounted() {
        store.commit('SET_PAGETITLE', '支付授权');

        this.getPayment();
        
    },
    methods: {
        getQrCodeUrl(mydata) {
            // 模拟生成二维码
            QRCode.toDataURL(mydata)
            .then(url => {
                this.qrCodeDataUrl = url
            })
            .catch(err => {
                console.error(err)
            })
        },
        getPayment() {
            this.$http('POST', '/agentnew/ajax_get_payinfo', {
                payid: this.$route.query.payid,
            }).then(response => {
                this.$nextTick(() => {
                    this.payinfo = response.data
                    this.payType = response.data.type
                    if (this.payType == PAY_TYPE_WEIXIN && response.data.qrcode_url) {
                        this.getQrCodeUrl(response.data.qrcode_url);
                    }
                    if (this.payType == PAY_TYPE_ALIPAY && response.data.qrcode_url) {
                        this.getQrCodeUrl(response.data.qrcode_url);
                    }
                    
                    if (this.payType == PAY_TYPE_TAOBAO || this.payType == PAY_TYPE_JINGDONG) {
                        this.confirmText = '去授权';
                    } else if (this.payType == PAY_TYPE_PDD) {
                        this.confirmText = '同步授权';
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        // 确认按钮事件
        addPayment() {
            if (this.payType == PAY_TYPE_TAOBAO) {
                window.open(this.payinfo.authurl, '_blank');

            } else if (this.payType == PAY_TYPE_WEIXIN) {
                this.$http('POST', '/agentnew/ajax_add_weixinpay', {
                    payid: this.$route.query.payid,
                    company_short_name: this.payinfo.short_name,
                    mch_id: this.payinfo.mch_id,
                    apiv2: this.payinfo.apiv2,
                    appid: this.payinfo.appid
                }).then(response => {
                    this.$nextTick(() => {
                        if (response.status) {
                            this.$Message.success(response.info);
                        } else {
                            this.$Message.error(response.info);
                        }
                    })
                }).catch(error => {
                    console.error(error, 'error')
                })

            } else if (this.payType == PAY_TYPE_ALIPAY) {
                this.$http('POST', '/agentnew/ajax_add_alipay', {
                    payid: this.$route.query.payid,
                    company_short_name: this.payinfo.short_name,
                    alipay_account: this.payinfo.account,
                    is_pay_public: this.payinfo.is_pay_public,
                    receive_payment_account: this.payinfo.receive_payment_account,
                    receive_payment_name: this.payinfo.receive_payment_name
                }).then(response => {
                    this.$nextTick(() => {
                        if (response.status) {
                            if (this.payinfo.is_pay_public == 1) {
                                this.$Message.success(response.info);
                            } else {
                                window.open(response.data.authurl, '_blank');
                            }

                        } else {
                            this.$Message.error(response.info);
                        }
                    })
                }).catch(error => {
                    console.error(error, 'error')
                })
            } else if (this.payType == PAY_TYPE_PDD) {
                this.$http('POST', '/agentnew/ajax_add_pddpay', {
                    shop_name: this.payinfo.account,
                }).then(response => {
                    this.$nextTick(() => {
                        if (response.status) {
                            this.$Message.success(response.info);
                        } else {
                            this.$Message.error(response.info);
                        }
                    })
                }).catch(error => {
                    console.error(error, 'error')
                })
            } else if (this.payType == PAY_TYPE_JINGDONG) {
                window.open(this.payinfo.authurl, '_blank');
            }
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        cancle() {
            this.getPayment();
        },
    }
}
</script>
<style lang="scss" scoped>
a {
    text-decoration: none;
    color: #006AFF;
}

.payInfo_wrap {
    height: calc(100% - 80px);
    box-sizing: border-box;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.register-btns {
    // height: 78px;
    /* 自动布局 */
    // width: 344px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    background: #FFFFFF;
    padding: 16px 0px;
    /* 蓝色阴影_常规 */
    box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12);

    button:nth-child(1) {
        margin-right: 56px;
    }
}

.preview {
    background: #FAFAFA;
    border-radius: 4px;
    width: 100%;
    height: 100%;
    text-align: left;
    padding: 24px 20px;
    box-sizing: border-box;
}

.preview-title {
    // padding-top: 24px;
    // padding-left: 20px;
}

.qrcode-title {
    font-size: 12px;
    line-height: 13px;
    letter-spacing: 0.08em;
    color: #0DAF49;
}

.desc_title {
    font-size: 16px;
    letter-spacing: 0.08em;
    color: #626573;
}

.preview-title p {
    font-size: 14px;
    font-weight: bold;
    line-height: normal;
    letter-spacing: 0.08em;
    color: #1E2226;
}

.preview-content {
    margin-top: 20px;
    // margin-left: 20px;
    padding: 16px;
    box-sizing: border-box;
    background: #FFFFFF;
    width: 100%;
    min-height: 138px;
}

.beforeNotice {

    h4 {
        margin: 0;
        gap: 8px;
    }

    margin-bottom: 18px;
    text-align: left;
    box-sizing: border-box;
    padding: 20px 14px;
    border-radius: 4px;
    /* middle/middle_blue_1 */
    background: #F2F7FF;
    /* middle/middle_blue_3 */
    border: 1px solid #BFDAFF;

    div {
        margin-top: 2px;
        padding-left: 23px;

        p {
            color: #8A9099;
        }

    }

    p {
        color: #1E2226;

        i {
            font-style: normal;
        }

        &:last-child {
            display: flex;
            align-items: stretch;

            b {
                font-weight: normal;
                color: #8A9099;
                display: inline-flex;

                img {
                    margin-left: 4px;
                }
            }
        }
    }

    a {
        text-decoration: none;
        color: #006AFF;
        margin-right: 10px;

        img {
            margin-left: 5px;
            margin-right: 5px;
        }
    }
}


.siteMessage {
    border-radius: 4px;
    transition: all .5s;
    border: 1px solid transparent;
}

.site-setting-wrap {
    width: 100%;
    flex: 1;
}
</style>