acupuncture_admin/src/views/paymentMethod.vue

<template>
    <div :class="[list && list.length > 0 ?'mt32':'pagePadding']">
        <div :class="[list && list.length > 0 ? '' : 'flex-common']">
            <div class="pageheader flex-between mb32">
                <p class="littleTitle ">收款方式</p>
                <div class="button-group flex">
                    <GuipButton @click="goToWxPay" type="system" :btnstyle="{ width: '130px', height: '33px' }">增加微信收款</GuipButton>
                    <GuipButton @click="goBindPay" type="system"  :btnstyle="{ width: '130px', height: '33px' }">增加支付宝收款</GuipButton>
                </div>
            </div>
            <el-form>
                <GuipTable :tableData="payList" :loading="tableLoading">
                    <el-table-column prop="type" fixed="left" label="类型" width="140">
                        <template slot-scope="scope">
                            <div class="flex gap10">
                                <img v-show="scope.row.type == 2" class="pay_type_img" src="@/assets/weixin.svg" alt="">
                                <img v-show="scope.row.type == 3" class="pay_type_img" src="@/assets/zhifubao.svg" alt="">
                                {{ scope.row.type_desc }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="company_short_name" label="公司简称" min-width="160px"></el-table-column>
                    <el-table-column prop="appid" label="账号" min-width="288px"></el-table-column>
                    <el-table-column prop="expires_time_desc" label="有效期" min-width="260px"></el-table-column>
                    <el-table-column prop="status" label="上传证书" min-width="258px">
                        <template slot-scope="scope">
                            <div :class="'flex'+(scope.row.have_cert?'':' error')" v-if="scope.row.type == 2">
                                {{ scope.row.have_cert ? '已上传' : '未上传' }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="启用状态" min-width="130px">
                        <template slot-scope="scope">
                            <div class="flex">
                                <GuipSwitch v-model="scope.row.status" active-value="1" inactive-value="0"
                                    @change="updatePayStatus(scope.row)"></GuipSwitch>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" min-width="130px" fixed="right">
                        <template slot-scope="scope">
                            <div class="flex">
                                <el-button @click="paySetting(scope.row, scope.row.type)" type="text">修改</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </GuipTable>
            </el-form>
            <addPay :payType="addPayType" :visible="isShowAddPay" @update:visible="handleEvent" @update:data="handleUpdateEvent"
            :isExistSelfSupplys="isExistSelfSupplys" :doctor_id="doctor_id" :depart_id="depart_id" :checkAliPay="checkAliPay"></addPay>
        </div>
    </div>
</template>
<script>
import GuipTable from '@/components/GuipTable.vue';
import GuipSwitch from '@/components/GuipSwitch.vue';
import GuipButton from '@/components/GuipButton.vue';
import addPay from '@/components/addPay.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 {
    props:['doctor_id','depart_id','list'],

    data() {
        return {
            // 收款方式
            payTypeTaoBao: PAY_TYPE_TAOBAO,
            payTypeWeixin: PAY_TYPE_WEIXIN,
            payTypeAlipay: PAY_TYPE_ALIPAY,
            payTypeJingdong: PAY_TYPE_JINGDONG,
            payTypePdd: PAY_TYPE_PDD,
            payList: [
                // {
                //     company_short_name:'微信',
                //     type:2,
                //     appid:'29384923',
                //     mch_id:'98329032wer',
                //     pkey:'6634452qwjbj'
                // },
                // {
                //     company_short_name:'支付宝',
                //     type:3,
                //     appid:'0948032849023'
                // },
            ],
            tableLoading: true,
            doctorId:'',
            departId:'',
            isShowAddPay: false,
            addPayType: -1,
            isExistSelfSupplys: false,
            checkAliPay:null
        };
    },
    components: {
        GuipTable,
        GuipSwitch,
        GuipButton,
        addPay,

    },
    watch:{

        list: {
            deep: true,
            handler(newVal) {
                console.log(newVal,'newVal=====');
                this.payList = [...newVal];
                this.tableLoading = false;

            }
        }
    },
    created(){
        const {doctor_id,depart_id } = this.$route.query;
        if(depart_id && doctor_id){
            this.departId =depart_id;
            this.doctorId =doctor_id;
        }
        console.log(this.doctor_id,'=doctor_id===');

    },
    mounted() {
        if(this.doctor_id){
            this.getBindpayList()
        }
    },
    methods: {
        async getBindpayList() {
            await this.$http('POST', '/api/admin/get_pay_list', {
                doctor_id: this.doctor_id,
                depart_id: this.depart_id
            }).then(response => {
               this.payList = response.data;
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        handleEvent(data) {
            this.isShowAddPay = data;
        },
        handleUpdateEvent(data){
            if (data.type == this.payTypeWeixin) {
                this.bindWxpayId = data.payid;
                this.selectWxpay = data;
            }
            if (data.type == this.payTypeAlipay) {
                this.bindAlipayId = data.payid;
                this.selectAlipay = data;
            }
        },
        paySetting(row, payType) {
            if(payType == 3){
                this.checkAliPay = {...row}
                this.goBindPay()
            }else{
                this.goToWxPay(this.doctor_id,row.id)
            }
        },
        updatePayStatus(row) {
            this.$emit('updatePayStatus', row)
        },
        goToWxPay(doctor_id, pay_id){
            if(!doctor_id) doctor_id = this.doctor_id;
            var urlpath = `/setPaymentForm?doctor_id=${doctor_id}`;
            if(pay_id) urlpath += `&pay_id=${pay_id}`;

            this.$router.push(urlpath);
        },
        goBindPay() {
            this.addPayType = this.payTypeAlipay;
            this.isShowAddPay = true;
        },
    },


};
</script>
<style lang="scss" scoped>
.pay_type_img{
    width: 16px;
    height: 16px;
}
.error{
    color: #FD3B3B;
}
.pageheader{

}
</style>