绑定手机

src/api/index.js

@@ -74,3 +74,13 @@ export const getUserShelfBooks = () => {
 export const getUserInfo = () => {
   return fly.get(`/userinfo`);
 };
+
+//发送短信
+export const sendCode = (phone) => {
+  return fly.post(`/user/sendCode`,{phone:phone});
+};
+
+//用户绑定
+export const userBind = (params) => {
+  return fly.post(`/bindPhone`,params);
+};

src/api/utils.js

@@ -3,9 +3,9 @@ import fly from "./fly";
 import qs from "qs";
 import storage from "@system.storage";
 import device from "@system.device";
-import request from '@system.request';
-import media from '@system.media';
-import prompt from '@system.prompt';
+import request from "@system.request";
+import media from "@system.media";
+import prompt from "@system.prompt";
 // 获取token
 let token = null;
 export const getToken = async () => {
@@ -14,7 +14,7 @@ export const getToken = async () => {
   if (!token) token = (await storage.get({ key: "token" })).data;
 
   // token格式化
-  if (token && (typeof token === "string")) token = JSON.parse(token);
+  if (token && typeof token === "string") token = JSON.parse(token);
 
   console.log("checkToken", checkToken(token));
 
@@ -156,3 +156,9 @@ export const downImg = photoPath => {
     fail: () => {}
   });
 };
+//校验手机号
+export const validatePhone = phone => {
+  const VALIDATE_REG = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[0-9]|18[0-9]|14[57]|19[89])[0-9]{8}$/;
+  const isMobile = VALIDATE_REG.test(phone);
+  return isMobile;
+};

src/assets/less/phone.less

@@ -0,0 +1,40 @@
+.phone-wrap {
+  flex-direction: column;
+  .input-content {
+    flex-direction: column;
+    width: 600px;
+    margin: 200px auto 0;
+  }
+  .input-item {
+    background-color: #f7f7f7;
+    border: 1px solid #e6e6e6;
+    border-radius: 4px;
+    height: 90px;
+    margin-bottom: 40px;
+    align-items: center;
+    justify-content: space-between;
+    .input-text {
+      padding: 0 20px;
+      font-size: 28px;
+      border:0;
+      width: 300px;
+    }
+    .send-msg{
+      font-size:24px;
+      color:#EF5952;
+      margin-right:20px;
+    }
+    .disabled{
+      color:#ccc;
+    }
+  }
+  .bind-button{
+    height:90px;
+    line-height: 90px;
+    width:500px;
+    background-color:#EF5952;
+    color:#fff;
+    font-size:30px;
+    margin:40px auto 0;
+  }
+}

src/views/My/index.ux

@@ -1,14 +1,14 @@
 <template>
   <div class="user-wrap">
     <div class="user-info__wrap">
-      <image src="http://thirdwx.qlogo.cn/mmopen/dOnU7xaqjEYxcrJjHWw4HnyXer3EgjuyibYjzM1ncrtQVpgX8icrXYCnwLpd8htFvg1jrAc88PdE2gVkmKnYByAHrULcMlyOwY/132"></image>
-      <text>ID：123123123</text>
+      <image src="{{user.head_img}}"></image>
+      <text>ID：{{user.id}}</text>
     </div>
     <div class="operator-item__wrap">
       <div class="operator-item">
         <div class="item-name">
           <image src="../../assets/imgs/declining.png"></image>
-          <text>您还剩<span class="red">5000</span>书币</text>
+          <text>您还剩<span class="red">{{user.balance}}</span>书币</text>
         </div>
         <text class="operator-button" @click="pageChange('Pay')">
          充值
@@ -66,11 +66,21 @@
 
 <script>
 import router from "@system.router";
-
+import {  getUserInfo } from "../../api/index";
 export default {
   props: {},
   data() {
-    return {}
+    return {
+      user: {}
+    }
+  },
+  onInit() {
+    this.getUser();
+  },
+  async getUser(){
+  let user =await getUserInfo();
+    this.user=user;
+    console.log(this.user,'aaaaaaaaaaaaaaa')
   },
   showCustomerQrcode() {
     this.$emit('customer');

src/views/Phone/index.ux

@@ -1,5 +1,83 @@
 <template>
   <div class="phone-wrap">
-    <text>绑定手机</text>
+    <div class="input-content">
+      <div class="input-item">
+        <input class="input-text" type="tel" placeholder="请输入手机号" value="{{mobile}}" style="placeholder-color: #CCC" onchange="updateMobile"></input>
+      </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>
+      </div>
+    </div>
+    <input type="button" value="绑定手机号" class="bind-button" @click="bindUser"> </input>
   </div>
 </template>
+<script>
+import { validatePhone } from '../../api/utils';
+import { sendCode, userBind } from '../../api/index';
+import prompt from '@system.prompt';
+export default {
+  private: {
+    hasSend: false,
+    duration: 60,
+    mobile: null,
+    code: null
+
+  },
+  onInit() {
+
+  },
+  async sendMsg() {
+    let result = validatePhone(this.mobile);
+    if (result) {
+      let res = await sendCode(this.mobile);
+      this.countDown();
+    } else {
+      prompt.showToast({
+        message: '手机号格式不正确'
+      })
+    }
+  },
+  updateMobile(e) {
+    this.mobile = e.value;
+  },
+  updateMessage(e) {
+    this.code = e.value;
+  },
+  //倒计时
+  countDown() {
+    this.hasSend = true;
+    let time = setInterval(() => {
+      this.duration--;
+      if (this.duration < 1) {
+        clearInterval(time);
+        this.duration = 60;
+        this.hasSend = false;
+      }
+    }, 1000);
+  },
+  //绑定用户
+  async bindUser(){
+    if(!this.mobile || !this.code){
+      prompt.showToast({
+        message: '请输入手机号码和验证码'
+      })
+      return false;
+    }
+    let params = {
+      phone:this.mobile,
+      code:this.code
+    }
+    let res= await userBind(params);
+    prompt.showToast({
+        message: '绑定成功！'
+      })
+
+  }
+
+}
+</script>
+<style lang="less">
+@import "../../assets/less/phone.less";
+</style>