gzh_chuanyuan/pages/question/list.vue

<template>
	<view class="list">
		<view class="list-con">
			<view class="list-con-rate">
				<picker mode="date" :value="value1" fields="month" @change="bindDateChange">
					<view class="rate">
						<text>{{value1}}</text><u-icon name="arrow-down" color="#333333" size="14"></u-icon>
					</view>
				</picker>
			</view>
			<view class="list-con-hd">
				<view class="item" :class="selectIndex == 1?'item-on':''" @click="tabItem(1)">全部</view>
				<view class="item" :class="selectIndex == 3?'item-on':''" @click="tabItem(3)">已支付</view>
				<view class="item" :class="selectIndex == 2?'item-on':''" @click="tabItem(2)">未支付</view>
			</view>
			<view class="list-con-bd" v-for="(a,index) in list" :key="index">
				<view class="one">
					<view>{{a.category.name}}</view>
					<text>￥{{a.total}}元</text>
				</view>
				<view class="two">
					<view>{{a.created_at}}</view>
					<text :class="a.order_status!='2'?'a':''">{{a.status_text}}</text>
				</view>
			</view>
		</view>
		<view class="empty" style="margin-top: 200rpx;" v-if="total == 0">
			<u-empty mode="data" text="暂无相关信息">
			</u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				total: 1,
				value1: new Date().getFullYear()+'-'+((new Date().getMonth()+1)>=10?new Date().getMonth()+1:"0"+(new Date().getMonth()+1)),
				selectIndex: 1,
				show: false,
				list:[]
			};
		},
		onShow() {
			this.getList();
		},
		onReachBottom() {
			if(this.list.length <= this.total){
				this.page ++
				this.getList();
			}
		},
		methods: {
			//获取列表
			async getList() {
				const { code, data } = await this.$api.orderList({
					status: Number(this.selectIndex)-1,
					time: this.value1,
					page: this.page
				})
				if (code == 200) {
					this.list = this.arrayUnique(this.list.concat(data.list),'id');
					this.total = data.total;
				}
			},
			//数组对象去重
			arrayUnique(arr, name) {
			    var hash = {};
			    return arr.reduce(function (item, next) {
			        hash[next[name]]
			            ? ""
			            : (hash[next[name]] = true && item.push(next));
			        return item;
			    }, []);
			},
			bindDateChange(e){
				this.value1 = e.detail.value;
				this.list = [];
				this.page = 1;
				this.getList();
			},
			tabItem(i) {
				this.selectIndex = i
				this.page = 1;
				this.list = [];
				this.getList();
			},
		}
	}
</script>


<style lang="scss" scoped>
	.list{
		width: 100%;
		min-height: calc(100vh - 44px);
		background-color: #f6f6f6;
		padding: 0 25rpx 25rpx;
		overflow: hidden;
		box-sizing: border-box;
		
			&-con {
				&-rate {
					margin: 40rpx 0 20rpx;
		
					.rate {
						display: flex;
						align-items: center;
						justify-content: start;
						font-size: 30rpx;
						color: #222222;
		
						text {
							margin-right: 10rpx
						}
					}
				}
		
				&-hd {
					width: 80%;
					margin: 0 auto 26rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
		
					.item {
						padding: 20rpx 0;
						text-align: center;
						font-size: 30rpx;
						font-weight: 400;
						color: #666666;
						position: relative;
		
						&-on {
							color: #2080F9;
							font-weight: bold;
							font-size: 34rpx;
		
							&::after {
								content: "";
								width: 52rpx;
								height: 10rpx;
								background: #2080F9;
								border-radius: 10rpx;
								position: absolute;
								left: 50%;
								bottom: 0;
								z-index: 2;
								margin-left: -26rpx;
							}
						}
					}
		
				}
		
				&-bd {
					margin-bottom: 20rpx;
					padding: 30rpx 38rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
		
					.one {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 32rpx;
						color: #222222;
						line-height: 2;
						font-weight: bold;
					}
		
					.two {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 28rpx;
						color: #999999;
						line-height: 1.5;
						.a{
							color: #F01B1B;
						}
					}
				}
			}
		
	}
</style>