feat(支持线上订单支付 ):

石广澎

2024-12-23 d5306c224a91b37869d2b96ba03d5a7152bd11e2

 pay/scanpay.vue

@@ -58,9 +58,14 @@
            <!-- <u-icon name="coupon-fill" size="60rpx" color="#D31F28"></u-icon> -->
            <view class="u-font-32 u-flex-1 u-m-h-16">优惠券</view>
            <view @click="showCoupon" class="u-flex">
              <view v-if="couponInfo.id" class="tag-pain">
                满{{ parseFloat((couponInfo.thresholdValue / 100).toFixed(2)) }}元减{{ parseFloat((couponInfo.discount / 100).toFixed(2)) }}元
              </view>
              <block v-if="couponInfo.id">
                <view v-if="couponInfo.discountType==1" class="tag-pain">
                  满{{ $utils.fenToYuan(couponInfo.thresholdValue) }}元减{{ $utils.fenToYuan(couponInfo.discount) }}元券
                </view>
                <view v-if="couponInfo.discountType==2" class="tag-pain">
                  {{ $utils.accMul(couponInfo.discount, 10) }}折券
                </view>
              </block>
              <view v-else class="u-font-28 lh-1 u-tips-color">请选择</view>
              <u-icon class="u-m-l-10" name="arrow-right" color="#999" size="16"></u-icon>
            </view>
@@ -82,38 +87,45 @@
          </view>
        </view>
      </block>
      <button class="pay-it" @click="pay">付款</button>
      <button class="pay-it" @click="checkLocation">付款</button>
      <view v-if="bordShow" style="height: 470rpx"></view>
      <!-- 数字键盘 -->
      <u-popup zIndex="500" :show="bordShow" :overlay="false" @close="bordShow = false">
        <key-bord @changeMoney="changeMoney" :num.sync="money" @close="bordShow = false" @pay="pay"></key-bord>
        <key-bord @changeMoney="changeMoney" :num.sync="money" @close="bordShow = false" @pay="checkLocation"></key-bord>
      </u-popup>
      <!-- 优惠券弹窗 -->
      <u-popup v-if="payWay==2" mode="bottom" :closeable="true" :show="couponShow" @close="couponShow = false" :round="10">
        <view class="u-font-32 color-333 u-text-center u-p-t-30">优惠券</view>
        <view v-if="checkCoupon.id" class="choose-coupon">
          已选择优惠券1张，共抵扣￥{{ parseFloat((checkCoupon.discount / 100).toFixed(2)) }}
          已选择优惠券1张，可抵扣￥{{ discount1 }}
        </view>
        <scroll-view scroll-y class="u-p-30 coupon-list">
          <u-loadmore v-if="!couponList" status="loading" />
          <u-loadmore v-if="!couponList" status="loading"/>
          <u-empty v-else-if="couponList.length===0" mode="coupon" icon="/static/no_coupon.png" text="暂无优惠券可用!"></u-empty>
          <block v-else>
            <view @click="clickCoupon(item)" class="u-m-b-24 u-flex coupon" v-for="(item, index) in couponList" :key="index">
              <view style="color: #D31F28;" class="u-p-h-28">
                <view class="font-bold">
              <view class="num-box">
                <view v-if="item.discountType==1" class="font-bold" style="color: #D31F28;">
                  <text class="u-font-36">￥</text>
                  <text class="money">{{ parseFloat(item.discount / 100) }}</text>
                  <text class="money">{{ $utils.fenToYuan(item.discount) }}</text>
                </view>
                <view class="u-font-24 u-m-t-20">满{{ parseFloat(item.thresholdValue / 100) }}元使用</view>
                <view v-if="item.discountType==2" class="font-bold" style="color: #D31F28;">
                  <text class="money">{{ $utils.accMul(item.discount, 10) }}</text>
                  <text class="u-font-36">折</text>
                </view>
                <view v-if="item.orderMax" class="u-font-24 u-m-t-20">低于{{ $utils.fenToYuan(item.orderMax) }}元可用</view>
                <view v-else-if="item.thresholdValue" class="u-font-24 u-m-t-20">满{{ $utils.fenToYuan(item.thresholdValue) }}元可用</view>
                <view v-else class="u-font-24 u-m-t-20">无门槛</view>
              </view>
              <view class="butt"></view>
              <view class="u-p-30 u-flex-1 u-flex">
                <view class="u-flex-1">
                  <view class="u-font-28 color-333 u-line-2">{{ item.name }}</view>
                  <view class="u-font-32 color-333 u-line-2">{{ item.name }}</view>
                  <view class="u-font-22 color-999 u-m-t-20">
                    有效期至：{{ $u.timeFormat(item.outTime, 'yyyy-mm-dd hh:MM') }}
                  </view>
                </view>
                <u-icon v-if="item.id==checkCoupon.id" name="checkmark-circle-fill" color="#D31F28" size="20">
                <u-icon v-if="item.id==checkCoupon.id" name="checkmark-circle-fill" color="#D31F28" size="24">
                </u-icon>
              </view>
            </view>
