297 lines
6.1 KiB
Vue
297 lines
6.1 KiB
Vue
<template>
|
||
<view :style="colorStyle">
|
||
<view class='payment-status'>
|
||
<!--失败时： 用icon-iconfontguanbi fail替换icon-duihao2 bg-color-->
|
||
<view class='iconfont icons icon-duihao2 bg-color'></view>
|
||
<!-- 失败时：商品兑换失败 -->
|
||
<view class='status' v-if="order_pay_info.pay_type != 'offline'">商品兑换成功
|
||
</view>
|
||
<view class='status' v-else>订单创建成功</view>
|
||
<view class='wrapper'>
|
||
<view class='item acea-row row-between-wrapper'>
|
||
<view>订单编号</view>
|
||
<view class='itemCom'>{{orderId}}</view>
|
||
</view>
|
||
<view class='item acea-row row-between-wrapper'>
|
||
<view>兑换时间</view>
|
||
<view class='itemCom'>{{order_pay_info.add_time}}</view>
|
||
</view>
|
||
<view class='item acea-row row-between-wrapper'>
|
||
<view>兑换方式</view>
|
||
<view class='itemCom'>积分兑换</view>
|
||
</view>
|
||
<view class='item acea-row row-between-wrapper'>
|
||
<view>兑换积分</view>
|
||
<view class='itemCom'>{{order_pay_info.total_price}}</view>
|
||
</view>
|
||
<!--失败时加上这个 -->
|
||
<view class='item acea-row row-between-wrapper'
|
||
v-if="order_pay_info.paid==0 && order_pay_info.pay_type != 'offline'">
|
||
<view>失败原因</view>
|
||
<view class='itemCom'>{{status==2 ? '取消兑换':msg}}</view>
|
||
</view>
|
||
</view>
|
||
<!--失败时： 重新购买 -->
|
||
<view @click="goOrderDetails">
|
||
<button formType="submit" class='returnBnt bg-color' hover-class='none'>查看详情</button>
|
||
</view>
|
||
<button @click="goIndex" class='returnBnt cart-color' formType="submit" hover-class='none'>返回首页</button>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
<script>
|
||
|
||
import { integralOrderDetails } from '@/api/activity.js';
|
||
import { openOrderSubscribe } from '@/utils/SubscribeMessage.js';
|
||
import { toLogin } from '@/libs/login.js';
|
||
import { mapGetters } from "vuex";
|
||
export default {
|
||
components: {},
|
||
data() {
|
||
return {
|
||
orderId: '',
|
||
order_pay_info: {
|
||
paid: 1,
|
||
_status: {}
|
||
},
|
||
status: 0,
|
||
msg: '',
|
||
couponsHidden: true,
|
||
couponList: []
|
||
};
|
||
},
|
||
computed: mapGetters(['isLogin']),
|
||
watch: {
|
||
isLogin: {
|
||
handler: function(newV, oldV) {
|
||
if (newV) {
|
||
//#ifndef MP
|
||
this.getOrderPayInfo();
|
||
//#endif
|
||
}
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
onLoad: function(options) {
|
||
if (!options.order_id) return this.$util.Tips({
|
||
title: '缺少参数无法查看订单兑换状态'
|
||
}, {
|
||
tab: 3,
|
||
url: 1
|
||
});
|
||
this.orderId = options.order_id;
|
||
this.status = options.status || 0;
|
||
this.msg = options.msg || '';
|
||
if (this.isLogin) {
|
||
this.getOrderPayInfo();
|
||
} else {
|
||
toLogin();
|
||
}
|
||
// #ifdef H5
|
||
document.addEventListener('visibilitychange', (e) => {
|
||
let state = document.visibilityState
|
||
if (state == 'hidden') {
|
||
console.log('用户离开了');
|
||
}
|
||
if (state == 'visible') {
|
||
this.getOrderPayInfo();
|
||
}
|
||
});
|
||
// #endif
|
||
},
|
||
methods: {
|
||
openTap() {
|
||
this.$set(this, 'couponsHidden', !this.couponsHidden);
|
||
},
|
||
/**
|
||
*
|
||
* 兑换完成查询兑换状态
|
||
*
|
||
*/
|
||
getOrderPayInfo: function() {
|
||
let that = this;
|
||
uni.showLoading({
|
||
title: '正在加载中'
|
||
});
|
||
integralOrderDetails(that.orderId).then(res => {
|
||
uni.hideLoading();
|
||
that.$set(that, 'order_pay_info', res.data);
|
||
uni.setNavigationBarTitle({
|
||
title: 兑换成功
|
||
});
|
||
that.getOrderCoupon();
|
||
}).catch(err => {
|
||
uni.hideLoading();
|
||
});
|
||
},
|
||
getOrderCoupon() {
|
||
let that = this;
|
||
orderCoupon(that.orderId).then(res => {
|
||
that.couponList = res.data;
|
||
})
|
||
},
|
||
/**
|
||
* 去首页关闭当前所有页面
|
||
*/
|
||
goIndex: function(e) {
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
})
|
||
},
|
||
/**
|
||
*
|
||
* 去订单详情页面
|
||
*/
|
||
goOrderDetails: function(e) {
|
||
let that = this;
|
||
uni.navigateTo({
|
||
url: '/pages/points_mall/integral_order_details?order_id=' + that.orderId
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.coupons {
|
||
.title {
|
||
margin: 30rpx 0 25rpx 0;
|
||
|
||
.line {
|
||
width: 70rpx;
|
||
height: 1px;
|
||
background: #DCDCDC;
|
||
}
|
||
|
||
.name {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin: 0 10rpx;
|
||
}
|
||
}
|
||
|
||
.list {
|
||
padding: 0 20rpx;
|
||
|
||
.item {
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.06);
|
||
|
||
.price {
|
||
width: 236rpx;
|
||
height: 160rpx;
|
||
font-size: 26rpx;
|
||
color: #fff;
|
||
font-weight: 800;
|
||
|
||
text {
|
||
font-size: 54rpx;
|
||
}
|
||
}
|
||
|
||
.text {
|
||
width: 385rpx;
|
||
|
||
.name {
|
||
font-size: #282828;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.priceMin {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.time {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-top: 15rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.open {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-top: 30rpx;
|
||
|
||
.iconfont {
|
||
font-size: 25rpx;
|
||
margin: 5rpx 0 0 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.payment-status {
|
||
background-color: #fff;
|
||
margin: 195rpx 30rpx 0 30rpx;
|
||
border-radius: 10rpx;
|
||
padding: 1rpx 0 28rpx 0;
|
||
}
|
||
|
||
.payment-status .icons {
|
||
font-size: 70rpx;
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
border-radius: 50%;
|
||
color: #fff;
|
||
text-align: center;
|
||
line-height: 140rpx;
|
||
text-shadow: 0px 4px 0px rgba(255,255,255,0.5);
|
||
border: 6rpx solid #f5f5f5;
|
||
margin: -76rpx auto 0 auto;
|
||
background-color: #999;
|
||
}
|
||
|
||
.payment-status .icons.icon-iconfontguanbi {
|
||
text-shadow: 0px 4px 0px #6c6d6d;
|
||
}
|
||
|
||
.payment-status .iconfont.fail {
|
||
text-shadow: 0px 4px 0px #7a7a7a;
|
||
}
|
||
|
||
.payment-status .status {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
margin: 25rpx 0 37rpx 0;
|
||
}
|
||
|
||
.payment-status .wrapper {
|
||
border: 1rpx solid #eee;
|
||
margin: 0 30rpx 47rpx 30rpx;
|
||
padding: 35rpx 0;
|
||
border-left: 0;
|
||
border-right: 0;
|
||
}
|
||
|
||
.payment-status .wrapper .item {
|
||
font-size: 28rpx;
|
||
color: #282828;
|
||
}
|
||
|
||
.payment-status .wrapper .item~.item {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.payment-status .wrapper .item .itemCom {
|
||
color: #666;
|
||
}
|
||
|
||
.payment-status .returnBnt {
|
||
width: 630rpx;
|
||
height: 86rpx;
|
||
border-radius: 50rpx;
|
||
color: #fff;
|
||
font-size: 30rpx;
|
||
text-align: center;
|
||
line-height: 86rpx;
|
||
margin: 0 auto 20rpx auto;
|
||
}
|
||
</style>
|