You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
shop-app/pages/order/list.vue

260 lines
6.5 KiB

<!--
* @Author: ch
* @Date: 2022-03-22 10:58:24
* @LastEditors: ch
* @LastEditTime: 2022-04-22 18:07:49
* @Description: file content
-->
<template>
<view>
<view class="tabs">
<text :class="item.key === currentTabKey && 'tabs__active'"
v-for="item in tabListData" :key="item.key" @click="changeTab(item.key)">
{{item.name}}</text>
</view>
<BsEmpty v-if="!orderListData.length && loadingStatus === 'nomore'" tips="暂无订单记录呢~" :icon="require('@/static/order/empty.png')">
<ui-button slot="btn" type="line" @click="$Router.push('/')">去逛逛</ui-button>
</BsEmpty>
<view class="orders" v-for="item in orderListData" :key="item.orderId">
<view class="orders--title">
<text class="orders--name">官方自营</text>
<text class="orders--status" :class="[1,3].includes(item.orderStatus) && 'orders--status__warn'">{{item.orderStatusDesc}}</text>
</view>
<UiGoodsInfoMax v-for="item in item.products" :key="item.orderProductId"
:data="item" @click="$Router.push(`/orderDetail?id=${item.orderId}`)" />
<view class="orders--total">
<text class="orders--total__amount">合计</text>
<UiMoney class="orders--total__amount" :money="item.totalAmount" float prefix suffix/>
<text class="orders--total__pay ">应付</text>
<UiMoney class="orders--total__pay" :money="item.totalAmount" float prefix suffix/>
</view>
<view class="orders--footer">
<UiButton size="min" type="gradual"
v-if="item.orderStatus === 1" @click="pay(item)">去支付</UiButton>
<UiButton size="min" v-if="[2,3].includes(item.orderStatus)"
@click="$Router.push(`/orderDetail?id=${item.orderId}`)">查看详情</UiButton>
<UiButton size="min" v-if="item.orderStatus >= 4"
@click="$Router.push(`/logisitcsInfo?orderId=${item.orderId}`)">查看物流</UiButton>
<UiButton size="min" type="gradual" v-if="item.orderStatus === 4" @click="receive(item)">确认收货</UiButton>
<!-- <button class="orders--footer-btn orders--footer-btn__red"
>去支付</button>
<button class="orders--footer-btn" v-if="item.orderStatus === 2"
@click="$Router.push(`/orderDetail?id=${item.orderId}`)">查看详情</button>
<button class="orders--footer-btn" v-if="item.orderStatus >= 4"
@click="$Router.push(`/logisitcsInfo?orderId=${item.orderId}`)">查看物流</button>
<button class="orders--footer-btn orders--footer-btn__red"
v-if="item.orderStatus == 4" @click="receive(item)">确认收货</button> -->
</view>
</view>
<u-loadmore :status="loadingStatus" v-if="loadingStatus === 'loading'"/>
<BsPay :show.sync="payShow" :order="payOrder"></BsPay>
</view>
</template>
<script>
import BsEmpty from '@/components/BsEmpty.vue';
import UiButton from '@/components/UiButton.vue';
import { ApiGetOrderList, ApiPutOrderReceive } from '@/common/api/order';
import BsPay from '../../components/BsPay.vue';
import UiGoodsInfo from '../../components/UiGoodsInfo.vue';
import UiGoodsInfoMax from '../../components/UiGoodsInfoMax.vue';
import UiMoney from '../../components/UiMoney.vue';
export default {
components: { BsEmpty, UiButton, BsPay, UiGoodsInfo, UiGoodsInfoMax, UiMoney },
data () {
return {
tabListData : [
{key : '-1', name : '全部'},
{key : '1', name : '待付款'},
{key : '3', name : '待发货'},
{key : '4', name : '待收货'}
// {key : '6', name : '待评价'}
],
currentTabKey : this.$Route.query.tab || '-1',
orderListData : [],
loadingStatus : 'loading',
pageIndex : 1,
pageSize : 10,
payShow : false,
payOrder : null
}
},
onLoad(){
this.getOrderList()
},
onReachBottom(){
this.next()
},
methods: {
/**
* 切换tab 拉取当前分类第一页数据
*/
changeTab(key){
this.currentTabKey = key;
this.pageIndex = 1;
this.orderListData = [];
this.getOrderList();
},
async getOrderList(){
this.loadingStatus = 'loading';
const {error, result} = await ApiGetOrderList({
length : this.pageSize,
pageIndex : this.pageIndex,
orderStatus : this.currentTabKey > -1 ? this.currentTabKey : null
});
if(error){
uni.$u.toast(error.message);
return false;
}
// 标记是否为最后一页
if(result.records.length < this.pageSize){
this.loadingStatus = 'nomore';
}
this.orderListData = this.orderListData.concat(result.records);
},
/**
* 到底拉取下一页数据,并判断是否执行拉取
*/
next(){
if(this.loadingStatus === 'nomore'){
return false
}
this.pageIndex++;
this.getOrderList();
},
/**
* 立即支付
*/
pay(item){
this.payShow = true;
this.payOrder = item;
},
/**
* 确认收货
*/
async receive(item){
this.$msb.confirm({
content : '确认已经收到货了吗?',
confirm : async ()=>{
const {error} = await ApiPutOrderReceive({
orderId : item.orderId
});
if(error){
uni.$toast(error.message);
return false;
}
this.$Router.push('/orderSuccess')
}
})
}
}
}
</script>
<style lang="scss" scoped>
page{
background: $color-grey1;
overflow: hidden;
}
.tabs{
height: 100rpx;
background: $color-grey0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 40rpx;
font-size: $font-size-base;
color: $color-grey5;
&__active{
color: $color-yellow3;
position: relative;
&::after{
display: block;
content: '';
height: 4rpx;
background: $color-yellow3;
border-radius: 4rpx;
position: absolute;
bottom: -20rpx;
left: 45%;
width: 50%;
transform: translateX(-50%);
}
}
}
.orders{
background: $color-grey0;
padding: 30rpx;
margin: 20rpx 0;
&--title{
display: flex;
justify-content: space-between;
align-items: center;
}
&--name{
font-size: $font-size-lg;
color: $color-grey6;
font-weight: bold;
}
&--status{
font-size: $font-size-sm;
color: $color-grey4;
&__warn{
color: $color-yellow3;
}
}
&--total{
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 30rpx;
}
&--footer{
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 30rpx;
}
}
/deep/{
.orders--footer{
.ui-btn{
margin: 0 0 0 20rpx;
width: 180rpx;
padding: 0;
}
}
.orders--total__amount,.orders--total__pay{
font-size: $font-size-sm;
text{
font-size: 36rpx;
font-weight: bold;
}
.ui-money--prefix{
font-size: $font-size-sm;
}
.ui-money--suffix{
font-size: $font-size-sm;
}
}
.orders--total__amount {
color: $color-grey4;
text{
color: $color-grey4;
}
.ui-money--suffix{
margin-right: 20rpx;
}
}
}
</style>