feat(支付): 键盘优化

石广澎

2024-09-05 d5259ba5f967277dba4923bac394b873be2bdfdc

 pay/scanpay.vue

@@ -13,9 +13,15 @@
      <view class="u-p-24 bg-fff u-m-32 u-br-10">
        <view class="u-flex u-row-between">
          <view class="u-font-28 color-666">金额</view>
          <view @click="showRemark=true" class="remark">添加备注</view>
          <view @click="buyerNote='';showRemark=true;" class="remark">添加备注</view>
        </view>
        <view class="u-p-v-20 u-flex u-col-bottom u-border-bottom u-relative money-box">
        <view v-if="smoney" class="u-p-v-20 u-flex u-col-bottom u-border-bottom u-relative money-box">
          <view class="money-icon color-333 lh-1">¥</view>
          <view class="u-flex-1 u-flex u-col-bottom u-m-l-10" style="height: 80rpx;">
            <view class="money-num lh-1">{{ smoney }}</view>
          </view>
        </view>
        <view v-else class="u-p-v-20 u-flex u-col-bottom u-border-bottom u-relative money-box">
          <view class="money-icon color-333 lh-1">¥</view>
          <view class="u-flex-1 u-flex u-col-bottom u-m-l-10" style="height: 80rpx;">
            <view v-if="money" class="money-num lh-1">{{ money }}</view>
@@ -25,16 +31,30 @@
          </view>
          <view class="mask" @click="showBord"></view>
        </view>
        <!--      <image v-if="isNew&&(this.payWay == 2&&!UNIONID)" @click="toRegister" class="reg-btn" src="/static/register-btn.png" mode=""></image>-->
        <view v-if="shopInfo.userCouponFlag==0" class="u-font-26 u-tips-color u-p-t-24">微信搜索或直接点击打开
          <text style="color: #1E8BE0">【冀优邮】</text>
          小程序，享受更多优惠
        <view v-if="payWay==2" class="u-tips-color u-p-t-24">
          <wx-open-launch-weapp id="launch-btn" appid="wx47b3b5ca64bc7d5d" path="pages/index/index">
            <script type="text/wxtag-template">
              <style>
                .txt {
                  font-size: 13px;
                  color: #999
                }
                .btn {
                  font-size: 13px;
                  color: #1E8BE0
                }
              </style>
              <span class="txt">微信搜索或点击打开</span>
              <span class="btn">【冀优邮】</span>
              <span class="txt">小程序，享更多优惠！</span>
            </script>
          </wx-open-launch-weapp>
        </view>
      </view>
      <block v-if="shopInfo.userCouponFlag==1">
      <block v-if="payWay==2&&shopInfo.userCouponFlag==1">
        <view class="bg-fff u-m-32 u-br-10">
          <view class="u-flex u-p-24 u-border-bottom">
            <!--          <u-icon name="coupon-fill" size="60rpx" color="#D31F28"></u-icon>-->
            <!-- <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">
@@ -44,13 +64,9 @@
              <u-icon class="u-m-l-10" name="arrow-right" color="#999" size="16"></u-icon>
            </view>
          </view>
          <view class="u-font-26 u-tips-color u-p-24">微信搜索或直接点击打开
            <text style="color: #1E8BE0">【冀优邮】</text>
            小程序，享受更多优惠
          </view>
        </view>
      </block>
      <block v-if="shopInfo.userCouponFlag==1&&discount">
      <block v-if="payWay==2&&shopInfo.userCouponFlag==1&&discount">
        <view class="u-m-32 u-br-10 bg-fff">
          <view class="u-p-24 u-flex u-row-between u-border-bottom">
            <view class="u-font-32 color-333">抵扣金额</view>
@@ -71,7 +87,7 @@
        <key-bord @changeMoney="changeMoney" :num.sync="money" @close="bordShow = false" @pay="pay"></key-bord>
      </u-popup>
      <!-- 优惠券弹窗 -->
      <u-popup zIndex="800" mode="bottom" :closeable="true" :show="couponShow" @close="couponShow = false" :round="10">
      <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)) }}
@@ -100,13 +116,16 @@
        </scroll-view>
        <view @click="getCoupon" class="coupon-btn">确定</view>
      </u-popup>
      <u-modal showCancelButton :show="showRemark" title="备注" cancelText="关闭" confirmText="清除" confirmColor="#D31F28" @close="showRemark = false" @cancel="showRemark = false" @confirm="buyerNote = ''">
        <u--textarea v-model="buyerNote" placeholder="请输入备注内容" count></u--textarea>
      <u-modal showCancelButton :show="showRemark" title="备注" confirmColor="#D31F28" @close="showRemark = false" @cancel="showRemark = false" @confirm="showRemark = false">
        <view style="border: 1rpx solid #eee;width: 100%">
          <u--textarea v-model="buyerNote" placeholder="请输入备注内容" maxlength="100" none count></u--textarea>
        </view>

      </u-modal>
    </block>
    <view v-if="shopInfo.scanFlag==0" class="empty-box">
      <image src="/static/empty.png" class="empty"></image>
      <view class="tips">{{tips}}</view>
      <view class="tips">{{ tips }}</view>
      <view @click="clickDone" class="clickDone">关闭</view>
    </view>
  </view>
