msb-mca
/
shop-pc
2.1k
2
Code Issues Pull Requests Projects Releases Wiki Activity

订单列表

Browse Source
merge-requests/26/head
ch 3 years ago
parent 812f7cf645
commit 3ab78fe8cd
22 changed files with 363 additions and 165 deletions
Show Stats Download Patch File Download Diff File

BIN
assets/img/account/order/empty.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

0
assets/img/account/order_status_1.png → assets/img/account/order/order_status_1.png
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

0
assets/img/account/order_status_1_active.png → assets/img/account/order/order_status_1_active.png
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

0
assets/img/account/order_status_2.png → assets/img/account/order/order_status_2.png
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 928 B

After

Width:  |  Height:  |  Size: 928 B

0
assets/img/account/order_status_2_active.png → assets/img/account/order/order_status_2_active.png
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

0
assets/img/account/order_status_3.png → assets/img/account/order/order_status_3.png
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 763 B

After

Width:  |  Height:  |  Size: 763 B

0
assets/img/account/order_status_3_active.png → assets/img/account/order/order_status_3_active.png
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

0
assets/img/account/order_status_4.png → assets/img/account/order/order_status_4.png
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 752 B

After

Width:  |  Height:  |  Size: 752 B

0
assets/img/account/order_status_4_active.png → assets/img/account/order/order_status_4_active.png
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

0
assets/img/account/order_status_5.png → assets/img/account/order/order_status_5.png
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 812 B

After

Width:  |  Height:  |  Size: 812 B

0
assets/img/account/order_status_5_active.png → assets/img/account/order/order_status_5_active.png
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

0
assets/img/account/order_status_close.png → assets/img/account/order/order_status_close.png
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

