pillow_customize_app/pages/pages_zhentou/form/form.vue

<template>
	<view class="container">
		<page-meta :root-font-size="fontsize+'px'"></page-meta> <!--动态设置html字体大小-->
		<view class="content_box">
			<view class="top_box">
				<view class="title_box">
					当前报名单：<span style="color:#D73232">报名单{{currentNum}}</span>
				</view>
				<view class="turn_box">
					<p class="turn_item prev" @click="handlePrev" v-if="currentNum > 1">上一页</p>
					<p class="turn_item next" @click="handleNext" v-if="currentNum < orderNum">下一页</p>
				</view>
				<!-- <view class="form_item">
					<view class="img_box" @click="handlePrev">
						<image src="../../../static/image/form.png" mode=""></image>
						<image src="../../../static/image/form_act.png" mode=""></image>
					</view>
					<view class="form_txt">
						报名单{{currentNum}}
					</view>
				</view>
				<view class="line_box"></view>
				<view class="form_item">
					<view class="img_box">
						<image src="../../../static/image/form.png" mode=""></image>
						<image src="../../../static/image/form_act.png" mode=""></image>
					</view>
					<view class="form_txt">
						报名单{{currentNum}}
					</view>
				</view>
				<view class="line_box"></view>
				<view class="form_item">
					<view class="img_box">
						<image src="../../../static/image/form.png" mode=""></image>
						<image src="../../../static/image/form_act.png" mode=""></image>
					</view>
					<view class="form_txt" @click="handleNext">
						报名单{{currentNum}}
					</view>
				</view> -->
			</view>
			<view class="rele_content">
				<view class="form_box">
					<view class="top_header">
						<img class="top_img" :src="imgPrefix + 'top.png'" alt="">
					</view>
					<view class="top_content">
						<view class="title">
							枕头定制信息表
						</view>
						<view class="content">
							<p style="font-size: 28rpx;">不满意一直换，直到满意为止。</p>
							<p style="font-size: 28rpx;">
								<span style="color: hsl(354,74%,57%);margin-right: 10rpx;">统一定制价格：699元</span>
								包邮到家
							</p>
							<p style="font-size: 28rpx;">如需定制请点击表格右下方小电话，长按二维码添加微信沟通付款。</p>
							<p style="font-size: 28rpx;">最终解释权归青岛易旅家居科技有限公司所有。</p>
						</view>
					</view>
					<view class="form_content">
						<uni-forms ref="valiForm" :rules="rules" :model="valiFormData" labelWidth="180px"
							label-position="top">
							<uni-forms-item label="姓名" required name="username" :label-style="{'font-size':'40rpx'}">
								<uni-easyinput :disabled="isDisabled" v-model="valiFormData.username"
									placeholder="请输入姓名" />
							</uni-forms-item>
							<uni-forms-item label="手机" required name="phone">
								<uni-easyinput :disabled="isDisabled" v-model="valiFormData.phone"
									placeholder="请输入手机" />
							</uni-forms-item>
							<!-- <uni-forms-item label="地址" required name="address">
								<uni-data-picker v-model="valiFormData.city" :localdata="aCityData" popup-title="选择城市">
							</uni-data-picker>
								<view class="">
								<button class="button" type="primary" @click="toggle('bottom')"><text class="button-text">顶部</text></button>
							</view>

								<picker class="picker_box" :range="locationArr" @change="cityChange" mode="multiSelector"
									@columnchange="columnchange" :value="multiIndex">
									<view class="city_box" v-if="province !== '' && city !== ''">
										{{province}} / {{city}} {{district ? '/' : ''}} {{district}}
									</view>
									<view class="city_box" v-if="province == '' && city == '' && district == ''">
										<span style="color: #999;">请选择地区</span>
									</view>
								</picker>
								<uni-easyinput class="address_item" v-model="valiFormData.address" placeholder="详细地址" />
							</uni-forms-item> -->
							<uni-forms-item label="身高" required name="height">
								<p class="item_txt">单位：厘米cm</p>
								<uni-easyinput :disabled="isDisabled" v-model="valiFormData.height"
									placeholder="请输入身高" />
							</uni-forms-item>
							<uni-forms-item label="体重" required name="weight">
								<p class="item_txt">单位：公斤kg</p>
								<uni-easyinput :disabled="isDisabled" v-model="valiFormData.weight"
									placeholder="请输入体重" />
							</uni-forms-item>
							<uni-forms-item label="肩颈宽度">
								<p class="item_txt">单位：厘米cm</p>
								<uni-easyinput :disabled="isDisabled" v-model="valiFormData.neckShoulderWidth"
									placeholder="请输入肩颈宽度" />
							</uni-forms-item>
							<uni-forms-item label="颈肩宽度示意图">
								<view class="wid_pre">
									<img class="wid_img" :src="imgPrefix + 'jian.png'" alt="">
									<uni-data-checkbox :disabled="isDisabled" v-model="valiFormData.width"
										:localdata="widthData" />
								</view>
							</uni-forms-item>
							<uni-forms-item label="颈长">
								<p class="item_txt">单位：厘米cm</p>
								<uni-easyinput :disabled="isDisabled" v-model="valiFormData.neckLength"
									placeholder="请输入颈长" />
							</uni-forms-item>
							<uni-forms-item label="颈长示意图">
								<view class="hei_pre">
									<img class="hei_img" :src="imgPrefix + 'length.jpg'" alt="">
									<uni-data-checkbox v-model="valiFormData.length" :localdata="lengthData" />
								</view>
							</uni-forms-item>
							<uni-forms-item label="年龄">
								<uni-data-checkbox :disabled="isDisabled" v-model="valiFormData.ageRange"
									:localdata="ageData" />
							</uni-forms-item>
							<uni-forms-item label="您每晚的睡眠时间">
								<uni-data-checkbox :disabled="isDisabled" v-model="valiFormData.sleepLength"
									:localdata="sleepData" />
							</uni-forms-item>
							<uni-forms-item label="您习惯的睡眠姿势" required name="sleepingPosture">
								<view class="pos_box">
									<view class="pos_pre">
										<img class="hei_img" :src="imgPrefix + 'yang.jpg'" alt="">
										<uni-data-checkbox :disabled="isDisabled" v-model="valiFormData.sleepingPosture"
											:localdata="sleepPosData" />
									</view>
									<view class="pos_pre">
										<img class="hei_img" :src="imgPrefix + 'ce.jpg'" alt="">
										<uni-data-checkbox :disabled="isDisabled" v-model="valiFormData.sleepingPosture"
											:localdata="sleepPosData1" />
									</view>
								</view>

							</uni-forms-item>
							<uni-forms-item label="您习惯的枕头软硬度" required name="pillowHardness">
								<uni-data-checkbox :disabled="isDisabled" v-model="valiFormData.pillowHardness"
									:localdata="posData" />
							</uni-forms-item>
							<uni-forms-item label="您喜欢的枕头类型" required name="pillowMaterial">
								<uni-data-checkbox :disabled="isDisabled" v-model="valiFormData.pillowMaterial"
									:localdata="matData" />
							</uni-forms-item>
							<uni-forms-item label="您现在的颈椎出现问题了吗">
								<uni-data-checkbox :disabled="isDisabled" v-model="valiFormData.cervicalVertebra"
									:localdata="cerData" />
							</uni-forms-item>
							<uni-forms-item label="您的其他需求">
								<uni-easyinput :disabled="isDisabled" type="textarea"
									v-model="valiFormData.otherNeed" />
							</uni-forms-item>
						</uni-forms>

						<!-- <uni-popup ref="popup" background-color="#fff" @change="change">
						<picker :range="locationArr" @change="cityChange" mode="multiSelector" @columnchange="columnchange"
						:value="multiIndex">
						<view class="city_box" v-if="province !== '' && city !== ''">
							{{province}} / {{city}} {{district ? '/' : ''}} {{district}}
						</view>
						<view class="city_box" v-if="province == '' && city == '' && district == ''">
							<span style="color: #999;">请选择地区</span>
						</view> 
						</picker>
					</uni-popup> -->
					</view>
				</view>
				<view class="footer">
					<!-- <a href="#page_privacy_modal" data-toggle="modal">《隐私协议》</a> -->
					<span>提交即授权该表单收集你的填写信息</span>
				</view>
				<view class="mask_box" v-if="isShowCode"></view>
				<view class="phone_box" @click="clickPhone" v-if="widthScreen <= 500">
					<uni-icons type="phone" size="30" color="#2eaadd"></uni-icons>
				</view>
				<view class="code_box" v-if="isShowCode">
					<span style="color: #333;font-size: 28rpx;margin-bottom: 12rpx;">扫码添加</span>
					<img class="code_img" :src="imgPrefix + 'add.png'" alt="">
				</view>
				<view class="link_box" v-if="widthScreen > 750" @click="isShowLink = !isShowLink">
					<uni-icons type="phone" size="20" color="#2eaadd"></uni-icons>
					联系我们
				</view>
				<view class="add_item" v-if="isShowLink">
					<span style="color: #333;font-size: 28rpx;margin-bottom: 12rpx;">扫码添加</span>
					<img class="code_img" :src="imgPrefix + 'add.jpg'" alt="">
				</view>
			</view>

			
		</view>
		<view class="bottom_con">
			<p class="btn_box" @click="jumpOver">跳过</p>
			<p class="btn_box" @click="submit('valiForm')">提交</p>
		</view>
	</view>
