mall-applet1/pagesA/order-list/order-list.vue

<template>
	<view>
		<status-container titlet="订单管理" :ifCustomer='false'>
			<view slot="content" style="margin: -20rpx -20rpx 0 -20rpx;">
				<view class="bacf posir">
					<view class="posi-sticky pad-x20 pad-zy20" :style="{top: newTop +'px'}">
						<!-- <scrollTextSlide @changeEv="tabTap" :list="tagList" :activeIndex="activeIndex"></scrollTextSlide> -->
						<swiper-tab-jl :list="tagList" v-model="activeIndex" @changeEv="tabTap" itemColor="#FFFFFF"></swiper-tab-jl>
					</view>
					<swiper :style="{height: swiperHeight + 'px'}" class="fon30" style="background-color: #f4f4f4;" :current="activeIndex" @change="swiperChange">
						<swiper-item v-for="(item,index) in dataList.length" :key="index" class="pad-s30">
							<scroll-view scroll-y @scrolltolower="scrollBottomEv" style="height: 100%;">
								<!-- 列表数据 -->
								<view class="radius20 bacf pad-zy30 mar-x25 mar-zy40" @tap="goDetail" v-for="(item1,index1) in dataList[index]" :key="index1">
									<view class="disjbac bbot pad30" style="margin: 0 -30rpx;">
										<view class="">订单号：2928392832</view>
										<view class="" :style="{color: ['#f83030','#f83030','#f83030','#a0a0a0','#a0a0a0'][0]}">{{['已下单','制作中','已发货','已完成','已取消'][0]}}</view>
									</view>
									<view class="disjb borbot pad-sx30" v-for="(item2,index2) in 2" :key="index2">
										<image class="mar-y30 flexs radius40" src="https://s6.jpg.cm/2022/05/06/Lx4T45.jpg" mode="" style="width: 210rpx;height: 210rpx;"></image>
										<view class="width100 disjb fc" style="height: 210rpx;">
											<view class="clips2 fon24">{{item1.title}}</view>
											<view class="">
												<view class="fon24 mar-x30" style="color: #8c8c9b;">单位：{{item1.title}}</view>
												<view class="disjbac ">
													<view class="textc bold">￥{{$toolAll.tools.changeNum(item1.price)}}</view>
													<view class="fon24" style="color: #8c8c9b;">x1</view>
												</view>
											</view>
										</view>
									</view>
									<view class="disjbac tbot pad30" style="margin: 0 -30rpx;">
										<view class="bold" style="color: #f83030;">合计：￥2390.00</view>
										<!-- <view class="btn" @tap.stop="cancleEv">取消订单</view> -->
										<view class="btn csbtn" @tap.stop="buyEv">再次购买</view>
									</view>
								</view>
								<view class="pad-sx40" v-if="total==dataList.length"><pitera textStr="—— 到底啦 ——"></pitera></view>
							</scroll-view>
						</swiper-item>
					</swiper>
					<view class="loading-box" v-show="ifLoading" style="position: absolute;bottom: 20rpx; left: 50%;transform: translateX(-50%);">
					    <view class="loader-16"></view>
					</view>
				</view>
			</view>
		</status-container>
	</view>
</template>

<script>
	// 底部组件
	import footTab from '@/components/foot-tabs/foot-tab.vue';
	import swiperTabJl from '@/components/swiper-tab/swiper-tab-jl.vue';
	import pitera from '@/components/nothing/pitera';
	export default {
		components:{
			'foot-tab' :footTab,
			swiperTabJl,
			pitera
		},
		data() {
			return {
				tagList:[
					{title:'全部'},
					{title:'已下单'},
					{title:'制作中'},
					{title:'已发货'},
					{title:'已完成'},
					{title:'已取消'},
				],
				activeIndex:0,
				dataList:[
					[
						{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
						{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
						{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
						{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
						{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
						{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
					],
					[
						{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
					],
					[
						{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
						{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
						{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
						{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
						{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
						{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
						{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
						{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
					],
					[
						{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
					],
					[
						{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
					],
					[
						{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
					],
				],
				flag:true,
				swiperHeight:uni.getSystemInfoSync().windowHeight,
				newTop:uni.getSystemInfoSync().statusBarHeight + 50,
				ifLoading:false,
				total:0
			}
		},
		onLoad(op) {
			const query = wx.createSelectorQuery().in(this)
			query.select('.posi-sticky').boundingClientRect((rect) => {
				this.swiperHeight = this.swiperHeight - this.newTop - rect.height;
			}).exec()
			if(op.index) {
				this.activeIndex = op.index;
			}
		},
		methods: {
			tabTap(e) {
				this.activeIndex = e;
			},
			swiperChange(e) {
				this.activeIndex = e.detail.current;
			},
			scrollBottomEv(e) {
				this.ifLoading = true;
				this.total = 0;
				setTimeout(()=>{
					this.ifLoading = false;
					this.total = this.dataList.length;
				},2000)
			},
			// 去详情
			goDetail(){
				uni.navigateTo({
					url:'/pagesB/order-detail/order-detail'
				})
			},
			// 取消订单
			cancleEv(){
				console.log('取消订单');
			},
			// 再次购买
			buyEv(){
				uni.navigateTo({
					url:'/pagesB/settlement/settlement'
				})
			}
		}
	}
</script>

<style>
.btn{
	width: 150rpx;
	height: 64rpx;
	line-height: 64rpx;
	color: #8c8c9b;
	border: 2rpx solid #d3d3d3;
	border-radius: 20rpx;
	text-align: center;
	box-sizing: border-box;
}
.csbtn{
	border: none;
	background: linear-gradient(to right,#ff3772 0%,#fd5549 100%);
	color: #FFFFFF;
	box-shadow: 0rpx 6rpx 10rpx rgba(255, 55, 114, .3);
}
</style>