添加个人信息页面

src/api/upload-api.js

@@ -4,6 +4,8 @@ const qs = require('qs')
 export default {
   // 上传
   simpleUploadURL: process.env.VUE_APP_BASE_API + '/upload',
+  // 上传头像
+  simpleUploadAvatarURL: process.env.VUE_APP_BASE_API + '/upload',
   // 合并
   mergeSimpleUpload: function(params) {
     return request({

src/layout/components/Navbar.vue

@@ -7,23 +7,25 @@
     <div class="right-menu">
       <el-dropdown class="avatar-container" trigger="click">
         <div class="avatar-wrapper">
-          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
+          <img :src="avatar" class="user-avatar">
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown" class="user-dropdown">
-          <router-link to="/">
+          <router-link to="/userinfo">
             <el-dropdown-item>
-              Home
+              个人信息
             </el-dropdown-item>
           </router-link>
-          <a target="_blank" href="https://github.com/jamebal/jmal-cloud-view/">
+          <!--<router-link to="/">-->
-            <el-dropdown-item>Github</el-dropdown-item>
+            <!--<el-dropdown-item>-->
-          </a>
+              <!--首页-->
-          <a target="_blank" href="https://github.com/jamebal/jmal-cloud-view/">
+            <!--</el-dropdown-item>-->
-            <el-dropdown-item>Docs</el-dropdown-item>
+          <!--</router-link>-->
-          </a>
+          <!--<a target="_blank" href="https://github.com/jamebal/jmal-cloud-view/">-->
+            <!--<el-dropdown-item>Github</el-dropdown-item>-->
+          <!--</a>-->
           <el-dropdown-item divided @click.native="logout">
-            <span style="display:block;">Log Out</span>
+            <span style="display:block;">退出登录</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>

src/router/index.js

@@ -86,6 +86,18 @@ export const constantRoutes = [
     ]
   },
 
+  {
+    path: '/userinfo',
+    component: Layout,
+    children: [
+      {
+        path: '',
+        name: 'userInfo',
+        component: () => import('@/views/userInfo/index'),
+      }
+    ]
+  },
+
   {
     path: '/share',
     component: Layout,
@@ -156,7 +168,7 @@ export const constantRoutes = [
     children: [
       {
         path: '',
-        name: 'share',
+        name: 's',
         component: () => import('@/views/public/share/shareList'),
       }
     ]

src/views/form/index.vue

@@ -1,17 +1,84 @@
 <template>
-  <div v-html="html"></div>
+  <div class="app-container">
+    <el-form ref="form" :model="form" label-width="120px">
+      <el-form-item label="Activity name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="Activity zone">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="Activity time">
+        <el-col :span="11">
+          <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%;" />
+        </el-col>
+        <el-col :span="2" class="line">-</el-col>
+        <el-col :span="11">
+          <el-time-picker v-model="form.date2" type="fixed-time" placeholder="Pick a time" style="width: 100%;" />
+        </el-col>
+      </el-form-item>
+      <el-form-item label="Instant delivery">
+        <el-switch v-model="form.delivery" />
+      </el-form-item>
+      <el-form-item label="Activity type">
+        <el-checkbox-group v-model="form.type">
+          <el-checkbox label="Online activities" name="type" />
+          <el-checkbox label="Promotion activities" name="type" />
+          <el-checkbox label="Offline activities" name="type" />
+          <el-checkbox label="Simple brand exposure" name="type" />
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item label="Resources">
+        <el-radio-group v-model="form.resource">
+          <el-radio label="Sponsor" />
+          <el-radio label="Venue" />
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="Activity form">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">Create</el-button>
+        <el-button @click="onCancel">Cancel</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 
 <script>
   export default {
     data() {
       return {
-        html: ""
+        form: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        }
       }
     },
-    created() {
-    },
     methods: {
+      onSubmit() {
+        this.$message('submit!')
+      },
+      onCancel() {
+        this.$message({
+          message: 'cancel!',
+          type: 'warning'
+        })
+      }
     }
   }
 </script>
+
+<style scoped>
+  .line{
+    text-align: center;
+  }
+</style>

src/views/login/index.vue

@@ -60,14 +60,14 @@ export default {
   data() {
     const validateUsername = (rule, value, callback) => {
       if (!this.validUsername(value)) {
-        callback(new Error('Please enter the correct user name'))
+        callback(new Error('请输入正确的用户名'))
       } else {
         callback()
       }
     }
     const validatePassword = (rule, value, callback) => {
       if (value.length < 6) {
-        callback(new Error('The password can not be less than 6 digits'))
+        callback(new Error('密码不能少于6位数字'))
       } else {
         callback()
       }

src/views/userInfo/index.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="app-container">
+    <el-form ref="form" :model="form" label-width="120px">
+      <el-form-item label="头像">
+
+        <el-upload
+          class="avatar-uploader"
+          :action="UploadAvatarURL"
+          :show-file-list="false"
+          :on-change="addAvatar"
+          :auto-upload="false"
+          :before-upload="beforeAvatarUpload">
+          <img v-if="form.avater" :src="form.avater" class="avatar">
+          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+        </el-upload>
+      </el-form-item>
+      <el-form-item label="Activity name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="Activity zone">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="Activity time">
+        <el-col :span="11">
+          <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%;" />
+        </el-col>
+        <el-col :span="2" class="line">-</el-col>
+        <el-col :span="11">
+          <el-time-picker v-model="form.date2" type="fixed-time" placeholder="Pick a time" style="width: 100%;" />
+        </el-col>
+      </el-form-item>
+      <el-form-item label="Instant delivery">
+        <el-switch v-model="form.delivery" />
+      </el-form-item>
+      <el-form-item label="Activity type">
+        <el-checkbox-group v-model="form.type">
+          <el-checkbox label="Online activities" name="type" />
+          <el-checkbox label="Promotion activities" name="type" />
+          <el-checkbox label="Offline activities" name="type" />
+          <el-checkbox label="Simple brand exposure" name="type" />
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item label="Resources">
+        <el-radio-group v-model="form.resource">
+          <el-radio label="Sponsor" />
+          <el-radio label="Venue" />
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="Activity form">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">Create</el-button>
+        <el-button @click="onCancel">Cancel</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+
+  import api from '@/api/upload-api'
+
+  export default {
+    data() {
+      return {
+        UploadAvatarURL: api.simpleUploadAvatarURL,
+        form: {
+          avater: '',
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        }
+      }
+    },
+    methods: {
+      onSubmit() {
+        this.$message('submit!')
+      },
+      onCancel() {
+        this.$message({
+          message: 'cancel!',
+          type: 'warning'
+        })
+      },
+      addAvatar(file, fileList) {
+        console.log(file,fileList)
+        let reader = new FileReader();
+        const _this = this
+        reader.onload = function (e) {
+          _this.form.avater = e.target.result
+        };
+        reader.readAsDataURL(file.raw)
+      },
+      beforeAvatarUpload(file) {
+        const isLt2M = file.size / 1024 / 1024 < 2;
+        if (!isLt2M) {
+          this.$message.error('上传头像图片大小不能超过 2MB!');
+        }
+        return isLt2M;
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .line{
+    text-align: center;
+  }
+   /deep/ .avatar-uploader .el-upload {
+     border: 1px dashed #d9d9d9;
+     border-radius: 6px;
+     cursor: pointer;
+     position: relative;
+     overflow: hidden;
+   }
+  /deep/.avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  /deep/.avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  /deep/.avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }
+</style>