h5-elab-open-ownerUnion/components/subComponents/dmHexiaoScreenPicker.vue

<template>
	<dm-pop-view ref="popView" title="更多筛选" :isShowConfirm="false" :maskTapHide='true'>
		<scroll-view class="screen_container" scroll-y="true">
			<view class="screen-items" v-for="(item, idx) in dataList" :key="idx">
				<block v-if="!(idx == 1 && screenValue == 1)">
					<view class="screen_item_title">{{item.title}}</view>
					<view class="level_tag_view">
						<text class="level_tag" :style="{ color: item1.isSelect ? '#fff' : '#666', 'background-color': item1.isSelect ? themeColor : '#F1F5F9' }"
						 v-for="(item1, idx1) in item.subList" :key="idx1" @click="selectAction(item1, idx)">
							{{item1.title}}
						</text>
					</view>
				</block>
			</view>
		</scroll-view>

		<view class="bottom_btn">
			<text class="reset_btn" :style="`background-color: ${themeColor25};`" @click="resetAction">重置</text>
			<text class="pop_btn" :style="`background-color: ${themeColor};`" @click="sureAction">确定</text>
		</view>

	</dm-pop-view>
</template>

<script>
	import dmPopView from './dmPopView.vue';
	let app = getApp()

	export default {
		props: {
			screenValue: {
				type: [String, Number],
				default: 0
			},
			houseId: {
				type: [String, Number],
				default: ''
			},
			isSingleProject: {
				type: Boolean,
				default: false
			},
			isBrand: Boolean,
			defaultParameter: Object
		},
		data() {
			return {
				themeColor: null,
				fuzhuColor: null,
				themeColor50: null,
				themeColor25: null,
				fuzhuColor50: null,
				dataList: [],
				brandId: ''
			}
		},
		mounted() {
			this.themeColor = app.globalData.themeColor
			this.themeColor50 = app.globalData.themeColor50
			this.themeColor25 = app.globalData.themeColor25
			this.fuzhuColor = app.globalData.fuzhuColor
			this.fuzhuColor50 = app.globalData.fuzhuColor50
			let that = this;
			uni.getStorage({
				//获得保存在本地的用户信息
				key: 'userInfo',
				success: res => {
					if (res.data) {
						//有数据，已登录
						that.brandId = res.data.brandId;
						that.reloadDatahandle()
					}
				}
			});
		},
		methods: {
			async dataHandle() {
				if (!this.isSingleProject) {
					return
				}
				var houseIds = []
				if (this.houseId != '' && this.houseId != null) {
					houseIds = [this.houseId]
				}
				var self = this
				let res = await this.$myRequest({
					url: '/elab-marketing-user/activity_ticket_record/get_ticket_activity',
					data: {
						brandId: self.brandId,
						isBrand: self.isBrand,
						dateType: self.defaultParameter.dateType,
						maxDate: self.defaultParameter.endDate,
						minDate: self.defaultParameter.startDate,
						houseIds: houseIds,
						type: self.screenValue + 1
					}
				})
				if (res.data.success) {
					var tempList = [{
						title: '全部',
						isSelect: true,
						id: 0
					}]
					res.data.list.forEach((item, idx) => {
						var data = {
							title: item.activityName,
							isSelect: false,
							id: item.activityId
						}
						tempList.push(data)
					})
					this.dataList[3].subList = tempList
					this.dataList.forEach((item, idx) => {
						item.subList.forEach((item1, idx1) => {
							if (item1.hasOwnProperty('idx')) {
								item1.idx = idx1
							} else {
								item1['idx'] = idx1
							}
						})
					})
				}
			},
			
			async getActiveTypeDatahandle() {
				if (!this.isSingleProject) {
					return
				}
				var houseIds = []
				if (this.houseId != '' && this.houseId != null) {
					houseIds = [this.houseId]
				}
				var self = this
				let res = await this.$myRequest({
					url: '/elab-marketing-user/activity_ticket_record/get_ticket_activity_type',
					data: {
						brandId: self.brandId,
						isBrand: self.isBrand,
						dateType: self.defaultParameter.dateType,
						maxDate: self.defaultParameter.endDate,
						minDate: self.defaultParameter.startDate,
						houseIds: houseIds,
						type: self.screenValue + 1
					}
				})
				if (res.data.success) {
					var tempList = [{
						title: '全部',
						isSelect: true,
						id: 0
					}]
					res.data.list.forEach((item, idx) => {
						var data = {
							title: item.activityTypeName,
							isSelect: false,
							id: item.activityType
						}
						tempList.push(data)
					})
					this.dataList[2].subList = tempList
					this.dataList.forEach((item, idx) => {
						item.subList.forEach((item1, idx1) => {
							if (item1.hasOwnProperty('idx')) {
								item1.idx = idx1
							} else {
								item1['idx'] = idx1
							}
						})
					})
				}
			},
				
			show() {
				this.$refs.popView.show()
			},
			reloadDataList() {
				this.dataList = [{
						title: '排序',
						subList: [{
								title: '获券时间倒序',
								isSelect: true,
								id: 0
							},
							{
								title: '获券时间正序',
								isSelect: false,
								id: 1
							}
						]
					},
					{
						title: '奖券状态',
						subList: [{
								title: '全部',
								isSelect: true,
								id: 0
							},
							{
								title: '可使用',
								isSelect: false,
								id: 1
							},
							{
								title: '已使用',
								isSelect: false,
								id: 2
							},
							{
								title: '已过期',
								isSelect: false,
								id: 3
							}
						]
					},
					{
						title: '活动类型',
						subList: []
					},
					{
						title: '活动名称',
						subList: []
					}
				]

				this.dataList.forEach((item, idx) => {
					item.subList.forEach((item1, idx1) => {
						if (item1.hasOwnProperty('idx')) {
							item1.idx = idx1
						} else {
							item1['idx'] = idx1
						}
					})
				})

			},
			selectAction(e, index) {
				this.dataList.forEach((item, idx) => {
					if (index == idx) {
						if (index > 1) {
							var isHave = false
							if (e.id != 0) {
								item.subList.forEach((item1, idx1) => {
									if (item1.idx == 0) {
										item1.isSelect = false
									}
									if (item1.idx == e.idx) {
										item1.isSelect = !item1.isSelect
									}
									if (item1.isSelect) {
										isHave = true
									}
								})
								if (!isHave) {
									item.subList[0].isSelect = true
								}
							} else {
								item.subList.forEach((item1, idx1) => {
									item1.isSelect = false
									if (item1.idx == 0) {
										item1.isSelect = true
									}
								})
							}
						} else {
							item.subList.forEach((item1, idx1) => {
								item1.isSelect = item1.idx == e.idx ? true : false
							})
						}
					}
				})
			},
			sureAction() {
				this.$emit('selectScreenAction', this.dataList)
				this.$refs.popView.hide()
			},
			resetAction() {
				this.dataList.forEach((item, idx) => {
					item.subList.forEach((item1, idx1) => {
						item1.isSelect = idx1 == 0 ? true: false
					})
				})
				this.$emit('selectScreenAction', this.dataList)
				this.$refs.popView.hide()
			},
			reloadDatahandle() {
				this.reloadDataList()
				this.dataHandle()
				this.getActiveTypeDatahandle()
				// var self = this
				// Promise.all([
				// 	self.dataHandle(),
				// 	self.getActiveTypeDatahandle(),
				// ]).then(res => {
				// 	if (res && res.length == 2) {
				// 		self.reloadDataList()
				// 	}
				// })
			}
		},
		components: {
			dmPopView
		},
		watch: {
			screenValue: {
				handler(e) {
					this.reloadDatahandle()
				},
				immediate: true
			},
			houseId: {
				handler(e) {
					this.reloadDatahandle()
				},
				immediate: true
			},
			isSingleProject: {
				handler(e) {
					if (e) {
						this.reloadDatahandle()
					}
				},
				immediate: true
			},
			defaultParameter: {
				handler(e) {
					this.reloadDatahandle()
				},
				deep: true,
				immediate: true
			}
		}
	}
