FE_occupationlab_miniProgram/course/ordered/ordered.vue

<template>
	<view>
		<view class="filter">
			<uni-search-bar class="search" radius="30" placeholder="请输入产品名称" v-model="keyword" clearButton="auto" cancelButton="none" />
			<uni-icons class="icon" custom-prefix="iconfont" type="icon-filter" size="22" color="#007eff" @click="popup = true"></uni-icons>
		</view>
		
		<ul class="tab-wrap">
			<scroll-view scroll-x :scroll-left="scrollLeft" class="tab">
				<li v-for="(tab, i) in tabs" :class="{active: curTab === tab.id}" @click="tabChange(tab)">{{ tab.name }}</li>
			</scroll-view>
		</ul>
		
		<ul v-if="list.length" class="list">
			<li v-for="item in list">
				<view class="pro-name">
					<image class="icon" :src="item.miniProgramPictureAddress ? item.miniProgramPictureAddress : normalIcon" mode="widthFix"></image>
					{{ item.productName }}
				</view>
				<view class="info">
					<view class="line">
						<text class="name">起止日期：</text>
						<text class="val">{{ item.startAndEndTime }}</text>
					</view>
					<view class="line">
						<text class="name">订阅状态：</text>
						<text class="val">{{ item.status }}</text>
					</view>
					<view class="line">
						<text class="name">产品状态：</text>
						<text class="val">{{ item.isEnable }}</text>
					</view>
				</view>
			</li>
		</ul>
		<empty v-else></empty>
		<filter-popup :data="filterData" :form.sync="filterForm" v-model="popup" title="全部筛选" height="1104rpx" @finsh="subFinsh"></filter-popup>
	</view>
</template>

