Files
crmeb_java/app/pages/order_pay_status/index.vue
stivepeim be34f57322 ## v1.3.1 更新列表
1. 【修复】申请退款后积分等操作可能出现错误的问题
	2. 【修复】拼团支付可能出现支付错误的问题
	3. 【修复】退款申请后的订单流程优化和积分赠送的问题
	4. 【修复】回收站中的商品无法恢复的问题
	5. 【修复】一号通短信查询记录不完整的问题
	6. 【修复】用户管理批量加分组,标签的问题
	7. 【修复】积分日志搜索显示有误的问题
	8. 【修复】手动发送优惠券可能会出错的问题
	9. 【修复】核销订单创建在某种条件下会出错的问题
	10. 【修复】移动端商品详情,购物车等样式兼容问题
	11. 【修复】业务流程性的优化
2021-01-19 10:16:45 +08:00

263 lines
6.8 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>
<view class='payment-status'>
<!--失败时 用icon-iconfontguanbi fail替换icon-duihao2 bg-color-->
<view class='iconfont icons icon-duihao2 bg-color' v-if="order_pay_info.paid || order_pay_info.payType == 'offline'"></view>
<view class='iconfont icons icon-iconfontguanbi' v-else></view>
<!-- 失败时订单支付失败 -->
<view class='status' v-if="order_pay_info.payType != 'offline'">{{order_pay_info.paid ? '订单支付成功':'订单支付失败'}}</view>
<view class='status' v-else>订单创建成功</view>
<view class='wrapper'>
<view class='item acea-row row-between-wrapper'>
<view>订单编号</view>
<view class='itemCom'>{{order_pay_info.orderId}}</view>
</view>
<view class='item acea-row row-between-wrapper'>
<view>下单时间</view>
<view class='itemCom'>{{order_pay_info.createTime?order_pay_info.createTime:'-'}}</view>
</view>
<view class='item acea-row row-between-wrapper'>
<view>支付方式</view>
<view class='itemCom' v-if="order_pay_info.payType=='weixin'">微信支付</view>
<view class='itemCom' v-else-if="order_pay_info.payType=='yue'">余额支付</view>
<view class='itemCom' v-else-if="order_pay_info.payType=='offline'">线下支付</view>
<view class='itemCom' v-else-if="order_pay_info.payType=='alipay'">支付宝支付</view>
</view>
<view class='item acea-row row-between-wrapper'>
<view>支付金额</view>
<view class='itemCom'>{{order_pay_info.payPrice}}</view>
</view>
<!--失败时加上这个 -->
<view class='item acea-row row-between-wrapper' v-if="order_pay_info.paid==0 && order_pay_info.payType != 'offline'">
<view>失败原因</view>
<view class='itemCom'>{{status==2 ? '取消支付':msg}}</view>
</view>
</view>
<!--失败时 重新购买 -->
<view @tap="goOrderDetails">
<button formType="submit" class='returnBnt bg-color' hover-class='none'>查看订单</button>
</view>
<view @tap="goOrderDetails" v-if="order_pay_info.paid==0 && status==1">
<button class='returnBnt bg-color' hover-class='none'>重新购买</button>
</view>
<view @tap="goOrderDetails" v-if="order_pay_info.paid==0 && status==2">
<button class='returnBnt bg-color' hover-class='none'>重新支付</button>
</view>
<button @click="goPink(order_pay_info.pinkId)" class='returnBnt cart-color' formType="submit" hover-class='none' v-if="order_pay_info.pinkId && order_pay_info.paid!=0 && status!=2 && status!=1">邀请好友参团</button>
<button @click="goIndex" class='returnBnt cart-color' formType="submit" hover-class='none' v-else>返回首页</button>
</view>
<!-- #ifdef MP -->
<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
<!-- #endif -->
</view>
</template>
<script>
import {
getOrderDetail
} from '@/api/order.js';
import {
openOrderSubscribe
} from '@/utils/SubscribeMessage.js';
import {
toLogin
} from '@/libs/login.js';
import {
mapGetters
} from "vuex";
// #ifdef MP
import authorize from '@/components/Authorize';
// #endif
export default {
components: {
// #ifdef MP
authorize
// #endif
},
data() {
return {
orderId: '',
order_pay_info: {
paid: 1,
_status: {}
},
isAuto: false, //没有授权的不会自动授权
isShowAuth: false ,//是否隐藏授权
status:0,
msg:''
};
},
computed: mapGetters(['isLogin']),
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 {
// #ifdef H5 || APP-PLUS
toLogin();
// #endif
// #ifdef MP
this.isAuto = true;
this.$set(this, 'isShowAuth', true);
// #endif
}
},
methods: {
onLoadFun: function() {
this.getOrderPayInfo();
},
/**
*
* 支付完成查询支付状态
*
*/
getOrderPayInfo: function() {
let that = this;
uni.showLoading({
title: '正在加载中'
});
getOrderDetail(that.orderId).then(res => {
uni.hideLoading();
that.$set(that, 'order_pay_info', res.data);
uni.setNavigationBarTitle({
title: res.data.paid ? '支付成功' : '支付失败'
});
}).catch(err => {
uni.hideLoading();
});
},
/**
* 去首页关闭当前所有页面
*/
goIndex: function(e) {
uni.switchTab({
url: '/pages/index/index'
});
},
// 去参团页面;
goPink:function(id){
uni.navigateTo({
url: '/pages/activity/goods_combination_status/index?id='+id
});
},
/**
*
* 去订单详情页面
*/
goOrderDetails: function(e) {
let that = this;
// #ifdef MP
uni.showLoading({
title: '正在加载',
})
openOrderSubscribe().then(res => {
uni.hideLoading();
uni.navigateTo({
url: '/pages/order_details/index?order_id=' + that.orderId
});
}).catch(() => {
nui.hideLoading();
});
// #endif
// #ifndef MP
uni.navigateTo({
url: '/pages/order_details/index?order_id=' + that.orderId
})
// #endif
}
}
}
</script>
<style>
.icon-iconfontguanbi{
background-color: #999 !important;
text-shadow: none !important;
}
.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 #df1e14;
border: 6rpx solid #f5f5f5;
margin: -76rpx auto 0 auto;
background-color: #999;
}
.payment-status .iconfont {
font-size: 70rpx;
width: 140rpx;
height: 140rpx;
border-radius: 50%;
color: #fff;
text-align: center;
line-height: 140rpx;
text-shadow: 0px 4px 0px #df1e14;
border: 6rpx solid #f5f5f5;
margin: -76rpx auto 0 auto;
background-color: #999;
}
.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>