feat(pay): 新增会员充值和次卡购买页面

石广澎

2025-11-30 55ee7bd313c7d8030ce8c547b18ad5f19507afd2

 pages/pay/scanpay.vue

@@ -1,10 +1,11 @@
<!-- 扫码支付 -->
<template>
   <view class="page">
      <u-alert type="warning" closable description="安全提醒：请谨慎核对商家、订单信息，保护自己资金安全!"></u-alert>
      <view class="shop u-flex u-row-between">
         <view class="u-m-r-30">
            <view class="u-font-28 color-666 u-m-b-10">付款给</view>
            <view class="u-font-34 font-bold color-333">{{ shopInfo.shop_name }}</view>
            <view class="u-font-44 font-bold color-333">{{ shopInfo.shop_name }}</view>
         </view>
         <image :src="shopInfo.logo_image||'/static/imgs/store-logo.png'" class="avg-img"></image>
      </view>
@@ -22,8 +23,26 @@
         </view>
         <view class="u-font-28 color-666 u-m-t-60">选择支付方式</view>
         <u-radio-group v-model="payWay" placement="column">
            <view v-if="platform == 15" class="u-border-bottom u-p-v-20 u-flex u-row-between">
               <image src="@/static/imgs/pay-union.png" class="pay-icon"></image>
               <view class="flex-1">
                  <view class="u-font-30 color-333">云闪付</view>
                  <text v-if="isNew" class="tag u-m-t-10">会员享优惠</text>
                  <text v-if="!isNew&&token&&shopInfo.use_score_flag&&shopInfo.app_pay_use_score_flag" class="u-font-24 color-999 u-m-t-10">
                     可用
                     <text class="color-red">{{ integral }}</text>
                     积分
                  </text>
               </view>
               <view v-if="token&&couponInfo&&shopInfo.user_coupon_flag&&shopInfo.app_pay_use_coupon_flag" class="tag-pain">
                  满{{
              parseFloat((couponInfo.thresholdValue / 100).toFixed(2))
            }}元减{{ parseFloat((couponInfo.discount / 100).toFixed(2)) }}元
               </view>
               <u-radio @change="radioChange($event,15)" :name="15" activeColor="#D41F28" :customStyle="{ marginLeft: '10rpx' }"></u-radio>
            </view>
            <view v-if="platform == 5" class="u-border-bottom u-p-v-20 u-flex u-row-between">
               <image src="@/static/imgs/pay-zfb.png" class="pay-icon"></image>
               <image src="@/static/imgs/pay-zfb.png" class="pay-icon" mode="widthFix"></image>
               <view class="flex-1">
                  <view class="u-font-30 color-333">支付宝</view>
                  <text v-if="isNew" class="tag u-m-t-10">会员享优惠</text>
@@ -41,7 +60,7 @@
               <u-radio @change="radioChange($event,5)" :name="5" activeColor="#D41F28" :customStyle="{ marginLeft: '10rpx' }"></u-radio>
            </view>
            <view v-if="platform == 2" class="u-border-bottom u-p-v-20 u-flex u-row-between">
               <image src="@/static/imgs/pay-wx.png" class="pay-icon"></image>
               <image src="@/static/imgs/pay-wx.png" class="pay-icon" mode="widthFix"></image>
               <view class="flex-1">
                  <view class="u-font-30 color-333">微信</view>
                  <text v-if="isNew" class="tag u-m-t-10">会员享优惠</text>
@@ -59,9 +78,21 @@
               <u-radio @change="radioChange($event,2)" :name="2" activeColor="#D41F28" :customStyle="{ marginLeft: '10rpx' }">
               </u-radio>
            </view>
            <!-- <navigator v-if="shuaka&&token&&bankCard!=-1" class="shuka" url="/pages/pay/shuaKa/shuaKa">
            <view  class="u-border-bottom u-p-v-20 u-flex u-row-between">
               <image src="@/static/zjjg/yue.png" class="pay-icon" mode="widthFix"></image>
               <view class="flex-1">
                  <view class="u-font-30 color-333">储值卡</view>
                  <text class="u-font-24 color-999 u-m-t-10">
                     可用余额
                     <text class="color-red">￥{{ integral }}</text>
                  </text>
               </view>
               <u-radio @change="radioChange($event,14)" :name="14" activeColor="#D41F28" :customStyle="{ marginLeft: '10rpx' }">
               </u-radio>
            </view>
