feat(支付): 支付页修改

石广澎

2024-07-16 293eebbb97bf79e4f2779eb067d27c9c211c6ccc

feat(支付): 支付页修改

 common/http.interceptor.js

@@ -56,7 +56,7 @@
        let res = x.data
        if (res.code == 10000) {
            return res.data;
        } else if (res.code == 20002) {
        } else if (res.code == 401) {
            const cid = uni.getStorageSync('CID')
            uni.removeStorageSync(ACCESSTOKEN)
            vm.$u.toast("授权过期,请重新登录");
@@ -69,7 +69,7 @@
        } else if (res.code == 10002) {
            return Promise.reject(res)
        } else {
            vm.$u.toast(res.description || "请求异常！"); //错误提示信息
            vm.$u.toast(res.description || res.msg ||res.info ||"请求异常！"); //错误提示信息
            return Promise.reject(res)
        }
    }, (response) => {

 pay/scanpay.vue

@@ -1,102 +1,114 @@
<!-- 扫码支付 -->
<template>
  <view class="page">
    <view class="shop u-flex u-row-between">
      <view class="u-m-r-30">
        <view class="u-font-26 color-666 u-m-b-10">付款给</view>
        <view class="u-font-34 color-333">{{ shopInfo.shopName }}</view>
      </view>
      <u-image width="88rpx" height="88rpx" shape="circle" :src="shopInfo.logoImage||'/static/store-logo.png'"></u-image>
    </view>
    <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 class="remark">添加备注</view>
      </view>
      <view 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>
          <view :class="['cursor',{'cursor-act':!money&&bordShow}]"></view>
          <view v-if="!money" class="u-font-50 color-999 lh-1">请输入金额</view>
          <view :class="['cursor',{'cursor-act':money&&bordShow}]"></view>
    <u-loading-page :loading="loading"></u-loading-page>
    <block v-if="shopInfo.scanFlag==1">
      <view class="shop u-flex u-row-between">
        <view class="u-m-r-30">
          <view class="u-font-26 color-666 u-m-b-10">付款给</view>
          <view class="u-font-34 color-333">{{ shopInfo.shopName }}</view>
        </view>
        <view class="mask" @click="showBord"></view>
        <u-image width="88rpx" height="88rpx" shape="circle" errorIcon="/static/store-logo.png" loadingIcon="/static/store-logo.png" :src="shopInfo.logoImage||'/static/store-logo.png'" bgColor="#fff"></u-image>
      </view>
<!--      <image v-if="isNew&&(this.payWay == 2&&!UNIONID)" @click="toRegister" class="reg-btn" src="/static/register-btn.png" mode=""></image>-->

    </view>
    <block v-if="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>-->
          <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>
            <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 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>
        <view 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>
            <view :class="['cursor',{'cursor-act':!money&&bordShow}]"></view>
            <view v-if="!money" class="u-font-50 color-999 lh-1">请输入金额</view>
            <view :class="['cursor',{'cursor-act':money&&bordShow}]"></view>
          </view>
          <view class="mask" @click="showBord"></view>
        </view>
        <view class="u-font-26 u-tips-color u-p-24">微信搜索或直接点击打开
        <!--      <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>
      </view>
    </block>


    <block v-if="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>
          <view class="color-green">- {{ discount }}</view>
        </view>
        <view class="u-p-24 u-flex u-row-between u-br-10 bg-fff">
          <view class="u-font-32 color-333">实付金额</view>
          <view class="color-red">
            <text class="u-font-26 u-m-r-6">¥</text>
            <text class="u-font-34">{{ payMoney }}</text>
          </view>
        </view>
      </view>
    </block>
    <button class="pay-it" @click="pay">付款</button>
    <!-- 数字键盘 -->
    <u-popup :show="bordShow" :overlay="false" @close="bordShow = false">
      <key-bord @changeMoney="changeMoney" :num.sync="money" @close="bordShow = false" @pay="pay"></key-bord>
    </u-popup>
    <!-- 优惠券弹窗 -->
    <u-popup 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)) }}
      </view>
      <scroll-view scroll-y class="u-p-30 coupon-list">
        <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">
              <text class="u-font-36">￥</text>
              <text class="money">{{ parseFloat(item.discount / 100) }}</text>
            </view>
            <view class="u-font-24 u-m-t-20">满{{ parseFloat(item.thresholdValue / 100) }}元使用</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-22 color-999 u-m-t-20">
                有效期至：{{ $u.timeFormat(item.outTime, 'yyyy-mm-dd hh:MM') }}
      <block v-if="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>-->
            <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>
              <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>
            <u-icon v-if="item.id==checkCoupon.id" name="checkmark-circle-fill" color="#D31F28" size="20">
            </u-icon>
          </view>
          <view class="u-font-26 u-tips-color u-p-24">微信搜索或直接点击打开
            <text style="color: #1E8BE0">【冀优邮】</text>
            小程序，享受更多优惠
          </view>
        </view>
      </scroll-view>
      <view @click="getCoupon" class="coupon-btn">确定</view>
    </u-popup>
      </block>
      <block v-if="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>
            <view class="color-green">- {{ discount }}</view>
          </view>
          <view class="u-p-24 u-flex u-row-between u-br-10 bg-fff">
            <view class="u-font-32 color-333">实付金额</view>
            <view class="color-red">
              <text class="u-font-26 u-m-r-6">¥</text>
              <text class="u-font-34">{{ payMoney }}</text>
            </view>
          </view>
        </view>
      </block>
      <button class="pay-it" @click="pay">付款</button>
      <!-- 数字键盘 -->
      <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>
      </u-popup>
      <!-- 优惠券弹窗 -->
      <u-popup zIndex="800" 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)) }}
        </view>
        <scroll-view scroll-y class="u-p-30 coupon-list">
          <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">
                <text class="u-font-36">￥</text>
                <text class="money">{{ parseFloat(item.discount / 100) }}</text>
              </view>
              <view class="u-font-24 u-m-t-20">满{{ parseFloat(item.thresholdValue / 100) }}元使用</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-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>
            </view>
          </view>
        </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>
    </block>
    <view v-if="shopInfo.scanFlag==0" class="empty-box">
      <image src="/static/empty.png" class="empty"></image>
      <view class="tips">{{tips}}</view>
      <view @click="clickDone" class="clickDone">关闭</view>
    </view>
  </view>
