feat(支付): 支付页修改

石广澎

2024-07-11 6c2609b9f3212e4e502e1dc4d0d4f1382d8782e8

feat(支付): 支付页修改

 App.vue

@@ -71,6 +71,10 @@
        color: #DE2D35;
    }

    .color-green {
        color: #3fde2d;
    }

    .font-bold {
        font-weight: bolder;
    }

 common/config.js

@@ -3,7 +3,7 @@
// 开发
const dev = {
    webURL: 'https://sfzf.cpbtsoft.cn',
    baseURL: '/dev-api',
    baseURL: 'http://172.16.2.121:8080',
    sftpURL: 'https://yqzx.jinmingyuan.com/file',
    wx_appid: 'wx4c146dba764dcb05',
    ali_appid: '2021004149689887'
@@ -12,7 +12,7 @@
const test = {
    webURL: 'https://sfzf.cpbtsoft.cn',
    baseURL: 'https://sfzf.cpbtsoft.cn/prod-api',
    sftpURL: 'https://sfzf.cpbtsoft.cn/file',
    sftpURL: 'https://sfzf.cpbtsoft.cn/prod-api',
    wx_appid: 'wx4c146dba764dcb05',
    ali_appid: '2021004149689887'
}
@@ -30,7 +30,7 @@
    '02': '信用卡'
}
module.exports = {
    config: test,
    config: dev,
    ACCESSTOKEN: "Authorization",
    /* 是否打印请求日志 */
    DEBUG: false,

 components/key-bord/key-bord.vue

@@ -1,136 +1,148 @@
<template>
    <view>
        <view class="u-text-right u-font-30 color-666 u-p-20" @click="close">关闭</view>
        <view class="u-p-10 bord-box u-flex u-row-between">
            <view class="u-flex u-flex-wrap">
                <view v-for="(num,index) in numList" :key="index" class="num-item" hover-class="num-hover"
                    @click="inputStr(num)">{{num}}</view>
            </view>
            <view class="flex-1 u-flex-col">
                <view hover-class="num-hover" class="del-item u-flex u-row-center" @click="delStr">
                    <image src="@/static/imgs/del-icon.png" class="del-btn"></image>
                </view>
                <view hover-class="num-hover" class="flex-1 pay-btn u-font-30 color-fff font-bold" @click="pay">付款
                </view>
            </view>
        </view>
    </view>
  <view>
    <view class="u-text-right u-font-30 color-666 u-p-20" @click="close">关闭</view>
    <view class="bord-box u-row-between">
      <view class="u-flex u-flex-wrap">
        <view v-for="(num,index) in numList" :key="index" class="num-item" hover-class="num-hover"
              @click="inputStr(num)">{{ num }}
        </view>
      </view>
      <view class="u-flex-col">
        <view hover-class="num-hover" class="del-item u-flex u-row-center" @click="delStr">
          <image src="@/static/imgs/del-icon.png" class="del-btn"></image>
        </view>
        <view hover-class="num-hover" :class="['pay-btn', 'u-font-30', 'color-fff', 'font-bold',{'disa-btn':Number(emitNum||'0')===0}]" @click="pay">付款
        </view>
      </view>
    </view>
  </view>
</template>

<script>
    export default {
        props: {
            num: {
                type: String,
                default: ''
            }
        },
        watch: {
            num(val) {
                this.emitNum = val
            }
        },
        data() {
            return {
                emitNum: '',
                numList: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '.']
            }
        },
        methods: {
            // 输入框
            inputStr(num) {
                var dotinx = this.emitNum.indexOf('.');
                if (dotinx != -1) {
                    if (num == '.') {
                        // 小数点不能重复添加
                        return;
                    }
                    if (dotinx == this.emitNum.length - 3) {
                        //小数点后面最多两位
                        return;
                    }
                } else if (num == '0' && this.emitNum == '0') {
                    // 首位的0最多1个
                    return;
                } else {
                    if (num != '.' && this.emitNum.length > 7) {
                        //整数不能超过10位
                        return;
                    }
                }
                if (num == '.' && this.emitNum == '') {
                    this.emitNum = '0.';
                } else if (num != '.' && this.emitNum == '0') {
                    this.emitNum = num;
                } else {
                    this.emitNum += num;
                }
                this.$emit('changeMoney', this.emitNum)
            },
            // 删除
            delStr() {
                this.emitNum = this.emitNum.slice(0, -1)
                this.$emit('changeMoney', this.emitNum)
            },
            // 支付
            pay() {
                this.$emit('pay')
            },
            // 关闭输入框
            close() {
                this.$emit('close')
            }
        }
    }
