From 7ab0feb7ce8aa1791486b13c5c81277940f80846 Mon Sep 17 00:00:00 2001
From: RainSun <zhaoyingbo@live.cn>
Date: Sat, 22 May 2021 11:11:33 +0800
Subject: [PATCH] update

---
 package.json                    |   1 +
 src/App.vue                     |  25 +-
 src/UI/snackBar/index.js        |  10 +
 src/UI/snackBar/src/main.js     |  50 ++++
 src/UI/snackBar/src/main.vue    |  15 ++
 src/axios/fetch.js              |  23 ++
 src/main.js                     |   3 +
 src/registerServiceWorker.js    |   1 +
 src/store/index.js              |  11 +
 src/views/Account/Account.vue   | 394 +++++++++-----------------------
 src/views/Home/Home.vue         |  16 +-
 src/views/Home/children/Add.vue | 244 ++++++++++++++------
 12 files changed, 417 insertions(+), 376 deletions(-)
 create mode 100644 src/UI/snackBar/index.js
 create mode 100644 src/UI/snackBar/src/main.js
 create mode 100644 src/UI/snackBar/src/main.vue
 create mode 100644 src/axios/fetch.js

diff --git a/package.json b/package.json
index c655c86..6322e30 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "core-js": "^3.6.4",
     "crc-32": "^1.2.0",
     "crypto-js": "^4.0.0",
+    "lrz": "^4.9.40",
     "register-service-worker": "^1.6.2",
     "vconsole": "^3.3.4",
     "vue": "^2.6.11",
diff --git a/src/App.vue b/src/App.vue
index 50ac4cc..3bc7534 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,17 +13,30 @@ export default {
   data: () => {
     return {};
   },
+  computed: {
+    ...mapState(["bg_img_url"])
+  },
   methods: {
     ...mapActions(["setBgImgUrl"]),
     init() {
-      let url = `https://i.picsum.photos/id/${Math.floor(
-        Math.random() * 1000
-      )}/1920/1080.jpg`;
-      this.setBgImgUrl([url, this])
+      // 刷新本页vuex
+      this.$store.replaceState(
+        Object.assign(
+          this.$store.state,
+          JSON.parse(localStorage.getItem("storeState"))
+        )
+      );
+      if (!this.bg_img_url) {
+        let url = `https://i.picsum.photos/id/${Math.floor(
+          Math.random() * 1000
+        )}/1920/1080.jpg`;
+        this.setBgImgUrl([url, this]);
+      }
+
       // Light theme
-      this.$vuetify.theme.themes.light.primary = '#000'
+      this.$vuetify.theme.themes.light.primary = "#000";
       // Dark theme
-      this.$vuetify.theme.themes.dark.primary = '#fff'
+      this.$vuetify.theme.themes.dark.primary = "#fff";
     }
   },
   created() {
diff --git a/src/UI/snackBar/index.js b/src/UI/snackBar/index.js
new file mode 100644
index 0000000..0965695
--- /dev/null
+++ b/src/UI/snackBar/index.js
@@ -0,0 +1,10 @@
+import Snackbar from './src/main.js';
+import Vue from 'vue'
+const install = () => {
+    Object.defineProperty(Vue.prototype, '$snackbar', {
+      get () {
+        return Snackbar
+      }
+    })
+  }
+export default install;
diff --git a/src/UI/snackBar/src/main.js b/src/UI/snackBar/src/main.js
new file mode 100644
index 0000000..a646cbb
--- /dev/null
+++ b/src/UI/snackBar/src/main.js
@@ -0,0 +1,50 @@
+import Main from './main.vue'
+import Vue from 'vue'
+let SnackBarConstructor = Vue.extend(Main)
+let instance
+let seed = 1
+
+const Snackbar = (options) => {
+    if (Vue.prototype.$isServer) return;
+    options = options || {};
+    if (typeof options === 'string') {
+        options = {
+            message: options
+        };
+    }
+    let id = 'snackbar_' + seed++;
+    instance = new SnackBarConstructor({
+        data: options
+    });
+    instance.id = id;
+    instance.$mount();
+    document.getElementById('app').appendChild(instance.$el);
+    return instance;
+}
+
+['success', 'info', 'error'].forEach(type => {
+    Snackbar[type] = options => {
+        if (typeof options === 'string') {
+            options = {
+                message: options
+            };
+        }
+        switch(type) {
+            case 'success':
+                options.color = '#43A047';
+                options.timeout = 1500
+                break;
+            case 'info':
+                options.color = '#03A9F4';
+                options.timeout = 1500
+                break;
+            case 'error':
+                options.color = '#FF5252';
+                options.timeout = 4000
+                break;
+        }
+        return Snackbar(options);
+    };
+});
+
+export default Snackbar
\ No newline at end of file
diff --git a/src/UI/snackBar/src/main.vue b/src/UI/snackBar/src/main.vue
new file mode 100644
index 0000000..f5e73fe
--- /dev/null
+++ b/src/UI/snackBar/src/main.vue
@@ -0,0 +1,15 @@
+<template>
+    <v-snackbar v-model="snackbar_switch" bottom :color="color" :timeout="timeout">{{ message }}</v-snackbar>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      snackbar_switch: true,
+      message: '',
+      color: '',
+      timeout: 3000
+    };
+  },
+}
+</script>
diff --git a/src/axios/fetch.js b/src/axios/fetch.js
new file mode 100644
index 0000000..f591afb
--- /dev/null
+++ b/src/axios/fetch.js
@@ -0,0 +1,23 @@
+import axios from 'axios'
+
+export const api = axios.create({
+  baseURL: 'https://yg.canary.moe/v1/',
+  // baseURL: window.location.origin + '/api/',
+  headers: {
+    'Content-Type': 'application/json',
+    'Accept': 'application/json',
+    'Access-Control-Allow-Origin': '*'
+  },
+  timeout: 30 * 1000
+})
+
+//设置拦截器
+api.interceptors.response.use(
+  (response) => {
+    // console.log('拦截器:请求成功', response)
+    return response
+  }, (error) => {
+    // console.log('拦截器:发生错误', error.response)
+    return Promise.reject(error)
+  }
+)
diff --git a/src/main.js b/src/main.js
index c7ed902..7eb071b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -23,6 +23,9 @@ Vue.use(VueTouch, {name: 'v-touch'})
 import Vconsole from 'vconsole';
 new Vconsole();
 
