web-retail-h5/pages/pay/treePay.vue

<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2022-11-21 15:11:22
-->
<template>
  <view class="content">
    <view class="index_header"> </view>
    <view class="contxt">
      <view class="tit">{{ '待支付金额' }}</view>
      <view class="tit1">
        {{ userInfo.currencyIcon }}{{ objTree.amount | numberToCurrency }}
      </view>
      <view class="kuang">
        <u-collapse
          :value="activeNames"
          ref="collapse"
          @open="change"
          @close="close"
          accordion
          :border="false"
        >
          <u-collapse-item name="1" v-if="userInfo.memberCode != 'BF66886688'">
            <view slot="title" class="pf">
              <img src="@/static/images/yhkzf.jpg" alt="" />
              <view>{{ '钱包支付' }}</view>
            </view>
            <view
              class="quan_i"
              v-show="account.consumeBalance == 0 || account.consumeDeduct > 0"
            >
              <view class="tTit">{{ '消费账户' }}</view>
              <view class="lan">
                <view>
                  {{ account.consumeBalance | numberToCurrency | isLocal }}
                </view>
                <view>
                  -{{ account.consumeDeduct | numberToCurrency | isLocal }}
                </view>
              </view>
            </view>
            <view
              class="quan_i"
              v-show="account.bonusBalance == 0 || account.bonusDeduct > 0"
            >
              <view class="tTit">{{ '奖金账户' }}</view>
              <view class="lan">
                <view>
                  {{ account.bonusBalance | numberToCurrency | isLocal }}
                </view>
                <view>
                  -{{ account.bonusDeduct | numberToCurrency | isLocal }}
                </view>
              </view>
            </view>
            <view class="quan_i" v-show="payDetail.payAccount3 > 0">
              <view class="tTit">{{ '政策账户' }}</view>
              <view class="lan">
                <view>
                  {{ payDetail.account3 | numberToCurrency | isLocal }}
                </view>
                <view>
                  -{{ payDetail.payAccount3 | numberToCurrency | isLocal }}
                </view>
              </view>
            </view>
            <view
              class="quan_i"
              v-show="account.cashBalance == 0 || account.cashDeduct > 0"
            >
              <view class="tTit">{{ '现金账户' }}</view>
              <view class="lan">
                <view>
                  {{ account.cashBalance | numberToCurrency | isLocal }}
                </view>
                <view>
                  -{{ account.cashDeduct | numberToCurrency | isLocal }}
                </view>
              </view>
            </view>

            <view class="quan_i" v-show="payDetail.payAccount5 > 0">
              <view class="tTit">{{ '重消账户' }}</view>
              <view class="lan">
                <view>
                  {{ payDetail.account5 | numberToCurrency | isLocal }}
                </view>
                <view>
                  -{{ payDetail.payAccount5 | numberToCurrency | isLocal }}
                </view>
              </view>
            </view>
            <view class="quan_i" v-show="payDetail.payAccount6 > 0">
              <view class="tTit">{{ '积分账户' }}</view>
              <view class="lan">
                <view>
                  {{ payDetail.account6 | numberToCurrency | isLocal }}
                </view>
                <view>
                  -{{ payDetail.payAccount6 | numberToCurrency | isLocal }}
                </view>
              </view>
            </view>
            <view class="quan_i" v-show="payDetail.payAccount7 > 0">
              <view class="tTit">{{ '鼓励账户' }}</view>
              <view class="lan">
                <view>
                  {{ payDetail.account7 | numberToCurrency | isLocal }}
                </view>
                <view>
                  -{{ payDetail.payAccount7 | numberToCurrency | isLocal }}
                </view>
              </view>
            </view>
            <view class="quan_i" v-show="payDetail.payAccount8 > 0">
              <view class="tTit">{{ '复购券账户' }}</view>
              <view class="lan">
                <view>
                  {{ payDetail.account8 | numberToCurrency | isLocal }}
                </view>
                <view>
                  -{{ payDetail.payAccount8 | numberToCurrency | isLocal }}
                </view>
              </view>
            </view>
            <view class="quan_i" v-show="payDetail.payAccount9 > 0">
              <view class="tTit">{{ '全球积分' }}</view>
              <view class="lan">
                <view>
                  {{ payDetail.account9 | numberToCurrency | isLocal }}
                </view>
                <view>
                  -{{ payDetail.payAccount9 | numberToCurrency | isLocal }}
                </view>
              </view>
            </view>
            <view class="quan_i" v-show="payDetail.payAccount10 > 0">
              <view class="tTit">{{ '车奖积分' }}</view>
              <view class="lan">
                <view>
                  {{ payDetail.account10 | numberToCurrency | isLocal }}
                </view>
                <view>
                  -{{ payDetail.payAccount10 | numberToCurrency | isLocal }}
                </view>
              </view>
            </view>
          </u-collapse-item>
        </u-collapse>
      </view>
    </view>
    <!-- 输入验证码，密码 -->
    <u-popup :show="isPw" mode="center" closeable @close="closePw">
      <view class="t_tit">{{ '支付验证' }}</view>
      <view class="box">
        <view class="c_tit" v-if="isBank">{{ '请输入短信验证码' }}</view>
        <view class="c_tit" v-else>{{ '请输入密码' }}</view>
        <u--input
          v-if="isBank"
          border="surround"
          v-model="codeValue"
        ></u--input>
        <u--input
          v-else
          border="surround"
          type="password"
          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>
    <!-- 底部 -->
    <view class="footer_f">
      <view class="footer">
        <view class="footer_r">
          <u-button
            type="success"
            class="uBtn"
            shape="circle"
            :loading="isLoading"
            loadingText="支付中"
            @tap="quickPay(isRecharge)"
            color="linear-gradient(to right, #005BAC, #005BAC )"
            >{{ '立即支付' }}
          </u-button>
        </view>
      </view>
    </view>
    <!-- 成功 -->
    <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>
    <successDialog
      @successClose="successClose"
      ref="successDialog"
    ></successDialog>
  </view>
