Huanyuyuehui/pages/points_mall/integral_order_status.vue

297 lines
6.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>