You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
266 lines
8.7 KiB
266 lines
8.7 KiB
<template>
|
|
<view class="app">
|
|
<view class="header" :style="{'background': data.color}">
|
|
<image :src="page.icon" class="success-image"></image>
|
|
<view class="success-title">支付成功</view>
|
|
<view class="hr"></view>
|
|
</view>
|
|
<view class="info-box">
|
|
<view class="info-amount" :style="{'color': data.color}">¥ {{ data.price }}</view>
|
|
<view class="left-circle"></view>
|
|
<view class="right-circle"></view>
|
|
<view class="info-main">
|
|
<view class="info-cell">
|
|
<view class="left">订单编号</view>
|
|
<view class="right">{{ data.orderId }}</view>
|
|
</view>
|
|
<view class="info-cell" v-if="!(page.createTime == undefined||page.createTime=='')">
|
|
<view class="left">下单时间</view>
|
|
<view class="right">{{page.createTime}}</view>
|
|
</view>
|
|
<view class="info-cell">
|
|
<view class="left">支付方式</view>
|
|
<view class="right">{{ data.pay }}</view>
|
|
</view>
|
|
<view class="info-cell" v-if="!(page.payTime == undefined||page.payTime=='')">
|
|
<view class="left">支付时间</view>
|
|
<view class="right">{{page.payTime}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="!(data.order_url==undefined||data.order_url==null)" class="button-query"
|
|
:style="{'background': data.color}" @click="queryOrder">查看订单
|
|
</view>
|
|
<view class="footer-hr"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
http
|
|
} from '../../utils/pay_http.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
page: {
|
|
icon: "data:image/png;base64,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",
|
|
payTime: '',
|
|
createTime: '',
|
|
seconds: 5,
|
|
threadA: null
|
|
},
|
|
data: {
|
|
"price": "0.01",
|
|
"order_url": {
|
|
"page": "/pages/index2/index2",
|
|
"params": {
|
|
"trade_no": "velit Duis"
|
|
}
|
|
},
|
|
"pay_url": {
|
|
"url": "http://192.168.2.110:7777/order/pay ",
|
|
"params": {
|
|
"mainSid": "9e04ee75-3b85-49eb-a24c-8a608814035d",
|
|
"type": "wxpay"
|
|
}
|
|
},
|
|
"trade_no_url": {
|
|
"url": "http://192.168.2.110:7777/order/orderQuery",
|
|
"params": {
|
|
'mainSid': '9ebb7ca3-3203-4e91-b256-32ad0f821afd'
|
|
}
|
|
},
|
|
"orderId": "288320940398",
|
|
"remainder": 33,
|
|
"goods": "无骨鸡柳等3件商品",
|
|
"color": "#09bb07",
|
|
"pay": "微信"
|
|
}
|
|
}
|
|
},
|
|
// 监听 - 页面每次【加载时】执行(如：前进)
|
|
onLoad(options = {}) {
|
|
try {
|
|
// 跳转携带数据
|
|
this.data = JSON.parse(options.data)
|
|
} catch (e) {
|
|
this.data = JSON.parse(decodeURIComponent(options.data))
|
|
}
|
|
|
|
let _this = this
|
|
|
|
http({
|
|
url: this.data.trade_no_url.url,
|
|
data: this.data.trade_no_url.params
|
|
}).then((res) => {
|
|
this.page.payTime = res.data.time_end
|
|
this.page.createTime = res.data.createTime
|
|
|
|
uni.showLoading({
|
|
mask: true,
|
|
title: '订单生成中 ' + _this.page.seconds
|
|
})
|
|
|
|
_this.page.threadA = setInterval(() => {
|
|
|
|
_this.page.seconds -= 1
|
|
|
|
uni.showLoading({
|
|
mask: true,
|
|
title: '订单生成中 ' + _this.page.seconds
|
|
})
|
|
|
|
if (_this.page.seconds <= 0) {
|
|
uni.hideLoading()
|
|
clearInterval(_this.page.threadA)
|
|
_this.page.threadA = null
|
|
uni.navigateBack()
|
|
}
|
|
}, 1000)
|
|
|
|
}).catch((err) => {
|
|
console.log('fail', JSON.stringify(err));
|
|
});
|
|
},
|
|
onUnload() {
|
|
this.page.seconds = 0
|
|
let bus = this.data.bus
|
|
for (var i = 0; i < bus.length; i++) {
|
|
uni.$emit(bus[i] + '')
|
|
}
|
|
try {
|
|
if (this.page.threadA != null) {
|
|
clearInterval(this.page.threadA)
|
|
}
|
|
} catch (e) {
|
|
//TODO handle the exception
|
|
}
|
|
},
|
|
// 函数
|
|
methods: {
|
|
queryOrder() {
|
|
// 数据源转换成字符
|
|
let data = JSON.stringify(this.data.order_url.params)
|
|
// 转码传输
|
|
let value = encodeURIComponent(data)
|
|
uni.redirectTo({
|
|
url: this.data.order_url.page + '?data=' +
|
|
value
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.app {
|
|
--bgcolor: #f3f3f3;
|
|
|
|
background-color: var(--bgcolor);
|
|
min-height: calc(100vh - var(--window-bottom) - var(--window-top));
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
color: #ffffff;
|
|
padding: 80rpx 30rpx 50rpx 30rpx;
|
|
|
|
.success-image {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
}
|
|
|
|
.success-title {
|
|
font-size: 34rpx;
|
|
margin-top: 40rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.hr {
|
|
margin-top: 40rpx;
|
|
width: 100%;
|
|
height: 30rpx;
|
|
border-radius: 20rpx;
|
|
opacity: 0.1;
|
|
background-color: #000000;
|
|
}
|
|
}
|
|
|
|
.info-box {
|
|
width: calc(100% - 100rpx);
|
|
margin: 0 50rpx;
|
|
position: relative;
|
|
margin-top: -64rpx;
|
|
background-color: #ffffff;
|
|
|
|
.info-amount {
|
|
height: 150rpx;
|
|
line-height: 150rpx;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 60rpx;
|
|
border-bottom: 4rpx dashed #f3f3f3;
|
|
}
|
|
|
|
.left-circle {
|
|
background-color: var(--bgcolor);
|
|
position: absolute;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 50%;
|
|
top: calc(150rpx - 20rpx);
|
|
left: -20rpx;
|
|
}
|
|
|
|
.right-circle {
|
|
background-color: var(--bgcolor);
|
|
position: absolute;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 50%;
|
|
top: calc(150rpx - 20rpx);
|
|
right: -20rpx;
|
|
}
|
|
|
|
.info-main {
|
|
padding: 30rpx;
|
|
font-size: 26rpx;
|
|
color: #333333;
|
|
|
|
.info-cell {
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
/* #endif */
|
|
line-height: 50rpx;
|
|
|
|
.left {
|
|
width: 200rpx;
|
|
text-align: left;
|
|
}
|
|
|
|
.right {
|
|
flex: 1;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.button-query {
|
|
color: #ffffff;
|
|
width: calc(100% - 120rpx);
|
|
margin: 50rpx 60rpx 0 60rpx;
|
|
padding: 20rpx 30rpx;
|
|
border-radius: 50rpx;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.button-query:active {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.footer-hr {
|
|
height: 100rpx;
|
|
display: block;
|
|
}
|
|
</style>
|