<template>
|
<view id="content">
|
<block v-if="youHuiInfo">
|
<view class="box bg-fff u-m-t-20">
|
<view class="status-box u-text-center">
|
<image class="icon-success" src="/static/paySuccess.png" mode=""></image>
|
<view class="u-font-32 font-bold u-m-t-10" style="color: #14AF0D;">支付成功</view>
|
</view>
|
<view class="shop-info">
|
<view class="u-text-center u-font-32 color-666">{{youHuiInfo.shopName}}</view>
|
<view class="u-text-center u-m-t-20">
|
<text class="u-font-30 lh-1">￥</text>
|
<text class="u-font-money lh-1">{{$u.priceFormat(youHuiInfo.payMoney/100, 2)}}</text>
|
</view>
|
</view>
|
<view class="u-flex u-m-t-30 u-font-30">
|
<view class="color-999 u-flex">
|
<view class="label">应付金额</view>
|
</view>
|
<view class="u-flex-1 u-text-right">￥{{$u.priceFormat(youHuiInfo.money/100, 2)}}</view>
|
</view>
|
<!-- <view class="u-flex u-m-t-16 u-font-30">
|
<view class="color-999 u-flex">
|
<view class="label" style="color: #F69249;">使用积分</view>
|
</view>
|
<view class="u-flex-1 u-text-right" style="color: #F69249;">{{youHuiInfo.score}}积分<text
|
v-if="youHuiInfo.score>0">抵扣{{$u.priceFormat(youHuiInfo.scoreDkPrice/100, 2)}}元</text>
|
</view>
|
</view>-->
|
<view v-if="youHuiInfo.couponDkPrice!=0" class="u-flex u-m-t-16 u-font-30">
|
<view class="color-999 u-flex">
|
<view class="label">优惠券</view>
|
</view>
|
<view class="u-flex-1 u-text-right">￥{{$u.priceFormat(youHuiInfo.couponDkPrice/100, 2)}}</view>
|
</view>
|
<view class="u-flex u-m-t-16 u-font-30">
|
<view class="color-999 u-flex">
|
<view class="label">支付时间</view>
|
</view>
|
<view class="u-flex-1 u-text-right">{{$u.timeFormat(Number(new Date()), 'yyyy.mm.dd hh:MM:ss')}}
|
</view>
|
</view>
|
</view>
|
<view v-if="couponList.length" class="box bg-fff u-m-t-20">
|
<view class="u-font-32 font-bold u-m-b-30">已获取优惠券<text style="color: #E93F33;">{{couponList.length}}</text>张
|
</view>
|
<view v-for="(item,i) in couponList" :key="i" class="coupon">
|
<view class="num">
|
<view>
|
<text class="unit">￥</text>
|
<text class="money">{{parseFloat(item.discount/100)}}</text>
|
</view>
|
<view class="condition">满{{parseFloat(item.threshold_value/100)}}元使用</view>
|
</view>
|
<view class="info">
|
<view class="title">{{item.name}}</view>
|
<view v-if="item.validityDay" class="validity">
|
有效期：领取后{{item.validityDay}}天</view>
|
<view v-else class="validity">
|
有效期至：{{$u.timeFormat(item.out_time||item.validityEndTime, 'yyyy-mm-dd hh:MM')}}</view>
|
</view>
|
</view>
|
</view>
|
|
<view :url="jumpUrl" class="btn-box">
|
<u-button @click="clickDone" text="完成" type="success" plain shape="circle"></u-button>
|
</view>
|
</block>
|
<block v-else>
|
<view class="box bg-fff">
|
<view class="shop-info">
|
<view class="u-text-center"><text class="u-font-36">￥</text><text
|
class="u-font-money">{{$u.priceFormat(orderInfo.payMoney/100, 2)}}</text>
|
</view>
|
<view class="u-text-center u-font-30">{{orderInfo.shopName}}</view>
|
</view>
|
<view class="u-flex u-m-t-30 u-font-30">
|
<view class="color-999 u-flex">
|
<view class="label">应付金额</view>：
|
</view>
|
<view class="u-flex-1">￥{{$u.priceFormat(orderInfo.orderPrice/100, 2)}}</view>
|
</view>
|
<!-- <view class="u-flex u-m-t-30 u-font-30">
|
<view class="color-999 u-flex">
|
<view class="label">使用积分</view>：
|
</view>
|
<view class="u-flex-1">{{orderInfo.payIntegral}}积分<text
|
v-if="orderInfo.payIntegral>0">抵扣{{$u.priceFormat(orderInfo.integralMoney/100, 2)}}元</text>
|
</view>
|
</view>-->
|
<view class="u-flex u-m-t-30 u-font-30">
|
<view class="color-999 u-flex">
|
<view class="label">优惠券</view>：
|
</view>
|
<view class="u-flex-1">￥{{$u.priceFormat(orderInfo.couponFace/100, 2)}}</view>
|
</view>
|
<view class="u-flex u-m-t-30 u-font-30">
|
<view class="color-999 u-flex">
|
<view class="label">支付时间</view>：
|
</view>
|
<view class="u-flex-1">{{$u.timeFormat(orderInfo.createTime, 'yyyy.mm.dd hh:MM:ss')}}</view>
|
</view>
|
</view>
|
<view class="btn-box">
|
<u-button @click="clickDone" text="完成" type="success" plain shape="circle"></u-button>
|
</view>
|
</block>
|
|
</view>
|
</template>
|
|
<script>
|
import {
|
getWxOrderInfo,
|
} from 'common/api/index'
|
export default {
|
data() {
|
return {
|
plat: this.$utils.getPlat(),
|
info: {
|
bankCardName: '',
|
totalDiscount: 0,
|
dayMax: 0,
|
numOfMin: 0,
|
numOfDay: 0,
|
numOfUser: 0,
|
actRules: ''
|
},
|
bankCardStyle: {
|
color: '',
|
logo: '',
|
},
|
orderId: null,
|
couponList: [],
|
jumpUrl: null,
|
youHuiInfo: {},
|
orderInfo: {
|
payMoney: 0, //实付金额
|
shopName: '', //门店名称
|
orderPrice: 0, //订单金额
|
payIntegral: 0, //使用积分数量
|
integralMoney: 0, //积分抵扣金额
|
couponFace: 0, //优惠券减免
|
createTime: Number(new Date())
|
},
|
join: true,
|
};
|
},
|
onLoad(opt) {
|
if (uni.getStorageSync("bankCardStyle")) {
|
this.bankCardStyle = uni.getStorageSync("bankCardStyle")
|
}
|
|
if (opt.youHuiInfo) {
|
this.youHuiInfo = JSON.parse(opt.youHuiInfo)
|
}
|
if (opt.orderId) {
|
this.orderId = opt.orderId
|
/*orderRefBrushNode({
|
orderId: this.orderId
|
}).then(res => {
|
this.couponList = res.coupIdsMap || []
|
})*/
|
}
|
},
|
onReady() {
|
const query = uni.createSelectorQuery().in(this);
|
let mchData = {
|
action: 'onIframeReady',
|
displayStyle: 'SHOW_CUSTOM_PAGE',
|
height: 861
|
}
|
let postData = JSON.stringify(mchData)
|
parent.postMessage(postData, 'https://payapp.weixin.qq.com')
|
//获取参数
|
var sub_mch_id = this.getQueryString("sub_mch_id"); //特约商户号
|
var out_trade_no = this.getQueryString("out_trade_no"); //商户订单号
|
var check_code = this.getQueryString("check_code"); //md5 校验码
|
if (!this.youHuiInfo) {
|
getWxOrderInfo({
|
sub_mch_id: sub_mch_id,
|
out_trade_no: out_trade_no,
|
check_code: check_code,
|
}).then(res => {
|
this.orderInfo = res
|
this.$nextTick(() => {
|
query.select('#content').boundingClientRect(rect => {
|
const height = rect.height * (640 / rect.width);
|
let mchData = {
|
action: 'onIframeReady',
|
displayStyle: 'SHOW_CUSTOM_PAGE',
|
height: height
|
}
|
let postData = JSON.stringify(mchData)
|
parent.postMessage(postData, 'https://payapp.weixin.qq.com')
|
}).exec();
|
})
|
})
|
}
|
|
},
|
methods: {
|
getQueryString(name) {
|
var query = window.location.search.substring(1);
|
var vars = query.split("&");
|
for (var i = 0; i < vars.length; i++) {
|
var pair = vars[i].split("=");
|
if (pair[0] == name) {
|
return pair[1];
|
}
|
}
|
return null;
|
},
|
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()
|
}
|
},
|
doJump() {
|
var mchData = {
|
action: 'jumpOut',
|
jumpOutUrl: this.jumpUrl //跳转的页面
|
}
|
var postData = JSON.stringify(mchData)
|
parent.postMessage(postData, 'https://payapp.weixin.qq.com')
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.status-box {
|
padding: 50rpx 0;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
|
.icon-success {
|
width: 144rpx;
|
height: 98rpx;
|
}
|
|
.box {
|
margin: 0 30rpx;
|
padding: 30rpx;
|
border-radius: 15rpx;
|
}
|
|
.u-font-money {
|
font-size: 72rpx;
|
font-weight: bold;
|
}
|
|
.shop-info {
|
border-bottom: 1rpx dashed #999;
|
padding-bottom: 30rpx;
|
}
|
|
.btn-box {
|
width: 300rpx;
|
padding: 30rpx;
|
margin: 0 auto;
|
}
|
|
.label {
|
width: 130rpx;
|
text-align-last: justify;
|
text-align: justify;
|
}
|
|
.coupon {
|
width: 638rpx;
|
height: 172rpx;
|
background-image: url('~@/static/pay-by-card-coupon.png');
|
background-size: cover;
|
margin: 10rpx auto 20rpx;
|
display: flex;
|
align-items: center;
|
}
|
|
.num {
|
color: #D31F28;
|
margin-top: 14rpx;
|
width: 180rpx;
|
height: 130rpx;
|
text-align: center;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
border-right: 1rpx dashed #FA969A;
|
}
|
|
.unit {
|
font-size: 36rpx;
|
font-weight: 900;
|
}
|
|
.money {
|
line-height: 1;
|
font-size: 64rpx;
|
font-weight: 900;
|
}
|
|
.condition {
|
font-size: 20rpx;
|
font-weight: 400;
|
}
|
|
.info {
|
width: 457rpx;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
padding: 0 20rpx;
|
}
|
|
.title {
|
font-size: 32rpx;
|
font-weight: 400;
|
color: #333;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
/* white-space:nowrap; */
|
display: -webkit-box;
|
-webkit-line-clamp: 2;
|
-webkit-box-orient: vertical;
|
}
|
|
.validity {
|
margin-top: 15rpx;
|
font-size: 24rpx;
|
font-weight: 400;
|
color: #999;
|
}
|
|
.card-logo {
|
width: 80rpx;
|
height: 80rpx;
|
margin-right: 20rpx;
|
}
|
|
.lh-1 {
|
line-height: 1;
|
}
|
</style>
|