<script>
	import { productCategoryList } from '@/apis/modules/product.js'
	import { getProductsSubscribedByCustomers } from '@/apis/modules/client.js'
	import product from '@/config/product.js'
	export default {
		data() {
			return {
				normalIcon: product.normalIcon,
				customerId: '',
				popup: false,
				//筛选表单数据
				filterData: [
					{
						children: false,//是否有子项
						title: "订阅状态",
						key: "orderStatus", //键名 接收对象名字
						keyValue: "value", //获取的值是哪个
						isRadio: true, //是否单选 否则多选
						data: [
							{
								title: '生效',
								value: 1
							},
							{
								title: '过期',
								value: 2
							},
						],
					},
					{
						children: false,//是否有子项
						title: "产品状态",
						key: "productStatus", //键名 接收对象名字
						keyValue: "value", //获取的值是哪个
						isRadio: true, //是否单选 否则多选
						data: [
							{
								title: '启用',
								value: 1
							},
							{
								title: '禁用',
								value: 2
							},
						],
					}
				],
				filterForm: {},
				curTab: '',
				tabs: [
					{
						name: '全部',
						id: ''
					},
				],
				searchTimer: null,
				orderStatus: '',
				productStatus: '',
				keyword: '',
				list: [],
				listAll: [],
				page: 1,
				pageSize: 10
			}
		},
		watch: {
			keyword () {
				clearTimeout(this.searchTimer)
				this.searchTimer = setTimeout(() => {
					this.filter()
				}, 500)
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1500)
		},
		onShow() {
			const pages = getCurrentPages()
			this.customerId = pages[pages.length - 1].options.customerId
			this.getTypes()
			this.getList()
		},
		methods: {
			getList() {
				uni.showLoading({
					title: '加载中'
				})
				getProductsSubscribedByCustomers({
					customeId: this.customerId
				}).then(({ data }) => {
					const { tabs } = this
					data.map(e => {
						const list = e.startAndEndTimeList
						if (list && list.length) {
							let connect = true // 每个订单的开始结束日期是否连续
							list.map((n, i) => {
								// 第一个不用计算。用当前订单的开始日期跟上一个订单的结束日期做比较，只差一天，就表示是连续订单
								if (i) {
									if (new Date(n.startTime).getTime() - 86400000 !== new Date(list[i - 1].endTime).getTime()) connect = false
								}
							})
							// // 如果是连续订单，则取第一个订单的开始日期和最后一个订单的结束日期
							const now = Date.now()
							if (now < list[0].startTime) {
								e.startTime = list[0].startTime
								e.endTime = connect ? list[list.length - 1].endTime : list[0].endTime
								e.status = '未生效'
							} else if (now > list[list.length - 1].endTime) {
								e.status = '已过期'
							} else {
								// 连续订单
								if (connect) {
									e.startTime = list[0].startTime
									e.endTime = list[list.length - 1].endTime
									e.status = '生效中'
									e.orderEnable = list[0].isEnable
								} else {
									for (const i in list) {
										const n = list[i]
										if (now >= new Date(n.startTime).getTime() && now <= new Date(n.endTime).getTime()) {
											// 生效中的订单，直接取该订单的开始结束日期
											e.startTime = n.startTime
											e.endTime = n.endTime
											e.status = '生效中'
											e.orderEnable = n.isEnable
											break
										} else if (i && list[i - 1] && now > new Date(list[i - 1].endTime).getTime() && now < new Date(n.startTime).getTime()) {
											// 当前时间位于两个订单时间之间，则取次订单的开始结束日期，并且为未生效
											e.startTime = n.startTime
											e.endTime = n.endTime
											e.status = '未生效'
											e.orderEnable = n.isEnable
											break
										} else {
											e.status = '已过期'
										}
									}
								}
							}
							const date = new Date()
							date.setHours(0)
							date.setMinutes(0)
							date.setSeconds(0)
							if (e.startTime) e.startAndEndTime = e.startTime + ' ~ ' + e.endTime
							// 1开启 0禁用（已过期的订单，或者当前生效的订单为禁用，则显示为禁用，否则是启用）
							e.isEnable = (e.status === '已过期' || !e.orderEnable) ? '禁用' : '启用'
						}
					})
					this.list = data
					this.listAll = data
					uni.hideLoading()
				}).catch(e => {
					uni.hideLoading()
				})
			},
			// 产品分类
			getTypes() {
				productCategoryList().then(res => {
					res.classificationList.forEach(e => {
						e.id = e.classificationId
						e.name = e.classificationName
					})
					this.tabs.push(...res.classificationList)
				}).catch(e => {})
			},
			// 筛选确定回调
			subFinsh(val) {
				const { orderStatus, productStatus } = val
				this.orderStatus = orderStatus.length ? orderStatus[0] : ''
				this.productStatus = productStatus.length ? productStatus[0] : ''
				this.filter()
			},
			// 筛选
			filter() {
				const list = this.listAll
				const { orderStatus, productStatus, keyword, curTab } = this
				this.list = list.filter(e => (orderStatus === '' || ((orderStatus === 2 && e.status === '已过期') || (orderStatus === 1 && e.status === '生效中'))) && (productStatus === '' || ((productStatus === 2 && e.isEnable === '禁用') || (productStatus === 1 && e.isEnable === '启用'))) && e.productName.includes(keyword) && (curTab === '' || (curTab === e.productType)))
			},
			// tab切换
			tabChange(tab) {
				this.curTab = tab.id
				this.filter()
			},
			// 跳转详情
			toDetail(item) {
				this.$util.to(`../clientDetail/clientDetail?customerId=${item.customerId}&show=1`)
			}
		}
	}
</script>

<style scoped lang="scss">
.filter {
	margin-bottom: 10px;
}
.tab-wrap {
	.tab {
		width: 100%;
		white-space: nowrap;
		li {
			display: inline-block;
		}
	}
}
.list {
	li {
		padding: 0 24rpx;
		margin: 16rpx 24rpx;
		background-color: #fff;
		border-radius: 16rpx;
	}
	.pro-name {
		display: flex;
		align-items: center;
		padding: 18rpx 0;
		font-size: 30rpx;
		color: #333;
		border-bottom: 1px solid #E6E8ED;
		.icon {
			width: 52rpx;
			margin-right: 20rpx;
		}
	}
	.info {
		padding: 12rpx 0;
	}
	.line {
		display: flex;
		padding: 12rpx 0;
	}
	.name {
		margin-right: 10rpx;
		font-size: 28rpx;
		color: #999;
	}
	.val {
		font-size: 28rpx;
		color: #333;
	}
}
</style>