jigesi/pages/index/aiControlSys/index.vue

<template>
	<view class="page">
		<navBar title="智能控制系统" :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;">定制我家的智能控制</text>
					</view>
				</view>
				<view class="rDes" @click="toRule">
					<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="{'margin-bottom':addOrLessIcon1=='/static/index/shortLine.png'?'32rpx':'0'}">
				<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="sel('hx', item, index)" class="item "
					:class="[currHouseIndex==index?'act':'']" v-for="(item,index) in houseTypeList">
					{{item.value}}
				</view>
			</view>


			<view class="label" @click="handleOpenOrClose(2)"
				:style="{'margin-bottom':addOrLessIcon2=='/static/index/shortLine.png'?'32rpx':'0'}">
				<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="sel('pp', item, index)" class="item "
					:class="[currHouseIndex1==index?'act':'']" v-for="(item,index) in brandTypeList">
					{{item.value}}
				</view>
			</view>

			<view class="label" @click="handleOpenOrClose(3)"
				:style="{'margin-bottom':addOrLessIcon3=='/static/index/shortLine.png'?'32rpx':'0'}">
				<view class="txt">
					智能锁
				</view>
				<image :src="addOrLessIcon3" mode="" class="" :style="{height:addOrLessIcon3=='/static/index/shortLine.png'
					?'2rpx':'22rpx'}" style="width: 22rpx;margin-right: 56rpx;">
				</image>
			</view>

			<view class="parms">
				<view v-if="show3" @click="sel('suo', item, index)" class="item "
					:class="[currHouseIndex2==index?'act':'']" v-for="(item,index) in lockTypeList">
					{{item.value}}
				</view>
			</view>


			<view class="label" @click="handleOpenOrClose(4)"
				:style="{'margin-bottom':addOrLessIcon4=='/static/index/shortLine.png'?'32rpx':'0'}">
				<view class="txt">
					智能面板
				</view>
				<image :src="addOrLessIcon4" mode="" class="" :style="{height:addOrLessIcon4=='/static/index/shortLine.png'
					?'2rpx':'22rpx'}" style="width: 22rpx;margin-right: 56rpx;">
				</image>
			</view>

			<view class="parms">
				<view v-if="show4" @click="sel('mb', item, index)" class="item "
					:class="[currHouseIndex3==index?'act':'']" v-for="(item,index) in pannelTypeList">
					{{item.value}}
				</view>
			</view>


			<view class="label" @click="handleOpenOrClose(5)"
				:style="{'margin-bottom':addOrLessIcon5=='/static/index/shortLine.png'?'32rpx':'0'}">
				<view class="txt">
					智能窗帘
				</view>
				<image :src="addOrLessIcon5" mode="" class="" :style="{height:addOrLessIcon5=='/static/index/shortLine.png'
					?'2rpx':'22rpx'}" style="width: 22rpx;margin-right: 56rpx;">
				</image>
			</view>

			<view class="parms">
				<view v-if="show5" @click="sel('cl', item, index)" class="item "
					:class="[currHouseIndex4==index?'act':'']" v-for="(item,index) in chuanglianTypeList">
					{{item.value}}
				</view>
			</view>


			<view class="label" @click="handleOpenOrClose(6)"
				:style="{'margin-bottom':addOrLessIcon6=='/static/index/shortLine.png'?'32rpx':'0'}">
				<view class="txt">
					智能空调
				</view>
				<image :src="addOrLessIcon6" mode="" class="" :style="{height:addOrLessIcon6=='/static/index/shortLine.png'
					?'2rpx':'22rpx'}" style="width: 22rpx;margin-right: 56rpx;">
				</image>
			</view>

			<view class="parms">
				<view v-if="show6" @click="sel('kt', item, index)" class="item "
					:class="[currHouseIndex5==index?'act':'']" v-for="(item,index) in ktTypeList">
					{{item.value}}
				</view>


			</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>
			</view>
			<view class="right" @click="toNext">
				预览配置
			</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">
					<view class="top" v-if="selPp">
						<view class="name">
							品牌
						</view>
						<view class="info">
							{{selPp.value}}
						</view>
					</view>
					<view class="top" v-if="selSuo">
						<view class="name">
							智能锁
						</view>
						<view class="info">
							{{selSuo.value}}
						</view>
					</view>

					<view class="top" v-if="selMb">
						<view class="name">
							智能开关
						</view>
						<view class="info">
							{{selMb.value}}
						</view>
					</view>
					<view class="top" v-if="selCl">
						<view class="name">
							智能窗帘
						</view>
						<view class="info">
							{{selCl.value}}
						</view>
					</view>
					<view class="top" v-if="selKt">
						<view class="name">
							智能空调
						</view>
						<view class="info">
							{{selKt.value}}
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</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',
				addOrLessIcon6: '/static/index/shortLine.png',

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


				showConfig: false,

				currHouseIndex: -1,
				currHouseIndex1: -1,
				currHouseIndex2: -1,
				currHouseIndex3: -1,
				currHouseIndex4: -1,
				currHouseIndex5: -1,
				houseTypeList: [],
				brandTypeList: [

				],
				lockTypeList: [

				],
				pannelTypeList: [

				],
				chuanglianTypeList: [

				],
				ktTypeList: [

				],
				rule: null,

				totalPrice: 0,

				selHx: null,
				selPp: null,
				selSuo: null,
				selMb: null,
				selCl: null,
				selKt: null,
				pConfig: -1,
				cutdownRatio: 1,

				topPic: ''
			}
		},
		async onLoad(options) {
			this.topPic = getApp().noMainImg.head_image
			console.log('3this.topPic', this.topPic);
			let res = await getIndexConfigReq({
				type: 3
			})
			if (res.code == 0) {
				console.log('获取首页配置返回值-智控: ', res);

				this.houseTypeList = res.data.house_type
				this.brandTypeList = res.data.brand
				this.lockTypeList = res.data.mind_lock
				this.pannelTypeList = res.data.mind_switch
				this.chuanglianTypeList = res.data.mind_curtain
				this.ktTypeList = res.data.mind_air_conditioner

				this.rule = res.data.rule.content

				// this.selHx = res.data.house_type[0]
				// this.selPp = res.data.brand[0]
				// this.selSuo = res.data.mind_lock[0]
				// this.selMb = res.data.mind_switch[0]
				// this.selCl = res.data.mind_curtain[0]
				// this.selKt = res.data.mind_air_conditioner[0]
				// this.getPrice(3, this.selHx.id, this.selPp.id, this.selSuo.id, this.selMb.id, this.selCl.id, this.selKt
				// 	.id)
			}
		},
		onShow() {
			this.cutdownRatio = this.$getCutDown()
		},
		methods: {
			async sel(type, item, index) {
				if (type == 'hx') {
					this.currHouseIndex = -1
					this.currHouseIndex1 = -1
					this.currHouseIndex2 = -1
					this.currHouseIndex3 = -1
					this.currHouseIndex4 = -1
					this.currHouseIndex5 = -1

					this.selHx = null,
						this.selPp = null,
						this.selSuo = null,
						this.selMb = null,
						this.selCl = null,
						this.selKt = null,

						this.currHouseIndex = index
					this.selHx = item

					let p = {
						type: 3,
						house_type: this.selHx.id
					}

					if (this.selHx && this.selPp && this.selSuo && this.selMb && this.selCl && this.selKt) {
						this.getPrice(p)
					} else {
						this.totalPrice = 0
					}


					let res = await getHomeDataNextReq(p)
					if (res.code == 0) {
						this.brandTypeList = res.data.brand
						this.lockTypeList = res.data.mind_lock
						this.pannelTypeList = res.data.mind_switch
						this.chuanglianTypeList = res.data.mind_curtain
						this.ktTypeList = res.data.mind_air_conditioner
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				} else if (type == 'pp') {
					if (!this.selHx) {
						return this.$toast('请先选择户型')
					}
					this.currHouseIndex1 = -1
					this.currHouseIndex2 = -1
					this.currHouseIndex3 = -1
					this.currHouseIndex4 = -1
					this.currHouseIndex5 = -1

					this.selPp = null,
						this.selSuo = null,
						this.selMb = null,
						this.selCl = null,
						this.selKt = null,



						this.currHouseIndex1 = index
					this.selPp = item

					let p = {
						type: 3,
						house_type: this.selHx.id,
						brand: this.selPp.id
					}

					if (this.selHx && this.selPp && this.selSuo && this.selMb && this.selCl && this.selKt) {
						this.getPrice(p)
					} else {
						this.totalPrice = 0
					}


					let res = await getHomeDataNextReq(p)
					if (res.code == 0) {
						this.lockTypeList = res.data.mind_lock
						this.pannelTypeList = res.data.mind_switch
						this.chuanglianTypeList = res.data.mind_curtain
						this.ktTypeList = res.data.mind_air_conditioner
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				} else if (type == 'suo') {
					if (!this.selHx) {
						return this.$toast('请先选择户型')
					} else if (!this.selPp) {
						return this.$toast('请先选择品牌')
					}
					this.currHouseIndex2 = -1
					this.currHouseIndex3 = -1
					this.currHouseIndex4 = -1
					this.currHouseIndex5 = -1

					this.selSuo = null,
						this.selMb = null,
						this.selCl = null,
						this.selKt = null,


						this.currHouseIndex2 = index
					this.selSuo = item

					let p = {
						type: 3,
						house_type: this.selHx.id,
						brand: this.selPp.id,
						mind_lock: this.selSuo.id,
					}

					if (this.selHx && this.selPp && this.selSuo && this.selMb && this.selCl && this.selKt) {
						this.getPrice(p)
					} else {
						this.totalPrice = 0
					}


					let res = await getHomeDataNextReq(p)
					if (res.code == 0) {
						this.pannelTypeList = res.data.mind_switch
						this.chuanglianTypeList = res.data.mind_curtain
						this.ktTypeList = res.data.mind_air_conditioner
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				} else if (type == 'mb') {
					if (!this.selHx) {
						return this.$toast('请先选择户型')
					} else if (!this.selPp) {
						return this.$toast('请先选择品牌')
					} else if (!this.selSuo) {
						return this.$toast('请先选择智能锁')
					}
					this.currHouseIndex3 = -1
					this.currHouseIndex4 = -1
					this.currHouseIndex5 = -1

					this.selMb = null,
						this.selCl = null,
						this.selKt = null,

						this.currHouseIndex3 = index
					this.selMb = item

					let p = {
						type: 3,
						house_type: this.selHx.id,
						brand: this.selPp.id,
						mind_lock: this.selSuo.id,
						mind_switch: this.selMb.id,
					}

					if (this.selHx && this.selPp && this.selSuo && this.selMb && this.selCl && this.selKt) {
						this.getPrice(p)
					} else {
						this.totalPrice = 0
					}


					let res = await getHomeDataNextReq(p)
					if (res.code == 0) {
						this.chuanglianTypeList = res.data.mind_curtain
						this.ktTypeList = res.data.mind_air_conditioner
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				} else if (type == 'cl') {
					if (!this.selHx) {
						return this.$toast('请先选择户型')
					} else if (!this.selPp) {
						return this.$toast('请先选择品牌')
					} else if (!this.selSuo) {
						return this.$toast('请先选择智能锁')
					} else if (!this.selMb) {
						return this.$toast('请先选择智能面板')
					}
					this.currHouseIndex4 = -1
					this.currHouseIndex5 = -1


					this.selCl = null,
						this.selKt = null,

						this.currHouseIndex4 = index
					this.selCl = item

					let p = {
						type: 3,
						house_type: this.selHx.id,
						brand: this.selPp.id,
						mind_lock: this.selSuo.id,
						mind_switch: this.selMb.id,
						mind_curtain: this.selCl.id,
					}

					if (this.selHx && this.selPp && this.selSuo && this.selMb && this.selCl && this.selKt) {
						this.getPrice(p)
					} else {
						this.totalPrice = 0
					}


					let res = await getHomeDataNextReq(p)
					if (res.code == 0) {
						this.ktTypeList = res.data.mind_air_conditioner
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				} else if (type == 'kt') {
					if (!this.selHx) {
						return this.$toast('请先选择户型')
					} else if (!this.selPp) {
						return this.$toast('请先选择品牌')
					} else if (!this.selSuo) {
						return this.$toast('请先选择智能锁')
					} else if (!this.selMb) {
						return this.$toast('请先选择智能面板')
					} else if (!this.selCl) {
						return this.$toast('请先选择智能窗帘')
					}
					this.currHouseIndex5 = -1

					this.selKt = null,

						this.currHouseIndex5 = index
					this.selKt = item
					let p = {
						type: 3,
						house_type: this.selHx.id,
						brand: this.selPp.id,
						mind_lock: this.selSuo.id,
						mind_switch: this.selMb.id,
						mind_curtain: this.selCl.id,
						mind_air_conditioner: this.selKt.id,
					}

					if (this.selHx && this.selPp && this.selSuo && this.selMb && this.selCl && this.selKt) {
						this.getPrice(p)
					} else {
						this.totalPrice = 0
					}


					let res = await getHomeDataNextReq(p)
					if (res.code == 0) {
						// this.ktTypeList = res.data.mind_air_conditioner
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				}

				// this.getPrice(prmas)
			},

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

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

			toRule() {
				getApp().content = this.rule
				uni.navigateTo({
					url: '/pages/index/rule/index?type=ctrl'
				})
			},
			toNext() {
				if (this.houseTypeList.length == 0 || this.brandTypeList.length == 0 || this.lockTypeList.length == 0 ||
					this.pannelTypeList.length == 0 || this.chuanglianTypeList.length == 0 || this.ktTypeList.length == 0
				) {
					return this.$toast('抱歉！参数配置缺失，暂无法预览配置')
				}

				// if (!(this.selHx && this.selSuo && this.selPp && this.selMb && this.selCl && this.selKt)) {
				// 	return this.$toast('请全部选择后预览配置')
				// }

				if (!this.selHx) {
					return this.$toast('请选择户型')
				}
				if (!this.selPp) {
					return this.$toast('请选择品牌')
				}
				if (!this.selSuo) {
					return this.$toast('请选择智能锁')
				}
				if (!this.selMb) {
					return this.$toast('请选择智能面板')
				}
				if (!this.selCl) {
					return this.$toast('请选择智能窗帘')
				}
				if (!this.selKt) {
					return this.$toast('请选择智能空调')
				}

				getApp().selHx = this.selHx
				getApp().selPp = this.selPp
				getApp().selSuo = this.selSuo
				getApp().selMb = this.selMb
				getApp().selCl = this.selCl
				getApp().selKt = this.selKt
				getApp().totalPrice = this.totalPrice

				getApp().pConfig = this.pConfig
				uni.navigateTo({
					url: '/pages/index/aiControlSys_step2/index'
				})
			},
			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
				}
			},
		}
	}
</script>

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