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

<template>
	<view class="timeContainer">
		<view class="title">{{title}}</view>
		<view class="subTitle">{{subTitle}}</view>

		<view class="bottomSection">
			<view class="selValue" @click="selectTimeLevelAction">
				{{selValue.title}}
			</view>
			<view class="rightSection">
				<image class="bottimIcon" src="../../static/icons/icon_aboutUs_DropDown.png" mode=""></image>
				<view class="line"></view>
				<view class="sort" :style="`background-color: ${sortType==0 ? '#fff': '#F7F8F9'}; color: ${sortType==0 ? '#333333': '#999999'};`"
				 @click="sortAction(0)">正序</view>
				<view class="desSort" :style="`background-color: ${sortType==1 ? '#fff': '#F7F8F9'}; color: ${sortType==1 ? '#333333': '#999999'};`"
				 @click="sortAction(1)">倒序</view>
			</view>
		</view>
		<dm-picker-view ref="timeLevelPicker" :options="timeLevelList" :value="selValue.value" @confirm="confirm" title="筛选时间维度"></dm-picker-view>
	</view>
</template>

<script>
	import dmPickerView from './dmPickerView.vue'

	export default {
		props: {
			title: {
				type: String,
				default: '筛选时间维度'
			},
			subTitle: {
				type: String,
				default: '倒序表示最近到最远排列'
			},
			sortType: {
				type: [Number, String],
				default: '1'
			},
			queryDateType: {
				type: [Number, String],
				default: 2
			},
			isChengjiao2: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				selValue: Object,
				timeLevelList: []
			}
		},
		mounted() {

		},
		methods: {
			selectTimeLevelAction() {
				this.$refs.timeLevelPicker.show()
			},
			confirm(e) {
				this.selValue = e.selItem
				this.$emit('queryDateTypeAction', e.selItem.value)
			},
			sortAction(e) {
				// this.sortType = e
				this.$emit('sortTypeAction', e)
			},
			reloadTimeLevelList() {
				if (this.isChengjiao2) {
					this.timeLevelList = [{
							title: '最新成交时间',
							value: 0
						},
						{
							title: '按认购时间',
							value: 1
						},
						{
							title: '按签约时间',
							value: 2
						},
						{
							title: '按已结首付时间',
							value: 3
						},
						{
							title: '按已结全款时间',
							value: 4
						}
					]
				} else {
					this.timeLevelList = [{
							'title': '按首次报备时间',
							'value': '1'
						},
						{
							'title': '按最新报备时间',
							'value': '2'
						},
						{
							'title': '按客户动态时间',
							'value': '3'
						},
						{
							'title': '按保护期截止时间',
							'value': '4'
						}
					]
					this.selValue = {
						title: '按最新报备时间',
						value: '2'
					}
				}
			}
		},
		watch: {
			queryDateType: {
				handler(e) {
					this.reloadTimeLevelList()
					if (this.isChengjiao2) {
						this.selValue = this.timeLevelList[parseInt(e)]
					}
					else {
						this.selValue = this.timeLevelList[parseInt(this.queryDateType - 1)]
					}
					this.$forceUpdate()
				},
				immediate: true
			},
			isChengjiao2: {
				handler(e) {
					this.reloadTimeLevelList()
				},
				immediate: true
			}
		},
		components: {
			dmPickerView
		}
	}
</script>

<style scoped lang="scss">
	.timeContainer {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-family: Verdana;

		.title {
			color: #454545;
			font-size: 32rpx;
			font-weight: bold;
		}

		.subTitle {
			color: #999999;
			font-size: 24rpx;
			margin-top: 8rpx;
		}

		.bottomSection {
			margin-top: 20rpx;
			height: 94rpx;
			background-color: #F1F5F9;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;
			justify-content: space-between;

			.selValue {
				color: #333333;
				font-size: 28rpx;
				flex-grow: 1;
			}

			.rightSection {
				display: flex;
				align-items: center;

				.bottimIcon {
					width: 14rpx;
					height: 9rpx;
				}

				.line {
					width: 2rpx;
					height: 52rpx;
					background-color: #EFEFEF;
					margin-left: 37rpx;
				}

				.sort {
					color: #333333;
					font-size: 28rpx;
					background-color: #FFFFFF;
					border: 2rpx solid #EFEFEF;
					border-radius: 26rpx;
					width: 90rpx;
					height: 52rpx;
					line-height: 52rpx;
					text-align: center;
					margin-left: 37rpx;
				}

				.desSort {
					color: #333333;
					font-size: 28rpx;
					background-color: #FFFFFF;
					border: 2rpx solid #EFEFEF;
					border-radius: 26rpx;
					width: 90rpx;
					height: 52rpx;
					line-height: 52rpx;
					text-align: center;
				}
			}

		}
	}
</style>