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/saleAfter/saleAfterList.vue

207 lines
4.5 KiB

3 years ago
<!--
* @Author: ch
* @Date: 2022-03-22 10:58:24
3 years ago
* @LastEditors: ch
* @LastEditTime: 2022-04-13 17:26:05
3 years ago
* @Description: file content
-->
<template>
<view>
<BsEmpty class="empty" 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.refundId"
@click="$Router.push(`/saleAfterDetail?id=${item.refundId}`)">
<view class="orders--title">
<text class="orders--name">官方自营</text>
<text class="orders--status">{{item.refundStatusDesc}}</text>
</view>
<view class="orders--item">
<image class="orders--item-image" mode="widthFix" :src="item.refundProduct.productImageUrl" />
<view >
<view class="orders--item-con">
<text class="orders--item-title">{{item.refundProduct.productName}}</text>
<text class="orders--item-pirce">{{item.refundProduct.realAmount}}</text>
</view>
<view class="orders--item-desc">
<text>{{item.refundProduct.skuDescribe}}</text>
<text class="orders--item-num">x{{item.refundProduct.quantity}}</text>
</view>
</view>
</view>
<view class="orders--footer">
<button class="orders--footer-btn">查看详情</button>
</view>
</view>
<u-loadmore :status="loadingStatus" v-if="orderListData.length" />
</view>
</template>
<script>
import BsEmpty from '@/components/BsEmpty.vue';
import UiButton from '@/components/UiButton.vue';
import { DictOrderStatus } from '@/common/dicts/order';
import { ApiGetSaleAfterOrderList } from '@/common/api/order';
export default {
components: { BsEmpty, UiButton },
data () {
return {
orderListData : [],
loadingStatus : 'loading',
pageIndex : 1,
pageSize : 10
}
},
onLoad(){
this.getOrderList()
},
onReachBottom(){
this.next()
},
methods: {
async getOrderList(){
this.loadingStatus = 'loading';
const {error, result} = await ApiGetSaleAfterOrderList({
length : this.pageSize,
pageIndex : this.pageIndex
});
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();
}
}
}
</script>
<style lang="scss" scoped>
page{
background: $color-grey1;
overflow: hidden;
}
.empty{
height: 100vh;
}
.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-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>