<!--            <navigator v-if="shuaka&&token&&bankCard!=-1" class="shuka" url="/pages/pay/shuaKa/shuaKa">
               <image src="/static/shuaka/shuaka.png" mode=""></image>
            </navigator> -->
            </navigator>
            <view v-if="bankCard.id" class="u-border-bottom u-p-v-20 u-flex">
               <view @click="bordShow=false;bankCardOpen=true" class="flex-1 u-flex">
                  <image :src="bankCardStyle.logo" class="pay-icon"></image>
@@ -71,7 +102,7 @@
                        <u-icon name="arrow-right" color="#000">
                        </u-icon>
                     </view>
                     <!-- <text v-if="isNew" class="tag u-m-t-10">会员享优惠</text> -->
                     &lt;!&ndash; <text v-if="isNew" class="tag u-m-t-10">会员享优惠</text> &ndash;&gt;
                     <text v-if="!isNew&&shopInfo.use_score_flag&&shopInfo.bank_pay_use_score_flag" class="u-font-24 color-999 u-m-t-10">
                        可用
                        <text class="color-red">{{ integral }}</text>
@@ -84,11 +115,21 @@
              parseFloat((couponInfo.thresholdValue / 100).toFixed(2))
            }}元减{{ parseFloat((couponInfo.discount / 100).toFixed(2)) }}元
               </view>
               <u-radio @change="radioChange($event,3, bankCard.id)" :name="3" activeColor="#D41F28" :customStyle="{ marginLeft: '10rpx' }">
               <u-radio @change="radioChange($event,3)" :name="bankCard.id" activeColor="#D41F28" :customStyle="{ marginLeft: '10rpx' }">
               </u-radio>
            </view>
            </view>-->
         </u-radio-group>
         <!-- <navigator v-if="bankCard==-1&&bindCard&&token&&!isNew" class="shuka" url="/pages/pay/bindCard/bindCard">
      <navigator :url="`/pages/pay/vipEwm?cardInfo=${encodeURIComponent(JSON.stringify(cardInfo))}`" class="u-border-bottom u-p-v-20 u-flex u-row-between">
          <image src="@/static/zjjg/cika.png" class="pay-icon" mode="widthFix"></image>
          <view class="flex-1 u-m-l-20">
            <view class="u-font-30 color-333">次卡支付</view>
            <text class="u-font-24 color-999 u-m-t-10">
              可用次数
              <text class="color-red">{{ cardInfo.times }}次</text>
            </text>
          </view>
      </navigator>
<!--         <navigator v-if="bankCard==-1&&bindCard&&token&&!isNew" class="shuka" url="/pages/pay/bindCard/bindCard">
            <image src="/static/bangka.png" mode=""></image>
         </navigator>
         <navigator v-if="bankCard==-1&&!isNew" url="/pages/pay/bindCard/bindCard" class="u-border-bottom u-p-v-20 u-flex u-row-between">
@@ -101,7 +142,7 @@
            </view>
            <u-radio disabled activeColor="#D41F28" :customStyle="{ marginLeft: '30rpx' }">
            </u-radio>
         </navigator> -->
         </navigator>-->
         <navigator v-if="isNew" class="reg-btn" :url="'/pages/pay/register?cid='+cid">
            <image src="/static/register-btn.png" mode=""></image>
         </navigator>
@@ -116,7 +157,7 @@
            <block v-for="(item,i) in bankCardList" :key="i">
               <view @click="chooseBankCard(item)" class="u-border-bottom u-p-v-30 u-flex">
                  <view class="flex-1 u-flex">
                     <image :src="bankCardStyle.logo" class="pay-icon"></image>
                     <image :src="bankCardStyle.logo" class="pay-icon" mode="widthFix"></image>
                     <view>
                        <view class="u-font-26 color-333">{{ item.bankName }}</view>
                        <view class="u-m-t-10 u-font-28 color-333">{{ cardType[item.cardType] }}({{ item.cardNo }})
