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

264 lines
6.2 KiB

3 years ago
<!--
* @Author: ch
* @Date: 2022-03-22 10:58:24
* @LastEditors: ch
* @LastEditTime: 2022-04-09 15:03:53
3 years ago
* @Description: file content
-->
<template>
<view>
<view class="tabs">
<text :class="item.key === currentTabKey && 'tabs__active'"
3 years ago
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')">
3 years ago
<ui-button slot="btn" type="line" @click="$Router('/')"></ui-button>
</BsEmpty>
3 years ago
<view class="orders" v-for="item in orderListData" :key="item.orderId">
<view class="orders--title">
<text class="orders--name">官方自营</text>
3 years ago
<text class="orders--status" :class="[1,3].includes(item.orderStatus) && 'orders--status__warn'">{{item.orderStatusDesc}}</text>
</view>
3 years ago
<view class="orders--item" v-for="i in item.products" :key="i.productId" @click="$Router.push(`/orderDetail?id=${item.orderId}`)">
3 years ago
<image class="orders--item-image" mode="widthFix" :src="i.productImageUrl" />
<view >
<view class="orders--item-con">
3 years ago
<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>
3 years ago
<text class="orders--item-num">x{{i.quantity}}</text>
</view>
</view>
</view>
<view class="orders--total">
<text>合计</text>
3 years ago
<text class="orders--total__amount">{{item.totalAmount}}</text>
<text class="orders--total__pay">应付</text>
3 years ago
<text class="orders--total__amount orders--total__pay">{{item.payAmount}}</text>
</view>
<view class="orders--footer">
3 years ago
<button class="orders--footer-btn orders--footer-btn__red" v-if="item.orderStatus === 1"></button>
<button class="orders--footer-btn" v-if="item.orderStatus === 2"></button>
<button class="orders--footer-btn" v-if="[3,4,7].includes(item.orderStatus)"></button>
<button class="orders--footer-btn orders--footer-btn__red" v-if="item.orderStatus == 4"></button>
</view>
</view>
<u-loadmore :status="loadingStatus" v-if="orderListData.length" />
</view>
3 years ago
</template>
<script>
import BsEmpty from '@/components/BsEmpty.vue';
import UiButton from '@/components/UiButton.vue';
3 years ago
import { DictOrderStatus } from '@/common/dicts/order';
import { ApiGetOrderList } from '@/common/api/order';
3 years ago
export default {
components: { BsEmpty, UiButton },
3 years ago
data () {
return {
tabListData : [
{key : '-1', name : '全部'},
{key : '1', name : '待付款'},
{key : '3', name : '待发货'},
{key : '4', name : '待收货'},
{key : '6', name : '待评价'}
],
currentTabKey : '-1',
3 years ago
orderListData : [],
loadingStatus : 'loading',
3 years ago
pageIndex : 1,
pageSize : 10
3 years ago
}
},
onLoad(){
this.getOrderList()
},
onReachBottom(){
this.next()
},
methods: {
/**
* 切换tab 拉取当前分类第一页数据
*/
changeTab(key){
this.currentTabKey = key;
3 years ago
this.pageIndex = 1;
this.orderListData = [];
3 years ago
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
});
3 years ago
if(error){
uni.$u.toast(error.message);
return false;
}
// 标记是否为最后一页
if(!result.records.length){
this.loadingStatus = 'nomore';
3 years ago
}
this.orderListData = this.orderListData.concat(result.records);
},
/**
* 到底拉取下一页数据并判断是否执行拉取
*/
next(){
if(this.loadingStatus === 'nomore'){
return false
3 years ago
}
this.pageIndex++;
3 years ago
this.getOrderList();
}
}
3 years ago
}
</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;
}
}
}
}
// 空数据按钮
3 years ago
</style>