Szx 3 rokov pred
rodič
commit
289fd6e9cc

+ 1 - 1
config/index.js

@@ -28,7 +28,7 @@ module.exports = {
     },
 
     // Various Dev Server settings
-    host: "0.0.0.0", // can be overwritten by process.env.HOST
+    host: "10.20.52.212", // can be overwritten by process.env.HOST
     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,

BIN
src/assets/gotologin.png


BIN
src/assets/login.png


BIN
src/assets/login_success.png


+ 88 - 0
src/components/gologin/GoLogin.vue

@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <mt-popup
+      v-model="popupVisible"
+      popup-transition="popup-fade"
+      v-if="popupVisible"
+    >
+      <img src="../../assets/gotologin.png" alt="" />
+      <div class="login_success">
+        您还尚未绑定手机号
+      </div>
+      <div class="login_message">
+        绑定手机号方便下次继续阅读
+      </div>
+      <div class="go_back_btn" @click="hidden">去绑定</div>
+      <div class="close_icon">12312</div>
+    </mt-popup>
+  </div>
+</template>
+<script>
+export default {
+  name: "GoLogin",
+  data() {
+    return {
+      popupVisible: false
+    };
+  },
+  methods: {
+    show() {
+      this.popupVisible = true;
+      console.log(1);
+    },
+    hidden() {
+      this.popupVisible = false;
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+/deep/.mint-popup {
+  img {
+    width: 202px;
+    height: 144px;
+  }
+  padding: 1rem;
+  border-radius: 0.2rem;
+  position: fixed;
+  background: #fff;
+  top: 40%;
+  left: 50%;
+  -webkit-transform: translate3d(-50%, -50%, 0);
+  transform: translate3d(-50%, -50%, 0);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -webkit-transition: 0.2s ease-out;
+  transition: 0.2s ease-out;
+  .login_success {
+    margin-top: 10px;
+    text-align: center;
+    font-size: 18px;
+    color: #333;
+    font-weight: 600;
+    margin-bottom: 5px;
+  }
+  .go_back_btn {
+    height: 0.7rem;
+    line-height: 0.7rem;
+    background: #3ba3fc;
+    text-align: center;
+    color: white;
+    border-radius: 0.2rem;
+    margin: 0 auto;
+  }
+  .login_message {
+    font-size: 15px;
+    color: #666666;
+    font-weight: 400;
+    text-align: center;
+    margin-bottom: 10px;
+  }
+  .close_icon {
+    position: absolute;
+    left: 45%;
+    bottom: -0.5rem;
+    color: white;
+  }
+}
+</style>

+ 21 - 0
src/components/gologin/index.js

@@ -0,0 +1,21 @@
+import Gologin from "./GoLogin.vue";
+const obj = {}; //对象
+obj.install = function(Vue) {
+  //封装install方法
+  // 1. 创建组件构造器
+  const toastContrustor = Vue.extend(Gologin);
+
+  // 2. new  组件实例
+  const GoLogin = new toastContrustor();
+
+  // 3. 将组件实例, 挂载到某一个元素上
+  GoLogin.$mount(document.createElement("div"));
+
+  // 4. GoLogin.$el 对应的就是div
+  document.body.appendChild(GoLogin.$el);
+
+  // 5. 添加到原型链上
+  Vue.prototype.$GoLogin = GoLogin;
+};
+
+export default obj;

+ 9 - 2
src/components/index.js

@@ -16,7 +16,10 @@ import {
   TabContainerItem,
   Popup,
   Picker,
-  MessageBox 
+  MessageBox,
+  Field,
+  Button,
+  Checklist
 } from "mint-ui";
 
 import XBook from "./book.vue";
@@ -25,12 +28,16 @@ import XBookInfo from "./book-info.vue";
 import XFooter from "./footer.vue";
 import XHeader from "./header.vue";
 import XShelfCore from "./shelf-core.vue";
+import GoLogin from "./gologin/index.js";
 // import XReader from './reader'
 VueClipboard.config.autoSetContainer = true;
 
+Vue.use(GoLogin);
 Vue.use(vueTouch);
 Vue.use(VueClipboard);
-
+Vue.component(Checklist.name, Checklist);
+Vue.component(Button.name, Button);
+Vue.component(Field.name, Field);
 Vue.component(Swipe.name, Swipe);
 Vue.component(SwipeItem.name, SwipeItem);
 Vue.component(Spinner.name, Spinner);

+ 8 - 2
src/router/index.js

@@ -48,6 +48,9 @@ const RecordSend = () => import("../view/record-send.vue");
 const Sign = () => import("../view/sign.vue");
 const BookLimitFree = () => import("../view/book-limit-free.vue");
 const Coupon = () => import("../view/my_coupon.vue");
+const Login = () => import("../view/Login.vue");
+const Useragreement = () => import("../view/Useragreement.vue");
+const Privacypolicy = () => import("../view/Privacypolicy.vue");
 // import test from '../view/test.vue'
 
 Vue.use(Router);
@@ -65,7 +68,7 @@ function generateRoute(routes) {
     const route = {
       path: val[0].path,
       name: val[0].name,
-      component: val[1],
+      component: val[1]
     };
     if (val[0].meta) route.meta = val[0].meta;
     if (val[0].redirect) route.redirect = val[0].redirect;
@@ -106,7 +109,10 @@ const router = new Router({
     [namespace.RecordSend, RecordSend],
     [namespace.Undertheshelf, Undertheshelf],
     [namespace.Sign, Sign],
-    [namespace.Coupon,Coupon],
+    [namespace.Coupon, Coupon],
+    [namespace.Login, Login],
+    [namespace.Useragreement, Useragreement],
+    [namespace.Privacypolicy, Privacypolicy],
     [namespace.HelpPayQrcode, HelpPayQrcode],
     [namespace.HelpPay, HelpPay],
     [namespace.BookShare, BookShare],

+ 6 - 0
src/theme/view/Login.scss

@@ -0,0 +1,6 @@
+$namespace: "Login";
+
+.Login_message {
+  font-size: 0.2rem;
+  font-weight: 600;
+}

+ 41 - 3
src/theme/view/person.scss

@@ -1,4 +1,5 @@
 $namespace: "person";
+
 @include b(info) {
   @include e(wrap) {
     position: relative;
@@ -7,14 +8,17 @@ $namespace: "person";
     font-size: $--font-size-medium;
     @include flex($direction: column);
   }
+
   @include e(username) {
     margin: 0.12rem 0 0.08rem;
     color: #4d4d4d;
   }
+
   @include e(id) {
     display: flex;
     align-items: center;
     font-size: $--font-size-small;
+
     span {
       display: inline-block;
       background: rgba(50, 161, 255, 0.1);
@@ -26,6 +30,7 @@ $namespace: "person";
       margin: 0 0.1rem;
     }
   }
+
   @include e(bg) {
     background-color: $--color-theme-boy-person;
     width: 100%;
@@ -33,6 +38,7 @@ $namespace: "person";
     position: absolute;
     z-index: -1;
   }
+
   @include e(portrait) {
     height: 1.25rem;
     width: 1.25rem;
@@ -40,24 +46,27 @@ $namespace: "person";
     box-shadow: $--book-shadow;
     border-radius: 50%;
     overflow: hidden;
+
     img {
       width: 100%;
       display: block;
     }
   }
+
   @include e(balancebox) {
-    background: url(https://cdn-novel.iycdm.com/static/img/personal-card.png)
-      no-repeat center / 100%;
+    background: url(https://cdn-novel.iycdm.com/static/img/personal-card.png) no-repeat center / 100%;
     box-sizing: border-box;
     padding: 0.04rem 0.42rem 0.37rem;
     margin-top: 0.1rem;
     width: 5.45rem;
     height: 1.14rem;
     @include flex($space: space-around);
+
     img {
       width: 1.2em;
     }
   }
+
   @include e(btn) {
     background-color: $--color-theme-girl;
     border-radius: $--radius;
@@ -69,37 +78,44 @@ $namespace: "person";
 
 @include b(entry) {
   @include e(wrap) {
-    & > div {
+    &>div {
       @include flex();
       height: 1.08rem;
       position: relative;
     }
+
     hr {
       margin-left: 1rem;
       border-color: #e6e6e6;
     }
   }
+
   @include e(buyvip) {
     width: 92%;
     margin: 0 auto;
     display: block;
   }
+
   @include e(icon) {
     box-sizing: border-box;
     width: 1rem;
     padding: 0 0.3rem;
   }
+
   @include e(text) {
     width: 5rem;
     font-size: $--font-size-big;
   }
+
   @include e(arrow) {
     box-sizing: border-box;
     width: 2.5rem;
     padding: 0 0.18rem 0 2.18rem;
   }
+
   @include e(vip) {
     color: #ffa734;
+
     span:last-child {
       width: 2.5rem;
       text-align: right;
@@ -147,3 +163,25 @@ $namespace: "person";
   border-radius: 0.1rem;
   padding: 0.1rem 0;
 }
+
+.person-entry_login {
+  display: flex;
+  padding: 0 0.2rem 0 0.3rem;
+  .login-notify{
+    margin-left: 1.8rem;
+    color: #999999;
+  }
+  .login-icon {
+    width: 0.4rem;
+    height: 0.4rem;
+  }
+
+  .login-text {
+    font-size: 0.3rem;
+  }
+
+  .person-login_arrow {
+    width: 0.18rem;
+    height: 0.25rem;
+  }
+}

+ 314 - 0
src/view/Login.vue

@@ -0,0 +1,314 @@
+<template>
+  <div>
+    <x-header />
+    <div class="Login">
+      <div class="Login_message">
+        <div class="Login_message_phone">绑定手机号</div>
+        <div class="Login_message_notfiy">
+          已绑定过的手机号将自动同步原有账号记录
+        </div>
+      </div>
+      <div class="Login_form">
+        <div class="Login_form_item">
+          <input
+            placeholder="请输入你的手机号"
+            v-model="phone"
+            type="number"
+            class="login_form_input"
+            oninput="if(value.length>11)value=value.slice(0,11);if(value<0)value=0"
+          />
+        </div>
+        <div class="Login_form_item">
+          <input
+            v-model="code"
+            type="number"
+            placeholder="请输入你的验证码"
+            class="login_form_input"
+            oninput="if(value.length>6)value=value.slice(0,6);if(value<0)value=0"
+          />
+          <div
+            class="getCode_phone_wrong"
+            v-if="isPhoneCurrect == 0"
+            @click="getCodePhoneWrong"
+          >
+            获取验证码
+          </div>
+          <div class="getCode" @click="getCode" v-if="isPhoneCurrect == 1">
+            获取验证码
+          </div>
+          <div class="getCode_count_down" v-if="isPhoneCurrect == 3">
+            {{ countTime }}秒后重发
+          </div>
+        </div>
+
+        <div class="agree_item">
+          <input type="radio" v-model="isAgree" @click="isAgreeChange" />
+          我已阅读并同意<span @click="goToUserPage">用户协议</span>和<span
+            @click="goToPrivatePage"
+            >隐私政策</span
+          >
+        </div>
+        <div class="login_btn" @click="goToLogin" v-if="isGoToLogin">
+          点击绑定
+        </div>
+        <div class="login_btn_wrong" v-if="!isGoToLogin">点击绑定</div>
+      </div>
+    </div>
+    <mt-popup v-model="popupVisible" popup-transition="popup-fade">
+      <img src="../assets/login_success.png" alt="" />
+      <div class="login_success">
+        绑定成功
+      </div>
+      <div class="go_back_btn" @click="goBackRouter">返回</div>
+    </mt-popup>
+  </div>
+</template>
+<script>
+import { Login } from "./namespace.js";
+export default {
+  name: Login.name,
+  data() {
+    return {
+      //是否同意隐私政策
+      isAgree: true,
+      //二维码
+      code: "",
+      //手机号
+      phone: "",
+      popupVisible: false,
+      isPhoneCurrect: 0,
+      countTime: "",
+      isGoToLogin: false
+    };
+  },
+  methods: {
+    //当手机号未填时
+    getCodePhoneWrong() {
+      this.$Toast("请填写正确的手机号码");
+    },
+    //点击获取二维码
+    getCode() {
+      console.log("获取验证码");
+      this.isPhoneCurrect = 3;
+      this.countTime = 60;
+      //验证码倒计时
+      const timer = setInterval(() => {
+        if (this.countTime == 0) {
+          clearTimeout(timer);
+          this.isPhoneCurrect = 1;
+        } else {
+          this.countTime--;
+        }
+      }, 1000);
+    },
+    isAgreeChange() {
+      this.isAgree = !this.isAgree;
+      console.log(this.isAgree);
+    },
+    //登入操作
+    goToLogin() {
+      //验证手机号
+      let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
+      if (!myreg.test(this.phone)) {
+        this.$Toast("请填写正确的手机号码");
+        return;
+      }
+      //验证码填写
+      if (!this.code) {
+        this.$Toast("请填写验证码");
+        return;
+      }
+      //隐私协议是否勾选
+      if (this.isAgree) {
+        this.$Toast("请先阅读用户协议、隐私政策");
+        return;
+      }
+      //弹出框
+      this.popupVisible = !this.popupVisible;
+      console.log("goToLogin");
+    },
+    //返回上级路由
+    goBackRouter() {
+      this.$router.back();
+    },
+    phoneChange() {
+      console.log(1);
+    },
+    //跳转到用户页面
+    goToUserPage() {
+      this.$router.push("/Useragreement");
+      localStorage.setItem("isUseragreement", "1");
+    },
+    //跳转到隐私页面
+    goToPrivatePage() {
+      this.$router.push("/Useragreement");
+      localStorage.setItem("isUseragreement", "2");
+    }
+    //
+  },
+  watch: {
+    //监听手机号的长度
+    phone(val) {
+      let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
+      if (!myreg.test(val)) {
+        this.isPhoneCurrect = 0;
+      } else {
+        this.isPhoneCurrect = 1;
+      }
+    },
+    //监听手机验证码两个值
+    address(val) {
+      console.log(val);
+      if (val.phone && val.code) {
+        this.isGoToLogin = true;
+      } else {
+        this.isGoToLogin = false;
+      }
+    }
+  },
+  computed: {
+    //监听手机验证码两个值
+    address() {
+      const { phone, code } = this;
+      return {
+        phone,
+        code
+      };
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.Login {
+  padding: 0 0.3rem;
+  .Login_message {
+    margin: 1rem 0 1.2rem 0;
+    .Login_message_phone {
+      font-size: 17px;
+      font-weight: 600;
+    }
+    .Login_message_notfiy {
+      margin-top: 15px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #999999;
+    }
+  }
+  .Login_form {
+    width: 100%;
+    .Login_form_item {
+      margin-bottom: 0.5rem;
+      display: flex;
+      border-bottom: 1px #ccc solid;
+      padding: 3px;
+      .login_form_input {
+        font-size: 0.3rem;
+        height: 0.5rem;
+        border: none;
+        width: 100%;
+      }
+      .login_form_input:focus {
+        outline: none;
+      }
+    }
+    .agree_item {
+      margin-bottom: 0.7rem;
+      span {
+        color: #3ba3fc;
+      }
+    }
+  }
+  .getCode {
+    color: #333333;
+    font-size: 12px;
+    height: 0.5rem;
+    width: 1.8rem;
+    line-height: 0.5rem;
+    text-align: center;
+    border-radius: 0.5rem;
+    border: 1px #e5e5e5 solid;
+  }
+  .getCode_phone_wrong {
+    color: white;
+    font-size: 12px;
+    height: 0.5rem;
+    width: 1.8rem;
+    line-height: 0.5rem;
+    text-align: center;
+    border-radius: 0.5rem;
+    border: 1px #e5e5e5 solid;
+    background-color: gray;
+  }
+  .getCode_count_down {
+    color: white;
+    font-size: 12px;
+    height: 0.5rem;
+    width: 1.8rem;
+    line-height: 0.5rem;
+    text-align: center;
+    border-radius: 0.5rem;
+    border: 1px #e5e5e5 solid;
+    background-color: gray;
+  }
+  .login_btn {
+    height: 0.7rem;
+    line-height: 0.7rem;
+    width: 6rem;
+    background: #3ba3fc;
+    text-align: center;
+    color: white;
+    border-radius: 0.5rem;
+    margin-top: 1rem;
+    margin: 0 auto;
+  }
+  .login_btn_wrong {
+    height: 0.7rem;
+    line-height: 0.7rem;
+    width: 6rem;
+    background: #ccc;
+    text-align: center;
+    color: white;
+    border-radius: 0.5rem;
+    margin-top: 1rem;
+    margin: 0 auto;
+  }
+}
+/deep/.mint-popup {
+  padding: 1rem;
+  border-radius: 0.2rem;
+  position: fixed;
+  background: #fff;
+  top: 40%;
+  left: 50%;
+  -webkit-transform: translate3d(-50%, -50%, 0);
+  transform: translate3d(-50%, -50%, 0);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -webkit-transition: 0.2s ease-out;
+  transition: 0.2s ease-out;
+  .login_success {
+    margin-top: 10px;
+    text-align: center;
+    font-size: 18px;
+    color: #333;
+    font-weight: 600;
+    margin-bottom: 20px;
+  }
+  .go_back_btn {
+    height: 0.7rem;
+    line-height: 0.7rem;
+    background: #3ba3fc;
+    text-align: center;
+    color: white;
+    border-radius: 0.5rem;
+    margin: 0 auto;
+  }
+}
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+</style>

+ 25 - 0
src/view/Privacypolicy.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <button @click="show">显示</button>
+    <button @click="hidden">yincang</button>
+  </div>
+</template>
+<script>
+export default {
+  name: "XReaderText",
+
+  mounted() {
+    console.log(this.$GoLogin);
+    console.log(this.$Indicator);
+    console.log(this.$Toast);
+  },
+  methods: {
+    show() {
+      this.$GoLogin.show();
+    },
+    hidden() {
+      this.$GoLogin.hidden();
+    }
+  }
+};
+</script>

+ 46 - 0
src/view/Useragreement.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <x-header />
+    <div class="outer-container">
+      <iframe
+        id="content"
+        :height="windowsHeight"
+        :width="iframeWidth"
+        :src="src"
+      ></iframe>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      iframeWidth: "",
+      windowsHeight: "",
+      src:
+        "https://zhuishuyun.oss-cn-hangzhou.aliyuncs.com/qapp/privacy/zsy_privacy.htm"
+    };
+  },
+  methods: {},
+  mounted() {
+    this.iframeWidth = document.body.scrollWidth;
+    this.windowsHeight = window.innerHeight;
+    console.log(12);
+    console.log(document.querySelector("header>span"));
+    if (localStorage.getItem("isUseragreement") == 1) {
+      document.querySelector("header>span").innerHTML = "用户协议";
+      this.src =
+        "http://cdn-novel.iycdm.com/zsy_ios_app/user_privacy/Useragreement.html";
+    } else {
+      document.querySelector("header>span").innerHTML = "隐私政策";
+      this.src =
+        "https://zhuishuyun.oss-cn-hangzhou.aliyuncs.com/qapp/privacy/zsy_privacy.htm";
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+::-webkit-scrollbar {
+  width: 1px;
+}
+</style>

+ 27 - 1
src/view/namespace.js

@@ -23,6 +23,32 @@ export const Coupon = {
   route: { name: "Coupon" },
   path: "/coupon"
 };
+export const Login = {
+  name: "Login",
+  meta: {
+    Chinese: "登录绑定"
+  },
+  route: { name: "Login" },
+  path: "/Login"
+};
+//用户协议
+export const Useragreement = {
+  name: "Useragreement",
+  meta: {
+    Chinese: "用户协议"
+  },
+  route: { name: "Useragreement" },
+  path: "/Useragreement"
+};
+//隐私政策
+export const Privacypolicy = {
+  name: "Privacypolicy",
+  meta: {
+    Chinese: "隐私政策"
+  },
+  route: { name: "Privacypolicy" },
+  path: "/Privacypolicy"
+};
 export const Rank = {
   name: "Rank",
   meta: {
@@ -55,7 +81,7 @@ export const Reader = {
   },
   route: { name: "Reader" },
   path: "/reader",
-  alias:"/reader/:str"
+  alias: "/reader/:str"
 };
 
 export const BookDetail = {

+ 84 - 91
src/view/person.vue

@@ -4,47 +4,53 @@
     <div class="person-info__wrap">
       <div class="person-info__bg"></div>
       <div class="person-info__portrait">
-        <img v-if="user.head_img"
-             :src="user.head_img" />
-        <img v-else
-             src="../assets/个人中心-默认头像.png" />
+        <img v-if="user.head_img" :src="user.head_img" />
+        <img v-else src="../assets/个人中心-默认头像.png" />
+      </div>
+      <div class="person-info__username">
+        <span v-if="user.nickname"
+          >{{ user.nickname }}<span>手机号:11111</span>span></span
+        ><span v-else>书友</span>
       </div>
-      <div class="person-info__username"><span v-if="user.nickname">{{user.nickname}}</span><span v-else>书友</span></div>
       <div class="person-info__id">
-        ID:{{user.id}}
-        <span class="person-info__copy"
-              :data-clipboard-text="user.id"
-              @click="copyName">复制</span>
+        ID:{{ user.id }}
+        <span
+          class="person-info__copy"
+          :data-clipboard-text="user.id"
+          @click="copyName"
+          >复制</span
+        >
       </div>
       <div class="person-info__balancebox">
         <img src="../assets/余额.png" />
         <span class="person-info__balance">
           您还剩
-          <span class="red">{{user.balance}}</span>书币
+          <span class="red">{{ user.balance }}</span
+          >书币
         </span>
-        <router-link :to="Pay"
-                     class="person-info__btn">充值</router-link>
+        <router-link :to="Pay" class="person-info__btn">充值</router-link>
       </div>
     </div>
+    <hr />
     <div class="person-entry__wrap">
-      <img src="https://cdn-novel.iycdm.com/h5/20191025_vip.jpg"
-           @click="toBuyVip"
-           class="person-entry__buyvip"
-           v-if="!user.is_vip && showBuyVip" />
+      <img
+        src="https://cdn-novel.iycdm.com/h5/20191025_vip.jpg"
+        @click="toBuyVip"
+        class="person-entry__buyvip"
+        v-if="!user.is_vip && showBuyVip"
+      />
       <template v-if="user.is_vip">
         <div class="person-entry__vip">
-          <img class="person-entry__icon"
-               src="../assets/我是包年图标.png" />
+          <img class="person-entry__icon" src="../assets/我是包年图标.png" />
           <!-- <span class="person-entry__text">包年有效期</span> -->
           <span class="person-entry__text">免费阅读卡</span>
-          <span>还剩余{{user.vip_days}}</span>
+          <span>还剩余{{ user.vip_days }}</span>
         </div>
         <hr />
       </template>
       <template v-if="user.is_all_life">
         <div class="person-entry__vip">
-          <img class="person-entry__icon"
-               src="../assets/我是包年图标.png" />
+          <img class="person-entry__icon" src="../assets/我是包年图标.png" />
           <span class="person-entry__text">包年有效期</span>
           <span>终身免费</span>
         </div>
@@ -52,107 +58,93 @@
       </template>
       <template v-if="xiyue_pay_template">
         <div class="person-entry__server">
-          <img class="person-entry__icon"
-               src="../assets/xiyue-person__entry.png" />
-          <span @click="toXiYue"
-                class="person-entry__text">我的微书店</span>
-          <img class="person-entry__arrow"
-               src="../assets/个人中心-进入.png" />
+          <img
+            class="person-entry__icon"
+            src="../assets/xiyue-person__entry.png"
+          />
+          <span @click="toXiYue" class="person-entry__text">我的微书店</span>
+          <img class="person-entry__arrow" src="../assets/个人中心-进入.png" />
         </div>
         <hr />
       </template>
-      <router-link class="person-entry__shelf"
-                   :to="Coupon"
-                   tag="div">
-        <img class="person-entry__icon"
-             src="../assets/my_coupon.png" />
+      <router-link class="person-entry_login" :to="Login" tag="div">
+        <img class="login-icon" src="../assets/login.png" />
+        <div class="login-text">登录绑定</div>
+        <div class="login-notify" v-if="1">绑定手机号防止数据丢失</div>
+        <!-- <div class="login-notify">手机号13****11111</div> -->
+        <div>
+          <img class="person-login_arrow" src="../assets/个人中心-进入.png" />
+        </div>
+      </router-link>
+      <div style="height: 0.2rem;background-color: #F5F5F5;"></div>
+      <router-link class="person-entry__shelf" :to="Coupon" tag="div">
+        <img class="person-entry__icon" src="../assets/my_coupon.png" />
         <span class="person-entry__text">我的优惠券</span>
-        <img class="person-entry__arrow"
-             src="../assets/个人中心-进入.png" />
+        <img class="person-entry__arrow" src="../assets/个人中心-进入.png" />
       </router-link>
+
       <hr />
-      <router-link class="person-entry__shelf"
-                   :to="BookShelf"
-                   tag="div">
-        <img class="person-entry__icon"
-             src="../assets/个人中心-书架.png" />
+      <router-link class="person-entry__shelf" :to="BookShelf" tag="div">
+        <img class="person-entry__icon" src="../assets/个人中心-书架.png" />
         <span class="person-entry__text">我的书架</span>
-        <img class="person-entry__arrow"
-             src="../assets/个人中心-进入.png" />
+        <img class="person-entry__arrow" src="../assets/个人中心-进入.png" />
       </router-link>
       <hr />
-      <router-link tag="div"
-                   :to="RecordRecharge"
-                   class="person-entry__pay">
-        <img class="person-entry__icon"
-             src="../assets/个人中心-充值记录.png" />
+      <router-link tag="div" :to="RecordRecharge" class="person-entry__pay">
+        <img class="person-entry__icon" src="../assets/个人中心-充值记录.png" />
         <span class="person-entry__text">充值记录</span>
-        <img class="person-entry__arrow"
-             src="../assets/个人中心-进入.png" />
+        <img class="person-entry__arrow" src="../assets/个人中心-进入.png" />
       </router-link>
       <hr />
-      <router-link tag="div"
-                   :to="RecordOrder"
-                   class="person-entry__order">
-        <img class="person-entry__icon"
-             src="../assets/个人中心-消费记录.png" />
+      <router-link tag="div" :to="RecordOrder" class="person-entry__order">
+        <img class="person-entry__icon" src="../assets/个人中心-消费记录.png" />
         <span class="person-entry__text">消费记录</span>
-        <img class="person-entry__arrow"
-             src="../assets/个人中心-进入.png" />
+        <img class="person-entry__arrow" src="../assets/个人中心-进入.png" />
       </router-link>
       <hr />
-      <router-link tag="div"
-                   :to="RecordSend"
-                   class="person-entry__send">
-        <img class="person-entry__icon"
-             src="../assets/个人中心-赠送记录.png" />
+      <router-link tag="div" :to="RecordSend" class="person-entry__send">
+        <img class="person-entry__icon" src="../assets/个人中心-赠送记录.png" />
         <span class="person-entry__text">书币详情</span>
-        <img class="person-entry__arrow"
-             src="../assets/个人中心-进入.png" />
+        <img class="person-entry__arrow" src="../assets/个人中心-进入.png" />
       </router-link>
       <hr />
-      <div class="person-entry__sign"
-           @click="toSignPage">
-        <img class="person-entry__icon"
-             src="../assets/sign.png" />
+      <div class="person-entry__sign" @click="toSignPage">
+        <img class="person-entry__icon" src="../assets/sign.png" />
         <span class="person-entry__text">签到</span>
-        <img class="person-entry__arrow"
-             src="../assets/个人中心-进入.png" />
+        <img class="person-entry__arrow" src="../assets/个人中心-进入.png" />
       </div>
       <hr />
       <template v-if="!!user.is_paid">
-        <div class="person-entry__binding"
-             @click="toBind">
-          <img src="../assets/binding.png"
-               alt
-               class="person-entry__icon" />
+        <div class="person-entry__binding" @click="toBind">
+          <img src="../assets/binding.png" alt class="person-entry__icon" />
           <span class="person-entry__text">绑定手机</span>
           <template v-if="!!user.bind">
-            <span :class="['binding-text', {'binding-text__binded': !!user.bind}]">已绑定</span>
+            <span
+              :class="['binding-text', { 'binding-text__binded': !!user.bind }]"
+              >已绑定</span
+            >
           </template>
           <template v-else>
             <span class="binding-text">
               绑定即得
               <i>100</i>书币
             </span>
-            <img class="person-entry__arrow"
-                 src="../assets/个人中心-进入.png" />
+            <img
+              class="person-entry__arrow"
+              src="../assets/个人中心-进入.png"
+            />
           </template>
         </div>
         <hr />
       </template>
       <div class="person-entry__server">
-        <img class="person-entry__icon"
-             src="../assets/个人中心-客服.png" />
-        <span @click="Server"
-              class="person-entry__text">联系客服</span>
-        <img class="person-entry__arrow"
-             src="../assets/个人中心-进入.png" />
+        <img class="person-entry__icon" src="../assets/个人中心-客服.png" />
+        <span @click="Server" class="person-entry__text">联系客服</span>
+        <img class="person-entry__arrow" src="../assets/个人中心-进入.png" />
       </div>
       <hr />
     </div>
-    <p class="clear-cache"
-       @click="onClear">清除缓存</p>
+    <p class="clear-cache" @click="onClear">清除缓存</p>
   </div>
 </template>
 <script>
@@ -166,6 +158,7 @@ import {
   RecordSign,
   PhoneBinding,
   Coupon,
+  Login
 } from "./namespace.js";
 import { getUserInfo } from "../api";
 import { Server } from "../components/prompt";
@@ -181,11 +174,11 @@ export default {
       RecordSend: RecordSend.route,
       RecordSign: RecordSign.route,
       Coupon: Coupon.route,
+      Login: Login.route,
       PhoneBinding: PhoneBinding.route,
       xiyue_pay_template: window.options.xiyue_info,
       user: {},
-      showBuyVip:
-        window.options && window.options.hidden_personal_page_vip != 1,
+      showBuyVip: window.options && window.options.hidden_personal_page_vip != 1
     };
   },
   methods: {
@@ -208,21 +201,21 @@ export default {
     copyName() {
       var that = this;
       var clipboard = new Clipboard(".person-info__copy");
-      clipboard.on("success", function (e) {
+      clipboard.on("success", function(e) {
         that.$Toast("复制成功");
       });
-      clipboard.on("error", function (e) {
+      clipboard.on("error", function(e) {
         console.log(e);
       });
     },
     onClear() {
       location.href = "/reLogin";
-    },
+    }
   },
   created() {
-    getUserInfo().then((r) => {
+    getUserInfo().then(r => {
       this.user = r;
     });
-  },
+  }
 };
 </script>