+import SnackBarAlert from '@/UI/snackBar/index'
+Vue.use(SnackBarAlert)
+
 new Vue({
   router,
   store,
diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js
index 76cede0..b79acf1 100644
--- a/src/registerServiceWorker.js
+++ b/src/registerServiceWorker.js
@@ -21,6 +21,7 @@ if (process.env.NODE_ENV === 'production') {
     },
     updated () {
       console.log('New content is available; please refresh.')
+      window.location.reload(true)
     },
     offline () {
       console.log('No internet connection found. App is running in offline mode.')
diff --git a/src/store/index.js b/src/store/index.js
index a669171..ff4ffb0 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -7,12 +7,18 @@ export default new Vuex.Store({
   state: {
     // 全局背景图片
     bg_img_url: '',
+    // 用户信息
+    user_info: '',
   },
   mutations: {
     // 设置全局背景图片
     SET_BGIMGURL(state, bg_img_url) {
       state.bg_img_url = bg_img_url;
     },
+    // 设置用户信息
+    SET_USERINFO(state, user_info) {
+      state.user_info = user_info;
+    },
   },
   actions: {
     // 设置全局背景图片
@@ -20,6 +26,11 @@ export default new Vuex.Store({
       commit('SET_BGIMGURL', arg[0]);
 			localStorage.setItem("storeState", JSON.stringify(arg[1].$store.state));
     },
+    // 设置用户信息
+    setUserInfo({ commit }, arg) {
+      commit('SET_USERINFO', arg[0]);
+			localStorage.setItem("storeState", JSON.stringify(arg[1].$store.state));
+    },
   },
   modules: {
   }
diff --git a/src/views/Account/Account.vue b/src/views/Account/Account.vue
index 56a11c4..80dfe67 100644
--- a/src/views/Account/Account.vue
+++ b/src/views/Account/Account.vue
@@ -47,9 +47,9 @@
             block
             color="primary"
             :disabled="!valid"
-            @click="resetValidation"
             :loading="loading_switch"
             class="float-right mt-5"
+            @click="loginStart"
           >验证账户</v-btn>
         </v-form>
       </v-sheet>
@@ -98,7 +98,7 @@
               <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-btn @click="msg_sheet_switch = true" text v-if="user_info.msg.length">查看</v-btn>
             </v-list-item-action>
           </v-list-item>
 
@@ -108,7 +108,7 @@
               <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-btn @click="created_sheet_switch = true" text v-if="user_info.created.length">查看</v-btn>
             </v-list-item-action>
           </v-list-item>
 
@@ -133,6 +133,7 @@
                 color="primary"
                 @click="logout_dialog_switch = true"
                 class="float-right mt-5"
+                :disabled="loading_switch"
               >退出登录</v-btn>
             </v-list-item-content>
           </v-list-item>
@@ -147,7 +148,7 @@
           <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-btn color="primary" text @click="logout">继续</v-btn>
           </v-card-actions>
         </v-card>
       </v-dialog>
@@ -160,13 +161,20 @@
           </v-card-title>
           <v-card-text>
             <v-container>
-              <v-text-field label="新昵称*" required></v-text-field>
+              <v-text-field
+                v-model="nick"
+                :rules="[v => !!v || '请填入新昵称']"
+                label="新昵称"
+                required
+                clearable
+                :disabled="loading_switch"
+              ></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-btn color="primary" text @click="modifyNick" :disabled="!nick">提交</v-btn>
           </v-card-actions>
         </v-card>
       </v-dialog>
@@ -187,9 +195,9 @@
 <script>
 // @ is an alias to /src
 import { mapState, mapActions } from "vuex";
-import Created from "./children/Created"
-import Message from "./children/Message"
-
+import Created from "./children/Created";
+import Message from "./children/Message";
+import { api } from "@/axios/fetch";
 export default {
   name: "Add",
   data: () => {
@@ -200,278 +208,10 @@ export default {
       cid: "",
       // 用户密码
       pwd: "",
-      // 加载条
-      loading_switch: false,
+      // 新昵称
+      nick: "",
       // 页面性质
-      page_type: "account",
-      // 模拟用户信息
-      user_info: {
-        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"
-          },
-          {
-            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"
-          },
-          {
-            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"
-          },
-          {
-            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"
-          },
-          {
-            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
-          },
-          {
-            good_type: "lost",
-            good_id: "sdsdsd",
-            type: 4
-          },
-          {
-            good_type: "lost",
-            good_id: "sdsdsd",
-            type: 4
-          },
-          {
-            good_type: "lost",
-            good_id: "sdsdsd",
-            type: 4
-          },
-          {
-            good_type: "lost",
-            good_id: "sdsdsd",
-            type: 4
-          },
-          {
-            good_type: "lost",
-            good_id: "sdsdsd",
-            type: 4
-          },
-          {
-            good_type: "lost",
-            good_id: "sdsdsd",
-            type: 4
-          },
-          {
-            good_type: "lost",
-            good_id: "sdsdsd",
-            type: 4
-          },
-          {
-            good_type: "lost",
-            good_id: "sdsdsd",
-            type: 4
-          },
-          {
-            good_type: "lost",
-            good_id: "sdsdsd",
-            type: 4
-          },
-          {
-            good_type: "lost",
-            good_id: "sdsdsd",
-            type: 4
-          },
-          {
-            good_type: "lost",
-            good_id: "sdsdsd",
-            type: 4
-          },
-          {
-            good_type: "lost",
-            good_id: "sdsdsd",
-            type: 4
-          },
-          {
-            good_type: "lost",
-            good_id: "sdsdsd",
-            type: 4
-          },
-          {
-            good_type: "lost",
-            good_id: "sdsdsd",
-            type: 4
-          },
-          {
-            good_type: "lost",
-            good_id: "sdsdsd",
-            type: 4
-          }
-        ]
-      },
+      page_type: "login",
       // 个性化
       personalize: {
         dark_mode: false
@@ -484,23 +224,101 @@ export default {
       msg_sheet_switch: false,
       // 已发布弹窗
       created_sheet_switch: false,
+      // 加载条
+      loading_switch: false,
     };
   },
   computed: {
-    ...mapState(["bg_img_url"])
+    ...mapState(["bg_img_url", "user_info"])
   },
   methods: {
-    init() {},
+    ...mapActions(["setBgImgUrl", "setUserInfo"]),
+    // 初始化
+    init() {
+      // 刷新本页vuex
+      this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("storeState"))));
+      console.log('本页vuex初始化完成')
+      // 设置页面类型
+      this.page_type = this.user_info ? "account" : "login";
+      console.log('本页页面类型设置完成')
+      // 取消掉屏幕改变的事件
+      window.onresize = () => 0;
+      console.log('屏幕大小改变事件覆写完成')
+      
+    },
     // 关闭消息弹窗
     closeMsgSheet() {
-      this.msg_sheet_switch = false
+      this.msg_sheet_switch = false;
     },
     // 关闭已发布弹窗
     closeCreatedSheet() {
-      this.created_sheet_switch = false
+      this.created_sheet_switch = false;
     },
+    // 返回上一页
     back() {
-      this.$router.go(-1)
+      this.$router.go(-1);
+    },
+    // 登录
+    loginStart() {
+      this.loading_switch = true;
+      let data = {
+        cid: this.cid,
+        pwd: this.pwd
+      };
+      api
+        .post("/user/login", data)
+        .then(res => {
+          this.loading_switch = false;
+          this.setUserInfo([res.data.user_info, this]);
+          console.log("用户信息覆写成功");
+          this.cid = ''
+          this.pwd = ''
+          this.$snackbar.success('登录成功')
+        })
+        .catch(err => {
+          this.processNetErr(err)
+        });
+    },
+    // 修改昵称
+    modifyNick() {
+      this.nick_dialog_switch = false
+      this.loading_switch = true
+      let data = {
+        openid: this.user_info.openid,
+        nick: this.nick
+      }
+      api
+        .put("/user/nick", data)
+        .then(res => {
+          this.loading_switch = false;
+          let user_info = this.user_info
+          user_info.nick = this.nick
+          this.setUserInfo([user_info, this]);
+          console.log("用户信息覆写成功");
+          this.$snackbar.success('修改成功')
+          this.nick = ""
+        })
+        .catch(err => {
+          this.processNetErr(err)
+          this.nick = ""
+        });
+    },
+    // 处理网络错误
+    processNetErr(err) {
+      console.log(err)
+      this.loading_switch = false;
+      if(err.response && err.response.status != 500) {
+        this.$snackbar.error(`${err.response.status}: ${err.response.data}`)
+      } else {
+        this.$snackbar.error('网络错误,请稍候重试')
+      }
+    },
+    // 退出登录
+    logout() {
+      this.logout_dialog_switch = false
+      this.setUserInfo(['', this])
+      console.log('用户信息覆空完成')
+      this.$snackbar.success('本地数据全部清除完成')
     }
   },
   created() {
@@ -510,6 +328,12 @@ export default {
   components: {
     Created,
     Message
+  },
+  watch: {
+    user_info: function() {
+      // 设置页面类型
+      this.page_type = this.user_info ? "account" : "login";
+    }
   }
 };
 </script>
diff --git a/src/views/Home/Home.vue b/src/views/Home/Home.vue
index 812e370..d90e13e 100644
--- a/src/views/Home/Home.vue
+++ b/src/views/Home/Home.vue
@@ -11,7 +11,7 @@
       <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
 
       <!-- 标题 -->
-      <v-toolbar-title>Canary 失物招领</v-toolbar-title>
+      <v-toolbar-title>曳光 失物招领</v-toolbar-title>
 
       <!-- 空白占位 -->
       <v-spacer></v-spacer>
@@ -177,18 +177,8 @@ export default {
   },
   methods: {
     init() {
-      for (let i = 0; i < 10; i++) {
-        let item = {
-          title: "这是丢失的物品",
-          create_time: "2020-01-01",
-          img_url: "https://picsum.photos/1920/1080?random",
-          total_addr: "长理东区",
-          good_type: "lost",
-          good_id: i
-        };
-        this.lost.push(item);
-        this.found.push(item);
-      }
+      // 刷新本页vuex
+			this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("storeState"))));
     },
 
     // 关闭底部表单-add
diff --git a/src/views/Home/children/Add.vue b/src/views/Home/children/Add.vue
index 4dac4a0..d789631 100644
--- a/src/views/Home/children/Add.vue
+++ b/src/views/Home/children/Add.vue
@@ -1,7 +1,7 @@
 <template>
-  <v-sheet class="fill-height" >
+  <v-sheet class="fill-height">
     <!-- 标题栏 -->
-    <v-toolbar dark :src="bg_img_url">
+    <v-toolbar dark :src="bg_img_url" fixed>
       <!-- 图片遮罩 -->
       <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>
@@ -17,79 +17,101 @@
 
       <v-spacer></v-spacer>
     </v-toolbar>
+    <v-sheet class="fill-height overflow-y-auto">
+      <v-container fluid style="padding-bottom: 100px;">
+        <v-form ref="form" v-model="valid" class="ma-4">
+          <!-- 信息类型 -->
+          <v-radio-group row color="primary" v-model="good_type" :disabled="loading_switch">
+            <v-radio label="捡到东西" value="found"></v-radio>
+            <v-radio label="丢了东西" value="lost"></v-radio>
+          </v-radio-group>
 
-    <v-form ref="form" v-model="valid" class="ma-4">
-      <!-- 信息类型 -->
-      <v-radio-group row color="primary" v-model="good_type" :disabled="loading_switch">
-        <v-radio label="捡到东西" value="found"></v-radio>
-        <v-radio label="丢了东西" value="lost"></v-radio>
-      </v-radio-group>
+          <!-- 标题 -->
+          <v-text-field
+            v-model="title"
+            :counter="10"
+            :rules="[v => !!v || '请填入标题', v => (v && v.length <= 10) || '标题不能超过十个字']"
+            label="标题"
+            required
+            clearable
+            :disabled="loading_switch"
+          ></v-text-field>
 
-      <!-- 标题 -->
-      <v-text-field
-        v-model="title"
-        :counter="10"
-        :rules="[v => !!v || '请填入标题', v => (v && v.length <= 10) || '标题不能超过十个字']"
-        label="标题"
-        required
-        clearable
-        :disabled="loading_switch"
-      ></v-text-field>
+          <!-- 内容 -->
+          <v-textarea
+            v-model="content"
+            :counter="50"
+            :rules="[v => !!v || '请填入内容', v => (v && v.length <= 50) || '内容不能超过五十个字']"
+            label="内容"
+            rows="3"
+            required
+            clearable
+            :disabled="loading_switch"
+          ></v-textarea>
 
-      <!-- 内容 -->
-      <v-textarea
-        v-model="content"
-        :counter="50"
-        :rules="[v => !!v || '请填入内容', v => (v && v.length <= 50) || '内容不能超过五十个字']"
-        label="内容"
-        rows="3"
-        required
-        clearable
-        :disabled="loading_switch"
-      ></v-textarea>
+          <!-- 地区 -->
+          <v-select
+            v-model="total_addr"
+            :items="['长理东区', '长理南区', '长理西区']"
+            :rules="[v => !!v || '必须选择一个地区']"
+            label="地区"
+            required
+            :disabled="loading_switch"
+          ></v-select>
 
-      <!-- 地区 -->
-      <v-select
-        v-model="total_addr"
-        :items="['长理东区', '长理南区', '长理西区']"
-        :rules="[v => !!v || '必须选择一个地区']"
-        label="地区"
-        required
-        :disabled="loading_switch"
-      ></v-select>
+          <!-- 详细地址 -->
+          <v-text-field
+            v-model="detail_addr"
+            :rules="[v => !!v || '请填入内容', v => (v && v.length <= 30) || '内容不能超过三十个字']"
+            label="详细地址"
+            required
+            clearable
+            :disabled="loading_switch"
+          ></v-text-field>
 
-      <!-- 详细地址 -->
-      <v-text-field
-        v-model="detail_addr"
-        :rules="[v => !!v || '请填入内容', v => (v && v.length <= 30) || '内容不能超过三十个字']"
-        label="详细地址"
-        required
-        clearable
-        :disabled="loading_switch"
-      ></v-text-field>
+          <!-- 联系方式 -->
+          <v-text-field
+            v-model="contact_content"
+            :rules="[v => (!!v ? (v && v.length >= 5) || '联系信息长度必须大于5' : true)]"
+            label="联系方式(选填)"
+            clearable
+            :disabled="loading_switch"
+          ></v-text-field>
 
-      <!-- 联系方式 -->
-      <v-text-field
-        v-model="contact_content"
-        :rules="[v => (!!v ? (v && v.length >= 5) || '联系信息长度必须大于5' : true)]"
-        label="联系方式(选填)"
-        clearable
-        :disabled="loading_switch"
-      ></v-text-field>
+          <!-- 图片上传 -->
+          <v-file-input show-size label="图片上传" v-model="upload_file" :disabled="loading_switch"></v-file-input>
 
-      <!-- 图片上传 -->
-      <v-file-input show-size label="图片上传" v-model="upload_file" :disabled="loading_switch"></v-file-input>
+          <v-btn
+            block
+            @click="confirm_switch = true"
+            :loading="loading_switch"
+            :disabled="!valid || loading_switch"
+            color="primary"
+          >确认提交</v-btn>
+        </v-form>
 
-      <v-btn color="error" class="mr-4" @click="reset" rounded :disabled="loading_switch">重置</v-btn>
-
-      <v-btn color="success" @click="resetValidation" rounded :loading="loading_switch">确认提交</v-btn>
-    </v-form>
+        <!-- 模态框 -->
+      <v-dialog v-model="confirm_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="confirm_switch = false">取消</v-btn>
+            <v-btn color="primary" text @click="submit">继续</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+      </v-container>
+    </v-sheet>
   </v-sheet>
 </template>
 
 <script>
 // @ is an alias to /src
 import { mapState, mapActions } from "vuex";
+import { api } from "@/axios/fetch";
+import "lrz";
 export default {
   name: "Add",
   props: ["closeBottomSheet"],
@@ -102,24 +124,31 @@ export default {
       // 内容
       content: "",
       // 地区
-      total_addr: "长理东区",
+      total_addr: "",
       // 详细地址
       detail_addr: "",
       // 联系方式
       contact_content: "",
       // 信息类型
-      good_type: "found",
+      good_type: "",
       // 上传图片
       upload_file: null,
       // 上传加载
-      loading_switch: false
+      loading_switch: false,
+      // 压缩图片
+      lrz_file: null,
+      // 确认框
+      confirm_switch: false
     };
   },
   computed: {
-    ...mapState(["bg_img_url"])
+    ...mapState(["bg_img_url", "user_info"])
   },
   methods: {
-    init() {},
+    init() {
+      // 刷新本页vuex
+			this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("storeState"))));
+    },
     // 触发验证
     validate() {
       this.$refs.form.validate();
@@ -128,20 +157,91 @@ export default {
     reset() {
       this.$refs.form.reset();
     },
-    // 隐藏错误显示
-    resetValidation() {
-      this.$refs.form.resetValidation();
-    },
     // 关闭本页
     close() {
       this.$refs.form.reset();
-      this.closeBottomSheet()
+      this.closeBottomSheet();
     },
+    // 提交
+    submit() {
+      // 先判断是否有图片然后进行上传
+      this.loading_switch = true;
+      this.confirm_switch = false;
+      this.uploadPhoto()
+    },
+    // 上传图片
+    uploadPhoto() {
+      console.log('图片上传开始')
+      if(!this.lrz_file) this.uploadData('default.jpg') 
+      let param = new FormData();
+      param.append('photo', this.lrz_file);
+      api.put('/user/upload', param, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        }
+      }).then(res => {
+        this.uploadData(res.data.file_name) 
+      }).catch(err => {
+        console.log(err)
+        this.loading_switch = false;
+        if(err.response && err.response.status != 500) {
+          this.$snackbar.error(`${err.response.status}: ${err.response.data}`)
+        } else {
+          this.$snackbar.error('网络错误,请稍候重试')
+        }
+      })
+    },
+    // 上传信息
+    uploadData(file_name) {
+      console.log('文件上传成功,文件名：', file_name)
+      // 组织信息
+      let data = {
+        title: this.title,
+        content: this.content,
+        create_time: new Date().getTime(),
+        img_url: file_name,
+        total_addr: this.total_addr,
+        detail_addr: this.detail_addr,
+        contact: this.contact_content,
+        type: this.good_type,
+        user_info: {
+          openid: this.user_info.openid,
+          nick: this.user_info.nick
+        }
+      }
+      api.post('/user/add', data).then(res => {
+        console.log('上传成功')
+        this.loading_switch = false;
+        this.$snackbar.success('上传成功，请等待审核')
+        this.close()
+      }).catch(err => {
+        console.log(err)
+        this.loading_switch = false;
+        if(err.response && err.response.status != 500) {
+          this.$snackbar.error(`${err.response.status}: ${err.response.data}`)
+        } else {
+          this.$snackbar.error('网络错误,请稍候重试')
+        }
+      })
+    }
   },
   created() {
     this.init();
   },
-  mounted() {
+  mounted() {},
+  watch: {
+    upload_file: async function() {
+      let file = this.upload_file
+      if (file) {
+        let name = file.name
+        console.log('文件压缩开始')
+        file = await lrz(file);
+        file = file.file;
+        file = new File([file], name);
+        this.lrz_file = file;
+        console.log('文件压缩完成', this.lrz_file)
+      }
+    }
   }
 };
 </script>