add account

src/views/Account/Account.vue

@@ -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: '赵英博',
+        name: "赵英博",
-        nick: '嘤嘤嘤',
+        nick: "嘤嘤嘤",
-        id: '170521328',
+        id: "170521328",
-        cid: '2017002372',
+        cid: "2017002372",
-        created: '',
+        pwd: "",
-        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>
 

src/views/Account/children/Card.vue

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

src/views/Account/children/Created.vue

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

src/views/Account/children/Message.vue

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

src/views/Home/Home.vue

@@ -1,12 +1,7 @@
 <template>
   <v-app id="home-app">
     <!-- 顶部菜单 -->
-    <v-app-bar
+    <v-app-bar app relative dark :src="bg_img_url">
-      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
+      <v-dialog v-model="loading_switch" persistent width="300">
-        fixed
+        <v-progress-linear indeterminate color="white" class="mb-0"></v-progress-linear>
-        indeterminate
+      </v-dialog>
-        height="5"
+
-        color="primary"
-        :active="loading_switch"
-      ></v-progress-linear>
-      
       <!-- 未登录提醒 -->
       <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([
+    ...mapState(["bg_img_url"])
-      "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('屏幕大小发生改变')
+      console.log("屏幕大小发生改变");
-			this.resetSheetHeight();
+      this.resetSheetHeight();
-		}.bind(this);
+    }.bind(this);
   },
   components: {
     Card,