feat(支付): 支付页修改

石广澎

2024-07-16 16d9802ad6cc80a10454ecf701514e8a14275ee1

feat(支付): 支付页修改

 common/config.js

@@ -2,37 +2,37 @@

// 开发
const dev = {
    webURL: 'https://sfzf.cpbtsoft.cn',
    baseURL: 'http://172.16.2.121:8080',
    sftpURL: 'https://yqzx.jinmingyuan.com/file',
    wx_appid: 'wx4c146dba764dcb05',
    ali_appid: '2021004149689887'
    webURL: 'https://sfzf.cpbtsoft.cn',
    baseURL: 'http://172.16.2.117:8080',
    sftpURL: 'https://yqzx.jinmingyuan.com/file',
    wx_appid: 'wx4c146dba764dcb05',
    ali_appid: '2021004149689887'
}
// 测试
const test = {
    webURL: 'https://sfzf.cpbtsoft.cn',
    baseURL: 'https://sfzf.cpbtsoft.cn/prod-api',
    sftpURL: 'https://sfzf.cpbtsoft.cn/prod-api',
    wx_appid: 'wx4c146dba764dcb05',
    ali_appid: '2021004149689887'
    webURL: 'https://sfzf.cpbtsoft.cn',
    baseURL: 'https://sfzf.cpbtsoft.cn/prod-api',
    sftpURL: 'https://sfzf.cpbtsoft.cn/prod-api',
    wx_appid: 'wx4c146dba764dcb05',
    ali_appid: '2021004149689887'
}
// 正式
const prod = {
    webURL: 'https://jmy.jinmingyuan.com',
    baseURL: 'https://yqzx.jinmingyuan.com',
    sftpURL: 'https://yqzx.jinmingyuan.com/file',
    wx_appid: 'wx4c146dba764dcb05',
    ali_appid: '2021004149689887'
    webURL: 'https://jmy.jinmingyuan.com',
    baseURL: 'https://yqzx.jinmingyuan.com',
    sftpURL: 'https://yqzx.jinmingyuan.com/file',
    wx_appid: 'wx4c146dba764dcb05',
    ali_appid: '2021004149689887'
}

const cardType = {
    '00': '储蓄卡',
    '02': '信用卡'
    '00': '储蓄卡',
    '02': '信用卡'
}
module.exports = {
    config: test,
    ACCESSTOKEN: "Authorization",
    /* 是否打印请求日志 */
    DEBUG: false,
    cardType: cardType
    config: process.env.NODE_ENV === 'development' ? dev : test,
    ACCESSTOKEN: "Authorization",
    /* 是否打印请求日志 */
    DEBUG: false,
    cardType: cardType
}

 components/key-bord/key-bord.vue

@@ -9,7 +9,7 @@
      </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>
          <image src="@/static/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>

 pages.json