5
pages/account/index/order/detail/module/Cancel.vue → components/BsCancelOrder.vue
Unescape View File

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-05-09 20:20:02 * @Date: 2022-05-09 20:20:02
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-05-09 20:41:46 * @LastEditTime: 2022-05-12 11:18:03
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -19,7 +19,7 @@
</template> </template>
<script> <script>
import {ApiPutCancelOrder,ApiPutOrderReceive} from '@/plugins/api/order' import {ApiPutCancelOrder,ApiPutOrderReceive} from '@/plugins/api/order'
import UiButton from '../../../../../../components/UiButton.vue'; import UiButton from '@/components/UiButton.vue';
export default { export default {
components: { UiButton }, components: { UiButton },
props : { props : {
@ -105,6 +105,7 @@ export default {
} }
.el-dialog__header{ .el-dialog__header{
padding: 30px 0 15px; padding: 30px 0 15px;
text-align: center;
} }
.el-dialog__title{ .el-dialog__title{
font-size: 20px; font-size: 20px;

72
components/BsPay.vue
Unescape View File

@ -2,16 +2,16 @@
* @Author: ch * @Author: ch
* @Date: 2022-05-08 00:39:50 * @Date: 2022-05-08 00:39:50
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-05-10 18:06:34 * @LastEditTime: 2022-05-12 11:44:04
* @Description: file content * @Description: file content
--> -->
<template> <template>
<el-dialog title="打开微信扫描付款" width="380px" class="box" center <el-dialog title="打开微信扫描付款" width="380px" class="box" center
:visible.sync="myVisible" @open="getCodeImg" @close="close"> :visible.sync="myVisible" @open="open" @close="close">
<div class="pay"> <div class="pay">
<span class="pay--timer">{{timer}}</span> <span class="pay--timer">{{timerTxt}}</span>
<UiMoney class="money" sufSize="14px" preSize="14px" size="20px" <UiMoney class="money" sufSize="14px" preSize="14px" size="20px"
float suffix prefix :money="money"/> float suffix prefix :money="orderInfo.payAmount"/>
<div class="pay--code"> <div class="pay--code">
<img :src="imgUrl" v-if="imgUrl"/> <img :src="imgUrl" v-if="imgUrl"/>
<!-- <p v-if="!timer">已超时，请重新下单</p> --> <!-- <p v-if="!timer">已超时，请重新下单</p> -->
@ -22,6 +22,7 @@
</template> </template>
<script> <script>
import {ApiPostPayCdoeImg} from '@/plugins/api/wx' import {ApiPostPayCdoeImg} from '@/plugins/api/wx'
import {ApiGetOrderDetail} from '@/plugins/api/order'
import UiMoney from './UiMoney.vue' import UiMoney from './UiMoney.vue'
export default { export default {
components: { UiMoney }, components: { UiMoney },
@ -33,20 +34,15 @@ export default {
orderId : { orderId : {
type : Number | String, type : Number | String,
default : '' default : ''
},
timer : {
type : String,
default : '',
},
money : {
type : String | Number,
default : 0
} }
}, },
data(){ data(){
return { return {
orderInfo: {},
imgUrl : '', imgUrl : '',
timerTxt : '', timerTxt : '',
startSecondNum : 0,
timerStop : null,
} }
}, },
computed:{ computed:{
@ -60,6 +56,30 @@ export default {
} }
}, },
methods : { methods : {
open(){
this.getOrderInfo();
this.getCodeImg();
},
/**
* 获取订单最新信息
*/
async getOrderInfo(){
const {error, result} = await ApiGetOrderDetail(this.orderId);
if(error){
this.$message.warning(error.message);
return false;
}
this.orderInfo = result;
if(this.orderInfo.orderStatus === 1){
// 待支付 开始倒计时
if(this.timerStop){
clearInterval(this.timerStop);
}
this.calcTimerStartSecondNum();
this.timer();
}
},
async getCodeImg(){ async getCodeImg(){
const {error, result} = await ApiPostPayCdoeImg({orderId : this.orderId}); const {error, result} = await ApiPostPayCdoeImg({orderId : this.orderId});
if(error){ if(error){
@ -67,7 +87,35 @@ export default {
} }
this.imgUrl = result.dataInfo.codeImgData; this.imgUrl = result.dataInfo.codeImgData;
}, },
/**
* 计算倒计时开始秒数
*/
calcTimerStartSecondNum(){
let expireTime = (new Date(this.orderInfo.expireTime.replace(/-/g,'/'))).getTime(),
curTime = (new Date(this.orderInfo.serverTime.replace(/-/g,'/'))).getTime(),
second = Math.floor((expireTime - curTime) / 1000);
this.startSecondNum = second > 0 ? second : 0;
this.timerStop = setInterval(()=> {
this.timer()
},1000)
},
/**
* 待付款的倒计时
*/
timer(){
if(this.startSecondNum == 0){
this.close();
return;
}
this.startSecondNum--;
let minute = parseInt(this.startSecondNum / 60);
let second = parseInt(this.startSecondNum % 60);
this.timerTxt = `剩余${minute > 0 ? `${minute}分` : ''} ${second}秒`;
},
close(){ close(){
clearInterval(this.timerStop);
this.timerStop = null;
this.$emit('cancel'); this.$emit('cancel');
}, },
finish(){ finish(){

5
components/UIGoodsInfo.vue
Unescape View File

@ -2,11 +2,11 @@
* @Author: ch * @Author: ch
* @Date: 2022-05-08 14:41:42 * @Date: 2022-05-08 14:41:42
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-05-09 22:01:52 * @LastEditTime: 2022-05-12 10:00:52
* @Description: file content * @Description: file content
--> -->
<template> <template>
<div class="ui-goods-info"> <div class="ui-goods-info" @click="$router.push(`/goods/detail/${goods.productId}`)">
<div class="ui-goods-info--img"> <div class="ui-goods-info--img">
<img :src="goods.productImageUrl"/> <img :src="goods.productImageUrl"/>
</div> </div>
@ -29,6 +29,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.ui-goods-info{ .ui-goods-info{
display: flex; display: flex;
cursor: pointer;
&--img{ &--img{
width: 100px; width: 100px;
height: 100px; height: 100px;

37
components/UiEmptyAccount.vue
Unescape View File

@ -0,0 +1,37 @@
<!--
* @Author: ch
* @Date: 2022-05-12 10:30:07
* @LastEditors: ch
* @LastEditTime: 2022-05-12 11:01:57
* @Description: file content
-->
<template>
<div class="ui-empty">
<img class="ui-empty--icon" :src="icon"/>
<p class="ui-empty--desc">{{desc}}</p>
<slot></slot>
</div>
</template>
<script>
export default {
props : {
title : String,
desc : String,
icon : String
},
}
</script>
<style lang="scss" scoped>
.ui-empty{
margin-top: 30px;
text-align: center;
padding: 80px 0;
&--icon{
width: 228px;
}
&--desc{
margin: 20px 0;
color: #999;
}
}
</style>

5
pages/account/index/order/detail/index.vue
Unescape View File

@ -2,14 +2,13 @@
* @Author: ch * @Author: ch
* @Date: 2022-05-08 01:14:03 * @Date: 2022-05-08 01:14:03
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-05-09 21:39:31 * @LastEditTime: 2022-05-11 22:22:15
* @Description: file content * @Description: file content
--> -->
<template> <template>
<div> <div>
<div class="box"> <div class="box">
<StatusInfo :orderInfo="orderInfo" @cancel="getOrderInfo" <StatusInfo :orderInfo="orderInfo" @changeStatus="getOrderInfo"/>
@receive="getOrderInfo" @payFinish="getOrderInfo"/>
<StatusStep :orderInfo="orderInfo" /> <StatusStep :orderInfo="orderInfo" />
</div> </div>
<LogisitcsInfo :orderInfo="orderInfo" /> <LogisitcsInfo :orderInfo="orderInfo" />

26
pages/account/index/order/detail/module/StatusInfo.vue
Unescape View File

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-05-09 14:41:37 * @Date: 2022-05-09 14:41:37
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-05-10 18:05:07 * @LastEditTime: 2022-05-12 11:08:57
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -19,17 +19,16 @@
<UiButton type="grey" :radius="true" @click="cancelVisible=true">取消</UiButton> <UiButton type="grey" :radius="true" @click="cancelVisible=true">取消</UiButton>
</template> </template>
</div> </div>
<Cancel :visible.sync="cancelVisible" :orderId="orderInfo.orderId" @cancel="cancel"/> <BsCancelOrder :visible.sync="cancelVisible" :orderId="orderInfo.orderId" @cancel="emitStatus"/>
<BsPay :visible.sync="payVisible" :orderId="orderInfo.orderId" <BsPay :visible.sync="payVisible" :orderId="orderInfo.orderId" @finish="emitStatus" @cancel="emitStatus"/>
:timer="ctxCon.tips" @finish="payFinish" :money="orderInfo.payAmount"/>
</div> </div>
</template> </template>
<script> <script>
import BsPay from '../../../../../../components/BsPay.vue' import BsPay from '@/components/BsPay.vue'
import UiButton from '../../../../../../components/UiButton.vue' import UiButton from '@/components/UiButton.vue'
import Cancel from './Cancel.vue' import BsCancelOrder from '../../../../../../components/BsCancelOrder.vue'
export default { export default {
components: { UiButton, Cancel, BsPay }, components: { UiButton, BsPay, BsCancelOrder },
props: { props: {
orderInfo : { orderInfo : {
type : Object, type : Object,
@ -93,7 +92,7 @@ export default {
*/ */
timer(){ timer(){
if(this.startSecondNum == 0){ if(this.startSecondNum == 0){
this.$emit('close'); this.emitStatus()
return; return;
} }
this.startSecondNum--; this.startSecondNum--;
@ -121,14 +120,11 @@ export default {
type: 'success', type: 'success',
message: '成功收货!' message: '成功收货!'
}); });
this.$emit('receive') this.emitStatus()
}); });
}, },
cancel(){ emitStatus(){
this.$emit('cancel') this.$emit('changeStatus')
},
payFinish(){
this.$emit('payFinish')
} }
} }

28
pages/account/index/order/detail/module/StatusStep.vue
Unescape View File

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-05-09 14:41:37 * @Date: 2022-05-09 14:41:37
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-05-10 13:33:57 * @LastEditTime: 2022-05-12 10:43:37
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -18,7 +18,7 @@
</ul> </ul>
</template> </template>
<script> <script>
import UiButton from '../../../../../../components/UiButton.vue'; import UiButton from '@/components/UiButton.vue';
import {FormatDate} from '@/plugins/utils' import {FormatDate} from '@/plugins/utils'
export default { export default {
components: { UiButton }, components: { UiButton },
@ -37,23 +37,23 @@ export default {
const defaultStep = [ const defaultStep = [
{ {
id : 1, name : '提交订单', id : 1, name : '提交订单',
icon: require('@/assets/img/account/order_status_1.png'), icon: require('@/assets/img/account/order/order_status_1.png'),
iconActive : require('@/assets/img/account/order_status_1_active.png') iconActive : require('@/assets/img/account/order/order_status_1_active.png')
}, },
{ {
id : 6, name : '支付订单' , id : 6, name : '支付订单' ,
icon: require('@/assets/img/account/order_status_2.png'), icon: require('@/assets/img/account/order/order_status_2.png'),
iconActive : require('@/assets/img/account/order_status_2_active.png') iconActive : require('@/assets/img/account/order/order_status_2_active.png')
}, },
{ {
id : 7, name : '平台发货' , id : 7, name : '平台发货' ,
icon: require('@/assets/img/account/order_status_3.png'), icon: require('@/assets/img/account/order/order_status_3.png'),
iconActive : require('@/assets/img/account/order_status_3_active.png') iconActive : require('@/assets/img/account/order/order_status_3_active.png')
}, },
{ {
id : 8, name : '确认收货' , id : 8, name : '确认收货' ,
icon: require('@/assets/img/account/order_status_4.png'), icon: require('@/assets/img/account/order/order_status_4.png'),
iconActive : require('@/assets/img/account/order_status_4_active.png') iconActive : require('@/assets/img/account/order/order_status_4_active.png')
}, },
]; ];
let showStep = []; let showStep = [];
@ -78,8 +78,8 @@ export default {
type:-1, name: '交易关闭', active: true, type:-1, name: '交易关闭', active: true,
date : FormatDate(createTime,'yyyy-mm-dd'), date : FormatDate(createTime,'yyyy-mm-dd'),
time : FormatDate(createTime, 'hh:ii:ss'), time : FormatDate(createTime, 'hh:ii:ss'),
icon: require('@/assets/img/account/order_status_close.png'), icon: require('@/assets/img/account/order/order_status_close.png'),
iconActive : require('@/assets/img/account/order_status_close.png') iconActive : require('@/assets/img/account/order/order_status_close.png')
}); });
}else{ }else{
@ -96,8 +96,8 @@ export default {
let lastLog = logs[logs.length - 1]; let lastLog = logs[logs.length - 1];
let lastStep = { let lastStep = {
type:-1, name: '交易完成', type:-1, name: '交易完成',
icon: require('@/assets/img/account/order_status_5.png'), icon: require('@/assets/img/account/order/order_status_5.png'),
iconActive : require('@/assets/img/account/order_status_5_active.png') iconActive : require('@/assets/img/account/order/order_status_5_active.png')
} }
if(lastLog.id === 8){ if(lastLog.id === 8){
lastStep.createTime = lastLog.createTime; lastStep.createTime = lastLog.createTime;

199
pages/account/index/order/list/index.vue
Unescape View File

@ -2,78 +2,106 @@
* @Author: ch * @Author: ch
* @Date: 2022-05-04 20:47:29 * @Date: 2022-05-04 20:47:29
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-05-10 13:16:44 * @LastEditTime: 2022-05-12 11:29:24
* @Description: file content * @Description: file content
--> -->
<template> <template>
<div> <div class="main">
<ul class="tab"> <Tab :active="tabActive" @change="changeTab"></Tab>
<li v-for="item in tabs" :key="item.value" @click="changeTab(item.value)" <div class="loading" v-if="loading">正在查询数据...</div>
:class="tabActive == item.value && 'tab__active'"> <UiEmptyAccount v-if="!orderTotal && !loading" desc="暂无订单数据" :icon="require('@/assets/img/account/order/empty.png')">
{{item.label}} <UiButton type="grey" @click="$router.push('/')">去逛逛</UiButton>
<span>6</span> </UiEmptyAccount>
</li> <template v-if="!loading">
</ul> <table v-if="orderTotal" class="order--table order--table-head">
<thead>
<tr>
<th>商品信息</th>
<th width="96">单价</th>
<th width="96">数量</th>
<th width="120">实付款</th>
<th width="110">交易状态</th>
<th width="145">操作</th>
</tr>
</thead>
</table>
<div class="order" v-for="item in orderList" :key="item.orderId"> <div class="order" v-for="item in orderList" :key="item.orderId">
<div class="order--head"></div> <div class="order--head">
<p>
<span>订单编号：{{item.orderNo || '9c665dc0b20b 假的'}}</span>
<span>下单时间：{{item.submitTime || `2011-01-01 00:00:00 假的`}}</span>
</p>
<router-link :to="`./detail?id=${item.orderId}`">订单详情 ></router-link>
</div>
<table class="order--table"> <table class="order--table">
<tbody> <tbody>
<tr v-for="(i, idx) in item.products" :key="i.orderProductId"> <tr v-for="(i, idx) in item.products" :key="i.orderProductId">
<td width="620px"> <td class="not-border">
<div class="order--product">
<UIGoodsInfo :goods="i"/> <UIGoodsInfo :goods="i"/>
<p>{{i.realAmount}}</p>
<p>{{i.quantity}}</p>
</div>
</td> </td>
<td class="not-border" width="96">{{i.realAmount}}</td>
<td class="not-border" width="96">{{i.quantity}}</td>
<template v-if="!idx"> <template v-if="!idx">
<td width="119px" :rowspan="item.products.length">{{item.payAmount}}</td> <td width="120" :rowspan="item.products.length">{{item.payAmount}}</td>
<td width="110px" :rowspan="item.products.length">{{item.orderStatusDesc}}</td> <td width="110" :rowspan="item.products.length">{{item.orderStatusDesc}}</td>
<td :rowspan="item.products.length"> <td width="145" :rowspan="item.products.length">
<button v-if="item.orderStatus === 1" @click="pay(item)">去支付</button> <template v-if="item.orderStatus === 1">
<button v-if="[2,3].includes(item.orderStatus)" <UiButton type="yellow_gradual" @click="pay(item)">去支付</UiButton>
@click="$router.push(`./detail?id=${item.orderId}`)">查看详情</button> <span class="link-btn" @click="canvelPay(item)">取消支付</span>
<button v-if="item.orderStatus >= 4" </template>
@click="$router.push(`/logisitcsInfo?orderId=${item.orderId}`)">查看物流</button> <router-link :to="`./detail?id=${item.orderId}`" v-if="item.orderStatus > 4">查看物流</router-link>
<button v-if="item.orderStatus === 4" @click="receive(item)">确认收货</button> <template v-if="item.orderStatus === 4">
<UiButton type="yellow_gradual" @click="receive(item)">确认收货</UiButton>
<router-link class="link-btn" :to="`./detail?id=${item.orderId}`">查看物流</router-link>
</template>
</td> </td>
</template> </template>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<el-pagination v-if=" orderTotal > pageSize" background layout="prev, pager, next" <el-pagination class="pagination" v-if=" orderTotal > pageSize" background layout="prev, pager, next"
:current-page.sync="pageIndex" :current-page.sync="pageIndex" :page-size="pageSize"
:total="orderTotal" @current-change="getOrderList"></el-pagination> :total="orderTotal" @current-change="getOrderList"></el-pagination>
</template>
<BsCancelOrder :visible.sync="cancelVisible" :orderId="operationOrder.orderId"/>
<BsPay :visible.sync="payVisible" :orderId="operationOrder.orderId" @finish="getOrderList"/>
</div> </div>
</template> </template>
<script> <script>
import {ApiGetOrderList, ApiPutOrderReceive} from '~/plugins/api/order'; import {ApiGetOrderList, ApiPutOrderReceive, ApiGetOrderStatistics} from '~/plugins/api/order';
import BsCancelOrder from '../../../../../components/BsCancelOrder.vue';
import BsPay from '../../../../../components/BsPay.vue';
import UiButton from '../../../../../components/UiButton.vue';
import UiEmptyAccount from '../../../../../components/UiEmptyAccount.vue';
import UIGoodsInfo from '../../../../../components/UIGoodsInfo.vue'; import UIGoodsInfo from '../../../../../components/UIGoodsInfo.vue';
import UiLineBox from '../../../../../components/UiLineBox.vue'; import UiLineBox from '../../../../../components/UiLineBox.vue';
import Tab from './module/Tab.vue';
export default { export default {
components: { UiLineBox, UIGoodsInfo }, components: { UiLineBox, UIGoodsInfo, Tab, UiButton, BsPay, UiEmptyAccount, BsCancelOrder },
data(){ data(){
return { return {
tabs : [
{label : '全部', value : -1},
{label : '待付款', value : 1},
{label : '待发货', value : 3},
{label : '待收货', value : 4},
],
tabActive : this.$route.query.type || -1, tabActive : this.$route.query.type || -1,
pageIndex : 1, pageIndex : 1,
pageSize : 15, pageSize : 15,
orderList : [], orderList : [],
orderTotal : 0 orderTotal : 0,
loading : true,
payVisible : false,
cancelVisible : false,
operationOrder : {}
} }
}, },
mounted(){ mounted(){
this.getOrderList() this.getOrderList();
}, },
methods : { methods : {
changeTab(val){ changeTab(val){
if(val === this.$route.query.type){ if(val === this.tabActive){
return false; return false;
} }
this.$router.replace({ this.$router.replace({
@ -87,76 +115,111 @@ export default {
}, },
async getOrderList(){ async getOrderList(){
this.loading = true;
const {error, result} = await ApiGetOrderList({ const {error, result} = await ApiGetOrderList({
length : this.pageSize, length : this.pageSize,
pageIndex : this.pageIndex, pageIndex : this.pageIndex,
orderStatus : this.tabActive > -1 ? this.tabActive : null orderStatus : this.tabActive > -1 ? this.tabActive : null
}); });
this.loading = false;
if(error){ if(error){
this.message.warning(error.message); this.message.warning(error.message);
return false; return false;
} }
this.orderList = result.records; this.orderList = result.records;
this.orderTotal = result.total this.orderTotal = result.total
},
pay(item){
this.operationOrder = item;
this.payVisible = true;
},
canvelPay(item){
this.operationOrder = item;
this.cancelVisible = true;
},
receive(){
this.$confirm('确认已经收到货了吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
const {error} = await ApiPutOrderReceive({orderId : this.operationOrder.orderId});
if(error){
uni.$toast(error.message);
return false;
} }
this.$message({
type: 'success',
message: '成功收货!'
});
this.emitStatus()
});
},
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tab { .main{
height: 42px; flex: 1;
line-height: 42px;
border-bottom: 1px solid #ddd;
li{
float: left;
margin-right: 54px;
font-size: 16px;
cursor: pointer;
span{
color: #FF875B;
}
}
&__active{
color: #FF875B;
position: relative;
&::after{
display: block;
height: 2px;
width: 100%;
content: '';
background: #FF875B;
position: absolute;
bottom: 0;
}
} }
.loading{
height: 100px;
line-height: 100px;
text-align: center;
color: #666;
} }
.order{ .order{
margin: 10px 0; margin: 10px 0;
&--head{ &--head{
height: 42px; height: 42px;
line-height: 42px;
color: #999; color: #999;
background: #F8F8F8; background: #F8F8F8;
border: 1px solid #ddd; border: 1px solid #ddd;
border-bottom: 0; border-bottom: 0;
display: flex;
justify-content: space-between;
padding: 0 20px;
span{
margin-right: 50px;
}
a{
color: #999;
}
} }
&--table{ &--table{
border: 1px solid #ddd;
width: 100%; width: 100%;
&-head{
margin: 30px 0 20px;
}
th{
height: 46px;
background: #f8f8f8;
font-weight: normal;
}
td{ td{
border: 1px solid #ddd; border: 1px solid #ddd;
padding: 20px; padding: 20px;
text-align: center; text-align: center;
&.not-border{
border-left: 0;
border-right: 0;
}
} }
tr:first-child td{ tr:first-child td{
border-top: 0; border-top: 0;
} }
} }
&--product{
display: flex;
align-items: center;
p{
width: 96px;
text-align: center;
} }
.link-btn{
display: block;
margin: 10px 0;
color: #999;
display: block;
} }
.pagination{
text-align: right;
} }
</style> </style>

83
pages/account/index/order/list/module/Tab.vue
Unescape View File

@ -0,0 +1,83 @@
<!--
* @Author: ch
* @Date: 2019-01-01 08:04:09
* @LastEditors: ch
* @LastEditTime: 2022-05-11 21:34:49
* @Description: file content
-->
<template>
<ul class="tab">
<li v-for="item in tabs" :key="item.value" @click="change(item.value)"
:class="active == item.value && 'tab__active'">
{{item.label}}
<span v-if="item.count">{{item.count}}</span>
</li>
</ul>
</template>
<script>
import {ApiGetOrderStatistics} from '~/plugins/api/order';
export default {
props:{
active : {
type : Number | String,
default : -1
}
},
data(){
return {
tabs : [
{label : '全部', value : -1, code: 'allCount'},
{label : '待付款', value : 1, code: 'unpaidCount'},
{label : '待发货', value : 3, code: 'waitDeliveryCount'},
{label : '待收货', value : 4, code: 'deliveredCount'},
]
}
},
mounted(){
this.getOrderStatistics();
},
methods : {
change(val){
this.$emit('change', val)
},
async getOrderStatistics(){
const {result} = await ApiGetOrderStatistics();
this.tabs = this.tabs.map(i => {
i.count = result[i.code];
return i;
})
}
}
}
</script>
<style lang="scss" scoped>
.tab {
width: 100%;
height: 42px;
line-height: 42px;
border-bottom: 1px solid #ddd;
li{
float: left;
margin-right: 54px;
font-size: 16px;
cursor: pointer;
span{
color: #FF875B;
}
}
&__active{
color: #FF875B;
position: relative;
&::after{
display: block;
height: 2px;
width: 100%;
content: '';
background: #FF875B;
position: absolute;
bottom: 0;
}
}
}
</style>

36
pages/order/submit/index.vue
Unescape View File

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-05-04 17:30:58 * @Date: 2022-05-04 17:30:58
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-05-10 18:06:21 * @LastEditTime: 2022-05-12 09:58:47
* @Description: file content * @Description: file content
--> -->
@ -22,8 +22,8 @@
<div class="pay"> <div class="pay">
<UiButton radius type="red_panel" @click="submit">立即支付</UiButton> <UiButton radius type="red_panel" @click="submit">立即支付</UiButton>
</div> </div>
<BsPay :visible.sync="payVisible" :orderId="payOrder.orderId" :timer="payTimerTxt" <BsPay :visible.sync="payVisible" :orderId="payOrder.orderId"
@cancel="cancelPay" @finish="finishPay" :money="orderInfo.payAmount"/> @cancel="cancelPay" @finish="finishPay" />
</div> </div>
</template> </template>
<script> <script>
@ -116,36 +116,6 @@ export default {
} }
this.payVisible = true; this.payVisible = true;
this.payOrder = result; this.payOrder = result;
// 待支付 开始倒计时
if(this.payTimerStop){
clearTimeout(this.payTimerStop);
}
this.calcTimerStartSecondNum();
},
/**
* 计算倒计时开始秒数
*/
calcTimerStartSecondNum(){
let expireTime = (new Date(this.payOrder.expireTime.replace(/-/g,'/'))).getTime(),
curTime = (this.payOrder.serverTime ? new Date(this.payOrder.serverTime.replace(/-/g,'/')) : new Date()).getTime(),
second = Math.floor((expireTime - curTime) / 1000);
this.payStartSecondNum = second > 0 ? second : 0;
this.timer();
},
/**
* 待付款的倒计时
*/
timer(){
if(this.payStartSecondNum == 0){
this.$emit('close');
return;
}
this.payStartSecondNum--;
let minute = parseInt(this.payStartSecondNum / 60);
let second = parseInt(this.payStartSecondNum % 60);
this.payTimerTxt = `剩余${minute > 0 ? `${minute}分` : ''} ${second}秒`;
this.payTimerStop = setTimeout(()=>this.timer(),1000);
}, },
cancelPay(){ cancelPay(){
this.$router.replace(`/account/order/detail?id=${this.payOrder.orderId}`) this.$router.replace(`/account/order/detail?id=${this.payOrder.orderId}`)

Write Preview
Loading…
Cancel
Save