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

300 lines
7.0 KiB

<!--
* @Author: ch
* @Date: 2022-03-22 10:58:24
* @LastEditors: ch
* @LastEditTime: 2022-04-19 18:10:45
* @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('/')">去逛逛</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>
<view class="orders--item" v-for="i in item.products" :key="i.orderProductId" @click="$Router.push(`/orderDetail?id=${item.orderId}`)">
<image class="orders--item-image" mode="widthFix" :src="i.productImageUrl" />
<view >
<view class="orders--item-con">
<text class="orders--item-title">{{i.productName}}</text>
<text class="orders--item-pirce">¥{{i.realAmount}}</text>
</view>
<view class="orders--item-desc">
<text>{{i.skuDescribe}}</text>
<text class="orders--item-num">x{{i.quantity}}</text>
</view>
</view>
</view>
<view class="orders--total">
<text>合计</text>
<text class="orders--total__amount">¥{{item.totalAmount}}</text>
<text class="orders--total__pay">应付</text>
<text class="orders--total__amount orders--total__pay">¥{{item.payAmount}}</text>
</view>
<view class="orders--footer">
<button class="orders--footer-btn orders--footer-btn__red"
v-if="item.orderStatus === 1" @click="pay(item)">去支付</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="orderListData.length" />
<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';
export default {
components: { BsEmpty, UiButton, BsPay },
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.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;
}
&--status{
font-size: $font-size-sm;
color: $color-grey4;
&__warn{
color: $color-yellow3;
}
}
&--item{
display: flex;
justify-content: space-between;
padding: 30rpx 0 0;
}
&--item-image{
width: 180rpx;
height: 180rpx;
margin-right: 30rpx;
}
&--item-con{
width: 510rpx;
display: flex;
justify-content: space-between;
font-size: $font-size-base;
color: $color-grey6;
line-height: 39rpx;
}
&--item-title{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
&--item-pirce{
font-size: 22rpx;
margin-left: 60rpx;
}
&--item-desc{
width: 510rpx;
font-size: $font-size-sm;
color: $color-grey4;
margin-top: 20rpx;
line-height: 39rpx;
display: flex;
justify-content: space-between;
}
&--item-num{
font-size: $font-size-base;
margin-left: 60rpx;
}
&--total{
font-size: $font-size-sm;
color: $color-grey4;
display: flex;
align-items: center;
justify-content: end;
margin-top: 30rpx;
&__amount{
font-size: $font-size-base;
margin-right: 20rpx;
}
&__pay{
color: $color-grey6;
}
}
&--footer{
display: flex;
justify-content: end;
align-items: center;
margin-top: 30rpx;
&-btn{
height: 58rpx;
line-height: 58rpx;
border-radius: 30rpx;
margin: 0 0 0 30rpx;
border: 1px solid $color-grey6;
color: $color-grey6;
background: none;
font-size: 26rpx;
&__red{
background: linear-gradient(270deg, $color-yellow2 0%, $color-yellow1 100%);
color: $color-grey0;
border: 0;
height: 60rpx;
line-height: 60rpx;
}
}
}
}
// 空数据按钮
</style>