yijianbao_user_uniapp/pages_shopping/registerMerchant.vue

<template>
	<view class="content">
		<view class="content">
			
			<view class="inner">
				<view class="bg">
					<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/74645f3b57bc45b08b35e2449fdf90c7.jpg"></image>
					<view class="title">商家入驻</view>
				</view>
				<view class="my-form"  >
					<u-form :rules="rules" :model="form" ref="uForm" labelPosition="top" errorType="toast">
						<u-form-item required labelWidth="auto" label="企业LOGO" prop="logoUrl">
							<u-upload
								:fileList="fileList1"
								@afterRead="afterRead"
								@delete="deletePic"
								name="1"
								:maxCount="1"
							></u-upload>
						</u-form-item>
						<u-form-item required labelWidth="auto"  borderBottom label="企业简称" prop="storeName">
							<u-input border="none" placeholder="请输入企业简称" v-model="form.storeName" maxlength="60" />
						</u-form-item>
						<u-form-item required labelWidth="auto" borderBottom label="企业全称" prop="fullName">
							<u-input border="none" placeholder="请输入企业全称" v-model="form.fullName"  maxlength="60" />
						</u-form-item>
						<u-form-item required labelWidth="auto" borderBottom label="电话号码;" prop="phone">
							<u-input  border="none"  placeholder="请输入电话号码;" v-model="form.phone"  maxlength="20" />
						</u-form-item>
						<u-form-item required labelWidth="auto" borderBottom label="所在城市" prop="cityIds" @click="cityShow=true">
							<!-- <u-input border="none" placeholder="请输入所在城市" v-model="form.cityIds" /> -->
							<u-input
								v-model="form.address"
								disabled
								disabledColor="#ffffff"
								placeholder="请选择所在城市"
								border="none"
							></u-input>
							<template #right>
								<u-icon
									name="arrow-right"
								></u-icon>
							</template>
						</u-form-item>
						<u-form-item required labelWidth="auto" borderBottom label="企业地址" prop="enterpriseAddress">
							<u-input border="none" placeholder="请输入企业地址" v-model="form.enterpriseAddress"  maxlength="100" />
						</u-form-item>
						<u-form-item required labelWidth="auto"  borderBottom label="法人姓名" prop="legalPersonName">
							<u-input border="none" placeholder="请输入法人姓名" v-model="form.legalPersonName"  maxlength="20" />
						</u-form-item>
						<u-form-item required labelWidth="auto" borderBottom label="统一社会信用代码" prop="unifiedSocialCreditCode">
							<u-input border="none" placeholder="请输入统一社会信用代码" v-model="form.unifiedSocialCreditCode"  maxlength="60" />
						</u-form-item>
						<u-form-item required labelWidth="auto"  borderBottom label="营业执照" prop="businessLicense">
							<u-upload
								:fileList="fileList2"
								@afterRead="afterRead"
								@delete="deletePic"
								name="2"
								:maxCount="1"
							></u-upload>
						</u-form-item>
						<u-form-item required labelWidth="auto"  borderBottom label="营业执照有效期" prop="businessLicenseExpireStart" @click="openCalendar(1)">
							<u-input disabled disabledColor="#ffffff" border="none" placeholder="请选择营业执照有效期" v-model="businessLicenseExpire" />
							<template #right> <u-icon name="arrow-right"></u-icon> </template>
						</u-form-item>
						<u-form-item required labelWidth="auto" borderBottom label="经营范围" prop="businessScope">
							<u-input border="none" placeholder="请输入经营范围" v-model="form.businessScope"  maxlength="400" />
						</u-form-item>
						<u-form-item required labelWidth="auto"  borderBottom label="药品经营许可证" prop="drugLicense">
							<u-upload
								:fileList="fileList3"
								@afterRead="afterRead"
								@delete="deletePic"
								name="3"
								:maxCount="1"
							></u-upload>
						</u-form-item>
						<u-form-item required labelWidth="auto"  borderBottom label="药品经营许可证编号有效期" prop="drugLicenseExpiryStart" @click="openCalendar(2)">
							<u-input disabled disabledColor="#ffffff" border="none" placeholder="请选择药品经营许可证编号有效期" v-model="drugLicenseExpiry" />
							<template #right> <u-icon name="arrow-right"></u-icon> </template>
						</u-form-item>
						<u-form-item required labelWidth="auto"  borderBottom label="2类器械经营备案" prop="medicalDevice2">
							<u-upload
								:fileList="fileList4"
								@afterRead="afterRead"
								@delete="deletePic"
								name="4"
								:maxCount="1"
							></u-upload>
						</u-form-item>
						<u-form-item required labelWidth="auto"  borderBottom label="2类器械经营备案有效期" prop="medicalDevice2ExpiryStart" @click="openCalendar(3)">
							<u-input disabled disabledColor="#ffffff" border="none" placeholder="请选择2类器械经营备案有效期" v-model="medicalDevice2Expiry" />
							<template #right> <u-icon name="arrow-right"></u-icon> </template>
						</u-form-item>
						<u-form-item labelWidth="auto"  borderBottom label="1类器械生产备案" prop="medicalDevice1">
							<u-upload
								:fileList="fileList5"
								@afterRead="afterRead"
								@delete="deletePic"
								name="5"
								:maxCount="1"
							></u-upload>
						</u-form-item>
						<u-form-item labelWidth="auto"  borderBottom label="1类器械生产备案有效期" prop="medicalDevice1ExpiryStart" @click="openCalendar(4)">
							<u-input disabled disabledColor="#ffffff" border="none" placeholder="请选择1类器械生产备案有效期" v-model="medicalDevice1Expiry" />
							<template #right> <u-icon name="arrow-right"></u-icon> </template>
						</u-form-item>
						<u-form-item labelWidth="auto"  borderBottom label="3类器械经营许可证" prop="medicalDevice3">
							<u-upload
								:fileList="fileList6"
								@afterRead="afterRead"
								@delete="deletePic"
								name="6"
								:maxCount="1"
							></u-upload>
						</u-form-item>
						<u-form-item labelWidth="auto"  borderBottom label="3类器械经营许可证有效期" prop="medicalDevice3ExpiryStart" @click="openCalendar(5)">
							<u-input disabled disabledColor="#ffffff" border="none" placeholder="请选择3类器械经营许可证有效期" v-model="medicalDevice3Expiry" />
							<template #right> <u-icon name="arrow-right"></u-icon> </template>
						</u-form-item>
						<u-form-item labelWidth="auto"  borderBottom label="食品经营许可证" prop="foodLicense">
							<u-upload
								:fileList="fileList7"
								@afterRead="afterRead"
								@delete="deletePic"
								name="7"
								:maxCount="1"
							></u-upload>
						</u-form-item>
						<u-form-item labelWidth="auto"  borderBottom label="食品经营许可证有效期" prop="foodLicenseExpiryStart" @click="openCalendar(6)">
							<u-input disabled disabledColor="#ffffff" border="none" placeholder="请选择食品经营许可证有效期" v-model="foodLicenseExpiry" />
							<template #right> <u-icon name="arrow-right"></u-icon> </template>
						</u-form-item>
						<u-form-item required labelWidth="auto"  borderBottom label="医疗机构执业许可证" prop="medicalLicense">
							<u-upload
								:fileList="fileList8"
								@afterRead="afterRead"
								@delete="deletePic"
								name="8"
								:maxCount="1"
							></u-upload>
						</u-form-item>
						<u-form-item required labelWidth="auto"  borderBottom label="医疗机构执业许可证有效期" prop="medicalLicenseExpiryStart" @click="openCalendar(7)">
							<u-input disabled disabledColor="#ffffff" border="none" placeholder="请选择医疗机构执业许可证有效期" v-model="medicalLicenseExpiry" />
							<template #right> <u-icon name="arrow-right"></u-icon> </template>
						</u-form-item>
						<u-form-item required labelWidth="auto"  borderBottom label="发货联系电话" prop="sendPhone">
							<u-input border="none" placeholder="请输入发货联系电话" v-model="form.sendPhone"  maxlength="20" />
						</u-form-item>
						<u-form-item required labelWidth="auto"  borderBottom label="佣金类型" prop="shippingType">
							<u-radio-group placement="row" v-model="form.shippingType" >
								<u-radio activeColor="#2583EB" :customStyle="{marginRight: '8px'}" key="1" label="配送" name="1" > </u-radio>
								<u-radio activeColor="#2583EB" :customStyle="{marginRight: '8px'}" key="2" label="到店自提" name="2" > </u-radio>
								<u-radio activeColor="#2583EB" :customStyle="{marginRight: '8px'}" key="3" label="配送、自提" name="3" > </u-radio>
							 </u-radio-group>
						</u-form-item>
						<u-form-item required labelWidth="auto"  borderBottom label="退货联系人" prop="refundConsignee">
							<u-input border="none" placeholder="请输入退货联系人" v-model="form.refundConsignee"  maxlength="20" />
						</u-form-item>
						<u-form-item required labelWidth="auto"  borderBottom label="退货联系电话" prop="refundPhone">
							<u-input border="none" placeholder="请输入退货联系电话" v-model="form.refundPhone"  maxlength="20" />
						</u-form-item>
						<u-form-item required labelWidth="auto"  borderBottom label="退货地址" prop="refundAddress">
							<u-input border="none" placeholder="请输入退货地址" v-model="form.refundAddress"  maxlength="100" />
						</u-form-item>
						<u-form-item required labelWidth="auto"  borderBottom label="佣金类型" prop="brokerageType">
							<u-radio-group placement="row" v-model="form.brokerageType" >
								<u-radio activeColor="#2583EB" :customStyle="{marginRight: '8px'}" key="1" label="每盒" name="1" > </u-radio>
								<u-radio activeColor="#2583EB" :customStyle="{marginRight: '8px'}" key="2" label="总价" name="2" > </u-radio>
							 </u-radio-group>
						</u-form-item>
						<u-form-item required labelWidth="auto"  borderBottom label="登录帐号" prop="account">
							<u-input border="none" placeholder="请输入登录帐号" v-model="form.account"  maxlength="50" />
						</u-form-item>
					</u-form>
				</view>
				<u-picker ref="cityPicker" @cancel="cityShow = false"  keyName="n" @confirm="citySelect" @change="cityChangeHandler"  :show="cityShow" :columns="citys"></u-picker>
				<u-picker ref="deptPicker" @cancel="deptShow = false"  keyName="deptName" @confirm="deptSelect"   :show="deptShow" :columns="depts"></u-picker>
				<u-picker  @cancel="hospitalShow = false"  keyName="hospitalName" @confirm="hospitalSelect"    :show="hospitalShow" :columns="hospitals"></u-picker>
				<u-picker ref="positionPicker" @cancel="positionShow = false"  keyName="dictLabel" @confirm="positionSelect"   :show="positionShow" :columns="positions"></u-picker>
				<uni-calendar ref="calendar" :range="true" :insert="false" @confirm="confirmCalendar" />	
			</view>
			<view class="btn-box">
				<view class="sub-btn" @click="submit()">提交</view>
			</view>
		</view>
		
	</view>