export default {
  props: {
    num: {
      type: String,
      default: ''
    }
  },
  watch: {
    num(val) {
      this.emitNum = val
    }
  },
  data() {
    return {
      emitNum: '',
      numList: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '.']
    }
  },
  methods: {
    // 输入框
    inputStr(num) {
      var dotinx = this.emitNum.indexOf('.');
      if (dotinx != -1) {
        if (num == '.') {
          // 小数点不能重复添加
          return;
        }
        if (this.emitNum == '0.0' && num == '0') {
          //小数点后面不能是两个0
          return;
        }
        if (dotinx == this.emitNum.length - 3) {
          //小数点后面最多两位
          return;
        }
      } else if (num == '0' && this.emitNum == '0') {
        // 首位的0最多1个
        return;
      } else {
        if (num != '.' && this.emitNum.length > 7) {
          //整数不能超过10位
          return;
        }
      }
      if (num == '.' && this.emitNum == '') {
        this.emitNum = '0.';
      } else if (num != '.' && this.emitNum == '0') {
        this.emitNum = num;
      } else {
        this.emitNum += num;
      }
      this.$emit('changeMoney', this.emitNum)
    },
    // 删除
    delStr() {
      this.emitNum = this.emitNum.slice(0, -1)
      this.$emit('changeMoney', this.emitNum)
    },
    // 支付
    pay() {
      if(Number(this.emitNum||'0')===0) return
      this.$emit('pay')
    },
    // 关闭输入框
    close() {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss">
    .bord-box {
        background-color: #F5F5F5;
    }
.bord-box {
  background-color: #F5F5F5;
  display: flex;
  padding: 10rpx 10rpx 0;
  font-size: 0;
}

    .num-item {
        width: 175rpx;
        height: 80rpx;
        line-height: 80rpx;
        color: #333333;
        font-size: 32rpx;
        font-weight: bold;
        text-align: center;
        margin: 0 10rpx 10rpx 0;
        background-color: #FFFFFF;
    }
.num-item {
  width: 175rpx;
  height: 80rpx;
  line-height: 80rpx;
  color: #333333;
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  margin: 0 10rpx 10rpx 0;
  background-color: #FFFFFF;
  border-radius: 8rpx;
}

    .num-hover {
        opacity: 0.7;
    }
.num-hover {
  opacity: 0.7;
}

    .num-item:nth-child(10n) {
        width: 356rpx;
    }
.num-item:nth-child(10n) {
  width: 356rpx;
}

    .h-100 {
        height: 100%;
    }
.pay-btn {
  width: 175rpx;
  flex: 1;
  background-color: #D45159;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
}
.disa-btn{
  opacity: 0.7;
}

    .pay-btn {
        background-color: #D45159;
        border-radius: 16rpx;
        text-align: center;
        height: 270rpx;
        line-height: 270rpx;
        vertical-align: middle;
    }
.del-item {
  width: 175rpx;
  height: 80rpx;
  border-radius: 8rpx;
  margin-bottom: 10rpx;
  background-color: #FFFFFF;
}

    .del-item {
        width: 175rpx;
        height: 80rpx;
        margin-bottom: 10rpx;
        background-color: #FFFFFF;
    }

    .del-btn {
        width: 40rpx;
        height: 40rpx;
    }
</style>
.del-btn {
  width: 40rpx;
  height: 40rpx;
}
</style>

 pages.json

@@ -6,7 +6,7 @@
        {
            "path": "pay/scanpay",
            "style": {
                "navigationBarTitleText": "支付",
                "navigationBarTitleText": "向商家付款",
                "enablePullDownRefresh": false
                // #ifdef H5
                ,
@@ -53,7 +53,7 @@
        {
            "path": "pay/login",
            "style": {
                "navigationBarTitleText": "登录",
                "navigationBarTitleText": "邮佰惠",
                "enablePullDownRefresh": false
                // #ifdef H5
                ,
@@ -65,7 +65,7 @@
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "支付",
        "navigationBarTitleText": "邮佰惠",
        "navigationBarBackgroundColor": "#FFFFFF",
        "backgroundColor": "#FFFFFF"
    },

 pay/discountpay.vue

@@ -9,27 +9,7 @@
                <text class="u-font-40">.{{money.split(".")[1]}}</text>
            </view>
        </view>

    <!--        <view v-if="discountInfo.shopDiscount!=1&&money*(1-discountInfo.shopDiscount)>=0.01"
            class="bg-fff u-m-h-32 u-m-t-20 u-p-h-32 u-br-10">
            <view class="u-p-v-32 u-flex u-row-between u-border-bottom u-font-30 color-333">
                <view>{{discountInfo.memberGradeName}}专属折扣</view>
                <view>-{{ money*(1-discountInfo.shopDiscount).toFixed(2) }}</view>
            </view>
        </view>-->
        <view v-if="canUseIntegral||canUseCoupon" class="u-p-h-32 bg-fff u-m-h-32 u-br-10">
<!--            <view class="u-font-28 u-m-t-32">选择优惠方式</view>
            <view v-if="canUseIntegral" class="u-p-v-24 u-border-bottom u-flex u-m-t-10">
                <image class="item-icon" style="align-self: flex-start;position: relative;top: -3rpx;"
                    src="/static/integral.png" mode=""></image>
                <view class="u-flex-1 u-m-h-16">
                    <view class="u-font-30">积分抵扣</view>
                    <view class="u-font-24 color-999 u-m-t-20">可用<text style="color: #D31F28;">{{integral}}</text>积分
                    </view>
                </view>
                <input-number @handleCount="changeInt" :value="canUseInt" :min="0" :max="maxIntegral">
                </input-number>
            </view>-->
            <view v-if="canUseCoupon" class="u-flex u-p-v-32">
                <image class="item-icon" src="/static/coupon-icon.png" mode=""></image>
                <view class="u-font-30 u-flex-1 u-m-h-16">优惠券</view>
@@ -146,19 +126,19 @@
                money: 0.00, // 金额
                integral: 0, // 使用积分
                canUseInt: 0, // 可用积分
                couponList: [], // 优惠券
                couponShow: false, // 优惠券弹窗
                couponInfo: {
                    id: '',
                    discount: 0,
                    thresholdValue: 0
                }, // 优惠券内容
                payWay: 3, // 5支付宝 2微信 3银行卡
                isNew: false,
                codeShow: false,
                smscode: '',
                thpinfo: null,
                canReset: false,
        couponShow: false, // 优惠券弹窗
        couponList: [], // 优惠券
        couponInfo: {
          id: '',
          discount: 0,
          thresholdValue: 0
        }, // 优惠券内容
                checkCoupon: {
                    id: null,
                    discount: 0,

 pay/login.vue

@@ -6,9 +6,8 @@

<script>
    import {
        config,
        ACCESSTOKEN
    } from '@/common/config.js';
        config
    } from 'common/config.js';
    export default {
        data() {
            return {
@@ -17,10 +16,10 @@
        },
        onLoad(opt) {
      const redirect_uri = encodeURIComponent(`${config.webURL}/pay/scanpay?cid=${opt.cid}`)
      /*if(uni.getStorageSync('UNIONID'+this.platform)){
      if(uni.getStorageSync('UNIONID'+this.platform)){
        window.location.href = redirect_uri
        return
      }*/
      }
            uni.clearStorage()
            if (this.platform == 2) {
                window.location.href =

 pay/scanpay.vue

@@ -4,13 +4,13 @@
    <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-34 font-bold color-333">{{ shopInfo.shopName }}</view>
      </view>
      <image :src="shopInfo.logo_image||'/static/imgs/store-logo.png'" class="avg-img"></image>
      <u-image width="94rpx" height="94rpx" radius="10rpx" :src="shopInfo.logoImage||'/static/imgs/store-logo.png'"></u-image>
    </view>
    <view class="u-p-48 bg-fff u-flex-1 content">
      <view class="u-font-28 color-666">金额</view>
      <view class="u-p-v-20 u-flex u-border-bottom u-relative">
      <view class="u-p-v-20 u-flex u-border-bottom u-relative money-box">
        <view class="money-icon color-333">¥</view>
        <view class="u-flex-1 u-flex u-m-l-10" style="height: 80rpx;">
          <view v-if="money" class="money-num">{{ money }}</view>
@@ -21,11 +21,66 @@
        <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>
      <block v-if="shopInfo.userCouponFlag==1">
        <view class="u-flex u-p-v-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">请选择</view>
            <u-icon class="u-m-l-10" name="arrow-right" color="#999" size="16"></u-icon>
          </view>
        </view>
        <view v-if="discount" class="u-p-v-30 u-flex u-row-between u-border-bottom">
          <view class="u-font-32 color-333">实际抵扣</view>
          <view class="color-green">- {{ discount }}</view>
        </view>
        <view v-if="discount" class="u-p-v-30 u-flex u-row-between u-border-bottom">
          <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>
      </block>
    </view>
    <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>
      <!-- <view class="choose-coupon">选择优惠券</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>
  </view>
</template>
@@ -38,7 +93,7 @@
import {
  queryShop,
  userLogin,
  queryMyUseSweepPayMaxCoupon,
  queryUseSweepPayCoupon,
  closeOrder,
  saveOrder,
} from 'common/api/index'
@@ -51,31 +106,51 @@
      cid: '',
      bordShow: true, // 显示键盘
      shopInfo: {
        shop_name: '',
        scan_flag: '',
        use_score_flag: 0, //商铺是否可用积分 0否 1是
        user_coupon_flag: 0, //商铺是否可用优惠券 0否 1是
        app_pay_use_score_flag: 0, //微信/支付宝是否可用积分 0否 1是
        app_pay_use_coupon_flag: 0, //微信/支付宝是否可用优惠券 0否 1是
        bank_pay_use_score_flag: 0, //银行卡支付是否可用积分 0否 1是
        bank_pay_use_coupon_flag: 0, //银行卡支付是否可用优惠券 0否 1是
        cusid: '',
        shopName: '',
        logoImage: '',
        scanFlag: '',
        useScoreFlag: 0, //商铺是否可用积分 0否 1是
        userCouponFlag: 0, //商铺是否可用优惠券 0否 1是
      },
      money: '', // 金额
      couponInfo: null, // 优惠券内容
      token: null,
      isNew: false, // 是否新用户，新用户查询不到积分和银行卡
      canReset: false,
      end: 0,
      count: 0,
      couponShow: false, // 优惠券弹窗
      couponList: [], // 优惠券
      couponInfo: {
        id: '',
        discount: 0,
        thresholdValue: 0
      }, // 优惠券内容
      checkCoupon: {
        id: null,
        discount: 0,
        thresholdValue: 0
      },
    };
  },
  computed: {
    discount() {
      let num = 0;
      num = (this.couponInfo.discount / 100).toFixed(2);
      return parseFloat(num);
    },
    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);
    }
  },
  onLoad(opt) {
    this.isNew = uni.getStorageSync('IS_NEW')
    // uni.setStorageSync('OPENID' + this.payWay, opt.code)
    uni.showLoading()
    if (opt.cid) {
      this.cid = opt.cid
      uni.setStorageSync('CID', opt.cid)
      this.init()
    }
    if (opt.code || opt.auth_code) {
@@ -92,7 +167,10 @@
      }).then(res => {
        this.getToken(res)
      }).catch(() => {
        uni.hideLoading()
        this.count++
        if (this.count >= this.end) {
          uni.hideLoading()
        }
      })
    }

@@ -104,7 +182,7 @@
      this.end = 0
      this.count = 0
      uni.showLoading()
      this.getUserInfo()
      this.showCoupon()
    }
    this.canReset = true
  },
@@ -125,7 +203,7 @@
      uni.setStorageSync('IS_NEW', res.isNew)
      this.isNew = res.isNew
      if (!res.isNew) {
        this.getUserInfo()
        this.showCoupon()
      }
    },
    toRegister() {
@@ -161,35 +239,34 @@
        if (this.count >= this.end) {
          uni.hideLoading()
        }
        if (res.logo_image) {
          try {
            let arr = JSON.parse(res.logo_image)
            res.logo_image = config.sftpURL + arr[0].path
          } catch (e) {
            //TODO handle the exception
            res.logo_image = ''
          }
        if (!uni.$u.test.isEmpty(res.logoImage)) {
          res.logoImage = config.baseURL + res.logoImage
        }
        this.shopInfo = res
      }).catch(() => {
        uni.hideLoading()
      })
    },
    // 获取会员相关信息
    getUserInfo() {
      this.end += 1
      //获取用户优惠券
      queryMyUseSweepPayMaxCoupon({
        params: {
          shopId: this.shopInfo.id
        }
      }).then(res => {

        this.count++
        if (this.count >= this.end) {
          uni.hideLoading()
        }
        this.couponInfo = res
      })
    },
    // 获取会员相关信息
    showCoupon() {
      this.end += 1
      //获取用户优惠券
      queryUseSweepPayCoupon({
        params: {
          cusid: this.shopInfo.cusid,
          cid: this.cid,
          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) {
@@ -197,44 +274,23 @@
        }
      })
    },
    //跳转营销页面
    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: `/pay/discountpay?shopInfo=${shopInfo}&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: `/pay/discountpay?shopInfo=${shopInfo}&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: `/pay/discountpay?shopInfo=${shopInfo}&integral=${this.integral}&scoreWorth=${this.scoreWorth}&money=${this.money}&payWay=${this.payWay}&bankCardId=${this.bankCardId}`
            })
            return false
          } else {
            return true
          }
        } else if (this.discount.shopDiscount != 1) {
          uni.navigateTo({
            url: `/pay/discountpay?shopInfo=${shopInfo}&integral=${this.integral}&scoreWorth=${this.scoreWorth}&money=${this.money}&payWay=${this.payWay}&bankCardId=${this.bankCardId}`
          })
          return false
        } else {
          return true
    //选择优惠券
    clickCoupon(item) {
      if (this.checkCoupon.id == item.id) {
        this.checkCoupon = {
          id: '',
          discount: 0,
          thresholdValue: 0
        }
      } else {
        return true
        this.checkCoupon = item
      }
    },
    //确认优惠券
    getCoupon() {
      // item 为优惠券信息
      this.couponInfo = this.checkCoupon;
      this.couponShow = false;
    },
    //确认支付
    pay() {
@@ -242,44 +298,37 @@
        uni.$u.toast('请输入金额！')
        return
      }
      this.bordShow = true
      // return this.toDiscount() //判断是否需要跳转营销页面
      if (this.toDiscount()) {
        // 金额 this.money
        uni.showLoading()
        const params = {
          money: parseFloat((this.money * 100).toPrecision(12)),
          shopId: this.shopInfo.id,
          cid: this.cid,
          payWay: this.payWay,
          score: 0,
          couponDetailId: ''
        }
        if (this.payWay == 3) {
          params.bankCardId = this.bankCardId
        }
        //生成订单
        saveOrder(params).then(res => {
          uni.hideLoading()
          try {
            this.orderId = res.orderId
            res.youHuiInfo.shopName = this.shopInfo.shop_name
            this.youHuiInfo = res.youHuiInfo
            if (this.payWay == 2) {
              this.wxPay(res.paymentData)
            }
            if (this.payWay == 5) {
              this.aliPay(res.paymentData)
            }
          } catch (e) {
            //TODO handle the exception
            console.error(e);
          }
        }).catch(() => {
          uni.hideLoading()
        })
      this.bordShow = false
      // 金额 this.money
      uni.showLoading()
      const params = {
        money: Number(this.payMoney * 100),
        shopId: this.shopInfo.id,
        cid: this.cid,
        payWay: this.payWay,
        score: 0,
        couponDetailId: this.couponInfo.id
      }

      //生成订单
      saveOrder(params).then(res => {
        uni.hideLoading()
        try {
          this.orderId = res.orderId
          res.youHuiInfo.shopName = this.shopInfo.shopName
          this.youHuiInfo = res.youHuiInfo
          if (this.payWay == 2) {
            this.wxPay(res.paymentData)
          }
          if (this.payWay == 5) {
            this.aliPay(res.paymentData)
          }
        } catch (e) {
          //TODO handle the exception
          console.error(e);
        }
      }).catch(() => {
        uni.hideLoading()
      })
    },
    // 微信支付
    wxPay(res) {
@@ -298,8 +347,7 @@
                // 使用以上方式判断前端返回,微信团队郑重提示：
                //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                uni.navigateTo({
                  url: `/pay/paySuccess?orderId=${this.orderId}&youHuiInfo=${JSON
                      .stringify(this.youHuiInfo)}`
                  url: `/pay/paySuccess?orderId=${this.orderId}&youHuiInfo=${JSON.stringify(this.youHuiInfo)}`
                })
              } else {
                this.closeOrder()
@@ -362,11 +410,17 @@
  font-size: 40rpx;
  color: #333;
}

