FE_CRM/pages/ordered/ordered.vue

<template>
	<view>
		<uni-card :is-shadow="false" :border="false" padding="0" is-full>
			<uni-search-bar class="search" radius="5" placeholder="请输入产品名称" clearButton="auto" cancelButton="none" v-model="keyword" />
		</uni-card>
		
		<view class="filter">
			<sl-filter :independence="true" :menuList="menuList" @result="result"></sl-filter>
		</view>
		
		<ul class="tab">
			<li v-for="(tab, i) in tabs" :class="{active: curTab === tab.id}" @click="tabChange(tab)">{{ tab.name }}</li>
		</ul>
		
		<ul class="list">
			<li v-for="item in list" @click="toDetail">
				<view class="line thead">
					<view class="text">产品名称</view>
					<view class="text">起止日期</view>
					<view class="text">订阅状态</view>
					<view class="text">产品状态</view>
				</view>
				<view class="line tbody">
					<view class="text">{{ item.productName }}</view>
					<view class="text">{{ item.startAndEndTime }}</view>
					<view class="text uni-success">{{ item.status }}</view>
					<view class="text uni-error">{{ item.isEnable }}</view>
				</view>
			</li>
		</ul>
	</view>
</template>

<script>
	import { getProductsSubscribedByCustomers } from '@/apis/modules/client.js'
	import slFilter from '@/components/sl-filter/sl-filter.vue'
	export default {
		data() {
			return {
				customerId: '',
				menuList: [
				    {
				        'title': '订阅状态',
				        'detailTitle': '请选择订阅状态',
				        'key': 'orderStatus',
				        'isMutiple': false,
				        'detailList': [
				            {
				                'title': '全部',
				                'value': ''
				            },
				            {
				                'title': '生效',
				                'value': 1
				            },
				            {
				                'title': '过期',
				                'value': 2
				            }
				        ]
				    },
				    {
				        'title': '产品状态',
				        'detailTitle': '请选择产品状态',
				        'key': 'productStatus',
				        'isMutiple': false,
				        'detailList': [
				            {
				                'title': '全部',
				                'value': ''
				            },
				            {
				                'title': '启用',
				                'value': 1
				            },
				            {
				                'title': '禁用',
				                'value': 2
				            }
				        ]
				    }
				],
				curTab: '',
				tabs: [
					{
						name: '全部',
						id: ''
					},
					{
						name: '实训课程',
						id: 1
					},
					{
						name: '理论课程',
						id: 0
					},
					{
						name: '数据产品',
						id: 3
					}
				],
				searchTimer: null,
				orderStatus: '',
				productStatus: '',
				keyword: '',
				list: [],
				listAll: [],
				page: 1,
				pageSize: 10
			}
		},
		components: {
			slFilter
		},
		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.getList()
		},
		methods: {
			getList() {
				getProductsSubscribedByCustomers({
					customeId: this.customerId
				}).then(({ data }) => {
					const { tabs } = this
					data.map(e => {
						const list = e.startAndEndTimeList
						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 && 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
									}
								}
							}
						}
						const date = new Date()
						date.setHours(0)
						date.setMinutes(0)
						date.setSeconds(0)
						e.startAndEndTime = e.startTime + ' ~ ' + e.endTime
						// 1开启 0禁用（已过期的订单，或者当前生效的订单为禁用，则显示为禁用，否则是启用）
						e.isEnable = (e.status === '已过期' || !e.orderEnable) ? '禁用' : '启用'
					})
					this.list = data
					this.listAll = data
				}).catch(e => {})
			},
			// 筛选
			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)))
			},
			// 筛选确定回调
			result(val) {
				this.orderStatus = val.orderStatus || ''
				this.productStatus = val.productStatus || ''
				this.filter()
			},
			// 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;
}
.list {
	background-color: #fff;
	li {
		padding: 20px;
		border-bottom: 2px solid #f8f8f8;
	}
	.line {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
	}
	.text {
		width: 30%;
		font-size: 14px;
		&:first-child {
			margin-right: 10px;
		}
		&:nth-child(3), &:last-child {
			width: 20%;
			text-align: center;
		}
	}
	.thead {
		.text {
			color: #767676;
		}
	}
}
</style>