</template>

<script>
import {getDictByKey,getHospitalList,getDepartmentList,sendSmsCode,uploadOSS,getCitys} from '@/api/common.js'
import {storeAdd} from './api/shopping.js'

export default {
 	data() {
 		return {
			cityIndex1:0,
			cityIndex2:0,
			allCitys:[],
			citys:[[],[],[]],
			cityShow:false,
			depts:[[]],
			deptShow:false,
			hospitals:[[]],
			hospitalShow:false,
			positions:[[]],
			positionShow:false,
			fileList1:[],
			fileList2:[],
			fileList3:[],
			fileList4:[],
			fileList5:[],
			fileList6:[],
			fileList7:[],
			fileList8:[],
			checked:0,
			form:{
				storeName:'',
				fullName:'',
				phone:'',
				cityIds:'',
				enterpriseAddress:'',
				legalPersonName:'',
				unifiedSocialCreditCode:'',
				logoUrl:'',
				businessLicense:'',
				businessLicenseExpireStart:'',
				businessLicenseExpireEnd:'',
				drugLicense:'',
				drugLicenseExpiryStart:'',
				drugLicenseExpiryEnd:'',
				medicalDevice1:'',
				medicalDevice1ExpiryStart:'',
				medicalDevice1ExpiryEnd:'',
				medicalDevice2:'',
				medicalDevice2ExpiryStart:'',
				medicalDevice2ExpiryEnd:'',
				medicalDevice3:'',
				medicalDevice3ExpiryStart:'',
				medicalDevice3ExpiryEnd:'',
				foodLicense:'',
				foodLicenseExpiryStart:'',
				foodLicenseExpiryEnd:'',
				medicalLicense:'',
				medicalLicenseExpiryStart:'',
				medicalLicenseExpiryEnd:'',
				businessScope:'',
				address:'',
				refundPhone:'',
				refundAddress:'',
				refundConsignee:'',
				brokerageType: undefined,
				account:'',
				sendPhone:'',
				shippingType: undefined,
			},
			rules: {
				logoUrl: [{required: true, message: '请上传企业LOGO'}],
				storeName: [{required: true, message: '请输入企业简称'}],
				fullName: [{required: true, message: '请输入企业全称'}],
				phone: [{required: true, message: '请输入电话号码;'}],
				cityIds: [{required: true, message: '请选择所在城市;'}],
				enterpriseAddress: [{required: true, message: '请输入企业地址'}],
				legalPersonName: [{required: true, message: '请输入法人姓名'}],
				unifiedSocialCreditCode: [{required: true, message: '请输入统一社会信用代码'}],
				businessLicense: [{required: true, message: '请上传营业执照'}],
				businessLicenseExpireStart: [{required: true, message: '请选择营业执照有效期'}],
				drugLicense: [{required: true, message: '请上传药品经营许可证'}],
				drugLicenseExpiryStart: [{required: true, message: '请选择药品经营许可证编号有效期'}],
				medicalDevice2: [{required: true, message: '请上传2类医疗器械备案'}],
				medicalDevice2ExpiryStart: [{required: true, message: '请选择2类医疗器械备案有效期'}],
				medicalLicense: [{required: true, message: '请上传医疗机构执业许可证'}],
				medicalLicenseExpiryStart: [{required: true, message: '请选择医疗机构执业许可证有效期'}],
				refundPhone: [{required: true, message: '请输入经营范围'}],
				businessScope: [{required: true, message: '请输入退货联系电话'}],
				refundAddress: [{required: true, message: '请输入退货地址'}],
				refundConsignee: [{required: true, message: '请输入退货联系人'}],
				brokerageType: [{required: true, message: '请选择佣金类型'}],
				account: [{required: true, message: '请输入登录帐号'}],
				shippingType: [{required: true, message: '请选择配送方式'}],
			},
			calendarType: 0,
			businessLicenseExpire:'',
			drugLicenseExpiry:'',
			medicalDevice2Expiry:'',
			medicalDevice1Expiry:'',
			medicalDevice3Expiry:'',
			foodLicenseExpiry:'',
			medicalLicenseExpiry:''
 		}
 	},
	onLoad(options) {
		this.form.doctorType=options.type;
		this.getCitys()
		this.getHospitalList();
		this.getDepartmentList();
		this.getDictByKey("sys_doc_position");
	},
	onShow() {
		
		
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
		
	},
 	methods: {
		openCalendar(calendarType){
			this.calendarType=calendarType
			this.$refs.calendar.open();
		},
		confirmCalendar(e) {
			if(!e.range.before||!e.range.after) {
				uni.showToast({
					title: '请选择正确的时间范围',
					icon: 'none'
				})
				return
			}
			if(this.calendarType==1) {
				this.form.businessLicenseExpireStart = e.range.before;
				this.form.businessLicenseExpireEnd = e.range.after;
				this.businessLicenseExpire = this.form.businessLicenseExpireStart+'至'+this.form.businessLicenseExpireEnd
			}else if(this.calendarType==2) {
				this.form.drugLicenseExpiryStart = e.range.before;
				this.form.drugLicenseExpiryEnd = e.range.after;
				this.drugLicenseExpiry = this.form.drugLicenseExpiryStart+'至'+this.form.drugLicenseExpiryEnd
			}else if(this.calendarType==3) {
				this.form.medicalDevice2ExpiryStart = e.range.before;
				this.form.medicalDevice2ExpiryEnd = e.range.after;
				this.medicalDevice2Expiry = this.form.medicalDevice2ExpiryStart+'至'+this.form.medicalDevice2ExpiryEnd
			}else if(this.calendarType==4) {
				this.form.medicalDevice1ExpiryStart = e.range.before;
				this.form.medicalDevice1ExpiryEnd = e.range.after;
				this.medicalDevice1Expiry = this.form.medicalDevice1ExpiryStart+'至'+this.form.medicalDevice1ExpiryEnd
			}else if(this.calendarType==5) {
				this.form.medicalDevice3ExpiryStart = e.range.before;
				this.form.medicalDevice3ExpiryEnd = e.range.after;
				this.medicalDevice3Expiry = this.form.medicalDevice3ExpiryStart+'至'+this.form.medicalDevice3ExpiryEnd
			}else if(this.calendarType==6) {
				this.form.foodLicenseExpiryStart = e.range.before;
				this.form.foodLicenseExpiryEnd = e.range.after;
				this.foodLicenseExpiry = this.form.foodLicenseExpiryStart+'至'+this.form.foodLicenseExpiryEnd
			}else if(this.calendarType==7) {
				this.form.medicalLicenseExpiryStart = e.range.before;
				this.form.medicalLicenseExpiryEnd = e.range.after;
				this.medicalLicenseExpiry = this.form.medicalLicenseExpiryStart+'至'+this.form.medicalLicenseExpiryEnd
			}
			console.log(e);
		},
		hospitalSelect(e){
			this.form.hospitalId=this.hospitals[0][e.indexs[0]].hospitalId;
			this.form.hospitalName=this.hospitals[0][e.indexs[0]].hospitalName;
			this.hospitalShow=false;
		},
		deptSelect(e){
			console.log(e)
			this.form.deptId=this.depts[0][e.indexs[0]].deptId;
			this.form.deptName=this.depts[0][e.indexs[0]].deptName;
			this.deptShow=false;
		},
		positionSelect(e){
			console.log(e)
			this.form.position=this.positions[0][e.indexs[0]].dictLabel;
			this.positionShow=false;
		},
		getDictByKey(key){
			var data={key:key}
			getDictByKey(data).then(
				res => {
					if(res.code==200){
						this.positions[0]=res.data;
					}
				},
				err => {
				}
			);
			
		},
		openContent(type){
			uni.navigateTo({
				url:"agreement?type="+type
			})
		},
		cityChangeHandler(e) {
			const {
				columnIndex,
				index,
				// 微信小程序无法将picker实例传出来，只能通过ref操作
				picker = this.$refs.cityPicker
			} = e
			if(columnIndex==0){
				this.cityIndex1=index
				console.log(this.cityIndex1)
				//获取第二列数据
				var citys1 = this.allCitys[this.cityIndex1].c;
				console.log(citys1)
				picker.setColumnValues(1,citys1)
				this.cityIndex2=0
				var citys2 = this.allCitys[this.cityIndex1].c[this.cityIndex2].c;
				picker.setColumnValues(2,citys2)
			}
			if(columnIndex==1){
				this.cityIndex2=index
				//获取第三列数据
				var citys = this.allCitys[this.cityIndex1].c[this.cityIndex2].c;
				console.log(citys)
				picker.setColumnValues(2,citys)
			}
			
		},
		citySelect(e){
			console.log(e)
			this.form.address=e.value[0].n+""+e.value[1].n+""+e.value[2].n
			this.form.cityIds=e.value[0].v+","+e.value[1].v+","+e.value[2].v;
			this.cityShow=false;
		},
	 
		getCitys(){
			var that=this;
			var data={}
			getCitys(data).then(
				res => {
					if(res.code==200){
						that.allCitys=res.data;
						that.citys=[[],[],[]];
						that.citys[0]=that.allCitys;
						that.citys[1]=that.allCitys[0].c;
						that.citys[2]=that.allCitys[0].c[0].c;
						console.log(that.citys)
					}
				},
				err => {
					 
				}
			);
		},
		getHospitalList(){
			var that=this;
			var data={}
			getHospitalList(data).then(
				res => {
					if(res.code==200){
						that.hospitals[0]=res.data;
						console.log(111)
						console.log(that.hospitals)
						
					}
				},
				err => {
					 
				}
			);
		},
		getDepartmentList(){
			var that=this;
			var data={}
			getDepartmentList(data).then(
				res => {
					if(res.code==200){
						that.depts[0]=res.data;
					}
				},
				err => {
					 
				}
			);
		},
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1)
		},
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				let item = this[`fileList${event.name}`][fileListLen]
				this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: uni.getStorageSync('requestPath')+'/app/common/uploadOSS',  
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: (res) => {
						setTimeout(() => {
							console.log(JSON.parse(res.data).url)
							resolve(JSON.parse(res.data).url)
						}, 1000)
					}
				});
			})
		},
		register(){
			storeAdd(this.form).then(
				res => {
					console.log(res)
					if(res.code==200){
						 uni.showToast({
						 	icon:'none',
						 	title:res.msg,
						 });
						 setTimeout(function() {
							 uni.navigateBack({
								 delta: 1
							 })
						 }, 2000);
					}else{
						uni.showToast({
							icon:'none',
							title: res.msg,
						});
					}
				},
				rej => {
					console.log(rej)
				}
			);
		},
 		submit(){
 			var that=this;
			if(this.fileList1.length>0){
				this.form.logoUrl=this.fileList1[0].url
			}
			if(this.fileList2.length>0){
				this.form.businessLicense=this.fileList2[0].url
			}
			if(this.fileList3.length>0){
				this.form.drugLicense=this.fileList3[0].url
			}
			if(this.fileList4.length>0){
				this.form.medicalDevice2=this.fileList4[0].url
			}
			if(this.fileList5.length>0){
				this.form.medicalDevice1=this.fileList5[0].url
			}
			if(this.fileList6.length>0){
				this.form.medicalDevice3=this.fileList6[0].url
			}
			if(this.fileList7.length>0){
				this.form.foodLicense=this.fileList7[0].url
			}
			if(this.fileList8.length>0){
				this.form.medicalLicense=this.fileList8[0].url
			}
			console.log(this.form)
 			this.$refs.uForm.validate().then(res => {
 				if(res) {
					this.register()
				}
 			})
 		},
 	}
}
 
 
</script>


