kuailelunwen_new_houtai/src/components/site/addSiteStep/step2.vue

<template>
    <div>
        <div class="step2-wrap min-flex">
            <div class="flex-common">
                <h3>店铺收款</h3>

                <template v-if="!isJd">

                    <el-form ref="formRef" v-if="siteInfo.sale_channel === '0'">
                        <div class="flex-wrap">
                            <div class="flex-left">
                                <div class="shopadd-wrap" v-if="!taobaoList.length">
                                    <p class="shopadd-title">店铺授权</p>
                                    <div class="flex-between shopadd-area">
                                        <div>
                                            <p>请确保使用要添加的淘宝主账号登录并授权</p>
                                            <p>如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面。</p>
                                        </div>
                                        <GuipButton :disabled="!addablePays[payTypeTaoBao]" type="primary" :btnstyle="{ width: '88px', height: '33px', 'border-radius': '4px' }" @click="goBindPay(payTypeTaoBao)">前往添加</GuipButton>
                                    </div>
                                </div>
                                <GuipFormItem column="column" v-else>
                                    <div slot="formLeft" class="form-top-icon">
                                        <img src="@/assets/register/taobao.svg" style="width: 26px;height: 26px;" alt=""><span>淘宝/天猫店铺</span>
                                    </div>

                                    <CustomDropdown slot="formDom" width="100%" @change="changeSelectTaobao" valueKey="payid"
                                                    :options="taobaoList" :options_null="!taobaoList.length">

                                        <template #trigger>
                                            <span v-if="selectTaobao && (selectTaobao.short_name || selectTaobao.account)">{{ selectTaobao.short_name }} {{ selectTaobao.account }}</span>
                                            <span v-else-if="!taobaoList.length">暂无收款账号，稍后配置</span>
                                            <span v-else>未绑定店铺</span>
                                        </template>

                                        <template #normal>
                                            <div class="flex-between noraml-jump">
                                                <div class="left">
                                                    <b>添加新店铺</b>
                                                    <p class="one">请确保使用要添加的淘宝主账号登录并授权</p>
                                                    <p>如未购买"快乐帮手"服务或已过期，会跳转到购买服务页面</p>
                                                </div>
                                                <div class="right">
                                                    <GuipButton type="primary" size="medium" @click="goBindPay(payTypeTaoBao)">前往添加</GuipButton>
                                                </div>
                                            </div>
                                        </template>

                                        <template #item="{ item }">
                                            <div class="flex-between">
                                                <div class="left">
                                                    <p class="one">{{ item.account }}</p>
                                                    <p>{{ item.short_name }}</p>
                                                </div>
                                                <div class="right">
                                                    <img v-if="selectTaobao && selectTaobao.payid == item.payid" src="@/assets/register/drop-selected.svg" alt="">
                                                </div>
                                            </div>
                                        </template>
                                    </CustomDropdown>
                                </GuipFormItem>
                            </div>
                        </div>
                    </el-form>

                    <el-form ref="formRef" v-if="siteInfo.sale_channel === '1'">
                        <div class="flex-wrap">
                            <div class="flex-left">
                                <GuipFormItem column="column" class="mb24">
                                    <div slot="formLeft" class="form-top-icon">
                                        <img src="@/assets/register/weixin.svg" style="width: 26px;height: 26px;" alt=""><span>微信收款</span>
                                    </div>
                                    <CustomDropdown slot="formDom" width="100%" @change="changeSelectWeixin" valueKey="payid"
                                                    :options="wxpayList" :options_null="!wxpayList.length">
                                        <!-- 选择后显示数据 -->
                                        <template #trigger>
                                            <span v-if="selectWxpay && (selectWxpay.short_name || selectWxpay.account)">{{ selectWxpay.short_name }} {{ selectWxpay.account }}</span>
                                            <span v-else-if="wxpayList.length === 0">暂无收款账号，稍后配置</span>
                                            <span v-else>未绑定微信收款</span>
                                        </template>

                                        <!-- 自定义下拉选项 -->
                                        <template #normal>
                                            <div class="flex-between noraml-jump">
                                                <div class="left">
                                                    <b>绑定新微信收款</b>
                                                    <p class="one">需要使用您公司的微信支付</p>
                                                    <p>需在微信商户平台-产品中心开通Native支付</p>
                                                </div>
                                                <div class="right">
                                                    <GuipButton type="primary" size="medium" @click="goBindPay(payTypeWeixin)">前往绑定</GuipButton>
                                                </div>
                                            </div>
                                        </template>

                                        <template #item="{ item }">
                                            <div class="flex-between">
                                                <div class="left">
                                                    <p class="one">{{ item.short_name }}</p>
                                                    <p>{{ item.account }}</p>
                                                </div>
                                                <div class="right">
                                                    <img v-if="selectWxpay && selectWxpay.payid == item.payid" src="@/assets/register/drop-selected.svg" alt="">
                                                </div>
                                            </div>
                                        </template>
                                    </CustomDropdown>
                                </GuipFormItem>
                            </div>
                            <div class="flex-line"></div>
                            <div class="flex-right">
                                <!-- 支付宝 -->
                                <GuipFormItem column="column">
                                    <div slot="formLeft" class="form-top-icon">
                                        <img src="@/assets/register/zhifubao.svg" style="width: 26px;height: 26px;" alt=""><span>支付宝收款</span>
                                    </div>

                                    <CustomDropdown slot="formDom" width="100%" @change="changeSelectAlipay" valueKey="payid"
                                                    :options="alipayList" :options_null="!alipayList.length">

                                        <template #trigger>
                                            <span v-if="selectAlipay && (selectAlipay.short_name || selectAlipay.account)">{{ selectAlipay.short_name }} {{ selectAlipay.account }}</span>
                                            <span v-else-if="alipayList.length === 0">暂无收款账号，稍后配置</span>
                                            <span v-else>未绑定支付宝收款</span>
                                        </template>

                                        <template #normal>
                                            <div class="flex-between noraml-jump">
                                                <div class="left">
                                                    <b>绑定新支付宝收款</b>
                                                    <p class="one">需要使用您公司的支付宝支付</p>
                                                    <p>需在支付宝商户平台-产品中心开通Native支付</p>
                                                </div>
                                                <div class="right">
                                                    <GuipButton type="primary" size="medium" @click="goBindPay(payTypeAlipay)">前往绑定</GuipButton>
                                                </div>
                                            </div>
                                        </template>

                                        <template #item="{ item }">
                                            <div class="flex-between">
                                                <div class="left">
                                                    <p class="one">{{ item.short_name }}</p>
                                                    <p>{{ item.account }}</p>
                                                </div>
                                                <div class="right">
                                                    <img v-if="selectAlipay && selectAlipay.payid == item.payid" src="@/assets/register/drop-selected.svg" alt="">
                                                </div>
                                            </div>
                                        </template>
                                    </CustomDropdown>
                                </GuipFormItem>
                            </div>
                        </div>
                    </el-form>

                    <el-form ref="formRef" v-if="siteInfo.sale_channel === '3'">
                        <div class="flex-wrap">
                            <div class="flex-left">
                                <div class="shopadd-wrap" v-if="!pddList.length">
                                    <p class="shopadd-title">店铺授权</p>
                                    <div class="flex-between shopadd-area">
                                        <div>
                                            <p>请确保使用要添加的拼多多主账号登录并授权</p>
                                            <p>如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面。</p>
                                        </div>
                                        <GuipButton :disabled="!addablePays[payTypePdd]" type="primary" :btnstyle="{ width: '88px', height: '33px', 'border-radius': '4px' }" @click="goBindPay(payTypePdd)">前往添加</GuipButton>
                                    </div>
                                </div>
                                <GuipFormItem column="column" v-else>
                                    <div slot="formLeft" class="form-top-icon">
                                        <img src="@/assets/register/pinduoduo.svg" style="width: 26px;height: 26px;" alt=""><span>拼多多店铺</span>
                                    </div>

                                    <CustomDropdown slot="formDom" width="100%" @change="changeSelectPdd" valueKey="payid"
                                                    :options="pddList" :options_null="!pddList.length">

                                        <template #trigger>
                                            <span v-if="selectPdd && (selectPdd.short_name || selectPdd.account)">{{ selectPdd.short_name }} {{ selectPdd.account }}</span>
                                            <span v-else-if="pddList.length === 0">暂无收款账号，稍后配置</span>
                                            <span v-else>未绑定拼多多店铺</span>
                                        </template>

                                        <template #normal>
                                            <div class="flex-between noraml-jump">
                                                <div class="left">
                                                    <b>绑定新拼多多店铺</b>
                                                    <p class="one">如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面。</p>
                                                </div>
                                                <div class="right">
                                                    <GuipButton type="primary" size="medium" @click="goBindPay(payTypePdd)">前往绑定</GuipButton>
                                                </div>
                                            </div>
                                        </template>

                                        <template #item="{ item }">
                                            <div class="flex-between">
                                                <div class="left">
                                                    <p class="one">{{ item.short_name }}</p>
                                                    <p>{{ item.account }}</p>
                                                </div>
                                                <div class="right">
                                                    <img v-if="selectPdd && selectPdd.payid == item.payid" src="@/assets/register/drop-selected.svg" alt="">
                                                </div>
                                            </div>
                                        </template>
                                    </CustomDropdown>
                                </GuipFormItem>
                            </div>
                        </div>
                    </el-form>

                </template>

                <template v-else>
                    <el-form ref="formRef">
                        <div class="flex-wrap">
                            <div class="flex-left">
                                <div class="shopadd-wrap" v-if="!jdList.length">
                                    <p class="shopadd-title">店铺授权</p>
                                    <div class="flex-between shopadd-area">
                                        <div>
                                            <p>请确保使用要添加的京东主账号登录并授权</p>
                                            <p>如未购买＂快乐论文检测服务＂服务或已过期，会跳转到购买服务页面。</p>
                                        </div>
                                        <GuipButton :disabled="!addablePays[payTypeJingdong]" type="primary" :btnstyle="{ width: '88px', height: '33px', 'border-radius': '4px' }" @click="goBindPay(payTypeJingdong)">前往添加</GuipButton>
                                    </div>
                                </div>
                                <GuipFormItem column="column" v-else>
                                    <div slot="formLeft" class="form-top-icon">
                                        <img src="@/assets/register/jingdong.svg" style="width: 26px;height: 26px;" alt=""><span>京东店铺</span>
                                    </div>

                                    <CustomDropdown slot="formDom" width="100%" @change="changeSelectJindong" valueKey="payid"
                                                    :options="jdList" :options_null="!jdList.length">

                                        <template #trigger>
                                            <span v-if="selectJd && (selectJd.short_name || selectJd.account)">{{ selectJd.short_name }} {{ selectJd.account }}</span>
                                            <span v-else-if="jdList.length === 0">暂无收款账号，稍后配置</span>
                                            <span v-else>未绑定京东店铺</span>
                                        </template>

                                        <template #normal>
                                            <div class="flex-between noraml-jump">
                                                <div class="left">
                                                    <b>绑定新京东店铺</b>
                                                    <p class="one">如未购买＂快乐论文检测服务＂服务或已过期，会跳转到购买服务页面。</p>
                                                </div>
                                                <div class="right">
                                                    <GuipButton type="primary" size="medium" @click="goBindPay(payTypeJingdong)">前往绑定</GuipButton>
                                                </div>
                                            </div>
                                        </template>

                                        <template #item="{ item }">
                                            <div class="flex-between">
                                                <div class="left">
                                                    <p class="one">{{ item.short_name }}</p>
                                                    <p>{{ item.account }}</p>
                                                </div>
                                                <div class="right">
                                                    <img v-if="selectJd && selectJd.payid == item.payid" src="@/assets/register/drop-selected.svg" alt="">
                                                </div>
                                            </div>
                                        </template>
                                    </CustomDropdown>
                                </GuipFormItem>
                            </div>
                        </div>
                    </el-form>
                </template>

                <addPay :payType="addPayType" :visible="isShowAddPay" @update:visible="handleEvent" @update:data="handleUpdateEvent"
                        :taobaoAuthUrl="taobaoAuthUrl" :isExistSelfSupplys="isExistSelfSupplys" :pddAuthUrl="pddAuthUrl" :jdAuthUrl="jdAuthUrl"></addPay>
            </div>
        </div>

        <div class="register-btns">
            <GuipButton type="system" :btnstyle="{ width: '144px', height: '46px' }" @click="jumpStep">去首页</GuipButton>
            <GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="nextStep">下一步</GuipButton>
        </div>
    </div>
