kuailelunwen_new_houtai/src/views/agent/paySetting.vue

<template>
    <div class="main-content12">
        <!-- 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">
                                    
                                </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">
                                    
                                </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>
        <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 GuipInput from '@/components/GuipInput.vue';
import store from '@/store';
import { mapState } from 'vuex';
import GuipFormItem from '@/components/GuipFormItem.vue';
import GuipInput from '@/components/GuipInput.vue';
// import GuipTextarea from '@/components/GuipTextarea.vue';
// import GuipRadio from '@/components/GuipRadio.vue';
// import CustomDropdown from '@/components/CustomDropdown.vue';
import GuipButton from '@/components/GuipButton.vue';
// import GroupFormBtns from '@/components/GroupFormBtns.vue';
// import {setHighActive} from '@/utils/common';

// 收款方式
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,
        // GroupFormBtns

    },
    data() {
        return {
            // AUTH
            token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
            payinfo: [],
            payType: -1,
            // 收款方式
            payTypeTaoBao: PAY_TYPE_TAOBAO,
            payTypeWeixin: PAY_TYPE_WEIXIN,
            payTypeAlipay: PAY_TYPE_ALIPAY,
            payTypeJingdong: PAY_TYPE_JINGDONG,
            payTypePdd: PAY_TYPE_PDD,
            confirmText: '保存',
        }
    },
    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: {
        getPayment() {
            this.$http('POST', '/agentnew/ajax_get_payinfo', {
                payid: this.$route.query.payid,
            },{
                headers:{
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    this.payinfo = response.data
                    this.payType = response.data.type
                    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
            }, {
                headers: {
                    'Auth': this.token
                }
            }).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
                }, {
                    headers: {
                        'Auth': this.token
                    }
                }).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,
                }, {
                    headers: {
                        'Auth': this.token
                    }
                }).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;
}
.register-btns {
  // height: 78px;
  /* 自动布局 */
  // width: 344px;
  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;
}

.preview-title {
    padding-top: 24px;
    padding-left: 20px;
}
.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;
    background: #FFFFFF;
    width: 100%;
    height: 200px;
}

.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%;
}

</style>