<template>
<dm-pop-view ref='popView' :isShowConfirm="false" :title="title" :maskTapHide='maskTapHide' :isScannerOption="true" @close="onClose">
<view class="content_options">
<div class="options_title">
<text>时间</text>
<text class="options_time" v-if="beginDate">
<text>{{beginDate | visitTimeFilter}}</text>
<text v-if="endDate">-</text>
<text v-if="endDate">{{endDate | visitTimeFilter}}</text>
</text>
</div>
<view class="list-items">
<text v-for="(item,index) in timeOptions" class="itemB" :style="{background: (currentTime==index)? themeColor:'#F1F5F9',color: (currentTime==index)? '#ffffff':'#333333'}"
@click="selectTime(item,index)">{{item.name}}</text>
</view>
<text class="options_title">排序</text>
<view class="list-items">
<text v-for="(item,index) in sortTypes" class="itemB" :style="{background: (currentSortType==index)? themeColor:'#F1F5F9',color: (currentSortType==index)? '#ffffff':'#333333'}"
@click="selectsortTypeAction(item,index)">{{item.name}}</text>
</view>
<text class="options_title">活动列表</text>
<view class="list-items">
<text v-for="(item,index) in huodongList" class="itemA" :style="{background: (currentHuodong==index)? themeColor:'#F1F5F9',color: (currentHuodong==index)? '#ffffff':'#333333'}"
@click="selectHuodong(item,index)">{{item.titleActivity}}</text>
</view>
<view class="bottomBtn">
<view class="resetBtn" :style="`background-color: ${themeColor25};`" @click="resetAction">重置</view>
<view class="sureBtn" :style="`background-color: ${themeColor};`" @click="handleConfirm">确定</view>
</view>
</view>
<dm-calendar-picker-view ref='calendarPickerView' @confirmSelDate='confirmSelDate'></dm-calendar-picker-view>
</dm-pop-view>
</template>
<script>
import dmPopView from './dmPopView.vue'
import dmCalendarPickerView from './dmCalendarPickerView.vue'
import {
displayDateFormat
} from '../../static/format.js'
export default {
props: {
huodongList: {
type: Array,
default: () => {
return []
}
},
title: {
type: String,
default: '请选择'
},
maskTapHide: {
type: Boolean,
default: true
},
},
data() {
return {
themeColor: "",
fuzhuClolor: "",
themeColor25: "",
themeColor50: "",
currentHuodong: -1,
selectedItem: null,
timeOptions: [{
name: "今天",
value: "1"
},
{
name: "近一周",
value: "2"
},
{
name: "近一月",
value: "3"
},
{
name: "自定义",
value: "4"
}
],
sortTypes: [{
name: "按获券时间倒序",
value: "1"
},
{
name: "按获券时间正序",
value: "2"
},
{
name: "按核销时间倒序",
value: "3"
},
{
name: "按核销时间正序",
value: "4"
}
],
currentTime: -1,
selectedTime: "",
currentSortType: -1,
selectedSortType: "",
beginDate: '',
endDate: ''
}
},
mounted() {
let app = getApp();
this.themeColor = app.globalData.themeColor;
this.fuzhuClolor = app.globalData.fuzhuColor;
this.themeColor25 = app.globalData.themeColor25;
this.themeColor50 = app.globalData.themeColor50;
},
methods: {
onClose(){
this.$emit("close")
},
show() {
this.$refs.popView.show()
},
handleConfirm() {
this.$emit('confirm', {
"id": this.selectedItem && this.selectedItem.id || '',
"timeRange": this.selectedTime,
"sortType": this.selectedSortType,
"startTime": this.selectedTime == 4 ? this.beginDate : '',
"endTime": this.selectedTime == 4 ? this.endDate : ''
})
this.$refs.popView.hide();
this.$emit("close")
},
resetAction() {
this.currentHuodong = -1
this.selectedItem = null
this.currentTime = -1
this.selectedTime = ''
this.currentSortType = -1
this.selectedSortType = ''
this.beginDate = null
this.endDate = null
this.$forceUpdate()
},
selectHuodong(item, index) {
this.currentHuodong = index
this.selectedItem = item
},
selectTime(item, index) {
this.currentTime = index
this.selectedTime = item.value
if (index == 3) {
this.$refs.calendarPickerView.show()
}
else {
this.displayDate(index)
}
},
selectsortTypeAction(item, index) {
this.currentSortType = index
this.selectedSortType = item.value
},
confirmSelDate(e) {
this.beginDate = e.startDate
this.endDate = e.endDate
},
displayDate(dateType) {
let curDate = (new Date()).getTime();
this.beginDate = null
this.endDate = null
if (dateType == 0) {
this.beginDate = curDate
} else if (dateType == 1) {
this.endDate = curDate
this.beginDate = this.getBeginDate(6)
} else if (dateType == 2) {
this.endDate = curDate
this.beginDate = this.getBeginDate(29)
}
else if (dateType == 3) {
this.beginDate = this.stringToStamp(this.defaultParameter.startDate)
this.endDate = this.stringToStamp(this.defaultParameter.endDate)
}
},
getBeginDate(days) {
let curDate = (new Date()).getTime();
let beginDay = curDate - days * 24 * 60 * 60 * 1000
return beginDay
},
stringToStamp(val) {
var timeStr = val.replace('-', '/') + ' ' + '00:00:00'
var stamp = new Date(timeStr).getTime()
return stamp
}
},
components: {
dmPopView,
dmCalendarPickerView
},
filters: {
visitTimeFilter(val) {
return displayDateFormat(val)
},
}
}
</script>
<style scoped lang="scss">
.content_options {
width: 100%;
// display: flex;
height: 800rpx;
margin-bottom: 180rpx;
// flex-direction: column;
overflow-y: scroll;
overflow-x: hidden;
position: relative;
.options_title {
font-size: 32rpx;
font-family: Verdana, Verdana-Bold;
font-weight: 700;
text-align: left;
color: #454545;
margin-left: 30rpx;
margin-right: 15px;
margin-top: 54rpx;
margin-bottom: 20rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
.options_time {
color: #666666;
font-size: 24rpx;
font-family: Verdana;
font-weight: 400;
}
}
.huodong {
width: 146rpx;
height: 56rpx;
border-radius: 8rpx;
}
.list-items {
// margin-top: 20rpx;
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
// margin-bottom: 40rpx;
padding-left: 24rpx;
padding-right: 4rpx;
.item {
border-radius: 12rpx;
width: 220rpx;
height: 72rpx;
text-align: center;
margin-right: 20rpx;
margin-bottom: 20rpx;
line-height: 72rpx;
font-size: 28rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.itemA {
border-radius: 12rpx;
width: 700rpx;
height: 72rpx;
padding-left: 20rpx;
box-sizing: border-box;
text-align: left;
margin-right: 20rpx;
margin-bottom: 20rpx;
line-height: 72rpx;
font-size: 28rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.itemB {
border-radius: 12rpx;
width: 340rpx;
height: 72rpx;
padding-left: 20rpx;
box-sizing: border-box;
text-align: center;
margin-right: 20rpx;
margin-bottom: 20rpx;
line-height: 72rpx;
font-size: 28rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.bottomBtn {
position: fixed;
bottom: 0;
left: 0;
height: 180rpx;
width: 100%;
// background-color: rgba($color: #000000, $alpha: 0.1);
background-color: #FFFFFF;
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 28rpx;
font-family: Verdana;
text-align: center;
padding: 40rpx 60rpx 60rpx 60rpx;
box-sizing: border-box;
.resetBtn {
width: 156rpx;
height: 80rpx;
color: #666666;
line-height: 80rpx;
border-radius: 40rpx;
}
.sureBtn {
width: 444rpx;
height: 80rpx;
color: #fff;
line-height: 80rpx;
border-radius: 40rpx;
}
}
}
</style>