开发

ghsApp/src/pagesClient/official/apply.vue

@@ -1,97 +1,106 @@
 <template>
-  <div class="app-content">
+  <view class="apply-page app-content">
     <form @submit="formSubmit">
-      <view style="color:red;background-color: white;font-size:32upx;font-weight:bold;text-align: center;padding:0 5upx 20upx 5upx;">零售花店和个人，请勿注册，注册了也不会审核通过，零售花店需要系统请加微信：<text style="color:#3385FF;text-decoration: underline;" @click="copyWechat('18559200768')">18559200768</text></view>
-      <!-- #ifdef MP-WEIXIN -->
-      <view style="color:red;background-color: white;font-size:36upx;font-weight:bold;text-align: center;">注册需邀请码，没有邀请码无法注册</view>
-      <!-- #endif -->
-      <view class="module-com">
+      <view class="apply-body">
+        <view class="apply-alert apply-alert--warning">
+          <text class="apply-alert-text">零售花店和个人请勿注册，注册了也不会审核通过。零售花店需要系统请加微信：</text>
+          <text class="apply-alert-link" @click="copyWechat('18559200768')">18559200768</text>
+        </view>
+
         <!-- #ifdef MP-WEIXIN -->
-        <tui-list-cell class="line-cell" :hover="false" >
-          <div class="tui-title">邀请码</div>
-          <input v-model="form.inviteCode" type="number" placeholder-class="phcolor" placeholder-style="color:#CCCCCC" class="tui-input" name="inviteCode" placeholder="请填写邀请码" />
-        </tui-list-cell>
+        <view class="apply-alert apply-alert--info">
+          <text class="apply-alert-text">注册需邀请码，没有邀请码无法注册</text>
+        </view>
         <!-- #endif -->
-        <tui-list-cell class="line-cell" :hover="false" >
-          <div class="tui-title">门店名称</div>
-          <input v-model="form.name" type="text" placeholder-class="phcolor" placeholder-style="color:#CCCCCC" class="tui-input" name="name" placeholder="请输入名称" />
-        </tui-list-cell>
-        <tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="openAddres" >
-          <div class="tui-title">所在城市</div>
-          <div class="tui-input" v-if="form.province" >{{ form.province + '-' + form.city }}</div>
-          <div class="tui-placeholder" v-else >请选择</div>
-        </tui-list-cell>
-        <!-- <tui-list-cell class="line-cell" :hover="false">
-          <div class="tui-title">所在地址</div>
-          <input v-model="form.address" type="text" placeholder-class="phcolor" placeholder-style="color:#CCCCCC" class="tui-input" name="address" placeholder="请填写" />
-        </tui-list-cell> -->
-        <tui-list-cell v-if="hasMap == 0" class="line-cell" :hover="false">
-					<view class="tui-title">所在地址</view>
-					<input v-model="form.address" placeholder-class="phcolor"
-          placeholder-style="color:#CCCCCC" class="tui-input" name="address" placeholder="请填写" />
-				</tui-list-cell>
-				<tui-list-cell v-else class="line-cell" :hover="false" :arrow="true" @click="selectRegion">
-					<view class="tui-title">所在地址</view>
-					<view v-if="form.address" class="tui-input">{{ form.address }}</view>
-					<view v-else class="tui-placeholder">请填写地址</view>
-					<input v-model="form.address" name="address" hidden />
-				</tui-list-cell>
-        <tui-list-cell class="line-cell" :hover="false" >
-          <div class="tui-title">楼号门牌</div>
-          <input v-model="form.floor" type="text" placeholder-class="phcolor" placeholder-style="color:#CCCCCC" class="tui-input" name="floor" placeholder="选填" />
-        </tui-list-cell>
-      </view>
 
