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

<template>
	<view class="screen_view_dm">
		<view class="screen_container_view">
			<view v-if='!isShowPlatform && !isShowSecondScreen'></view>
			<view class="screen_btn_view" @click="tagAction('left')" v-if='isShowPlatform'>
				<text class="screen_btn_title">{{defaultParameter.terminal | getTerminalName}}</text>
				<image class="screen_btn_icon" src="../../static/icons/icon_drop_black@2x.png" mode=""></image>
			</view>
			<block v-if="midScreenList.length < 4">
				<view class="screen_btn_view" v-if="isShowSecondScreen">
					<view class="subScreen" @click="secondScreenAction">
						<text class="screen_btn_title">{{secondScreenName}}</text>
						<image class="screen_btn_icon" src="../../static/icons/icon_drop_black@2x.png" mode=""></image>
					</view>
				</view>
				<text :class="['screen_list',value==item.value?'screen_list_active':'']" v-if='midScreenList.length && !isEmty'
				 v-for="(item, index) in midScreenList" :key="item.value" :style="{'color':value==item.value?themeColor:'#666666'}"
				 @click="selectTab(item)">
					{{item.title}}
				</text>
			</block>
			<block v-else>
				<view class="screen_more" @click="showMidScreenPicker">
					<view class="screen_more_text">{{screenShowName}}</view>
					<image class="screen_more_icon" src="../../static/icons/icon_drop_black@2x.png" mode=""></image>
				</view>
			</block>
			<view class="screen_btn_view" @click="tagAction('right')">
				<text class="screen_btn_title">{{defaultParameter.dateType | getTimeName}}</text>
				<image class="screen_btn_icon" src="../../static/icons/icon_drop_black@2x.png" mode=""></image>
			</view>
		</view>
		
		<view class="timeDisplay" v-if="beginDate > 0">
			<text>{{beginDate | visitTimeFilter}}</text>
			<text v-if="endDate > 0">至</text>
			<text v-if="endDate > 0">{{endDate | visitTimeFilter}}</text>
		</view>
		<dm-picker-view ref="midScreenPicer" v-if="midScreenList.length >= 4" :options="midScreenList" @confirm="selectMidScreen"></dm-picker-view>
	</view>
</template>