.money-box{
  padding-left: 50rpx;
}
.money-icon {
  font-size: 70rpx;
  position: absolute;
  font-size: 50rpx;
  // font-weight: bold;
  color: #666;
  margin-right: 20rpx;
  bottom: 10rpx;
  left: 0;
}

.money-num {
@@ -386,12 +440,9 @@
  margin: 32rpx;
}

.bank-card-ad {
  padding-top: 50rpx;
  background-image: url(~@/static/bank-card-ad1.png);
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
.item-icon {
  width: 38rpx;
  height: 38rpx;
}

.pay-icon {
@@ -437,7 +488,7 @@

  50% {
    opacity: 0;
    display: none;
    display: block;
  }

  100% {
@@ -447,12 +498,13 @@
}

.cursor {
  border-left: 1px solid transparent;
  width: 1px;
  height: 80rpx;
}

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

@@ -505,10 +557,7 @@
}

.btn {
  /* position: fixed;
bottom: 100rpx; */
  margin: 0 auto;
  margin-top: 120rpx;
  margin: 120rpx auto 0;
  position: relative;
  width: 680rpx;
  height: 100rpx;
@@ -519,4 +568,80 @@
  width: 680rpx;
  height: 100rpx;
}

.coupon {
  background-color: rgba(255, 241, 241, 0.47);
  height: 171rpx;
  border: solid 1rpx #f85d64;
  border-radius: 10rpx;
  position: relative;
  overflow: hidden;
}

.choose-coupon {
  margin: 32rpx 32rpx 0;
  border-radius: 10rpx;
  background: #fff1f1;
  padding: 26rpx 16rpx;
  color: #D31F28;
  font-size: 28rpx;
}

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


.butt {
  width: 1rpx;
  height: 100%;
  position: relative;
  z-index: 9;
  border-left: 1rpx dashed #f85d64;
}

.butt:before {
  z-index: 10;
  box-sizing: border-box;
  position: absolute;
  content: "";
  width: 24rpx;
  height: 12rpx;
  border-bottom: 1rpx solid #f85d64;
  border-right: 1rpx solid #f85d64;
  border-left: 1rpx solid #f85d64;
  border-radius: 0 0 24rpx 24rpx;
  left: -12rpx;
  background-color: #ffffff;
}

.butt:after {
  box-sizing: border-box;
  position: absolute;
  content: "";
  width: 24rpx;
  height: 12rpx;
  bottom: 0;
  border-bottom: 1rpx solid #ffff;
  border-right: 1rpx solid #f85d64;
  border-left: 1rpx solid #f85d64;
  border-top: 1rpx solid #f85d64;
  border-radius: 24rpx 24rpx 0 0;
  left: -12rpx;
  background-color: #ffffff;
}


.coupon-btn {
  margin: 0 30rpx 30rpx;
  height: 98rpx;
  border-radius: 10rpx;
  background-color: #D31F28;
  font-size: 34rpx;
  color: #fff;
  line-height: 98rpx;
  text-align: center;
}

</style>