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" id="siteMessage1" v-if="payinfo.type == payTypeWeixin">
                <h3>支付客服</h3>
                <el-form>
                    <div class="flex-wrap">
                        <div class="flex-left" style="max-width:100%">
                            <div class="beforeNotice">
                                <h4 class="flex">
                                    <span>支付即服务免开发版</span>
                                    <p class="flex">
                                        <a :href="payinfo.weixin_pay_kefu_setting_url" class="flex" target="_blank"><img src="@/assets/site/form_linkActive.svg" alt="">前往微信商户平台</a>
                                    </p>
                                </h4>
                                
                                <p class="mt12 flex gray">用户在支付完成后，可通过相关微信支付凭证下方入口找到商家的服务人员名片，添加服务人员为好友。</p>
                            </div>
                        </div>
                    </div>
                </el-form>
            </div>
            <div class="siteMessage flex-common mt-18" id="siteMessage2">
                <h3>启停收款方式</h3>
                <el-form>
                    <div class="flex-wrap">
                        <div class="flex-left">
                            <div class="beforeNotice">
                                <div class="flex justify-content-space-between">
                                    <h3 class="flex gap8"><img :src="paySvg" alt="">{{ payinfo.type_desc}}</h3>
                                    <!-- :active-value="1"  :inactive-value="0"（关闭） 加冒号表示数字格式 -->
                                    <!-- active-value="1"  inactive-value="0"（关闭） 不加冒号表示字符串 -->
                                    <!-- 传入的modelvalue 为数字 0 或者 1 -->
                                    <GuipSwitch :modelValue="payStatus" :active-value="1" :inactive-value="0" @change="updatePayStatus(payinfo)" activeText="开启" inactiveText="关闭"></GuipSwitch>
                                </div>
                                <p class="ml-23 flex gray">{{ payinfo.account }}</p>
                            </div>
                        </div>
                    </div>
                </el-form>
            </div>
            <div class="siteMessage flex-common mt-18" id="siteMessage3">
                <h3 style="margin-bottom: 24px;">移除收款方式</h3>
                <el-form>
                    <div class="flex-wrap">
                        <hover-button button-text="确认移除" @click="deletePay" :default-icon="require('@/assets/site/delete.svg')" default-text-color="#626573"
                        hover-text-color="#006AFF"  width="110px" height="32px"
                        :customStyle="{ fontSize: '12px', background: '#fff', borderRadius: '2px', borderColor: '#DFE2E6' }" />
                    </div>
                </el-form>
            </div>
        </div>              
    </div>
    
</template>
<script>
import store from '@/store';
import { mapState } from 'vuex';
import GuipSwitch from '@/components/GuipSwitch.vue';
import HoverButton from '@/components/HoverButton.vue'

// 收款方式
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: {
        GuipSwitch,
        HoverButton,

    },
    data() {
        return {
            // AUTH
            token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
            payinfo: [],
            payType: -1,
            payStatus: -1,
            paySvg: '',
            // 收款方式
            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
                    this.payStatus = Number(response.data.status)
                    this.paySvg = require('@/assets/pay/pay_'+this.payType+'.svg')
                    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')
            })
        },
        updatePayStatus(row) {
            this.$http('POST', '/agentnew/ajax_update_pay_status', {
                payid: this.$route.query.payid,
                status: row.status==1 ? 0 : 1,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        this.$Message.success(response.info);
                        this.closePayTipDialogVisible = false;
                        this.getPayment()
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        deletePay() {
            this.$http('POST', '/agentnew/ajax_del_pay', {
                payid: this.$route.query.payid,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        this.$Message.success(response.info);
                        location.href = '/agent/payList';
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        cancle() {
            this.getPayment();
        }
    }
}
</script>
<style lang="scss" scoped>
a {
  text-decoration: none;
  color: #006AFF;
}

.gray {
    color: #626573 !important;
}

.mt-18 {
    margin-top: 18px;
}
.ml-23 {
    margin-left: 23px;
}

.justify-content-space-between {
    justify-content: space-between;
}

.beforeNotice {

    h4 {
        margin: 0;
        gap: 8px;
        justify-content: space-between;
    }

    margin-bottom: 18px;
    text-align: left;
    box-sizing: border-box;
    padding: 20px 14px;
    border-radius: 4px;
    /* middle/middle_grey_0 */
    background: #FAFAFA;

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

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

.site-setting-wrap {
    width: 100%;
}

</style>