<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>