</template>

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

import successDialog from '@/components/successDialog.vue'
import * as act from '@/config/activity.js'
var payStatus
export default {
  components: {
    successDialog,
  },
  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: {},
      isRecharge: false,
      czJe: '',
      objTree: {},
      account: {},
    }
  },
  onLoad(options) {
    uni.setNavigationBarTitle({
      title: '订单支付',
    })
    // this.paramsPost = JSON.parse(options.paramsPost)
    // if (this.paramsPost.isRecharge) {
    // 	this.isRecharge = this.paramsPost.isRecharge
    // 	this.businessType = 3
    // 	uni.setNavigationBarTitle({
    // 		title: '充值'
    // 	});
    // 	// this.businessType =
    // } else {
    // 	uni.setNavigationBarTitle({
    // 		title: '订单支付'
    // 	});
    // 	this.isRecharge = 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.userInfo.registerShare == 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()
    // clearInterval(this.clockTime)
    this.objTree = JSON.parse(options.treeObj)
    this.getAccount()
  },

  onShow() {
    // 获取银行卡
    // this.getBankList()
  },
  methods: {
    getAccount() {
      api
        .deductionAccount({
          pkBaseId: this.objTree.pkBaseId,
          pkTreeRule: this.objTree.pkTreeRule,
          shopQuantity: this.objTree.quantity,
        })
        .then(res => {
          this.account = res.data
          this.$nextTick(() => {
            this.$refs.collapse.init()
          })
          this.$forceUpdate()
        })
    },
    //查询充值抽奖次数
    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
    },
    successClose() {
      uni.redirectTo({
        url: '/pages/mine/order/index',
      })
    },
    payPw() {
      let obj = {
        pkBaseId: this.objTree.pkBaseId,
        pkTreeRule: this.objTree.pkTreeRule,
        shopQuantity: this.objTree.quantity,
        payPwd: this.codeValue,
      }
      api.shoppingTree(obj).then(res => {
        if (res.code == 200) {
          uni.showToast({
            title: res.msg,
            icon: 'none',
            duration: 1500,
          })
          this.isPw = false
          setTimeout(() => {
            uni.switchTab({ url: '/pages/index/index' })
          }, 1500)
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
            duration: 1500,
          })
        }
      })
    },
    quickPay(cz) {
      this.isPw = true
    },
    scanPayBfWx(val) {
      let params
      if (this.isRecharge) {
        params = {
          businessType: 3, //订单类型充值
          businessCode: this.orderCode,
          payChannel: val,
          payType: 2,
        }
      } else {
        params = {
          businessType: this.businessType, //订单类型充值
          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
      })
    },
    getBankList() {
      api.jdBankList().then(res => {
        this.jdList = res.data
      })
      // api.hfBankList().then((res) => {
      //     this.hfList = res.data
      // })
      this.$nextTick(() => {
        this.$refs.collapse.init()
      })
      this.$forceUpdate()
    },
    getOrderInfo() {
      api
        .orderInfo({
          specialArea: this.specialArea,
          orderCode: this.orderCode,
        })
        .then(res => {
          this.orderData = res.data
          this.downTime()
        })
    },
    downTime() {
      let that = this
      this.clockTime = setInterval(() => {
        if (that.orderData.payTime && that.orderData.payTime > 0) {
          that.countDown = this.getTime(this.orderData.payTime--)
        } else {
          that.countDown = '00:00:00'
        }
      }, 1000)
    },
    getSpendInfo() {
      api
        .spendDetails({
          specialArea: this.specialArea,
          orderCode: this.orderCode,
        })
        .then(res => {
          // this.payDetail = res.data
          this.$set(this, 'payDetail', res.data)
          this.$nextTick(() => {
            this.$refs.collapse.init()
          })
          this.$forceUpdate()
        })
    },
    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
        } 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);
}

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

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

.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>