<script>
	import dmPickerView from './dmPickerView.vue'
	import moment from '../../static/moment.min.js'
	import {
			displayDateFormat
		} from "../../static/format.js"
	export default {
		props: {
			midScreenList: {
				type: Array,
				default () {
					return []
				}
			},
			defaultParameter: {
				type: Object,
				default () {
					return {
						'dateType': '1',
						'startDate': '',
						'endDate': '',
						'terminal': '0'
					}
				}
			},
			isEmty:{
				type:Boolean,
				default:false
			},
			modelValue: {
				type: [Number, String],
				default: '0'
			},
			isShowPlatform:{ // 认证记录 到访记录 不显示平台
				type: Boolean,
				default: true
			},
			isShowSecondScreen: {
				type: Boolean,
				default: false
			},
			secondScreenName: {
				type: String,
				default: '按最新成交状态'
			}
		},
		model: {
			prop: 'modelValue',
			event: 'change'
		},
		data() {
			return {
				themeColor: '',
				value: this.modelValue,
				beginDate: null,
				endDate: null,
				screenShowName: ''
			}
		},
		filters: {
			getTerminalName(val) {
				if (val == '0') {
					return '全部平台'
				} else if (val == '1') {
					return '微信'
				} else if (val == '2') {
					return '抖音'
				} else if (val == '3') {
					return '百度'
				} else if (val == '4') {
					return '头条'
				} else if (val == '5') {
					return '支付宝'
				} else if (val == '6') {
					return 'QQ小程序'
				} else if (val == '7') {
					return '其他'
				}
			},
			getTimeName(val) {
				if (val == '1') {
					return '今日'
				} else if (val == '2') {
					return '近一周'
				} else if (val == '3') {
					return '近一月'
				} else if (val == '4') {
					return '自定义'
				}
			},
			visitTimeFilter(val) {
				return displayDateFormat(val)
			},
		},
		mounted() {
			let app = getApp();
			this.globalData = app.globalData;
			this.themeColor = this.globalData.themeColor;
			this.displayDate()
		},
		methods: {
			secondScreenAction() {
				this.$emit('secondScreenAction')
			},
			selectTab(item) {
				if (this.value != item.value) {
					this.value = item.value
				}
			},
			tagAction(val) {
				this.$emit('tagAction', val)
			},
			showMidScreenPicker() {
				this.$refs.midScreenPicer.show()
			},
			selectMidScreen(e) {
				if (this.value != e.selItem.value) {
					this.value = e.selItem.value
				}
			},
			displayDate() {
				var dateType = parseInt(this.defaultParameter.dateType)
				let curDate = (new Date()).getTime();
				this.beginDate = null
				this.endDate = null
				
				if (dateType == 1) {
					this.beginDate = curDate
				}
				else if (dateType == 2) {
					this.endDate = curDate
					this.beginDate = this.getBeginDate(6)
				}
				else if (dateType == 3) {
					this.endDate = curDate
					this.beginDate = this.getBeginDate(29)
				}
				else if (dateType == 4) {
					// var self = this
					// uni.showModal({
					// 	content: JSON.stringify(self.defaultParameter)
					// })
					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 timeStr = val.replace(new RegExp("/", "gm"), "") + ' ' + '00:00:00'
				var timeStr = val.replace(/-/g,'/') + " " + '00:00:00'
				var self = this
				var stamp = new Date(timeStr).getTime()
				
				// debugger
				// uni.showModal({
				// 	content: JSON.stringify(stamp)
				// })
				return stamp
			}
			
		},
		components: {
			dmPickerView
		},
		watch: {
			//监听值变化，再赋值给modelValue
			value(val) {
				var self = this
				this.midScreenList.forEach((item, idx) => {
					if (item.value == val) {
						self.screenShowName = item.title
					}
				})
				this.$emit('change', val);
			},
			defaultParameter: {
				handler(e) {
					this.displayDate()
				},
				deep: true
			},
			modelValue: {
				handler(e) {
					this.value = e
				},
				immediate: true
			},
			midScreenList: {
				handler(e) {
					var self = this
					this.midScreenList.forEach((item, idx) => {
						if (item.value == self.value) {
							self.screenShowName = item.title
						}
					})
				},
				deep: true,
				immediate: true
			}
		}
	}
</script>

<style scoped lang="scss">
	.screen_view_dm {
		width: 750rpx;
		padding-top: 40rpx;
		padding-bottom: 10rpx;
		background-color: #ffffff;
		// z-index: 10;
		// position: relative;
		
		.screen_container_view {
			display: flex;
			width: 750rpx;
			padding: 0 20rpx;
			height: 40rpx;
			box-sizing: border-box;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			font-family: Verdana, Verdana-Bold;
			
			.screen_btn_view {
				display: flex;
				
				.subScreen {
					display: flex;
					align-items: center;
				}

				.screen_btn_title {
					font-weight: 700;
					font-size: 24rpx;
					color: #333333;
				}

				.screen_btn_icon {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.screen_list {
				font-size: 28rpx;
				font-weight: 400;
			}

			.screen_list_active {
				font-size: 28rpx;
				font-weight: 700;
			}
			
			.screen_more {
				display: flex;
				align-items: center;
				flex-grow: 1;
				margin-left: 60rpx;
				
				.screen_more_text {
					font-weight: 700;
					font-size: 24rpx;
					color: #333333;
					margin-right: 10rpx;
				}
				
				.screen_more_icon {
					width: 30rpx;
					height: 30rpx;
				}
			}
			
		}
		
		.timeDisplay {
			font-family: Verdana;
			font-size: 24rpx;
			color: #666;
			line-height: 34rpx;
			text-align: right;
			margin-top: 5rpx;
			margin-right: 20rpx;
			min-height: 34rpx;
			height: 34rpx;
		}
		
	}
</style>