NN2023021801/addons/dbapp/pagesGoods/pay/components/payZL.vue

<script>
import api from '@/api'

export default {
  name: 'payZL',
  props: {
    bankList: {
      type: Array,
      default: () => []
    },
    channel: {
      type: [String, Number],
      default: ''
    },
    order_id: {
      type: String,
      default: ''
    },
    order_type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      show: false,
      selectBank: {},
      code: '', // 短信验证码
      yl_order_id: '' // 银行卡支付 时返回的 order_id
    }
  },
  methods: {
    close() {
      this.show = false
      uni.$emit('payZLClose')
    },
    selectedBank(item) {
      this.selectBank = item
      this.createPayOrder()
    },
    async createPayOrder() {
      let res = await api.paymentInfo(
        {
          order_id: this.order_id,
          sign_id: this.selectBank.id,
          channel: this.channel,
          order_type: this.order_type,
          trade_type: 'app'
        },
        true
      )

      this.yl_order_id = res.thirdpaySYL.orderid
      this.$refs.modal.show = true
    },
    // 银行卡支付
    async sylSurePay() {
      try {
        await api.sylSurePay({ order_id: this.yl_order_id, sms_code: this.code }, true)

        if (this.order_type === '4') {
          this.$common.toast('支付订单提交成功，请稍后关注订单列表~')
          setTimeout(() => {
            this.$jump({ url: '/pagesGoods/order/orderList' }, { status: -1 }, 'redirectTo')
          }, 1000)
        } else if (this.order_type === '6') {
          // 先把这个支付弹窗给关闭了
          this.$refs.modal.show = false

          this.$nextTick(() => {
            // 开通服务商弹窗提示
            this.$refs.modal3.show = true
            // 刷新用户信息
            this.$store.dispatch('refreshUser')
          })
        }
      } catch (e) {
        this.$common.toast('支付失败')
        this.$refs.modal.show = false
      }
    },
    // 解绑
    async unBind() {
      await api.userToUnSignBank(this.selectBank.id)
      this.$refs.modal2.show = false
      this.$common.toast('解绑成功')
      await this.getBankList()
    }
  }
}
</script>

<template>
  <view>
    <!-- 银行卡弹窗 -->
    <u-popup
      :show="show"
      @close="close"
      customStyle="box-sizing:border-box; padding:60rpx 28rpx 65rpx"
    >
      <u-text size="34rpx" text="选择银行卡" align="center" bold></u-text>

      <view class="popup-list">
        <view
          class="popup-item flex align-center"
          v-for="item in bankList"
          :key="item.id"
          @click="selectedBank(item)"
        >
          <view class="flex1">
            <view class="info">
              <text class="name">持卡人：{{ item.name }}</text>
              <text class="tel">Tel：{{ item.phone }}</text>
            </view>
            <view class="card flex">
              <image src="/static/images/pay/yhk_chose.png" class="img"></image>
              <view class="ml-10">银行卡：{{ item.bank_card }}</view>
            </view>
          </view>
          <image
            @click.stop="
              selectBank = item
              $refs.modal2.show = true
            "
            src="/static/images/pay/jiebang.png"
            class="jiebang"
          ></image>
        </view>

        <u-text
          v-if="bankList.length === 0"
          text="暂无绑定银行卡哦~"
          type="info"
          align="center"
          size="30rpx"
        ></u-text>
      </view>

      <view class="flex mt-30" @click="$jump({ url: './payBankBind' })">
        <image src="/static/images/pay/tj_yhk_blue.png" class="plus"></image>
        <view class="f32 bold">添加银行卡</view>
      </view>
    </u-popup>

    <!-- 银行卡支付弹窗 -->
    <custom-modal ref="modal" zIndex="10077" overlayZIndex="10076" :showBtn="false">
      <u-text
        :text="`请输入手机号：${selectBank.phone}`"
        size="28rpx"
        align="center"
        margin="20rpx 0 0"
        bold
      ></u-text>
      <u-text text="接收的短信验证码" align="center" size="28rpx" margin="0 0 40rpx" bold></u-text>

      <input
        v-model="code"
        type="number"
        class="modal-input"
        placeholder="请输入短信验证码"
        placeholder-style="font-size: 28rpx;font-weight: 500;color: #BDBDC0;line-height: 32rpx;"
      />

      <u-text
        text="请注意短信包含汇付宝字样短信，请确定手机号不在欠费停机状态，以及信号良好情况。如果一直没收到，请联系客服"
        color="#F76363"
        size="24rpx"
        margin="30rpx 0 40rpx"
      ></u-text>

      <u-button
        text="提交"
        shape="circle"
        color="#F7C363"
        customStyle="width: 320rpx;height: 88rpx;"
        @click="sylSurePay"
      ></u-button>
    </custom-modal>

    <!-- 解绑弹窗 -->
    <custom-modal
      ref="modal2"
      content="是否确认解绑银行卡"
      @confirm="unBind"
      zIndex="10079"
      overlayZIndex="10078"
    ></custom-modal>

    <!-- 服务商弹窗提示 -->
    <custom-modal
      ref="modal3"
      content="服务商开通支付已提交，订单处理稍有延迟，请勿重复开通，如十五分钟之后还未开通，请联系在线客服"
      :show-cancel="false"
      :close-on-click-overlay="false"
      @confirm="$common.back"
    >
    </custom-modal>
  </view>
</template>

<style lang="scss" scoped>
.popup-list {
  margin-top: 50rpx;
  height: 400rpx;
  overflow-y: auto;

  .popup-item {
    height: 156rpx;
    background: #f4f4f4;
    border-radius: 10px;
    padding: 37rpx 25rpx 28rpx;
    box-sizing: border-box;

    & + .popup-item {
      margin-top: 20rpx;
    }

    .info {
      color: #959595;
      font-size: 26rpx;

      .name {
        margin-right: 38rpx;
      }
    }

    .card {
      margin-top: 27rpx;
      .img {
        width: 48rpx;
        height: 39rpx;
      }
    }

    .jiebang {
      width: 120rpx;
      height: 57rpx;
    }
  }
}

.plus {
  width: 40rpx;
  height: 40rpx;
  margin: 0 30rpx;
}

.modal-input {
  height: 88rpx;
  background: #f4f4f4;
  border-radius: 10px;
  padding: 0 30rpx;
}
</style>