jigesi/pages/index/fullHouseWifi/index.vue

<template>
	<view class="page">
		<navBar title="网络规划-全屋WiFi" :back="true" color="black" background="white" />

		<!-- <image :src="picUrl + '/static/other/c1.png'" mode="" class="topBg"></image> -->
		<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;">定制我家的全屋WiFi</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(item, index)" class="item " :class="[currHouseIndex==index?'act':'']"
					v-for="(item,index) in houseTypeList" :style="{'margin-right': index==1?'0':''}">
					{{item.value}}
				</view>
			</view>
		</view>
		<view class="bot">
			<view class="left">
				<view class="price">
					￥{{totalPrice.toFixed(0)}}
				</view>
				<image src="/static/index/arrDown.png" mode=""></image>
			</view>
			<button open-type="share" v-if="orderSuc" class="right" :plain="true">
				分享
			</button>

			<view class="right" v-else @click="confirmConfig">
				确认配置
			</view>
		</view>

		<u-popup :show="showFixInfo" @close="close" @open="open" round='10'>
			<view class="topBar" style="">
				<view class="left">

				</view>
				<view class="cen">
					信息填写
				</view>
				<view class="close" @click="showFixInfo=false">
					<u-icon name="close"></u-icon>
				</view>
			</view>
			<view class="pupopCon">
				<view class="item">
					<view class="label">
						收货人
					</view>
					<u--input clearable placeholder="请输入收货人" border="surround" v-model="name"
						@change="change"></u--input>
				</view>
				<view class="item">
					<view class="label">
						电话
					</view>
					<u--input clearable placeholder="请输入电话" border="surround" v-model="phone"
						@change="change"></u--input>
				</view>
				<view class="item" style="margin-bottom: 24rpx;height: auto;">
					<view class="label">
						收货地址
					</view>
					<u--textarea v-model="addr" placeholder="请输入收货地址"></u--textarea>
				</view>

				<view class="item" style="margin-bottom: 64rpx;">
					<view class="label">
						备注
					</view>
					<u--input clearable placeholder="请输入备注" border="surround" v-model="remark"
						@change="change"></u--input>
				</view>

				<button open-type="share" class="orderBtn" :plain="true">
					确认下单
				</button>
			</view>
		</u-popup>
	</view>
</template>

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

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

				picBase: this.$picBase,

				showFixInfo: false,

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

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

				currHouseIndex: -1,
				houseTypeList: [],

				selHx: null,

				totalPrice: 0,

				name: '',
				phone: '',
				addr: '',
				remark: '',

				orderId: '',
				pConfig: -1,

				orderSuc: false,
				cutdownRatio: 1,
				rule: '',

				topPic: ''
			}
		},
		async onLoad(options) {
			this.topPic = getApp().noMainImg.head_image
			console.log('4this.topPic', this.topPic);
			let res = await getIndexConfigReq({
				type: 4
			})
			if (res.code == 0) {
				console.log('获取首页配置返回值-全屋WiFi: ', res);
				this.houseTypeList = res.data.house_type

				// this.selHx = res.data.house_type[0]
				this.rule = res.data.rule.content

				// this.getPrice(4, this.selHx.id)
			}
		},
		onShow() {
			this.cutdownRatio = this.$getCutDown()
		},
		async onShareAppMessage(params) {
			if (params.from === 'button' || params.from === 'menu') {
				let phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				// if (!this.name) {
				// 	return this.$toast('请填写收货人')
				// }
				// if (!this.phone) {
				// 	return this.$toast('请填写电话')
				// }
				// if (!phoneReg.test(this.phone)) {
				// 	return this.$toast('手机号格式不正确')
				// }
				// if (!this.addr) {
				// 	return this.$toast('请填写收货地址')
				// }
				// if (!this.remark) {
				// 	return this.$toast('请填写备注')
				// }
				if (this.phone && !phoneReg.test(this.phone)) {
					return this.$toast('手机号格式不正确')
				}
				let res = await postOrderReq({
					address: this.addr,
					phone: this.phone,
					name: this.name,
					remark: this.remark,
					config_id: this.pConfig,
					type: 4
				})
				if (res.code == 0) {
					console.log('提交订单返回值: ', res);
					this.orderId = res.data.orderId
					this.showFixInfo = false
					return {
						title: '定制我家的全屋WiFi',
						imageUrl: this.picBase + this.topPic,
						path: '/pages/index/fullHouseWifi_step2/index?orderId=' + this.orderId,
						mpId: this.$appId,
						type: this.$shareType,
					}

				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			}
		},
		methods: {
			confirmConfig() {
				if (!this.selHx) {
					return this.$toast('请选择户型')
				}
				this.showFixInfo = true
			},
			toRule() {
				getApp().content = this.rule
				uni.navigateTo({
					url: '/pages/index/rule/index?type=wifi'
				})
			},
			async postOrder() {
				let res = await postOrderReq({
					address: this.addr,
					phone: this.phone,
					name: this.name,
					remark: this.remark,
					// config_id: String(this.selHx.id),
					config_id: this.pConfig,
					type: 4
				})
				if (res.code == 0) {
					console.log('提交订单返回值: ', res);
					this.$toast('提交成功')

					this.orderId = res.data.orderId
					this.showFixInfo = false
					this.orderSuc = true
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			},
			sel(item, index) {
				this.currHouseIndex = index
				this.selHx = item
				this.getPrice(4, this.selHx.id)
			},

			async getPrice(type = 4, house_type) {
				let res = await getDataMoneyReq({
					type,
					house_type,
				})
				if (res.code == 0) {
					console.log('配置价格-wifi: ', res)
					this.totalPrice = res.data.money * this.cutdownRatio

					this.pConfig = res.data.id
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			},
			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>