no message

pages.json

@@ -231,7 +231,7 @@
     {
       "path": "pages/my/set",
       "style": {
-        "navigationBarTitleText": "",
+        "navigationBarTitleText": "设置",
         "navigationBarTextStyle": "black",
         "enablePullDownRefresh": false
       }
@@ -239,7 +239,23 @@
     {
       "path": "pages/my/set/autonym",
       "style": {
-        "navigationBarTitleText": "",
+        "navigationBarTitleText": "实名认证",
+        "navigationBarTextStyle": "black",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/my/set/change-pass",
+      "style": {
+        "navigationBarTitleText": "修改密码",
+        "navigationBarTextStyle": "black",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/my/set/chang-phone",
+      "style": {
+        "navigationBarTitleText": "修改手机号码",
         "navigationBarTextStyle": "black",
         "enablePullDownRefresh": false
       }

pages/my/set.vue

@@ -54,8 +54,8 @@ export default {
       storageSize:'',
       setList:[
         {'text':'实名认证(未认证)','url':'autonym'},
-        {'text':'修改密码','url':''},
-        {'text':'修改绑定手机','url':''},
+        {'text':'修改密码','url':'change-pass'},
+        {'text':'修改绑定手机','url':'chang-phone'},
         {'text':'更多设置','url':''},
       ],
       sysList:[

pages/my/set/chang-phone.vue

@@ -0,0 +1,160 @@
+<template>
+  <view class="chang-phone-box">
+    <en-nav title="修改绑定手机" :title-color="'#333'"  ></en-nav>
+    <view class="chang-phone-from">
+      <view class="from-text"  :class="{'apply-shake':phoneShake}">
+        <input type="tel" class="from-input sys-color-gray-3" max="11" v-model="phone" placeholder="请输入手机号"></input>
+      </view>
+      <view class="from-code" :class="{'apply-shake':codeShake}">
+        <view class="from-text">
+          <input type="tel" class="from-input sys-color-gray-3" v-model="code" placeholder="请输入验证码"></input>
+        </view>
+        <view class="code-text sys-background-yellow">
+          <text class="sys-color-gray-3" v-if="time<=0" @click="senCode">获取验证码</text>
+          <text class="sys-color-gray-3" v-else>{{time}} s</text>
+        </view>
+      </view>
+
+    </view>
+    <view class="chang-phone-but sys-color-white sys-background-black sys-selected-but" @click="setPhone" :class="{'sys-unselected-but':!isLogin}">完成</view>
+  </view>
+</template>
+
+<script>
+import EnNav from "@/components/en-utils/en-nav/en-nav";
+import tools from "@/service/tools";
+export default {
+  components: {EnNav},
+  data() {
+    return {
+      navHeight:40,
+      isLogin:false,
+      phoneShake:false,
+      codeShake:false,
+      phone:'',
+      code:'',
+      time:0
+    }
+  },
+  watch:{
+    'phone':function (){
+      this.verifyIsLogin()
+    },
+    'code':function (){
+      this.verifyIsLogin()
+    },
+
+  },
+  methods: {
+    setPhone(){
+      if(this.phone.length !== 11){
+        tools.error('请输入手机号码')
+        this.setShake(1)
+        tools.vibrate()
+        return false
+      }
+      if(this.code ===''){
+        tools.error('请输入验证码')
+        this.setShake(2)
+        tools.vibrate()
+        return false
+      }
+
+      uni.redirectTo({
+        'url':'/pages/my/set'
+      })
+    },
+    setShake(type){
+      if(type===1){
+        this.phoneShake=true
+      }else if(type===3){
+        this.passwordShake=true
+      }else {
+        this.codeShake=true
+      }
+      setTimeout(()=>{
+        this.phoneShake=false
+        this.passwordShake=false
+        this.codeShake=false
+      },500)
+    },
+    setNavHeight(navHeight){
+      this.navHeight=navHeight
+    },
+    verifyIsLogin(){
+      this.isLogin = this.phone.length === 11 && this.code !== '';
+    },
+    senCode(){
+      if(this.phone.length !== 11){
+        tools.error('请输入手机号码')
+        this.setShake(2)
+        tools.vibrate()
+        return false
+      }
+      this.time=60
+      let timeServe=setInterval(()=>{
+        --this.time
+        if(this.time<=0){
+          clearInterval(timeServe)
+        }
+      },1000)
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.chang-phone-box{
+  padding: 0 32rpx;
+  box-sizing: border-box;
+  position: relative;
+  min-height: 100vh;
+  .chang-phone-from{
+    margin-top: 40rpx;
+    .from-text{
+      width: 100%;
+      padding-bottom: 40rpx;
+      border-bottom: 1rpx solid #E0E0E0;
+      .from-input{
+        font-size: 32rpx;
+        height: 44rpx;
+        line-height: 44rpx;
+      }
+      .from-input::placeholder{
+        color: #999999;
+      }
+    }
+    .from-code{
+      margin-top: 48rpx;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .from-text{
+        width: 344rpx;
+      }
+      .code-text{
+        padding: 0 16rpx;
+        border-radius: 200rpx;
+        width: 180rpx;
+        height: 60rpx;
+        line-height: 60rpx;
+        text-align: center;
+        text{
+          font-size: 32rpx;
+        }
+      }
+    }
+    .from-item{
+      margin-top: 60rpx;
+    }
+  }
+  .chang-phone-but{
+    position: absolute;
+    bottom:calc(50rpx + env(safe-area-inset-bottom));
+    left: 32rpx;
+    width:calc(100vw - 64rpx);
+  }
+
+}
+
+</style>

pages/my/set/change-pass.vue

@@ -0,0 +1,128 @@
+<template>
+  <view class="change-pass-box">
+    <en-nav title="实名认证" :title-color="'#333'"  ></en-nav>
+    <view class="change-pass-data">
+      <view class="phone-data">
+        <view class="phone-text sys-color-black sys-weight-600 ">+1888****4188</view>
+        <view class="phone-but sys-color-black sys-background-yellow">获取验证码</view>
+      </view>
+      <view class="from-text from-item">
+        <input type="number" class="from-input sys-color-black" v-model="code" placeholder="请输入验证码"></input>
+      </view>
+      <view class="from-text from-item">
+        <input type="password" class="from-input sys-color-black" v-model="password" placeholder="请设置密码"></input>
+      </view>
+      <view class="warn-text sys-color-gray-9">
+        请输入至少6个数字，字母和符号组成的密码
+      </view>
+    </view>
+    <view class="login-bottom">
+      <view class="login-but sys-color-white sys-background-black sys-selected-but" @click="setNextStep" :class="{'sys-unselected-but':!isOK,'apply-shake':isShakeBut}">下一步</view>
+    </view>
+
+  </view>
+</template>
+
+<script>
+import EnNav from "@/components/en-utils/en-nav/en-nav";
+import tools from "@/service/tools";
+export default {
+  name: "change-pass",
+  components: {EnNav},
+  props: {},
+  data() {
+    return {
+      code:'',
+      password:'',
+      isOK:false,
+      isShakeBut:false,
+    }
+  },
+  watch: {
+    'code':function (){
+      this.verifyIsOK()
+    },
+    'password':function (){
+      this.verifyIsOK()
+    },
+  },
+  mounted() {
+
+  },
+  methods: {
+    verifyIsOK(){
+      this.isOK = this.code!=='' && this.password.length>=6;
+    },
+    setNextStep(){
+      if(this.isOK){
+        uni.redirectTo({
+          'url':'/pages/my/set'
+        })
+      }else {
+        tools.error('请完善信息')
+        this.isShakeBut=true
+        setTimeout(()=>{
+          this.isShakeBut=false
+        },500)
+      }
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.change-pass-box{
+min-height: 100vh;
+  .change-pass-data{
+    padding: 0 32rpx;
+    .phone-data{
+      margin-top: 48rpx;
+      display: flex;
+      justify-content: space-between;
+      .phone-text{
+        font-size: 44rpx;
+        height: 60rpx;
+        line-height: 60rpx;
+      }
+      .phone-but{
+        height: 60rpx;
+        border-radius: 200rpx;
+        padding:  0 16rpx;
+        line-height: 60rpx;
+      }
+    }
+    .from-text{
+      width: 100%;
+      padding-bottom: 40rpx;
+      border-bottom: 1rpx solid #E0E0E0;
+      .from-input{
+        font-size: 32rpx;
+        height: 44rpx;
+        line-height: 44rpx;
+      }
+      .from-input::placeholder{
+        color: #999999;
+      }
+    }
+    .from-item{
+      margin-top: 60rpx;
+    }
+    .warn-text{
+      margin-top: 24rpx;
+      font-size: 24rpx;
+    }
+
+  }
+  .login-bottom{
+    padding-bottom: calc(58rpx + env(safe-area-inset-bottom));
+    position: absolute;
+    bottom: 0;
+    left: 68rpx;
+    width:calc(100vw - 136rpx);
+    .login-but{
+      margin-top: 120rpx;
+    }
+  }
+
+}
+</style>