xmhjc-applet/pages/market/allOrder.vue

<template>
    <view class="bg">
        <view class="margintb tabwiew" >
            <u-tabs keyName='subIdName' @click="clicktabs" :list="list1"></u-tabs>
        </view>
        <view v-for="(item) in dataList" :key="item.id" class="commodity">
            <view class="commodity_title">
                <view class="flex">
                    下单时间: <view style="margin-left: 12rpx;">{{ item.createTime }}</view>
                </view>
                <view :style="item.status=='1'?'color:red':''">
                    {{ computerStatus(item.status) }}
                </view>
            </view>
            <u-divider ></u-divider>
            <view @click="linkto(item)" class="mc_item" v-for="(item2) in item.detailVoList" :key="item2.id">
                <view class="item_swipe">
					<view class="box_img">
						<u--image width="180rpx" height="180rpx" :src="item2.fileList[0].fileUrl" ></u--image>
					</view>
					<view class="box_text">
						<view class="box_title">
							{{ item2.productTitle }}
						</view>
						<view class="box_type">
							已选择 {{ item2.specsName }}
						</view>
						<view class="box_num">
							<view class="bn_left">
								￥{{ item2.price }}
							</view>
							<view class="bn_right">
                                {{ 'x' + item2.num }}
							</view>
						</view>
					</view>
				</view>
            </view>
            <u-divider ></u-divider>
            <view class="heji">
                共{{item.productsNum}}件商品合计： <text style="color: #F6514F;font-weight: bold;">¥ {{item.totalPrice}}</text> 
            </view>
            <view class="heji">
                （含制作费、包装贷费）
            </view>
            <view class="btnright">
                <view @click="toCancelOrder(item.id)" v-if="item.status=='1'" class="btn">取消订单</view>
                <view @click="linktoPublishComments()" v-if="item.type=='4'" class="btn">立即评价</view>
                <view @click="toOrderAgain(item.id)" v-if="item.status=='3'||item.status=='2'" class="btn">再次购买</view>
            </view>
        </view>
        <view class="loadmore" @click="loadmore()" >
            {{jiazaitext}}
        </view>
        <view style="height: 100rpx;">

        </view>

    </view>
</template>
<script>
import {orderPage,cancelOrder,orderAgain} from '@/http/api/common.js'
import * as util from '@/pages/util/util.js'
export default {
components: {
},
data() {
    return {
        list1:[
            {
                subIdName: '全部',
                key:''
            },
            {
                subIdName: '未确认',
                key:'1'
            },
            {
                subIdName: '已确认',
                key:'2'
            },
            {
                subIdName: '已取消',
                key:'3'
            },
            {
                subIdName: '已完成',
                key:'4'
            }
        ],
        dataList:[],//订单列表
        status:'',
        pageSize:10,
        pageNum:1,
        jiazaitext:'加载更多',
    }
},
onLoad() {
   
},
onShow() {
    //每次切换页签初始化请求页签
    this.pageNum = 1
    this.dataList = []
    //获取订单列表
    this.getorderPage()
},
onReachBottom() {
    this.loadmore()
},
methods: {
    async toCancelOrder(id){
        //取消订单
        let res = await cancelOrder(id)
        if (res.data.code == 200) {
            util.toastFunc('取消成功',()=>{
                this.status = ''
                //每次切换页签初始化请求页签
                this.pageNum = 1
                this.dataList = []

                this.getorderPage()
            })
        }
    },
    async toOrderAgain(id){
        //再次购买
        let res = await orderAgain(id)
        if (res.data.code == 200) {
            util.toastFunc('添加成功',()=>{
                uni.switchTab({
                    url: '/pages/market/market',
                });
            })
        }
    },
    computerStatus(status){
        let a = {
            '1':'未确认',
            '2':'已确认',
            '3':'已取消',
            '4':'已完成',
        }
        return a[status]
    },
     //加载更多
     loadmore(){
        console.log('下拉加载',this.jiazaitext);
        if (this.jiazaitext=="加载更多") {
            this.pageNum=this.pageNum+1
            this.jiazaitext="加载中..."
            this.getorderPage()
        }
    },
    async getorderPage(){ 
        // status 1未确认 2已确认 3已取消 4已完成
        let res = await orderPage({
            status:this.status,
            pageSize:this.pageSize,
            pageNum:this.pageNum,
        })
        if (res.data.code == 200) {
            let newrows = res.data.data?.rows || []

            this.dataList.push(...newrows)
            
            if(this.dataList.length!=res.data.data.total){
                this.jiazaitext="加载更多"
            }else{
                this.jiazaitext="已经到底"
            }
        }
    },
    async clicktabs(item){
        console.log(item.key);
        this.status = item.key

        //每次切换页签初始化请求页签
        this.pageNum = 1
        this.dataList = []

        await this.getorderPage()
    },
    linktoPublishComments(){
        uni.navigateTo({
             url: '/pages/market/PublishComments'
        });
    },
    linkto(item){
        uni.navigateTo({
             url: '/pages/market/OrderDetails?orderId=' + item.id
        });
    }
}
}
</script>

