api商品支付 取消订单 弹出框遮挡显示

src/api/points.js

@@ -70,4 +70,20 @@ export function productOrderCreate(data) {
         url: '/product/order/create',
         data
     });
+}
+//商品支付
+export function productOrderPay(data) {
+    return request({
+        method: 'post',
+        url: '/product/order/pay',
+        data
+    });
+}
+//取消订单
+export function productOrderCancel(data) {
+    return request({
+        method: 'post',
+        url: '/product/order/cancel',
+        data
+    });
 }

src/points/productDetails/index.vue

@@ -134,7 +134,7 @@
       <u-popup :show="redemptionRulesShowPopup" mode="bottom" @close="redemptionRulesShowPopup = false" round="20">
         <RedemptionRules ref="redemptionRulesRef"></RedemptionRules>
       </u-popup>
-      <u-popup :z-index="99" :show="selectProductShowPopup" mode="bottom" round="10">
+      <u-popup :z-index="999" :show="selectProductShowPopup" mode="bottom" round="10">
         <SelectProduct :params="params" ref="selectProductRef" :defaultAddress="defaultAddress"
           @redeemNowFun="redeemNowFun" @closeSelectProduct="closeSelectProduct">
         </SelectProduct>
@@ -152,7 +152,7 @@
 import ImageItem from "@/components/swiper/components/image.vue";
 import RedemptionRules from "./components/redemptionRules.vue";
 import SelectProduct from "./components/selectProduct.vue";
