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

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