@@ -140,11 +152,13 @@
<script>
import {
  config,
  ACCESSTOKEN
  ACCESSTOKEN,
  CHECK_LOCATION
} from 'common/config.js';
import {
  queryShopByCid,
  queryShopByShopId,
  getOnlineId,
  userLogin,
  queryUseSweepPayCoupon,
  getWechatConfigInfo,
@@ -164,12 +178,12 @@
      buyerNote: '',
      showRemark: false,
      UNIONID: null,
      payWay: this.$utils.getPlat(), //2 维信 5支付宝 15云闪付
      payWay: this.$utils.getPlat(), //2 微信 5支付宝 15云闪付
      cid: '', //码牌id  C扫B静态码时有
      activityQrcodeId: '', //动态收款码  C扫B动态码时有
      shopId: '', //商户id  C扫B动态码时有
      bordShow: false, // 显示键盘
      orderId: '',
      orderId: '', //冀优邮线上订单id
      shopInfo: {
        cusid: '',
        shopName: '',
@@ -178,6 +192,8 @@
        useScoreFlag: -1, //商铺是否可用积分 0否 1是
        userCouponFlag: -1, //商铺是否可用优惠券 0否 1是
      },
      lat: '', //纬度
      lng: '', //经度
      money: '', // 金额
      token: null,
      isNew: false, // 是否新用户，新用户查询不到积分和银行卡
@@ -197,21 +213,42 @@
    };
  },
  computed: {
    discount1() {
      if(!(this.money || 0)||!this.checkCoupon.id){
        return 0
      }
      if (this.checkCoupon.discountType == 1) {
        const num = this.$utils.fenToYuan(this.checkCoupon.discount)
        return parseFloat(num);
      }
      const dis = 1 - parseFloat(this.checkCoupon.discount)
      const dic = Math.floor(this.$utils.accMul(this.money,100) * dis)
      return this.$utils.fenToYuan(dic).toFixed(2);
    },
    discount() {
      let num = 0;
      num = (this.couponInfo.discount / 100).toFixed(2);
      return parseFloat(num);
      if(!(this.money || 0)||!this.couponInfo.id){
        return 0
      }
      if (this.couponInfo.discountType == 1) {
        const num = this.$utils.fenToYuan(this.couponInfo.discount)
        return parseFloat(num);
      }
      const dis = 1 - parseFloat(this.couponInfo.discount)
      const dic = Math.floor(this.$utils.accMul(this.money,100) * dis)
      return this.$utils.fenToYuan(dic).toFixed(2);
    },
    payMoney() {
      let num = 0;
      num = Number((this.money || 0) * 100) - this.couponInfo.discount;
      num = num > 0 ? (num / 100).toFixed(2) : '0.00';
      return parseFloat(num);
      if(this.discount===0||!Number(this.money || 0)){
        return 0
      }
      const num = this.$utils.accMul(this.money,100) - this.$utils.accMul(this.discount,100);
      return this.$utils.fenToYuan(num).toFixed(2);
    }
  },
  onLoad(opt) {
    uni.setStorageSync('CID', opt.cid)
    uni.setStorageSync('SHOPID', opt.shopId)
    uni.setStorageSync('ORDERID', opt.orderId)
    uni.setStorageSync('SMONEY', opt.smoney)
    uni.setStorageSync('AQCI', opt.activityQrcodeId)
    this.UNIONID = uni.getStorageSync('UNIONID') || null
@@ -222,9 +259,12 @@
    } else {
      this.bordShow = true
    }
    if (opt.orderId) {
      this.orderId = opt.orderId
      this.init()
    }
    if (opt.activityQrcodeId) {
      this.activityQrcodeId = opt.activityQrcodeId
      // this.getOrderInfo()
    }
    if (opt.shopId) {
      this.shopId = opt.shopId
@@ -363,6 +403,12 @@
          shopId: this.shopId
        }
      }
      if (this.orderId) {
        api = getOnlineId
        params = {
          onlineId: this.orderId
        }
      }
      //获取商铺信息
      api({
        params
@@ -373,6 +419,17 @@
          res.logoImage = config.baseURL + res.logoImage
        }
        this.shopInfo = res
        if(this.orderId){
          this.money = res.totaPrice
          if(res.couponId){
            this.couponInfo = {
              id: res.couponId,
              thresholdValue: res.thresholdValue,
              discount: res.discount,
              discountType: res.discountType,
            }
          }
        }
      }).catch((err) => {
        clearTimeout(timer)
        this.shopInfo.scanFlag = 0
@@ -391,18 +448,78 @@
            timestamp: res.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.noncestr, // 必填，生成签名的随机串
            signature: res.signature, // 必填，签名
            jsApiList: ['hideAllNonBaseMenuItem'], // 必填，需要使用的JS接口列表
            jsApiList: ['hideAllNonBaseMenuItem','getLocation'], // 必填，需要使用的JS接口列表
            openTagList: ['wx-open-launch-weapp'] //可选，需要使用的开放标签列表
          });
          wx.ready(function () {
          wx.ready( ()=> {
            wx.hideAllNonBaseMenuItem();
            if(CHECK_LOCATION){
              this.wxGetLocation(null)
            }
          })
        })
      }
      if(this.payWay == 5){
        ap.hideOptionButton();
        this.apGetLocation(null)
      }
    },
    apGetLocation(callback){
      ap.getLocation((res)=> {
        console.log('apGetLocation',res)
          if(res.latitude){
            this.lat = parseFloat(res.latitude).toFixed(6); // 纬度，浮点数，范围为90 ~ -90
            this.lng = parseFloat(res.longitude).toFixed(6); // 经度，浮点数，范围为180 ~ -180。
            if(callback) callback()
          }else{
            uni.showModal({
              title: '提示',
              content: "获取地理位置失败，无法进行支付！",
              confirmText: '重新授权',
              cancelText: '退出',
              success: ret=>{
                if(ret.confirm){
                  this.apGetLocation(callback)
                }else{
                  this.clickDone()
                }
              }
            })
          }
        })
    },
    wxGetLocation(callback){
      wx.getLocation({
        type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
        complete:  (res)=> {
          if(res.errMsg==="getLocation:ok"){
            this.lat = parseFloat(res.latitude).toFixed(6); // 纬度，浮点数，范围为90 ~ -90
            this.lng = parseFloat(res.longitude).toFixed(6); // 经度，浮点数，范围为180 ~ -180。
            if(callback) callback()
          }else{
            uni.showModal({
              title: '提示',
              content: "获取地理位置失败，无法进行支付！",
              confirmText: '重新授权',
              cancelText: '退出',
              success: ret=>{
                if(ret.confirm){
                  this.wxGetLocation(callback)
                }else{
                  this.clickDone()
                }
              }
            })
          }
        }
      });
    },
    // 获取会员相关信息
    showCoupon() {
      if (this.UNIONID) {
      if(this.orderId){
        return
      }
      if (this.UNIONID||this.payWay==5) {
        if (uni.$u.test.isEmpty(this.money)) {
          uni.$u.toast('请输入金额！')
          return
@@ -415,16 +532,23 @@
      }
    },
    //获取用户优惠券
    queryUseSweepPayCoupon(){
    queryUseSweepPayCoupon() {
      //2 微信 5支付宝 15云闪付
      const applyPayWayStr = {
        2: 1,
        5: 2,
        15: 3
      }
      queryUseSweepPayCoupon({
        params: {
          applyPayWayStr: this.payWay,
          score: 0,
          applyPayWayStr: applyPayWayStr[this.payWay],
          cusid: this.shopInfo.id,
          money: Number(this.money * 100),
          money: this.$utils.accMul(this.money,100),
        }
      }).then(res => {
        this.couponList = res
      }).catch(()=>{
      }).catch(() => {
        this.couponList = []
      })
    },
@@ -446,6 +570,26 @@
      this.couponInfo = this.checkCoupon;
      this.couponShow = false;
    },
    checkLocation(){
      if(!CHECK_LOCATION){
        this.pay()
        return
      }
      if (uni.$u.test.isEmpty(this.money)) {
        uni.$u.toast('请输入金额！')
        return
      }
      if(!this.lat){
        if(this.payWay == 2){
          this.wxGetLocation(this.pay)
        }
        if(this.payWay == 5){
          this.apGetLocation(this.pay)
        }
      }else{
        this.pay()
      }
    },
    //确认支付
    pay() {
      if (uni.$u.test.isEmpty(this.money)) {
@@ -455,19 +599,24 @@
      this.bordShow = false
      // 金额 this.money
      uni.showLoading()
      const params = {
      let params = {
        money: this.$utils.accMul(this.money,100),
        shopId: this.shopInfo.id,
        payWay: this.payWay,
        buyerNote: this.buyerNote,
        score: 0,
        couponDetailId: this.couponInfo.id
        couponDetailId: this.couponInfo.id,
        lat: this.lat,
        lng: this.lng
      }
      if (this.activityQrcodeId) {
        params.activityQrcodeId = this.activityQrcodeId
      }
      if (this.cid) {
        params.money = Number(this.money * 100)
        params.shopId = this.shopInfo.id
        params.cid = this.cid
      }
      if (this.orderId) {
        params = {onlineId: this.onlineId}
      }
      //生成订单
      saveOrder(params).then(res => {
@@ -574,7 +723,6 @@

.money {
  font-size: 40rpx;
  color: #333;
}


@@ -739,7 +887,10 @@
  position: relative;
  overflow: hidden;
}

.num-box{
  width: 200rpx;
  text-align: center;
}
.choose-coupon {
  margin: 32rpx 32rpx 0;
  border-radius: 10rpx;
@@ -751,7 +902,7 @@

.coupon-list {
  box-sizing: border-box;
  height: calc(80vh - 44px);
  height: calc(60vh - 44px);
}