邮箱设置

src/assets/less/style3.less

@@ -144,3 +144,24 @@
     }
   }
 }
+
+
+
+//manager
+//admin-list
+.admin-list{background-color: #ededf2;
+  a{.pos(r);
+    &:after{.line.xb;}
+  }
+}
+//SetTel
+.setEmail{background-color: #ededf2;
+  label{font-size: 0.28rem; color: #6c87b2; padding: 0.2rem 0.3rem; display: block;}
+  .el-input__inner{border:none;border-radius: 0;}
+  .el-form-item{margin-bottom: 0;}
+  .el-form-item__error{padding:.10rem 15px;}
+  .el-row{background-color: #fff;line-height: 40px;}
+  .el-col-8{.tr;padding-right: 15px;}
+  .btn-code{box-shadow: none;vertical-align: middle;}
+  .input_custom.is-disabled .el-input__inner{background-color: #fff;color: #1c5fa9;}
+}

src/components/Jump.vue

@@ -16,6 +16,9 @@
       <li>
        <router-link  to="/my/7/ltc/shenzhen/dashboard">4.跳入用户面板页面</router-link>
      </li>
+     <li>
+       <router-link  to="/setEmail">5.设置邮箱</router-link>
+     </li>
     </ul>
   </div>
 </template>

src/components/Users/Manager/Admin.vue

+<template>
+  <div class="page admin-list">
+    <div class="page-header" flex="main:justify cross:center">
+      <div class="back" @click="goBack"><i class="iconfont icon-fanhui"></i></div>
+      <div class="title">{{msg}}</div>
+      <div class="btns"></div>
+    </div>
+    <div class="page-content">
+      <div class="mt40">
+        <mt-cell title="登录名">
+          <span class="fore-link-text">abc***@gmail.com</span>
+        </mt-cell>
+      </div>
+      <div class="mt40">
+        <mt-cell title="邮箱" v-if="!email" is-link to="/setEmail">
+          <span class="fore-link-text">设置</span>
+        </mt-cell>
+        <mt-cell title="邮箱" v-else is-link>
+          <span class="fore-link-text">{{email}}</span>
+        </mt-cell>
+        <mt-cell title="修改密码" is-link></mt-cell>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "Admin",
+  data() {
+    return {
+      msg: '账户管理',
+      email: ''
+    };
+  },
+  computed: {
+
+  },
+  mounted() {},
+  methods: {
+    goBack() {
+      //this.$router.go(-1);
+    },
+  }
+};
+
+</script>

src/components/Users/Manager/SetEmail.vue

+<template>
+  <div class="page setEmail">
+    <div class="page-header" flex="main:justify cross:center">
+      <div class="back" @click="goBack"><i class="iconfont icon-fanhui"></i></div>
+      <div class="title">{{msg}}</div>
+      <div class="btns"></div>
+    </div>
+    <div class="page-content">
+      <!-- 未设置邮箱 -->
+      <el-form :model="setEmail" ref="setEmail" label-width="0px">
+        <label for="">请输入你的邮箱地址</label>
+        <el-form-item prop="email" label="" :rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }]">
+          <el-input v-model="setEmail.email" placeholder="输入邮箱"></el-input>
+        </el-form-item>
+        <div class='btn-group full pl30 pr30 mt70'>
+          <el-button type="primary" round @click="submitForm('setEmail')" :disabled="!showBtnEmail">下一步</el-button>
+        </div>
+      </el-form>
+      <!-- 未设置邮箱 -->
+
+      <!-- 已设置邮箱 -->
+      <el-form label-width="0px">
+        <label for="">你的邮箱地址为</label>
+        <el-form-item>
+          <el-input disabled v-model="messageEmail" class="input_custom"></el-input>
+        </el-form-item>
+      </el-form>
+      <!-- 已设置邮箱 -->
+
+      <!-- 输入验证码 -->
+      <el-form :model="setCode" ref="setCode" label-width="0px">
+        <label for="">已发送验证码到您的邮箱，请检查邮箱，在下方输入验证码</label>
+        <el-row>
+          <el-col :span="16">
+            <el-form-item prop="code" label="" :rules="[
+            { required: true, message: '请输入验证码', trigger: 'blur,change' },
+            { min: 6, max: 6, message: '请输入6位数字验证码', trigger: 'blur,change' }
+          ]">
+              <el-input v-model="setCode.code" placeholder="请输入6位数字验证码"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-button type="primary" class="btn-code" size="small" :disabled="!showCode" @click="getCode">{{text}}</el-button>
+          </el-col>
+        </el-row>
+        <div class='btn-group full pl30 pr30 mt70'>
+          <el-button type="primary" round @click="submitForm('setCode')" :disabled="!showBtnCode">提交</el-button>
+        </div>
+      </el-form>
+      <!-- 输入验证码 -->
+
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "setEmail",
+  data() {
+    return {
+      msg: "设置邮箱",
+      setEmail: {
+        email: ''
+      },
+      messageEmail:'abc***@gmail.com',
+      setCode: {
+        code: ''
+      },
+      count: '',
+      showCode: true,
+      timer: null,
+      text:"获取验证码"
+    };
+  },
+  computed: {
+    showBtnEmail: function() {
+      return this.setEmail.email;
+    },
+    showBtnCode: function() {
+      return this.setCode.code;
+    }
+  },
+  mounted() {},
+  methods: {
+    goBack() {
+      this.$router.go(-1);
+    },
+    //设置邮箱
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          //this.$router.replace('/jump')
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    //输入验证码
+     getCode() {
+      const TIME_COUNT = 60;
+      if (!this.timer) {
+        this.count = TIME_COUNT;
+        this.showCode = false;
+        this.timer = setInterval(() => {
+          if (this.count > 0 && this.count <= TIME_COUNT) {
+            this.text=this.count+'s 后重新获取'
+            this.count--;
+          } else {
+            this.showCode = true;
+            this.text='获取验证码'
+            clearInterval(this.timer);
+            this.timer = null;
+          }
+        }, 1000)
+      }
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          //this.$router.replace('/jump')
+
+          this.$toast({
+            message: '邮箱已设置',
+            iconClass: 'iconfont icon-dui'
+          });
+
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+  }
+};
+
+</script>

src/router/index.js

@@ -23,6 +23,9 @@ import Account from '@/components/Settings/Account'
 import Create from '@/components/Users/Create'
 import Subaccount from '@/components/Users/Subaccount'
 import Welcome from '@/components/Users/Welcome'
+import SetEmail from '@/components/Users/Manager/SetEmail'
+import Admin from '@/components/Users/Manager/Admin'
+
 
 import Notice from '@/components/Notice/'
 import NoticeList from '@/components/Notice/list'
@@ -155,8 +158,21 @@ const router = new Router({
     meta: {
       title: 'NoticeShow.vue'
     }
-  },
-
+  },{
+    path: '/setEmail',
+    name: 'setEmail',
+    component: SetEmail,
+    meta: {
+      title: 'SetEmail.vue'
+    }
+  },{
+    path: '/admin',
+    name: 'admin',
+    component: Admin,
+    meta: {
+      title: 'Admin.vue'
+    }
+  }
   ]
 })