yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

【订单支付结果页】 

1. 实现功能
pull/1/MERGE
YunaiV 2023-07-04 22:40:58 +08:00
parent 965d6683bf
commit a7e784555d
3 changed files with 97 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pages/goods/cashier/index.vue
View File

@ -107,6 +107,8 @@
title: '加载订单中' title: '加载订单中'
}); });
PayOrderApi.getOrder(this.orderId).then(res => { PayOrderApi.getOrder(this.orderId).then(res => {
// TODO 芋艿：如果已支付，则跳转回
console.log(res) console.log(res)
this.payPrice = res.data.price this.payPrice = res.data.price
this.invalidTime = res.data.expireTime this.invalidTime = res.data.expireTime

9
pages/order_details/index.vue
View File

@ -175,14 +175,13 @@
<view class='conter' v-if="orderInfo.payStatus">已支付</view> <view class='conter' v-if="orderInfo.payStatus">已支付</view>
<view class='conter' v-else>未支付</view> <view class='conter' v-else>未支付</view>
</view> </view>
<!-- TODO 芋艿：支付方式的翻译 -->
<view class='item acea-row row-between'> <view class='item acea-row row-between'>
<view>支付方式：</view> <view>支付方式：</view>
<view class='conter'>{{orderInfo.payTypeStr}}</view> <view class='conter'>{{ orderInfo.payChannelName }}</view>
</view> </view>
<view class='item acea-row row-between' v-if="orderInfo.userRemark"> <view class='item acea-row row-between' v-if="orderInfo.userRemark">
<view>买家留言：</view> <view>买家留言：</view>
<view class='conter'>{{orderInfo.userRemark}}</view> <view class='conter'>{{ orderInfo.userRemark }}</view>
</view> </view>
</view> </view>
<!-- TODO 芋艿：退款订单详情 --> <!-- TODO 芋艿：退款订单详情 -->
@ -304,9 +303,7 @@
import { qrcodeApi } from '@/api/order.js'; import { qrcodeApi } from '@/api/order.js';
import * as OrderApi from '@/api/trade/order.js'; import * as OrderApi from '@/api/trade/order.js';
import * as DeliveryApi from '@/api/trade/delivery.js'; import * as DeliveryApi from '@/api/trade/delivery.js';
import { import { openOrderRefundSubscribe } from '@/utils/SubscribeMessage.js';
openOrderRefundSubscribe
} from '@/utils/SubscribeMessage.js';
import home from '@/components/home'; import home from '@/components/home';
import payment from '@/components/payment'; import payment from '@/components/payment';
import orderGoods from "@/components/orderGoods"; import orderGoods from "@/components/orderGoods";

204
pages/order_pay_status/index.vue
View File

@ -1,97 +1,76 @@
<template> <template>
<view> <view>
<view class='payment-status'> <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-duihao2 bg-color' v-if="order_pay_info.payStatus" />
<view class='iconfont icons icon-iconfontguanbi' v-else></view> <view class='iconfont icons icon-iconfontguanbi' v-else />
<!-- 失败时：订单支付失败 --> <view class='status'>{{order_pay_info.payStatus ? '订单支付成功':'订单支付失败'}}</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='wrapper'>
<view class='item acea-row row-between-wrapper'> <view class='item acea-row row-between-wrapper'>
<view>订单编号</view> <view>订单编号</view>
<view class='itemCom'>{{order_pay_info.orderId}}</view> <view class='itemCom'>{{order_pay_info.no}}</view>
</view> </view>
<view class='item acea-row row-between-wrapper'> <view class='item acea-row row-between-wrapper'>
<view>下单时间</view> <view>下单时间</view>
<view class='itemCom'>{{order_pay_info.createTime?order_pay_info.createTime:'-'}}</view> <view class='itemCom'>{{ order_pay_info.createTime ? formatDate(order_pay_info.createTime) : '-' }}</view>
</view> </view>
<view class='item acea-row row-between-wrapper'> <view class='item acea-row row-between-wrapper'>
<view>支付方式</view> <view>支付方式</view>
<view class='itemCom' v-if="order_pay_info.payType=='weixin'">微信支付</view> <view class='itemCom'>{{ order_pay_info.payChannelName }}</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>
<view class='item acea-row row-between-wrapper'> <view class='item acea-row row-between-wrapper'>
<view>支付金额</view> <view>支付金额</view>
<view class='itemCom'>{{order_pay_info.payPrice}}</view> <view class='itemCom'>{{ fen2yuan(order_pay_info.payPrice) }}</view>
</view> </view>
<!--失败时加上这个 --> <!-- 失败时加上这个 -->
<view class='item acea-row row-between-wrapper' v-if="order_pay_info.paid==0 && order_pay_info.payType != 'offline'"> <view class='item acea-row row-between-wrapper' v-if="!order_pay_info.payStatus">
<view>失败原因</view> <view>失败原因</view>
<view class='itemCom'>{{status==2 ? '取消支付':msg}}</view> <view class='itemCom'>{{ msg || '取消支付' }}</view>
</view> </view>
</view> </view>
<!--失败时： 重新购买 -->
<!-- 操作区 -->
<view @tap="goOrderDetails"> <view @tap="goOrderDetails">
<button formType="submit" class='returnBnt bg-color' hover-class='none'>查看订单</button> <button formType="submit" class='returnBnt bg-color' hover-class='none'>
查看订单
</button>
</view> </view>
<!-- <view @tap="goOrderDetails" v-if="order_pay_info.paid==0 && status==1"> <!-- TODO 芋艿：拼团 -->
<button class='returnBnt bg-color' hover-class='none'>重新购买</button> <button @click="goPink(order_pay_info.pinkId)" class='returnBnt cart-color' formType="submit" hover-class='none'
</view> v-if="order_pay_info.pinkId && order_pay_info.payStatus">
<view @tap="goOrderDetails" v-if="order_pay_info.paid==0 && status==2"> 邀请好友参团
<button class='returnBnt bg-color' hover-class='none'>重新支付</button> </button>
</view> --> <button @click="goIndex" class='returnBnt cart-color' formType="submit" hover-class='none' v-else>
<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> </button>
</view> </view>
<!-- #ifdef MP -->
<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
<!-- #endif -->
</view> </view>
</template> </template>
<script> <script>
import { import * as OrderApi from '@/api/trade/order.js';
getOrderDetail import { openOrderSubscribe } from '@/utils/SubscribeMessage.js';
} from '@/api/order.js'; import { toLogin } from '@/libs/login.js';
import { import { mapGetters } from "vuex";
openOrderSubscribe import dayjs from '@/plugin/dayjs/dayjs.min.js';
} from '@/utils/SubscribeMessage.js'; import * as Util from '@/utils/util.js';
import {
toLogin
} from '@/libs/login.js';
import {
mapGetters
} from "vuex";
// #ifdef MP
import authorize from '@/components/Authorize';
// #endif
export default { export default {
components: {
// #ifdef MP
authorize
// #endif
},
data() { data() {
return { return {
orderId: '', orderId: '',
order_pay_info: { order_pay_info: {
paid: 1, payStatus: true,
_status: {}
}, },
isAuto: false, //没有授权的不会自动授权 status: 0,
isShowAuth: false ,//是否隐藏授权 msg: ''
status:0,
msg:''
}; };
}, },
computed: mapGetters(['isLogin']), computed: mapGetters(['isLogin']),
watch:{ watch:{
isLogin:{ isLogin:{
handler:function(newV,oldV){ handler:function(newV, oldV) {
if(newV){ if (newV) {
this.getOrderPayInfo(); this.getOrderPayInfo();
} }
}, },
@ -99,45 +78,64 @@
} }
}, },
onLoad: function(options) { onLoad: function(options) {
if (!options.order_id) return this.$util.Tips({ if (!this.isLogin) {
title: '缺少参数无法查看订单支付状态' toLogin();
}, { return
tab: 3, }
url: 1
}); if (!options.order_id) {
this.orderId = options.order_id; return this.$util.Tips({
this.status = options.status || 0; title: '缺少参数无法查看订单支付状态'
this.msg = options.msg || ''; }, {
if (this.isLogin) { tab: 3,
this.getOrderPayInfo(); url: 1
} else { });
toLogin(); }
} this.orderId = options.order_id;
this.msg = options.msg || '';
this.getOrderPayInfo();
}, },
methods: { methods: {
onLoadFun: function() {
this.getOrderPayInfo();
},
/** /**
*
* 支付完成查询支付状态 * 支付完成查询支付状态
*
*/ */
getOrderPayInfo: function() { getOrderPayInfo: function() {
let that = this;
uni.showLoading({ uni.showLoading({
title: '正在加载中' title: '正在加载中'
}); });
getOrderDetail(that.orderId).then(res => { OrderApi.getOrderDetail(this.orderId).then(res => {
uni.hideLoading(); uni.hideLoading();
that.$set(that, 'order_pay_info', res.data); this.$set(this, 'order_pay_info', res.data);
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title: res.data.paid ? '支付成功' : '支付失败' title: res.data.payStatus ? '支付成功' : '支付失败'
}); });
}).catch(err => { }).catch(err => {
uni.hideLoading(); uni.hideLoading();
}); });
}, },
/**
* 去订单详情页面
*/
goOrderDetails: function() {
// #ifdef MP
uni.showLoading({
title: '正在加载',
})
openOrderSubscribe().then(res => {
uni.hideLoading();
uni.navigateTo({
url: '/pages/order_details/index?order_id=' + this.orderId
});
}).catch(() => {
nui.hideLoading();
});
// #endif
// #ifndef MP
uni.navigateTo({
url: '/pages/order_details/index?order_id=' + this.orderId
})
// #endif
},
/** /**
* 去首页关闭当前所有页面 * 去首页关闭当前所有页面
*/ */
@ -146,42 +144,24 @@
url: '/pages/index/index' url: '/pages/index/index'
}); });
}, },
// 去参团页面； /**
goPink:function(id){ * 去参团页面
*/
goPink: function(id) {
uni.navigateTo({ uni.navigateTo({
url: '/pages/activity/goods_combination_status/index?id='+id 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
}
fen2yuan(price) {
return Util.fen2yuan(price)
},
formatDate: function(date) {
return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
}
} }
} }
</script> </script>
<style> <style>
.icon-iconfontguanbi{ .icon-iconfontguanbi{
background-color: #999 !important; background-color: #999 !important;