绑定页面

src/main.less

@@ -203,4 +203,27 @@
 
   color: #FF8F00;
 
-}
+}
+
+.change-content,.bind-phone {
+
+  .van-field__label {
+    font-weight: bold;
+    width      : 58px;
+  }
+
+  .van-cell__value {
+    font-weight: normal;
+    font-size  : 16px;
+    color      : rgba(0, 0, 0, 1);
+
+    .van-field__control::-webkit-input-placeholder {
+      font-size: 13px;
+      color    : #AAACAD;
+    }
+  }
+}
+.bind-phone {
+  .van-field__label {
+    width: 85px;
+  }}

src/router/index.js

@@ -80,6 +80,24 @@ const routes = [{
         meta: {
             title: "添加地址"
         }
+    },
+    {
+        path: "/bindPhone",
+        name: "bindPhone",
+        component: () =>
+            import ("../views/BindPhone.vue"),
+        meta: {
+            title: "绑定手机号"
+        }
+    },
+    {
+        path: "/bindAlipay",
+        name: "bindAlipay",
+        component: () =>
+            import ("../views/BindAlipay.vue"),
+        meta: {
+            title: "绑定手机号"
+        }
     }
 ];
 

src/views/BindAlipay.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="bind-phone">
+    <van-cell-group>
+      <van-field v-model="username" clearable label="姓名" placeholder="请填写您的支付宝姓名" />
+      <van-field v-model="account" clearable label="支付宝账号" placeholder="请填写支付宝账号" />
+      <van-field v-model="sureAccount" clearable label="确认账号" placeholder="请确认账号" />
+    </van-cell-group>
+
+    <div class="submit-btn">
+      <van-button type="primary" size="large" round>立即绑定</van-button>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState } from "vuex";
+export default {
+  name: "bindPhone",
+  data() {
+    return {
+      username: "",
+      account: "",
+      sureAccount: ""
+    };
+  },
+  computed: {
+    ...mapState(["userInfo"])
+  }
+};
+</script>
+<style lang='less' scoped>
+.bind-phone {
+  background: rgba(242, 244, 245, 1);
+  padding: 15px;
+}
+.van-cell {
+  line-height: 40px;
+}
+
+.van-cell-group {
+  border-radius: 4px;
+}
+
+.van-button--small {
+  height: 32px;
+  background: rgba(255, 143, 0, 0.12);
+  border: 1px solid rgba(255, 143, 0, 0.12);
+  color: #ff8f00;
+}
+
+.submit-btn {
+  margin-top: 36px;
+}
+</style>

src/views/BindPhone.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="bind-phone">
+    <van-cell-group>
+      <van-field
+        v-model="phone"
+        type="number"
+        maxlength="11"
+        clearable
+        label="手机号"
+        placeholder="请输入手机号"
+      />
+
+      <van-field v-model="sms" center clearable maxlength="6" label="短信验证码" placeholder="请输入短信验证码">
+        <van-button slot="button" type="primary" size="small">发送验证码</van-button>
+      </van-field>
+    </van-cell-group>
+
+    <div class="submit-btn">
+      <van-button type="primary" size="large" round>立即绑定</van-button>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState } from "vuex";
+export default {
+  name: "bindPhone",
+  data() {
+    return {
+      phone: "",
+      sms: ""
+    };
+  },
+  computed: {
+    ...mapState(["userInfo"])
+  }
+};
+</script>
+<style lang='less' scoped>
+.bind-phone {
+  background: rgba(242, 244, 245, 1);
+  padding: 15px;
+}
+.van-cell {
+  line-height: 40px;
+}
+
+.van-cell-group {
+  border-radius: 4px;
+}
+
+.van-button--small {
+  height: 32px;
+  background: rgba(255, 143, 0, 0.12);
+  border: 1px solid rgba(255, 143, 0, 0.12);
+  color: #ff8f00;
+}
+
+.submit-btn {
+  margin-top: 36px;
+}
+</style>

src/views/Setting.vue

@@ -11,7 +11,7 @@
           src="https://img.yzcdn.cn/vant/cat.jpeg"
         />
       </van-cell>
-      <van-cell title="昵称" value="粉条" isLink />
+      <van-cell title="昵称" value="粉条" @click="showName=true" isLink />
       <van-cell
         title="性别"
         :class="{notSet:!sex}"
@@ -38,7 +38,12 @@
       />
     </van-cell-group>
 
-    <van-popup v-model="showName" position="bottom"></van-popup>
+    <van-popup v-model="showName" position="bottom">
+      <div class="change-content">
+        <van-field class="nickname-field" v-model="value" label="昵称" placeholder="请输入昵称" />
+        <van-button type="primary" round>确定</van-button>
+      </div>
+    </van-popup>
 
     <van-popup v-model="show" position="bottom">
       <van-area :area-list="areaList" :columns-num="2" @confirm="addressConfirm" />
@@ -75,7 +80,7 @@ export default {
       date: new Date(),
       actions: [{ name: "男" }, { name: "女" }],
       showSex: false,
-      showName: true
+      showName: false
     };
   },
   computed: {
@@ -139,4 +144,24 @@ export default {
     }
   }
 }
+
+.change-content {
+  padding: 15px;
+  background-color: #f2f4f5;
+  .van-cell {
+    line-height: 40px;
+    border-radius: 2px;
+    font-size: 14px;
+    color: #000;
+  }
+  .van-cell:not(:last-child)::after {
+    border: none;
+  }
+
+  .van-button {
+    width: 100%;
+    display: block;
+    margin: 26px 0 0;
+  }
+}
 </style>

src/views/User.vue

@@ -60,6 +60,7 @@
           value-class="menu-not-val"
           value="未绑定"
           is-link
+          @click="goNext('bindPhone')"
         >
           <img src="../assets/info_list_icon_shouji.png" class="menu-img" slot="icon" alt />
         </van-cell>
@@ -69,6 +70,7 @@
           value-class="menu-not-val"
           value="未绑定"
           is-link
+          @click="goNext('bindAlipay')"
         >
           <img src="../assets/info_list_icon_zhifubao.png" class="menu-img" slot="icon" alt />
         </van-cell>