From 30c802cd05ebe92469dab1be873d5cdbd42d6831 Mon Sep 17 00:00:00 2001
From: davy <davy@example.com>
Date: Tue, 1 Apr 2025 18:36:23 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=EF=BC=9A1.=20=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E6=B3=A8=E5=86=8C=E9=A1=B5=E9=9D=A2=E9=80=BB=E8=BE=91?=
 =?UTF-8?q?=202.=20=E6=9B=B4=E6=96=B0API=E8=AF=B7=E6=B1=82=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/regionPicker.vue  |   86 ++-
 manifest.json                |    4 +-
 pages.json                   |    4 +-
 pages/index/registration.vue | 1408 +++++++++++++++++++++-------------
 4 files changed, 930 insertions(+), 572 deletions(-)

diff --git a/components/regionPicker.vue b/components/regionPicker.vue
index a901812..0f38edf 100644
--- a/components/regionPicker.vue
+++ b/components/regionPicker.vue
@@ -1,6 +1,6 @@
 <template>
   <view>
-    <uni-popup ref="popup" type="bottom">
+    <uni-popup ref="popup" type="bottom" @change="handlePopupChange">
       <view class="popup-content">
         <view class="popup-header">
 			
@@ -49,19 +49,42 @@ export default {
   },
   created() {
     this.provinces = areaData;
-    this.cities = this.provinces[0].children;
-    this.areas = this.cities[0].children;
+    this.initDefaultValue();
   },
   methods: {
+    initDefaultValue() {
+      const defaultProvince = this.provinces[0];
+      if (defaultProvince) {
+        const defaultCities = defaultProvince.children || [];
+        this.cities = defaultCities;
+        
+        const defaultCity = defaultCities[0];
+        if (defaultCity) {
+          const defaultAreas = defaultCity.children || [];
+          this.areas = defaultAreas;
+          
+          this.selectedProvince = defaultProvince;
+          this.selectedCity = defaultCity;
+          this.selectedArea = defaultAreas[0] || null;
+        }
+      }
+    },
     bindChange(e) {
       const val = e.detail.value;
+      const [provinceIndex, cityIndex, areaIndex] = val;
+      
+      const selectedProvince = this.provinces[provinceIndex];
+      const cities = selectedProvince?.children || [];
+      this.cities = cities;
+      
+      const selectedCity = cities[cityIndex];
+      const areas = selectedCity?.children || [];
+      this.areas = areas;
+      
       this.pickerValue = val;
-      this.cities = this.provinces[val[0]].children;
-      this.areas = this.cities[val[1]].children;
-
-      this.selectedProvince = this.provinces[val[0]];
-      this.selectedCity = this.cities[val[1]];
-      this.selectedArea = this.areas[val[2]];
+      this.selectedProvince = selectedProvince;
+      this.selectedCity = selectedCity;
+      this.selectedArea = areas[areaIndex];
     },
     cancelSelection() {
       this.$emit('update:show', false);
@@ -69,6 +92,12 @@ export default {
     confirmSelection() {
       this.$emit('selected', this.selectedProvince, this.selectedCity, this.selectedArea);
       this.$emit('update:show', false);
+    },
+    handlePopupChange(e) {
+      if (!e.show) {
+        this.$emit('update:show', false);
+        this.$emit('close');
+      }
     }
   },
   watch: {
@@ -86,36 +115,45 @@ export default {
 </script>
 
 <style scoped>
-/* 样式可以根据需要调整 */
 .popup-content {
   background-color: #fff;
-  border-top-left-radius: 16px;
-  border-top-right-radius: 16px;
-  padding: 20px;
+  border-top-left-radius: 24rpx;
+  border-top-right-radius: 24rpx;
+  padding: 32rpx;
   box-sizing: border-box;
-  
 }
 
 .popup-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: 32rpx;
+  padding: 0 20rpx;
 }
 
-.cancel-button, .confirm-button {
-  padding: 10px 20px;
-  border: none;
-  border-radius: 5px;
-  color: #fff;
-  background-color: #007aff;
+.popup-header view {
+  font-size: 32rpx;
+  padding: 10rpx 20rpx;
 }
 
-.cancel-button {
-  background-color: #ccc;
+.popup-header view:first-child {
+  color: #999;
+}
+
+.popup-header view:last-child {
+  color: #D42E78;
+  font-weight: 500;
 }
 
 picker-view {
-  height: 300px;
+  height: 420rpx;
+  width: 100%;
+}
+
+picker-view-column view {
+  line-height: 84rpx;
+  text-align: center;
+  font-size: 32rpx;
+  color: #333;
 }
 </style>
diff --git a/manifest.json b/manifest.json
index 6bf7715..2e7bf93 100644
--- a/manifest.json
+++ b/manifest.json
@@ -5,7 +5,7 @@
     "versionName" : "1.0.0",
     "versionCode" : "100",
     "transformPx" : false,
-    "sassImplementationName": "node-sass",
+    "sassImplementationName" : "node-sass",
     /* 5+App特有相关 */
     "app-plus" : {
         "usingComponents" : true,
@@ -51,7 +51,7 @@
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "wxafc7be9f3ada44a0",
+        "appid" : "wx5de24df912a4834c",
         "setting" : {
             "urlCheck" : false,
             "minified" : true
diff --git a/pages.json b/pages.json
index d7af990..9e3613d 100644
--- a/pages.json
+++ b/pages.json
@@ -22,7 +22,7 @@
 			{
 				"navigationBarTitleText" : "认证登录",
 				"navigationBarBackgroundColor": "#19367A",
-				"navigationBarTextStyle": "#FFFFFF"
+				"navigationBarTextStyle": "white"
 			}
 		},
 		{
@@ -381,7 +381,7 @@
 			{
 				"pagePath": "pages/index/myJoin",
 				"text": "我参与的",
-				"iconPath": "/static/tabbar/tick.png",
+				"iconPath": "static/tabbar/tick.png",
 				"selectedIconPath": "static/tabbar/tick-s.png"
 			},
 			{
diff --git a/pages/index/registration.vue b/pages/index/registration.vue
index 8dd1ceb..fdd9fb4 100644
--- a/pages/index/registration.vue
+++ b/pages/index/registration.vue
@@ -1,604 +1,924 @@
 <template>
-	<view class="">
-		
-	
-	<view class="page-content padding">
-		<!-- 步骤条 -->
-		<view class="regist-top">
-			 <view class="regist-top-1 align-center flex">
-			 	<view class="" >
-					<image src="@/static/one.png" class="top-image-1" style="" mode=""></image>
+	<view class="page-container">
+		<view class="page-content">
+			<!-- 步骤条 -->
+			<view class="step-bar">
+				<view class="step-icons flex align-center">
+					<view><image src="@/static/one.png" class="step-icon" mode="aspectFit"></image></view>
+					<view><image src="@/static/arrow-right.png" class="step-arrow" mode="aspectFit"></image></view>
+					<view><image src="@/static/two.png" class="step-icon" mode="aspectFit"></image></view>
+					<view><image src="@/static/arrow-right.png" class="step-arrow" mode="aspectFit"></image></view>
+					<view><image src="@/static/three.png" class="step-icon" mode="aspectFit"></image></view>
 				</view>
-				<view class="">
-					<image src="@/static/arrow-right.png" class="top-image-2" style="" mode=""></image>
-				</view>
-				<view class="" >
-					<image src="@/static/two.png" class="top-image-1" mode=""></image>
-				</view>
-				<view class="">
-					<image src="@/static/arrow-right.png" mode="" class="top-image-2"></image>
-				</view>
-				<view class="" >
-					<image src="@/static/three.png" class="top-image-1" mode=""></image>
-				</view>
-			 </view>
-			 <view class="regist-top-2 align-center flex">
-			 	<view class="">提交申请</view>
-				<view class="">平台审核</view>
-				<view class="">享受返利</view>
-			 </view>
-		</view>
-		<view class="regist-consult align-center flex justify-between">
-			<view class="" style="width: 60%;">入驻助手,帮你解决入驻问题,快速上手赢取品牌返利。</view>
-			<view class="">
-				<button style="background:#D42E78;width:124rpx;font-size: 24rpx;color: #FFF;">咨询</button>
-			</view>
-		</view>
-		<view class="reg-materials">
-			<view class="font-32 materials-top fontw-6">所需材料</view>
-			<view class="align-center flex justify-between" style="margin-top: 28rpx;">
-				<view class="" style="width: 60%;">
-					<view class="font-28" >1.营业执照</view>
-					<view class="">需提供有效期内商家本人的,与门头照片相符合的营业执照.</view>
-				</view>
-				<view class="">
-					<image src="@/static/bg/bgs.png" mode="" style="width: 166rpx;height:112rpx"></image>
+				<view class="step-labels flex align-center">
+					<view>提交申请</view>
+					<view>平台审核</view>
+					<view>享受返利</view>
 				</view>
 			</view>
-			<view class="align-center flex justify-between" style="margin-top: 28rpx;">
-				<view class="" style="width: 60%;">
-					<view class="font-28">2.门头照片</view>
-					<view class="">需提供营业执照对应的门店,门头照片一张.</view>
-				</view>
-				<view class="">
-					<image src="@/static/bg/bgs.png" mode="" style="width: 166rpx;height:112rpx"></image>
-				</view>
-			</view>
-		</view>
-		<!-- 门店资料 -->
-		<view class="regist-store">
-			<view class="font-32 fontw-6" style="margin-bottom: 28rpx;">门店资料</view>
-			<view class="flex-col">
-				<!-- <view class="label">门店地址</view> -->
-				<view class="flex justify-between align-center zd-address"  @click="getMyLocation">
-					<input v-model="form.address" placeholder="门店地址" class="flex-1"></input>
-					<view style="height: 96rpx;line-height: 96rpx;width: 60rpx;">
-						<text class="cuIcon-locationfill" style="font-size: 42rpx;"></text>
-					</view>
-				</view>
-			</view>
-			<view class="flex-col" @click="showPopup = true">
-				<input v-model="form.bar" placeholder="所在地区" :readonly="readonlys"  @click="showPopup = true"  class="zd-input"
-				:style="{ pointerEvents: readonlys ? 'none' : 'auto' }"></input>
-			</view>
-			<view class="flex-col">
-				<!-- <view class="label">门店名称</view> -->
-				<input v-model="form.barName" placeholder="门店名称" class="zd-input"></input>
-			</view>
-			<view class="flex-col">
-				<!-- <view class="label">联系电话</view> -->
-				<input v-model="form.phone" placeholder="联系电话" class="zd-input"></input>
-			</view>
-			<view class="flex-col">
-				<!-- <view class="label">您的营业执照</view> -->
-				<view class="zd-img-box flex align-center justify-between">
-					<view>
-						<image v-if="form.businessLicense" :src="form.businessLicense" style="width: 200rpx;height:94rpx">
-						</image>
-					</view>
-					<text class="upload-text" @click="handleUpload('businessLicense')">上传营业执照</text>
-				</view>
-			</view>
-			<view class="flex-col">
-			<!-- 	<view class="label">您的门头照</view> -->
-				<view class="zd-img-box flex align-center justify-between">
-					<view>
-						<image v-if="form.storefrontPhoto" :src="form.storefrontPhoto" style="width: 200rpx;height: 94rpx">
-						</image>
-					</view>
-					<text class="upload-text" @click="handleUpload('storefrontPhoto')">上传门头照</text>
-				</view>
-			</view>
-			<!-- <view class="flex-col">
-				<input v-model="form.position" placeholder="店内职务" class="zd-input"></input>
-			</view> -->
-		</view>
-		
-		<view>
-		    <regionPicker :show.sync="showPopup" @selected="onAreaSelected" />
-		</view>
-		<!-- 上传logo -->
-		<!-- <view class="flex justify-center">
-			<image v-if="form.barLogo" :src="form.barLogo" style="width: 260rpx;height: 260rpx;border-radius: 50%;">
-			</image>
-			<view v-else class="bg-zd flex align-center justify-center"
-				style="width: 260rpx;height: 260rpx;border-radius: 50%;" @click="handleUpload('barLogo')">
-				上传logo
-			</view>
-		</view>
-		<view class="flex-col">
-			<view class="label">您的昵称</view>
-			<input v-model="form.nickName" placeholder="昵称" class="zd-input"></input>
-		</view>
-		<view class="flex-col">
-			
-			<input v-model="form.phone" placeholder="联系电话" class="zd-input"></input>
-		</view>
-		<view class="flex-col">
-			<view class="label">门店名称</view>
-			<input v-model="form.barName" placeholder="门店名称" class="zd-input"></input>
-		</view>
-		<view class="flex-col">
-	
 
-			<view class="flex justify-between align-center zd-address"  @click="getMyLocation">
-				<input v-model="form.address" placeholder="门店地址" class="flex-1"></input>
-				<view style="height: 96rpx;line-height: 96rpx;width: 60rpx;">
-					<text class="cuIcon-locationfill" style="font-size: 42rpx;"></text>
+			<!-- 咨询入口 -->
+			<view class="consult-box flex align-center justify-between">
+				<text class="consult-text">入驻助手，帮你解决入驻问题，快速上手赢取品牌返利。</text>
+				<button class="consult-btn" @click="handleConsult">咨询</button>
+			</view>
+
+			<!-- 所需材料说明 -->
+			<view class="materials-box">
+				<view class="section-title">所需材料</view>
+				<view class="material-item">
+					<view class="material-info">
+						<text class="material-name">1.营业执照</text>
+						<text class="material-desc">需提供有效期内商家本人的，与门头照片相符合的营业执照。</text>
+					</view>
+					<image src="@/static/bg/bgs.png" mode="aspectFit" class="material-image"></image>
+				</view>
+				<view class="material-item">
+					<view class="material-info">
+						<text class="material-name">2.门头照片</text>
+						<text class="material-desc">需提供营业执照对应的门店，门头照片一张。</text>
+					</view>
+					<image src="@/static/bg/bgs.png" mode="aspectFit" class="material-image"></image>
 				</view>
 			</view>
-		</view>
-		<view class="flex-col">
-			<view class="label">您的营业执照</view>
-			<view class="zd-img-box flex align-center justify-between">
-				<view>
-					<image v-if="form.businessLicense" :src="form.businessLicense" style="width: 200rpx;height:94rpx">
-					</image>
-				</view>
-				<text class="upload-text" @click="handleUpload('businessLicense')">上传营业执照</text>
-			</view>
-		</view>
-		<view class="flex-col">
-			<view class="label">您的门头照</view>
-			<view class="zd-img-box flex align-center justify-between">
-				<view>
-					<image v-if="form.storefrontPhoto" :src="form.storefrontPhoto" style="width: 200rpx;height: 94rpx">
-					</image>
-				</view>
-				<text class="upload-text" @click="handleUpload('storefrontPhoto')">上传门头照</text>
-			</view>
-		</view>
-		<view class="flex-col">
-			<view class="label">您的店内职务</view>
-			<input v-model="form.position" placeholder="店内职务" class="zd-input"></input>
-		</view> -->
-		<uni-popup ref="consultRefs" type="center" border-radius="6px 6px 6px 6px" :is-mask-click="false">
-			<view class="" style="position: relative;">
-				<view class="" @click="consultClick">
-					<image src="@/static/icons/cencels.svg" style="width: 48rpx;height: 48rpx;position: absolute;top:10rpx;right: 20rpx;" mode=""></image>
-				</view>
+
+			<!-- 门店资料表单 -->
+			<view class="store-form">
+				<view class="section-title">门店资料</view>
 				
-				<view class="bg-white flex flex-col align-center justify-center"
-					style="width: 676rpx;border-radius: 12rpx;">
-					<view class="" style="font-size: 36rpx;margin: 32rpx 0 22rpx;color: #3D3D3D;font-weight: 600;">
-						添加官方助手 
+				<!-- 所在地区 -->
+				<view class="form-item">
+					<input 
+						v-model="displayArea" 
+						placeholder="所在地区" 
+						readonly 
+						disabled 
+						@click.stop="handleShowAreaPicker" 
+						class="form-input location-input"
+					/>
+				</view>
+
+				<!-- 门店地址 -->
+				<view class="form-item">
+					<view class="location-picker" @click="getMyLocation">
+						<text class="location-text" :class="{ 'is-placeholder': !form.address }">
+							{{ form.address || '门店地址' }}
+						</text>
+						<text class="cuIcon-locationfill location-icon"></text>
+					</view>
+				</view>
+
+				<!-- 门店名称 -->
+				<view class="form-item">
+					<input 
+						v-model="form.bar_name" 
+						placeholder="门店名称" 
+						class="form-input"
+					/>
+				</view>
+
+				<!-- 联系电话 -->
+				<view class="form-item">
+					<input 
+						v-model="form.bar_contact_phone" 
+						placeholder="联系电话" 
+						type="number" 
+						maxlength="11" 
+						@input="validatePhone" 
+						class="form-input"
+					/>
+				</view>
+
+				<!-- 营业执照上传 -->
+				<view class="form-item">
+					<view class="upload-box">
+						<text class="upload-label">营业执照</text>
+						<view class="upload-right">
+							<text v-if="uploadStatus.business_license === 'uploading'" class="upload-progress">上传中...</text>
+							<text v-else-if="uploadStatus.business_license === 'success'" class="upload-success">✓</text>
+							<text 
+								class="upload-btn" 
+								:class="{'is-success': form.business_license}" 
+								@click="handleUpload('business_license')"
+							>
+								{{ form.business_license ? '重新上传' : '点击上传' }}
+							</text>
+						</view>
+					</view>
+					<view v-if="previewImages.business_license" class="image-preview">
+						<image :src="previewImages.business_license" mode="aspectFit"></image>
+					</view>
+				</view>
+
+				<!-- 门头照片上传 -->
+				<view class="form-item">
+					<view class="upload-box">
+						<text class="upload-label">门头照片</text>
+						<view class="upload-right">
+							<text v-if="uploadStatus.storefront_photo === 'uploading'" class="upload-progress">上传中...</text>
+							<text v-else-if="uploadStatus.storefront_photo === 'success'" class="upload-success">✓</text>
+							<text 
+								class="upload-btn" 
+								:class="{'is-success': form.storefront_photo}" 
+								@click="handleUpload('storefront_photo')"
+							>
+								{{ form.storefront_photo ? '重新上传' : '点击上传' }}
+							</text>
+						</view>
+					</view>
+					<view v-if="previewImages.storefront_photo" class="image-preview">
+						<image :src="previewImages.storefront_photo" mode="aspectFit"></image>
 					</view>
-					<image src="@/static/cg.png" style="width: 380rpx;height: 380rpx;"></image>
-					<view class="margin-tb-xl" style="font-size: 28rpx;">长按上方二维码识别并添加</view>
-					<!-- <button class="cu-btn  sucbtn" style="background: #4E63E0;color: #FFF;" @click="toHome">进入首页</button> -->
 				</view>
 			</view>
-			
-		
-		</uni-popup>
-		<uni-popup ref="successRef" type="center" border-radius="6px 6px 6px 6px" :is-mask-click="false">
-			<view class="bg-white flex flex-col align-center justify-center"
-				style="width: 676rpx;height: 596rpx;border-radius: 12rpx;">
-				<image src="@/static/cg.png" style="width: 376rpx;height: 262rpx;"></image>
-				<view class="margin-tb-xl" style="font-size: 28rpx;">提交成功，等待审核</view>
-				<button class="cu-btn  sucbtn" style="background: #4E63E0;color: #FFF;" @click="toHome">进入首页</button>
-			</view>
 
-		</uni-popup>
-	</view>
-	<view class="sub-btn flex align-center justify-between" >
-		<view class="flex align-center" @click="tuichu">
-			<view class="">
-				<image src="@/static/logouts.png" style="width:48rpx;height: 48rpx;margin-right: 33;" mode=""></image>
-			</view>
-			<view class="sub-btn-txt">
-				退出
-			</view>
+			<!-- 地区选择器组件 -->
+			<regionPicker 
+				:show.sync="showPopup" 
+				@selected="onAreaSelected" 
+				@close="handlePopupClose" 
+			/>
+
+			<!-- 咨询弹窗 -->
+			<uni-popup ref="consultRefs" type="center" :is-mask-click="false">
+				<view class="consult-popup">
+					<view class="popup-close" @click="consultClick">
+						<image src="@/static/icons/cencels.svg" mode="aspectFit" class="close-icon"></image>
+					</view>
+					<view class="popup-content"></view>
+				</view>
+			</uni-popup>
+
+			<!-- 成功提示弹窗 -->
+			<uni-popup ref="successRef" type="center" :is-mask-click="false">
+				<view class="success-popup">
+					<image src="@/static/cg.png" mode="aspectFit" class="success-icon"></image>
+					<text class="success-text">提交成功，等待审核</text>
+					<button class="success-btn" @click="toHome">进入首页</button>
+				</view>
+			</uni-popup>
 		</view>
-		<view class="">
-			<button class="cu-btn bg-zd btn" @click="submitForm">提交入驻</button>
+
+		<!-- 底部提交按钮 -->
+		<view class="submit-bar">
+			<button 
+				class="submit-btn" 
+				:disabled="!isFormValid" 
+				@click="submitForm"
+			>
+				提交入驻
+			</button>
 		</view>
-		
-	</view>
 	</view>
 </template>
 
 <script>
-	// import QQMapSdk from '@/common/qqmap-wx-jssdk.min.js'
-	import regionPicker from '@/components/regionPicker.vue'
-	import {
-		barRegister
-	} from '@/api/login.js'
-	import {
-		base_url
-	} from '@/api/config.js'
-	export default {
-		components: {
-		    regionPicker
-		  },
-		data() {
-			return {
-				form: {
-					barLogo: '',
-					nickName: '',
-					phone: '',
-					barName: '',
-					address: '',
-					businessLicense: '', // 营业执照
-					storefrontPhoto: '', // 门头照
-					position: '', // 职务
-					openId: '',
-				},
-				userInfo: {},
-				QQMap: null,
-				showPopup: false,
-				selectedProvince: null,
-				selectedCity: null,
-				selectedArea: null,
-				readonlys: true
-			};
-		},
-		onLoad({
-			openId
-		}) {
-			this.form.openId = openId
-			// this.QQMap = new QQMapSdk({
-			//                     key: "YQCBZ-SQZ6A-P6EKD-CAUGZ-L7IWO-JMFMJ"//密钥
-			//                 });
-			// this.$refs.successRef.open()
-			this.$refs.consultRefs.open()
-		},
-		methods: {
-			consultClick() {
-				this.$refs.consultRefs.close()
+import regionPicker from '@/components/regionPicker.vue'
+import { barRegister } from '@/api/login.js'
+import { base_url } from '@/api/config.js'
+
+export default {
+	name: 'Registration',
+	
+	components: {
+		regionPicker
+	},
+
+	data() {
+		return {
+			// 表单数据
+			form: {
+				bar_name: '', // 酒吧名称（必填，最大255）
+				bar_contact_phone: '', // 联系电话（最大20）
+				province: '', // 所在省（最大20）
+				city: '', // 所在城市（最大20）
+				district: '', // 所在区（最大50）
+				address: '', // 详细地址（最大255）
+				business_license: '', // 营业执照（最大255）
+				storefront_photo: '', // 门头照片（最大255）
+				latitude: '', // 纬度
+				longitude: '', // 经度
+				openId: '', // 用户openId
+				auth_state: 0, // 认证状态（0：待审核）
 			},
-			tuichu(){
-				uni.switchTab({
-					url: "/pages/index/index"
+			// 用于显示的完整地区文本
+			displayArea: '',
+			// 图片预览
+			previewImages: {
+				business_license: '',
+				storefront_photo: ''
+			},
+			// 上传状态
+			uploadStatus: {
+				business_license: '', // '', 'uploading', 'success', 'error'
+				storefront_photo: ''
+			},
+			// 地区选择
+			showPopup: false,
+			// 用户信息
+			userInfo: {},
+		}
+	},
+
+	computed: {
+		// 表单验证
+		isFormValid() {
+			return (
+				this.form.bar_name && // 酒吧名称
+				this.form.bar_contact_phone && // 联系电话
+				this.checkPhoneFormat() && // 手机号格式
+				this.form.province && // 省
+				this.form.city && // 市
+				this.form.district && // 区
+				this.form.address && // 详细地址
+				this.form.latitude && // 纬度
+				this.form.longitude && // 经度
+				this.form.business_license && // 营业执照
+				this.form.storefront_photo // 门头照片
+			)
+		}
+	},
+
+	watch: {
+		showPopup(newVal) {
+			if (!newVal && !this.form.bar) {
+				this.form.province = ''
+				this.form.city = ''
+				this.form.district = ''
+			}
+		}
+	},
+
+	onLoad({ openId }) {
+		this.form.openId = openId
+	},
+
+	onHide() {
+		uni.hideLoading()
+	},
+
+	methods: {
+		// 防抖函数
+		debounce(fn, delay = 500) {
+			let timer = null
+			return function(...args) {
+				if (timer) clearTimeout(timer)
+				timer = setTimeout(() => {
+					fn.apply(this, args)
+					timer = null
+				}, delay)
+			}
+		},
+
+		// 地区选择相关方法
+		handleShowAreaPicker() {
+			if (this.showPopup) return
+			this.showPopup = true
+		},
+
+		// 地区选择回调
+		onAreaSelected(province, city, area) {
+			try {
+				if (province?.label && city?.label && area?.label) {
+					// 分别存储省市区
+					this.form.province = province.label
+					this.form.city = city.label
+					this.form.district = area.label
+					// 更新显示文本
+					this.displayArea = `${province.label} ${city.label} ${area.label}`.trim()
+					this.showPopup = false
+				} else {
+					throw new Error('地区信息不完整')
+				}
+			} catch (error) {
+				uni.showToast({
+					title: error.message || '请选择完整的地区信息',
+					icon: 'none'
 				})
-			},
-			// 提交
-			submitForm() {
-				if (!this.form.barLogo) {
-					uni.showToast({
-						title: '请上传logo',
-						icon: 'none',
-						mask: true
+			}
+		},
+
+		handlePopupClose() {
+			this.showPopup = false
+		},
+
+		// 位置选择相关方法
+		getMyLocation() {
+			uni.authorize({
+				scope: 'scope.userLocation',
+				success: () => {
+					this.handleChooseLocation()
+				},
+				fail: () => {
+					uni.showModal({
+						title: '位置权限',
+						content: '需要获取您的地理位置，请确认授权',
+						success: (res) => {
+							if (res.confirm) {
+								uni.openSetting({
+									success: (settingRes) => {
+										if (settingRes.authSetting['scope.userLocation']) {
+											this.handleChooseLocation()
+										}
+									}
+								})
+							}
+						}
 					})
-					return
 				}
-				if (!this.form.nickName) {
-					uni.showToast({
-						title: '请输入昵称',
-						icon: 'none',
-						mask: true
+			})
+		},
+
+		// 位置选择方法
+		handleChooseLocation() {
+			uni.chooseLocation({
+				success: (res) => {
+					if (res.address && res.latitude && res.longitude) {
+						// 更新地址和经纬度
+						this.form.address = res.address
+						this.form.latitude = res.latitude
+						this.form.longitude = res.longitude
+
+						// 尝试从地址中解析省市区（如果后端没有提供）
+						const addressParts = res.address.split(' ')
+						if (addressParts.length >= 3) {
+							// 通常第一部分是省，第二部分是市，第三部分是区
+							if (!this.form.province) this.form.province = addressParts[0]
+							if (!this.form.city) this.form.city = addressParts[1]
+							if (!this.form.district) this.form.district = addressParts[2]
+						}
+					} else {
+						uni.showToast({
+							title: '请选择具体的位置信息',
+							icon: 'none'
+						})
+					}
+				},
+				fail: (err) => {
+					if (err.errMsg !== 'chooseLocation:fail cancel') {
+						uni.showToast({
+							title: '获取位置失败',
+							icon: 'none'
+						})
+					}
+				}
+			})
+		},
+
+		// 手机号验证相关方法
+		validatePhone(e) {
+			const phone = e.target.value
+			const formatted = phone.replace(/\D/g, '').slice(0, 11)
+			// 确保不超过数据库字段长度
+			this.form.bar_contact_phone = formatted.slice(0, 20)
+		},
+
+		checkPhoneFormat() {
+			return /^1[3-9]\d{9}$/.test(this.form.bar_contact_phone)
+		},
+
+		// 图片上传相关方法
+		async handleUpload(key) {
+			try {
+				// 1. 选择图片
+				const [chooseError, chooseRes] = await uni.chooseImage({
+					count: 1,
+					sizeType: ['compressed'],
+					sourceType: ['album', 'camera'],
+					// 限制图片大小
+					maxSize: 5 * 1024 * 1024 // 5MB
+				}).then(res => [null, res]).catch(err => [err, null])
+
+				if (chooseError) {
+					console.error('选择图片错误:', chooseError)
+					throw new Error('选择图片失败')
+				}
+
+				const tempFilePath = chooseRes.tempFilePaths[0]
+				
+				// 更新预览和状态
+				this.previewImages[key] = tempFilePath
+				this.uploadStatus[key] = 'uploading'
+
+				// 2. 上传图片
+				const [uploadError, uploadRes] = await new Promise((resolve) => {
+					console.log('开始上传图片:', {
+						key,
+						tempFilePath,
+						formData: {
+							type: 'image',
+							module: key,
+							fileType: 'image/jpeg',
+							businessType: 'bar_registration'
+						}
 					})
-					return
-				}
-				if (!this.form.phone) {
-					uni.showToast({
-						title: '请输入联系电话',
-						icon: 'none',
-						mask: true
+					const uploadTask = uni.uploadFile({
+						url: base_url + '/bar/uploadImg',
+						filePath: tempFilePath,
+						name: 'file',
+						header: {
+							'content-type': 'multipart/form-data',
+							'Authorization': uni.getStorageSync('token') || ''
+						},
+						formData: {
+							type: 'image',
+							module: key,
+							fileType: 'image/jpeg',
+							businessType: 'bar_registration'
+						},
+						success: (res) => {
+							console.log('上传成功响应:', {
+								statusCode: res.statusCode,
+								data: res.data,
+								key: key,
+								url: res.data?.url,
+								headers: res.header
+							})
+							resolve([null, res])
+						},
+						fail: (err) => {
+							console.error('上传失败:', {
+								error: err,
+								key: key,
+								tempFilePath: tempFilePath
+							})
+							resolve([err, null])
+						}
 					})
-					return
-				}
-				if (!this.form.barName) {
-					uni.showToast({
-						title: '请输入门店名称',
-						icon: 'none',
-						mask: true
+
+					// 监听上传进度
+					uploadTask.onProgressUpdate((res) => {
+						console.log('上传进度:', res.progress)
+						if (res.progress === 100) {
+							console.log('上传完成')
+						}
 					})
-					return
+				})
+
+				// 3. 处理上传结果
+				if (uploadError) {
+					console.error('上传错误:', uploadError)
+					throw new Error(uploadError.errMsg || '上传失败，请重试')
 				}
-				if (!this.form.address) {
-					uni.showToast({
-						title: '请输入门店地址',
-						icon: 'none',
-						mask: true
+
+				if (uploadRes.statusCode !== 200) {
+					console.error('服务器响应错误:', {
+						statusCode: uploadRes.statusCode,
+						data: uploadRes.data,
+						headers: uploadRes.header
 					})
-					return
+					throw new Error(`服务器响应错误: ${uploadRes.statusCode}，请检查服务器日志`)
 				}
-				if (!this.form.businessLicense) {
+
+				// 4. 解析响应数据
+				let result
+				try {
+					result = typeof uploadRes.data === 'string' ? 
+						JSON.parse(uploadRes.data) : uploadRes.data
+					console.log('解析后的响应数据:', result)
+				} catch (error) {
+					console.error('响应数据解析错误:', error)
+					throw new Error('服务器响应格式错误')
+				}
+
+				// 5. 处理业务结果
+				if (result.code === 200 && result.data?.url) {
+					// 验证URL长度
+					if (result.data.url.length > 255) {
+						throw new Error('图片URL超出长度限制')
+					}
+					this.form[key] = result.data.url
+					this.uploadStatus[key] = 'success'
 					uni.showToast({
-						title: '请上传营业执照',
-						icon: 'none',
-						mask: true
+						title: '上传成功',
+						icon: 'success'
 					})
-					return
+				} else {
+					console.error('业务处理失败:', result)
+					throw new Error(result.msg || '上传失败')
 				}
-				if (!this.form.storefrontPhoto) {
-					uni.showToast({
-						title: '请上传门头照',
-						icon: 'none',
-						mask: true
-					})
-					return
-				}
-				if (!this.form.position) {
-					uni.showToast({
-						title: '请输入店内职务',
-						icon: 'none',
-						mask: true
-					})
-					return
-				}
-				if(!this.form.latitude || !this.form.longitude) {
-					uni.showToast({
-							title: '请通过定位获取位置',
-							icon: 'none',
-							mask: true,
-					})
-					return
-				}
-					
-					
+
+			} catch (error) {
+				console.error('完整上传错误:', error)
+				this.previewImages[key] = ''
+				this.uploadStatus[key] = 'error'
+				uni.showToast({
+					title: error.message || '上传失败',
+					icon: 'none',
+					duration: 2000
+				})
+			}
+		},
+
+		// 表单提交相关方法
+		async submitForm() {
+			if (!this.isFormValid || !this.validateForm()) {
+				return
+			}
+
+			try {
 				uni.showLoading({
 					title: '提交中',
 					mask: true
 				})
-				barRegister(this.form).then(res => {
-					if (res.code == 200) {
-						this.userInfo = res.data.register // 暂存用户信息
-						uni.setStorageSync('token', res.data.token)
-						uni.hideLoading()
-						this.$refs.successRef.open()
-					}
-				}).catch(() => {
-					// uni.hideLoading()
-				})
 
-			},
-			toHome() {
-				uni.setStorageSync('userInfo', this.userInfo)
-				uni.reLaunch({
-					url: '/pages/index/index'
-				})
-			},
-			 onAreaSelected(province, city, area) {
-			       this.selectedProvince = province;
-			       this.selectedCity = city;
-			       this.selectedArea = area;
-			       console.log('Selected Province:', province);
-			       console.log('Selected City:', city);
-			       console.log('Selected Area:', area);
-			       // 在这里处理选择后的逻辑
-			     },
-			// 上传事件
-			handleUpload(key) {
-				uni.chooseImage({
-					count: 1,
-					success: (res) => {
-						uni.uploadFile({
-							url: base_url + '/bar/common/upload', //仅为示例，非真实的接口地址
-							filePath: res.tempFilePaths[0],
-							name: 'file',
-							formData: {
-								type: 'image'
-							},
-							success: (uploadFileRes) => {
-								this.form[key] = JSON.parse(uploadFileRes.data).url
-							}
-						});
-					}
-				})
-			},
-			// 获取位置
-			getMyLocation() {
-				uni.getSetting({
-					success: (res) => {
-						console.log(res)
-						if (!res.authSetting['scope.userLocation']) {
-							uni.authorize({
-								scope: 'scope.userLocation',
-								success: (res) => {
-									this.handleGetLocation()
-								},
-								fail: (err) => {
-									uni.showModal({
-										title: '提示',
-										content: '请先授权获取您的位置信息',
-										success: (res) => {
-											if (res.confirm) {
-												uni.openSetting({
-													success: (res) => {
-														if (res.authSetting['scope.userLocation']) {
-															this.handleGetLocation()
-														}
-													}
-												})
-											} else if (res.cancel) {
-												console.log('用户点击取消')
-											}
-										}
-									})
-								}
-							})
-						}else {
-							this.handleGetLocation()
-						}
-					},
-				})
+				// 构建提交数据
+				const submitData = {
+					...this.form,
+					auth_state: 0 // 设置默认认证状态
+				}
 
-			},
-			handleGetLocation() {
-				uni.getLocation({
-					type: "gcj02",
-					success: (res) => {
-						console.log(res)
-						uni.chooseLocation({
-							complete: (res) => {
-								console.log(res)
-								if (res.errMsg == 'chooseLocation:ok') {
-									this.form.address = res.address
-									this.form.latitude = res.latitude
-									this.form.longitude = res.longitude
-								}
-							}
-						})
-					},
-					fail: (err) => {
-						console.log(err)
-					}
+				const res = await barRegister(submitData)
+				
+				if (res.code === 200) {
+					this.userInfo = res.data.register
+					uni.setStorageSync('token', res.data.token)
+					uni.setStorageSync('userInfo', this.userInfo)
+					uni.reLaunch({
+						url: '/pages/index/index'
+					})
+				} else {
+					throw new Error(res.msg || '注册失败')
+				}
+			} catch (error) {
+				uni.showToast({
+					title: error.message || '提交失败',
+					icon: 'none'
 				})
+			} finally {
+				uni.hideLoading()
 			}
+		},
+
+		// 其他方法
+		toHome() {
+			uni.setStorageSync('userInfo', this.userInfo)
+			uni.reLaunch({
+				url: '/pages/index/index'
+			})
+		},
+
+		handleConsult() {
+			uni.navigateTo({
+				url: '/pagesMy/addAiad'
+			})
+		},
+
+		consultClick() {
+			this.$refs.consultRefs.close()
+		},
+
+		// 字段验证方法
+		validateField(value, maxLength) {
+			if (!value) return false
+			return String(value).length <= maxLength
+		},
+
+		// 表单验证方法
+		validateForm() {
+			// 字段长度验证
+			const validations = {
+				bar_name: { value: this.form.bar_name, maxLength: 255, label: '酒吧名称' },
+				bar_contact_phone: { value: this.form.bar_contact_phone, maxLength: 20, label: '联系电话' },
+				province: { value: this.form.province, maxLength: 20, label: '所在省' },
+				city: { value: this.form.city, maxLength: 20, label: '所在城市' },
+				district: { value: this.form.district, maxLength: 50, label: '所在区' },
+				address: { value: this.form.address, maxLength: 255, label: '详细地址' },
+				business_license: { value: this.form.business_license, maxLength: 255, label: '营业执照' },
+				storefront_photo: { value: this.form.storefront_photo, maxLength: 255, label: '门头照片' }
+			}
+
+			for (const [field, config] of Object.entries(validations)) {
+				if (!this.validateField(config.value, config.maxLength)) {
+					uni.showToast({
+						title: `${config.label}超出长度限制`,
+						icon: 'none'
+					})
+					return false
+				}
+			}
+
+			return true
 		}
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-	
-	.page-content {
-		padding: 24rpx;
-		background-color: #F7F8FA;
-		min-height: 100vh;
-		font-family: Roboto;
-		font-size: 24rpx;
-		.label {
-			color: #000;
-			margin-bottom: 26rpx;
-			font-size: 24rpx;
-			font-weight: 500;
-		}
+.page-container {
+	min-height: 100vh;
+	background-color: #F7F8FA;
+}
 
-		.zd-input {
-			width: 100%;
-			height: 96rpx;
-			border-radius: 16rpx;
-			background-color: #FFF;
-			padding: 0 30rpx;
-			box-sizing: border-box;
-			color: #000;
-			margin-bottom: 16rpx;
-			border: 1px solid #C8C8C8;
-		}
+.page-content {
+	padding: 24rpx 24rpx 200rpx;
+	box-sizing: border-box;
+}
 
-		.zd-address {
-			width: 654rpx;
-			height: 96rpx;
-			border-radius: 16rpx;
-			background-color: #FFF;
-			padding: 0 0 0 30rpx;
-			box-sizing: border-box;
-			color: #000;
-			margin-bottom: 16rpx;
-			border: 1px solid #C8C8C8;
-		}
+// 步骤条样式
+.step-bar {
+	background: #FFFFFF;
+	padding: 42rpx 66rpx;
+	border-radius: 12rpx;
+	box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
 
-		.zd-img-box {
-			width: 654rpx;
-			min-height: 96rpx;
-			max-height: 200rpx;
-			border-radius: 16rpx;
-			background-color: #FFF;
-			padding: 0 30rpx;
-			box-sizing: border-box;
-			color: #000;
-			margin-bottom: 16rpx;
-			border: 1px solid #C8C8C8;
+	.step-icons {
+		justify-content: space-between;
+		margin-bottom: 18rpx;
 
-			.upload-text {
-				font-size: 28rpx;
-				line-height: normal;
-				color: #FEE034;
-			}
-		}
-		.regist-top{
-			background: #FFFFFF;
-			width:100%;
-			height:234rpx;
-			border-radius: 12rpx;
-		}
-		.regist-top-1{
-			color: #FDCA40;
-			padding: 42rpx 66rpx 0 84rpx;
-			 font-family: 'Courier New', Courier, monospace; /* 使用方形字体 */
-			font-size: 36px;
-			line-height: 36px; /* 使行高与字体大小相同 */
-			letter-spacing: 0em;
-			color: #FDCA40;
-			justify-content: space-between;
-		}
-		.regist-top-2{
-			font-size: 24rpx;
-			padding: 9px 87rpx 0 105rpx;
-			font-weight: 600;
-			justify-content: space-between;
-		}
-		.top-image-1{
+		.step-icon {
 			width: 94rpx;
 			height: 72rpx;
 		}
-		.top-image-2{
+
+		.step-arrow {
 			width: 44rpx;
 			height: 44rpx;
 		}
-		.regist-consult{
-			height: 106rpx;	
-			padding: 24rpx 24rpx;
-			background: #FFF;
-			margin-top: 32rpx;
-			font-size: 24rpx;
-			width: 100%;
-		}
-		.reg-materials{
-			height: 380rpx;
-			background: #FFF;
-			padding: 24rpx;
-			margin-top: 32rpx;
-			.materials-top{
-				
-			}
-		}
-		.regist-store{
-			background: #FFFFFF;
-			margin-top: 38rpx;
-			padding: 24rpx;
-		}
-	}
-	.font-28{
-		font-size: 28rpx;
-	}
-	.font-32{
-		font-size: 32rpx;
-	}
-	.fontw-6{
-		font-weight: 600;
-	}
-	.btn {
-		width: 420rpx;
-		height: 80rpx;
-		border-radius: 24rpx;
-		margin: 30rpx auto;
-		background: #4E63E0;
-		
-		// box-shadow: 0px 10px 24px 0px rgba(43, 45, 51, 0.2);
-		font-weight: 600;
-		color: #FFFFFF;
-		font-size: 32rpx;
 	}
 
-	.sucbtn {
+	.step-labels {
+		justify-content: space-between;
+		font-size: 24rpx;
+		font-weight: 600;
+		color: #333;
+	}
+}
+
+// 咨询入口样式
+.consult-box {
+	margin-top: 32rpx;
+	padding: 24rpx;
+	background: #FFF;
+	border-radius: 12rpx;
+	box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
+
+	.consult-text {
+		width: 52%;
+		font-size: 24rpx;
+		color: #333;
+	}
+
+	.consult-btn {
+		width: 124rpx;
+		height: 48rpx;
+		margin-left: 180rpx;
+		line-height: 48rpx;
+		background: #D42E78;
+		color: #FFF;
+		font-size: 24rpx;
+		border-radius: 12rpx;
+	}
+}
+
+// 材料说明样式
+.materials-box {
+	margin-top: 32rpx;
+	padding: 24rpx;
+	background: #FFF;
+	border-radius: 12rpx;
+	box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
+
+	.material-item {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-top: 28rpx;
+
+		.material-info {
+			width: 60%;
+
+			.material-name {
+				display: block;
+				font-size: 28rpx;
+				color: #3D3D3D;
+				margin-bottom: 8rpx;
+			}
+
+			.material-desc {
+				font-size: 24rpx;
+				color: #666;
+			}
+		}
+
+		.material-image {
+			width: 166rpx;
+			height: 112rpx;
+		}
+	}
+}
+
+// 表单样式
+.store-form {
+	margin-top: 32rpx;
+	padding: 24rpx;
+	background: #FFF;
+	border-radius: 12rpx;
+	box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
+
+	.form-item {
+		margin-bottom: 16rpx;
+	}
+
+	.form-input {
+		width: 100%;
+		height: 96rpx;
+		padding: 0 30rpx;
+		background: #FFF;
+		border: 1px solid #E5E5E5;
+		border-radius: 16rpx;
+		font-size: 28rpx;
+		color: #333;
+		transition: all 0.3s;
+
+		&:focus {
+			border-color: #4E63E0;
+			box-shadow: 0 0 0 2px rgba(78, 99, 224, 0.1);
+		}
+
+		&[readonly] {
+			background: #F5F5F5;
+			cursor: not-allowed;
+		}
+	}
+}
+
+// 位置选择器样式
+.location-picker {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: 96rpx;
+	padding: 0 30rpx;
+	background: #FFF;
+	border: 1px solid #E5E5E5;
+	border-radius: 16rpx;
+
+	.location-text {
+		flex: 1;
+		font-size: 28rpx;
+		color: #333;
+
+		&.is-placeholder {
+			color: #999;
+		}
+	}
+
+	.location-icon {
+		color: #4E63E0;
+		font-size: 42rpx;
+	}
+}
+
+// 上传组件样式
+.upload-box {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: 96rpx;
+	padding: 0 30rpx;
+	background: #FFF;
+	border: 1px solid #E5E5E5;
+	border-radius: 16rpx;
+
+	.upload-label {
+		font-size: 28rpx;
+		color: #333;
+	}
+
+	.upload-right {
+		display: flex;
+		align-items: center;
+
+		.upload-progress {
+			font-size: 28rpx;
+			color: #4E63E0;
+			margin-right: 16rpx;
+		}
+
+		.upload-success {
+			color: #67C23A;
+			margin-right: 16rpx;
+			font-size: 32rpx;
+		}
+
+		.upload-btn {
+			font-size: 28rpx;
+			color: #FEE034;
+			padding: 16rpx 0;
+
+			&.is-success {
+				color: #67C23A;
+			}
+		}
+	}
+}
+
+.image-preview {
+	margin: 16rpx 0;
+	width: 100%;
+	height: 300rpx;
+	background: #F5F5F5;
+	border-radius: 12rpx;
+	overflow: hidden;
+
+	image {
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
+	}
+}
+
+// 底部提交按钮样式
+.submit-bar {
+	position: fixed;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	padding: 32rpx 48rpx 24rpx;
+	background: #FFF;
+	box-shadow: 0 -1rpx 3rpx rgba(0, 0, 0, 0.1);
+
+	.submit-btn {
+		width: 100%;
+		height: 88rpx;
+		line-height: 88rpx;
+		background: linear-gradient(135deg, #19367A, #2C4C99);
+		border-radius: 44rpx;
+		color: #FFF;
+		font-size: 32rpx;
+		font-weight: 600;
+		transition: all 0.3s;
+
+		&:active {
+			transform: scale(0.98);
+		}
+
+		&[disabled] {
+			opacity: 0.6;
+			background: #999;
+		}
+	}
+}
+
+// 弹窗样式
+.consult-popup {
+	position: relative;
+	width: 676rpx;
+	background: #FFF;
+	border-radius: 12rpx;
+
+	.popup-close {
+		position: absolute;
+		top: 10rpx;
+		right: 20rpx;
+		padding: 10rpx;
+
+		.close-icon {
+			width: 48rpx;
+			height: 48rpx;
+		}
+	}
+}
+
+.success-popup {
+	width: 676rpx;
+	height: 596rpx;
+	background: #FFF;
+	border-radius: 12rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+
+	.success-icon {
+		width: 376rpx;
+		height: 262rpx;
+		margin-bottom: 32rpx;
+	}
+
+	.success-text {
+		font-size: 28rpx;
+		color: #333;
+		margin-bottom: 32rpx;
+	}
+
+	.success-btn {
 		width: 314rpx;
 		height: 76rpx;
+		line-height: 76rpx;
+		background: #4E63E0;
+		color: #FFF;
+		font-size: 28rpx;
+		border-radius: 38rpx;
 	}
-	input[readonly] {
-	  cursor: default;
-	  background-color: #f5f5f5;
-	}
-	.sub-btn{
-		background: #FFFFFF;
-		padding: 0 48rpx 0 66rpx;
-		.sub-btn-txt{
-			margin-left: 20rpx;
-			font-size: 28rpx;
-			font-weight: 600;
-		}
-		
-	}
+}
+
+// 通用样式
+.section-title {
+	font-size: 32rpx;
+	font-weight: 600;
+	color: #333;
+	margin-bottom: 28rpx;
+}
 </style>
\ No newline at end of file