-      <view class="module-com">
-          <tui-list-cell class="line-cell" :hover="false">
-              <div class="tui-title required">姓名</div>
+        <view class="apply-section">
+          <view class="apply-section-title">门店信息</view>
+          <view class="module-com apply-card">
+            <!-- #ifdef MP-WEIXIN -->
+            <tui-list-cell class="line-cell" :hover="false">
+              <view class="tui-title">邀请码</view>
+              <input v-model="form.inviteCode" type="number" placeholder-class="phcolor" placeholder-style="color:#CCCCCC" class="tui-input" name="inviteCode" placeholder="请填写邀请码" />
+            </tui-list-cell>
+            <!-- #endif -->
+            <tui-list-cell class="line-cell" :hover="false">
+              <view class="tui-title">门店名称</view>
+              <input v-model="form.name" type="text" placeholder-class="phcolor" placeholder-style="color:#CCCCCC" class="tui-input" name="name" placeholder="请输入名称" />
+            </tui-list-cell>
+            <tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="openAddres">
+              <view class="tui-title">所在城市</view>
+              <view class="tui-input" v-if="form.province">{{ form.province + '-' + form.city }}</view>
+              <view class="tui-placeholder" v-else>请选择</view>
+            </tui-list-cell>
+            <tui-list-cell v-if="hasMap == 0" class="line-cell" :hover="false">
+              <view class="tui-title">所在地址</view>
+              <input v-model="form.address" placeholder-class="phcolor" placeholder-style="color:#CCCCCC" class="tui-input" name="address" placeholder="请填写" />
+            </tui-list-cell>
+            <tui-list-cell v-else class="line-cell" :hover="false" :arrow="true" @click="selectRegion">
+              <view class="tui-title">所在地址</view>
+              <view v-if="form.address" class="tui-input">{{ form.address }}</view>
+              <view v-else class="tui-placeholder">请填写地址</view>
+              <input v-model="form.address" name="address" hidden />
+            </tui-list-cell>
+            <tui-list-cell class="line-cell" :hover="false">
+              <view class="tui-title">楼号门牌</view>
+              <input v-model="form.floor" type="text" placeholder-class="phcolor" placeholder-style="color:#CCCCCC" class="tui-input" name="floor" placeholder="选填" />
+            </tui-list-cell>
+          </view>
+        </view>
+
+        <view class="apply-section">
+          <view class="apply-section-title">申请人信息</view>
+          <view class="module-com apply-card">
+            <tui-list-cell class="line-cell" :hover="false">
+              <view class="tui-title required">姓名</view>
               <input v-model="form.adminName" type="text" placeholder-class="phcolor" placeholder-style="color:#CCCCCC" class="tui-input" name="adminName" placeholder="申请人姓名" />
-          </tui-list-cell>
-          <tui-list-cell class="line-cell" :hover="false">
-              <div class="tui-title required">手机号</div>
+            </tui-list-cell>
+            <tui-list-cell class="line-cell" :hover="false">
+              <view class="tui-title required">手机号</view>
               <input v-model="form.mobile" type="number" placeholder-class="phcolor" placeholder-style="color:#CCCCCC" class="tui-input" name="mobile" placeholder="申请人手机号" />
