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