add created && add message && fix bugs

src/axios/fetch.js

@@ -1,7 +1,7 @@
 import axios from 'axios'
 
 export const api = axios.create({
-  // baseURL: 'https://yg.lacus.site/v1/user/',
+  // baseURL: 'https://tracer.lacus.site/v1/user/',
   baseURL: window.location.origin + '/v1/user/',
   headers: {
     'Content-Type': 'application/json',

src/router/index.js

@@ -25,7 +25,7 @@ const routes = [
     name: 'Account',
     component: () => import(/* webpackChunkName: "account" */ '../views/Account/Account.vue'),
     meta: {
-			keepAlive: true
+			keepAlive: false
 		},
   },
   {
@@ -35,6 +35,22 @@ const routes = [
     meta: {
 			keepAlive: false
 		},
+  },
+  {
+    path: '/message',
+    name: 'Message',
+    component: () => import(/* webpackChunkName: "message" */ '../views/Message/Message.vue'),
+    meta: {
+			keepAlive: false
+		},
+  },
+  {
+    path: '/created',
+    name: 'Created',
+    component: () => import(/* webpackChunkName: "created" */ '../views/Created/Created.vue'),
+    meta: {
+			keepAlive: false
+		},
   },
 	{
 		path: '*', // 页面不存在的情况下会跳到home

src/views/Account/Account.vue

@@ -38,6 +38,7 @@
               placeholder="请输入您的教务密码"
               @focus="focus_list_2 = 1;focusOrBlur()"
               @blur="focus_list_2 = 0;focusOrBlur()"
+              type="password"
             ></md-input>
           </md-field>
           <md-button class="md-raised md-primary expand login-submit" @click="login()" :disabled="loading_switch">登录</md-button>
@@ -60,13 +61,13 @@
                 <md-icon>edit</md-icon>
               </md-button>
             </md-list-item>
-            <md-list-item>
+            <md-list-item @click="turnToMsg">
               <span class="md-list-item-text">消息：{{user_info.msg.length}}条</span>
               <md-button class="md-icon-button md-list-action">
                 <span>查看</span>
               </md-button>
             </md-list-item>
-            <md-list-item>
+            <md-list-item @click="turnToCreated">
               <span class="md-list-item-text">已发布：{{user_info.created.length}}条</span>
               <md-button class="md-icon-button md-list-action">
                 <span>查看</span>
@@ -378,6 +379,24 @@ export default {
           this.nick = ""
         });
     },
+
+    // 跳转到消息
+    turnToMsg() {
+      if(this.user_info.msg.length == 0) {
+        this.message('您没有消息')
+        return
+      }
+      this.$router.push('/message')
+    },
+
+    // 跳转到已发布
+    turnToCreated() {
+      if(this.user_info.created.length == 0) {
+        this.message('您还未发布过')
+        return
+      }
+      this.$router.push('/created')
+    }
   },
   created() {
     this.init();
@@ -434,6 +453,7 @@ export default {
   .md-toolbar {
     position: fixed;
     top: 0;
+    z-index: 100 !important;
   }
   .md-toolbar-row {
     order: 12;

src/views/Create/Create.vue

@@ -33,14 +33,14 @@
           <span class="md-helper-text">譬如：水杯、手机等易于搜索的~</span>
         </md-field>
         <md-field style="margin-top:40px;">
-          <label>描述</label>
+          <label>详情</label>
           <md-textarea
             v-model="content"
             maxlength="100"
             @focus="focus_list_2 = 1;focusOrBlur()"
             @blur="focus_list_2 = 0;focusOrBlur()"
           ></md-textarea>
-          <span class="md-helper-text">描述一下它的特征之类的</span>
+          <span class="md-helper-text">描述一下特征，丢失的时间之类的</span>
         </md-field>
         <md-field style="margin-top:40px;">
           <label for="total_addr">地区*</label>

src/views/Created/Created.vue

@@ -0,0 +1,269 @@
+<template>
+  <div class="created" ref="created">
+    <md-app md-waterfall md-mode="fixed">
+      <md-app-toolbar class="md-primary">
+        <div class="md-toolbar-section-start">
+          <md-button class="md-icon-button" @click="back" :disabled="loading_switch">
+            <md-icon>arrow_back</md-icon>
+          </md-button>
+          <span class="md-title page-title">已发布 - {{user_info.created.length}}条</span>
+        </div>
+      </md-app-toolbar>
+      <md-app-content>
+        <v-touch @swiperight="back" :swipe-options="{ direction: 'horizontal' }">
+          <div ref="list_placeholder" :style="`height:56px`"></div>
+          <md-progress-bar
+            v-if="loading_switch"
+            md-mode="indeterminate"
+            style="position: absolute; top: 56px; left: 0; width: 100%;"
+          ></md-progress-bar>
+          <md-content
+                v-for="(item, index) in user_info.created"
+                :key="index"
+                @click="turnToDetail(item.id)"
+              >
+                <md-card class="md-card-example">
+                  <md-card-area md-inset>
+                    <md-card-media md-ratio="16:9">
+                      <img :src="`https://tracer.lacus.site/photo/${item.img_url}`" />
+                    </md-card-media>
+
+                    <md-card-header>
+                      <h2 class="md-subheading">{{item.title}}</h2>
+                      <div class="md-subhead">
+                        <md-icon>access_time</md-icon>
+                        <span>{{formatDateTime(item.create_time)}}</span>
+                      </div>
+                      <div class="md-subhead">
+                        <md-icon>location_on</md-icon>
+                        <span>{{item.total_addr}}</span>
+                      </div>
+                    </md-card-header>
+                  </md-card-area>
+                </md-card>
+              </md-content>
+
+          <md-dialog-confirm
+            :md-active.sync="clear_confirm_switch"
+            md-title="警告"
+            md-content="您将清空所有消息</br>该操作不可复原，是否继续"
+            md-confirm-text="继续"
+            md-cancel-text="取消"
+            :md-click-outside-to-close="false"
+            @md-confirm="clearMsg"
+          />
+
+          <md-snackbar
+            md-position="center"
+            :md-active.sync="show_snackbar"
+            md-persistent
+            :md-duration="1500"
+          >
+            <span>{{ snakebar_msg }}</span>
+          </md-snackbar>
+          <div style="height: 40px;"></div>
+        </v-touch>
+      </md-app-content>
+    </md-app>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import { mapState, mapActions } from "vuex";
+import { setHtmlFontSize } from "@/utils/px2rem.js";
+import { api } from "@/axios/fetch.js";
+import { formatDateTime } from "@/utils/formatTime.js";
+
+export default {
+  name: "Created",
+  data() {
+    return {
+      // 显示高度，控制md-app的最小高度，防止抽屉高度塌陷
+      clientHeight: "",
+      // snackbar控制
+      show_snackbar: false,
+      snakebar_msg: "",
+      // 加载控制
+      loading_switch: false,
+      // 清除确认弹窗控制
+      clear_confirm_switch: false
+    };
+  },
+  computed: {
+    ...mapState(["user_info", "settings", "bar_state"])
+  },
+  methods: {
+    ...mapActions(["setUserInfo", "setSettings", "setBarState"]),
+    formatDateTime,
+    // 修改md-app的最小高度
+    changeFixed(clientHeight) {
+      //动态修改样式
+      this.$refs.created.children[0].style.minHeight = clientHeight + "px";
+      this.$refs.list_placeholder.parentNode.parentNode.style.maxHeight =
+        clientHeight + "px";
+      this.$refs.list_placeholder.parentNode.style.minHeight =
+        clientHeight - 32 + "px";
+      window.document.documentElement.setAttribute(
+        "data-theme",
+        this.settings.is_dark_mode ? "dark" : "light"
+      );
+    },
+
+    // 初始化
+    init() {
+      // 刷新vuex
+      this.$store.replaceState(
+        Object.assign(
+          this.$store.state,
+          JSON.parse(localStorage.getItem("storeState"))
+        )
+      );
+      // 底部状态栏状态设置
+      this.setBarState([false, this]);
+      // 无内容拦截
+      if (this.user_info.created.length == 0) {
+        this.back();
+      }
+    },
+
+    // 返回到主页
+    back() {
+      this.$router.replace("/account");
+    },
+
+    // 调用snackBar
+    message(msg) {
+      this.snakebar_msg = msg;
+      this.show_snackbar = true;
+    },
+
+    // 跳转详情
+    turnToDetail(id) {
+      console.log(id);
+      this.$router.push({ path: "/detail", query: { id: id } });
+    },
+  },
+  created() {
+    this.init();
+  },
+  mounted() {
+    // 获取浏览器可视区域高度
+    this.clientHeight = `${document.documentElement.clientHeight}`;
+    //document.body.clientWidth;
+    window.onresize = function temp() {
+      this.clientHeight = `${document.documentElement.clientHeight}`;
+      setHtmlFontSize();
+    }.bind(this);
+    this.$refs.list_placeholder.parentNode.parentNode.addEventListener(
+      "scroll",
+      this.scroll
+    );
+  },
+  watch: {
+    // 如果 `clientHeight` 发生改变，这个函数就会运行
+    clientHeight: function() {
+      this.changeFixed(this.clientHeight);
+    }
+  },
+  beforeDestroy() {},
+  components: {}
+};
+</script>
+
+<style scoped lang="scss" type="text/scss">
+@import "../../style/main";
+.created {
+  width: 100%;
+  // max-width: 500px;
+  min-height: 100%;
+  background: #fff;
+  // margin: 0 auto;
+  .expand {
+    box-sizing: border-box;
+    min-height: 0.8rem !important;
+    margin: 0.5rem 16px !important;
+  }
+  .login-submit {
+    width: 100%;
+    margin: 0.5rem 0 !important;
+  }
+  .md-toolbar {
+    position: fixed;
+    top: 0;
+  }
+  .md-toolbar-row {
+    order: 12;
+    // margin-bottom: .3rem !important;
+  }
+  .md-toolbar-section-start,
+  .md-toolbar-section-end,
+  .md-toolbar-row {
+    min-height: 56px;
+  }
+  .md-toolbar-row {
+    margin-top: -10px;
+  }
+  .md-speed-dial.md-bottom-right {
+    position: fixed !important;
+  }
+}
+// Demo purposes only
+.md-drawer {
+  width: 240px;
+  max-width: calc(100vw - 125px);
+}
+.md-app-scroller > div {
+  overflow-y: scroll !important;
+}
+.face {
+  color: #fff !important;
+}
+.page-title {
+  flex: 1;
+  min-height: 56px;
+  line-height: 56px;
+}
+.sroll-top-area {
+  flex: 1;
+  min-height: 56px;
+}
+.md-bottom-bar.md-type-fixed .md-bottom-bar-item {
+  max-width: 1000px !important;
+}
+.md-card-example {
+  .md-subhead {
+    margin-top: 0.1rem;
+    .md-icon {
+      $size: 16px;
+      width: $size;
+      min-width: $size;
+      height: $size;
+      font-size: $size !important;
+      margin-right: 0.3rem;
+    }
+
+    span {
+      vertical-align: middle;
+    }
+  }
+}
+.md-app-content .md-card {
+  margin: 0 !important;
+}
+.loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  height: 5rem;
+  width: 5rem;
+  margin-top: -2.5rem;
+  margin-left: -2.5rem;
+}
+.md-list-item-text p {
+  word-wrap: break-word !important;
+  overflow: visible !important;
+  white-space: normal !important;
+  margin-top: 0.2rem;
+}
+</style>

src/views/Detail/Detail.vue

@@ -40,7 +40,7 @@
         <md-card class="md-card-example" v-else>
           <md-card-area md-inset>
             <md-card-media>
-              <img :src="`https://yg.canary.moe/photo/${content.img_url}`" />
+              <img :src="`https://tracer.lacus.site/photo/${content.img_url}`" />
             </md-card-media>
 
             <md-card-header>
@@ -57,9 +57,13 @@
                 <md-icon>gps_fixed</md-icon>
                 <span>{{content.detail_addr}}</span>
               </div>
-              <div class="md-subhead" v-if="content.contact">
+              <div class="md-subhead" v-if="content.contact"
+                v-clipboard:copy="content.contact"
+                v-clipboard:success="onCopyUrl"
+                v-clipboard:error="onErrorUrl"
+              >
                 <md-icon>attach_file</md-icon>
-                <span>{{content.contact}}</span>
+                <span>{{content.contact}}(点击复制</span>
               </div>
             </md-card-header>
             <md-card-content>{{content.content}}</md-card-content>
@@ -217,7 +221,7 @@ export default {
 
     // 返回到主页
     back() {
-      this.$router.replace("/home");
+      this.$router.go(-1);
     },
 
     // 获取详细信息
@@ -356,6 +360,12 @@ export default {
             this.message("网络错误,请稍候重试");
           }
         });
+    },
+    onCopyUrl(e) {
+      this.message("复制成功");
+    },
+    onErrorUrl(e) {
+      this.message("复制失败");
     }
   },
   created() {

src/views/Home/Home.vue

@@ -62,7 +62,7 @@
                 <md-card class="md-card-example">
                   <md-card-area md-inset>
                     <md-card-media md-ratio="16:9">
-                      <img :src="`https://yg.canary.moe/photo/${item.img_url}`" />
+                      <img :src="`https://tracer.lacus.site/photo/${item.img_url}`" />
                     </md-card-media>
 
                     <md-card-header>
@@ -99,7 +99,7 @@
                 <md-card class="md-card-example">
                   <md-card-area md-inset>
                     <md-card-media md-ratio="16:9">
-                      <img :src="`https://yg.canary.moe/photo/${item.img_url}`" />
+                      <img :src="`https://tracer.lacus.site/photo/${item.img_url}`" />
                     </md-card-media>
 
                     <md-card-header>

src/views/Message/Message.vue

@@ -0,0 +1,340 @@
+<template>
+  <div class="message" ref="message">
+    <md-app md-waterfall md-mode="fixed">
+      <md-app-toolbar class="md-primary">
+        <div class="md-toolbar-section-start">
+          <md-button class="md-icon-button" @click="back" :disabled="loading_switch">
+            <md-icon>arrow_back</md-icon>
+          </md-button>
+          <span class="md-title page-title">消息 - {{user_info.msg.length}}条</span>
+        </div>
+        <div class="md-toolbar-section-end">
+          <md-button class="md-icon-button" @click="clear_confirm_switch = true">
+            <md-icon>delete</md-icon>
+          </md-button>
+        </div>
+      </md-app-toolbar>
+      <md-app-content>
+        <v-touch @swiperight="back" :swipe-options="{ direction: 'horizontal' }">
+          <div ref="list_placeholder" :style="`height:56px`"></div>
+          <md-progress-bar
+            v-if="loading_switch"
+            md-mode="indeterminate"
+            style="position: absolute; top: 56px; left: 0; width: 100%;"
+          ></md-progress-bar>
+          <md-card v-for="(msg, index) in msgs" :key="index">
+            <md-card-header>
+              <md-avatar>
+                <md-icon :class="msg.color">{{msg.icon}}</md-icon>
+              </md-avatar>
+
+              <div class="md-title" @click="turnToDetail(msg.id)">{{msg.title}}</div>
+              <div class="md-subhead" @click="turnToDetail(msg.id)">{{msg.sub}}</div>
+            </md-card-header>
+          </md-card>
+
+          <md-dialog-confirm
+            :md-active.sync="clear_confirm_switch"
+            md-title="警告"
+            md-content="您将清空所有消息</br>该操作不可复原，是否继续"
+            md-confirm-text="继续"
+            md-cancel-text="取消"
+            :md-click-outside-to-close="false"
+            @md-confirm="clearMsg"
+          />
+
+          <md-snackbar
+            md-position="center"
+            :md-active.sync="show_snackbar"
+            md-persistent
+            :md-duration="1500"
+          >
+            <span>{{ snakebar_msg }}</span>
+          </md-snackbar>
+          <div style="height: 40px;"></div>
+        </v-touch>
+      </md-app-content>
+    </md-app>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import { mapState, mapActions } from "vuex";
+import { setHtmlFontSize } from "@/utils/px2rem.js";
+import { api } from "@/axios/fetch.js";
+
+export default {
+  name: "Message",
+  data() {
+    return {
+      // 消息数据
+      msgs: [],
+      // 显示高度，控制md-app的最小高度，防止抽屉高度塌陷
+      clientHeight: "",
+      // snackbar控制
+      show_snackbar: false,
+      snakebar_msg: "",
+      // 加载控制
+      loading_switch: false,
+      // 清除确认弹窗控制
+      clear_confirm_switch: false
+    };
+  },
+  computed: {
+    ...mapState(["user_info", "settings", "bar_state"])
+  },
+  methods: {
+    ...mapActions(["setUserInfo", "setSettings", "setBarState"]),
+    // 修改md-app的最小高度
+    changeFixed(clientHeight) {
+      //动态修改样式
+      this.$refs.message.children[0].style.minHeight = clientHeight + "px";
+      this.$refs.list_placeholder.parentNode.parentNode.style.maxHeight =
+        clientHeight + "px";
+      this.$refs.list_placeholder.parentNode.style.minHeight =
+        clientHeight - 32 + "px";
+      window.document.documentElement.setAttribute(
+        "data-theme",
+        this.settings.is_dark_mode ? "dark" : "light"
+      );
+    },
+
+    // 初始化
+    init() {
+      // 刷新vuex
+      this.$store.replaceState(
+        Object.assign(
+          this.$store.state,
+          JSON.parse(localStorage.getItem("storeState"))
+        )
+      );
+      // 底部状态栏状态设置
+      this.setBarState([false, this]);
+      // 无内容拦截
+      if (this.user_info.msg.length == 0) {
+        this.back();
+      }
+      console.log(this.user_info.msg);
+      this.processMsg();
+    },
+
+    // 返回到主页
+    back() {
+      this.$router.replace("/account");
+    },
+
+    // 调用snackBar
+    message(msg) {
+      this.snakebar_msg = msg;
+      this.show_snackbar = true;
+    },
+
+    // 处理消息数据
+    processMsg() {
+      for (let msg of this.user_info.msg) {
+        let content;
+        switch (msg.type) {
+          case "comment":
+            // 评论
+            content = {
+              color: "",
+              icon: "chat",
+              title: "您有新的评论",
+              sub: "点击查看",
+              id: msg.id
+            };
+            this.msgs.push(content);
+            break;
+          case "reply":
+            // 回复
+            content = {
+              color: "",
+              icon: "textsms",
+              title: "您有新的回复",
+              sub: "点击查看",
+              id: msg.id
+            };
+            this.msgs.push(content);
+            break;
+          case "pass":
+            // 审核通过
+            content = {
+              color: "md-primary",
+              icon: "beenhere",
+              title: "您提交的失物招领已通过审核",
+              sub: "点击查看",
+              id: msg.id
+            };
+            this.msgs.push(content);
+            break;
+          case "veto":
+            // 审核未通过
+            content = {
+              color: "md-accent",
+              icon: "security",
+              title: "您提交的失物招领未通过审核",
+              sub: msg.reason,
+              id: msg.id
+            };
+            this.msgs.push(content);
+            break;
+        }
+      }
+    },
+    // 跳转详情
+    turnToDetail(id) {
+      console.log(id);
+      this.$router.push({ path: "/detail", query: { id: id } });
+    },
+    // 清空消息
+    clearMsg() {
+      this.loading_switch = true;
+      let data = {
+        openid: this.user_info.openid
+      };
+      api
+        .delete("/clear", { data })
+        .then(res => {
+          let user_info = this.user_info;
+          user_info.msg = [];
+          this.setUserInfo([user_info, this]);
+          console.log("信息清空成功，用户信息覆写完成");
+          this.message("清空成功");
+          this.loading_switch = false;
+          this.back();
+        })
+        .catch(err => {
+          console.log(err);
+          this.loading_switch = false;
+          if (err.response && err.response.status != 500) {
+            this.message(`${err.response.status}: ${err.response.data}`);
+          } else {
+            this.message("网络错误,请稍候重试");
+          }
+        });
+    }
+  },
+  created() {
+    this.init();
+  },
+  mounted() {
+    // 获取浏览器可视区域高度
+    this.clientHeight = `${document.documentElement.clientHeight}`;
+    //document.body.clientWidth;
+    window.onresize = function temp() {
+      this.clientHeight = `${document.documentElement.clientHeight}`;
+      setHtmlFontSize();
+    }.bind(this);
+    this.$refs.list_placeholder.parentNode.parentNode.addEventListener(
+      "scroll",
+      this.scroll
+    );
+  },
+  watch: {
+    // 如果 `clientHeight` 发生改变，这个函数就会运行
+    clientHeight: function() {
+      this.changeFixed(this.clientHeight);
+    }
+  },
+  beforeDestroy() {},
+  components: {}
+};
+</script>
+
+<style scoped lang="scss" type="text/scss">
+@import "../../style/main";
+.message {
+  width: 100%;
+  // max-width: 500px;
+  min-height: 100%;
+  background: #fff;
+  // margin: 0 auto;
+  .expand {
+    box-sizing: border-box;
+    min-height: 0.8rem !important;
+    margin: 0.5rem 16px !important;
+  }
+  .login-submit {
+    width: 100%;
+    margin: 0.5rem 0 !important;
+  }
+  .md-toolbar {
+    position: fixed;
+    top: 0;
+  }
+  .md-toolbar-row {
+    order: 12;
+    // margin-bottom: .3rem !important;
+  }
+  .md-toolbar-section-start,
+  .md-toolbar-section-end,
+  .md-toolbar-row {
+    min-height: 56px;
+  }
+  .md-toolbar-row {
+    margin-top: -10px;
+  }
+  .md-speed-dial.md-bottom-right {
+    position: fixed !important;
+  }
+}
+// Demo purposes only
+.md-drawer {
+  width: 240px;
+  max-width: calc(100vw - 125px);
+}
+.md-app-scroller > div {
+  overflow-y: scroll !important;
+}
+.face {
+  color: #fff !important;
+}
+.page-title {
+  flex: 1;
+  min-height: 56px;
+  line-height: 56px;
+}
+.sroll-top-area {
+  flex: 1;
+  min-height: 56px;
+}
+.md-bottom-bar.md-type-fixed .md-bottom-bar-item {
+  max-width: 1000px !important;
+}
+.md-card-example {
+  .md-subhead {
+    margin-top: 0.1rem;
+    .md-icon {
+      $size: 16px;
+      width: $size;
+      min-width: $size;
+      height: $size;
+      font-size: $size !important;
+      margin-right: 0.3rem;
+    }
+
+    span {
+      vertical-align: middle;
+    }
+  }
+}
+.md-app-content .md-card {
+  margin: 0 !important;
+}
+.loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  height: 5rem;
+  width: 5rem;
+  margin-top: -2.5rem;
+  margin-left: -2.5rem;
+}
+.md-list-item-text p {
+  word-wrap: break-word !important;
+  overflow: visible !important;
+  white-space: normal !important;
+  margin-top: 0.2rem;
+}
+</style>