<template> <view> <view class="width94 comorder mart10"> <view class="height100p width94 goodsimg"> <image class="flleft" mode="widthFix" :src="imageUrl+couponList.packageDetail.listImg"></image> <view class="tcrig"> <view class="font18 fontwig6 fcor333 text1">{{couponList.packageDetail.title}}</view> <view class="font13 fcor666 mart10">规格: 默认</view> <view class="price-number mart10"> <view class="price font16">¥{{couponList.packageDetail.price}}</view> <view class="flright fotrt paddleft10">x1</view> </view> </view> </view> <view class="width94 line1 mart5 marb5"></view> <view class="height50 width100 backcorfff"> <view class="width50 flleft fcor333 fontwig6 font16" style="padding-left: 4%;"> 商品总额 </view> <view class="width40 flright fotrt paddtright10 font15 fontwig6 fcor999"> ¥{{couponList.packageDetail.price}} </view> </view> </view> <view class="width94 comorder mart10"> <view class="height50 width100 backcorfff"> <view class="width50 flleft fcor333 fontwig6 font16" style="padding-left: 4%;"> 支付方式 </view> </view> <view class="width94 line1 mart5 marb5"></view> <view class="height50 width100 backcorfff" @tap="paytype='jinbi'"> <view class="width70 flleft fcor333 fontwig6 font16 text1" style="padding-left: 4%;"> 积分支付<text class="font14 fcor666 margle">可用积分: {{user.gold}}</text> </view> <view class="width20 flright fotrt paddtright10 font15 fontwig6 fcor666 alijun" style="align-items: center;"> <radio :checked="paytype=='jinbi'" color="#0083f5" /> </view> </view> <view class="width94 line1 mart5 marb5"></view> <view class="height50 width100 backcorfff" @tap="paytype='weixin'"> <view class="width50 flleft fcor333 fontwig6 font16" style="padding-left: 4%;"> 微信支付 </view> <view class="width40 flright fotrt paddtright10 font15 fontwig6 fcor666 alijun" style="align-items: center;"> <radio :checked="paytype=='weixin'" color="#0083f5" /> </view> </view> <view class="width94 line1 mart5 marb5"></view> <view class="height50 width100 backcorfff" @tap="paytype='gonghuika'"> <view class="width70 flleft fcor333 fontwig6 font16 text1" style="padding-left: 4%;"> 汇联通工会卡<text class="font14 fcor666 margle">可用余额: {{tongCardPrice}}元</text> </view> <view class="width20 flright fotrt paddtright10 font15 fontwig6 fcor666 alijun" style="align-items: center;"> <radio :checked="paytype=='gonghuika'" @click="changeRiado()" color="#0083f5" /> </view> </view> </view> <view class="width100 height60"></view> <view class="footer"> <view class="settlement"> <view class="sum">实付:<view class="money" v-if="paytype != 'jinbi'">¥{{paytheprice}}</view> <view class="money aliitem" v-else> <image style="width: 15px;height: 15px;vertical-align: sub;" src="../../static/img/jfx.png"> </image>{{paytheprice*100}} </view> </view> <!-- #ifdef MP --> <button class="btn" open-type="getPhoneNumber" v-if="user == null" @getphonenumber="loginByPhone">立即支付</button> <button class="btn" v-else @tap="toPay">立即支付</button> <!-- #endif --> <!-- #ifdef H5 --> <button class="btn" v-if="user.phone == null" @click="jumpH5Bding">立即支付</button> <button class="btn" v-else @tap="toPay">立即支付</button> <!-- #endif --> </view> </view> <ssPaymentPassword ref="paymentPassword" :mode="1" @submit="submitHandle" /> </view> </template> <script> import { addOrder, getDiscountPackageDetail, loginByPhone, orderToPay, orderToGoldPay, findUser, hltUnionCardPay, getHuiLianTongCardBalance } from '../../Utils/Api.js'; import ssPaymentPassword from '../../components/sanshui-payment-password' let app = getApp(); // #ifdef H5 var jweixin = require('jweixin-module'); // #endif export default { components: { ssPaymentPassword }, data() { return { buylist: [], //订单列表 goodsPrice: 0.0, //商品合计价格 sumPrice: 0.0, //用户付款价格 freight: 12.00, //运费 note: '', //备注 int: 1200, //抵扣积分 deduction: 0, //抵扣价格 couponId: '', couponList: [], UserNormalDiscountList: [], imageUrl: app.globalData.imgUrl, deductionPrice: '0.00', paytheprice: '', radioStatus: true, memDiscountId: '', user: '', paytype: '', PaymentPassword: '', orderId: '', jumpType: '', tongCardPrice: 0, storeId: '', isDiscont: false }; }, onLoad(option) { this.couponId = option.id; this.getDiscountPackageDetail(); }, onShow() { let that = this; that.paytype = ''; that.user = app.globalData.userInfo; that.findUser(); }, onHide() { }, onBackPress() { //页面后退时候,清除订单信息 }, filters: { toFixed: function(x) { return parseFloat(x).toFixed(2); }, //过滤器 用于格式化时间 formatDate: function(value, spe = '/') { let data = new Date(value); let year = data.getFullYear(); let month = data.getMonth() + 1; let day = data.getDate(); let h = data.getHours(); let mm = data.getMinutes(); let s = data.getSeconds(); month = month >= 10 ? month : "0" + month; day = day >= 10 ? day : "0" + day; h = h >= 10 ? h : "0" + h; mm = mm >= 10 ? mm : "0" + mm; s = s >= 10 ? s : "0" + s; return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`; } }, methods: { //查询积分 findUser() { let params; findUser(params).then(res => { if (res.return_code == '000000') { app.globalData.userInfo = res.return_data; this.user = res.return_data; this.getHuiLianTongCardBalance(); uni.setStorage({ key: "user", data: res.return_data }) } }); }, //查询优惠券包详情 getDiscountPackageDetail() { uni.showLoading({ title: '加载中...' }) let params = { packageId: this.couponId } getDiscountPackageDetail(params).then(res => { uni.hideLoading(); if (res.return_code == '000000') { this.couponList = res.return_data; this.paytheprice = res.return_data.packageDetail.price; } }) }, //显示弹出 showPopup() { this.$refs.popup.show(); }, //查询工会卡余额 //查询详情 getHuiLianTongCardBalance() { let params = { cardNo: this.user.hltCardNo.cardNo } getHuiLianTongCardBalance(params).then(res => { if (res.return_code == '000000') { this.tongCardPrice = res.return_data.balance; } }); }, // H5获取手机号 jumpH5Bding() { uni.navigateTo({ url:'../../pages/login/register' }) }, // 微信获取手机号 loginByPhone(PhoneNumber) { if (PhoneNumber.detail.iv == undefined) { uni.showToast({ title: "用户取消授权", icon: "none" }); return; } let params = { openId: app.globalData.openId, iv: PhoneNumber.detail.iv, encryptedData: PhoneNumber.detail.encryptedData } loginByPhone(params).then(res => { if (res.return_code == '000000') { app.globalData.userInfo = res.return_data .object .highUser; this.user = res.return_data .object .highUser; app.globalData.token = res.return_data.uniqueCode; uni.setStorage({ key: "token", data: res.return_data.uniqueCode }) uni.setStorage({ key: "user", data: res.return_data .object .highUser }) let that = this; that.toPay(); } }); }, toPay() { if (this.paytype == '') { uni.showToast({ title: '请选择支付方式', icon: 'none', duration: 2000 }) return; } uni.showLoading({ title: '提交订单中...' }) if (this.couponList.reserveStatus) { this.storeId = app.globalData.storeid } let goods = { "highChildOrderList": [{ "goodsType": 7, "goodsId": this.couponId, "saleCount": 1, "storeId": this.storeId }] } addOrder(goods).then(res => { if (res.return_code == '000000') { uni.hideLoading(); this.jumpType = res.return_data.highChildOrderList[0].ext1; this.orderId = res.return_data.id; this.orderToPay(res.return_data); } else { uni.hideLoading(); uni.showToast({ title: res.return_msg, icon: 'none', duration: 2000 }); } }) }, //获取选择支付方式 changeRiado() { if (!this.user.isSetHltCard) { uni.showToast({ icon: 'none', title: '当前账号还未绑定,前往绑定', duration: 2000, success() { setTimeout(() => { uni.navigateTo({ url:'../../pages/user/bindingCard/bindingCard' }) }, 1000) } }); return; } }, //获取订单数据 orderToPay(item) { let that = this; if (that.paytype == 'weixin') { // #ifdef H5 let params = { "orderId": item.id, "openId": app.globalData.openId, "orderScene": "GOODS_ORDER", "openIdType": 2 } // #endif // #ifdef MP let params = { "orderId": item.id, "openId": app.globalData.openId, "orderScene": "GOODS_ORDER" } // #endif orderToPay(params).then(res => { if (res.return_code == '000000') { // #ifdef MP uni.showLoading({ title: '支付中...' }) uni.requestPayment({ "appId": res.return_data.appId, "nonceStr": res.return_data.nonceStr, "package": res.return_data.package, "paySign": res.return_data.sign, "signType": "MD5", "timeStamp": res.return_data.timeStamp, success: function(res) { uni.hideLoading(); uni.showToast({ title: '支付成功' }) app.globalData.storeid = ''; app.globalData.storename = ''; uni.reLaunch({ url:'../coupon-comfirmation-success/coupon-comfirmation-success' }); }, fail: function(err) { uni.hideLoading(); uni.navigateBack({}) }, }); // #endif //判断是否是公众号 // #ifdef H5 //判断微信浏览器 that.payRequest(res); // #endif } else { uni.showToast({ title: res.return_msg, icon: 'none' }) } }) } else if (that.paytype == 'jinbi') { if (that.user.gold < that.paytheprice * 100) { uni.showToast({ icon: 'none', title: '积分不足', duration: 2000, success() { setTimeout(() => { uni.navigateTo({ url:'../../pages/user/deposit/deposit' }) }, 1000) } }); return; } if (!that.user.isSetPayPwd) { uni.navigateTo({ url:'../../pages/login/updatePas/updatePas' }) return; } that.$refs.paymentPassword.modalFun('show'); } else if (that.paytype == 'gonghuika') { if (that.tongCardPrice < that.paytheprice) { uni.showToast({ icon: 'none', title: '工会卡余额不足', duration: 2000, }); return; } if (!that.user.isSetPayPwd) { uni.navigateTo({ url:'../../pages/login/updatePas/updatePas' }) return; } if (!that.user.isSetHltCard) { uni.showToast({ icon: 'none', title: '当前账号还未绑定,前往绑定', duration: 2000, success() { setTimeout(() => { uni.navigateTo({ url:'../../pages/user/bindingCard/bindingCard' }) }, 1000) } }); return; } that.$refs.paymentPassword.modalFun('show'); } else { uni.showToast({ title: '请选择支付方式', icon: 'none', duration: 2000 }) } }, submitHandle(e) { this.PaymentPassword = e.value; if (this.PaymentPassword == '') { uni.showToast({ title: '请勿手动关闭弹窗', icon: 'none', duration: 2000 }) return; } uni.showLoading({ title: '支付中...' }) if (this.paytype == 'jinbi') { let params = { "orderId": this.orderId, "password": this.PaymentPassword } orderToGoldPay(params).then(res => { uni.hideLoading(); if (res.return_code == '000000') { uni.showToast({ title: '支付成功' }) uni.reLaunch({ url:'../coupon-comfirmation-success/coupon-comfirmation-success' }); return; } if (res.return_code == '102130') { uni.navigateTo({ url:'../../pages/login/updatePas/updatePas' }) return; } uni.showToast({ title: res.return_msg, icon: 'none' }) }) return; } let params = { "orderId": this.orderId, "cardNo": this.user.hltCardNo.cardNo, "password": this.PaymentPassword } hltUnionCardPay(params).then(res => { uni.hideLoading(); if (res.return_code == '000000') { uni.showToast({ title: '支付成功' }) uni.reLaunch({ url:'../coupon-comfirmation-success/coupon-comfirmation-success' }); return; } if (res.return_code == '102130') { uni.navigateTo({ url:'../../pages/login/updatePas/updatePas' }) return; } uni.showToast({ title: res.return_msg, icon: 'none' }) }) }, payRequest: function(self) { uni.showLoading({ title: '支付中...' }) jweixin.config({ // debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: self.return_data.appId, // 必填,公众号的唯一标识 timestamp: self.return_data.timeStamp, // 必填,生成签名的时间戳 nonceStr: self.return_data.nonceStr, // 必填,生成签名的随机串 signature: self.return_data.sign, // 必填,签名,见附录1 jsApiList: ['chooseWXPay'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 }); uni.hideLoading(); jweixin.ready(function() { jweixin.checkJsApi({ jsApiList: ['chooseWXPay'], // 需要检测的JS接口列表,所有JS接口列表见附录2, success: function(res) {}, fail: function(res) {} }); jweixin.chooseWXPay({ appId: self.return_data.appId, timestamp: self.return_data .timeStamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符 nonceStr: self.return_data.nonceStr, // 支付签名随机串,不长于 32 位 package: self.return_data .package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=***) signType: 'MD5', // 签名方式,默认为'SHA1',使用新版支付需传入'MD5' paySign: self.return_data.sign, // 支付签名 success: function(res) { // 支付成功后的回调函数 uni.showToast({ title: '支付成功' }) uni.reLaunch({ url:'../coupon-comfirmation-success/coupon-comfirmation-success' }); }, cancel: function(r) {}, fail: function(res) {} }); }); jweixin.error(function(res) { uni.showToast({ icon: 'none', title: '支付失败了', duration: 4000 }); }); }, } } </script> <style lang="scss"> page { background-color: #f7f7f7; } .comorder { background-color: #FFFFFF; border-radius: 8px; } .jtcs { width: 40rpx; height: 40rpx; margin-top: 30rpx; } .goodsimg { align-items: center; display: flex; image { width: 170rpx; max-height: 170rpx; } } .yhprice { width: 100%; height: 25px; text-align: right; margin-top: -20px; } .price-number { width: 100%; display: flex; justify-content: space-between; align-items: flex-end; font-size: 28upx; height: 40upx; .price { color: #FE4545; display: flex; max-width: 50%; align-items: center; } .number { display: flex; align-items: center; width: 50%; text-decoration: line-through; } } .yhqky { background: #ff0034; color: #ffffff; font-size: 14px; padding-left: 5px; padding-right: 5px; margin-left: 8px; padding-top: 2px; padding-bottom: 2px; } .addr { width: 86%; padding: 20upx 3%; margin: 30upx auto 20upx auto; box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1); border-radius: 20upx; display: flex; .icon { width: 80upx; height: 80upx; display: flex; align-items: center; image { width: 60upx; height: 60upx; } } .tel-name { width: 100%; display: flex; font-size: 32upx; .tel { margin-left: 40upx; } } .addres { width: 100%; font-size: 26upx; color: #999; } } .tccs { box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, 0.2); border: 1px solid #f6f6f6; border-radius: 8px; align-items: center; display: flex; image { width: 170rpx; max-height: 170rpx; } } .tcrig { margin-left: 20rpx; } .info { display: flex; justify-content: space-between; align-items: flex-end; width: 92%; } .order { width: 86%; padding: 10upx 3%; margin: 30upx auto 20upx auto; box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1); border-radius: 20upx; .row { margin: 20upx 0; height: 40upx; display: flex; .left { font-size: 28upx; } .right { margin-left: 40upx; font-size: 26upx; color: #999; input { font-size: 26upx; color: #999; } } } } .footer { width: 92%; padding: 0 4%; background-color: #fbfbfb; height: 100upx; display: flex; justify-content: flex-end; align-items: center; font-size: 28upx; position: fixed; bottom: 0upx; z-index: 5; .settlement { width: 100%; display: flex; justify-content: flex-end; align-items: center; .sum { width: 50%; font-size: 18px; margin-right: 10upx; display: flex; justify-content: flex-start; .money { color: #eb5823; font-weight: 600; } } .btn { padding: 0 50rpx; height: 80rpx; background-color: #0083f5; color: #fff; display: flex; justify-content: center; align-items: center; font-size: 30upx; border-radius: 40upx; } } } .goods-list { width: 100%; padding: 0; .tis { width: 100%; height: 60upx; display: flex; justify-content: center; align-items: center; font-size: 32upx; } .row { width: calc(92%); height: calc(22vw + 40upx); margin: 20upx auto; border-radius: 15upx; box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1); display: flex; align-items: center; position: relative; overflow: hidden; z-index: 4; border: 0; .menu { .icon { color: #fff; // font-size: 25upx; } position: absolute; width: 30%; height: 100%; right: 0; display: flex; justify-content: center; align-items: center; background-color: red; color: #fff; z-index: 2; } .carrier { .checkbox-box { padding-left: 20upx; flex-shrink: 0; height: 22vw; margin-right: 20upx; } position: absolute; width: 94%; margin-left: 3%; padding: 0 0; height: 100%; z-index: 3; display: flex; align-items: center; .goods-info { width: 100%; display: flex; padding-right: 20upx; .img { width: 22vw; height: 22vw; border-radius: 10upx; overflow: hidden; flex-shrink: 0; margin-right: 10upx; image { width: 22vw; height: 22vw; } } .info { width: 100%; height: 22vw; overflow: hidden; display: flex; flex-wrap: wrap; position: relative; .title { width: 100%; font-size: 16px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; // text-align: justify; overflow: hidden; } .spec { font-size: 14px; color: #a7a7a7; height: 30upx; display: flex; align-items: center; padding: 0; border-radius: 15upx; margin-bottom: 20vw; } .price-number { position: absolute; width: 100%; bottom: 0upx; display: flex; justify-content: space-between; align-items: flex-end; font-size: 28upx; height: 60upx; } } } } } } </style>