ErectionPlatform/pagesUser/pages/ToBeReviewed/ToBeReviewed.vue

<template>
	<BasicContainer :option="option">
		<template #body>
			<view class="main">
				<view class="tabbar flex">
					<view :class="{'tabbar_item': true, 'flex-c-c': true, 'flex1': true, active: details.tabbarCode === 0}"
						@click="()=> handleClickTabbar(0)">
						安 装
					</view>

					<view :class="{'tabbar_item': true, 'flex-c-c': true, 'flex1': true, active: details.tabbarCode === 1}"
						@click="()=> handleClickTabbar(1)">
						售 后
					</view>

					<view class="tabbar_active flex-c-c" :style="`transform: translateX(${details.tabbarCode * 100 +'%'})`">
						<view class="line">

						</view>
					</view>
				</view>

				<view class="flex-c-sa search_row">
					<!-- 大区 -->
					<view class="flex1 flex-c-c" @click="() => handleShowChooseTime('year')">
						<text class="mr10">
							大区
						</text>
						<u-icon name="arrow-down-fill" color="#000" size="20"></u-icon>
					</view>

					<!-- 时间 -->
					<!-- <view class="flex1 flex-c-c" @click="() => handleShowChooseTime('month')">
						<text class="mr10">
							{{ details.time.year + '.' + details.time.month }}
						</text>
						<u-icon name="arrow-down-fill" color="#000" size="20"></u-icon>
					</view> -->

					<!-- 项目组 -->
					<view class="flex1 flex-c-c" @click="() => handleShowChooseTime('year')">
						<text class="mr10">
							项目组
						</text>
						<u-icon name="arrow-down-fill" color="#000" size="20"></u-icon>
					</view>

					<!-- 名称 -->
					<view class="flex1 flex-c-c" @click="() => handleShowChooseTime('year')">
						<text class="mr10">
							名称
						</text>
						<u-icon name="arrow-down-fill" color="#000" size="20"></u-icon>
					</view>

					<!-- 筛选 -->
					<view class="flex1 flex-c-c" @click="()=> handleShowMoreSearch(true)">
						<text class="mr10">
							筛选
						</text>
						<u-icon name="arrow-down-fill" color="#000" size="20"></u-icon>
					</view>

				</view>

				<scroll-view class="scvmabx" :style="{height: details.scrollheight}" @scrolltolower="()=>{}" scroll-y="true"
					@touchmove.stop>

					<view class="list_container">
						<!-- 工人 -->
						<block v-for="(item, index) in details.renderData" :key="item.id">
							<template v-if="details.tabbarCode === 0">
								<view :class="{'box': true, first: false, second: true, third: false}"
									@click="()=> handleGoDetails(item)">
									<view class="title flex-c-sb">
										<view class="">预计<text>{{item.estimated_finish_time}}</text>完成</view>

										<view class="tip">{{item.status_map}}</view>
									</view>

									<view class="info">
										<view class="">客户联系人：{{item.name}}</view>

										<view class="mt20">指派人：{{item.work_users}}</view>

										<view class="mt20">安装单号：{{item.no}}</view>

										<view class="mt20 flex-c-sb">
											<text>
												任务类型：{{item.typeName}}
											</text>

											<text>
												状态：{{item.statusName}}
											</text>
										</view>
									</view>
								</view>
							</template>
						</block>

					</view>
				</scroll-view>
			</view>

		</template>


	</BasicContainer>

	<!-- 蒙层 -->
	<view :class="details.maskClassName">
		<view class="mask_container">
			<view class="flex-c-sa search_row">
				<!-- 大区 -->
				<view class="flex1 flex-c-c" @click="() => handleShowChooseTime('year')">
					<text class="mr10">
						大区
					</text>
					<u-icon name="arrow-down-fill" color="#000" size="20"></u-icon>
				</view>

				<!-- 时间 -->
				<!-- <view class="flex1 flex-c-c" @click="() => handleShowChooseTime('month')">
					<text class="mr10">
						{{ details.time.year + '.' + details.time.month }}
					</text>
					<u-icon name="arrow-down-fill" color="#000" size="20"></u-icon>
				</view> -->

				<!-- 项目组 -->
				<view class="flex1 flex-c-c" @click="() => handleShowChooseTime('year')">
					<text class="mr10">
						项目组
					</text>
					<u-icon name="arrow-down-fill" color="#000" size="20"></u-icon>
				</view>

				<!-- 名称 -->
				<view class="flex1 flex-c-c" @click="() => handleShowChooseTime('year')">
					<text class="mr10">
						名称
					</text>
					<u-icon name="arrow-down-fill" color="#000" size="20"></u-icon>
				</view>

				<!-- 筛选 -->
				<view class="flex1 flex-c-c" @click="()=> handleShowMoreSearch(false)">
					<text class="mr10">
						筛选
					</text>
					<u-icon name="arrow-up-fill" color="#000" size="20"></u-icon>
				</view>

			</view>


			<view class="mask_row flex-c-sb">
				<view class="">
					城市
				</view>

				<view class="flex">
					<view class="flex-c-c mr20" @click="() => handleShowChooseTime('year')">
						<text class="mr10">
							省份
						</text>
						<u-icon name="arrow-down-fill" color="#000" size="20"></u-icon>
					</view>

					<view class="flex1 flex-c-c" @click="() => handleShowChooseTime('year')">
						<text class="mr10">
							市
						</text>
						<u-icon name="arrow-down-fill" color="#000" size="20"></u-icon>
					</view>
				</view>
			</view>

			<view class="mask_row flex-c-sb">
				<view class="">
					类型
				</view>

				<view class="flex-c-c" @click="() => handleShowChooseTime('year')">
					<text class="mr10">
						省份
					</text>
					<u-icon name="arrow-down-fill" color="#000" size="20"></u-icon>
				</view>
			</view>

			<view class="mask_row flex-c-sb">
				<view class="">
					装态
				</view>

				<view class="flex-c-c" @click="() => handleShowChooseTime('year')">
					<text class="mr10">
						省份
					</text>
					<u-icon name="arrow-down-fill" color="#000" size="20"></u-icon>
				</view>
			</view>

			<view class="flex button_row">
				<view class="flex-c-c mr20" @click="()=>handleShowMoreSearch(false)">
					关 闭
				</view>

				<view class="flex-c-c subBtn">
					确 认
				</view>
			</view>
		</view>
	</view>

	<MyDrawer ref="myDrawerByTime">
		<template #content>
			<picker-view v-if="details.visible" :indicator-style="details.indicatorStyle" :immediate-change="true"
				:value="details.value" @change="bindChangeByTime" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item, index) in details.years" :key="index">
						{{ item }}
					</view>
				</picker-view-column>

				<picker-view-column>
					<view class="item" v-for="(item, index) in details.months" :key="index">
						{{ item }}
					</view>
				</picker-view-column>
			</picker-view>
		</template>
	</MyDrawer>