</template>
<script>


import GuipButton from "@/components/GuipButton.vue";
import addPay from "@/components/pay/addPay.vue";
import GuipFormItem from "@/components/GuipFormItem.vue";
import CustomDropdown from "@/components/CustomDropdown.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: 'domainSet',
  props: {
      siteInfo: {
          type: Object,
          required: true
      },
      isJd: {
          type: Boolean,
          default: false
      },
  },
  components: {
      CustomDropdown, GuipFormItem,
      addPay,
      GuipButton

  },
  data(){
    return {
        // 收款方式
        payTypeTaoBao: PAY_TYPE_TAOBAO,
        payTypeWeixin: PAY_TYPE_WEIXIN,
        payTypeAlipay: PAY_TYPE_ALIPAY,
        payTypeJingdong: PAY_TYPE_JINGDONG,
        payTypePdd: PAY_TYPE_PDD,

        taobaoList: [],
        wxpayList: [],
        alipayList: [],
        pddList: [],
        jdList: [],

        bindWxpayId: 0,
        selectWxpay: null,
        bindAlipayId: null,
        selectAlipay: null,
        bindTaobaoId: 0,
        selectTaobao: null,
        bindPddId: 0,
        selectPdd: null,
        bindJdId: 0,
        selectJd: null,

        addPayType: -1,
        isShowAddPay: false,
        addablePays: [],

        // 淘宝授权url
        taobaoAuthUrl: '',
        // 是否存在自供货 存在自供货 则不支持支付宝代收款
        isExistSelfSupplys: false,
        // 拼多多授权url
        pddAuthUrl: '',
        // 拼多多店铺名称
        pdd_shop_name: '',
        // 京东授权url
        jdAuthUrl: '',
    }
  },
  mounted() {
      if(Object.keys(this.siteInfo).length === 0) {
          this.$message.error('未知错误');
          this.$emit('handelStep', 1)
          return false;
      }

      if(this.siteInfo.sale_channel === '2'){
          this.$emit('handelStep', 3)
          return false;
      }

      this.getSitePayIndex()
      this.getPayList()
      this.getAddablePays()
  },
  methods:{
      // 获取支付列表
      getSitePayIndex() {
          this.$http('POST', '/agentnew/ajax_get_site_pay_index', {
              uid: this.siteInfo.uid
          }).then(response => {
              if(Object.keys(response.data).length>0){
                  console.log(response.data)
                  this.$nextTick(() => {
                      if (response.data[this.payTypeWeixin]) {
                          this.bindWxpayId = response.data[this.payTypeWeixin].payid;
                          this.selectWxpay = response.data[this.payTypeWeixin];
                      }
                      if (response.data[this.payTypeAlipay]) {
                          this.bindAlipayId = response.data[this.payTypeAlipay].payid;
                          this.selectAlipay = response.data[this.payTypeAlipay];
                      }
                      if (response.data[this.payTypeTaoBao]) {
                          this.bindTaobaoId = response.data[this.payTypeTaoBao].payid;
                          this.selectTaobao = response.data[this.payTypeTaoBao];
                      }
                      if (response.data[this.payTypePdd]) {
                          this.bindPddId = response.data[this.payTypePdd].payid;
                          this.selectPdd = response.data[this.payTypePdd];
                      }
                      if (response.data[this.payTypeJingdong]) {
                          this.bindJdId = response.data[this.payTypeJingdong].payid;
                          this.selectJd = response.data[this.payTypeJingdong];
                      }
                  })
              }
          }).catch(error => {
              console.error(error, 'error')
          })
      },
      // 获取支付列表
      getPayList() {
          this.$http('POST', '/agentnew/ajax_get_pay_list', {
              uid: this.siteInfo.uid
          }).then(response => {
              this.$nextTick(() => {
                  if (
                      response.data &&
                      response.data.paylist &&
                      response.data.paylist[this.payTypeWeixin] &&
                      response.data.paylist[this.payTypeWeixin].length > 0
                  ) {
                      this.wxpayList = response.data.paylist[this.payTypeWeixin]
                  }
                  if (
                      response.data &&
                      response.data.paylist &&
                      response.data.paylist[this.payTypeAlipay] &&
                      response.data.paylist[this.payTypeAlipay].length > 0
                  ) {
                      this.alipayList = response.data.paylist[this.payTypeAlipay]
                  }
                  if (
                      response.data &&
                      response.data.paylist &&
                      response.data.paylist[this.payTypeTaoBao] &&
                      response.data.paylist[this.payTypeTaoBao].length > 0
                  ) {
                      this.taobaoList = response.data.paylist[this.payTypeTaoBao]
                  }
                  if (
                      response.data &&
                      response.data.paylist &&
                      response.data.paylist[this.payTypePdd] &&
                      response.data.paylist[this.payTypePdd].length > 0
                  ) {
                      this.pddList = response.data.paylist[this.payTypePdd]
                  }
                  if (
                      response.data &&
                      response.data.paylist &&
                      response.data.paylist[this.payTypeJingdong] &&
                      response.data.paylist[this.payTypeJingdong].length > 0
                  ) {
                      this.jdList = response.data.paylist[this.payTypeJingdong]
                  }
              })
          }).catch(error => {
              console.error(error, 'error')
          })
      },
      // 获取可添加的收款方式
      getAddablePays() {
          this.$http('POST', '/agentnew/ajax_get_addable_pays', {}).then(response => {
              this.$nextTick(() => {
                  this.addablePays = response.data
                  if(response.data[PAY_TYPE_TAOBAO]) {
                      this.taobaoAuthUrl = response.data[PAY_TYPE_TAOBAO].authurl
                  }

                  if (response.data[PAY_TYPE_ALIPAY]) {
                      this.isExistSelfSupplys = response.data[PAY_TYPE_ALIPAY].is_exist_self_supplys
                  }

                  if (response.data[PAY_TYPE_PDD]) {
                      this.pddAuthUrl = response.data[PAY_TYPE_PDD].authurl
                  }

                  if (response.data[PAY_TYPE_JINGDONG]) {
                      this.jdAuthUrl = response.data[PAY_TYPE_JINGDONG].authurl
                  }

              })
          }).catch(error => {
              console.error(error, 'error')
          })
      },
      changeSelectWeixin(item) {
          if(this.bindWxpayId === item.payid){
              this.bindWxpayId = 0
              this.selectWxpay = null
              return true
          }
          this.bindWxpayId = item.payid;
          this.selectWxpay = item;
      },
      changeSelectAlipay(item) {
          if(this.bindAlipayId === item.payid){
              this.bindAlipayId = 0
              this.selectAlipay = null
              return true
          }
          this.bindAlipayId = item.payid;
          this.selectAlipay = item;
      },
      changeSelectTaobao(item) {
          if(this.bindTaobaoId === item.payid){
              this.bindTaobaoId = 0
              this.selectTaobao = null
              return true
          }
          this.bindTaobaoId = item.payid;
          this.selectTaobao = item;
      },
      changeSelectJindong(item) {
          if(this.bindJdId === item.payid){
              this.bindJdId = 0
              this.selectJd = null
              return true
          }
          this.bindJdId = item.payid;
          this.selectJd = item;
      },
      changeSelectPdd(item) {
          if(this.bindPddId === item.payid){
              this.bindPddId = 0
              this.selectPdd = null
              return true
          }
          this.bindPddId = item.payid;
          this.selectPdd = item;
      },
      goBindPay(type) {
          this.addPayType = type;
          this.isShowAddPay = true;
      },
      handleEvent(data) {
          this.isShowAddPay = data
          this.getPayList()
          this.getAddablePays()
      },
      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
          }
          if (data.type == this.payTypeTaoBao) {
              this.bindTaobaoId = data.payid
              this.selectTaobao = data
          }
          if (data.type == this.payTypePdd) {
              this.bindPddId = data.payid
              this.selectPdd = data
          }
          if (data.type == this.payTypeJingdong) {
              this.bindJdId = data.payid
              this.selectJd = data
          }
      },
      jumpStep(){
          this.$router.push('/')
      },
      nextStep() {
          var data = {
              uid: this.siteInfo.uid,
              open_processs: 4,
              pay_config: {},
          }
          if(this.siteInfo.sale_channel === '0'){
              if(this.isJd && this.bindJdId) data.pay_config = { 4: this.bindJdId }
              if(!this.isJd && this.bindTaobaoId) data.pay_config = { 0: this.bindTaobaoId }
          }
          if(this.siteInfo.sale_channel === '1'){
              if(this.bindWxpayId) data.pay_config = { 2: this.bindWxpayId }
              if(this.bindAlipayId) data.pay_config = { 3: this.bindAlipayId }
          }
          if(this.siteInfo.sale_channel === '3'){
              if(this.bindPddId) data.pay_config = { 11: this.bindPddId }
          }
          if(Object.keys(data.pay_config).length === 0) {
              this.$Message.error('请绑定收款方式');
              return false
          }

          this.$http('POST', '/agentnew/ajax_update_site_pay', data).then(response => {
              this.$nextTick(() => {
                  if (response.status) {
                      this.$emit('handelStep', 3)
                      return true;
                  }
                  this.$Message.error(response.info);
              })
          }).catch(error => {
              console.error(error, 'error')
          })
      },
  }
}
</script>
<style lang="scss">
.shopadd-wrap{
  .shopadd-title{
    color: #1E2226;
    letter-spacing: 0.08em;
    font-size: 14px;
    margin-bottom: 12px;
    text-align: left;
  }
  .shopadd-area{
    width: 510px;
    padding: 24px;
    border-radius: 4px;
    background: #FAFAFA;
    div{
      letter-spacing: 0.08em;
      font-size: 12px;
      text-align: left;
      color: #626573;

      p:first-child{
        font-size: 14px;
        color: #1E2226;
        margin-bottom: 12px;
      }
    }
  }
}
</style>