@@ -15,18 +15,6 @@
            }
        },
        {
            "path": "pay/discountpay",
            "style": {
                "navigationBarTitleText": "优惠",
                "enablePullDownRefresh": false
                // #ifdef H5
                ,
                "navigationStyle": "custom"
                // #endif
            }

        },
        {
            "path": "pay/register",
            "style": {
                "navigationBarTitleText": "注册",

 pay/discountpay.vue

File was deleted

 pay/paySuccess.vue

@@ -102,7 +102,7 @@
                </view>
            </view>
            <view class="btn-box">
                <u-button @click="doJump" text="完成" type="success" plain shape="circle"></u-button>
                <u-button @click="clickDone" text="完成" type="success" plain shape="circle"></u-button>
            </view>
        </block>

@@ -230,9 +230,32 @@
                return null;
            },
            clickDone() {
                // window.close()
                WeixinJSBridge.call('closeWindow');

        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()
        }
            },
            doJump() {
                var mchData = {
@@ -290,7 +313,7 @@
    .coupon {
        width: 638rpx;
        height: 172rpx;
        background-image: url('~@/static/shuaka/pay-by-card-coupon.png');
        background-image: url('~@/static/pay-by-card-coupon.png');
        background-size: cover;
        margin: 10rpx auto 20rpx;
        display: flex;

 pay/scanpay.vue

@@ -3,49 +3,65 @@
  <view class="page">
    <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.shopName }}</view>
        <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="94rpx" height="94rpx" radius="10rpx" :src="shopInfo.logoImage||'/static/imgs/store-logo.png'"></u-image>
      <u-image width="88rpx" height="88rpx" shape="circle" :src="shopInfo.logoImage||'/static/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 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>
    <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">请输入金额</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>
      <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>
<!--      <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">请选择</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>
        </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="u-font-26 u-tips-color u-p-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 v-if="discount" class="u-p-v-30 u-flex u-row-between u-border-bottom">
        <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>
      </block>
    </view>
      </view>
    </block>
    <button class="pay-it" @click="pay">付款</button>
    <!-- 数字键盘 -->
    <u-popup :show="bordShow" :overlay="false" @close="bordShow = false">
@@ -57,7 +73,6 @@
      <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">
@@ -302,7 +317,7 @@
      // 金额 this.money
      uni.showLoading()
      const params = {
        money: Number(this.payMoney * 100),
        money: Number(this.money * 100),
        shopId: this.shopInfo.id,
        cid: this.cid,
        payWay: this.payWay,
@@ -346,9 +361,9 @@
              if (res.err_msg == "get_brand_wcpay_request:ok") {
                // 使用以上方式判断前端返回,微信团队郑重提示：
                //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                uni.navigateTo({
                /*uni.navigateTo({
                  url: `/pay/paySuccess?orderId=${this.orderId}&youHuiInfo=${JSON.stringify(this.youHuiInfo)}`
                })
                })*/
              } else {
                this.closeOrder()
              }
@@ -366,8 +381,11 @@
                .stringify(this.youHuiInfo)}`
          })
          // 支付成功
        } else if (res.resultCode == 8000 || res.resultCode == 6001) {
        } else if (res.resultCode == 8000) {
          // 正在处理中 || 取消
        } else if (res.resultCode == 6001) {
          // 取消
          this.closeOrder()
        } else {
          this.closeOrder()
          // 支付失败
@@ -387,45 +405,36 @@
<style scoped lang="scss">
.page {
  height: calc(100vh - 0px);
  display: flex;
  flex-direction: column;
}

.shop {
  padding: 50rpx 64rpx;
  padding: 50rpx 32rpx 10px;
}

.avg-img {
  width: 94rpx;
  height: 94rpx;
  border-radius: 10rpx;
  width: 88rpx;
  height: 88rpx;
  border-radius: 44rpx;
  background-color: #ffffff;
}

.content {
  border-radius: 40rpx 40rpx 0 0;
}

.money {
  font-size: 40rpx;
  color: #333;
}
.money-box{
  padding-left: 50rpx;
}


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

.money-num {
  font-size: 96rpx;
  // font-weight: bold;
  font-size: 72rpx;
}

.pay-it {
@@ -498,8 +507,10 @@
}

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

.cursor-act {
@@ -632,6 +643,13 @@
  background-color: #ffffff;
}

.remark {
  color: #1E8BE0
}

.lh-1 {
  line-height: 1;
}

.coupon-btn {
  margin: 0 30rpx 30rpx;

 static/act-bg.png

Binary files differ

 static/bangka.png

Binary files differ

 static/bank-card-ad1.png

Binary files differ

 static/bank-card-ad2.png

Binary files differ

 static/bind-card-modal.png

Binary files differ

 static/bind-card-title.png

Binary files differ

 static/cart/icon_add.png

Binary files differ

 static/cart/icon_addLight.png

Binary files differ

 static/cart/icon_less.png

Binary files differ

 static/cart/icon_lessLight.png

Binary files differ

 static/check-type.png

Binary files differ

 static/close-icon.png

Binary files differ

 static/coupon-bg2.png

Binary files differ

 static/coupon-icon.png

Binary files differ

 static/del-icon.png

 static/imgs/pay-jyk.png

Binary files differ

 static/imgs/pay-wx.png

Binary files differ

 static/imgs/pay-zfb.png

Binary files differ

 static/imgs/store-logo.png

Binary files differ

 static/integral.png

Binary files differ

 static/pay-btn.jpeg

Binary files differ

 static/pay-btn.png

Binary files differ

 static/pay-by-card-coupon.png

 static/shuaka/coupon-title-left.png

Binary files differ

 static/shuaka/coupon-title-right.png

Binary files differ

 static/shuaka/notice-check.png

Binary files differ

 static/shuaka/pay-by-card-bg-top.png

Binary files differ

 static/shuaka/pay-by-card-bg.png

Binary files differ

 static/shuaka/pay-by-card-btn.png

Binary files differ

 static/shuaka/pay-by-card-coupon-get.png

Binary files differ

 static/shuaka/pay-by-card-coupon-lock.png

Binary files differ

 static/shuaka/pay-by-card-dto-ttitle-bg.png

Binary files differ

 static/shuaka/pay-by-card-lock.png

Binary files differ

 static/shuaka/pay-by-card-modal-bg.png

Binary files differ

 static/shuaka/pay-by-card-step-act.png

Binary files differ

 static/shuaka/pay-by-card-step.png

Binary files differ

 static/shuaka/popup-close.png

Binary files differ

 static/shuaka/shuaka.png

Binary files differ

 static/shuaka/title-bg.png

Binary files differ

 static/shuaka/title-icon1.png

Binary files differ

 static/shuaka/title-icon2.png

Binary files differ

 static/store-logo.png

 static/title-left.png

Binary files differ

 static/title-right.png

Binary files differ