</template>

<script lang="ts" setup>
	import { onLoad, onShow, onHide, onUnload, onPullDownRefresh } from '@dcloudio/uni-app'

	// import Tabber from '@/compoment/Tabber/Tabber.vue'
	import { nextTick, ref, reactive } from 'vue'
	import utils from '@/utils/utils'
	import { getMasterTaskList, getCenterInstallSalesTaskList, getCneterInstallTaskList } from '@/api/user.js'

	// 组件实例
	const tip = ref(null)
	const calendar = ref()
	const myDrawerByTime = ref()

	const option = reactive({
		// 标题
		title: '待审核',
		// 下拉刷新回调函数
		async pullDownRefreshInitPage() {

			return null
		},
		// 触底加载回到函数
		reachBottomInitPage: async () => { return null },
		haveData: true,
		isEnd: false,
		pageLoading: true
	})

	const details = reactive({
		/** 列表容器高度 */
		scrollheight: '60vh',
		/** picker被选中的索引位置 */
		value: [3],
		/** picker行高度 */
		indicatorStyle: `height: 40px;`,
		/** 年 */
		years: [],
		/** 月 */
		months: [],
		/** 当前picker使用的数组 */
		pickerArr: [],
		/** 当前时间 */
		time: {
			year: '',
			month: '',
		},
		visible: false,
		pageType: 2,
		/** 渲染数据 */
		renderData: [],
		/** 输入框搜索的值 */
		searchText: '',
		/** 蒙层类名 */
		maskClassName: {
			mask: true,
			show: false,
			done: false
		},
		tabbarCode: 0,
		/** 类型 */
		typeArr: [
			{ label: '安装单', value: '0' },
			{ label: '合同安装单', value: '1' },
			{ label: '转安装单', value: '2' },
			{ label: '维修', value: '3' },
		],
		/** 状态 */
		statusArr: [
			{ label: '待报价', value: '1' },
			{ label: '待指派', value: '2' },
			{ label: '已指派', value: '3' },
			{ label: '服务中', value: '4' },
			{ label: '已完成', value: '5' },
			{ label: '验收', value: '6' },
			{ label: '已完结', value: '7' },
			{ label: '已关闭', value: '8' },
		],
	})

	onShow(async () => {
		if (details.maskClassName.done) details.maskClassName.done = false
		await nextTick()
		details.scrollheight = await utils.getViewDistanceFormTop('.scvmabx')
	})
	onLoad(() => {
	})

	// 初始化设置时间
	const initTime = () => {
		// 获取当前时间
		const now = new Date()
		// 获取当前年份
		const year = now.getFullYear()

		for (let index = 1990; index <= year + 1; index++) {
			details.years.push(index + '')
		}

		// 获取当前月份
		const month = now.getMonth() + 1
		for (let index = 1; index <= 12; index++) {
			details.months.push(index < 10 ? '0' + index : index + '')
		}

		// 设置默认时间
		details.time.year = year + ''
		details.time.month = month < 10 ? '0' + month : '' + month
	}

	initTime()

	/** 去详情 */
	const handleGoDetails = () => {
		const jupPatch =
			details.tabbarCode === 1
				? // 任务详情
				'/pagesHome/pages/taskDetails/taskDetails'
				: // 异常详情
				'/pagesHome/pages/afterSalesDetails/afterSalesDetails'

		uni.navigateTo({
			url: jupPatch,
		})
	}

	/** 转译 */
	const translationValue = (key, value) => {
		let _value = {}

		const _arr = details[key + 'Arr']

		for (let i = 0; i < _arr.length; i++) {
			const item = _arr[i]

			if ((value + '') !== item.value) continue
			_value = item
			break
		}

		return _value
	}

	/** 获取安装任务 */
	const handleGetTaskList = async (submitData) => {
		const res = await getCneterInstallTaskList(submitData)

		const { code, data } = res
		if (code !== 200) return
		details.renderData = data || []

		for (let i = 0; i < details.renderData.length; i++) {
			const _value = details.renderData[i]

			const { type, status } = _value

			// if (type)
			// 转译类型
			const _itemType = translationValue('type', type)
			_value.typeName = _itemType.label || '暂无'

			const _itemStatus = translationValue('status', status)
			_value.statusName = _itemStatus.label || '暂无'
		}
	}

	/** 获取下属列表 */
	const handleGetSubordinateList = async (submitData) => {
		const res = await getCenterInstallSalesTaskList(submitData)

		const { code, data } = res
		if (code !== 200) return
		details.renderData = data || []

		for (let i = 0; i < details.renderData.length; i++) {
			const _value = details.renderData[i]

			const { type, status } = _value

			// if (type)
			// 转译类型
			const _itemType = translationValue('type', type)
			_value.typeName = _itemType.label || '暂无'

			const _itemStatus = translationValue('status', status)
			_value.statusName = _itemStatus.label || '暂无'
		}
	}


	/** 获取页面数据 */
	const initPage = async () => {
		try {
			option.pageLoading = true

			details.renderData = []

			const submitData = {
				status: 7,
				month: details.time.year + '-' + details.time.month,
			}

			// const res = await getMasterTaskList(submitData)
			details.tabbarCode === 0 ? await handleGetTaskList(submitData) : await handleGetSubordinateList(submitData)

			// const { code, data } = res
			// if (code !== 200) return
			// details.renderData = data || []
		} catch (err) {
			console.log('err :>> ', err)
			//TODO handle the exception
		} finally {
			option.pageLoading = false
		}
	}

	initPage()

	/** tabbar点击事件 */
	const handleClickTabbar = (code : number) => {
		details.tabbarCode = code
		initPage()
	}

	/** picker切换时执行 -- 时间 */
	const bindChangeByTime = function (e) {
		details.value = e.detail.value
	}

	/** 选择时间 */
	const handleShowChooseTime = (type : 'year' | 'month' | 'day') => {
		details.pickerArr = details[type + 's']

		const _time = details.time[type]

		console.log('details.time.year :>> ', details.time.year);

		const { year, month } = details.time


		for (let i = 0; i < details.years.length; i++) {
			const value = details.years[i]
			if (value !== year) continue
			details.value[0] = i
			break
		}

		for (let i = 0; i < details.months.length; i++) {
			const value = details.months[i]
			if (value !== month) continue
			details.value[1] = i
			break
		}


		details.visible = true

		console.log('details.value  :>> ', details.value);

		myDrawerByTime.value.setDetails({
			showPopUp: true,
			title: '选择时间',
			async success() {
				details.time.year = details.years[details.value[0]]
				details.time.month = details.months[details.value[1]]
				myDrawerByTime.value.details.showPopUp = false
				initPage()
				await nextTick()
				details.visible = false
			},
			async close() {
				myDrawerByTime.value.details.showPopUp = false

				await nextTick()
				details.visible = false
			}
		})
	}

	/** 显示更多筛选搜索条件 */
	const handleShowMoreSearch = (_flag : boolean) => {
		if (_flag) {
			details.maskClassName.show = true
			details.maskClassName.done = false
		}
		else {
			details.maskClassName.show = false
			details.maskClassName.done = true
		}
	}
