jigesi/pages/index/customMian_step1/index.vue

<template>
	<view class="page">
		<navBar :title="type ? '定制我家的吸顶灯' : '定制我家的主灯'" :back="true" color="black" background="white" />

		<image :src="picBase+topPic" mode="" class="topBg"></image>

		<view class="content">
			<view class="topBox">
				<view class="lTxt">
					<image src="/static/index/water.png" mode="" class="water1"></image>
					<view class="main">
						<image src="/static/index/halfCircle_275.png" mode="" style="width: 56rpx;height: 56rpx;">
						</image>
						<text style="z-index: 3;position: relative;">{{type ? '定制我家的吸顶灯' : '定制我家的主灯'}}</text>
					</view>
				</view>
				<view class="rDes" @click="goRule">
					<view class="con">
						详情
					</view>
					<image :src="picUrl+'/static/other/halfRight_b.png'" mode="" style="width: 25rpx;height: 15rpx;">
					</image>
				</view>
			</view>

			<view class="label" @click="handleOpenOrClose(1)" style="padding-top: 64rpx;"
				:style="{'padding-bottom':addOrLessIcon1=='/static/index/add.png'?'64rpx':'32rpx'}">
				<view class="txt">
					户型
				</view>
				<image :src="addOrLessIcon1" mode="" class="" :style="{height:addOrLessIcon1=='/static/index/shortLine.png'
					?'2rpx':'22rpx'}" style="width: 22rpx;margin-right: 56rpx;">
				</image>
			</view>

			<view class="parms">
				<view v-if="show1" @click="handleSel1('hx',item,index)" class="item "
					:class="[currHouseIndex1==index?'act':'']" v-for="(item,index) in houseTypeList">
					{{item.value}}
				</view>
			</view>

			<view class="label" @click="handleOpenOrClose(2)" style="padding-top: 64rpx;"
				:style="{'padding-bottom':addOrLessIcon1=='/static/index/add.png'?'64rpx':'32rpx'}">
				<view class="txt">
					系列
				</view>
				<image :src="addOrLessIcon2" mode="" class="" :style="{height:addOrLessIcon2=='/static/index/shortLine.png'
					?'2rpx':'22rpx'}" style="width: 22rpx;margin-right: 56rpx;">
				</image>
			</view>

			<view class="parms">
				<view v-if="show2" @click="handleSel1('xl',item,index)" class="item "
					:class="[currHouseIndex2==index?'act':'']" v-for="(item,index) in serTypeList">
					{{item.value}}
				</view>
			</view>

			<view class="label" style="margin-bottom:32rpx;" @click="toSel('挑选客厅灯',1)">
				<view class="txt">
					挑选客厅灯
				</view>
				<image src="/static/index/more.png" mode="" class="" style="width: 44rpx;height: 44rpx;">
				</image>
			</view>

			<view class="parms3">
				<!-- <image @click="goDetail(item,index,'挑选客厅灯')" class="item3 " :src="picBase+item.cover"
					:class="[selKt.includes(item)?'act3':'']" v-for="(item,index) in brandTypeList.slice(0,4)">
				</image> -->

				<image @click="goDetail(item,index,'挑选客厅灯')" class="item3 " :src="picBase+item.cover"
					:class="[selKtIndex==index?'act3':'']" v-for="(item,index) in brandTypeList.slice(0,4)">
				</image>
			</view>

			<view class="label" style="margin-bottom:32rpx;" @click="toSel('挑选餐厅灯',2)">
				<view class="txt">
					挑选餐厅灯
				</view>
				<image src="/static/index/more.png" mode="" class="" style="width: 44rpx;height: 44rpx;">
				</image>
			</view>

			<view class="parms3">
				<!-- <image @click="goDetail(item,index,'挑选餐厅灯')" class="item3 " :src="picBase+item.cover"
					:class="[selCt.includes(item)?'act3':'']" v-for="(item,index) in lockTypeList.slice(0,4)">
				</image> -->

				<image @click="goDetail(item,index,'挑选餐厅灯')" class="item3 " :src="picBase+item.cover"
					:class="[selCtIndex==index?'act3':'']" v-for="(item,index) in lockTypeList.slice(0,4)">
				</image>
			</view>

			<view class="label" style="margin-bottom:32rpx;" @click="toSel('挑选卧室灯',3)">
				<view class="txt">
					挑选卧室灯
				</view>
				<image src="/static/index/more.png" mode="" class="" style="width: 44rpx;height: 44rpx;">
				</image>
			</view>

			<view class="parms3">
				<!-- <image @click="goDetail(item,index,'挑选卧室灯')" class="item3 " :src="picBase+item.cover"
					:class="[selWs.includes(item)?'act3':'']" v-for="(item,index) in chuanglianTypeList.slice(0,4)">
				</image> -->

				<image @click="goDetail(item,index,'挑选卧室灯')" class="item3 " :src="picBase+item.cover"
					v-for="(item,index) in chuanglianTypeList.slice(0,4)"
					:class="[selWsIndex.indexOf(index)!=-1?'act3':'']">
				</image>
			</view>

			<view class="label" style="margin-bottom:32rpx;" @click="toSel('挑选阳台灯',4)">
				<view class="txt">
					挑选阳台灯
				</view>
				<image src="/static/index/more.png" mode="" class="" style="width: 44rpx;height: 44rpx;">
				</image>
			</view>

			<view class="parms3">
				<!-- <image @click="goDetail(item,index,'挑选阳台灯')" class="item3 " :src="picBase+item.cover"
					:class="[selYt.includes(item)?'act3':'']" v-for="(item,index) in pannelTypeList.slice(0,4)">
				</image> -->

				<image @click="goDetail(item,index,'挑选阳台灯')" class="item3 " :src="picBase+item.cover"
					:class="[selYtIndex==index?'act3':'']" v-for="(item,index) in pannelTypeList.slice(0,4)">
				</image>
			</view>



		</view>
		<view class="bot">
			<view class="left" @click="showConfig=true">
				<view class="price">
					￥{{totalPrice.toFixed(0)}}
				</view>
				<!-- <image src="/static/index/arrDown.png" mode=""></image> -->
				<image v-if="!showConfig" src="/static/index/arrDown.png" mode="" @click="showConfig=true"></image>
				<image v-else src="/static/index/arrUp.png" mode="" @click="showConfig=false"></image>
			</view>
			<view class="right" @click="previewConfig">
				预览配置
			</view>
		</view>

		<u-popup :show="showConfig" @close="close" @open="open" round='10'>
			<view class="topBar" style="">
				<view class="left">
				</view>
				<view class="cen">
					清单
				</view>
				<view class="close" @click="showConfig=false">
					<u-icon name="close"></u-icon>
				</view>
			</view>
			<view class="pupopCon">
				<view class="item" v-if="selHx">
					<view class="top">
						<view class="name">
							户型
						</view>
						<view class="info">
							{{selHx.value}}
						</view>
					</view>
				</view>
				<view class="item" v-if="selXl">
					<view class="top">
						<view class="name">
							系列
						</view>
						<view class="info">
							{{selXl.value}}
						</view>
					</view>
				</view>
				<view class="item" v-if="selKt.length!=0">
					<view class="top">
						<view class="name">
							客厅灯
						</view>
						<view class="info">
							{{selKt.length}}
						</view>
					</view>
				</view>
				<view class="item" v-if="selCt.length!=0">
					<view class="top">
						<view class="name">
							餐厅灯
						</view>
						<view class="info">
							{{selCt.length}}
						</view>
					</view>
				</view>
				<view class="item" v-if="selWs.length!=0">
					<view class="top">
						<view class="name">
							卧室灯
						</view>
						<view class="info">
							{{selWs.length}}
						</view>
					</view>
				</view>
				<view class="item" v-if="selYt.length!=0">
					<view class="top">
						<view class="name">
							阳台灯
						</view>
						<view class="info">
							{{selCt.length}}
						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<u-modal :show="showHuxing" @confirm="showHuxing=false" title="户型" :content='content' confirmColor="#F7790C">
			<view class="tipContent">
				<view class="card">
					<view class="item">
						<view class="left">
							{{selHx.extend.title}}
						</view>
						<view class="right">
							￥{{selHx.extend.money}}
						</view>
					</view>

					<view class="item">
						<view class="left" style="font-weight: normal;">
							灯具
						</view>
						<view class="right">
							{{selHx.extend.lampCount}}
						</view>
					</view>
				</view>

				<view class="tip">
					<image :src="picUrl+ '/static/other/info.png'" mode="" style="margin-top: 5rpx;"></image>
					{{selHx.extend.remark}}
				</view>
			</view>
		</u-modal>

		<u-modal :show="showMissItem" title="提示" @confirm="showMissItem=false" content='' confirmColor="#F7790C">
			<view class="tip2">
				{{tipTxt}}
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		getIndexConfigReq,
		getHomeDataNextReq
	} from '@/api/test/index.js'
	import {
		getDataMoneyReq
	} from '@/api/index/index.js'
	export default {
		components: {

		},
		data() {
			return {
				picUrl: this.$picUrl,
				picBase: this.$picBase,

				addOrLessIcon1: '/static/index/shortLine.png',
				addOrLessIcon2: '/static/index/shortLine.png',
				addOrLessIcon3: '/static/index/shortLine.png',
				addOrLessIcon4: '/static/index/shortLine.png',
				addOrLessIcon5: '/static/index/shortLine.png',
				// lessIcon: require('/static/index/shortLine.png'),

				show1: true,
				show2: true,
				show3: true,
				show4: true,
				show5: true,

				showConfig: false,

				showHuxing: false,

				showMissItem: false,

				seledKetingItem: null,

				currHouseIndex1: -1,
				currHouseIndex2: -1,
				houseTypeList: [],
				brandTypeList: [],
				lockTypeList: [],
				pannelTypeList: [],
				chuanglianTypeList: [],
				serTypeList: [

				],
				rule: null,

				selHx: null,
				selXl: null,
				selKt: [],
				selCt: [],
				selWs: [],
				selYt: [],

				selKtIndex: -1,
				selCtIndex: -1,
				selWsIndex: [],
				selYtIndex: -1,


				totalPrice: 0,

				pConfig: -1,
				cutdownRatio: 1,

				type: 0,
				tipTxt: '',
				topPic: ''
			}
		},
		async onLoad(o) {
			this.topPic = getApp().noMainImg.head_image
			console.log('2this.topPic', this.topPic);
			if (o.type) {
				this.type = o.type
			}
			let res = await getIndexConfigReq({
				type: o.type ? Number(o.type) : 2
			})
			if (res.code == 0) {
				console.log('获取首页配置返回值-主灯: ', res);
				this.houseTypeList = res.data.house_type
				this.brandTypeList = res.data.living_room
				this.lockTypeList = res.data.dining_room_light
				this.serTypeList = res.data.series
				this.chuanglianTypeList = res.data.bedroom_lamp
				this.pannelTypeList = res.data.balcony_light

				this.rule = res.data.rule.content

				let wsIds1 = []
				this.selKt.forEach((item, index) => {
					wsIds1.push(item.id)
				})

				let wsIds2 = []
				this.selCt.forEach((item, index) => {
					wsIds2.push(item.id)
				})
				let wsIds3 = []
				this.selWs.forEach((item, index) => {
					wsIds3.push(item.id)
				})
				let wsIds4 = []
				this.selYt.forEach((item, index) => {
					wsIds4.push(item.id)
				})
			} else {
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			}

		},
		onShow() {
			this.cutdownRatio = this.$getCutDown()
			console.log('哪种折扣价格', this.cutdownRatio);
			console.log('确定选择的那一项', getApp().chooseItem_kt, getApp().index_kt, getApp().chooseType);
			if (getApp().chooseItem_kt) {

				console.log('121112122-------------');
				let index = getApp().index_kt
				let item = getApp().chooseItem_kt
				let type = ''
				if (getApp().chooseType == '挑选客厅灯') {
					type = 'kt'
				} else if (getApp().chooseType == '挑选餐厅灯') {
					type = 'ct'
				} else if (getApp().chooseType == '挑选卧室灯') {
					type = 'ws'
				} else {
					type = 'yt'
				}

				this.handleSel(type, item, index, 2)

				getApp().chooseItem_kt = null
				getApp().index_kt = null
				getApp().chooseType = null
			}
		},
		methods: {
			goDetail(item, index, name) {
				if (this.houseTypeList.length == 0 || this.serTypeList.length == 0) {
					this.showMissItem = true
					this.tipTxt = '抱歉！参数配置缺失，暂无法预览配置'
					return
				}

				if (!this.selHx) {
					return this.$toast('请选择户型')
				}
				if (!this.selXl) {
					return this.$toast('请选择系列')
				}

				if (name == '挑选卧室灯') {
					// if (this.selHx.value == '一室一厅' && this.selWs.length == 1) {
					// 	this.showHuxing = true
					// 	return
					// } else if (this.selHx.value == '两室两厅' && this.selWs.length == 2) {
					// 	this.showHuxing = true
					// 	return
					// } else if (this.selHx.value == '三室两厅' && this.selWs.length == 3) {
					// 	this.showHuxing = true
					// 	return
					// }

					if (this.selHx.value == '一室一厅' && this.selWs.length == 1) {
						// this.showHuxing = true

						this.showMissItem = true
						this.tipTxt = '一室一厅户型应该选择1盏卧室灯！'
						return
					} else if (this.selHx.value == '两室两厅' && this.selWs.length == 2) {
						// this.showHuxing = true
						this.showMissItem = true
						this.tipTxt = '两室两厅户型应该选择2盏卧室灯！'
						return
					} else if (this.selHx.value == '三室两厅' && this.selWs.length == 3) {
						// this.showHuxing = true
						this.showMissItem = true
						this.tipTxt = '三室两厅户型应该选择3盏卧室灯！'
						return
					}
				}

				getApp().ktItem = item
				getApp().ktIndex = index
				getApp().ktName = name

				// getApp().mianFromType = 'pic'
				uni.navigateTo({
					url: '/pages/index/mainDetail/index?mianFromType=1'
				})
			},

			async getPrice(parmas) {
				let res = await getDataMoneyReq(parmas)
				if (res.code == 0) {
					console.log('配置价格-主灯: ', res)
					this.totalPrice = res.data.money * this.cutdownRatio
					this.pConfig = res.data.id ? res.data.id : -1

				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			},

			goRule() {
				getApp().content = this.rule
				uni.navigateTo({
					url: '/pages/index/rule/index?type=main'
				})
			},
			toSel(name, type) {
				console.log('name, type', name, type);
				if (this.houseTypeList.length == 0 || this.serTypeList.length == 0) {
					this.showMissItem = true
					this.tipTxt = '抱歉！参数配置缺失，暂无法预览配置'
					return
				}
				if (!this.selHx) {
					return this.$toast('请选择户型')
				}
				if (!this.selXl) {
					return this.$toast('请选择系列')
				}
				if (type == 3) {
					// if (this.selHx.value == '一室两厅' && this.selWs.length == 1) {
					// 	this.showHuxing = true
					// 	return
					// } else if (this.selHx.value == '两室两厅' && this.selWs.length == 2) {
					// 	this.showHuxing = true
					// 	return
					// } else if (this.selHx.value == '三室两厅' && this.selWs.length == 3) {
					// 	this.showHuxing = true
					// 	return
					// }
					if (this.selHx.value == '一室一厅' && this.selWs.length == 1) {
						// this.showHuxing = true

						this.showMissItem = true
						this.tipTxt = '一室一厅户型应该选择1盏卧室灯！'
						return
					} else if (this.selHx.value == '两室两厅' && this.selWs.length == 2) {
						// this.showHuxing = true
						this.showMissItem = true
						this.tipTxt = '两室两厅户型应该选择2盏卧室灯！'
						return
					} else if (this.selHx.value == '三室两厅' && this.selWs.length == 3) {
						// this.showHuxing = true
						this.showMissItem = true
						this.tipTxt = '三室两厅户型应该选择3盏卧室灯！'
						return
					}
				}

				if (type == 1) {
					getApp().typeList = this.brandTypeList
				} else if (type == 2) {
					getApp().typeList = this.lockTypeList
				} else if (type == 3) {
					getApp().typeList = this.chuanglianTypeList
				} else {
					getApp().typeList = this.pannelTypeList
				}
				uni.navigateTo({
					url: '/pages/index/mainList/index?name=' + name
				})
			},
			handleOpenOrClose(i) {
				if (this['addOrLessIcon' + i] == '/static/index/shortLine.png') {
					this['addOrLessIcon' + i] = '/static/index/add.png'
					this['show' + i] = false
				} else if (this['addOrLessIcon' + i] == '/static/index/add.png') {
					this['addOrLessIcon' + i] = '/static/index/shortLine.png'
					this['show' + i] = true
				}
			},
			// 仅选择户型和系列
			async handleSel1(type, item, index) {
				if (type == 'hx') {
					this.currHouseIndex1 = -1
					this.currHouseIndex2 = -1

					this.selXl = null
					this.selHx = null
					this.currHouseIndex1 = index
					this.selHx = item

					console.log('selHx---------------', this.selHx);

					let p = {
						type: this.type ? this.type : 2,
						house_type: this.selHx.id
					}
					let res = await getHomeDataNextReq(p)

					console.log('确定选择的户型项-----------', this.selHx);
					if (res.code == 0) {
						console.log('新户型返回值', res);
						this.serTypeList = res.data.series

						this.selKt = []
						this.selCt = []
						this.selWs = []
						this.selYt = []

						this.selKtIndex = -1
						this.selCtIndex = -1
						this.selWsIndex = []
						this.selYtIndex = -1
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				} else {
					if (!this.selHx) {
						return this.$toast('请先选择户型')
					}

					this.currHouseIndex2 = -1

					this.selXl = null
					this.currHouseIndex2 = index
					this.selXl = item

				}
				let wsIds1 = []
				this.selKt.forEach((item, index) => {
					wsIds1.push(item.id)
				})

				let wsIds2 = []
				this.selCt.forEach((item, index) => {
					wsIds2.push(item.id)
				})
				let wsIds3 = []
				this.selWs.forEach((item, index) => {
					wsIds3.push(item.id)
				})
				let wsIds4 = []
				this.selYt.forEach((item, index) => {
					wsIds4.push(item.id)
				})

				if (this.selHx && this.selXl && this.selKt.length != 0 && this.selCt.length != 0 && this
					.selWs.length != 0 && this.selYt.length != 0) {
					this.getPrice({
						type: this.type ? this.type : 2,
						house_type: this.selHx.id,
						series: this.selXl.id,
						drawing_lamp: wsIds1.sort().join(','),
						canteen_lamp: wsIds2.sort().join(','),
						bedroom_lamp: wsIds3.sort().join(','),
						balcony_lamp: wsIds4.sort().join(',')
					})
				} else {
					this.totalPrice = 0
				}
			},
			handleSel(type, item, index, mode = 1) {
				// 卧室灯数量校验

				if (type == 'kt') {
					// 只能单选
					this.selKt = [item]
					this.selKtIndex = index


					// 支持对选与取消当前选择
					// if (!this.selKt.includes(item)) {
					// 	this.selKt.push(item)
					// } else {
					// 	if (mode == 1) {
					// 		let i = this.selKt.findIndex((item1, index1) => {
					// 			return item1 == item
					// 		})
					// 		this.selKt.splice(i, 1)
					// 	}
					// }

				} else if (type == 'ct') {
					this.selCt = [item]
					this.selCtIndex = index

					// if (!this.selCt.includes(item)) {
					// 	this.selCt.push(item)
					// } else {
					// 	if (mode == 1) {
					// 		let i = this.selCt.findIndex((item1, index1) => {
					// 			return item1 == item
					// 		})
					// 		this.selCt.splice(i, 1)
					// 	}
					// }
				} else if (type == 'ws') {
					// this.selWs = [item]

					if (!this.selWsIndex.includes(index)) {
						this.selWs.push(item)
						this.selWsIndex.push(index)
					} else {
						if (mode == 1) {
							let i = this.selWs.findIndex((item1, index1) => {
								return item1 == item
							})
							this.selWs.splice(i, 1)
							this.selWsIndex.splice(i, 1)
						}
					}
				} else if (type == 'yt') {
					this.selYt = [item]
					this.selYtIndex = index
					// if (!this.selYt.includes(item)) {
					// 	this.selYt.push(item)
					// } else {
					// 	if (mode == 1) {
					// 		let i = this.selYt.findIndex((item1, index1) => {
					// 			return item1 == item
					// 		})
					// 		this.selYt.splice(i, 1)
					// 	}
					// }
				}

				console.log('kt-----', this.selKt);
				console.log('ct-----', this.selCt);
				console.log('ws-----', this.selWs);
				console.log('yt-----', this.selYt);
				let wsIds1 = []
				this.selKt.forEach((item, index) => {
					wsIds1.push(item.id)
				})

				let wsIds2 = []
				this.selCt.forEach((item, index) => {
					wsIds2.push(item.id)
				})
				let wsIds3 = []
				this.selWs.forEach((item, index) => {
					wsIds3.push(item.id)
				})
				let wsIds4 = []
				this.selYt.forEach((item, index) => {
					wsIds4.push(item.id)
				})
				if (this.selHx && this.selXl && this.selKt.length != 0 && this.selCt.length != 0 && this
					.selWs.length != 0 && this.selYt.length != 0) {
					this.getPrice({
						type: this.type ? this.type : 2,
						house_type: this.selHx.id,
						series: this.selXl.id,
						drawing_lamp: wsIds1.sort().join(','),
						canteen_lamp: wsIds2.sort().join(','),
						bedroom_lamp: wsIds3.sort().join(','),
						balcony_lamp: wsIds4.sort().join(',')
					})
				} else {
					this.totalPrice = 0
				}
			},
			previewConfig() {
				if (this.houseTypeList.length == 0 || this.serTypeList.length == 0) {
					this.showMissItem = true
					this.tipTxt = '抱歉！参数配置缺失，暂无法预览配置'
					return
				}
				if (!this.selHx) {
					return this.$toast('请选择户型')
				}
				if (!this.selXl) {
					return this.$toast('请选择系列')
				}

				if (this.selKt.length == 0) {
					this.showMissItem = true
					this.tipTxt = '客厅灯至少选1盏！'
					return
				}
				if (this.selCt.length == 0) {
					this.showMissItem = true
					this.tipTxt = '餐厅灯至少选1盏！'
					return
				}

				console.log('fffffffffffffffffffff', this.selHx.value, this.selWs.length);

				if (this.selHx.value == '一室一厅' && this.selWs.length != 1) {
					// this.showHuxing = true

					this.showMissItem = true
					this.tipTxt = '一室一厅户型应该选择1盏卧室灯！'
					return
				} else if (this.selHx.value == '两室两厅' && this.selWs.length != 2) {
					// this.showHuxing = true
					this.showMissItem = true
					this.tipTxt = '两室两厅户型应该选择2盏卧室灯！'
					return
				} else if (this.selHx.value == '三室两厅' && this.selWs.length != 3) {
					// this.showHuxing = true
					this.showMissItem = true
					this.tipTxt = '三室两厅户型应该选择3盏卧室灯！'
					return
				}
				if (this.selYt.length == 0) {
					this.showMissItem = true
					this.tipTxt = '阳台灯至少选1盏！'
					return
				}


				if (this.selYt.length == 0 || this.selKt.length == 0 || this.selCt.length == 0 || this.selWs.length == 0 ||
					!this.selHx || !this.selXl) {
					this.showMissItem = true
					this.tipTxt = '所有选项请确认是否选择完整'
					return
				}



				getApp().mainPreviewInfo = {
					hx: this.selHx,
					xl: this.selXl,
					kt: this.selKt,
					ct: this.selCt,
					ws: this.selWs,
					yt: this.selYt,
					price: this.totalPrice
				}
				getApp().pConfig = this.pConfig

				console.log('getApp().pConfig', getApp().pConfig);
				// getApp().dType = 5
				uni.navigateTo({
					url: '/pages/index/customMian/index?dType=' + this.type
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>