hotelHomestayWx/pagesHouse/home/orderList.vue

<template>
	<view class="page" :style="{'min-height':(h-th)+'px','padding-top':mt+'px'}">
		<c-nav-bar title="订单列表"></c-nav-bar>
		<view class="query">
			<u-icon @click="show=true" name="calendar" label="自定义查询" labelPos="right" labelColor="#666" color="#666"
				space="10px" size="25px"></u-icon>
		</view>
		<view class="list">
			<view class="time">
				<text>{{date}}</text>
			</view>
			<view class="content">
				<view class="li first">
					<text>订单信息</text>
					<text>销量</text>
					<text>成交金额</text>
				</view>
				<view class="li" v-for="(item,index) in list" :key="index" @click="detail(item)">
					<view class="avatar">
						<image :src="item.pic"></image>
						<text>{{item.thingName}}</text>
					</view>
					<text>{{item.num}}</text>
					<text>￥{{item.price}}</text>
				</view>
			</view>
		</view>
		<u-datetime-picker @confirm="confirmDate" @cancel="show=false" :show="show" v-model="value1"
			mode="date"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date: new Date().Format('yyyy-MM-dd'),
				show: false,
				value1: Number(new Date()),
				h: uni.getSystemInfoSync().windowHeight - 87,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				list: [],
			}
		},
		onLoad(){
			this.getList();
		},
		methods: {
			confirmDate(e){
					// 创建一个Date对象并传入时间戳
					const date = new Date(e.value);
					// 使用Date对象的方法获取年、月、日、小时、分钟和秒
					const year = date.getFullYear();
					const month = ('0' + (date.getMonth() + 1)).slice(-2);
					const day = ('0' + date.getDate()).slice(-2);
					// 格式化时间
					const formattedTime = `${year}-${month}-${day}`;
				
					this.date = formattedTime;
					this.getList();
					this.show = false;
			},
			getList(){
				this.$api.post('/merchant/merchantFisherman/home/getMerchantFishermanOrderList',{
					dateTime:this.date,
					dateType:'1',
					fishermanId:uni.getStorageSync('merchantId')
				}).then(res => {
					if (res.data.code === 0) {
						this.list = res.data.data;
					} 
				})
			},
			detail(item) {
				let info=encodeURIComponent(JSON.stringify(item));
				uni.navigateTo({
					url: "/pagesHouse/home/orderBillDetail?info="+info
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.page {
		background: #F5F8FA;
		padding-bottom: 40rpx;
		box-sizing: border-box;

		.query {
			height: 100rpx;
			display: flex;
			align-items: center;
			padding-left: 30rpx;
			background-color: #fff;
		}

		.list {
			width: calc(100% - 36rpx);
			margin: 20rpx auto;
			padding: 0 0 6rpx;

			.time {
				margin: 24rpx 0;
				color: #111;
			}

			.content {
				background-color: #fff;
				padding: 22rpx 20rpx 4rpx;
				border-radius: 24rpx;

				.li {
					display: grid;
					grid-template-columns: 60% 20% 20%;
					align-items: center;
					margin-bottom: 24rpx;


					text {
						color: #333;
						font-size: 26rpx;
					}

					.avatar {
						display: flex;
						align-items: center;

						image {
							width: 90rpx;
							min-width: 90rpx;
							height: 90rpx;
							margin-right: 20rpx;
						}

						text {
							width: 100px;
							word-break: break-all;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							font-size: 24rpx;
							line-height: 33rpx;
							/* 这里是超出几行省略 */
							overflow: hidden;
						}
					}

					&.first {
						margin-bottom: 30rpx;

						text {
							color: #5A697C;
						}
					}

				}
			}
		}
	}
</style>