登录用户协议更改

src/assets/less/my.less

@@ -1,6 +1,16 @@
 .user-wrap {
   flex-direction: column;
-  background-color: #f7f7f7;;
+  background-color: #f7f7f7;
+
+  .bottom-info{
+    margin: 0 0 40px 0;
+    justify-content: center;
+    color: #999;
+    font-size: 20px;
+    .line{
+      padding: 0 20px;
+    }
+  }
   .my-collect{
     width: 690px;
     height: 150px;
@@ -92,6 +102,7 @@
   .operator-item__wrap {
     flex-direction: column;
     background-color: #fff;
+    margin-bottom:220px;
     .operator-item {
       padding: 34px 26px;
       border-bottom: 2px solid #f7f7f7;

src/assets/less/phone.less

@@ -6,6 +6,31 @@
     width: 600px;
     margin-top:200px;
   }
+
+  .agreement{
+    flex-direction: row;
+    align-items: center;
+    width: 600px;
+    margin:10px auto;
+    image{
+      width: 30px;
+      height: 30px;
+      margin-right: 18px;
+    }
+    .agreement-text{
+      flex-direction: row;
+      flex-grow: 1;
+      flex:1;
+      text{
+        font-size: 24px;
+      }
+    }
+    .red{
+      color: #fd555d;
+      padding: 0 14px;
+    }
+  }
+
   .input-item {
     background-color: #f7f7f7;
     border: 1px solid #e6e6e6;
@@ -35,10 +60,12 @@
   .bind-button{
     height:90px;
     line-height: 90px;
-    width:500px;
+    align-items: center;
+    width:600px;
     background-color:#EF5952;
     color:#fff;
     font-size:30px;
     margin:40px auto 0;
+    border-radius: 45px;
   }
 }

src/views/My/index.ux

@@ -115,6 +115,10 @@
         </div>
       </div>
     </div>
+
+    <div class="bottom-info">
+      <text  @click="pageChange('Agreement')">用户协议</text><text class="line">|</text><text  @click="pageChange('Privacy')">隐私协议</text>
+    </div>
   </div>
 </template>
 

src/views/Phone/index.ux

@@ -2,20 +2,60 @@
   <div class="phone-wrap">
     <div class="input-content">
       <div class="input-item">
-        <input class="input-text" type="tel" placeholder="请输入手机号" value="{{mobile}}" style="placeholder-color: #CCC" onchange="updateMobile"></input>
+        <input
+          class="input-text"
+          type="tel"
+          placeholder="请输入手机号"
+          value="{{mobile}}"
+          style="placeholder-color: #CCC"
+          onchange="updateMobile"
+        />
       </div>
       <div class="input-item">
-        <input class="input-text" type="number" maxlength="6" placeholder="请输入验证码" value="{{code}}" style="placeholder-color: #CCC" onchange="updateMessage"></input>
-        <text class="send-msg" if="{{!hasSend}}" @click="sendMsg">获取验证码</text>
-        <text class="send-msg disabled" else>重新获取{{duration}}</text>
+        <input
+          class="input-text"
+          type="number"
+          maxlength="6"
+          placeholder="请输入验证码"
+          value="{{code}}"
+          style="placeholder-color: #CCC"
+          onchange="updateMessage"
+        />
+        <text class="send-msg" if="{{!hasSend}}" @click="sendMsg"
+          >获取验证码</text
+        >
+        <text class="send-msg disabled" else>重新获取{{ duration }}</text>
       </div>
     </div>
-    <input type="button" value="登录绑定手机号" class="bind-button" @click="bindUser"> </input>
+
+    <div class="agreement">
+      <image
+        src="../../assets/imgs/un_checked.png"
+        if="{{!checked}}"
+        @click="changeStatus()"
+      ></image>
+      <image
+        src="../../assets/imgs/is_checked.png"
+        if="{{checked}}"
+        @click="changeStatus()"
+      ></image>
+      <div class="agreement-text">
+        <text @click="changeStatus()">我已阅读并同意</text
+        ><text class="red" @click="pageChange('Agreement')">用户服务协议</text
+        ><text class="red" @click="pageChange('Privacy')">用户隐私政策</text>
+      </div>
+    </div>
+    <input
+      type="button"
+      value="登录绑定手机号"
+      class="bind-button"
+      @click="bindUser"
+    />
   </div>
 </template>
 <script>
 import it from '../../helper/interface.js';
-import { sendCode, userBind} from '../../api/index';
+import { sendCode, userBind } from '../../api/index';
 import router from '@system.router';
 import prompt from '@system.prompt';
 import storage from '@system.storage';
@@ -26,24 +66,24 @@ export default {
     duration: 120,
     mobile: null,
     code: null,
-    isOnBind:false,
-    isOnsend:false,
-
+    isOnBind: false,
+    isOnsend: false,
+    checked: false,
   },
   onInit() {
 
   },
   async sendMsg() {
-    if(this.isOnsend){
+    if (this.isOnsend) {
       return false;
     }
     this.isOnsend = true;
     let result = it.validatePhone(this.mobile);
     if (result) {
-      let res = await sendCode({ phone: this.mobile }).catch((err)=>{this.isOnsend = false});
-      if(res){
-         this.isOnsend = false;
-         this.countDown();
+      let res = await sendCode({ phone: this.mobile }).catch((err) => { this.isOnsend = false });
+      if (res) {
+        this.isOnsend = false;
+        this.countDown();
       }
     } else {
       prompt.showToast({
@@ -57,6 +97,9 @@ export default {
   updateMessage(e) {
     this.code = e.value;
   },
+  changeStatus() {
+    this.checked = !this.checked;
+  },
   //倒计时
   countDown() {
     this.hasSend = true;
@@ -69,8 +112,18 @@ export default {
       }
     }, 1000);
   },
+  pageChange(page) {
+    router.push({
+      uri: `/views/${page}`
+    })
+  },
   //绑定用户
   async bindUser() {
+    if (!this.checked) {
+      return prompt.showToast({
+        message: '请先阅读并同意用户服务协议和用户隐私协议'
+      })
+    }
     if (!this.mobile || !this.code) {
       prompt.showToast({
         message: '请输入手机号和验证码'
@@ -83,29 +136,29 @@ export default {
       })
       return false;
     }
-    if(this.isOnBind){
+    if (this.isOnBind) {
       return false;
     }
     this.isOnBind = true;
     let params = {
       phone: this.mobile,
       code: this.code,
-      version:'2.0'
+      version: '2.0'
     }
-    
-    let res = await userBind(params).catch((err)=>{this.isOnBind = false;});
-    if(res){
+
+    let res = await userBind(params).catch((err) => { this.isOnBind = false; });
+    if (res) {
       this.isOnBind = false;
       await storage.set({ key: "hasLogin", value: 'hasLogin' });
       await storage.set({ key: "loginPhone", value: this.mobile });
 
-      this.$app.setAppData('backfrom','phone');
+      this.$app.setAppData('backfrom', 'phone');
       prompt.showToast({
         message: '登录成功！'
       })
-      setTimeout(()=>{
+      setTimeout(() => {
         router.back();
-      },1500)
+      }, 1500)
     }
   }