Jelajahi Sumber

fix 先优化到这里

songfeiyang 1 tahun lalu
induk
melakukan
6111418008
1 mengubah file dengan 66 tambahan dan 9 penghapusan
  1. 66 9
      src/pages/login/phoneLogin.vue

+ 66 - 9
src/pages/login/phoneLogin.vue

@@ -2,9 +2,19 @@
   <view class="container">
     <u-image src="@/static/logo.png"></u-image>
     <view class="login-form-wrap">
-      <u--form labelPosition="left" :model="loginForm" :rules="rules" ref="loginForm">
+      <u--form
+        labelPosition="left"
+        :model="loginForm"
+        :rules="rules"
+        ref="loginForm"
+      >
         <u-form-item prop="mobile" borderBottom>
-          <u-input v-model="loginForm.mobile" maxlength="11" border="none" placeholder="请输入手机号">
+          <u-input
+            v-model="loginForm.mobile"
+            maxlength="11"
+            border="none"
+            placeholder="请输入手机号"
+          >
             <template slot="prefix">
               <view class="phone-prefix">
                 <text>+86</text>
@@ -14,7 +24,12 @@
           </u-input>
         </u-form-item>
         <u-form-item prop="captcha" borderBottom>
-          <u-input v-model="loginForm.captcha" maxlength="6" border="none" placeholder="请输入短信验证码">
+          <u-input
+            v-model="loginForm.captcha"
+            maxlength="6"
+            border="none"
+            placeholder="请输入短信验证码"
+          >
             <template slot="suffix">
               <u-code
                 ref="uCode"
@@ -31,12 +46,23 @@
         </u-form-item>
         <view class="phone-question">手机号无法使用</view>
         <u-form-item>
-          <u-button type="primary" :disabled="isDisabled" :loading="loading" shape="circle" @click="login">登录</u-button>
+          <u-button
+            type="primary"
+            :disabled="isDisabled"
+            :loading="loading"
+            shape="circle"
+            @click="login"
+            >登录</u-button
+          >
         </u-form-item>
       </u--form>
       <view class="user-agreement">
         <u-checkbox-group>
-          <u-checkbox shape="circle" @change="checkboxChange" :checked="isChecked"></u-checkbox>
+          <u-checkbox
+            shape="circle"
+            @change="checkboxChange"
+            :checked="isChecked"
+          ></u-checkbox>
         </u-checkbox-group>
         <text class="user-agreement-text">
           我已阅读并同意
@@ -46,6 +72,17 @@
         </text>
       </view>
     </view>
+
+    <view>
+      <u-popup :show="show" @close="close" mode="bottom">
+        <view>
+          <text style="color: gray; font-size: 14px">我已阅读并同意</text>
+          <text style="font-weight: bold">《用户协议》</text>
+          <text style="font-weight: bold">《隐私政策》</text>
+        </view>
+        <u-button class="confirm-button" @click="confirmShow">确认</u-button>
+      </u-popup>
+    </view>
   </view>
 </template>
 
@@ -60,8 +97,8 @@ export default {
         client_secret: 'qWBe6jD%GCuPPTkP',
         grant_type: 'sms',
         token: '',
-        mobile: '',
-        captcha: '',
+        mobile: '18888888888',
+        captcha: '363636',
       },
       rules: {
         mobile: [
@@ -89,6 +126,7 @@ export default {
       seconds: 120,
       tips: '',
       isChecked: false,
+      show: false,
       loading: false,
     };
   },
@@ -103,7 +141,8 @@ export default {
   methods: {
     getCode() {
       if (!this.loginForm.mobile) return uni.$u.toast('请输入您的手机号!');
-      if (!uni.$u.test.mobile(this.loginForm.mobile)) return uni.$u.toast('手机号码格式不正确!');
+      if (!uni.$u.test.mobile(this.loginForm.mobile))
+        return uni.$u.toast('手机号码格式不正确!');
       // TODO: 处理验证码倒计时
       if (this.$refs.uCode.canGetCode) {
         getSmsCodeByPhone(this.loginForm.mobile)
@@ -121,7 +160,11 @@ export default {
       }
     },
     async login() {
-      if (!this.isChecked) return uni.$u.toast('请同意并勾选协议');
+      if (!this.isChecked) {
+        this.show = true;
+        return;
+      }
+
       this.loading = true;
       loginByPhoneAndSmsCode(this.loginForm)
         .then(res => {
@@ -146,6 +189,20 @@ export default {
     checkboxChange(v) {
       this.isChecked = v;
     },
+
+    //点击弹框确认
+    confirmShow() {
+      this.isChecked = true;
+      this.show = false;
+      setTimeout(() => {
+        this.login();
+      }, 500);
+    },
+
+    //关闭弹框f
+    close() {
+      this.show = false;
+    },
   },
 };
 </script>