web-base-h5/pages/pay/hiPay.vue

<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2022-11-21 15:11:22
-->
<template>
  <view class="content">
    <view class="index_header">
    </view>
    <view class="contxt">
      <template>
        <view class="tit">{{'待支付金额'}}</view>
        <view class="tit1">
          ￥{{ paramsPost.orderAmount | numberToCurrency }}
        </view>
        <view class="tit2">{{'请在'}}
          <view class="tit3">{{ countDown }}</view>{{'内完成支付，否则订单将会被自动取消'}}
        </view>
      </template>
      <!-- 暂时隐藏 -->
      <view v-if="false" class="kuang">

        <u-collapse :value="activeNames"
                    ref="collapse"
                    @open="change"
                    @close="close"
                    accordion
                    :border="false">
          <u-collapse-item name="1">
            <view slot="title"
                  class="pf"> <img src="@/static/images/under_pay.png"
                   alt="" />
              <view>{{'在线支付'}}</view>
            </view>
            <view class="flex_ac"
                  v-show="this.payList.pay11">
              <view class="flex_ac_i">
                <img src="@/static/images/pay_i2.png"
                     alt="" />
                <view>{{'宝付微信支付'}}</view>
              </view>
              <u-radio-group v-model="whatPay">
                <u-radio activeColor="red"
                         size="14"
                         label=""
                         :name="11">
                </u-radio>
              </u-radio-group>
            </view>
            <view class="flex_ac"
                  v-show="this.payList.pay12">
              <view class="flex_ac_i">
                <img src="@/static/images/pay_i2.png"
                     alt="" />
                <view>{{'宝付微信扫码'}}</view>
              </view>
              <u-radio-group v-model="whatPay">
                <u-radio activeColor="red"
                         size="14"
                         label=""
                         :name="12">
                </u-radio>
              </u-radio-group>
            </view>

            <view class="flex_ac"
                  v-show="this.payList.pay13">
              <view class="flex_ac_i">
                <img src="@/static/images/pay_i2.png"
                     alt="" />
                <view>{{'汇付微信支付'}}</view>
              </view>
              <u-radio-group v-model="whatPay">
                <u-radio activeColor="red"
                         size="14"
                         label=""
                         :name="13">
                </u-radio>
              </u-radio-group>
            </view>
            <view class="flex_ac1"
                  v-show="this.payList.pay15">
              <view class="flex_ac_i">
                <img src="@/static/images/jdBank.jpg"
                     alt="" />
                <view>{{'汇付银行卡'}} ({{ '暂不支持信用卡' }})</view>
              </view>
              <view class="pad">
                <view v-for="(item, index) in hfList"
                      :key="index"
                      class="pay_flax flex_bet"
                      @click.prevent="selPayRadio('hf' + index)">
                  <view class="flax_i">
                    {{ item.bankName }} ({{ item.bankNo }})
                  </view>
                  <u-radio-group v-model="whatPay">
                    <u-radio activeColor="red"
                             size="14"
                             label=''
                             :name="'hf' + index">
                    </u-radio>
                  </u-radio-group>
                </view>
                <view class="pay_flax flax_i"
                      @click="bindBank('hf')">
                  <img class="img1"
                       src="@/static/images/addto.png"
                       alt="" />
                  <view>{{'绑定银行卡'}}</view>
                </view>
              </view>
            </view>
            <view class="flex_ac"
                  v-show="this.payList.pay32">
              <view class="flex_ac_i">
                <img src="@/static/images/pay_i2.png"
                     alt="" />
                <view>通联微信支付</view>
              </view>
              <u-radio-group v-model="whatPay">
                <u-radio activeColor="red"
                         size="14"
                         label=""
                         :name="32">
                </u-radio>
              </u-radio-group>
            </view>
            <view class="flex_ac1"
                  v-show="this.payList.pay33">
              <view class="flex_ac_i">
                <img src="@/static/images/jdBank.jpg"
                     alt="" />
                <view>{{'通联银行卡'}} ({{ '暂不支持信用卡' }})</view>
              </view>
              <view class="pad">
                <view v-for="(item, index) in tlList"
                      :key="index"
                      class="pay_flax flex_bet"
                      @click.prevent="selPayRadio('tl' + index)">
                  <view class="flax_i">
                    {{ item.bankName }} ({{ item.bankNo }})
                  </view>
                  <u-radio-group v-model="whatPay">
                    <u-radio activeColor="red"
                             size="14"
                             label=''
                             :name="'tl' + index">
                    </u-radio>
                  </u-radio-group>
                </view>
                <view class="pay_flax flax_i"
                      @click="bindBank('tl')">
                  <img class="img1"
                       src="@/static/images/addto.png"
                       alt="" />
                  <view>{{'绑定银行卡'}}</view>
                </view>
              </view>
            </view>
            <view class="flex_ac1"
                  v-show="this.payList.pay4">
              <view class="flex_ac_i">
                <img src="@/static/images/jdBank.jpg"
                     alt="" />
                <view>{{'京东银行卡'}} ({{ '暂不支持信用卡' }})</view>
              </view>
              <view class="pad">
                <view v-for="(item, index) in jdList"
                      :key="index"
                      class="pay_flax flex_bet"
                      @click.prevent="selPayRadio('jd' + index)">
                  <view class="flax_i">
                    {{ item.bankName }} ({{ item.bankNo }})
                  </view>
                  <u-radio-group v-model="whatPay">
                    <u-radio activeColor="red"
                             size="14"
                             label=''
                             :name="'jd' + index">
                    </u-radio>
                  </u-radio-group>
                </view>
                <view class="pay_flax flax_i"
                      @click="bindBank('jd')">
                  <img class="img1"
                       src="@/static/images/addto.png"
                       alt="" />
                  <view>{{'绑定银行卡'}}</view>
                </view>
              </view>
            </view>

          </u-collapse-item>

        </u-collapse>
      </view>
    </view>
    <!-- 底部 -->
    <view class="footer_f">
      <view class="footer">
        <view class="footer_r">
          <u-button type="success"
                    class="uBtn"
                    shape="circle"
                    :loading="isLoading"
                    loadingText="支付中"
                    @tap="quickPay(ifcz)"
                    color="linear-gradient(to right, #005BAC, #005BAC )">{{'立即支付'}}
          </u-button>
        </view>
      </view>
    </view>
    <!-- 输入验证码，密码 -->
    <u-popup :show="isPw"
             mode="center"
             closeable
             @close="closePw">
      <view class="t_tit">{{'支付验证'}}</view>
      <view class="box">

        <view class="c_tit">{{'请输入短信验证码'}}</view>

        <u--input border="surround"
                  v-model="codeValue"></u--input>

        <u-button type="success"
                  class="uBtn"
                  shape="circle"
                  :loading="isLoading"
                  loadingText="支付中"
                  @tap="payPw()"
                  color="linear-gradient(to right, #005BAC, #005BAC )">{{'立即支付'}} </u-button>
      </view>
    </u-popup>
    <!-- 成功 -->
    <u-modal :show="showSucce"
             showConfirmButton
             :content='content'
             confirmColor='#DE3932'
             @confirm="reset"
             ref="uModal"
             :asyncClose="true"></u-modal>
    <!-- 二维码 -->
    <u-popup :show="wxPopup"
             mode="center"
             closeable
             @close="closewxPopup">
      <view class="t_tit">{{'微信支付'}}</view>
      <view class="pay_code">
        <div ref="qrCodeUrlWx"
             class="qrcode"></div>
      </view>
    </u-popup>
    <hiSuccess @successClose="successClose"
               ref="hiSuccess"></hiSuccess>
  </view>