-          </tui-list-cell>
-
-          <tui-list-cell class="line-cell" :hover="false">
-              <div class="tui-title required">验证码</div>
-              <input v-model="form.authCode" type="number" style="width:330upx;" placeholder-class="phcolor" placeholder-style="color:#CCCCCC" class="tui-input" name="authCode" placeholder="请填写验证码" />
-              <button v-if="hasGet == false" class="admin-button-com blue middle" @click="requestAuthCode()">获取</button>
-              <button v-else class="admin-button-com default middle" >{{count}}</button>
-          </tui-list-cell>
-      </view>
-      <view class="module-com recommend-wrap" v-if="!$util.isEmpty(merchantData)" >
-        <div class="recommend-tag">推荐人</div>
-        <div class="recommend-det">
-          <image style="width:90upx;height:90upx;border-radius:42upx;" mode="scaleToFill" :src="merchantData.logoUrl" @error="imageError" />
-          <div class="recommend-info">
-            <div class="app-size-32">{{ merchantData.name }}</div>
-            <div class="app-color-2"></div>
-          </div>
-        </div>
-      </view>
-      <view style="color:#999999;font-size:28upx;margin-top:30upx;">
-        <checkbox-group @change="agreeItem">
-          <label style="display:flex;align-items:center;justify-content:center;">
-            <checkbox value="1" style="width:6upx;transform:scale(0.8)" :checked="agree == 1" />
-            <text style="margin-left:38upx;">
-              我已阅读并同意
-              <text style="font-weight:bold;color:#666666;" @click.stop="goToService()">《服务协议》</text>
-              和
-              <text style="font-weight:bold;color:#666666;" @click.stop="goToPrivacy()">《隐私政策》</text>
-            </text>
-          </label>
-        </checkbox-group>
+            </tui-list-cell>
+            <tui-list-cell class="line-cell code-wrap" :hover="false">
+              <view class="tui-title required">验证码</view>
+              <input v-model="form.authCode" type="number" placeholder-class="phcolor" placeholder-style="color:#CCCCCC" class="tui-input tui-input--code" name="authCode" placeholder="请填写验证码" />
+              <button v-if="hasGet == false" class="apply-code-btn" @click="requestAuthCode()">获取</button>
+              <button v-else class="apply-code-btn apply-code-btn--disabled">{{ count }}</button>
+            </tui-list-cell>
+          </view>
+        </view>
+
+        <view class="module-com apply-card recommend-wrap" v-if="!$util.isEmpty(merchantData)">
+          <view class="recommend-tag">推荐人</view>
+          <view class="recommend-det">
+            <image class="recommend-avatar" mode="scaleToFill" :src="merchantData.logoUrl" @error="imageError" />
+            <view class="recommend-info">
+              <view class="app-size-32">{{ merchantData.name }}</view>
+            </view>
+          </view>
+        </view>
+
+        <view class="apply-agreement">
+          <checkbox-group @change="agreeItem">
+            <label class="apply-agreement-label">
+              <checkbox value="1" class="apply-checkbox" :checked="agree == 1" />
+              <text class="apply-agreement-text">
+                我已阅读并同意
+                <text class="apply-agreement-link" @click.stop="goToService()">《服务协议》</text>
+                和
+                <text class="apply-agreement-link" @click.stop="goToPrivacy()">《隐私政策》</text>
+              </text>
+            </label>
+          </checkbox-group>
+        </view>
+
+        <view class="apply-submit-wrap">
+          <button class="apply-submit-btn" formType="submit">确认注册</button>
+        </view>
       </view>
-      <div class="btn-wrap">
-        <button class="admin-button-com blue big" formType="submit" >确认</button>
-      </div>
-
-      <!-- 省市联动 -->
-      <simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onCityConfirm" ></simple-address>
-      <!-- 选择地区 -->
-		  <app-area-sel :show.sync="showRegion" :city="form.city" @change="changeAreaFn" />
+
+      <simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onCityConfirm"></simple-address>
+      <app-area-sel :show.sync="showRegion" :city="form.city" @change="changeAreaFn" />
     </form>
-  </div>
+  </view>
 </template>
 
 <script>
