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

<template>
	<dm-pop-view ref='popView' title="筛选" :isShowConfirm="false" :maskTapHide='true'>
		<scroll-view class="screen_container" scroll-y="true">
			<dm-time-level-screen :isChengjiao2="true" :sortType="sortType" :queryDateType="queryDateType" @queryDateTypeAction="queryDateTypeAction" @sortTypeAction="sortTypeAction"></dm-time-level-screen>
			<dm-date-screen style="margin-top: 40rpx;" :defaultParameter="tempDefaultParameter" @screenDateAction="screenDateAction"></dm-date-screen>
			<view class="screen_item_title">成交进度</view>
			<view class="level_tag_view">
				<text class="level_tag" :style="{ color: item.isSelect ? '#fff' : '#666', 'background-color': item.isSelect ? themeColor : '#F1F5F9' }"
				 v-for="(item, i) in progressList" :key="i" @click="selectProgress(item)">
					<view class="level_tag_title">
						{{ item.title }}
					</view>
					<view class="level_tag_subTitle" v-if="item.subTitle!=null">
						({{item.subTitle}})
					</view>
				</text>
			</view>
			<view class="screen_item_title">成交业态</view>
			<view class="level_tag_view">
				<view class="level_tag" :style="{ color: item.isSelect ? '#fff' : '#666', 'background-color': item.isSelect ? themeColor : '#F1F5F9' }"
				 v-for="(item, i) in yetaiList" :key="i" @click="selectYetai(item)">
					<view class="level_tag_title">
						{{ item.title }}
					</view>
					<view class="level_tag_subTitle" v-if="item.subTitle!=null">
						({{item.subTitle}})
					</view>
				</view>
			</view>
			<view class="screen_item_title">成交构成</view>
			<view class="level_tag_view">
				<text class="level_tag" :style="{ color: item.isSelect ? '#fff' : '#666', 'background-color': item.isSelect ? themeColor : '#F1F5F9' }"
				 v-for="(item, i) in gouchengList" :key="i" @click="selectGoucheng(item)">
					<view class="level_tag_title">
						{{ item.title }}
					</view>
					<view class="level_tag_subTitle" v-if="item.subTitle!=null">
						({{item.subTitle}})
					</view>
				</text>
			</view>
			<view class="reportOrganize" @click="selectChengjiaoType" v-if="formType == 2 || formType == 3">
				<view class="organizeName">
					{{formTypeResponseSelect != null ? formTypeResponseSelect.title : formType == 2 ? '请选择推荐成交类型': '请选择报备成交类型'}}
				</view>
				<image class="organizeIcon" src="../../static/icons/icon_aboutUs_DropDown.png" mode=""></image>
			</view>
		</scroll-view>
		<dm-picker-view ref="formTypeResponsePicker" :options="formTypeResponse" :value="formTypeResponseSelect != null ? formTypeResponseSelect.value : 0" :title="formType == 2 ? '请选择推荐成交类型': '请选择报备成交类型'" @confirm="confirmAction"></dm-picker-view>
		<view class="bottom_btn" style="margin-top: 60rpx;">
			<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'
	import dmPickerView from './dmPickerView.vue'
	import dmTimeLevelScreen from './dmTimeLevelScreen.vue'
	import dmDateScreen from './dmDateScreen.vue'
	let app = getApp();
	
	export default {
		props: {
			houseId: {
				type: [String, Number],
				default: ''
			},
			defaultParameter: Object,
			sortSel: [Number, String],
			timeLevelSel: [Number, String]
		},
		data() {
			return {
				themeColor: null,
				fuzhuColor: null,
				themeColor50: null,
				themeColor25: null,
				fuzhuColor50: null,
				progressList: [], // 成交进度
				yetaiList: [], // 成交业态
				gouchengList: [] ,// 成交构成
				formTypeResponse: [],
				changjiaoTypeList: [],
				formTypeResponseSelect: null,
				formType: 0,
				sortType: 0,
				queryDateType: 0,
				tempDefaultParameter: null
			}
		},
		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
			
			this.resetAction()
		},
		methods: {
			show() {
				this.$refs.popView.show()
			},
			// 正序、倒叙
			sortTypeAction(e) {
				// this.$emit('sortTypeAction', e)
				// debugger
				this.sortType = e
			},
			// 选择时间维度（条件）
			queryDateTypeAction(e) {
				// this.$emit('queryDateTypeAction', e)
				this.queryDateType = e
			},
			// 选择时间
			screenDateAction(val, start, end) {
				// this.$emit('screenDateAction', val, start, end)
				this.tempDefaultParameter = {
					value: this.tempDefaultParameter.value,
					dateType: val,
					startDate: start,
					endDate: end,
					terminal: this.tempDefaultParameter.terminal
				}
			},
			selectProgress(e) {
				if (e.value == 0) {
					this.progressList.forEach((item) => {
						item.isSelect = false
					})
					this.progressList[0].isSelect = true
				}
				else {
					this.progressList[0].isSelect = false
					var isHave = false
					this.progressList.forEach((item, idx) => {
						if (e.value == item.value) {
							item.isSelect = !item.isSelect
						}
						if (item.isSelect) {
							isHave = true
						}
					})
					if (!isHave) {
						this.progressList[0].isSelect = true
					}
				}
			},
			selectYetai(e) {
				if (e.value == 0) {
					this.yetaiList.forEach((item) => {
						item.isSelect = false
					})
					this.yetaiList[0].isSelect = true
				}
				else {
					this.yetaiList[0].isSelect = false
					var isHave = false
					this.yetaiList.forEach((item, idx) => {
						if (e.value == item.value) {
							item.isSelect = !item.isSelect
						}
						if (item.isSelect) {
							isHave = true
						}
					})
					if (!isHave) {
						this.yetaiList[0].isSelect = true
					}
				}
			},
			selectGoucheng(e) {
				var self = this
				this.gouchengList.forEach((item, idx) => {
					item.isSelect = false
					if (e.value == item.value) {
						item.isSelect = true
						self.formType = item.value
						self.formTypeResponseSelect = null
						if (item.value == 2 || item.value == 3) {
							self.getDealFormTips(item.value)
						}
					}
				})
			},
			async getDealFormTips(type) {
				var tempformType = 1
				if (type == 2) { // 推荐成交
					tempformType = 1
				}
				else {// 报备成交
					tempformType = 2 
				}
				let res = await this.$myRequest({
					url: '/elab-marketing-user/dealLedger/getDealFormTips',
					data: {
						houseId: this.houseId,
						formType: tempformType,
						dateType: this.defaultParameter.dateType,
						mindate: this.defaultParameter.startDate,
						maxdate: this.defaultParameter.endDate,
						timeDimension: this.queryDateType
					}
				})
				if (res.data.success && res.data.single) {
					this.formTypeResponse = res.data.single.formTypeResponse || []
					if (res.data.single.showXsxcx == 1) {
						var dic = {
							relationMess: "线上小程序用户",
							relationOrganizeName: '',
							relationOrganizeType: ''
						}
						this.formTypeResponse.push(dic)
					}
					this.formTypeResponse.forEach((item, idx) => {
						item['title'] = item.relationMess
						item['value'] = idx
					})
					this.$forceUpdate()		
				}
				
			},
			
			selectChengjiaoType() {
				this.$refs.formTypeResponsePicker.show()
			},
			
			confirmAction(e) {
				console.log('选择类型：', e)
				this.formTypeResponseSelect = e.selItem
			},
			
			resetAction() {
				this.progressList = [
						{title: '全部', isSelect: true, value: 0},
						{title: '认购', isSelect: false, value: 1},
						{title: '签约', isSelect: false, value: 2},
						{title: '已结首付', isSelect: false, value: 3},
						{title: '已结全款', isSelect: false, value: 4},
						{title: '已退房', isSelect: false, value: 6},
					]
				this.yetaiList = [
						{title: '全部', isSelect: true, value: 0},
						{title: '住宅', isSelect: false, value: 1},
						{title: '公寓', isSelect: false, value: 2},
						{title: '商业', isSelect: false, value: 3},
						{title: '写字楼', isSelect: false, value: 4},
						{title: '公共配套', isSelect: false, value: 5},
						{title: '地下室', subTitle: '不含车位', isSelect: false, value: 6},
						{title: '政策住宅', isSelect: false, value: 7},
						{title: '车位', isSelect: false, value: 8},
						{title: '其他', isSelect: false, value: 9},
					]
				this.gouchengList = [
						{title: '全部', isSelect: true, value: 0},
						{title: '其他自然成交', isSelect: false, value: 1},
						{title: '推荐成交', isSelect: false, value: 2},
						{title: '报备成交', isSelect: false, value: 3},
						{title: '线上自然成交', isSelect: false, value: 4},
						{title: '自然到访成交', isSelect: false, value: 5},
					]
					
				this.formTypeResponseSelect = null
				this.formTypeResponse = []
				this.tempDefaultParameter = JSON.parse(JSON.stringify(this.defaultParameter))
				this.sortType = this.sortSel
				this.queryDateType = this.timeLevelSel
			},
			sureAction() {
				var transactionProgressList = []
				this.progressList.forEach((item) => {
					if (item.isSelect) {
						transactionProgressList.push(item.value)
					}
				})
				var productTypeList = []
				this.yetaiList.forEach((item) => {
					if (item.isSelect) {
						productTypeList.push(item.value)
					}
				})
				var screenParmas = {
					timeLevelSel: this.queryDateType,
					sortSel: this.sortType,
					defaultParameter: this.tempDefaultParameter,
					//成交进度
					transactionProgress: transactionProgressList || [0],
					// 成交业态
					productType: productTypeList || [0],
					// 成交构成
					formType: this.formType,
					
					relationOrganizeName: this.formTypeResponseSelect != null ? this.formTypeResponseSelect.relationOrganizeName : null,
					
					relationOrganizeType: this.formTypeResponseSelect != null ? this.formTypeResponseSelect.relationOrganizeType : null,
				}
				this.$emit('screenAction', screenParmas)
				this.$refs.popView.hide()
			}
		},
		components: {
			dmPopView,
			dmPickerView,
			dmTimeLevelScreen,
			dmDateScreen
		},
		watch: {
			defaultParameter: {
				handler(e) {
					this.tempDefaultParameter = JSON.parse(JSON.stringify(e))
					if (this.formType == 2 || this.formType == 3) {
						self.getDealFormTips(this.formType)
					}
				},
				deep: true,
				immediate: true
			},
			timeLevelSel: {
				handler(e) {
					this.queryDateType = e
					this.$forceUpdate()
				},
				immediate: true
			},
			sortSel: {
				handler(e) {
					this.sortType = e
					this.$forceUpdate()
				},
				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;

			.level_tag {
				margin-right: 16rpx;
				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;
				}
			}
		}

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

			.organizeName {
				font-size: 28rpx;
				font-family: Verdana, Verdana-Regular;
				font-weight: 400;
				text-align: left;
				color: #666666;

			}

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

		.screen_item_sub {
			margin-top: 8rpx;
			margin-bottom: 40rpx;
			margin-left: 30rpx;
			line-height: 34rpx;
			font-size: 24rpx;
			font-family: Verdana, Verdana-Regular;
			font-weight: 400;
			text-align: left;
			color: #999999;
		}

		.score_view {
			margin-top: 30rpx;
			margin-bottom: 120rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 82rpx;

			.score_text {
				font-size: 70rpx;
				font-family: 'DIN Alternate', 'DIN Alternate-Bold';
				font-weight: 700;
			}

			.score_unit {
				padding-top: 25rpx;
				font-size: 28rpx;
				font-family: Verdana, Verdana-Regular;
				font-weight: 400;
			}
		}

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