</template>

<script>
import * as api from '@/config/pay.js'
import QRCode from 'qrcodejs2'
import { removeToken } from '@/config/auth.js'

import hiSuccess from '@/components/hiSuccess.vue'
import * as act from '@/config/activity.js'
var payStatus
export default {
  components: {
    hiSuccess,
  },
  data() {
    return {
      payList: {},
      isLoading: false,
      clockTime: '',
      specialArea: '',
      orderCode: '',
      orderData: {
        orderAmount: '',
      },
      countDown: '',
      payDetail: {
        payAccount1: 1,
      },
      paramsPost: '',
      isShare: false, //分享用户第一次爆单
      userInfo: '',
      activeNames: 1,
      whatPay: '',
      hfList: [],
      jdList: [],
      businessType: '',
      isBank: '',
      isPw: false,
      codeValue: '',
      bindCode: '',
      showSucce: false, //
      sucPay: 0,
      content: '支付成功',
      wxPopup: false,
      luckydrawData: {},
      ifcz: false,
      czJe: '',
      tlList: [],
    }
  },
  onLoad(options) {
    this.paramsPost = JSON.parse(options.paramsPost)
    console.log(
      '%c [ this.paramsPost ]-170',
      'font-size:13px; background:#669153; color:#aad597;',
      this.paramsPost
    )

    this.pkCountry = uni.getStorageSync('pkCountry')
    // if (this.paramsPost.ifcz) {
    // 	this.ifcz = this.paramsPost.ifcz
    // 	this.businessType = 3
    // 	uni.setNavigationBarTitle({
    // 		title: '充值'
    // 	});
    // } else {
    // 	uni.setNavigationBarTitle({
    // 		title: '订单支付'
    // 	});
    // 	this.ifcz = false
    // 	if (JSON.parse(options.paramsPost).orderType == 4) {
    this.orderCode = this.paramsPost.orderCode
    // 		this.luckydrawData = this.paramsPost.luckydrawData
    // 		// 抽奖支付处理（查询订单支付信息以及显示等）
    // 		this.businessType = 4 //抽奖
    // 		this.specialArea = this.paramsPost.specialArea
    // 		this.getLuckdrawDetail()
    // 	} else {
    // 		this.userInfo = uni.getStorageSync('User')
    // 		if (
    // 			this.userInfo.registerFans == 0
    // 		) {
    // 			this.isShare = true
    // 		}

    // 		this.specialArea =
    // 			this.paramsPost.specialArea || this.paramsPost.orderType
    // 		this.orderCode = this.paramsPost.orderCode
    // 		this.businessType = options.businessType
    // 		// this.getInfo()

    // 		// 获取订单信息
    // 		this.getOrderInfo()
    // 		if (!this.isShare) {
    // 			// 获取消费信息
    // 			this.getSpendInfo()
    // 		}
    // 	}
    // }

    // 获取支付配置
    this.getPayConfig()
    this.downTime()
    // clearInterval(this.clockTime)
  },

  onShow() {
    // 获取银行卡
    // this.getBankList()
  },
  methods: {
    //查询充值抽奖次数
    getLuckdrawDetail() {
      // 抽奖支付处理（查询订单支付信息以及显示等）
      act
        .getLuckdrawDetail({
          pkBaseId: this.luckydrawData.pkBaseId,
          payNum: this.luckydrawData.payNum,
        })
        .then((res) => {
          if (res.code == 200) {
            this.orderData.orderAmount = res.data.toBePaidMoney
            this.payDetail = res.data
            // this.downTime()
          }
        })
    },
    closewxPopup() {
      this.wxPopup = false
      this.$refs.qrCodeUrlWx.innerHTML = ''
      clearInterval(payStatus)
    },
    // 绑定银行卡
    bindBank(val) {
      uni.navigateTo({
        url: '/pages/pay/bindBank?bank=' + val,
      })
    },

    selPayRadio(val, e) {
      if (e) {
        e.stopPropagation()
      }
      this.whatPay = val
    },
    closePw() {
      this.isPw = false
      clearInterval(payStatus)
    },
    successClose() {
      removeToken()
      uni.redirectTo({
        url: '/pages/login/index',
      })
    },
    fansOrder() {
      api.fansOrder(this.orderCode).then((res) => {
        this.isLoading = false
        this.isPw = false
        removeToken()
        this.$refs.hiSuccess.showSuccess(res.data)
      })
    },
    payPw() {
      let url, obj
      // 银行卡
      if (this.isBank == 'hf') {
        url = api.payConfirmHf
      } else if (this.isBank == 'jd') {
        url = api.payConfirmJd
      } else if (this.isBank == 'tl') {
        url = api.payConfirmTl
      }
      obj = {
        orderCode: this.orderCode,
        bindCode: this.bindCode,
        specialArea: 7,
        smsCode: this.codeValue,
        pkSettleCountry: this.pkCountry,
      }
      this.isLoading = true
      url(obj).then((res) => {
        if (res.code == 200) {
          // this.isPw = false
          //   this.$refs.hiSuccess.showSuccess(res.data)
          uni.showToast({
            title: res.msg,
            icon: 'none',
            duration: 1500,
          })
          //     uni.redirectTo({
          //       url: '/pages/login/login',
          //     })
          this.isLoading = false
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
            duration: 1500,
          })
          this.isLoading = false
        }
      })
    },
    quickPay(cz) {
      // 非银行卡
      if (typeof this.whatPay == 'number') {
        if (this.whatPay == 12) {
          this.scanPayBfWx(5)
        } else if (this.whatPay == 13) {
          this.scanPayBfWx(6)
        } else if (this.whatPay == 11) {
          this.scanPayBfWxJump(5)
        } else if (this.whatPay == 32) {
          this.scanPayTlWxJump(3)
        }
      } else {
        if (this.whatPay.slice(0, 2) == 'hf') {
          let indexed = this.whatPay.slice(2, 4)
          let params = {
            businessType: 1, //订单类型
            businessCode: this.orderCode,
            payChannel: 6, //汇付
            payType: 3, //银行卡
            bindCode: this.hfList[indexed].bindCode,
          }
          api.unifiedorder(params).then((response) => {
            this.isBank = 'hf'
            this.bindCode = this.hfList[indexed].bindCode
            this.isPw = true
          })
          this.checkPayStatus(params)
        } else if (this.whatPay.slice(0, 2) == 'jd') {
          let indexed = this.whatPay.slice(2, 4)

          let params = {
            businessType: 1, //订单类型
            businessCode: this.orderCode,
            payChannel: 4, //京东
            payType: 3, //银行卡
            bindCode: this.jdList[indexed].bindCode,
          }
          api.unifiedorder(params).then((response) => {
            this.isBank = 'jd'
            this.bindCode = this.jdList[indexed].bindCode
            this.isPw = true
          })
          this.checkPayStatus(params)
        } else if (this.whatPay.slice(0, 2) == 'tl') {
          let indexed = this.whatPay.slice(2, 4)
          let params = {
            businessType: 1, //订单类型
            businessCode: this.orderCode,
            payChannel: 3, //通联
            payType: 3, //银行卡
            bindCode: this.tlList[indexed].bindCode,
          }
          api.unifiedorder(params).then((response) => {
            this.isBank = 'tl'
            this.bindCode = this.tlList[indexed].bindCode
            this.isPw = true
          })
          this.checkPayStatus(params)
        }
      }
    },
    // 宝付微信支付
    scanPayBfWxJump(val) {
      let params = {
        businessType: 1,
        businessCode: this.orderCode,
        payChannel: val,
        payType: 2,
        appletFlag: 0,
      }
      api.unifiedorder(params).then((res) => {
        let url =
          'https://cloud1-8gp1n6uofa17e2e2-1315820965.tcloudbaseapp.com/jump_mp.html?sign=8587800b05c859700944247c03eeae1c&t=1698224973&state=' +
          res.data
        window.open(url)
      })
      this.checkPayStatus(params)
    },
    // 通联微信支付
    scanPayTlWxJump(val) {
      let params = {
        businessType: 1, //订单类型充值
        businessCode: this.orderCode,
        payChannel: val,
        payType: 2,
        appletFlag: 0,
      }
      api.unifiedorder(params).then((res) => {
        let url =
          'https://cloud1-1gql8u3v1fe85a37-1322999719.tcloudbaseapp.com/jump_mp.html?sign=d77deffc9e8aecd2b721f8430c376370&t=1705374125&state=' +
          res.data
        window.open(url)
      })
      this.checkPayStatus(params)
    },
    scanPayBfWx(val) {
      let params = {
        businessType: 1,
        businessCode: this.orderCode,
        payChannel: val,
        payType: 2,
      }
      api.unifiedorder(params).then((res) => {
        this.wxPopup = true
        this.$nextTick(() => {
          new QRCode(
            this.$refs.qrCodeUrlWx,
            {
              width: 280,
              height: 280,
              text: res.data,
              colorDark: '#000000',
              colorLight: '#ffffff',
              correctLevel: QRCode.CorrectLevel.Q,
              textAlign: 'center',
            },
            1000
          )
        })
      })
      this.checkPayStatus(params)
    },
    change(e) {
      this.activeNames = e
    },
    close(e) {
      if (e == 1) {
        this.activeNames = 2
      } else {
        this.activeNames = 1
      }
    },
    getPayConfig() {
      api.payConfig().then((res) => {
        this.payList = res.data
        this.$nextTick(() => {
          this.$refs.collapse.init()
        })
        this.$forceUpdate()
      })
    },
    getBankList() {
      api.jdBankList().then((res) => {
        this.jdList = res.data
      })
      // api.hfBankList().then((res) => {
      //   this.hfList = res.data
      // })
      // api.tlBankList().then((res) => {
      //   this.tlList = res.data
      // })
      this.$nextTick(() => {
        this.$refs.collapse.init()
      })
      this.$forceUpdate()
    },
    getOrderInfo() {
      api
        .orderInfo({
          specialArea: this.specialArea,
          orderCode: this.orderCode,
          pkSettleCountry: this.pkCountry,
        })
        .then((res) => {
          this.orderData = res.data
          this.downTime()
        })
    },
    downTime() {
      let that = this
      this.clockTime = setInterval(() => {
        if (that.paramsPost.payTime && that.paramsPost.payTime > 0) {
          that.countDown = this.getTime(this.paramsPost.payTime--)
        } else {
          that.countDown = '00:00:00'
        }
      }, 1000)
    },
    getSpendInfo() {
      api
        .spendDetails({
          specialArea: this.specialArea,
          orderCode: this.orderCode,
          pkSettleCountry: this.pkCountry,
        })
        .then((res) => {
          // this.payDetail = res.data
          this.$set(this, 'payDetail', res.data)
        })
    },
    reset() {
      this.$store.dispatch('GetInfo').then((res) => {
        uni.reLaunch({
          url: '/pages/index/index',
        })
      })
    },
    // 查询订单状态
    checkPayStatus(data) {
      let that = this
      // 定时器
      payStatus = setInterval(() => {
        if (that.sucPay == 1) {
          // 清除定时器
          clearInterval(payStatus)
          this.wxPopup = false
          // this.showSucce = true
          this.fansOrder()
        } else {
          api.payStatus(data).then((res) => {
            that.sucPay = res.data
          })
        }
      }, 2000)
    },
    getTime(time) {
      // 转换为式分秒
      let h = parseInt((time / 60 / 60) % 24)
      h = h < 10 ? '0' + h : h
      let m = parseInt((time / 60) % 60)
      m = m < 10 ? '0' + m : m
      let s = parseInt(time % 60)
      s = s < 10 ? '0' + s : s
      // 作为返回值返回
      return h + ':' + m + ':' + s
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  background: #f9f9f9;
  // min-height: calc(100vh-44px);
  height: 100vh;
}