@@ -358,8 +367,76 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.module-com {
+.apply-page {
+  min-height: 100vh;
+  background: #f3f6fb;
+}
+
+.apply-body {
+  padding: 24upx 24upx 48upx;
+}
+
+.apply-alert {
+  padding: 22upx 24upx;
+  border-radius: 16upx;
   margin-bottom: 20upx;
+}
+
+.apply-alert--warning {
+  background: #fff5f5;
+  border: 1upx solid #ffd6d6;
+}
+
+.apply-alert--info {
+  background: #f0f6ff;
+  border: 1upx solid #c8dcff;
+}
+
+.apply-alert-text {
+  display: block;
+  color: #5c656d;
+  font-size: 26upx;
+  line-height: 40upx;
+}
+
+.apply-alert--warning .apply-alert-text {
+  color: #c0392b;
+}
+
+.apply-alert--info .apply-alert-text {
+  color: #3385ff;
+  font-weight: 600;
+  text-align: center;
+}
+
+.apply-alert-link {
+  color: #3385ff;
+  font-size: 28upx;
+  font-weight: 700;
+  line-height: 40upx;
+}
+
+.apply-section {
+  margin-bottom: 24upx;
+}
+
+.apply-section-title {
+  margin-bottom: 16upx;
+  padding-left: 8upx;
+  color: #161819;
+  font-size: 30upx;
+  font-weight: 700;
+  line-height: 42upx;
+}
+
+.apply-card {
+  margin-bottom: 0;
+  border-radius: 20upx;
+  overflow: hidden;
+  box-shadow: 0 8upx 24upx rgba(24, 37, 50, 0.06);
+}
+
+.module-com {
   background-color: #fff;
   .module-tit {
     padding: 20upx 18upx;
@@ -371,15 +448,17 @@ export default {
     padding: 0 30upx;
   }
 }
-// 公共
+
 .line-cell {
   .tui-title {
-    width: 210upx;
-    color: $fontColor2;
+    width: 180upx;
+    color: #5c6673;
+    font-size: 28upx;
   }
   .tui-input {
-    width: calc(100% - 210upx);
+    width: calc(100% - 180upx);
     font-size: 28upx;
+    color: #161819;
   }
   .tui-placeholder {
     color: #ccc;
@@ -388,41 +467,115 @@ export default {
     color: #ccc;
   }
 }
-.btn-wrap {
-  width: 90%;
-  margin: 60upx auto;
-  .admin-button-com {
-    width: 100%;
-    margin: 0 auto;
-  }
-}
-// 验证码
+
 .code-wrap {
-  .tui-input {
-    width: calc(100% - 410upx);
-    font-size: 28upx;
-  }
-  .tui-code {
-    width: 200upx;
-    text-align: center;
-    border-left: 1upx solid $borderColor;
-    color: $mainColor;
+  .tui-input--code {
+    flex: 1;
+    min-width: 0;
+    width: auto;
+    margin-right: 16upx;
   }
 }
-// 推荐人
+
+.apply-code-btn {
+  flex-shrink: 0;
+  min-width: 140upx;
+  height: 64upx;
+  margin: 0;
+  padding: 0 24upx;
+  line-height: 64upx;
+  border: none;
+  border-radius: 999upx;
+  color: #fff;
+  font-size: 26upx;
+  font-weight: 600;
+  background: linear-gradient(90deg, #3385ff 0%, #33b0ff 100%);
+}
+
+.apply-code-btn::after {
+  border: none;
+}
+
+.apply-code-btn--disabled {
+  color: #8a9199;
+  background: #eef1f5;
+}
+
+.apply-agreement {
+  margin-top: 8upx;
+  padding: 0 8upx;
+}
+
+.apply-agreement-label {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.apply-checkbox {
+  transform: scale(0.82);
+  flex-shrink: 0;
+}
+
+.apply-agreement-text {
+  flex: 1;
+  margin-left: 8upx;
+  color: #8a9199;
+  font-size: 24upx;
+  line-height: 36upx;
+}
+
+.apply-agreement-link {
+  color: #3385ff;
+  font-weight: 600;
+}
+
+.apply-submit-wrap {
+  margin-top: 40upx;
+  padding: 0 8upx;
+}
+
+.apply-submit-btn {
+  width: 100%;
+  height: 96upx;
+  margin: 0;
+  padding: 0;
+  line-height: 96upx;
+  border: none;
+  border-radius: 999upx;
+  color: #fff;
+  font-size: 32upx;
+  font-weight: 600;
+  text-align: center;
+  background: linear-gradient(90deg, #3385ff 0%, #33b0ff 100%);
+  box-shadow: 0 10upx 24upx rgba(51, 133, 255, 0.24);
+}
+
+.apply-submit-btn::after {
+  border: none;
+}
+
 .recommend-wrap {
-  padding: 30upx 45upx;
+  padding: 28upx 32upx;
   .recommend-tag {
     font-size: 28upx;
-    color: $fontColor2;
-    margin-bottom: 24upx;
+    color: #5c6673;
+    font-weight: 600;
+    margin-bottom: 20upx;
   }
   .recommend-det {
     @include disFlex(center, flex-start);
+    .recommend-avatar {
+      width: 90upx;
+      height: 90upx;
+      border-radius: 45upx;
+      flex-shrink: 0;
+    }
     .recommend-info {
       margin-left: 20upx;
       .app-size-32 {
         margin-bottom: 4upx;
+        color: #161819;
       }
     }
   }