<template>
	<view class="page">
		<view class="progressBox">
			<view class="progressName">
				<text class="cur">{{stepName}}</text>
				<text class="nex">{{nextSepName}}</text>
			</view>
			<u-line-progress class="progress" :percent="percent" :show-percent="false" :height="10"
				inactive-color="#DADCE6" active-color="#F70027"></u-line-progress>
		</view>

		<view class="stepBox">
			<view class="stepItem" v-if="step==1">
				<view v-for="(item,index) in stepOneList" :key="index">
					<view class="itemBox">
						<view class="name">
							{{item.name}} <text class="tip" v-if="item.tip">{{item.tip}}</text>
						</view>
						<view class="con1" v-if="item.type==1">
							<input class="input" type="text" v-model="dataOne[item.field]" :placeholder="item.text"
								placeholder-style="color: #CECECEFF" @focus="inputFcous(item)" />
							<view style="width: 50rpx;height: 50rpx;display: flex;align-items: center;justify-content: center;position: absolute;
							top: -2rpx;
							right: 10rpx;
							z-index: 10;" @click="delInputText(item.field)">
								<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/delete.png"
									v-if="item.delIcon" class="delIcon" mode="widthFix"></image>
							</view>

						</view>
						<view class="con2" v-if="item.type==2">
							<!-- 未上传成功 -->
							<image :src="businessLicenseDemo" v-if="!businessLicenseUploadIsSuccess" class="conImage"
								mode="widthFix" @click="chooseImg"></image>
							<!-- 上传成功 -->
							<image :src="dataOne.BusinessLicense" v-if="businessLicenseUploadIsSuccess" class="conImage"
								mode="heightFix"></image>
							<view class="reupload" v-if="businessLicenseUploadIsSuccess" @click="chooseImg">
								重新上传
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="stepItem" v-if="step==2">
				<view v-for="(item,index) in stepTwoList" :key="index">
					<view class="itemBox">
						<view class="name">
							{{item.name}}&nbsp; <text class="tip" v-if="item.tip">{{item.tip}}</text>
						</view>
						<view class="con1" v-if="item.type==1">
							<input class="input" type="text" v-model="dataTwo[item.field]" :placeholder="item.text"
								placeholder-style="color: #CECECEFF" @focus="inputFcous(item)" />
							<view style="width: 50rpx;height: 50rpx;display: flex;align-items: center;justify-content: center;position: absolute;
								top: -2rpx;
								right: 10rpx;
								z-index: 10;" @click="delInputText(item.field)">
								<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/delete.png"
									v-if="item.delIcon" class="delIcon" mode="widthFix"></image>
							</view>
						</view>
						<view class="con3" v-if="item.type==2">
							<view class="numberBbox">
								<image class="numberImg" :src="reduceIcon" mode="widthFix" @click="reduce"></image>
								<input class="numberInput" type="number" disabled
									v-model.number="dataTwo[item.field]" />
								<image class="numberImg" :src="addIcon" mode="widthFix" @click="add"></image>
							</view>
						</view>
						<view class="con3" v-if="item.type==3">
							<!-- 区间滑块 -->
							<view class="sliderCurNumBox">
								<view style="display: flex; align-items: baseline;" v-if="dataTwo.BuiltUpArea>0">
									<input class="sliderCurNum" disabled type="text" v-model="dataTwo.BuiltUpArea" />-
								</view>
								<input class="sliderCurNum" disabled type="text" v-model="dataTwo.EndBuiltUpArea" />m²
							</view>
							<rangeSlider :width="592" :height="120" :liveMode="true" background-color="#DADCE6D9"
								:block-size="36" active-color="#F95771FF" :min="rangeSliderMin" :max="rangeSliderMax"
								:values="builtArea" @rangechange="rangechange"></rangeSlider>
							<view class="rangeSliderNum">
								<text>{{rangeSliderMin}}</text>
								<text>{{rangeSliderMax}}</text>
							</view>
						</view>
						<view class="con4" v-if="item.type==4">
							<view class="customTypeBox">
								<view v-for="(item1,index1) in customList" :key="index1">
									<view class="customName" @click="chooseType(item1)"
										:class="{chooseType:item1.checked}">
										{{item1.Name}}
									</view>
								</view>
							</view>
							<input type="text" class="customTypeInput" v-model="dataTwo.CustomerOtherType"
								placeholder="以上都不合适，可在此输入客户群体" placeholder-style="color: #CECECEFF" />
						</view>
					</view>
				</view>
			</view>
			<view class="stepItem" v-if="step==3">
				<view v-for="(item,index) in stepThreeList" :key="index">
					<view class="itemBox">
						<view class="name">
							{{item.name}}&nbsp; <text class="tip" v-if="item.tip">{{item.tip}}</text>
						</view>
						<view class="con1" v-if="item.type==1">
							<input class="input" type="text" v-model="dataThree[item.field]" :placeholder="item.text"
								placeholder-style="color: #CECECEFF" @focus="inputFcous(item)" />
							<view style="width: 50rpx;height: 50rpx;display: flex;align-items: center;justify-content: center;position: absolute;
								top: -2rpx;
								right: 10rpx;
								z-index: 10;" @click="delInputText(item.field)">
								<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/delete.png"
									v-if="item.delIcon" class="delIcon" mode="widthFix"></image>
							</view>
						</view>
						<view class="con6" v-if="item.type==2">
							<u-radio-group v-model="dataThree[item.field]">
								<u-radio v-for="(item1, index1) in goodsType" :key="index1" :name="item1.Id"
									shape="circle" @change="radioChange">
									<image :src="goodsTypeImg[item1.Id]" mode="widthFix" class="goodsTypeImg"></image>
								</u-radio>
							</u-radio-group>
						</view>
						<view class="con3" v-if="item.type==3">
							<view class="sliderCurNumBox">
								<view style="display: flex; align-items: baseline;" v-if="dataThree.AreaRequirement>0">
									<input class="sliderCurNum" disabled type="text"
										v-model="dataThree.AreaRequirement" />-
								</view>
								<input class="sliderCurNum" disabled type="text"
									v-model="dataThree.EndAreaRequirement" />m²
							</view>
							<!-- 区间滑块 -->
							<rangeSlider :width="592" :height="120" :liveMode="true" background-color="#DADCE6D9"
								:block-size="36" active-color="#F95771FF" :min="rangeSliderMin" :max="rangeSliderMax"
								:values="AreaRequire" @rangechange="AreaRequireChange"></rangeSlider>
							<view class="rangeSliderNum">
								<text>{{AreaRequireMin}}</text>
								<text>{{AreaRequireMax}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 审核未通过 -->
			<view v-if="dataOne.CompanyStatus!=1">
				<view class="butBox" @click="nextStep">
					<image :src="nextIcon" class="next" mode="widthFix" v-if="step!=3"></image>
					<text v-if="step==3">完成</text>
				</view>
				<view class="skip" v-if="step==3">
					<text @click="finish">跳过</text>
				</view>
			</view>
			<!-- 审核通过 -->
			<view class="butBox" v-if="dataOne.CompanyStatus==1" @click="backBtn">
				<image :src="nextIcon" class="next" mode="widthFix" v-if="step!=3"></image>
				<text v-if="step==3">返回</text>
			</view>
		</view>

	</view>
	</view>
</template>

<script>
	import rangeSlider from "./components/range-slider.vue"
	export default {
		components: {
			rangeSlider
		},
		computed: {

		},
		data() {
			return {
				pageTitle: "企业认证",
				step: 1,
				nextIcon: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/next.png",
				percent: 33.33,
				stepName: "第1步 企业基础资料",
				nextSepName: "第2步",
				// type=1：输入框，2：照片
				stepOneList: [{
					name: "营业执照",
					tip: "(点击图片上传营业执照)",
					type: 2
				}, {
					name: "企业名称",
					text: "请输入企业名称",
					field: "CompanyName",
					delIcon: false,
					type: 1
				}, {
					name: "统一社会信用代码",
					text: "输入18位社会信用代码",
					field: "UnifiedCode",
					delIcon: false,
					type: 1
				}, {
					name: "法人代表",
					text: "请输入法人姓名",
					field: "LegalPerson",
					delIcon: false,
					type: 1
				}, {
					name: "联系电话",
					text: "请输入11位手机或者带区号座机号码",
					field: "Mobile",
					delIcon: false,
					type: 1
				}, ],
				//type=1：输入框，2：步进器，3：多选
				stepTwoList: [{
					name: "品牌名称",
					text: "请输入品牌名称",
					field: "BrandName",
					delIcon: false,
					type: 1
				}, {
					name: "店铺数量",
					text: "",
					field: "ShopNum",
					type: 2
				}, {
					name: "店铺面积",
					text: "",
					field: "",
					type: 3
				}, {
					name: "品牌定位",
					text: "请输入品牌定位",
					field: "FullBrandName",
					delIcon: false,
					type: 1
				}, {
					name: "客户群体",
					tip: "(可多选)",
					text: "",
					field: "CustomerType",
					type: 4,
				}],
				customList: [], //客户群体
				//type=1：输入框，2：单选，3：范围
				stepThreeList: [{
					name: "扩店区域",
					text: "请输入扩店区域",
					field: "StoreExpansion",
					delIcon: false,
					type: 1
				}, {
					name: "商品性质 ",
					tip: "(单选)",
					text: "",
					field: "ProjectType",
					type: 2
				}, {
					name: "面积要求",
					text: "",
					field: "",
					type: 3
				}],
				goodsType: [], //商品性质
				goodsTypeValue: "",
				businessLicenseDemo: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/upLoadDemo.png", //营业执照占位图片
				businessLicenseUploadIsSuccess: false, //营业执照是否上传成功
				access_token: "", //百度ai平台token
				dataOne: {
					CompanyId: 0,
					CompanyName: "",
					BusinessLicense: "", //营业执照
					UnifiedCode: "",
					LegalPerson: "",
					Mobile: "",
					CompanyStatus: 2
				},
				dataTwo: {
					CompanyId: 0,
					BrandName: "",
					ShopNum: 0,
					BuiltUpArea: 0,
					EndBuiltUpArea: 0,
					FullBrandName: "",
					CustomerType: "",
					CustomerOtherType: ""
				},
				reduceIcon: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/reduceIcon.png",
				addIcon: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/addIcon.png",
				builtArea: [1, 100], //店铺面积
				rangeSliderMin: 0, //区间滑块最小值
				rangeSliderMax: 100, //区间滑块最大值
				dataThree: {
					StoreExpansion: "", //扩展区域
					ProjectType: "", //商品性质
					AreaRequirement: 0, //面积要求
					EndAreaRequirement: 0, //面积要求
				},
				goodsTypeImg: {
					1: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goodstype-baihuo.png",
					2: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goodstype-shappingmall.png",
					3: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goodstype-center.png",
					4: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goodstype-other.png"
				},
				AreaRequire: [],
				AreaRequireMin: 0,
				AreaRequireMax: 100,
				finishBtn: "完成",
			}
		},
		methods: {
			// 输入框获取焦点
			inputFcous(e) {
				e.delIcon = true
			},
			delInputText(field) {
				this.dataOne[field] = ""
				this.dataTwo[field] = ""
				this.dataThree[field] = ""
			},
			// 输入框失去焦点
			inputBlur(e) {
				e.delIcon = false
			},
			// 获取客户群体枚举
			getCustomerTypeEnumList() {
				let parms = {
					url: "/api/AppletTrade/GetCustomerTypeEnumList",
				}
				this.request2(parms, (res) => {
					if (res.resultCode == 1) {
						res.data.map((e) => {
							e.checked = false
						})
						this.customList = res.data
					}
				})
			},
			// 获取商品性质
			GetProjectTypeEnumList() {
				let parms = {
					url: "/api/AppletTrade/GetProjectTypeEnumList",
				}
				this.request2(parms, (res) => {
					if (res.resultCode == 1) {
						this.goodsType = res.data
					}
				})
			},
			//选择营业执照照片
			chooseImg() {
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						wx.getFileSystemManager().readFile({
							filePath: res.tempFilePaths[0],
							encoding: 'base64', //编码格式
							success: (ans) => {
								that.getImgInfo(ans.data, that.access_token, (_res) => {
									console.log("getImgInfo", _res)
									if (_res.data.direction == 1) { //未定义，图片类型错误
										wx.showToast({
											title: '图片类型错误!',
											icon: 'none',
											duration: 1000
										})

									} else {
										let data = _res.data.words_result
										that.upFile(res.tempFilePaths[0], (uploadRes) => {
											that.dataOne.BusinessLicense = JSON
												.parse(
													uploadRes.data).data
											that.businessLicenseUploadIsSuccess =
												true
											that.dataOne.CompanyName = data.单位名称
												.words
											that.dataOne.LegalPerson = data.法人
												.words
											that.dataOne.UnifiedCode = data.社会信用代码
												.words
										})
									}

								})
							},
						})
						// 
					}
				});
			},
			//提取营业执照信息
			getImgInfo(data, token, resCall) {
				let that = this
				uni.request({
					url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/business_license?access_token=' + token,
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					data: {
						image: data,
					},
					success(res) {
						resCall(res)
					},
					fail(res) {

					}
				})
			},
			//图片上传
			upFile(img, resCall) {
				var that = this;
				wx.showLoading({
					title: '上传中'
				})
				let MallBaseId = uni.getStorageSync("mall_UserInfo").MallBaseId ? uni.getStorageSync("mall_UserInfo")
					.MallBaseId : 1;
				let action = that.host2 + '/api/File/UploadTencent?MallBaseId=' + MallBaseId
				uni.uploadFile({
					url: action,
					filePath: img,
					name: 'field',
					formData: {
						user: 'test'
					},
					success: (uploadFileRes) => {
						uni.hideLoading()
						resCall(uploadFileRes)
					},
					fail: function(res) {
						that.businessLicenseUploadIsSuccess = false
						wx.showToast({
							title: '上传失败!',
							icon: 'none',
							duration: 1000
						})
					}
				});
			},
			//获取百度ai平台token
			getAccess_token() {
				let that = this;
				uni.request({
					url: 'https://aip.baidubce.com/oauth/2.0/token', // 百度获取token接口地址
					data: {
						'grant_type': 'client_credentials', // 固定写死
						'client_id': 'QWTnMLORmrozodmfIyOjHGoB',
						'client_secret': 'DcsUjSai1OnIHd61B2xIX4zlYqv8E1bP'
					},
					method: 'GET',
					success(res) {
						that.access_token = res.data.access_token
					},
					fail(e) {}
				})
			},
			//步骤一
			stepOne() {

				let parms = {
					url: "/api/AppletTrade/SetCompany",
					data: this.dataOne
				}
				this.request2(parms, (res) => {
					if (res.resultCode == 1) {
						this.dataOne.CompanyId = res.data.CompanyId
						this.stepName = "第2步 品牌信息"
						this.nextSepName = "第3步"
						this.step++
						this.percent += this.percent
						this.showTemplate(res.data.template_message_list)
					}
				})
			},
			// 步骤二
			stepTwo() {
				this.dataTwo.CompanyId = this.dataOne.CompanyId
				this.dataTwo.BuiltUpArea = this.builtArea[0]
				this.dataTwo.EndBuiltUpArea = this.builtArea[1]
				let ids = []
				this.customList.map((e) => {
					if (e.checked) {
						ids.push(e.Id)
					}
				})
				this.dataTwo.CustomerType = ids.toString()
				let parms = {
					url: "/api/AppletTrade/SetBrand",
					data: {
						...this.dataTwo,
						...this.dataThree
					}
				}
				this.request2(parms, (res) => {
					if (res.resultCode == 1) {
						this.stepName = "第3步 扩店需求"
						this.nextSepName = "完成"
						this.step++
						this.percent += this.percent
					}
				})
			},
			//步骤三
			stepThree() {
				let that = this
				this.dataThree.AreaRequirement = this.AreaRequire[0]
				this.dataThree.EndAreaRequirement = this.AreaRequire[1]
				let parms = {
					url: "/api/AppletTrade/SetBrand",
					data: {
						...this.dataTwo,
						...this.dataThree
					}
				}
				this.request2(parms, (res) => {
					if (res.resultCode == 1) {
						that.finish()
					}
				})
			},
			//返回个人中心
			finish() {
				uni.navigateTo({
					url: "/pages/user-center/user-center"
				})
			},
			//下一步
			nextStep() {
				if (this.percent > 100) {
					this.percent = 100
				}
				if (this.step <= 3) {
					if (this.step == 1) {
						//审核中或审核通过就不提交请求
						if (this.dataOne.CompanyStatus == 0 || this.dataOne.CompanyStatus == 1) {
							this.stepName = "第2步 品牌信息"
							this.nextSepName = "第3步"
							this.step++
							this.percent += this.percent
						} else {
							this.stepOne()
						}
					} else if (this.step == 2) {
						//审核中或审核通过就不提交请求
						if (this.dataOne.CompanyStatus == 0 || this.dataOne.CompanyStatus == 1) {
							this.stepName = "第3步 扩店需求"
							this.nextSepName = "完成"
							this.step++
							this.percent += this.percent
						} else {
							this.stepTwo()
						}
					} else if (this.step == 3) {
						//审核中或审核通过就不提交请求
						if (this.dataOne.CompanyStatus == 0 || this.dataOne.CompanyStatus == 1) {
							this.finish()
						} else {
							this.stepThree()
						}
					}
				}
			},
			// 审核通过
			backBtn(){
				if (this.percent > 100) {
					this.percent = 100
				}
				if (this.step == 1) {
					this.stepName = "第2步 品牌信息"
					this.nextSepName = "第3步"
					this.step++
					this.percent += this.percent
				}else if(this.step == 2){
					this.stepName = "第3步 扩店需求"
					this.nextSepName = "完成"
					this.step++
					this.percent += this.percent
				}else if(this.step == 3){
					this.finish()
				}
			},
			chooseType(item) { //选择客户群体
				item.checked = !item.checked
			},
			// 店铺面积范围
			rangechange(e) {
				this.builtArea[0] = parseInt(e.minValue)
				this.builtArea[1] = parseInt(e.maxValue)
				this.dataTwo.BuiltUpArea = parseInt(e.minValue)
				this.dataTwo.EndBuiltUpArea = parseInt(e.maxValue)
			},
			// 减号按钮
			reduce() {
				if (this.dataTwo.ShopNum > 0) {
					this.dataTwo.ShopNum--
				} else {
					this.dataTwo.ShopNum = 0
				}

			},
			// 加号按钮
			add() {
				this.dataTwo.ShopNum++
			},
			// 获取公司认证信息
			getUserCompany() {
				let that = this
				let parms = {
					url: "/api/AppletTrade/GetUserCompany",
				}
				this.request2(parms, (res) => {
					if (res.resultCode == 1 && res.data != null) {
						this.dataOne = res.data
						this.businessLicenseUploadIsSuccess = true
						that.getUserCompanyBrand(res.data.CompanyId)
					}
				})
			},
			// 根据公司id获取公司品牌
			getUserCompanyBrand(id) {
				let that = this
				let parms = {
					url: "/api/AppletTrade/GetUserCompanyBrand",
					data: {
						CompanyId: id
					}
				}
				this.request2(parms, (res) => {
					if (res.resultCode == 1) {
						that.dataTwo.BrandName = res.data.BrandName
						that.dataTwo.ShopNum = res.data.ShopNum
						that.dataTwo.BuiltUpArea = res.data.BuiltUpArea
						that.dataTwo.EndBuiltUpArea = res.data.EndBuiltUpArea
						that.dataTwo.FullBrandName = res.data.FullBrandName
						that.dataTwo.CustomerType = res.data.CustomerType
						that.dataTwo.CustomerOtherType = res.data.CustomerOtherType
						that.customList.map((e) => {
							if (e.Id == res.data.CustomerType) {
								e.checked = true
							}
						})
						that.dataThree.StoreExpansion = res.data.StoreExpansion
						that.dataThree.ProjectType = res.data.ProjectType
						that.dataThree.AreaRequirement = res.data.AreaRequirement
						that.dataThree.EndAreaRequirement = res.data.EndAreaRequirement
					}
				})
			},
			// 单选
			radioChange(e) {
				// console.log(e);
			},
			// 面积要求范围
			AreaRequireChange(e) {
				this.AreaRequire[0] = parseInt(e.minValue)
				this.AreaRequire[1] = parseInt(e.maxValue)
				this.dataThree.AreaRequirement = parseInt(e.minValue)
				this.dataThree.EndAreaRequirement = parseInt(e.maxValue)
			},
			//显示模板
			showTemplate(template) {
				uni.requestSubscribeMessage({
					tmplIds: template,
					success(res) {
						console.log(res)

					},
					fail(err) {
						console.log(err)
						// uni.showToast({
						// 	title: '！',
						// 	icon: 'none'
						// })
					}
				})
			}

		},
		mounted() {
			this.getCustomerTypeEnumList()
			this.GetProjectTypeEnumList()
			this.getAccess_token()
			this.getUserCompany()
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #F6F6F6;
		min-height: 100vh;
		height: 100%;
		padding-bottom: 70rpx;

		.progressBox {
			width: 650rpx;
			height: 120rpx;
			margin: 0 auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-content: center;

			.progressName {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				font-weight: bold;

				.cur {
					color: #F70027;
				}

				.nex {
					color: #B9BCCA;
				}
			}

			.progress {
				width: 100%;
			}

		}

		.stepBox {
			width: 680rpx;
			margin: 0 auto;
			background-color: #FFFFFF;
			box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(218, 220, 230, 0.85);
			border-radius: 30rpx;
			padding: 53rpx 45rpx 70rpx;

			.stepItem {
				width: 100%;
				padding-bottom: 100rpx;

				.itemBox {
					width: 100%;
					margin-bottom: 55rpx;

					.name {
						font-size: 28rpx;
						font-weight: bold;
						color: #1F1F1F;
						margin-bottom: 38rpx;

						.tip {
							font-weight: 400;
							color: #AAAAAAFF;
							margin-left: 10rpx;
						}
					}

					.con1 {
						height: 60rpx;
						position: relative;

						.input {
							// width: 100%;
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #000000;
							border-bottom: 1rpx solid #DADCE6;
							padding-bottom: 24rpx;
							vertical-align: baseline;
							padding-right: 50rpx;
						}

						.delIcon {
							width: 32rpx;
							height: 32rpx;
							// width: 100%;
							// height: 100%;

						}

					}

					.con2 {
						position: relative;

						.conImage {
							width: 590rpx;
							height: 367rpx;
							// border: 1rpx solid #000000;
						}

						.reupload {
							width: 185rpx;
							height: 60rpx;
							background-color: #F70027;
							border-radius: 20rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 28rpx;
							font-weight: bold;
							color: #FFFFFF;
							position: absolute;
							left: 50%;
							transform: translateX(-50%);
							bottom: 40rpx;
						}
					}

					.con3 {
						// border-bottom: 1rpx solid #DADCE6;
						padding-bottom: 24rpx;
						position: relative;

						.numberBbox {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.numberImg {
								width: 38rpx;
								height: 38rpx;
							}

							.numberInput {
								margin: 0 10rpx;
								flex-grow: 5;
								text-align: center;
							}
						}
					}

					.con4 {
						border-bottom: 1rpx solid #DADCE6;
						padding-bottom: 24rpx;

						.customTypeBox {
							display: flex;
							// flex-wrap: wrap;
							justify-content: space-between;
							margin-bottom: 20rpx;

							.customName {
								width: 110rpx;
								height: 50rpx;
								background-color: #FFFFFF;
								border: 1rpx dashed #1F1F1F;
								opacity: 0.3;
								border-radius: 10rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 28rpx;
								font-weight: bold;
								color: #000000;
								// margin-right: 50rpx;
								margin-bottom: 20rpx;
							}

							& :nth-child(4n)>.customName {
								margin-right: 0rpx !important;
							}

						}

						.customTypeInput {
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #000000;
						}
					}

					.con6 {
						display: flex;
						flex-wrap: wrap;

						.goodsTypeImg {
							width: 278rpx;
							height: 144rpx;
							background-color: #232323;
							opacity: 0.6;
							border-radius: 18rpx;
							margin-bottom: 30rpx;
						}
					}
				}

			}

		}

		.butBox {
			margin: 10rpx auto;
			width: 100rpx;
			height: 100rpx;
			background-color: #F70027;
			box-shadow: 0rpx 4rpx 40rpx 0rpx rgba(249, 54, 85, 0.58);
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			font-weight: bold;
			color: #FFFFFF;

			.next {
				width: 100%;
			}
		}

		.skip {
			text-align: center;
			font-size: 28rpx;
			font-weight: 500;
			color: #B7B7B7;
		}
	}

	.chooseType {
		background-color: #F95771FF !important;
		color: #F70027 !important;
		border: none !important;
	}

	// 修改滑块样式
	/deep/.block {
		background-color: #FFFFFF;
		border: 4rpx solid #F70027;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(232, 76, 100, 0.74);
		border-radius: 10rpx;
	}

	.rangeSliderNum {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #000000;
	}

	/deep/.u-radio-group {
		display: flex;
		flex-wrap: wrap;
	}

	/deep/.u-radio-group :nth-child(2n)>.u-radio {
		margin-right: 0rpx;
	}

	/deep/.u-radio {
		position: relative;
		width: 278rpx;
		border-radius: 18rpx;
		margin-right: 30rpx;
	}

	/deep/.u-radio__icon-wrap {
		position: absolute;
		top: 17rpx;
		right: 17rpx;
		z-index: 10;
	}

	.sliderCurNumBox {
		display: flex;
		justify-content: center;
		align-items: baseline;

		.sliderCurNum {
			width: 100rpx;
			text-align: center;
			font-size: 40rpx;
			font-weight: 800;
			color: #F70027;
		}
	}
</style>