@@ -173,17 +214,22 @@
      queryMyUseSweepPayMaxCoupon,
      getWechatConfigInfo,
      saveWxOrder,
      saveOrder,
      tlPay
   } from '@/common/api/index'
   import wx from 'weixin-js-sdk'; // 使用js-sdk
   import {
      activityInfo
   } from '@/common/api/shuaka'

   export default {
      data() {
         return {
        cardInfo:{
          type: 1,
          name: '',
          amount: 0,
          score: 0,
          times: 12
        },
            platform: this.$utils.getPlat(),
            cardType: cardType,
            cid: '',
@@ -202,7 +248,7 @@
            money: '', // 金额
            integral: 0, // 使用积分
            couponInfo: null, // 优惠券内容
            payWay: 3, //支付方式 5 支付宝 2 微信 3银行卡
            payWay: 3, //支付方式 5 支付宝 2 微信 3银行卡 15云闪付
            token: null,
            isNew: false, // 是否新用户，新用户查询不到积分和银行卡
            codeShow: false, // 银行卡支付验证码输入弹窗
@@ -237,10 +283,13 @@
            uni.setStorageSync('CID', opt.cid)
            this.init()
         }
         if (opt.code || opt.auth_code) {
         if (opt.code || opt.auth_code || opt.userAuthCode) {
            let code = opt.code
            if (this.platform == 5) {
               code = opt.auth_code
            }
            if (this.platform == 15) {
               code = opt.userAuthCode
            }
            this.end++
            userLogin({
@@ -253,6 +302,7 @@
            }).catch(() => {
               uni.hideLoading()
            })

         } else {
            if (process.env.NODE_ENV === 'development') {
               console.log('开发环境');
@@ -290,20 +340,17 @@
            if (this.count >= this.end) {
               uni.hideLoading()
            }
            this.token = res.token
            uni.setStorageSync(ACCESSTOKEN, res.token)
            this.token = res.token.accessToken
            uni.setStorageSync(ACCESSTOKEN, res.token.accessToken)
            uni.setStorageSync('IS_NEW', res.isNew)
            this.isNew = res.isNew
            if (!res.isNew) {
               this.getUserInfo()
            }
         },
         radioChange(e, item, bankCardId) {
         radioChange(e, item) {
            this.bordShow = false
            this.payWay = item
            if (bankCardId) {
               this.bankCardId = bankCardId
            }
         },
         // 更新金额
         changeMoney(str) {
@@ -314,7 +361,7 @@
            this.bordShow = true;
         },
         init() {
            this.end += 1
            this.end += 5
            //获取商铺信息
            queryShop({
               params: {
@@ -334,14 +381,11 @@
                     res.logo_image = ''
                  }
               }
               uni.setStorageSync('SHOP_INFO', res)
               this.shopInfo = res
            }).catch(() => {
               uni.hideLoading()
            })
         },
         //查询营销信息
         getMarketing(){
            this.end += 4
            // 刷卡有礼
            activityInfo().then(res => {
               this.count++
@@ -416,12 +460,13 @@
                  uni.hideLoading()
               })
            }

         },
         // 获取会员相关信息
         getUserInfo() {
            this.end += 1
            this.end += 4

            /*queryMyDiscount({
            queryMyDiscount({
               shopId: this.shopInfo.id
            }).then(res => {
               this.count++
@@ -436,8 +481,8 @@
               if (this.count >= this.end) {
                  uni.hideLoading()
               }
            })*/
            /* //获取用户银行卡
            })
            //获取用户银行卡
            myBankCard().then(res => {
               this.count++
               if (this.count >= this.end) {
@@ -470,7 +515,7 @@
               if (this.count >= this.end) {
                  uni.hideLoading()
               }
            }) */
            })
            //获取用户优惠券
            queryMyUseSweepPayMaxCoupon({
               params: {
@@ -501,26 +546,25 @@
         },
         //跳转营销页面
         toDiscount() {
            const shopInfo = encodeURIComponent(JSON.stringify(this.shopInfo))
            if (!this.isNew) { //是会员
               if (this.integral > 0 || this.couponInfo) { //有优惠券或积分
                  if (this.payWay == 3 && (this.shopInfo.bank_pay_use_score_flag || this.shopInfo
                        .bank_pay_use_coupon_flag)) { //银行卡支付

                     uni.navigateTo({
                        url: `/pages/pay/discountpay?shopInfo=${shopInfo}&integral=${this.integral}&scoreWorth=${this.scoreWorth}&money=${this.money}&payWay=${this.payWay}&bankCardId=${this.bankCardId}`
                        url: `/pages/pay/discountpay?integral=${this.integral}&scoreWorth=${this.scoreWorth}&money=${this.money}&payWay=${this.payWay}&bankCardId=${this.bankCardId}`
                     })
                     return false
                  } else if ((this.shopInfo.use_score_flag && this.shopInfo.app_pay_use_score_flag) || (this
                        .shopInfo
                        .user_coupon_flag && this.shopInfo.app_pay_use_coupon_flag)) {
                     uni.navigateTo({
                        url: `/pages/pay/discountpay?shopInfo=${shopInfo}&integral=${this.integral}&scoreWorth=${this.scoreWorth}&money=${this.money}&payWay=${this.payWay}&bankCardId=${this.bankCardId}`
                        url: `/pages/pay/discountpay?integral=${this.integral}&scoreWorth=${this.scoreWorth}&money=${this.money}&payWay=${this.payWay}&bankCardId=${this.bankCardId}`
                     })
                     return false
                  } else if (this.discount.shopDiscount != 1) {
                     uni.navigateTo({
                        url: `/pages/pay/discountpay?shopInfo=${shopInfo}&integral=${this.integral}&scoreWorth=${this.scoreWorth}&money=${this.money}&payWay=${this.payWay}&bankCardId=${this.bankCardId}`
                        url: `/pages/pay/discountpay?integral=${this.integral}&scoreWorth=${this.scoreWorth}&money=${this.money}&payWay=${this.payWay}&bankCardId=${this.bankCardId}`
                     })
                     return false
                  } else {
@@ -528,7 +572,7 @@
                  }
               } else if (this.discount.shopDiscount != 1) {
                  uni.navigateTo({
                     url: `/pages/pay/discountpay?shopInfo=${shopInfo}&integral=${this.integral}&scoreWorth=${this.scoreWorth}&money=${this.money}&payWay=${this.payWay}&bankCardId=${this.bankCardId}`
                     url: `/pages/pay/discountpay?integral=${this.integral}&scoreWorth=${this.scoreWorth}&money=${this.money}&payWay=${this.payWay}&bankCardId=${this.bankCardId}`
                  })
                  return false
               } else {
@@ -545,7 +589,7 @@
               return
            }
            this.bordShow = false
            // return this.toDiscount() //判断是否需要跳转营销页面
            //判断是否需要跳转营销页面
            if (this.toDiscount()) {
               // 金额 this.money
               uni.showLoading()
@@ -561,7 +605,7 @@
                  params.bankCardId = this.bankCardId
               }
               //生成订单
          saveOrder(params).then(res => {
               saveWxOrder(params).then(res => {
                  uni.hideLoading()
                  try {
                     this.orderId = res.orderId
@@ -580,9 +624,7 @@
                           this.aliPay(res.paymentData)
                        }
                     } else if (res.toPayMethod == 3) {
                        // window.location.href = res.paymentUrl
                        this.smscode = ''
                        this.codeShow = true
                        window.location.href = res.paymentUrl
                     }
                  } catch (e) {
                     //TODO handle the exception
@@ -596,6 +638,23 @@
         },
         // 微信支付
         wxPay(res) {
            /*setTimeout(() => {
              wx.chooseWXPay({
                timestamp: res.timeStamp, // 支付签名时间戳
                nonceStr: res.nonceStr, // 支付签名随机串，不长于 32 位
                package: res.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                signType: res.signType, // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
                paySign: res.paySign, // 支付签名
                success: function (res) {
                  // 支付成功后的回调函数
                  uni.navigateTo({
                    url: `/pages/pay/paySuccess?orderId=${this.orderId}&youHuiInfo=${JSON
                        .stringify(this.youHuiInfo)}`
                  })
                }
              });
            }, 200)*/

            setTimeout(() => {
               WeixinJSBridge.invoke(
                  'getBrandWCPayRequest', {
@@ -610,10 +669,10 @@
                     if (res.err_msg == "get_brand_wcpay_request:ok") {
                        // 使用以上方式判断前端返回,微信团队郑重提示：
                        //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                        uni.navigateTo({
                        /*uni.navigateTo({
                           url: `/pages/pay/paySuccess?orderId=${this.orderId}&youHuiInfo=${JSON
                      .stringify(this.youHuiInfo)}`
                        })
                        })*/
                     }
                  });
            }, 200)
@@ -624,10 +683,10 @@
               tradeNO: res.tradeNO
            }, (res) => {
               if (res.resultCode == 9000) {
                  uni.navigateTo({
                  /*uni.navigateTo({
                     url: `/pages/pay/paySuccess?orderId=${this.orderId}&youHuiInfo=${JSON
                .stringify(this.youHuiInfo)}`
                  })
                  })*/
                  // 支付成功
               } else if (res.resultCode == 8000 || res.resultCode == 6001) {
                  // 正在处理中 || 取消
@@ -721,7 +780,6 @@
   .pay-icon {
      align-self: flex-start;
      width: 48rpx;
      height: 48rpx;
      margin-right: 20rpx;
   }

@@ -843,4 +901,4 @@
      width: 680rpx;
      height: 100rpx;
   }
</style>
</style>