@@ -118,24 +137,33 @@
  ACCESSTOKEN
} from 'common/config.js';
import {
  queryShop,
  queryShopByCid,
  queryShopByShopId,
  userLogin,
  queryUseSweepPayCoupon,
  getWechatConfigInfo,
  closeOrder,
  saveOrder,
} from 'common/api/index'

import wx from 'weixin-js-sdk'; // 使用js-sdk

export default {
  data() {
    return {
      smoney: '',
      tips: '该商户暂未开通支付功能',
      loading: true,
      loading: false,
      remark: '',
      buyerNote: '',
      showRemark: false,
      UNIONID: null,
      payWay: this.$utils.getPlat(),
      cid: '',
      bordShow: true, // 显示键盘
      payWay: this.$utils.getPlat(), //2 维信 5支付宝
      cid: '', //码牌id  C扫B静态码时有
      activityQrcodeId: '', //动态收款码  C扫B动态码时有
      shopId: '', //商户id  C扫B动态码时有
      bordShow: false, // 显示键盘
      orderId: '',
      shopInfo: {
        cusid: '',
        shopName: '',
@@ -176,21 +204,52 @@
    }
  },
  onLoad(opt) {
    uni.setStorageSync('CID', opt.cid)
    uni.setStorageSync('SHOPID', opt.shopId)
    uni.setStorageSync('SMONEY', opt.smoney)
    uni.setStorageSync('AQCI', opt.activityQrcodeId)
    this.UNIONID = uni.getStorageSync('UNIONID') || null
    this.isNew = uni.getStorageSync('IS_NEW')
    if (opt.smoney) {
      this.smoney = opt.smoney
      this.money = opt.smoney
    } else {
      this.bordShow = true
    }
    if (opt.activityQrcodeId) {
      this.activityQrcodeId = opt.activityQrcodeId
      // this.getOrderInfo()
    }
    if (opt.shopId) {
      this.shopId = opt.shopId
      this.init()
    }
    if (opt.cid) {
      this.cid = opt.cid
      this.init()
    }
    if (opt.code || opt.auth_code) {
      let code = opt.code
      if (this.payWay == 5) {
        code = opt.auth_code
    if (opt.code || opt.auth_code || opt.userAuthCode) {
      let params = {
        code: opt.code
      }
      let code = opt.code
      if (this.payWay == 2&&opt.state == 1 ) { //微信
        params.getUserInfo = 1
      }
      if (this.payWay == 5) { //支付宝
        params.code = opt.auth_code
      }
      if (this.payWay == 15) { //云闪付
        code = opt.userAuthCode
      }
      const cd = uni.getStorageSync('cd')
      if (code === cd) {
        return
      }
      uni.setStorageSync('cd', code)
      userLogin({
        platform: this.payWay,
        params: {
          code
        }
        params
      }).then(res => {
        this.getToken(res)
      })
@@ -198,10 +257,10 @@

  },
  methods: {
    /*关闭页面*/
    clickDone() {
      let browser = navigator.userAgent.toLowerCase();
      if (browser.match(/Alipay/i) == "alipay") {
        console.log("支付宝app的浏览器");
        //这个可以关闭安卓系统的手机
        document.addEventListener("AlipayJSBridgeReady", function () {
              AlipayJSBridge.call("closeWindow");
@@ -220,20 +279,27 @@
        //这个可以关闭ios系统的手机
        WeixinJSBridge.call("closeWindow");
      } else {
        console.log("其它浏览器");
        window.opener = null;             //如果没有这行和下面的一行则会出现上面的第二个询问框。
        window.opener = null; //如果没有这行和下面的一行则会出现上面的第二个询问框。
        window.open(' ', '_self', ' ');
        window.close()
      }
    },
    /*登录*/
    getToken(res) {
      this.token = res.token
      if (res.openid) {
        uni.setStorageSync('OPENID' + this.payWay, res.token)
        uni.setStorageSync('OPENID', res.openid)
      }
      if (res.unionid) {
        uni.setStorageSync('UNIONID' + this.payWay, res.token)
        uni.setStorageSync('UNIONID', res.unionid)
      }
      if (res.aLiUserId) {
        uni.setStorageSync('ALIUSERID', res.aLiUserId)
      }
      if (res.cloudPayUserId) {
        uni.setStorageSync('UNIONPAYID', res.cloudPayUserId)
      }
      this.UNIONID = res.unionid
      uni.setStorageSync(ACCESSTOKEN, res.token)
      uni.setStorageSync('IS_NEW', res.isNew)
      this.isNew = res.isNew
@@ -241,18 +307,14 @@
        this.showCoupon()
      }
    },
    /*授权unionid*/
    toRegister() {
      if (this.UNIONID) {
        uni.navigateTo({
          url: '/pay/register?cid=' + this.cid
        })
      }
      if (this.payWay == 2) {
        const redirect_uri = encodeURIComponent(`${config.webURL}/pay/scanpay?cid=${opt.query.cid}`)
        const redirect_uri = encodeURIComponent(`${config.webURL}/pay/scanpay?cid=${this.cid || ''}&shopId=${this.shopId || ''}&activityQrcodeId=${this.activityQrcodeId || ''}&smoney=${this.smoney || ''}`)
        uni.clearStorageSync()
        window.location.href =
            `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${config.wx_appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
            `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${config.wx_appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect`
      }

    },
    // 更新金额
    changeMoney(str) {
@@ -263,16 +325,31 @@
      this.bordShow = true;
    },
    init() {
      this.loading = true
      let timer = setTimeout(() => {
        this.shopInfo.scanFlag = 0
        this.tips = '当前用户过多，请稍后重试～_～'
        this.loading = false
      }, 2000)
      //获取商铺信息
      queryShop({
        params: {
      let api = queryShopByCid
      let params = {
        cid: this.cid
      }
      if (this.cid) {
        api = queryShopByCid
        params = {
          cid: this.cid
        }
      }
      if (this.shopId) {
        api = queryShopByShopId
        params = {
          shopId: this.shopId
        }
      }
      //获取商铺信息
      api({
        params
      }).then(res => {
        clearTimeout(timer)
        this.loading = false
@@ -280,26 +357,51 @@
          res.logoImage = config.baseURL + res.logoImage
        }
        this.shopInfo = res
      }).catch(()=>{
      }).catch((err) => {
        clearTimeout(timer)
        this.shopInfo.scanFlag = 0
        this.tips = '当前用户过多，请稍后重试～_～'
        this.tips = err.description||'当前用户过多，请稍后重试～_～'
        this.loading = false
      })

      if (this.payWay == 2) {
        const uri = encodeURIComponent(window.location)
        getWechatConfigInfo({
          url: uri
        }).then(res => {
          wx.config({
            debug: false, // 开启调试模式
            appId: res.appId, // 必填，公众号的唯一标识
            timestamp: res.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.noncestr, // 必填，生成签名的随机串
            signature: res.signature, // 必填，签名
            jsApiList: ['hideAllNonBaseMenuItem'], // 必填，需要使用的JS接口列表
            openTagList: ['wx-open-launch-weapp'] //可选，需要使用的开放标签列表
          });
          wx.ready(function () {
            wx.hideAllNonBaseMenuItem();
          })
        })
      }
    },
    // 获取会员相关信息
    showCoupon() {
      //获取用户优惠券
      queryUseSweepPayCoupon({
        params: {
          cusid: this.shopInfo.cusid,
          cid: this.cid,
          money: Number(this.money * 100),
        }
      }).then(res => {
        this.couponList = res
        this.couponShow = true
      })
      if(this.UNIONID){
        //获取用户优惠券
        queryUseSweepPayCoupon({
          params: {
            applyPayWayStr: this.payWay,
            cusid: this.shopInfo.id,
            money: Number(this.money * 100),
          }
        }).then(res => {
          this.couponList = res
          this.couponShow = true
        })
      }else{
        this.toRegister()
      }

    },
    //选择优惠券
    clickCoupon(item) {
@@ -329,13 +431,18 @@
      // 金额 this.money
      uni.showLoading()
      const params = {
        money: Number(this.money * 100),
        shopId: this.shopInfo.id,
        cid: this.cid,
        payWay: this.payWay,
        buyerNote: this.buyerNote,
        score: 0,
        couponDetailId: this.couponInfo.id
      }
      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
      }
      //生成订单
      saveOrder(params).then(res => {
@@ -400,15 +507,15 @@
          // 取消
          this.closeOrder()
        } else {
          this.closeOrder()
          // 支付失败
          this.closeOrder()
        }
      });
    },
    closeOrder() {
      closeOrder({
      closeOrder({params:{
        id: this.orderId,
      }).then(res => {
      }}).then(res => {
      })
    }
  }
@@ -418,6 +525,9 @@
<style scoped lang="scss">
.page {
  height: calc(100vh - 0px);
  background-color: #EDEDED;
  border-top: 1px solid #EDEDED;
  box-sizing: border-box;
}

.shop {