.index_header {
  background: #f9f9f9;
  height: 330rpx;
}

.contxt {
  margin-top: -220rpx;
  padding: 0 26rpx;
  padding-bottom: 300rpx;
}

.tit {
  font-size: 24px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  text-align: center;
  color: #333333;
  margin-bottom: 20rpx;
}

.tit1 {
  font-size: 24px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #e02b26;
  text-align: center;
  margin-bottom: 20rpx;
}

.tit2 {
  font-size: 11px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tit3 {
  font-size: 14px;
  font-weight: 400;
  color: #f33030;
  margin: 0 5px;
}

.kuang {
  margin-top: 20rpx;
  // padding: 20rpx;
  background: #fff;
  box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.5);
  border-radius: 10px 10px 10px 10px;
}

.pf {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333333;

  img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
}

::v-deep .u-radio-group {
  flex: none;
}

.flex_ac {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 18rpx 0;
}

.flex_ac1 {
  display: flex;
  flex-direction: column;
  // align-items: center;
  width: 100%;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 18rpx 0;
}

.flex_ac_i {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;

  img {
    width: 16px;
    height: 16px;
    margin-right: 20rpx;
  }
}

::v-deep .u-collapse-item__content__text {
  padding: 0px 15px;
}

.pad {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.pay_flax {
  display: flex;
  align-items: center;
  margin-top: 15px;
  font-size: 12px;
  font-weight: 400;
  color: #666666;
  cursor: pointer;
}

.flax_i {
  flex: 1;
  margin-left: 36rpx;
}

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

.img1 {
  width: 16px;
  height: 16px;
  margin-right: 10px;
}

.footer_f {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 10;
  box-shadow: 0px -2px 20px 0px rgba(204, 204, 204, 0.5);
}

.footer {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 24rpx 40rpx 20rpx;
  background: #fff;

  .footer_l {
  }

  .footer_r {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 20rpx;
    font-weight: 500;
    color: #333333;
  }
}

::v-deep .u-popup__content {
  width: 80%;
}

.t_tit {
  text-align: center;
  margin-top: 20px;
}

.c_tit {
  margin-bottom: 20px;
}

.box {
  padding: 40px;
  text-align: center;
}

.uBtn {
  margin-top: 20px;
}

.pay_code {
  text-align: center;
  margin-top: 20px;
  padding: 20rpx;

  .qrcodeWx {
  }
}

.qrcode {
  display: inline-block;

  img {
    width: 132px;
    height: 132px;
    background-color: #fff; //设置白色背景色
    padding: 6px; // 利用padding的特性，挤出白边
    box-sizing: border-box;
  }
}

.lan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #666;
  font-size: 12px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #999;
}

.tTit {
  font-size: 12px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #666;
}
</style>