<style scoped lang="scss">
 
	.content{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		
		.inner{
			padding: 20upx 20rpx 120rpx;
			.bg{
				width: 100%;
				height: 300rpx;
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				image{
					position: absolute;
					border-radius: 30rpx 30rpx 0rpx 0rpx;
					width: 100%;
					height: 100%;
				}
				.title{
					z-index: 999;
					padding: 0rpx 30rpx;
					font-size: 40upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
				}
				.desc{
					z-index: 999;
					padding: 0rpx 30rpx;
					margin-top: 20rpx;
					font-size: 28upx;
					opacity: 0.5;
					font-family: PingFang SC;
					color: #FFFFFF;
				}
			}
			.my-form{
				z-index: 1;
				background-color: #FFFFFF;
				padding: 0 30upx;
				input{
					text-align: right;
				}
			}
			 
		}
		.agree{
			padding: 10rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			.label{
				font-size: 24rpx;
			}
			.text{
				margin-left: 10rpx;
				color: royalblue;
				font-size: 24rpx;
			}
		}
		.btn-box{
			z-index: 90;
			width: 100%;
			position: fixed;
			bottom: 0;
			height: 120upx;
			padding: 0 30upx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #FFFFFF;
			.sub-btn{
				width: 100%;
				height: 88upx;
				line-height: 88upx;
				text-align: center;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				background: #2583EB;
				border-radius: 44upx;
			}
		}
	}
	 

</style>