NN2023021801/addons/dbapp/pagesGoods/pay/payBankBind.vue

<script>
import api from '@/api'
export default {
  data() {
    return {
      form: {
        phone: '',
        bank_card: '',
        name: '',
        id_card: ''
      },
      sign_url: '', // 签约 webview url

      popupShow: false,
      type: 1, // 1 储蓄卡 | 信用卡
      chuxuka: [], // 储蓄卡
      xinyongka: [] // 信用卡
    }
  },
  created() {
    this.getYlBindCanSignList()
  },
  methods: {
    validate() {
      if (!this.form.name) {
        this.$common.toast('请输入姓名')
        return
      } else if (!this.form.id_card) {
        this.$common.toast('请输入证件号')
        return
      } else if (!this.form.bank_card) {
        this.$common.toast('请输入卡号')
        return
      } else if (!this.form.phone) {
        this.$common.toast('请输入手机号')
        return
      }

      return true
    },
    async bind() {
      if (!this.validate()) return
      let res = await api.userToSignBank(this.form)
      this.sign_url = res.sign_url
      this.$refs.modal.show = true
    },
    async getYlBindCanSignList() {
      let res = await api.ylBindCanSignList()
      this.chuxuka = res.chuxuka
      this.xinyongka = res.xinyongka
    },
    jumpBrowser() {
      plus.runtime.openURL(this.sign_url)
      this.$refs.modal.show = false
    }
  }
}
</script>

<template>
  <view class="page bg-white">
    <view class="flex flex-between" @click="popupShow = true">
      <view class="title">查看可支持的银行</view>
      <u-icon name="arrow-right"></u-icon>
    </view>
    <view class="item borderTop flex align-center">
      <view class="item-title">姓名</view>
      <input
        v-model="form.name"
        type="text"
        class="input"
        placeholder="请填写证件姓名"
        placeholder-style="color:#BDBDC0"
      />
    </view>
    <view class="item flex align-center">
      <view class="item-title">身份证号</view>
      <input
        v-model="form.id_card"
        type="text"
        class="input"
        placeholder="请输入证件号"
        placeholder-style="color:#BDBDC0"
      />
    </view>
    <view class="item flex align-center">
      <view class="item-title">银行卡号</view>
      <input
        type="text"
        v-model="form.bank_card"
        class="input"
        placeholder="请输入卡号"
        placeholder-style="color:#BDBDC0"
      />
    </view>
    <view class="item flex align-center">
      <view class="item-title">手机号</view>
      <input
        v-model="form.phone"
        type="text"
        class="input"
        placeholder="请输入手机号"
        placeholder-style="color:#BDBDC0"
      />
    </view>

    <u-button
      text="确定绑定"
      color="#F7C363"
      @click="bind"
      shape="circle"
      customStyle="width:650rpx;height:108rpx; position:fixed;bottom:100rpx;left:50%;transform:translate(-50%)"
    ></u-button>

    <u-popup :show="popupShow" @close="popupShow = false" round="40" customStyle="padding:52rpx 0">
      <view class="head flex align-center">
        <view class="title flex1" :class="{ active: type === 1 }" @click="type = 1"
          >储蓄银行卡</view
        >
        <view class="title flex1" :class="{ active: type === 2 }" @click="type = 2">信用卡</view>
      </view>

      <view class="popup-list">
        <view class="popup-item" v-for="(item, i) in type === 1 ? chuxuka : xinyongka" :key="i">
          {{ item }}
        </view>
      </view>
    </u-popup>

    <!-- <web-view v-if="sign_url != ''" :src="sign_url"></web-view> -->

    <!-- <u-button
      v-if="sign_url != ''"
      text="签约成功或取消请点击"
      @click="sign_url = ''"
      shape="circle"
      color="var(--theme)"
      customStyle="position: fixed; left:0;top:0;z-index:10999;height:108rpx"
    ></u-button> -->

    <custom-modal ref="modal" :showBtn="false">
      <u-text
        text="请在浏览器完成签约，签约成功后再返回app继续支付"
        size="30rpx"
        align="center"
      ></u-text>

      <u-button
        text="去签约"
        color="var(--theme)"
        shape="circle"
        customStyle="width:500rpx;margin:40rpx 0 0"
        @click="jumpBrowser"
      ></u-button>
    </custom-modal>
  </view>
</template>

<style lang="scss" scoped>
.page {
  padding: 50rpx;

  .title {
    font-size: 30rpx;
    font-weight: 500;
    color: #232323;
    line-height: 32rpx;
  }

  .item {
    height: 120rpx;
    box-sizing: border-box;
    border-bottom: 1px solid #f0f0f0;

    .item-title {
      font-size: 30rpx;
      font-weight: 500;
      color: #232323;
      line-height: 32rpx;

      min-width: 200rpx;

      &:after {
        content: '*';
        color: #f76363;
      }
    }

    &.borderTop {
      border-top: 1px solid #f0f0f0;
      margin-top: 36rpx;
    }
  }
}

/deep/.u-fade-enter-active {
  z-index: 0 !important;
}

.head {
  height: 80rpx;
  .title {
    height: 80rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #232323;
    line-height: 36rpx;
    position: relative;
    text-align: center;

    &.active {
      font-weight: bold;

      &:after {
        content: '';
        display: block;
        width: 40rpx;
        height: 10rpx;
        background-color: #000;
        margin: 20rpx auto 0;
      }
    }
  }
}

.popup-list {
  height: 580rpx;
  overflow: auto;
  padding-left: 80rpx;
  .popup-item {
    height: 100rpx;
    line-height: 100rpx;

    font-size: 30rpx;
    font-weight: 500;
    color: #232323;
  }
}
</style>