-import { productGetById, productOrderCreate } from '@/api/points'
+import { productGetById, productOrderCreate, productOrderPay } from '@/api/points'
 import { getAddrList, } from '@/api/address';
 import {
   getInfo,
@@ -278,6 +278,9 @@ export default {
       // 	})
       // 	return;
       // 
+      // uni.navigateTo({
+      //   url: '/points/productDetails/pendingPayment'
+      // });
 
       if (this.selectedObj) {
         if (this.selectPayMeth == null) {
@@ -320,7 +323,10 @@ export default {
       params.buyerRemark = this.orderRemarks;//买家备注信息
       console.log(params, 'params')
       productOrderCreate(params).then(res => {
+        return
+        productOrderPay().then(res => {
 
+        })
 
       })
       return
@@ -385,7 +391,7 @@ export default {
           success: function (res) {
             if (res.confirm) {
               uni.navigateTo({
-                url: 'pages/my/pay?name=充值'
+                url: '../../pages/my/pay?name=充值'
               })
             } else if (res.cancel) { }
           }
@@ -408,7 +414,10 @@ export default {
         params.buyerRemark = this.orderRemarks;//买家备注信息
         console.log(params, 'params')
         productOrderCreate(params).then(res => {
+          return
+          productOrderPay().then(res => {
 
+          })
 
         })
         return
@@ -464,6 +473,11 @@ export default {
 .mainImame {
   height: 456rpx;
 }
+::v-deep .u-popup{
+  .u-transition, .u-fade-enter-to, .u-fade-enter-active{
+    z-index: 999!important;
+  }
+}
 
 .footer-bar {
   .u-button {

src/points/productDetails/pendingPayment.vue

@@ -13,8 +13,8 @@
                 </view>
                 <view class="content">
                     <view class="addressBox">
-                        <image style="width: 45rpx;height: 40rpx;" @click="addressSelectFun"
-                            src="@/static/points/addressIcon.png" mode=""></image>
+                        <image style="width: 45rpx;height: 40rpx;" src="@/static/points/addressIcon.png" mode="">
+                        </image>
                         <view style="margin-left: 16rpx;">
                             <view class="name">
                                 张三 <text>
@@ -60,8 +60,23 @@
                         </view>
                     </view>
                     <view class="weiChect">
-                        <view class="text">微信支付</view>
-                        <view class="text">微信支付</view>
+                        <view style="display: flex;">
+                            <image v-if="payMeth == '1'" style="width: 40rpx;height: 40rpx;"
+                                src="@/static/points/weiXin.png" mode="">
+                            </image>
+                            <image v-if="payMeth == '2'" style="width: 40rpx;height: 40rpx;"
+                                src="@/static/points/yue.png" mode="">
+                            </image>
+                            <view class="text" style="color: #333;margin-left: 16rpx;">{{ payMeth == '1' ? '微信支付' :
+                                '余额支付' }}
+                            </view>
+
+                        </view>
+                        <view>
+                            <u-radio-group v-model="payMeth">
+                                <u-radio activeColor="#03C1B8 " :name=payMeth style="margin: 0;"></u-radio>
+                            </u-radio-group>
+                        </view>
                     </view>
                     <view class="orderInfo">
                         <view class="item">
@@ -89,18 +104,19 @@
             <view class="buttonClass">
                 <u-button v-if="title == '待支付'" :customStyle="{
                     color: '#999',
-                    background: ''
+                    background: '',
+                    border: '2rpx solid rgba(153, 153, 153, 1)'
                 }" @click="cancelOrderFun">取消支付</u-button>
 
                 <u-button v-if="title == '待支付'" :customStyle="{
                     color: '#fff ',
                     background: '#03C1B8'
-                }" @click="checkOrder">去付款</u-button>
+                }" @click="goPay">去付款</u-button>
 
                 <u-button v-if="title == '订单取消'" :customStyle="{
                     color: '#fff ',
                     background: '#03C1B8'
-                }" @click="checkOrder">再次购买</u-button>
+                }" @click="buyAgain">再次购买</u-button>
             </view>
 
         </scroll-view>
@@ -108,14 +124,10 @@
 
         <!-- 取消订单 <u-line></u-line>-->
         <u-popup :show="cancelOrderShowPopup" mode="bottom" round="10">
-            <view class="content">
-
-            </view>
-
             <view class="popup-con">
                 <!-- 标题 -->
                 <view class="popup-text">
-                    <text>取消订单</text>
+                    <text class="title">取消订单</text>
                     <text @click="cancelOrderShowPopup = false">取消</text>
                 </view>
                 <!-- 项目列表 -->
@@ -124,20 +136,8 @@
                     <u-radio-group v-model="selectReason" @change="groupChange">
 
                         <view style="padding: 0 20rpx 24rpx 20rpx;">
-                            <view class="radioBox">
-                                <u-radio activeColor="#03C1B8 " name='1'></u-radio>买错了/不想要
-                            </view>
-                            <view class="radioBox">
-                                <u-radio activeColor="#03C1B8 " name='2'></u-radio> 商品无货
-                            </view>
-                            <view class="radioBox">
-                                <u-radio activeColor="#03C1B8 " name='3'></u-radio> 商品信息填写错误
-                            </view>
-                            <view class="radioBox">
-                                <u-radio activeColor="#03C1B8 " name='4'></u-radio> 地址信息填写错误
-                            </view>
-                            <view class="radioBox">
-                                <u-radio activeColor="#03C1B8 " name='5'></u-radio> 其他原因
+                            <view class="radioBox" v-for="item in selectReasonList">
+                                <u-radio activeColor="#03C1B8 " :name=item.value></u-radio>{{ item.text }}
                             </view>
                         </view>
                     </u-radio-group>
@@ -145,9 +145,10 @@
                 </view>
                 <view class="popupButtonClass">
                     <u-button :customStyle="{
-                        color: '#999',
-                        background: '#eee'
-                    }" @click="cancelOrderSubmit">提交</u-button>
+                        color: selectReason ? '#fff' : '#999',
+                        background: selectReason ? '#03C1B8' : '#eee'
+                    }" @click="cancelOrderSubmit">{{ selectReason ? '提交' : '请先选择原因' }}</u-button>
+
                 </view>
             </view>
 
@@ -164,18 +165,28 @@
 </template>
 
 <script>
-
+import { productOrderCancel, productOrderPay } from '@/api/points'
+import {
+    getInfo, payoff, pay, getSignature,
+} from '@/api/index.js';
 export default {
     components: {},
     data() {
         return {
-            selectReason:'',
+            payMeth: '2',
+            selectReason: '',
+            selectReasonValue: '',
             title: '待支付',
             cancelOrderShowPopup: false,
             orderStatus: '剩余时间 14:59', //超时未支付
-
-
-
+            selectReasonList: [
+                { value: '1', text: '买错了/不想要' },
+                { value: '2', text: '商品无货' },
+                { value: '3', text: '商品信息填写错误' },
+                { value: '4', text: '地址信息填写错误' },
+                { value: '5', text: '其他原因' },
+            ],
+            dBalance: 0.00,
         }
     },
     onLoad(data) {
@@ -188,24 +199,196 @@ export default {
     },
 
     methods: {
+        //去付款
+        goPay() {
+            if (this.payMeth == 1) {
+                //微信支付 
+                this.weixinPay()
+            } else if (this.payMeth == 2) {
+                //余额支付
+                this.nowYuyue()
+            }
+
+        },
+        //微信支付
+        weixinPay() {
+            let params = {}
+            params.openId = uni.getStorageSync('wx_copenid');//用户openId
+            params.addressId = this.defaultAddress.id;//地址ID
+            params.productId = this.params.id;
+            params.name = this.params.name;
+            params.productMainImage = this.params.productMainImage;
+            params.skuId = this.selectedObj.index; //选中的SKU ID
+            params.specNameValueLis = this.selectedObj.specNameValueList; // SKU列表（规格组合明细）
+            params.quantity = 1; //购买数量
+            params.payType = Number(this.selectPayMeth);//支付方式：1微信支付 2账户余额
+            params.freightAmount = this.params.freight; //运费
+            params.totalAmount = this.selectedObj.originPrice;// 总金额
+            params.payAmount = this.selectedObj.priceMoney;// 支付金额
+            params.pointsUsed = this.selectedObj.pricePoint;// 使用的积分
+            params.buyerRemark = this.orderRemarks;//买家备注信息
+            console.log(params, 'params')
+            productOrderCreate(params).then(res => {
+                return
+                productOrderPay().then(res => {
+
+                })
+
+            })
+            return
+            let url = 'https://test.baoxianzhanggui.com/fragrance/'
+            payoff(params).then(res => {
+                let payConfig = JSON.parse(res.data.data)
+                getSignature(url).then(res => {
+                    this.wxconfig = res.data
+                    wx.config({
+                        beta: true,
+                        debug: false,
+                        appId: this.wxconfig.appId, // 公众号ID 
+                        // appId: uni.getAppBaseInfo().host.appId, // 公众号ID 
+                        timestamp: this.wxconfig.timestamp, // 时间戳，自1970年以来的秒数
+                        nonceStr: this.wxconfig.nonceStr, // 随机串
+                        signature: this.wxconfig.sign, // 微信签名方式
+                        jsApiList: ['getBrandWCPayRequest']
+                    });
+                    var vm = this
+                    wx.invoke('getBrandWCPayRequest',
+                        // 下面参数内容都是后台返回的
+                        {
+                            'appId': payConfig.appid, // 公众号名称，由商户传入
+                            'timeStamp': payConfig.timeStamp, // 时间戳
+                            'nonceStr': payConfig.nonceStr, // 随机串
+                            'package': payConfig.package, // 预支付id
+                            'signType': payConfig.signType, // 微信签名方式
+                            'paySign': payConfig.paySign, // 微信签名
+                        },
+                        function (res) {
+                            // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
+
+                            // JSON.stringify(res);
+                            if (res.err_msg == "get_brand_wcpay_request:ok") {
+                                uni.navigateTo({
+                                    url: '/points/productDetails/paymentSuccessful'
+                                });
+                            } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
+                                uni.showToast({
+                                    title: '已取消支付',
+                                    icon: 'none'
+                                })
+                            } else {
+                                alert('付款失败');
+                            }
+                        }
+                    )
+                })
+            })
+        },
+        //账号余额支付
+        nowYuyue() {
+            if (parseInt(this.dBalance) < parseInt(10)) {
+                uni.showModal({
+                    title: '账户余额不足',
+                    content: '请充值',
+                    success: function (res) {
+                        if (res.confirm) {
+                            uni.navigateTo({
+                                url: 'pages/my/pay?name=充值'
+                            })
+                        } else if (res.cancel) { }
+                    }
+                });
+            } else {
+                let params = {}
+                params.openId = uni.getStorageSync('wx_copenid');//用户openId
+                params.addressId = this.defaultAddress.id;//地址ID
+                params.productId = this.params.id;
+                params.name = this.params.name;
+                params.productMainImage = this.params.productMainImage;
+                params.skuId = this.selectedObj.index; //选中的SKU ID
+                params.specNameValueLis = this.selectedObj.specNameValueList; // SKU列表（规格组合明细）
+                params.quantity = 1; //购买数量
+                params.payType = Number(this.selectPayMeth);//支付方式：1微信支付 2账户余额
+                params.freightAmount = this.params.freight; //运费
+                params.totalAmount = this.selectedObj.originPrice;// 总金额
+                params.payAmount = this.selectedObj.priceMoney;// 支付金额
+                params.pointsUsed = this.selectedObj.pricePoint;// 使用的积分
+                params.buyerRemark = this.orderRemarks;//买家备注信息
+                console.log(params, 'params')
+                productOrderCreate(params).then(res => {
+                    return
+                    productOrderPay().then(res => {
+
+                    })
+
+                })
+                return
+                var data = {
+                    cId: this.details.cId,
+                    payType: this.selectedPayment,
+                    couponReceiveId: this.couponReceiveId,
+                    preferential: this.preferential, //优惠金额
+                    totalPrice: this.totalPrice, //总金额
+                }
+                payoff(data).then(res => {
+                    if (res.data.code == 200) {
+                        uni.navigateTo({
+                            url: '/points/productDetails/paymentSuccessful'
+                        });
+                    } else {
+                        uni.showToast({
+                            icon: 'error',
+                            title: res.data.msg,
+                        })
+                    }
+
+                })
+            }
+        },
+        //查询账户余额
+        getinfo() {
+            getInfo().then(res => {
+                if (res.data.code == 200) {
+                    this.dBalance = res.data.data.dBalance.toFixed(2)
+                }
+            })
+        },
         //取消订单提交按钮
         cancelOrderSubmit() {
             this.cancelOrderShowPopup = false
             this.title = '订单取消'
             this.orderStatus = '您已取消支付'
+            let params = {
+                openId: uni.getStorageSync('wx_copenid'),
+                orderNo: '',
+                cancelReason: this.selectReasonValue,
+            }
+            return
+            productOrderCancel(params).then(res => {
+
+            })
+        },
+        //点击单选按钮
+        groupChange(val) {
+            this.selectReason = val
+            this.selectReasonList.forEach(item => {
+                if (item.value == val) {
+                    this.selectReasonValue = item.text
+                }
+
+            });
         },
         //关闭取消订单选择页
         closeCancelOrderFun() {
             this.cancelOrderShowPopup = false
         },
-        //取消订单
+        //取消订单按钮
         cancelOrderFun() {
             this.cancelOrderShowPopup = true
         },
-        //去我的地址页面
-        addressSelectFun() {
+        //再次购买
+        buyAgain() {
             uni.navigateTo({
-                url: '/points/productDetails/addressManagement'
+                url: `/points/productDetails/index?id=19`
             });
         }
 
@@ -231,6 +414,7 @@ export default {
     align-items: center;
     justify-content: flex-end;
     font-family: PingFang SC, PingFang SC;
+    margin-top: 20rpx;
 
     button {
         width: 168rpx;
@@ -239,7 +423,7 @@ export default {
         height: 56rpx;
         line-height: 40rpx;
         border-radius: 98rpx 98rpx 98rpx 98rpx;
-        border: 2rpx solid #03C1B8;
+
         font-size: 26rpx;
         padding: 0 0 10rpx 0;
         margin: 0 32rpx 0 0;
@@ -267,7 +451,7 @@ export default {
 }
 
 .content {
-    padding: 24rpx 32rpx 0 32rpx;
+    padding: 24rpx 32rpx 30rpx 32rpx;
     font-family: PingFang SC, PingFang SC;
     border-radius: 20rpx 20rpx 0 0;
 
@@ -436,8 +620,7 @@ export default {
         height: 268rpx;
         background: #FFFFFF;
         border-radius: 16rpx 16rpx 16rpx 16rpx;
-        padding: 26rpx 24rpx 2rpx 24rpx;
-        margin-bottom: 30rpx;
+        padding: 26rpx 24rpx 0 24rpx;
 
         .item {
             display: flex;
@@ -474,7 +657,8 @@ export default {
     font-size: 27rpx;
     color: #666666;
     background: #F5F8F8;
-    padding: 15rpx 40rpx 40rpx 40rpx;
+    padding: 40rpx;
+    border-radius: 20rpx 20rpx 0 0;
 
     .popup-text {
         font-weight: bold;
@@ -487,6 +671,15 @@ export default {
         justify-content: space-between;
         position: relative;
 
+        .title {
+            padding-bottom: 10rpx;
+            background-image: url("@/static/points/cancelOrderBg.png");
+            background-size: 100%;
+            background-repeat: no-repeat;
+            background-position: center bottom;
+            /* 水平居中、垂直靠下 */
+        }
+
         text:last-of-type {
             font-weight: 400;
             font-size: 28rpx;
@@ -548,7 +741,8 @@ export default {
         button {
             align-items: center;
             border-radius: 98rpx 98rpx 98rpx 98rpx;
-            font-size: 26rpx;
+            font-size: 32rpx;
+            font-weight: 500;
         }
     }
 }