<style>
.bg{
    width: 750rpx;
    height: auto;
    min-height: 100vh;
    background: #F1F1F1;
    border-radius: 0rpx 0rpx 0rpx 0rpx;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.commodity{
    width: 702rpx;
    height: auto;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    opacity: 1;
    margin-top: 24rpx;
}

.commodity_title{
    width: 650rpx;
    height: 40rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #999;
    line-height: 40rpx;
    padding: 24rpx 0 0 24rpx;

    display: flex;
    justify-content: space-between;
    align-items: center;
}



.mc_item{
	width: 702rpx;
	height: 244rpx;
	background: #FFFFFF;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	opacity: 1;
	margin-top: 24rpx;
}
.item_swipe{
	width: 678rpx;
	height: 244rpx;
	background: #FFFFFF;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	opacity: 1;
	display: flex;
    align-items: center;
    flex-direction: row;
	padding-left: 24rpx;
}

.box_img{
    width: 180rpx;
    height: 180rpx;
    background-color: #999999;
}
.box_text{
	width: 392rpx;
	height: 200rpx;
	margin-left: 20rpx;

	display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.box_title{
	width: 392rpx;
	height: 40rpx;
	font-size: 28rpx;
	font-weight: bold;
	color: #333333;
	line-height: 40rpx;
    

	display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:1;
}
.box_type{
	width: 410rpx;
	height: 48rpx;
	background: #EEEEEE;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	opacity: 1;

	font-size: 28rpx;
	font-weight: 500;
	color: #999999;
    padding-left: 24rpx;
    line-height: 48rpx;

	display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:1;
}
.box_num{
	width: 410rpx;
	display: flex;
	justify-content: space-between;
    align-items: center;
}
.bn_left{
	width: 106rpx;
	height: 38rpx;
	font-size: 28rpx;
	font-weight: bold;
	color: #333333;
	line-height: 36rpx;
}
.btnright{
    display: flex;
    justify-content: flex-end;
}
.btn{
    width: 160rpx;
    height: 64rpx;
    background: #FFFFFF;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    opacity: 1;
    border: 1rpx solid #F6514F;

    font-weight: 500;
    color: #F6514F;
    font-size: 28rpx;
    line-height: 64rpx;
    text-align: center;

    margin: 24rpx;
}
.heji{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 24rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #999999;
}
.loadmore{
    height:200rpx;
    text-align: center;
    font-size: 28rpx;
    font-weight: 400;
    color: #999;
    padding-top: 24rpx;
}
.tabwiew{
    background-color: white;
    width: 100vw;
    height: 50px;
    display: flex;
    justify-content: center;
    font-size: 32rpx;
}
</style>