Initial commit: 积分兑换电商平台多商户版 MER-2.2
Made-with: Cursor
This commit is contained in:
apple
311
mer_uniapp/pages/goods/order_pay_status/index.vue
Normal file
311
mer_uniapp/pages/goods/order_pay_status/index.vue
Normal file
@@ -0,0 +1,311 @@
|
||||
<template>
|
||||
<view :data-theme="theme">
|
||||
<view class='payment-status borRadius14'>
|
||||
<!--失败时： 用icon-iconfontguanbi fail替换icon-duihao2 bg-color-->
|
||||
<view class='iconfont icons icon-duihao2 bg-color'
|
||||
v-if="order_pay_info.paid === 1"></view>
|
||||
<view v-if="order_pay_info.paid === 2" class='iconfont icons icon-iconfontguanbi'></view>
|
||||
<!-- 失败时：订单支付失败 -->
|
||||
<view class='status' v-if="order_pay_info.payType != 'offline'">{{status==2 ? '订单取消支付' : errMsg ? '订单支付异常':payResult }}</view>
|
||||
<view class='status' v-else>订单创建成功</view>
|
||||
<view class='wrapper'>
|
||||
<view v-show="!fromType" class='item acea-row row-between-wrapper'>
|
||||
<view>订单编号</view>
|
||||
<view class='itemCom'>{{order_pay_info.orderNo}}</view>
|
||||
</view>
|
||||
<view v-show="!fromType" class='item acea-row row-between-wrapper'>
|
||||
<view>下单时间</view>
|
||||
<view class='itemCom'>{{order_pay_info.createTime?order_pay_info.createTime:'-'}}</view>
|
||||
</view>
|
||||
<view v-show="(order_pay_info.payType && order_pay_info.secondType !== ProductTypeEnum.Integral) || (order_pay_info.secondType === ProductTypeEnum.Integral && order_pay_info.payPrice!=0)" class='item acea-row row-between-wrapper'>
|
||||
<view>支付方式</view>
|
||||
<view class='itemCom'>{{order_pay_info.payType | payTypeFilter}}支付</view>
|
||||
</view>
|
||||
<view class='item acea-row row-between-wrapper'>
|
||||
<view>支付金额</view>
|
||||
<view class='itemCom'>{{order_pay_info.payPrice}}</view>
|
||||
</view>
|
||||
<view v-show="order_pay_info.secondType === ProductTypeEnum.Integral" class='item acea-row row-between-wrapper'>
|
||||
<view>消耗积分</view>
|
||||
<view class='itemCom'>{{order_pay_info.redeemIntegral}}</view>
|
||||
</view>
|
||||
<!--失败时加上这个 -->
|
||||
<view class='item acea-row row-between-wrapper'
|
||||
v-if="!order_pay_info.paid && order_pay_info.payType != 'offline'">
|
||||
<view>失败原因</view>
|
||||
<view class='itemCom'>{{status==2 ? '取消支付':msg}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--失败时： 重新购买 -->
|
||||
<view v-if="fromType === 'shoppingCredits'">
|
||||
<navigator :url="`/pages/merchant/home/index?merId=${merId}`" hover-class="none">
|
||||
<button formType="submit" class='returnBnt bg-color' hover-class='none'>进入店铺</button>
|
||||
</navigator>
|
||||
</view>
|
||||
<view v-else @tap="goOrderDetails">
|
||||
<button formType="submit" class='returnBnt bg-color' hover-class='none'>{{fromType =='svip'?'查看会员':type==2?'查看拼团':'查看订单'}}</button>
|
||||
</view>
|
||||
<button @click="goIndex" class='returnBnt cart-color' formType="submit" hover-class='none'
|
||||
>返回首页</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2026 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
import {
|
||||
getOrderDetail,
|
||||
wechatQueryPayResult
|
||||
} from '@/api/order.js';
|
||||
import {
|
||||
toLogin
|
||||
} from '@/libs/login.js';
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
import {
|
||||
ProductTypeEnum
|
||||
} from "../../../enums/productEnums";
|
||||
let app = getApp();
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ProductTypeEnum:ProductTypeEnum,
|
||||
orderNo: '',
|
||||
order_pay_info: {
|
||||
paid: 0,
|
||||
_status: {}
|
||||
},
|
||||
status: 0,
|
||||
msg: '',
|
||||
errMsg: false,
|
||||
payResult: '订单查询中...',
|
||||
theme:app.globalData.theme,
|
||||
fromType: '', // 支付页面来源，会员支付，商品支付，积分支付
|
||||
type:'',
|
||||
merId: 0
|
||||
};
|
||||
},
|
||||
computed: mapGetters(['isLogin']),
|
||||
watch: {
|
||||
isLogin: {
|
||||
handler: function(newV, oldV) {
|
||||
if (newV) {
|
||||
this.getOrderPayInfo();
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
onLoad: function(options) {
|
||||
this.fromType = options.fromType
|
||||
this.orderNo = options.order_id;
|
||||
this.merId = options.merId || 0
|
||||
if(!this.fromType || this.fromType==='integral'){
|
||||
this.status = options.status || 0;
|
||||
if (this.isLogin) {
|
||||
this.getOrderPayInfo();
|
||||
} else {
|
||||
toLogin();
|
||||
}
|
||||
}else{
|
||||
this.order_pay_info.payType= options.payType
|
||||
this.order_pay_info.payPrice = options.payPrice
|
||||
if(options.payType !== 'yue'){
|
||||
uni.showLoading({
|
||||
title: '正在加载中'
|
||||
});
|
||||
setTimeout(()=>{
|
||||
this.wechatQueryPay(this.fromType);
|
||||
},500);
|
||||
}else{
|
||||
this.payResult = '支付成功';
|
||||
this.order_pay_info.paid = 1;
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
//svip支付成功之后更新会员状态
|
||||
setPaidMember(){
|
||||
this.$store.commit('updatePaidMember', true);
|
||||
},
|
||||
//微信支付查明结果
|
||||
wechatQueryPay(orderType) {
|
||||
wechatQueryPayResult({
|
||||
orderType: orderType,
|
||||
orderNo:this.orderNo
|
||||
}).then(res => {
|
||||
if(res.data){
|
||||
this.payResult = '支付成功';
|
||||
this.order_pay_info.paid = 1;
|
||||
uni.hideLoading();
|
||||
this.setPaidMember();
|
||||
}else{
|
||||
this.payResult = '支付失败';
|
||||
this.order_pay_info.paid = 2;
|
||||
uni.hideLoading();
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
this.order_pay_info.paid = 2;
|
||||
this.errMsg = true;
|
||||
this.msg = err;
|
||||
uni.hideLoading();
|
||||
this.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
});
|
||||
},
|
||||
onLoadFun: function() {
|
||||
if(this.fromType !=='svip')this.getOrderPayInfo();
|
||||
},
|
||||
/**
|
||||
*
|
||||
* 支付完成查询支付状态
|
||||
*
|
||||
*/
|
||||
getOrderPayInfo: function() {
|
||||
let that = this;
|
||||
uni.showLoading({
|
||||
title: '正在加载中'
|
||||
});
|
||||
getOrderDetail(that.orderNo).then(res => {
|
||||
this.type=res.data.type
|
||||
that.$set(that, 'order_pay_info', res.data);
|
||||
if (res.data.payType === 'weixin') {
|
||||
setTimeout(()=>{
|
||||
that.wechatQueryPay('order');
|
||||
},2000);
|
||||
}else {
|
||||
if(res.data.paid){
|
||||
this.payResult = '订单支付成功';
|
||||
this.order_pay_info.paid = 1;
|
||||
}else{
|
||||
this.payResult = '支付失败';
|
||||
this.order_pay_info.paid = 2;
|
||||
}
|
||||
uni.hideLoading();
|
||||
}
|
||||
|
||||
}).catch(err => {
|
||||
uni.hideLoading();
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 去首页关闭当前所有页面
|
||||
*/
|
||||
goIndex: function(e) {
|
||||
this.$util.navigateTo('/pages/index/index');
|
||||
},
|
||||
/**
|
||||
*
|
||||
* 去订单详情页面
|
||||
*/
|
||||
goOrderDetails: function(e) {
|
||||
uni.navigateTo({
|
||||
url: this.fromType =='svip'?'/pages/activity/vip_paid/index':this.type==2?`/pages/activity/status/index?orderNo=${this.orderNo}`:'/pages/goods/order_list/index'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.icon-iconfontguanbi {
|
||||
background-color: #999 !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
.cart_color{
|
||||
@include main_color(theme);
|
||||
@include coupons_border_color(theme);
|
||||
}
|
||||
.payment-status {
|
||||
background-color: #fff;
|
||||
margin: 195rpx 30rpx 0 30rpx;
|
||||
padding: 1rpx 0 10rpx 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(0,0,0,.1);
|
||||
border: 6rpx solid #f5f5f5;
|
||||
margin: -76rpx auto 0 auto;
|
||||
background-color: #999;
|
||||
}
|
||||
|
||||
.payment-status .iconfont {
|
||||
font-size: 66rpx;
|
||||
width: 132rpx;
|
||||
height: 132rpx;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 132rpx;
|
||||
text-shadow: 0px 4px 0px rgba(0,0,0,.1);
|
||||
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: 30rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin: 25rpx 0 37rpx 0;
|
||||
}
|
||||
|
||||
.payment-status .wrapper {
|
||||
border: 1rpx solid #eee;
|
||||
margin: 0 30rpx 40rpx 30rpx;
|
||||
padding: 40rpx 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: 88rpx;
|
||||
border-radius: 200rpx;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
line-height: 88rpx;
|
||||
margin: 0 auto 30rpx auto;
|
||||
|
||||
}
|
||||
.cart-color {
|
||||
@include main_color(theme);
|
||||
@include coupons_border_color(theme);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user