</script>

<style scoped lang="scss">
	.screen_container {
		position: relative;
		margin-bottom: 190rpx;
		width: 750rpx;
		max-height: 1000rpx;

		.screen_item_title {
			margin-left: 30rpx;
			margin-top: 54rpx;
			line-height: 44rpx;
			font-size: 32rpx;
			font-family: Verdana, Verdana-Bold;
			font-weight: 700;
			text-align: left;
			color: #454545;
		}

		.level_tag_view {
			margin-left: 30rpx;
			margin-top: 0rpx;
			display: flex;
			flex-wrap: wrap;
			align-content: center;
			align-items: center;

			.level_tag {
				padding: 0 26rpx;
				box-sizing: border-box;
				margin-right: 16rpx;
				min-width: 220rpx;
				height: 72rpx;
				border-radius: 12rpx;
				margin-top: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.level_tag_title {
					font-size: 28rpx;
					font-family: Verdana, Verdana-Regular;
					font-weight: 400;
					text-align: center;
				}

				.level_tag_subTitle {
					margin-top: -5rpx;
					font-size: 20rpx;
					font-family: Verdana, Verdana-Regular;
					font-weight: 400;
					text-align: center;
				}
			}
		}
	}

	// .bottom_btn {
	// 	display: flex;
	// 	justify-content: center;
	// 	position: fixed;
	// 	width: 100%;
	// 	left: 0;
	// 	bottom: 60rpx;

	// 	.text {
	// 		width: 260rpx;
	// 		height: 84rpx;
	// 		border-radius: 42rpx;
	// 		line-height: 84rpx;
	// 		font-size: 32rpx;
	// 		font-family: Verdana, Verdana-Regular;
	// 		font-weight: 400;
	// 		text-align: center;
	// 		color: #ffffff;
	// 	}
	// }

	.bottom_btn {
		display: flex;
		justify-content: center;
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 60rpx;

		.reset_btn {
			width: 156rpx;
			height: 80rpx;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: Verdana, Verdana-Bold;
			font-weight: 700;
			text-align: center;
			line-height: 80rpx;
			color: #666666;
		}

		.pop_btn {
			margin-left: 30rpx;
			width: 444rpx;
			height: 80rpx;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: Verdana, Verdana-Bold;
			font-weight: 700;
			text-align: center;
			line-height: 80rpx;
			color: #ffffff;
		}
	}
</style>