</template>
<script>
	import aCityData from "../../../util/city.json";
	import allCityData from "../../../util/all_city.json"
	const NET = require('@/util/request')
	const API = require('@/config/api')

	export default {
		data() {
			return {
				phoneNumber: '',
				imgPrefix: getApp().globalData.imgPrefix,
				isShowLink: false,
				fontsize: 12,
				// 校验表单数据
				valiFormData: {},
				isShowCode: false,
				aCityData,
				allCityData,
				userArea: '',
				province: '',
				city: '',
				district: '',
				widthScreen: '',
				locationIndex: 0,
				locationArr: [
					[],
					[],
					[]
				],
				multiIndex: [0, 0, 0],
				select: '',
				rules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '手机号不能为空'
						}, {
							validateFunction: function(rule, value, data, callback) {
								const moblie = /^1(3|4|5|6|7|8|9)\d{9}$/;
								if (!moblie.test(value)) {
									callback('请填写正确的手机号格式');
								} else {
									return true;
								}
							}
						}]
					},
					// address: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '地址不能为空'
					// 	}]
					// },
					height: {
						rules: [{
							required: true,
							errorMessage: '身高不能为空'
						}]
					},
					weight: {
						rules: [{
							required: true,
							errorMessage: '体重不能为空'
						}]
					},
					pillowHardness: {
						rules: [{
							required: true,
							errorMessage: '请选择枕头软硬度'
						}]
					},
					pillowMaterial: {
						rules: [{
							required: true,
							errorMessage: '请选择枕头类型'
						}]
					},
					sleepingPosture: {
						rules: [{
							required: true,
							errorMessage: '请选择睡眠姿势'
						}]
					},

				},
				lengthData: [{
					text: '颈椎长度',
					value: '1'
				}],
				widthData: [{
					text: '颈肩宽度',
					value: '1'
				}],
				// 年龄数据源
				ageData: [{
					text: '18~30',
					value: '18~30'
				}, {
					text: '31~50',
					value: '31~50'
				}, {
					text: '51~60',
					value: '51~60'
				}, {
					text: '60以上',
					value: '60以上'
				}],
				//睡眠范围
				sleepData: [{
					text: '2~4小时',
					value: '2~4小时'
				}, {
					text: '4~6小时',
					value: '4~6小时'
				}, {
					text: '6~8小时',
					value: '6~8小时'
				}, {
					text: '8小时以上',
					value: '8小时以上'
				}],
				// 枕头软硬度
				posData: [{
					text: '偏硬',
					value: 1
				}, {
					text: '适中',
					value: 2
				}, {
					text: '偏软',
					value: 3
				}],
				// 枕头材质
				matData: [{
						text: '羽丝绒枕',
						value: 1
					},
					{
						text: '草本植物枕(荞麦、决明子等)',
						value: 2
					},
					{
						text: '乳胶枕',
						value: 3
					},
					{
						text: '慢回弹记忆枕',
						value: 4
					},
					{
						text: '软管枕',
						value: 5
					},
					{
						text: '其他',
						value: 6
					},
				],
				cerData: [{
						text: "是",
						value: 1
					},
					{
						text: "否",
						value: 0
					},
				],
				sleepPosData: [{
						text: '仰睡',
						value: 1
					},

				],
				sleepPosData1: [{
					text: '侧睡',
					value: 2
				}, ],
				isDisabled: false,
				orderNo: '',
				orderNum: '',
				orderData: [],
				currentNum: null,
				pageFrom: '',
				formData: []
			}
		},
		onShow() {},
		onLoad(options) {
			// let srceenNunber=15;	//因设计图是1920所有把设计图分为19.2份，所以html字体大小为100px
			let that = this;

			// 			//窗体改变大小触发事件
			// 			uni.onWindowResize((res) => {
			// 			    console.log('变化后的窗口宽度=' ,res.size.windowWidth);
			// 				that.fontsize=parseFloat(res.size.windowWidth)/srceenNunber;
			// 			})

			// 			//打开获取屏幕大小
			// 			uni.getSystemInfo({
			// 				success(res) {
			// 					console.log('设备信息：',res);
			// 					that.fontsize=res.screenWidth/srceenNunber;
			// 					console.log('字体大小：',that.fontsize);
			// 				}
			// 			})
			const res = uni.getSystemInfoSync();
			console.log(res.screenWidth)
			that.widthScreen = res.screenWidth
			if (res.screenWidth < 750) {
				that.fontsize = 100 * (res.screenWidth / 750)
			} else if (res.screenWidth > 750 && res.screenWidth == 1920) {
				that.fontsize = 100 * (res.screenWidth / 3840)
			};
			// console.log(this.a)
			this.getData()
			console.log(options)
			this.orderNo = options.orderNo
			this.orderNum = options.orderNum
			this.pageFrom = options.pageFrom
			// if(options.pageFrom == 'order'){
			// 	this.phoneNumber = options.phone
			// 	// this.getInfo()
			// }
			this.getOrderInfo()
			// this.getCurrentArea('北京市')
		},
		methods: {
			// 根据订单号获取已填写的订单信息
			getOrderInfo(type) {
				uni.request({
					url: getApp().globalData.baseUrl + '/blade-desk/custom-made-info/list-by-order-no?orderNo=' +
						this.orderNo,
					method: 'GET',
					header: {
						'Blade-Auth': 'bearer ' + uni.getStorageSync('token')
					},
					success: (res) => {
						console.log(res)
						if (res.data.code == 200) {
							this.orderData = res.data.data;
							if (type == 'save') {
								if (this.orderData.length == this.orderNum) {
									if (this.pageFrom == 'order') {
										uni.navigateBack({
											url: "/pages/pages_zhentou/order/order"
										})
									} else {
										uni.redirectTo({
											url: "/pages/pages_zhentou/order/order"
										})
									}

								} else {
									this.currentNum = this.orderData.length + 1;
								}
							} else {
								if (this.orderData.length == this.orderNum) {
									this.currentNum = 1;
									this.valiFormData = this.orderData[0]
									this.valiFormData.neckShoulderWidth = this.valiFormData
										.neckShoulderWidth == -1 ? '' : this.valiFormData.neckShoulderWidth;
									this.valiFormData.neckLength = this.valiFormData.neckLength == -1 ? '' :
										this.valiFormData.neckLength;
									this.valiFormData.ageRange = this.valiFormData.ageRange == -1 ? '' : this
										.valiFormData.ageRange;
									this.valiFormData.sleepLength = this.valiFormData.sleepLength == -1 ? '' :
										this.valiFormData.sleepLength;
									this.valiFormData.cervicalVertebra = this.valiFormData.cervicalVertebra ==
										-1 ? '' : this.valiFormData.cervicalVertebra;
									this.valiFormData.otherNeed = this.valiFormData.otherNeed == -1 ? '' : this
										.valiFormData.otherNeed;

								} else {
									this.currentNum = this.orderData.length + 1;
								}
							}
						} else if (res.data.code == 401) {
							this.doLogin()
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}



					}
				})
			},
			handlePrev() {
				// console.log(this.currentNum - 2)
				this.currentNum = this.currentNum - 1;
				this.valiFormData = this.orderData[this.currentNum - 1];
				if (!this.valiFormData) {
					this.valiFormData = {}
				} else {
					this.valiFormData.neckShoulderWidth = this.valiFormData.neckShoulderWidth == -1 ? '' : this
						.valiFormData.neckShoulderWidth;
					this.valiFormData.neckLength = this.valiFormData.neckLength == -1 ? '' : this.valiFormData.neckLength;
					this.valiFormData.ageRange = this.valiFormData.ageRange == -1 ? '' : this.valiFormData.ageRange;
					this.valiFormData.sleepLength = this.valiFormData.sleepLength == -1 ? '' : this.valiFormData
						.sleepLength;
					this.valiFormData.cervicalVertebra = this.valiFormData.cervicalVertebra == -1 ? '' : this.valiFormData
						.cervicalVertebra;
					this.valiFormData.otherNeed = this.valiFormData.otherNeed == -1 ? '' : this.valiFormData.otherNeed;
				}
			},
			jumpOver() {
				if (this.pageFrom == 'order') {
					uni.navigateBack({
						url: "/pages/pages_zhentou/order/order"
					})
				} else {
					uni.redirectTo({
						url: "/pages/pages_zhentou/order/order"
					})
				}
			},
			handleNext() {
				console.log(this.currentNum)
				this.currentNum = this.currentNum + 1
				this.valiFormData = this.orderData[this.currentNum - 1];
				if (!this.valiFormData) {
					console.log('123')
					this.valiFormData = {}
				} else {
					console.log('456')
					this.valiFormData.neckShoulderWidth = this.valiFormData.neckShoulderWidth == -1 ? '' : this
						.valiFormData.neckShoulderWidth;
					this.valiFormData.neckLength = this.valiFormData.neckLength == -1 ? '' : this.valiFormData.neckLength;
					this.valiFormData.ageRange = this.valiFormData.ageRange == -1 ? '' : this.valiFormData.ageRange;
					this.valiFormData.sleepLength = this.valiFormData.sleepLength == -1 ? '' : this.valiFormData
						.sleepLength;
					this.valiFormData.cervicalVertebra = this.valiFormData.cervicalVertebra == -1 ? '' : this.valiFormData
						.cervicalVertebra;
					this.valiFormData.otherNeed = this.valiFormData.otherNeed == -1 ? '' : this.valiFormData.otherNeed;
				}
			},
			// 获取表单信息
			getInfo() {
				uni.request({
					// this.phoneNumber
					url: getApp().globalData.baseUrl + '/blade-desk/custom-made-info/get-newest?phone=15932584136',
					method: 'GET',
					header: {
						'Blade-Auth': 'bearer ' + uni.getStorageSync('token')
					},
					success: (res) => {
						console.log(res)
						if (res.data.code == 200) {
							this.valiFormData = {
								username: res.data.data.username == '-1' ? '' : res.data.data.username,
								ageRange: res.data.data.ageRange == '-1' ? '' : res.data.data.ageRange,
								height: res.data.data.height == '-1' ? '' : res.data.data.height,
								neckLength: res.data.data.neckLength == '-1' ? '' : res.data.data
									.neckLength,
								neckShoulderWidth: res.data.data.neckShoulderWidth == '-1' ? '' : res.data
									.data.neckShoulderWidth,
								pillowHardness: res.data.data.pillowHardness == '-1' ? '' : res.data.data
									.pillowHardness,
								pillowMaterial: res.data.data.pillowMaterial == '-1' ? '' : res.data.data
									.pillowMaterial,
								sleepingPosture: res.data.data.sleepingPosture == '-1' ? '' : res.data.data
									.sleepingPosture,
								status: res.data.data.status == '-1' ? '' : res.data.data.status,
								weight: res.data.data.weight == '-1' ? '' : res.data.data.weight,
								address: res.data.data.detail == '-1' ? '' : res.data.data.detail,
								sleepLength: res.data.data.sleepLength == '-1' ? '' : res.data.data
									.sleepLength,
								cervicalVertebra: res.data.data.cervicalVertebra == '-1' ? '' : res.data
									.data.cervicalVertebra,
								otherNeed: res.data.data.otherNeed == '-1' ? '' : res.data.data.otherNeed,
								phone: res.data.data.phone == '-1' ? '' : res.data.data.phone
							}
							this.province = res.data.data.province == '-1' ? '' : res.data.data.province;
							this.city = res.data.data.city == '-1' ? '' : res.data.data.city;
							this.district = res.data.data.district == '-1' ? '' : res.data.data.district;
							// this.getCurrentArea(this.province)
							console.log(this.valiFormData)
							if (this.valiFormData.username !== '' &&
								this.valiFormData.phone !== '' && this.valiFormData.height !== '' &&
								this.valiFormData.weight !== '' && this.valiFormData.pillowHardness !== '' &&
								this.valiFormData.pillowMaterial !== '' && this.valiFormData
								.sleepingPosture !== '') {
								this.isDisabled = true
							} else {
								this.isDisabled = false
							}
						} else if (res.data.code == 401) {
							this.doLogin()
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
			getCurrentArea(value) {
				this.allCityData.map((item, index) => {
					if (item.province == value) {
						this.multiIndex[0] = index
						item.citys.map((item1, index1) => {
							if (item1.city == this.province) {
								console.log('111')
								this.locationArr[1].push(item.city);
							}
							if (item1.city == this.city) {

							}
						})

					}
				})
			},
			toggle(type) {
				this.$refs.popup.open(type)
			},
			clickPhone() {
				this.isShowCode = !this.isShowCode;
			},
			getData() {
				console.log(this.allCityData)
				this.allCityData.map(item => {
					this.locationArr[0].push(item.province);
				})
				this.allCityData[0].citys[0].areas.map(item => {
					this.locationArr[1].push(item.area)
				})

				console.log(this.locationArr)
			},
			cityChange(e) {
				console.log(e)
				this.multiIndex = e.detail.value;
				console.log(this.locationArr)
				this.province = this.locationArr[0][this.multiIndex[0]]
				this.city = this.locationArr[1][this.multiIndex[1]]
				this.district = this.locationArr[2][this.multiIndex[2]]
			},
			columnchange(e) {
				let value = e.detail.value;
				console.log(e.detail)
				if (e.detail.column == 0) {
					this.locationArr[1] = [];
					this.locationArr[2] = []
					let tmp = this.allCityData.find(item => item.province == this.locationArr[0][value])
					console.log(tmp)
					if (tmp.citys.length == 1) {
						tmp.citys[0].areas.map(item => {
							this.locationArr[1].push(item.area)
						})
					} else {
						tmp.citys.map(item => {
							this.locationArr[1].push(item.city)
						})
						tmp.citys[0].areas.map(item => {
							this.locationArr[2].push(item.area);
						})
					}
					// 第一列滑动  第二列 和第三列 都变为第一个
					this.multiIndex = [value, 0, 0]

				}
				if (e.detail.column == 1) {
					this.locationArr[2] = [];
					this.multiIndex[1] = value;
					if (this.allCityData[this.multiIndex[0]].citys.length !== 1) {
						this.allCityData[this.multiIndex[0]].citys[value].areas.map(item => {
							this.locationArr[2].push(item.area)
						})
					}
					this.multiIndex.splice(2, 1, 0)
					console.log(this.multiIndex)
				}
				// 第三列滑动
				if (e.detail.column === 2) {
					this.multiIndex[2] = e.detail.value
				}
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log(this.valiFormData);
					let params = {};
					params = {
						username: this.valiFormData.username,
						phone: this.valiFormData.phone,
						province: this.province,
						city: this.city,
						district: this.district,
						detail: this.valiFormData.detail,
						height: this.valiFormData.height,
						weight: this.valiFormData.weight,
						sleepingPosture: this.valiFormData.sleepingPosture,
						pillowHardness: this.valiFormData.pillowHardness,
						pillowMaterial: this.valiFormData.pillowMaterial,
						neckShoulderWidth: this.valiFormData.neckShoulderWidth,
						neckLength: this.valiFormData.neckLength,
						ageRange: this.valiFormData.ageRange,
						sleepLength: this.valiFormData.sleepLength,
						cervicalVertebra: this.valiFormData.cervicalVertebra,
						otherNeed: this.valiFormData.otherNeed,
						orderNo: this.orderNo,
						id: this.valiFormData.id ? this.valiFormData.id : ''
					}
					console.log(getApp().globalData.baseUrl)

					uni.request({
						url: getApp().globalData.baseUrl + '/blade-desk/custom-made-info/save',
						data: params,
						method: 'post',
						success: res => {
							console.log(res)
							if (res.data.code == "200" || data.code === "") {
								uni.showToast({
									title: '提交成功',
									icon: 'none'
								});
								this.valiFormData = {},
									this.multiIndex[0, 0, 0];
								this.city = ''
								this.province = '';
								this.district = '';
								this.getOrderInfo('save')
							} else if (res.data.code == 401) {
								this.doLogin()
							} else {
								uni.showToast({
									title: '提交失败',
									icon: 'none'
								});
							}
						},
						fail: res => {
							reject(res)
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			//登录
			doLogin(type) {
				uni.showLoading({
					title: '登录中',
					mask: true
				});
				uni.request({
					url: getApp().globalData.baseUrl + '/blade-auth/getToken',
					method: 'POST',
					data: {
						openId: getApp().globalData.openId,
						phone: this.phone
					},
					header: {
						'Authorization': 'Basic c2FiZXI6c2FiZXJfc2VjcmV0'
					},
					success: (res) => {
						if (res.data.code == 200) {
							uni.setStorageSync('token', res.data.data.access_token);
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					},
					complete: () => {
						uni.hideLoading();
					}
				})
			},
			// 省市区确认事件
			pickerChange(e) {
				var _this = this
				_this.multiIndex = e.detail.value
				// 获取省市区总数据

				let firstCity = this.oldpProvinceDataList[_this.multiIndex[0]].dictName
				let selectName = ''
				if (_this.locationArr[0][_this.multiIndex[0]] == firstCity) {
					selectName = this.oldpProvinceDataList[_this.multiIndex[0]].dictCode
				}
				let secondCity = this.oldpProvinceDataList[_this.multiIndex[0]].children[_this.multiIndex[1]]

				if (_this.locationArr[1][_this.multiIndex[1]] == secondCity.dictName) {
					selectName += '/' + secondCity.dictCode
				}

				let thirdCity = this.oldpProvinceDataList[_this.multiIndex[0]].children[_this.multiIndex[1]].children[_this
					.multiIndex[2]]
				if (_this.locationArr[2][_this.multiIndex[2]] == thirdCity.dictName) {
					selectName += '/' + thirdCity.dictCode
				}

				_this.select =
					_this.locationArr[0][_this.multiIndex[0]] + "," +
					_this.locationArr[1][_this.multiIndex[1]] + "," +
					_this.locationArr[2][_this.multiIndex[2]]
				_this.locationPro = selectName
				_this.proDetail.region = _this.locationPro
			},
			// 每列滑动的监听
			pickerColumnchange(e) {
				// this.moveTypes = 'bottom'
				// this.type = 'suuccess'
				// this.msg = '成功！'
				// this.imgUrl = this.successUrl
				var _this = this
				// 第几列滑动
				console.log("第几列滑动 = " + JSON.stringify(e.detail.column))
				// 第几列滑动选中的下标
				console.log("第几列滑动选中的下标 = " + JSON.stringify(e.detail.value))
				// 第一列滑动
				if (e.detail.column === 0) {
					_this.multiIndex[0] = e.detail.value
					// 第二列更新相应的数据
					_this.locationArr[1] = _this.oldpProvinceDataList[_this.multiIndex[0]].children.map((item,
						index) => {
						return item.dictName
					})
					if (_this.oldpProvinceDataList[_this.multiIndex[0]].children.length === 1) {
						_this.locationArr[2] = _this.oldpProvinceDataList[_this.multiIndex[0]].children[0].children
							.map((
								item,
								index) => {
								return item.dictName
							})
					} else {
						_this.locationArr[2] = _this.oldpProvinceDataList[_this.multiIndex[0]].children[_this
							.multiIndex[
								1]].children.map((item, index) => {
							return item.dictName
						})
					}
					// 第一列滑动  第二列 和第三列 都变为第一个
					_this.multiIndex.splice(1, 1, 0)
					_this.multiIndex.splice(2, 1, 0)
				}
				// // 第二列滑动
				if (e.detail.column === 1) {
					_this.multiIndex[1] = e.detail.value
					_this.locationArr[2] = _this.oldpProvinceDataList[_this.multiIndex[0]].children[_this
						.multiIndex[
							1]].children.map((item, index) => {
						return item.dictName
					})
					// 	// 第二列 滑动 第三列 变成第一个
					_this.multiIndex.splice(2, 1, 0)
				}
				// 第三列滑动
				if (e.detail.column === 2) {
					_this.multiIndex[2] = e.detail.value
				}
			},

		}
	}
</script>

<style lang="scss">
	.uni-form-item .title {
		padding: 20rpx 0;
	}

	.container {
		position: relative;
		/* max-width: 1920px;
		max-height: 920px; */
		// background-image: url('http://47.104.224.41:9000/etriphome/appresource/image/bag.png');
		background-position: top center;
		background-size: cover;
		background-repeat: no-repeat;
		overflow-y: hidden;
		height: 100%;
		width: 100%;
		position: absolute;
		/* padding-bottom: 30px; */

		.content_box {
			width: 690rpx;
			/* max-width: 700px; */
			height: 80%;
			background-color: #fff;
			margin: 0 auto;
			margin-top: 2%;
			border-radius: 24rpx;
			padding: 30rpx 0;

			.top_box {
				width: 690rpx;
				margin: 0 auto;
				// background: #fff;
				// display: flex;
				// align-items: center;
				// justify-content: space-around;
				
				.title_box{
					width:100%;
					text-align: left;
					margin-left: 30rpx;
					color: #666;
					font-size: 26rpx;
				}
				
				.turn_box{
					width: 690rpx;
					display: flex;
					margin: 28rpx 0 36rpx 0;
					
					.turn_item{
						width: 200rpx;
						height: 78rpx;
						background: #FFFFFF;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						border: 1rpx solid #D73232;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 26rpx;
						color: #D73232;
						margin-right: 106rpx;
						margin-left: 30rpx;
						
						&.next{
							color: #666666;
							border: 1rpx solid #A5A5A5;
						}
					}
				}

				.form_item {
					width: 100rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.img_box {
						width: 68rpx;
						height: 68rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.form_txt {
						color: #666;
						font-size: 24rpx;
					}
				}

				.line_box {
					width: 153rpx;
					height: 1px;
					background: #D1D1D1;
				}
			}

			.rele_content {
				width: 100%;
				height: 80%;
				margin: 0 auto;
				position: relative;
				overflow: auto;
			}

			

			.footer {
				margin: 0 auto;
				max-width: 100%;
				height: 80rpx;
				font-size: 28rpx;
				color: #666;
				display: flex;
				align-items: center;
				justify-content: center;
			}


			.link_box {
				position: absolute;
				top: 0;
				// left: 68.5%;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				background-color: #fff;
				border: 2rpx dashed transparent;
				border-radius: 12rpx;
				box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, .1);
				height: 440rpx;
				line-height: 40rpx;
				padding: 32rpx 20rpx;
				text-align: center;
				font-size: 28rpx;
				width: 80rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				cursor: pointer;
			}

			.add_item {
				width: 600rpx;
				height: 600rpx;
				position: absolute;
				background: #fff;
				right: 120rpx;
				bottom: 43%;
				z-index: 99;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, .1);

				.code_img {
					width: 200rpx;
				}
			}

			.form_box {
				max-width: 100%;
				background: #fff;
				margin: 0 auto;
				border-radius: 24rpx;
				/* margin-top: 64rpx; */
				box-shadow: 0 24rpx 48rpx rgba(0, 0, 0, .05);

				.top_header {
					width: 100%;
					/* height: 342rpx; */
					border-top-left-radius: 24rpx;
					border-top-right-radius: 24rpx;

					.top_img {
						width: 100%;
						height: 100%;
						border-top-left-radius: 24rpx;
						border-top-right-radius: 24rpx;
					}
				}

				.top_content {
					padding: 30rpx;

					.num_box {
						font-family: inherit;
						font-size: 40rpx;
						font-weight: normal;
						color: rgb(7, 0, 89);
						text-align: left;
						margin-bottom: 16rpx;
					}

					.title {
						font-family: inherit;
						font-size: 40rpx;
						font-weight: normal;
						color: rgb(7, 0, 89);
						text-align: center;
						margin-bottom: 16rpx;
					}

					.content {
						color: #666;
						line-height: 1.5;
						max-width: 100%;
						overflow: visible;
						word-break: break-word;

						p {
							text-align: left;
							font-size: 28rpx;
						}
					}
				}

				.form_content {
					margin: 0rpx 30rpx;
					padding: 20rpx 0rpx;

					.btn_box {
						width: 484rpx;
						font-family: inherit;
						font-size: 28rpx;
						font-weight: normal;
						color: rgb(255, 255, 255);
						padding: 20rpx 110rpx;
						background-color: rgb(245, 189, 55);
						border-color: rgb(255, 255, 255);
						border-width: 0rpx;
						box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 1px;
						margin: 40rpx auto;
					}

					.button_box {
						width: 484rpx;
						height: 60rpx;
						display: flex;
						align-self: center;
						justify-content: space-between;
						padding: 0 100rpx;

						.button {
							width: 100rpx;
							height: 60rpx;
							background: #fff;
							display: flex;
							align-items: center;
							justify-content: center;
							line-height: 60rpx;
							font-size: 26rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
							border-radius: 20rpx;
							border: 1rpx solid #A5A5A5;
							// margin: 0 60rpx;
						}
					}

					.uni-forms-item {

						/* background-color: red; */
						::v-deep.checklist-box {
							width: 686rpx;
							height: 92rpx;
							border: 2rpx solid #eaeaea;
							padding-left: 20rpx;
							border-radius: 12rpx;
						}

						.address_item {
							margin-top: 16rpx;
						}

						.uni-forms-item__label {
							font-family: inherit;
							font-size: 14px;
							font-weight: bold;
							color: rgb(7, 0, 89);

							.is-required {
								margin-right: 10rpx;
							}
						}

						.wid_pre {
							width: 306rpx;
							height: 400rpx;
							display: flex;
							flex-direction: column;

							.wid_img {
								width: 100%;
								border-top-left-radius: 16rpx;
								border-top-right-radius: 16rpx;
							}

							::v-deep.checklist-box {
								width: 306rpx;
								height: 94rpx;
								margin: 0;
								border-radius: 0rpx;
								border-bottom-left-radius: 16rpx;
								border-bottom-right-radius: 16rpx;
							}
						}

						.hei_pre {
							width: 306rpx;
							height: 400rpx;
							display: flex;
							flex-direction: column;

							.hei_img {
								width: 100%;
								border-top-left-radius: 16rpx;
								border-top-right-radius: 16rpx;
							}

							::v-deep.checklist-box {
								width: 306rpx;
								height: 94rpx;
								margin: 0;
								border-radius: 0rpx;
								border-bottom-left-radius: 16rpx;
								border-bottom-right-radius: 16rpx;
							}
						}

						.pos_box {
							display: flex;
							justify-content: space-around;

							.pos_pre {
								width: 306rpx;
								height: 400rpx;
								display: flex;
								flex-direction: column;

								.hei_img {
									width: 100%;
									border-top-left-radius: 16rpx;
									border-top-right-radius: 16rpx;
								}

								::v-deep.checklist-box {
									width: 306rpx;
									height: 94rpx;
									margin: 0;
									border-radius: 0px;
									border-bottom-left-radius: 16rpx;
									border-bottom-right-radius: 16rpx;
								}
							}
						}

						.item_txt {
							font-size: 28rpx;
							margin-bottom: 24rpx;
							color: #666;
						}

						.city_box {
							width: 100%;
							height: 70rpx;
							padding-left: 20rpx;
							border: 1px solid;
							display: flex;
							align-items: center;
							display: flex;
							box-sizing: border-box;
							flex-direction: row;
							align-items: center;
							border: 1px solid #dcdfe6;
							border-radius: 8rpx;
							font-size: 24rpx;
						}

					}
				}

			}

			.mask_box {
				width: 100%;
				height: 100%;
				background: #000;
				position: absolute;
				z-index: 98;
				top: 0;
				opacity: 0.6;
			}

			.phone_box {
				align-items: center;
				background-color: #fff;
				border-radius: 50%;
				bottom: 220rpx;
				box-shadow: 0 24rpx 24rpx rgba(0, 0, 0, .1);
				display: flex;
				height: 120rpx;
				justify-content: center;
				margin-top: 12rpx;
				position: fixed;
				right: 24rpx;
				width: 120rpx;
				z-index: 98;
			}

			.code_box {
				width: 350rpx;
				height: 320rpx;
				background: url('http://47.104.224.41:9000/etriphome/appresource/image/add_bag.png') no-repeat;
				background-size: 100% 100%;
				position: fixed;
				right: 24rpx;
				bottom: 360rpx;
				z-index: 99;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.code_img {
					width: 200rpx;
				}
			}
		}
		
		.bottom_con {
			width: 100%;
			height: 160rpx;
			background-color: #fff;
			display: flex;
			justify-content: center;
			// align-items: center;
			margin: 0 auto;
			// margin-top: 40rpx;
			position: fixed;
			bottom: 0;
		
			.btn_box {
				width: 320rpx;
				height: 78rpx;
				margin-top: 30rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				border: 1rpx solid #D73232;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				color: #D73232;
		
				&:last-child {
					background: #D73232;
					color: #fff;
					margin-left: 50rpx;
				}
			}
		}
	}
</style>