</template>

@@ -116,6 +128,10 @@
export default {
  data() {
    return {
      tips: '该商户暂未开通支付功能',
      loading: true,
      buyerNote: '',
      showRemark: false,
      UNIONID: null,
      payWay: this.$utils.getPlat(),
      cid: '',
@@ -124,16 +140,14 @@
        cusid: '',
        shopName: '',
        logoImage: '',
        scanFlag: '',
        useScoreFlag: 0, //商铺是否可用积分 0否 1是
        userCouponFlag: 0, //商铺是否可用优惠券 0否 1是
        scanFlag: -1,
        useScoreFlag: -1, //商铺是否可用积分 0否 1是
        userCouponFlag: -1, //商铺是否可用优惠券 0否 1是
      },
      money: '', // 金额
      token: null,
      isNew: false, // 是否新用户，新用户查询不到积分和银行卡
      canReset: false,
      end: 0,
      count: 0,
      couponShow: false, // 优惠券弹窗
      couponList: [], // 优惠券
      couponInfo: {
@@ -163,7 +177,6 @@
  },
  onLoad(opt) {
    this.isNew = uni.getStorageSync('IS_NEW')
    uni.showLoading()
    if (opt.cid) {
      this.cid = opt.cid
      this.init()
@@ -173,7 +186,6 @@
      if (this.payWay == 5) {
        code = opt.auth_code
      }
      this.end++
      userLogin({
        platform: this.payWay,
        params: {
@@ -181,32 +193,40 @@
        }
      }).then(res => {
        this.getToken(res)
      }).catch(() => {
        this.count++
        if (this.count >= this.end) {
          uni.hideLoading()
        }
      })
    }

  },
  onShow() {
    this.UNIONID = uni.getStorageSync('UNIONID' + this.payWay) || null
    this.token = uni.getStorageSync(ACCESSTOKEN) || null
    if (this.canReset && this.token && !this.isNew) {
      this.end = 0
      this.count = 0
      uni.showLoading()
      this.showCoupon()
    }
    this.canReset = true
  },
  methods: {
    getToken(res) {
      this.count++
      if (this.count >= this.end) {
        uni.hideLoading()
    clickDone() {
      let browser = navigator.userAgent.toLowerCase();
      if (browser.match(/Alipay/i) == "alipay") {
        console.log("支付宝app的浏览器");
        //这个可以关闭安卓系统的手机
        document.addEventListener("AlipayJSBridgeReady", function () {
              AlipayJSBridge.call("closeWindow");
            },
            false
        );
        //这个可以关闭ios系统的手机
        AlipayJSBridge.call('closeWebview'); //支付宝
      } else if (browser.match(/MicroMessenger/i) == "micromessenger") {
        //这个可以关闭安卓系统的手机
        document.addEventListener("WeixinJSBridgeReady", function () {
              WeixinJSBridge.call("closeWindow");
            },
            false
        );
        //这个可以关闭ios系统的手机
        WeixinJSBridge.call("closeWindow");
      } else {
        console.log("其它浏览器");
        window.opener = null;             //如果没有这行和下面的一行则会出现上面的第二个询问框。
        window.open(' ', '_self', ' ');
        window.close()
      }
    },
    getToken(res) {
      this.token = res.token
      if (res.openid) {
        uni.setStorageSync('OPENID' + this.payWay, res.token)
@@ -243,31 +263,32 @@
      this.bordShow = true;
    },
    init() {
      this.end += 1
      let timer = setTimeout(() => {
        this.shopInfo.scanFlag = 0
        this.tips = '当前用户过多，请稍后重试～_～'
        this.loading = false
      }, 2000)
      //获取商铺信息
      queryShop({
        params: {
          cid: this.cid
        }
      }).then(res => {
        this.count++
        if (this.count >= this.end) {
          uni.hideLoading()
        }
        clearTimeout(timer)
        this.loading = false
        if (!uni.$u.test.isEmpty(res.logoImage)) {
          res.logoImage = config.baseURL + res.logoImage
        }
        this.shopInfo = res
      }).catch(() => {
        this.count++
        if (this.count >= this.end) {
          uni.hideLoading()
        }
      }).catch(()=>{
        clearTimeout(timer)
        this.shopInfo.scanFlag = 0
        this.tips = '当前用户过多，请稍后重试～_～'
        this.loading = false
      })
    },
    // 获取会员相关信息
    showCoupon() {
      this.end += 1
      //获取用户优惠券
      queryUseSweepPayCoupon({
        params: {
@@ -276,17 +297,8 @@
          money: Number(this.money * 100),
        }
      }).then(res => {
        this.count++
        if (this.count >= this.end) {
          uni.hideLoading()
        }
        this.couponList = res
        this.couponShow = true
      }).catch(() => {
        this.count++
        if (this.count >= this.end) {
          uni.hideLoading()
        }
      })
    },
    //选择优惠券
@@ -321,6 +333,7 @@
        shopId: this.shopInfo.id,
        cid: this.cid,
        payWay: this.payWay,
        buyerNote: this.buyerNote,
        score: 0,
        couponDetailId: this.couponInfo.id
      }
@@ -507,15 +520,13 @@
}

.cursor {
  position: relative;
  bottom: 10rpx;
  width: 1px;
  height: 70rpx;
}

.cursor-act {
  width: 1px;
  background-color: #333;
  background-color: #999;
  animation: cursor-blinks 1s infinite steps(1, start);
}

@@ -662,4 +673,37 @@
  text-align: center;
}

.empty-box {
  height: calc(80vh - 64rpx);
  margin: 32rpx;
  background-color: #fff;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .tips {
    font-size: 28rpx;
    color: #999;
    margin: 60rpx 0;
  }

  .empty {
    width: 291rpx;
    height: 302rpx;
  }

  .clickDone {
    font-size: 34rpx;
    color: #fff;
    width: 331rpx;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 61rpx;
    background: linear-gradient(0deg, #D31F28 0%, #D31F28 100%), linear-gradient(270deg, #F62B20 13.24%, #FC4E0B 111.68%), #D9D9D9;
  }
}
</style>

 static/empty.png