jigesi/pages/index/customNoMian_step1/index.vue

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

		<image :src="picUrl+'/static/other/noMain_img4.png'" 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">
					<view class="con">
						详情
					</view>
					<image src="/static/index/halfRight.png" mode="" style="width: 24rpx;height: 8rpx;">
					</image>
				</view>

			</view>

			<view class="label" @click="handleOpenOrClose(1)">
				<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)">
				<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('kj',item,index)" class="item "
					:class="[currHouseIndex1==index?'act':'']" v-for="(item,index) in lockTypeList">
					{{item.value}}
				</view>
			</view>

			<view class="label" @click="handleOpenOrClose(3)">
				<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('pp',item,index)" class="item "
					:class="[currHouseIndex2==index?'act':'']" v-for="(item,index) in brandTypeList">
					{{item.value}}
				</view>
			</view>

			<view class="label" @click="handleOpenOrClose(4)">
				<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('xl',item,index)" class="item "
					:class="[currHouseIndex5==index?'act':'']" v-for="(item,index) in serTypeList">
					{{item.value}}
				</view>
			</view>


			<view class="label" @click="handleOpenOrClose(5)">
				<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('bb',item,index)" class="item "
					:class="[currHouseIndex3==index?'act':'']" v-for="(item,index) in chuanglianTypeList">
					{{item.value}}
				</view>
			</view>


			<view class="label" style="margin-bottom: 32rpx;">
				包含灯型
			</view>

			<view class="parms2">
				<view @click="goPreview(item.id)" class="itemLast " :class="[currHouseIndex4==index?'act':'']"
					v-for="(item,index) in ktTypeList">
					{{item.name}}
				</view>
			</view>

		</view>

		<view class="rule" @click="goRule">
			<image src="/static/index/ruleImg.png" mode=""></image>
			<view class="txt">
				挑选规则
			</view>
		</view>
		<view class="bot">
			<view class="left" @click="showConfig=true">
				<view class="price" style="min-width: 200rpx;">
					￥{{totalPrice.toFixed(2)}}
				</view>
				<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="preConfig">
				预览配置
			</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">
					<view class="top">
						<view class="name">
							户型
						</view>
						<view class="info">
							{{selHx.value}}
						</view>
					</view>
				</view>
				<view class="item">
					<view class="top">
						<view class="name">
							空间
						</view>
						<view class="info">
							{{selKj.value}}
						</view>
					</view>
				</view>
				<view class="item">
					<view class="top">
						<view class="name">
							品牌
						</view>
						<view class="info">
							{{selPp.value}}
						</view>
					</view>
				</view>
				<view class="item">
					<view class="top">
						<view class="name">
							系列
						</view>
						<view class="info">
							{{selXl.value}}
						</view>
					</view>
				</view>
				<view class="item">
					<view class="top">
						<view class="name">
							版本
						</view>
						<view class="info">
							{{selBb.value}}
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

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

		},
		data() {
			return {
				picUrl: this.$picUrl,
				addOrLessIcon1: '/static/index/add.png',
				addOrLessIcon2: '/static/index/add.png',
				addOrLessIcon3: '/static/index/add.png',
				addOrLessIcon4: '/static/index/add.png',
				addOrLessIcon5: '/static/index/add.png',

				show1: false,
				show2: false,
				show3: false,
				show4: false,
				show5: false,

				showConfig: false,

				currHouseIndex: 0,
				currHouseIndex1: 0,
				currHouseIndex2: 0,
				currHouseIndex3: 0,
				currHouseIndex4: 0,
				currHouseIndex5: 0,
				houseTypeList: [

				],
				brandTypeList: [

				],
				lockTypeList: [

				],
				chuanglianTypeList: [

				],
				ktTypeList: [{
						id: 1,
						name: '筒灯'
					},
					{
						id: 2,
						name: '射灯'
					},
					{
						id: 3,
						name: '线性灯'
					},
					{
						id: 4,
						name: '磁吸轨道灯'
					}
				],
				serTypeList: [],

				selHx: null,
				selKj: null,
				selPp: null,
				selXl: null,
				selBb: null,

				rule: '',

				totalPrice: 0,

				pConfig: -1,
				cutdownRatio: 1
			}
		},
		async onLoad(o) {
			let res = await getIndexConfigReq({
				type: 1
			})
			if (res.code == 0) {
				console.log('获取首页配置返回值-无主灯: ', res);
				this.houseTypeList = res.data.house_type
				this.brandTypeList = res.data.brand
				this.lockTypeList = res.data.space
				this.serTypeList = res.data.series
				this.chuanglianTypeList = res.data.version

				this.selHx = res.data.house_type[0]
				this.selKj = res.data.space[0]
				this.selPp = res.data.brand[0]
				this.selXl = res.data.series[0]
				this.selBb = res.data.version[0]
				this.rule = res.data.rule.content

				this.getPrice(1, this.selHx.id, this.selKj.id, this.selPp.id, this.selXl.id, this.selBb.id)

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

		},
		onShow() {
			this.cutdownRatio = this.$getCutDown()
		},
		computed: {},
		methods: {
			async getPrice(type = 1, house_type, space, brand, series, version) {
				let res = await getDataMoneyReq({
					type,
					house_type,
					space,
					brand,
					series,
					version
				})
				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'
					})
				}
			},

			sel(type, item, index) {
				if (type == 'hx') {
					this.currHouseIndex = index
					this.selHx = item
				} else if (type == 'kj') {
					this.currHouseIndex1 = index
					this.selKj = item
				} else if (type == 'pp') {
					this.currHouseIndex2 = index
					this.selPp = item
				} else if (type == 'xl') {
					this.currHouseIndex5 = index
					this.selXl = item
				} else if (type == 'bb') {
					this.currHouseIndex3 = index
					this.selBb = item
				}

				this.getPrice(1, this.selHx.id, this.selKj.id, this.selPp.id, this.selXl.id, this.selBb.id)
			},

			preConfig() {
				getApp().selHx = this.selHx
				getApp().selKj = this.selKj
				getApp().selPp = this.selPp
				getApp().selXl = this.selXl
				getApp().selBb = this.selBb

				getApp().pConfig = this.pConfig

				getApp().totalPrice = this.totalPrice
				uni.navigateTo({
					url: '/pages/index/customNoMian_step2/index'
				})
			},
			goPreview(id) {
				uni.navigateTo({
					url: '/pages/index/customNoMain/index?id=' + id
				})
			},
			handleOpenOrClose(i) {
				if (this['addOrLessIcon' + i] == '/static/index/shortLine.png') {
					this['addOrLessIcon' + i] = '/static/index/add.png'
					this['show' + i] = false
				} else {
					this['addOrLessIcon' + i] = '/static/index/shortLine.png'
					this['show' + i] = true
				}
			},
			goRule() {
				getApp().content = this.rule
				uni.navigateTo({
					url: '/pages/index/rule/index?type=noMain'
				})
			}
		}
	}
</script>

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