lunanting/jmalcloud-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加个人信息页面

Browse Source
This commit is contained in:
jmal 2020-03-19 18:05:33 +08:00
parent f1d3ee3c44
commit 46580cbc7b
6 changed files with 241 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/upload-api.js
View File

@ -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({

22
src/layout/components/Navbar.vue
View File

@ -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/">
<el-dropdown-item>Github</el-dropdown-item>
</a>
<a target="_blank" href="https://github.com/jamebal/jmal-cloud-view/">
<el-dropdown-item>Docs</el-dropdown-item>
</a>
<!--<router-link to="/">-->
<!--<el-dropdown-item>-->
<!--首页-->
<!--</el-dropdown-item>-->
<!--</router-link>-->
<!--<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>

14
src/router/index.js
View File

@ -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'),
}
]

75
src/views/form/index.vue
View File

@ -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>

4
src/views/login/index.vue
View File

@ -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()
}

141
src/views/userInfo/index.vue Normal file
View File

@ -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>