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