</script>

<style lang="scss" scoped>
	@import url('@/utils/style/common.scss');

	.header_title {
		background-color: var(--subjectColor);
		color: #fff;
		height: 100upx;
	}

	// tabbar
	.tabbar {
		height: 100upx;
		background-color: #fff;
		position: relative;
		$tabbarTime: 0.3s;
		font-size: 1rem;

		.tabbar_item {
			font-weight: bold;
			color: #000;
			transition: all $tabbarTime;

			&.active {
				color: var(--subjectColor);
			}
		}

		.tabbar_active {
			height: 8upx;
			position: absolute;
			width: 50%;
			bottom: 0;
			transition: all $tabbarTime;


			&::after {
				content: '';
				display: block;
				width: 2rem;
				height: 100%;
				background-color: var(--subjectColor);
				border-radius: 4upx;
			}
		}
	}

	// 时间行
	.search_row {
		background: #F5F5F6;
		// border-bottom: 2upx solid #eee;

		&>view {
			padding: 20upx 0;
		}
	}

	.main {
		font-size: 0.9rem;
		position: relative;
		// padding: 20upx;

		// 任务列表
		.list_container {
			position: relative;
			color: #000;
			z-index: 10;
			// padding: 20upx;

			// 工人样式
			.box {
				border-radius: 10upx;
				overflow: hidden;
				margin: 20upx;

				&:last-child {
					margin-bottom: 0;
				}

				.title {
					padding: 20upx 20upx;
					background: linear-gradient(90deg, #d8f7f2 0%, #fff 100%);
					font-weight: 600;

					.tip {
						font-weight: normal;
						color: #3ad8bc;
					}
				}

				.info {
					padding: 30upx 20upx;
					background-color: #fff;
					font-size: 0.9rem;
				}

				// 待签收
				&.first {
					.title {
						background: linear-gradient(90deg, #fee8d0 0%, #fff 100%);

						.tip {
							color: var(--subjectColor);
						}
					}
				}

				// 服务中
				&.second {
					.title {
						background: linear-gradient(90deg, #cde7fc 0%, #fff 100%);

						.tip {
							color: var(--primaryColor);
						}
					}
				}

				// 已指派
				&.third {
					.title {
						background: linear-gradient(90deg, #d8f7f2 0%, #fff 100%);

						.tip {
							color: #3ad8bc;
						}
					}
				}
			}
		}
	}

	// picker样式
	.picker-view {
		height: 40vh;

		.item {
			text-align: center;
			line-height: 40px;
		}
	}

	@keyframes ShowMaskAn {
		0% {
			// display: block;
			opacity: 0;
			transform: translateY(-100%);
		}

		40% {
			transform: translateY(5%);
			opacity: 1;
		}

		60% {
			transform: translateY(-5%);
		}

		80% {
			transform: translateY(1%);
		}

		100% {
			// display: block;
			transform: translateY(0%);
		}
	}

	@keyframes DoneMaskAn {
		0% {
			// display: block;
			opacity: 1;
			transform: translateY(0%);
		}

		100% {
			// display: block;
			opacity: 0;
			transform: translateY(-100%);
		}
	}

	// 蒙层
	.mask {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		padding-top: 44px;
		/* #ifdef MP-WEIXIN */
		padding-top: 64px;
		/* #endif */
		background: rgba(0, 0, 0, 0.5);
		font-size: 0.9rem;
		z-index: 10;
		transform: translate(-100%);

		$animationTime: 0.6s;

		&.show {
			animation: ShowMaskAn 1s forwards;
		}

		&.done {
			animation: DoneMaskAn $animationTime forwards;
		}

		.mask_container {
			background-color: #fff;

			// 蒙层行
			.mask_row {
				padding: 20upx 60upx;
				border-bottom: 2upx solid #eee;
			}

			// 按钮行
			.button_row {
				padding: 20upx 60upx;

				&>view {
					height: 80upx;
					flex: 1;
					border-radius: 40upx;
					background-color: #f5f5f6;

					&.subBtn {
						color: #fff;
						background-color: var(--subjectColor);
					}
				}
			}
		}
	}
</style>