add account
This commit is contained in:
parent
64cb41f74e
commit
1bd3c0062f
@ -9,7 +9,7 @@
|
||||
</template>
|
||||
|
||||
<!-- 关闭按钮 -->
|
||||
<v-btn icon :disabled="loading_switch">
|
||||
<v-btn icon :disabled="loading_switch" @click="back()">
|
||||
<v-icon>mdi-arrow-left</v-icon>
|
||||
</v-btn>
|
||||
<!-- 标题 -->
|
||||
@ -44,7 +44,8 @@
|
||||
|
||||
<!-- 提交 -->
|
||||
<v-btn
|
||||
color="success"
|
||||
block
|
||||
color="primary"
|
||||
:disabled="!valid"
|
||||
@click="resetValidation"
|
||||
:loading="loading_switch"
|
||||
@ -54,9 +55,131 @@
|
||||
</v-sheet>
|
||||
|
||||
<!-- 账户系统 -->
|
||||
<v-sheet>
|
||||
|
||||
<v-sheet v-else>
|
||||
<!-- 列表 -->
|
||||
<v-list flat>
|
||||
<!-- 小标题 -->
|
||||
<v-subheader>用户信息</v-subheader>
|
||||
|
||||
<!-- 用户名 -->
|
||||
<v-list-item>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>用户名：{{user_info.name}}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<!-- 学号 -->
|
||||
<v-list-item>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>学号：{{user_info.id}}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<!-- 一卡通号 -->
|
||||
<v-list-item>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>一卡通号：{{user_info.cid}}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<!-- 昵称 -->
|
||||
<v-list-item>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>昵称：{{user_info.nick}}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
<v-list-item-action>
|
||||
<v-btn @click="nick_dialog_switch = true" text>修改</v-btn>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
|
||||
<!-- 消息 -->
|
||||
<v-list-item>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>消息：{{user_info.msg.length}}条</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
<v-list-item-action>
|
||||
<v-btn @click="msg_sheet_switch = true" text>查看</v-btn>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
|
||||
<!-- 消息 -->
|
||||
<v-list-item>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>已发布：{{user_info.created.length}}条</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
<v-list-item-action>
|
||||
<v-btn @click="created_sheet_switch = true" text>查看</v-btn>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
|
||||
<!-- 小标题 -->
|
||||
<v-subheader>个性化</v-subheader>
|
||||
|
||||
<!-- darkmode -->
|
||||
<v-list-item>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>黑暗模式</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
<v-list-item-action>
|
||||
<v-switch v-model="personalize.dark_mode" class="ma-2"></v-switch>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
|
||||
<!-- 退出登录 -->
|
||||
<v-list-item>
|
||||
<v-list-item-content>
|
||||
<v-btn
|
||||
block
|
||||
color="primary"
|
||||
@click="logout_dialog_switch = true"
|
||||
class="float-right mt-5"
|
||||
>退出登录</v-btn>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-sheet>
|
||||
|
||||
<!-- 模态框 -->
|
||||
<v-dialog v-model="logout_dialog_switch" persistent max-width="290">
|
||||
<v-card>
|
||||
<v-card-title class="headline">提示</v-card-title>
|
||||
<v-card-text>您将退出登录，是否继续</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="grey darken-1" text @click="logout_dialog_switch = false">取消</v-btn>
|
||||
<v-btn color="primary" text @click="logout_dialog_switch = false">继续</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<!-- 修改昵称 -->
|
||||
<v-dialog v-model="nick_dialog_switch" persistent max-width="600px">
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="headline">修改昵称</span>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<v-container>
|
||||
<v-text-field label="新昵称*" required></v-text-field>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="grey darken-1" text @click="nick_dialog_switch = false">取消</v-btn>
|
||||
<v-btn color="primary" text @click="nick_dialog_switch = false">提交</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<!-- 消息详情弹窗 -->
|
||||
<v-bottom-sheet v-model="msg_sheet_switch" persistent fullscreen @touchmove.prevent>
|
||||
<Message :closeBottomSheet="closeMsgSheet" :list="user_info.msg"></Message>
|
||||
</v-bottom-sheet>
|
||||
|
||||
<!-- 已发布弹窗 -->
|
||||
<v-bottom-sheet v-model="created_sheet_switch" persistent fullscreen @touchmove.prevent>
|
||||
<Created :closeBottomSheet="closeCreatedSheet" :list="user_info.created"></Created>
|
||||
</v-bottom-sheet>
|
||||
</v-sheet>
|
||||
</v-app>
|
||||
</template>
|
||||
@ -64,36 +187,127 @@
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import { mapState, mapActions } from "vuex";
|
||||
import Created from "./children/Created"
|
||||
import Message from "./children/Message"
|
||||
|
||||
export default {
|
||||
name: "Add",
|
||||
data: () => {
|
||||
return {
|
||||
// 表单验证
|
||||
valid: true,
|
||||
// 用户名
|
||||
cid: "",
|
||||
// 用户密码
|
||||
pwd: "",
|
||||
// 加载条
|
||||
loading_switch: false,
|
||||
page_type: "login",
|
||||
// 页面性质
|
||||
page_type: "account",
|
||||
// 模拟用户信息
|
||||
user_info: {
|
||||
name: '赵英博',
|
||||
nick: '嘤嘤嘤',
|
||||
id: '170521328',
|
||||
cid: '2017002372',
|
||||
created: '',
|
||||
pwd: '',
|
||||
|
||||
}
|
||||
name: "赵英博",
|
||||
nick: "嘤嘤嘤",
|
||||
id: "170521328",
|
||||
cid: "2017002372",
|
||||
pwd: "",
|
||||
openid: "",
|
||||
created: [
|
||||
{
|
||||
title: "这是丢失的物品",
|
||||
create_time: "2020-01-01",
|
||||
img_url: "https://picsum.photos/1920/1080?random",
|
||||
total_addr: "长理东区",
|
||||
good_type: "lost",
|
||||
good_id: "1111"
|
||||
},
|
||||
{
|
||||
title: "这是丢失的物品",
|
||||
create_time: "2020-01-01",
|
||||
img_url: "https://picsum.photos/1920/1080?random",
|
||||
total_addr: "长理东区",
|
||||
good_type: "lost",
|
||||
good_id: "1111"
|
||||
},
|
||||
{
|
||||
title: "这是丢失的物品",
|
||||
create_time: "2020-01-01",
|
||||
img_url: "https://picsum.photos/1920/1080?random",
|
||||
total_addr: "长理东区",
|
||||
good_type: "lost",
|
||||
good_id: "1111"
|
||||
},
|
||||
{
|
||||
title: "这是丢失的物品",
|
||||
create_time: "2020-01-01",
|
||||
img_url: "https://picsum.photos/1920/1080?random",
|
||||
total_addr: "长理东区",
|
||||
good_type: "lost",
|
||||
good_id: "1111"
|
||||
}
|
||||
],
|
||||
msg: [
|
||||
{
|
||||
good_type: "lost",
|
||||
good_id: "sdsdsd",
|
||||
type: 1
|
||||
},
|
||||
{
|
||||
good_type: "lost",
|
||||
good_id: "sdsdsd",
|
||||
type: 2
|
||||
},
|
||||
{
|
||||
good_type: "lost",
|
||||
good_id: "sdsdsd",
|
||||
type: 3
|
||||
},
|
||||
{
|
||||
good_type: "lost",
|
||||
good_id: "sdsdsd",
|
||||
type: 4
|
||||
}
|
||||
]
|
||||
},
|
||||
// 个性化
|
||||
personalize: {
|
||||
dark_mode: false
|
||||
},
|
||||
// 登出dialog
|
||||
logout_dialog_switch: false,
|
||||
// 修改昵称dialog
|
||||
nick_dialog_switch: false,
|
||||
// 消息弹窗
|
||||
msg_sheet_switch: false,
|
||||
// 已发布弹窗
|
||||
created_sheet_switch: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["bg_img_url"])
|
||||
},
|
||||
methods: {
|
||||
init() {}
|
||||
init() {},
|
||||
// 关闭消息弹窗
|
||||
closeMsgSheet() {
|
||||
this.msg_sheet_switch = false
|
||||
},
|
||||
// 关闭已发布弹窗
|
||||
closeCreatedSheet() {
|
||||
this.created_sheet_switch = false
|
||||
},
|
||||
back() {
|
||||
this.$router.go(-1)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
mounted() {}
|
||||
mounted() {},
|
||||
components: {
|
||||
Created,
|
||||
Message
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
25
src/views/Account/children/Card.vue
Normal file
25
src/views/Account/children/Card.vue
Normal file
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<v-col cols="6" xs="6" sm="6" md="4" lg="3">
|
||||
<v-card class="ma-2" raised>
|
||||
<v-img
|
||||
:src="content.img_url"
|
||||
gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
|
||||
:aspect-ratio="16/9"
|
||||
></v-img>
|
||||
|
||||
<v-list-item>
|
||||
<v-list-item-content>
|
||||
<p class="subtitle-2">{{content.title}}</p>
|
||||
<div class="caption">{{content.total_addr}} {{content.create_time}}</div>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Card",
|
||||
props: ["content"]
|
||||
};
|
||||
</script>
|
||||
59
src/views/Account/children/Created.vue
Normal file
59
src/views/Account/children/Created.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<v-sheet class="fill-height" >
|
||||
<!-- 标题栏 -->
|
||||
<v-toolbar dark :src="bg_img_url">
|
||||
<!-- 图片遮罩 -->
|
||||
<template v-slot:img="{ props }">
|
||||
<v-img v-bind="props" gradient="to top right, rgba(0,0,0,0.3), rgba(0,0,0,0.4)"></v-img>
|
||||
</template>
|
||||
|
||||
<!-- 关闭按钮 -->
|
||||
<v-btn icon @click="closeBottomSheet" :disabled="loading_switch">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<!-- 标题 -->
|
||||
<v-toolbar-title>已发布</v-toolbar-title>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
</v-toolbar>
|
||||
<v-sheet>
|
||||
<v-container fluid>
|
||||
<v-row no-gutters>
|
||||
<Card v-for="(item, i) in list" :key="i" :content="item"></Card>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-sheet>
|
||||
</v-sheet>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import { mapState, mapActions } from "vuex";
|
||||
import Card from './Card'
|
||||
export default {
|
||||
name: "Created",
|
||||
props: ["closeBottomSheet", "list"],
|
||||
data: () => {
|
||||
return {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["bg_img_url"])
|
||||
},
|
||||
methods: {
|
||||
init() {},
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
components: {
|
||||
Card
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
107
src/views/Account/children/Message.vue
Normal file
107
src/views/Account/children/Message.vue
Normal file
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<v-sheet class="fill-height" >
|
||||
<!-- 标题栏 -->
|
||||
<v-toolbar dark :src="bg_img_url">
|
||||
<!-- 图片遮罩 -->
|
||||
<template v-slot:img="{ props }">
|
||||
<v-img v-bind="props" gradient="to top right, rgba(0,0,0,0.3), rgba(0,0,0,0.4)"></v-img>
|
||||
</template>
|
||||
|
||||
<!-- 关闭按钮 -->
|
||||
<v-btn icon @click="closeBottomSheet" :disabled="loading_switch">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<!-- 标题 -->
|
||||
<v-toolbar-title>我的消息</v-toolbar-title>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<!-- 关闭按钮 -->
|
||||
<v-btn icon @click="closeBottomSheet" :disabled="loading_switch">
|
||||
<v-icon>mdi-delete</v-icon>
|
||||
</v-btn>
|
||||
</v-toolbar>
|
||||
|
||||
<v-sheet>
|
||||
<v-container fluid>
|
||||
<v-card class="ma-2 mb-5" shaped v-for="(item, i) in list" :key="i">
|
||||
<v-list-item>
|
||||
<v-list-item-avatar>
|
||||
<v-icon :class="getColor(item.type)">{{getName(item.type)}}</v-icon>
|
||||
</v-list-item-avatar>
|
||||
<v-list-item-content>
|
||||
<p class="subtitle-2">{{getContent(item.type)}}</p>
|
||||
<div class="caption"></div>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</v-sheet>
|
||||
</v-sheet>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import { mapState, mapActions } from "vuex";
|
||||
export default {
|
||||
name: "Message",
|
||||
props: ["closeBottomSheet", "list"],
|
||||
data: () => {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["bg_img_url"])
|
||||
},
|
||||
methods: {
|
||||
init() {},
|
||||
|
||||
// 获取icon的颜色
|
||||
getColor(type) {
|
||||
switch(type) {
|
||||
case 1:
|
||||
return 'blue--text'
|
||||
case 2:
|
||||
return 'light-blue--text'
|
||||
case 3:
|
||||
return 'green--text'
|
||||
case 4:
|
||||
return 'red--text'
|
||||
}
|
||||
},
|
||||
// 获取icon的名称
|
||||
getName(type) {
|
||||
switch(type) {
|
||||
case 1:
|
||||
return 'mdi-comment-text-outline'
|
||||
case 2:
|
||||
return 'mdi-comment-processing-outline'
|
||||
case 3:
|
||||
return 'mdi-comment-check-outline'
|
||||
case 4:
|
||||
return 'mdi-comment-remove-outline'
|
||||
}
|
||||
},
|
||||
// 获取消息内容
|
||||
getContent(type) {
|
||||
switch(type) {
|
||||
case 1:
|
||||
return '您有新的评论'
|
||||
case 2:
|
||||
return '您有新的回复'
|
||||
case 3:
|
||||
return '您发布的消息审核通过'
|
||||
case 4:
|
||||
return '您发布的消息审核未通过'
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
mounted() {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@ -1,12 +1,7 @@
|
||||
<template>
|
||||
<v-app id="home-app">
|
||||
<!-- 顶部菜单 -->
|
||||
<v-app-bar
|
||||
app
|
||||
relative
|
||||
dark
|
||||
:src="bg_img_url"
|
||||
>
|
||||
<v-app-bar app relative dark :src="bg_img_url">
|
||||
<!-- 图片遮罩 -->
|
||||
<template v-slot:img="{ props }">
|
||||
<v-img v-bind="props" gradient="to top right, rgba(0,0,0,0.3), rgba(0,0,0,0.4)"></v-img>
|
||||
@ -42,7 +37,11 @@
|
||||
|
||||
<!-- 抽屉 -->
|
||||
<v-navigation-drawer v-model="drawer" fixed temporary app>
|
||||
<v-img :aspect-ratio="16/9" :src="bg_img_url" gradient="to top right, rgba(0,0,0,0.3), rgba(0,0,0,0.4)">
|
||||
<v-img
|
||||
:aspect-ratio="16/9"
|
||||
:src="bg_img_url"
|
||||
gradient="to top right, rgba(0,0,0,0.3), rgba(0,0,0,0.4)"
|
||||
>
|
||||
<v-row align="end" class="lightbox white--text pa-2 fill-height">
|
||||
<v-col>
|
||||
<div class="subheading">赵英博</div>
|
||||
@ -52,7 +51,7 @@
|
||||
</v-img>
|
||||
<v-list>
|
||||
<!-- 账户 -->
|
||||
<v-list-item>
|
||||
<v-list-item v-ripple @click="goTo('/account')">
|
||||
<v-list-item-icon>
|
||||
<v-icon>mdi-account</v-icon>
|
||||
</v-list-item-icon>
|
||||
@ -62,17 +61,17 @@
|
||||
</v-list-item>
|
||||
|
||||
<!-- 设置 -->
|
||||
<v-list-item>
|
||||
<!-- <v-list-item v-ripple>
|
||||
<v-list-item-icon>
|
||||
<v-icon>mdi-cog</v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>设置</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list-item> -->
|
||||
|
||||
<!-- 分享 -->
|
||||
<v-list-item>
|
||||
<v-list-item v-ripple>
|
||||
<v-list-item-icon>
|
||||
<v-icon>mdi-share</v-icon>
|
||||
</v-list-item-icon>
|
||||
@ -84,19 +83,15 @@
|
||||
</v-navigation-drawer>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<v-sheet class="fill-height" >
|
||||
<v-sheet class="fill-height">
|
||||
<!-- 空白占位 -->
|
||||
<div id="sheets"></div>
|
||||
|
||||
<!-- 进度条 -->
|
||||
<v-progress-linear
|
||||
fixed
|
||||
indeterminate
|
||||
height="5"
|
||||
color="primary"
|
||||
:active="loading_switch"
|
||||
></v-progress-linear>
|
||||
|
||||
<!-- 加载条 -->
|
||||
<v-dialog v-model="loading_switch" persistent width="300">
|
||||
<v-progress-linear indeterminate color="white" class="mb-0"></v-progress-linear>
|
||||
</v-dialog>
|
||||
|
||||
<!-- 未登录提醒 -->
|
||||
<v-banner single-line :value="banner_switch">
|
||||
<div class="caption">您还未登录，登录后即可享受全部功能</div>
|
||||
@ -107,7 +102,7 @@
|
||||
|
||||
<!-- lost列表 -->
|
||||
<v-sheet v-show="page_type=='lost'">
|
||||
<v-container fluid >
|
||||
<v-container fluid>
|
||||
<v-row no-gutters>
|
||||
<Card v-for="(item, i) in found" :key="i" :content="item"></Card>
|
||||
</v-row>
|
||||
@ -159,9 +154,7 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState([
|
||||
"bg_img_url"
|
||||
]),
|
||||
...mapState(["bg_img_url"])
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
@ -181,16 +174,21 @@ export default {
|
||||
|
||||
// 关闭底部表单-add
|
||||
closeBottomSheet() {
|
||||
this.add_switch = false
|
||||
this.add_switch = false;
|
||||
},
|
||||
|
||||
// 跳转到某页
|
||||
goTo(route) {
|
||||
this.$router.push(route)
|
||||
},
|
||||
|
||||
// 设置空白占位的高度
|
||||
resetSheetHeight(){
|
||||
resetSheetHeight() {
|
||||
// 设置空白高度
|
||||
document.getElementById(
|
||||
"sheets"
|
||||
).style.height = document.getElementsByTagName("header")[0].style.height;
|
||||
console.log('空白占位高度设置完成')
|
||||
console.log("空白占位高度设置完成");
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@ -198,12 +196,12 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
// 设置空白占位的高度
|
||||
this.resetSheetHeight()
|
||||
this.resetSheetHeight();
|
||||
// 屏幕变化的时候也更新高度
|
||||
window.onresize = function temp() {
|
||||
console.log('屏幕大小发生改变')
|
||||
this.resetSheetHeight();
|
||||
}.bind(this);
|
||||
console.log("屏幕大小发生改变");
|
||||
this.resetSheetHeight();
|
||||
}.bind(this);
|
||||
},
|
||||
components: {
|
||||
Card,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user