finish addlaf beta

2020-02-13 11:14:17 +08:00 · 2020-02-13 11:14:17 +08:00 · 63cacb57cc
commit 63cacb57cc
parent fc7d52ad2b
17 changed files with 1202 additions and 258 deletions
--- a/babel.config.js
+++ b/babel.config.js
@ -31,12 +31,12 @@ const plugins = [
  // 帮助减少 helper 函数
  [
    "@babel/plugin-transform-runtime",
-    {
-        "corejs": false, // 默认值，可以不写
-        "helpers": true, // 默认，可以不写
-        "regenerator": false, // 通过 preset-env 已经使用了全局的 regeneratorRuntime, 不再需要 transform-runtime 提供的 不污染全局的 regeneratorRuntime
-        "useESModules": true, // 使用 es modules helpers, 减少 commonJS 语法代码
-    }
+    // {
+    //     "corejs": false, // 默认值，可以不写
+    //     "helpers": true, // 默认，可以不写
+    //     "regenerator": false, // 通过 preset-env 已经使用了全局的 regeneratorRuntime, 不再需要 transform-runtime 提供的 不污染全局的 regeneratorRuntime
+    //     "useESModules": true, // 使用 es modules helpers, 减少 commonJS 语法代码
+    // }
  ],
  // 由于没有了 stage-x，需要单独导入需要的插件
  [
--- a/package.json
+++ b/package.json
@ -15,6 +15,7 @@
    "element-ui": "^2.13.0",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.10",
+    "vue-clipboard2": "^0.3.1",
    "vue-router": "^3.1.3",
    "vue-svg-icon": "^1.2.9",
    "vuex": "^3.1.2",
--- a/src/App.vue
+++ b/src/App.vue
@ -40,7 +40,7 @@ export default {
    }
  },
  mounted() {
-    this.scroll = new BScroll(this.$refs.search, {mouseWheel: true, click: true, tap: true})
+    // this.scroll = new BScroll(this.$refs.search, {mouseWheel: true, click: true, tap: true})
    //在页面加载时读取localStorage里的状态信息
    this.$store.replaceState(
      Object.assign(
--- a/src/axios/api.js
+++ b/src/axios/api.js
@ -12,35 +12,50 @@ export function login(data) {
  return api.post('/login', params)
 }

-export function getLAF() {
-  return new Promise(function(resolve, reject) {
-      let data = {
-        errcode: 200,
-        lost: [{
-          // 数据库id
-          _id: '100',
-          // 标题
-          title: '测试用文本',
-          // 时间
-          create_time: '1581152278111',
-          // 图片
-          img_url: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3488199501,3589420970&fm=26&gp=0.jpg',
-          // 区域
-          total_addr:'南区',
-        }],
-        found:[{
-          // 数据库id
-          _id: '100',
-          // 标题
-          title: '测试用文本',
-          // 时间
-          create_time: '1581152278111',
-          // 图片
-          img_url: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3488199501,3589420970&fm=26&gp=0.jpg',
-          // 区域
-          total_addr:'南区',
-        }]
-      }
-      resolve(data)
+// 上传图片
+export function uploadPhoto(file) {
+  let param = new FormData();
+  param.append('photo', file);
+  return api.put('/photo/upload', param, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    }
  })
 }
+
+export function addLAF(data) {
+  var sign = CryptoJS.MD5(JSON.stringify(data).replace(/\"/g,"'")).toString().toUpperCase();
+  data.sign = sign
+  let params = new URLSearchParams();
+  params.append('data', JSON.stringify(data));
+  return api.post('/laf/add', params) 
+} 
+
+export function getLAF() {
+  return api.post('/laf/get')
+}
+
+export function getLAFDetail(data){
+  var sign = CryptoJS.MD5(JSON.stringify(data).replace(/\"/g,"'")).toString().toUpperCase();
+  data.sign = sign
+  let params = new URLSearchParams();
+  params.append('data', JSON.stringify(data));
+  return api.post('/laf/detail', params) 
+}
+
+export function comment(data, position) {
+  let comment_msg = {data, position}
+  var sign = CryptoJS.MD5(JSON.stringify(comment_msg).replace(/\"/g,"'")).toString().toUpperCase();
+  comment_msg.sign = sign
+  let params = new URLSearchParams();
+  params.append('comment_msg', JSON.stringify(comment_msg));
+  return api.post('/laf/comment', params)
+}
+
+export function delLAF(data) {
+  var sign = CryptoJS.MD5(JSON.stringify(data).replace(/\"/g,"'")).toString().toUpperCase();
+  data.sign = sign
+  let params = new URLSearchParams();
+  params.append('data', JSON.stringify(data));
+  return api.post('/laf/del', params) 
+}
--- a/src/axios/fetch.js
+++ b/src/axios/fetch.js
@ -1,12 +1,12 @@
 import axios from 'axios'

 export const api = axios.create({
-  // baseURL: 'http://coc.powerrain.cn/api/',
-  baseURL: window.location.origin + '/api/',
+  baseURL: 'http://coc.powerrain.cn/api/',
+  // baseURL: window.location.origin + '/api/',
  // baseURL: 'http://152.136.99.231:8001' + '/api/',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
-    'Accept': 'application/vnd.toast.v1+json'
+    'Accept': 'application/json'
  },
  timeout: 10 * 1000
 })
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@ -1,33 +1,31 @@
 <template>
  <div class="comment-warp" v-if="content.comment && content.comment.length!=0">
-		<div class="comment-title"># 留言</div>
-		<div class="comment-item" v-for="(comment, c) in content.comment" :key="c">
-			<div class="comment-box">
-				<div class="reply-btn">
-					<!-- <icon name class="reply"></icon> -->
-					<span @click="openInput(c, -1)">回复</span>
-				</div>
-				<img :src="comment.user_avatar" class="comment-avatar" />
-				<div class="comment-detail-box">
-					<div class="comment-user-nick">{{comment.user_nick}}</div>
-					<div class="comment-time">{{formatDateTime(comment.time)}}</div>
-					<div class="comment-msg">{{comment.msg}}</div>
-				</div>
-			</div>
-			<div class="reply-item" v-for="(reply, r) in comment.reply" :key="r">
-				<div class="reply-btn">
-					<!-- <icon name class="reply"></icon> -->
-					<span @click="openInput(c, r)">回复</span>
-				</div>
-				<img :src="reply.user_avatar" class="reply-avatar" />
-				<div class="reply-detail-box">
-					<div class="reply-user-nick">{{reply.user_nick}}</div>
-					<div class="reply-time">{{formatDateTime(reply.time)}}</div>
-					<div class="reply-msg">{{reply.msg}}</div>
-				</div>
-			</div>
-		</div>
-	</div>
+    <div class="comment-title"># 留言</div>
+    <div class="comment-item" v-for="(comment, c) in content.comment" :key="c">
+      <div class="comment-box">
+				<i class="el-icon-chat-dot-round label-icon-big"></i>
+        <div class="reply-btn">
+          <span @click="openInput(c, -1)">回复</span>
+        </div>
+        <div class="comment-detail-box">
+          <div class="comment-user-nick">{{comment.user_info.user_name}}</div>
+          <div class="comment-time">{{formatDateTime(comment.time)}}</div>
+          <div class="comment-msg">{{comment.msg}}</div>
+        </div>
+      </div>
+      <div class="reply-item" v-for="(reply, r) in comment.reply" :key="r">
+				<i class="el-icon-chat-line-round label-icon-small"></i>
+        <div class="reply-btn">
+          <span @click="openInput(c, r)">回复</span>
+        </div>
+        <div class="reply-detail-box">
+          <div class="reply-user-nick">{{reply.user_info.user_name}}</div>
+          <div class="reply-time">{{formatDateTime(reply.time)}}</div>
+          <div class="reply-msg">{{reply.msg}}</div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
 import { mapState, mapActions } from "vuex";
@ -35,17 +33,13 @@ import { formatDateTime } from "@/lib/utils.js";

 export default {
  name: "comment",
-  props: ["content"],
+  props: ["content","openInput"],
  data() {
-      return {
-          
-      }
-  },
-  computed: {
-
+    return {};
  },
+  computed: {},
  methods: {
-		formatDateTime
+		formatDateTime,
  },
  created() {}
 };
@ -54,76 +48,74 @@ export default {
 <style scoped lang="scss" type="text/scss">
@import "../style/main";
 .comment-warp {
-	padding: 0.5rem 0.4rem;
-	.comment-title {
-		font-size: 0.4rem;
-	}
-	.comment-item {
-		padding-top: 0.5rem;
-		padding-bottom: 0.5rem;
-		border-bottom: 1px #eee solid;
-		.reply-btn {
-			position: absolute;
-			top: 0.1rem;
-			right: 0rem;
-			font-size: 0.3rem;
-			color: $main-color;
-		}
-		.comment-box {
-			display: flex;
-			align-items: flex-start;
-			justify-content: flex-start;
-			position: relative;
+  padding: 0.5rem 0.4rem;
+  .comment-title {
+    font-size: 0.4rem;
+  }
+  .comment-item {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px #eee solid;
+    .reply-btn {
+      position: absolute;
+      top: 0.1rem;
+      right: 0rem;
+      font-size: 0.3rem;
+      color: $main-color;
+    }
+    .comment-box {
+      display: flex;
+      align-items: flex-start;
+      justify-content: flex-start;
+      position: relative;

-			.comment-avatar {
-				height: 1rem;
-				width: 1rem;
-				border-radius: 50%;
+       .label-icon-big {
+				 font-size: .7rem;
+				 color: $main-color;
+			 }
+      .comment-detail-box {
+        margin-left: 0.2rem;
+        .comment-user-nick {
+          font-size: 0.4rem;
+          margin-bottom: 0.1rem;
+        }
+        .comment-time {
+          font-size: 0.3rem;
+          margin-bottom: 0.3rem;
+          color: $secondary-text;
+        }
+        .comment-msg {
+          font-size: 0.4rem;
+        }
+      }
+    }
+    .reply-item {
+      display: flex;
+      align-items: flex-start;
+      justify-content: flex-start;
+      position: relative;
+      margin-top: 0.3rem;
+      margin-left: 0.5rem;
+      .label-icon-small {
+				font-size: .5rem;
+				color: $main-color;
 			}
-			.comment-detail-box {
-				margin-left: 0.2rem;
-				.comment-user-nick {
-					font-size: 0.4rem;
-					margin-bottom: 0.1rem;
-				}
-				.comment-time {
-					font-size: 0.2rem;
-					margin-bottom: 0.3rem;
-					color: $secondary-text;
-				}
-				.comment-msg {
-					font-size: 0.4rem;
-				}
-			}
-		}
-		.reply-item {
-			display: flex;
-			align-items: flex-start;
-			justify-content: flex-start;
-			position: relative;
-			margin-top: 0.3rem;
-			margin-left: 0.5rem;
-			.reply-avatar {
-				height: 0.8rem;
-				width: 0.8rem;
-				border-radius: 50%;
-			}
-			.reply-detail-box {
-				margin-left: 0.2rem;
-				.reply-user-nick {
-					font-size: 0.3rem;
-					margin-bottom: 0.1rem;
-				}
-				.reply-time {
-					font-size: 0.2rem;
-					margin-bottom: 0.1rem;
-					color: $secondary-text;
-				}
-				.reply-msg {
-					font-size: 0.3rem;
-				}
-			}
-		}
-	}
+      .reply-detail-box {
+        margin-left: 0.2rem;
+        .reply-user-nick {
+          font-size: 0.3rem;
+          margin-bottom: 0.1rem;
+        }
+        .reply-time {
+          font-size: 0.2rem;
+          margin-bottom: 0.1rem;
+          color: $secondary-text;
+        }
+        .reply-msg {
+          font-size: 0.3rem;
+        }
+      }
+    }
+  }
 }
 </style>
--- a/src/components/FooterNav.vue
+++ b/src/components/FooterNav.vue
@ -9,10 +9,10 @@
        <i :class="current_page == 'grade'? 'select' : ''" class="el-icon-s-claim"></i>
        <p :class="current_page == 'grade'? 'select' : ''">成绩</p>
      </div>
-      <!-- <div class="content" @click="goToAddress('/laf')">
+      <div class="content" @click="goToAddress('/laf')">
        <i :class="current_page == 'laf'? 'select' : ''" class="el-icon-s-flag"></i>
        <p :class="current_page == 'laf'? 'select' : ''">失物招领</p>
-      </div> -->
+      </div>
      <div class="content" @click="goToAddress('/myaccount')">
        <i :class="current_page == 'myaccount'? 'select' : ''" class="el-icon-s-custom"></i>
        <p :class="current_page == 'myaccount'? 'select' : ''">我的</p>
--- a/src/components/InfoCard.vue
+++ b/src/components/InfoCard.vue
@ -5,9 +5,9 @@
    <div class="time">{{show_time}}</div>
    <!-- 内容 -->
    <div class="content-text">{{data.content}}</div>
-    <div class="content-imgs-box" v-if="data.img_url">
+    <div class="content-imgs-box" v-if="data.img_url != 'no_img.png'">
      <div class="img-warp">
-        <img :src="data.img_url" alt/>
+        <img :src="imgaddr" alt/>
      </div>
    </div>
    <div class="addr-box">
@ -28,9 +28,7 @@ export default {
  },
  computed: {
    imgaddr: function() {
-      return (
-        "https://coc.powerrain.cn/api/" + "photo/show/" + this.data.img_url
-      );
+      return "https://coc.powerrain.cn/api/" + "photo/show/" + this.data.img_url
    },
    show_time:function() {
      return formatDateTime(new Date(parseInt(this.data.create_time)));
@ -64,7 +62,7 @@ export default {
  text-align: left;
 }
 .time {
-  font-size: 0.2rem;
+  font-size: 0.3rem;
  text-align: left;
  color: #909399;
  height: 0.3rem;
--- a/src/components/LAFCard.vue
+++ b/src/components/LAFCard.vue
@ -1,8 +1,8 @@
 <template>
  <div class="content-box" @click="goToDetail()">
-    <img :src="content.img_url" alt />
+    <img :src="imgaddr" alt />
    <div class="text-box">
-      <div class="title">{{content.title}}</div>
+      <div class="title">{{content.title.length >= 7? content.title.slice(0,7) + '...' :content.title}}</div>
      <div class="time">{{show_time}}</div>
      <div class="addr">
        <i class="el-icon-location-information icon"></i>
@ -24,6 +24,11 @@ export default {
      }
  },
  computed: {
+    imgaddr: function() {
+      return (
+        "https://coc.powerrain.cn/api/" + "photo/show/" + this.content.img_url
+      );
+    },
    show_time:function() {
      return formatDateTime(new Date(parseInt(this.content.create_time)));
    },
@ -41,7 +46,7 @@ export default {
 <style scoped lang="scss" type="text/scss">
@import "../style/main";
 .content-box {
-  max-width: 48%;
+  width: 48%;
  background: #fff;
  border-radius: 0.2em;
  overflow: hidden;
--- a/src/main.js
+++ b/src/main.js
@ -56,6 +56,8 @@ Vue.use(Element);
 // Vue.prototype.$prompt = MessageBox.prompt;
 // Vue.prototype.$notify = Notification;
 // Vue.prototype.$message = Message;
+import VueClipboard from "vue-clipboard2";
+Vue.use(VueClipboard);

 Vue.component('icon', Icon);
 new Vue({
--- a/src/router/index.js
+++ b/src/router/index.js
@ -7,6 +7,7 @@ import MyAccount from '../views/MyAccount.vue'
 import Personal from '../views/Personal.vue'
 import LostAndFound from '../views/lostandfound/LostAndFound.vue'
 import LAFDetail from '../views/lostandfound/LAFDetail.vue'
+import LAFAdd from '../views/lostandfound/LAFAdd.vue'

 Vue.use(VueRouter)

@ -51,6 +52,11 @@ const routes = [
    path: '/lafdetail',
    name: 'LAFDetail',
    component: LAFDetail
+  },
+  {
+    path: '/lafadd',
+    name: 'LAFAdd',
+    component: LAFAdd
  }
 ]

--- a/src/store/index.js
+++ b/src/store/index.js
@ -22,6 +22,9 @@ export default new Vuex.Store({

    // LAF
    LAF_data: '',
+
+    // 失物招领首页刷新
+    LAF_reflash: false
  },
  mutations: {
    // 设置当前页面
@ -47,6 +50,10 @@ export default new Vuex.Store({
    // 设置LAF
    SET_LAFDATA(state, LAF_data) {
      state.LAF_data = LAF_data
+    },
+    // 设置失物招领首页刷新
+    SET_LAFREFLASH(state, LAF_reflash) {
+      state.LAF_reflash = LAF_reflash
    }
  },
  actions: {
@ -73,6 +80,10 @@ export default new Vuex.Store({
    // 设置个性化
    setLAFData({ commit }, LAF_data) {
      commit('SET_LAFDATA', LAF_data)
+    },
+    // 设置失物招领首页刷新
+    setLAFReflash({ commit }, LAF_reflash) {
+      commit('SET_LAFREFLASH', LAF_reflash)
    }
  },
  modules: {
--- a/src/style/main.scss
+++ b/src/style/main.scss
@ -47,6 +47,8 @@ $grey: #8799a3;
 $gray: #aaa;
 $black: #333;
 $white: #fff;
+$LAFPurple: #ab64f6;
+$LAFBlue: #61dbf7;
 $gradualRed: linear-gradient(45deg, #f43f3b, #ec008c);
 // $gradualOrange: linear-gradient(45deg, #ff9700, #ed1c24);
 $gradualOrange: linear-gradient(45deg, #ed1c24, #ff9700);
@ -55,5 +57,7 @@ $gradualPurple: linear-gradient(45deg, #9000ff, #5e00ff);
 $gradualPink: linear-gradient(45deg, #ec008c, #6739b6);
 $gradualBlue: linear-gradient(45deg, #0081ff, #1cbbb4);
 $gradualLoginSubmit: linear-gradient(to right, #f0da4b, #ff005e);
+// $gradualLoginSubmit: linear-gradient(to right, #ffebb5, #ffca9f);
 $gradualLoginTitle:linear-gradient(to bottom right, #f0da4b, #ff005e);
+// $gradualLoginTitle:linear-gradient(to bottom right, #feecb6, #fcd0aa);
 $gradualLAF:linear-gradient(45deg, #ab64f6, #61dbf7);
--- a/src/views/Schedule.vue
+++ b/src/views/Schedule.vue
@ -388,6 +388,7 @@ export default {
      justify-content: center;
      // background-image: linear-gradient(to right, #f0da4b, #ff005e);
      background-image: $gradualLoginSubmit;
+      // background: #ffca9f;
      color: #fff;
      position: relative;
      .left-box,
--- a/src/views/lostandfound/LAFAdd.vue
+++ b/src/views/lostandfound/LAFAdd.vue
@ -0,0 +1,627 @@
+<template>
+  <div class="LAFAdd">
+    <header>
+      <div class="w">
+        <div class="icon-box">
+          <i class="el-icon-back title-icon" @click="back()"></i>
+        </div>
+        <div class="title-box">新建</div>
+      </div>
+    </header>
+    <div style="height: 1.2rem;"></div>
+    <div class="main">
+      <!-- 物品名 物品描述 | 物品图片 区域 详细地址 联系方式 -->
+      <!-- 主体信息 -->
+      <div class="card">
+        <div class="icon-box">
+          <i class="el-icon-receiving icon"></i>
+        </div>
+        <p>主体信息</p>
+        <input type="text" placeholder="物品名(必填)" v-model="title"/>
+        <textarea placeholder="物品描述或者想说的话(必填)" v-model="content"/>
+      </div>
+      <!-- 链接小竖条 -->
+      <div class="link">
+        <div class="link-item">
+          <div class="link-dote-top"></div>
+          <div class="link-line"></div>
+          <div class="link-dote-bottom"></div>
+        </div>
+        <div class="link-item">
+          <div class="link-dote-top"></div>
+          <div class="link-line"></div>
+          <div class="link-dote-bottom"></div>
+        </div>
+      </div>
+      <!-- 详细信息 -->
+      <div class="card detail-card">
+        <div class="icon-box">
+          <i class="el-icon-search icon"></i>
+        </div>
+        <p>详细信息</p>
+        <div class="label">类型(单选)</div>
+        <div class="type-box">
+          <div class="option" :class="type == 'lost' ? 'select' : ''" @click="changeType('lost')">丢失</div>
+          <div class="option" :class="type == 'found' ? 'select' : ''" @click="changeType('found')">拾到</div>
+          <!-- 占位 -->
+          <div class="option" style="background: #fff; border:none;"></div>
+        </div>
+        <div class="label">区域(单选)</div>
+        <div class="addr-box">
+          <div class="option" :class="total_addr == '长理东区' ? 'select': ''" @click="changeTotalAddr('长理东区')">长理东区</div>
+          <div class="option" :class="total_addr == '长理南区' ? 'select': ''" @click="changeTotalAddr('长理南区')">长理南区</div>
+          <div class="option" :class="total_addr == '长理西区' ? 'select': ''" @click="changeTotalAddr('长理西区')">长理西区</div>
+        </div>
+        <input type="text" placeholder="详细地址(必填)" v-model="detail_addr"/>
+        <div class="label">联系方式(选填)</div>
+        <div class="contact-box">
+          <div class="option" :class="contact_way.type == 'none' ? 'select': ''" @click="changeContactWay('none')">不填</div>
+          <div class="option" :class="contact_way.type == 'QQ' ? 'select': ''" @click="changeContactWay('QQ')">QQ</div>
+          <div class="option" :class="contact_way.type == '微信' ? 'select': ''" @click="changeContactWay('微信')">微信</div>
+          <div class="option" :class="contact_way.type == '电话' ? 'select': ''" @click="changeContactWay('电话')">电话</div>
+          <div class="option" :class="contact_way.type == '邮件' ? 'select': ''" @click="changeContactWay('邮件')">邮件</div>
+        </div>
+        <input type="text" placeholder="联系方式(选填)" v-model="contact_way.content" :disabled="contact_way.type == 'none'"/>
+        <div class="label">图片上传(选填)</div>
+         <div class="img-box">
+            <div class="img-border" @click="uploadTrigger" v-if="!upload_file">
+              <input
+                id="upload_img"
+                type="file"
+                value
+                @change="uploadFile($event)"
+                style="display: none;"
+              />
+              <icon class="camera" name="camera"></icon>
+            </div>
+            <div class="img-preview" v-show="upload_file">
+              <div class="img-delete" @click="deleteFile()">
+                <icon class="close-white" name="close-white"></icon>
+              </div>
+              <img id="imgPreview" src alt />
+            </div>
+            <div class="tips">
+              <p>图片最大为1M</p>
+              <p>当前：{{upload_file?parseInt(upload_file.size/1024):'0'}}kb</p>
+            </div>
+          </div>
+          <div class="submit" @click="openSubmitDialog()">确认上传</div>
+      </div>
+    </div>
+    <FooterSpace></FooterSpace>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+
+import FooterSpace from "@/components/FooterSpace.vue";
+import { mapState, mapActions } from "vuex";
+import { addLAF, uploadPhoto } from "@/axios/api.js";
+import { Loading } from "element-ui";
+import { formatDateTime } from "@/lib/utils.js";
+import "lrz";
+
+export default {
+  name: "LAFAdd",
+  data() {
+    return {
+      title: '',
+      content: '',
+      total_addr:'',
+      detail_addr:'',
+      contact_way:{
+        type: 'none',
+        content: ''
+      },
+      type:'',
+      upload_file: null
+    };
+  },
+  computed: {
+    ...mapState([
+      "user_info",
+      "current_week",
+      "current_schedule",
+      "personalized",
+      "LAF_data"
+    ])
+  },
+  methods: {
+    ...mapActions([
+      "setPage",
+      "setUserInfo",
+      "setCurrentWeek",
+      "setCurrentSchedule",
+      "setLAFData",
+      "setLAFReflash"
+    ]),
+    // 初始化
+    init() {},
+    back() {
+      this.$router.go(-1);
+    },
+    //触发上传事件
+    uploadTrigger() {
+      let file = document.getElementById("upload_img");
+      file.click();
+    },
+    //上传文件的处理
+    async uploadFile(e) {
+      let file = e.target.files[0]; //防止用户多选文件，默认上传第一个
+      if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(e.target.value)) {
+        this.$message.error("图片类型必须是.gif,jpeg,jpg,png中的一种");
+        return false;
+      }
+      if (file) {
+        file = await lrz(file);
+        file = file.file;
+        let filename = e.target.files[0].name;
+        // filename = filename.length > 5 ? filename.slice(0, 5) : filename;
+        file = new File([file], filename);
+      }
+      if (file.size > 1024 * 1024 * 1) {
+        this.$message.error("图片大小不能超过 1MB!");
+        return false;
+      }
+      this.upload_file = file;
+      let img = document.getElementById("imgPreview");
+      img.src = URL.createObjectURL(file);
+    },
+
+    // 点击删除图片
+    deleteFile() {
+      this.upload_file = null;
+    },
+
+    // 类型切换
+    changeType(arg){
+      this.type = arg
+    },
+    // 区域切换
+    changeTotalAddr(arg) {
+      this.total_addr = arg
+    },
+    // 联系方式切换
+    changeContactWay(arg){
+      if(arg == 'none') {
+        this.contact_way.content = ''
+      }
+      this.contact_way.type = arg
+    },
+    // 对内容进行校验
+    judge() {
+      if((this.title = this.manageInput(this.title.trim())).length == 0) return '请填写物品名'
+      if((this.content = this.manageInput(this.content.trim())).length == 0) return '请填写物品描述'
+      if((this.detail_addr = this.manageInput(this.detail_addr.trim())).length == 0) return '请填写详细地址'
+      switch(this.contact_way.type) {
+        case 'none':
+          this.contact_way.content = ''
+          break;
+        case 'QQ':
+          if(!/[1-9][0-9]{4,10}/.test(this.contact_way.content)) return '请填写正确的QQ号';
+          break;
+        case '微信':
+          if((this.contact_way.content = this.manageInput(this.contact_way.content.trim())).length == 0) return "请填写正确的微信号";
+          break;
+        case '电话':
+          if(!/^1[3456789]\d{9}$/.test(this.contact_way.content)) return "请填写正确的电话号";
+          break;
+        case '邮件':
+          if(!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.contact_way.content)) return "请填写正确的邮件地址";
+          break;
+      }
+      if(this.type == '') return '请选择类型'
+      if(this.total_addr == '') return '请选择区域'
+      return false
+    },
+
+    // 特殊字符处理
+    manageInput(value) {
+      // 删除特殊字符串
+      value = value.replace(/\$/g, "");
+      value = value.replace(/\^/g, "");
+      return value;
+    },
+    
+    // 点击上传按钮确认用户身份
+    openSubmitDialog(){
+      let judge
+      if(judge = this.judge()) {
+        this.$alert(judge, "警告", {
+          confirmButtonText: "阅！"
+        });
+        return
+      }
+      this.$prompt(
+        `您将上传失物招领信息，此操作实名制，请输入你的学号`,
+        "警告",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          inputPattern: /\d{7}W?\d{2}/,
+          inputErrorMessage: "请输入正确的学号"
+        }
+      )
+        .then(({ value }) => {
+          if(value == this.user_info.id) {
+            // 填入正确
+            this.submit()
+          }else {
+            this.$message.error('输入学号有误请核对');
+          }
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "取消输入"
+          });
+        });
+    },
+
+    async submit() {
+      let load = Loading.service({
+        background: "rgba(236,245,255,.7)",
+        target: document.querySelector(".LAFAdd")
+      });
+      let file_name = 'no_img.png'
+      let stop = false
+      if(this.upload_file) {
+          await uploadPhoto(this.upload_file).then(res => {
+            if(res.data.errcode !== 200) {
+              this.$message.error("图片上传失败，请重试");
+              console.log(res.data)
+              stop = true
+            }
+            else {
+              file_name = res.data.filename
+            }
+          }).catch(err => {
+            this.$message.error("图片上传失败，请重试");
+            console.log(err);
+            stop = true
+          })
+      }
+      // 拦截器
+      if(stop) {
+        load.close();
+        return
+      }
+      let data = {
+        title: this.title,
+        content: this.content,
+        total_addr: this.total_addr,
+        detail_addr: this.detail_addr,
+        contact_way: this.contact_way,
+        type: this.type,
+        img_url: file_name,
+        create_time: new Date().getTime(),
+        user_info: {
+          user_cid: this.user_info.cid,
+          user_name: this.user_info.name,
+          user_id: this.user_info.id
+        },
+        close: 'false'
+      }
+      await addLAF(data).then(res=> {
+        if(res.data.errcode == 200) {
+          load.close()
+          this.$message({
+            message: "提交成功",
+            type: "success"
+          });
+          this.setLAFReflash(true)
+          localStorage.setItem("storeState", JSON.stringify(this.$store.state));
+          this.back()
+        }
+      }).catch(err => {
+        load.close()
+        this.$message.error("提交失败，请重试");
+        console.log(err)
+      })
+    }
+  },
+  created() {
+    this.$store.replaceState(
+      Object.assign(
+        this.$store.state,
+        JSON.parse(localStorage.getItem("storeState"))
+      )
+    );
+    this.setPage("None");
+    if (Object.keys(this.user_info).length != 0) {
+      let now = new Date().getTime(); //毫秒级时间戳
+      if (
+        (now - this.user_info.login_time < 1000 * 60 * 60 * 24 * 7 ||
+          !this.personalized.expire) &&
+        this.user_info.login_time > 1581249952745
+      ) {
+        // 登录时间是7天之内
+        this.init();
+        return;
+      }
+    }
+    this.setUserInfo(Object.create(null));
+    localStorage.setItem("storeState", JSON.stringify(this.$store.state));
+    this.$router.replace("/login");
+  },
+  components: {
+    FooterSpace
+  }
+};
+</script>
+
+<style scoped lang="scss" type="text/scss">
+@import "../../style/main";
+.LAFAdd {
+  width: 100%;
+  max-width: 500px;
+  margin: 0 auto;
+  background-color: #f8f8f8;
+  min-height: 100%;
+  position: relative;
+  overflow: hidden;
+  header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 1.2rem;
+    z-index: 100;
+    .w {
+      height: 1.2rem;
+      width: 100%;
+      max-width: 500px;
+      margin: 0 auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-image: $gradualLAF;
+      color: #fff;
+      position: relative;
+      .title-box {
+        font-size: 0.5rem;
+      }
+      .icon-box {
+        height: 1.2rem;
+        width: 1.2rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        top: 0;
+        left: 0;
+        .title-icon {
+          font-size: 0.6rem;
+        }
+      }
+    }
+  }
+  .main {
+    .card {
+      height: auto;
+      padding: 0.3rem 0.3rem 1rem 0.3rem;
+      box-sizing: border-box;
+      // padding-bottom:1rem;
+      width: 90%;
+      margin: 0 auto;
+      margin-top: 0.5rem;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+      border: 1px solid #eee;
+      border: 1px solid #eee;
+      background: #fff;
+      border-radius: 0.15rem;
+      .icon-box {
+        text-align: center;
+        color: $main-color;
+        height: 1rem;
+      }
+      p {
+        text-align: center;
+        font-size: 0.4rem;
+        // font-weight: 600;
+        color: $main-color;
+        letter-spacing: 2px;
+        margin: .2rem 0;
+      }
+      input {
+        width: 100%;
+        height: 1rem;
+        font-size: 0.3rem;
+        outline-style: none;
+        background: #f4f9ff;
+        border: 1px #e1effd solid;
+        color: $main-color;
+        padding: 0 .3rem;
+        box-sizing: border-box;
+        border-radius: .15rem;
+        margin-bottom: .3rem;
+      }
+      ::-webkit-input-placeholder {
+        /* Chrome/Opera/Safari */
+        color: #a4c5ed;
+      }
+      ::-moz-placeholder {
+        /* Firefox 19+ */
+        color: #a4c5ed;
+      }
+      :-ms-input-placeholder {
+        /* IE 10+ */
+        color: #a4c5ed;
+      }
+      :-moz-placeholder {
+        /* Firefox 18- */
+        color: #a4c5ed;
+      }
+      textarea {
+        width: 100%;
+        background: #f4f9ff;
+        border: 1px #e1effd solid;
+        font-size: 0.3rem;
+        border-radius: .15rem;
+        padding: .3rem;
+        box-sizing: border-box;
+        color: $main-color;
+        height: 2.5rem;
+      }
+      .label {
+        color: $main-color;
+        font-size: .4rem;
+        margin-bottom: .3rem;
+      }
+      .addr-box, .contact-box, .type-box {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .option {
+          height: .6rem;
+          width: 2rem;
+          line-height: .6rem;
+          font-size: .3rem;
+          text-align: center;
+          border: 1px #e1effd solid;
+          color:#a4c5ed;
+          background: #f4f9ff;
+        }
+        .select {
+          background: #cce6ff !important;
+          color: #0081ff;
+          border: 1px #cce6ff solid;
+        }
+      }
+      .type-box {
+        margin-bottom: .3rem;
+      }
+      .contact-box .option {
+        width: auto!important;
+        flex :1;
+      }
+      .img-box {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .img-border {
+          box-sizing: border-box;
+          height: 2rem;
+          width: 2rem;
+          border: 2px $create-cramera-border-color solid;
+          border-radius: 0.1rem;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          .camera {
+            height: 0.8rem;
+            width: 0.8rem;
+            display: block;
+            margin: auto;
+          }
+        }
+        .img-preview {
+          height: 2rem;
+          width: 2rem;
+          border-radius: 0.1rem;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          overflow: hidden;
+          position: relative;
+          img {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+          .img-delete {
+            position: absolute;
+            top: 0;
+            right: 0;
+            height: 0.5rem;
+            width: 0.5rem;
+            background: #000;
+            opacity: 0.6;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-bottom-left-radius: 0.1rem;
+            .close-white {
+              height: 0.3rem;
+              width: 0.3rem;
+            }
+          }
+        }
+        .tips {
+          p {
+            font-size: .3rem;
+          }
+        }
+      }
+      .submit {
+        width: 5rem;
+        height: 1rem;
+        text-align: center;
+        line-height: 1rem;
+        margin: 1rem auto;
+        margin-bottom: 0;
+        font-size: .4rem;
+        letter-spacing: 2px;
+        color: #fff;
+        background: $main-color;
+        border-radius: .1rem;
+      }
+    }
+    .detail-card {
+      margin-top: 0;
+      padding-top: 1rem;
+    }
+    .link {
+      height:1.5rem;
+      width:75%;
+      // background: red;
+      margin: 0 auto;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      margin-top:-.5rem;
+      margin-bottom:-.5rem;
+      .link-item {
+        height:1.5rem;
+        width:.25rem;
+        position: relative;
+        .link-dote-top {
+          height:.25rem;
+          width:.25rem;
+          background: #b9d4f7;
+          /* background: #f7bdba; */
+          border-radius: 50%;
+          position: absolute;
+          top:0;
+          z-index:10;
+        }
+        .link-dote-bottom {
+          height:.25rem;
+          width: .25rem;
+          background: #b9d4f7;
+          /* background: #f7bdba; */
+          border-radius: 50%;
+          position: absolute;
+          bottom:0;
+          // left:10rpx;
+          z-index:10;
+        }
+        .link-line {
+          height:1.3rem;
+          width:.1rem;
+          position: absolute;
+          top:.1rem;
+          left:.075rem;
+          background: #e5eef9;
+          /* background: #fae7e6; */
+          z-index:11;
+          border-radius: .2rem;
+        }
+      }
+    }
+  }
+}
+</style>
--- a/src/views/lostandfound/LAFDetail.vue
+++ b/src/views/lostandfound/LAFDetail.vue
@ -1,25 +1,46 @@
 <template>
-  <div class="personal">
+  <div class="LAFDetail">
    <header>
      <div class="w">
        <div class="icon-box">
          <i class="el-icon-back title-icon" @click="back()"></i>
        </div>
        <div class="title-box">详情</div>
+        <div class="icon-box del-box">
+          <i class="el-icon-delete title-icon" @click="openDelLAF()"></i>
+        </div>
      </div>
    </header>
    <div style="height: 1.2rem;"></div>
    <div class="main">
      <InfoCard :data="content"></InfoCard>
-      <Comment :content="content"></Comment>
+      <Comment :content="content" :openInput="openInput"></Comment>
    </div>
    <div style="height: 1.3rem;"></div>
    <footer v-if="show_footer">
      <div class="footer-w">
-        <div class="comment">我要留言</div>
-        <div class="finish">联系发布者</div>
+        <div class="comment" @click="openInput(-1, -1)">我要留言</div>
+        <div class="finish" v-if="content.contact_way.type!='none'" @click="openDialog()">联系发布者</div>
      </div>
    </footer>
+    <!-- 联系发布者弹窗 -->
+      <div class="dialog" v-if="show_contact" @touchmove.prevent>
+        <div class="w">
+          <div class="title">
+            联系方式
+            <div class="icon-box" @click="closeDialog()">
+              <i class="el-icon-close icon"></i>
+            </div>
+          </div>
+          <div class="dialog-main">
+            <p>
+              {{content.contact_way.type}}：
+              <span>{{content.contact_way.content}}</span>
+            </p>
+            <div class="copy-buttom" v-clipboard:copy="content.contact_way.content" v-clipboard:success="onCopyUrl" v-clipboard:error="onErrorUrl">复制</div>
+          </div>
+        </div>
+      </div>
  </div>
 </template>

@ -30,7 +51,7 @@ import FooterSpace from "@/components/FooterSpace.vue";
 import InfoCard from "@/components/InfoCard.vue";
 import Comment from "@/components/Comment.vue";
 import { mapState, mapActions } from "vuex";
-import { login } from "@/axios/api.js";
+import { getLAFDetail, comment, delLAF } from "@/axios/api.js";
 import { formatDateTime } from "@/lib/utils.js";
 import { Loading } from "element-ui";

@ -38,8 +59,14 @@ export default {
  name: "LAFDetail",
  data() {
    return {
-      content: {},
-      show_footer: true
+      content: {
+        contact_way:{
+          type: 'none'
+        },
+        img_url:'no_img.png'
+      },
+      show_footer: true,
+      show_contact: false
    };
  },
  computed: {
@ -56,103 +83,232 @@ export default {
      "setUserInfo",
      "setCurrentWeek",
      "setCurrentSchedule",
-      "setPersonalized"
+      "setPersonalized",
+      "setLAFReflash"
    ]),
    formatDateTime,
    // 初始化
    init() {
      // let id = this.$route.params.item._id["$oid"];
-      Object.keys(this.$route.params).length == 0;
+      // 防止本页刷新后丢失params导致渲染出错，直接返回上一级
      if (Object.keys(this.$route.params).length == 0) {
        this.$router.go(-1);
        return;
      }
-      let id = this.$route.params.item._id;
-      this.getPageData(id);
+      let id = this.$route.params.item._id["$oid"];
+      let type = this.$route.params.item.type
+      this.getPageData(id,type);
    },
    // 获取本页详情
-    getPageData() {
-      this.content = {
-        // 数据库id
-        _id: "100",
-        // 标题
-        title: "测试用文本",
-        // 内容
-        content: "不知道这是谁的本子，放120了",
-        // 时间
-        create_time: "1581152278111",
-        // 图片
-        img_url:
-          "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3488199501,3589420970&fm=26&gp=0.jpg",
-        // 区域
-        total_addr: "南区",
-        // 地点
-        detail_addr: "南研1201",
-        // 联系方式（可选）
-        contact_way: { type: "QQ", content: "1144131090" },
-        // 评论
-        comment: [
-
-        ]
-      };
-      this.addComment()
+    getPageData(id, type) {
+      let load = Loading.service({
+        background: "rgba(236,245,255,.7)",
+        target: document.querySelector(".LAFDetail")
+      });
+      let data = {
+        id,
+        type
+      }
+      getLAFDetail(data).then(res => {
+        // console.log(res)
+        if(res.data.errcode == 200) {
+          // 获取成功
+          this.content = JSON.parse(res.data.detail)
+          // console.log(this.content)
+          load.close()
+        } else {
+          // 获取失败
+          load.close()
+          this.$message.error("服务器开小差了，请过段时间重试");
+          console.log(res.data)
+          this.back()
+        }
+      }).catch(err => {
+        load.close()
+        this.$message.error("服务器开小差了，请过段时间重试");
+        console.log(err)
+        this.back()
+      })
    },
    back() {
      this.$router.go(-1);
    },
-    addComment() {
-      if (this.content.comment && this.content.comment.length!=0) return;
-      console.log("加入commnet");
-      this.content.comment = [
+    
+    // 打开输入框
+    openInput(comment_index, reply_index) {
+      console.log(comment_index,reply_index)
+      this.show_footer = false
+      this.$prompt(
+        `请输入内容，为保证信息质量，该操作将实名制`,
+        "提示",
        {
-          user_avatar: "http://img02.fs.yiban.cn/16515387/avatar/user/200",
-          msg: "这可能是一个评论吧，应该就是了",
-          user_nick: "英树",
-          time: 1575256258182,
-          cid: "170521328",
-          reply: [
-            {
-              user_avatar: "http://img02.fs.yiban.cn/16515387/avatar/user/200",
-              msg: "这可能就是一个回复吧，应该就是了",
-              user_nick: "英树",
-              time: 1575256258182,
-              cid: "170521328"
-            },
-            {
-              user_avatar: "http://img02.fs.yiban.cn/16515387/avatar/user/200",
-              msg:
-                "这可能就是一个回的空间看到就看见的空间的空间的接口对接复吧，应该就是了",
-              user_nick: "英树",
-              time: 1575256258182,
-              cid: "170521328"
-            }
-          ]
-        },
-        {
-          user_avatar: "http://img02.fs.yiban.cn/16515387/avatar/user/200",
-          msg: "这可能是一个评论吧，应该就是了",
-          user_nick: "英树",
-          time: 1575256258182,
-          cid: "170521328",
-          reply: [
-            {
-              user_avatar: "http://img02.fs.yiban.cn/16515387/avatar/user/200",
-              msg: "这可能就是一个回复吧，应该就是了",
-              user_nick: "英树",
-              time: 1575256258182,
-              cid: "170521328"
-            },
-            {
-              user_avatar: "http://img02.fs.yiban.cn/16515387/avatar/user/200",
-              msg: "这可能就是一个回复吧，应该就是了",
-              user_nick: "英树",
-              time: 1575256258182,
-              cid: "170521328"
-            }
-          ]
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          inputPattern: /^[^\^\$\/\<\(\)]{3,}$/,
+          inputErrorMessage: "请勿输入特殊符号，至少3个字,"
        }
-      ];
-    }
+      )
+        .then(({ value }) => {
+          this.show_footer = true
+          this.submit(comment_index, reply_index, value);
+        })
+        .catch(() => {
+          this.show_footer = true
+          this.$message({
+            type: "info",
+            message: "取消输入"
+          });
+        });
+    },
+    // 确认提交
+    submit(comment_index, reply_index, value) {
+      let load = Loading.service({
+        background: "rgba(236,245,255,.7)",
+        target: document.querySelector(".LAFDetail")
+      });
+      // 合成上传信息
+      // 数据一共需要提交 昵称 时间 cid 内容
+      // 此处内容需要根据是回复还是评论进行处理
+      var data = {
+        user_info: {
+          user_id: this.user_info.id,
+          user_name: this.user_info.name
+        },
+        time: new Date().getTime()
+      };
+      // 后端插入数据的定位信息 商品id 表类型 回复或者评论的类型
+      var position = {
+        id: this.content._id["$oid"],
+        type: this.content.type
+      };
+      if (comment_index == -1) {
+        // 留言
+        data.msg = value;
+        position.comment_type = 1;
+      } else {
+        // 回复
+        if (reply_index == -1) {
+          // 回复留言
+          data.msg = `@${this.content.comment[comment_index].user_info.user_name}：${value}`;
+          position.comment_index = comment_index;
+          position.comment_type = 2;
+        } else {
+          // 回复回复
+          data.msg = `@${this.content.comment[comment_index].reply[reply_index].user_info.user_name}：${value}`;
+          position.comment_index = comment_index;
+          position.comment_type = 2;
+        }
+      }
+      comment(data, position)
+        .then(res => {
+          console.log(res);
+          if (res.data.errcode == 200) {
+            // 提交成功, 刷新数据
+            load.close()
+            this.$message({
+              type: "success",
+              message: `${position.comment_type == 1 ? "留言" : "回复"}成功`
+            });
+            this.getPageData(this.content._id["$oid"], this.content.type);
+          } else {
+            // 错误处理
+            load.close()
+            this.$message.error(
+              `${position.comment_type == 1 ? "留言" : "回复"}失败，请重试`
+            );
+          }
+        })
+        .catch(err => {
+          load.close()
+          console.log(err);
+          this.$message.error(
+            `${position.comment_type == 1 ? "留言" : "回复"}失败，请重试`
+          );
+        });
+    },
+    // 打开删除对话窗
+    openDelLAF(){
+      this.show_footer = false
+      this.$prompt(
+        `此操作将删除该记录，此操作实名制，请输入你的学号`,
+        "警告",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          inputPattern: /\d{7}W?\d{2}/,
+          inputErrorMessage: "请输入正确的学号"
+        }
+      )
+        .then(({ value }) => {
+          this.show_footer = true
+          if(value == this.user_info.id) {
+            // 填入正确
+            this.closeLAF()
+          }else {
+            this.$message.error('输入学号有误请核对');
+          }
+        })
+        .catch(() => {
+          this.show_footer = true
+          this.$message({
+            type: "info",
+            message: "取消输入"
+          });
+        });
+    },
+    // 进行删除操作
+    closeLAF(){
+      let load = Loading.service({
+        background: "rgba(236,245,255,.7)",
+        target: document.querySelector(".LAFDetail")
+      }); 
+      let data = {
+        id: this.content._id["$oid"],
+        type: this.content.type,
+        user_info: {
+          user_id: this.user_info.id,
+          user_name: this.user_info.name
+        }
+      }
+      delLAF(data).then(res => {
+        if(res.data.errcode == 200) {
+          // 执行成功
+          load.close()
+          this.$message({
+            type: "success",
+            message: '恭喜，操作成功'
+          });
+          this.setLAFReflash(true)
+          this.back()
+        } else {
+          // 执行失败
+          load.close()
+          console.log(res.data)
+          this.$message.error('抱歉，操作失败');
+          this.setLAFReflash(true)
+        }
+      }).catch(err => {
+          // 执行失败
+          load.close()
+          console.log(err)
+          this.$message.error('抱歉，操作失败');
+          this.setLAFReflash(true)
+      })
+    },
+    // 打开联系发布者弹窗
+    openDialog() {
+      this.show_contact = true
+    },
+    // 关闭联系发布者弹窗
+    closeDialog() {
+      this.show_contact = false
+    },
+    onCopyUrl(e) {
+      this.$message.success("复制成功！");
+    },
+    onErrorUrl(e) {
+      this.$message.success("复制失败！");
+    },
  },
  created() {
    // 刷新vuex
@ -191,7 +347,7 @@ export default {

 <style scoped lang="scss" type="text/scss">
@import "../../style/main";
-.personal {
+.LAFDetail {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
@ -233,6 +389,13 @@ export default {
          font-size: 0.6rem;
        }
      }
+      .del-box {
+        right: 0;
+        left: auto;
+        .title-icon {
+          font-size: 0.5rem;
+        }
+      }
    }
  }
  footer {
@ -240,7 +403,7 @@ export default {
    bottom: 0;
    left: 0;
    width: 100%;
-    z-index: 1000;
+    z-index: 100;
    .footer-w {
      border-top: 1px #eee solid;
      display: flex;
@ -265,5 +428,83 @@ export default {
      }
    }
  }
+  .dialog {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 101;
+    height: 100%;
+    width: 100%;
+    background: rgba(0, 0, 0, 0.4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .w {
+      width: 70%;
+      max-width: 350px;
+      height: 5rem;
+      background: #fff;
+      border-radius: 0.1rem;
+      overflow: hidden;
+      .title {
+        height: 1rem;
+        background-image: $gradualLAF;
+        font-size: 0.4rem;
+        text-align: center;
+        line-height: 1rem;
+        color: #fff;
+        position: relative;
+        .icon-box {
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 1rem;
+          height: 1rem;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          .icon {
+            font-size: 0.5rem;
+          }
+        }
+        
+      }
+      .dialog-main {
+        height: 4rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        p {
+          margin-bottom: 0.2rem;
+          text-align: center;
+          font-size: 0.4rem;
+          span {
+            font-size: 0.4rem;
+            color: $main-color;
+            -moz-user-select: all;
+            -webkit-user-select: all;
+            -ms-user-select: all;
+            -khtml-user-select: all;
+            user-select: all;
+          }
+        }
+        .copy-buttom {
+          width: 40%;
+          margin: 0 auto;
+          margin-top: .5rem;
+          // background-image: $gradualLAF;
+          background: $main-color;
+          color: #fff;
+          font-size: .3rem;
+          text-align: center;
+          height: .7rem;
+          line-height: .7rem;
+          border-radius: .1rem;
+
+        }
+      }
+    }
+  }
 }
 </style>
--- a/src/views/lostandfound/LostAndFound.vue
+++ b/src/views/lostandfound/LostAndFound.vue
@ -6,7 +6,7 @@
          <i class="el-icon-refresh icon"></i>
        </div>
        <div class="title-box">失物招领</div>
-        <div class="icon-box">
+        <div class="icon-box" @click="goToAdd()">
          <i class="el-icon-plus icon"></i>
        </div>
      </div>
@ -15,6 +15,7 @@
    <div class="search-warp">
      <div class="search-box">
        <i class="el-icon-search icon"></i>
+        <p>该功能开发中</p>
        <!-- <input type="text" placeholder="输入物品名" /> -->
      </div>
      <div class="submit">搜索</div>
@ -60,7 +61,8 @@ export default {
      "current_week",
      "current_schedule",
      "personalized",
-      "LAF_data"
+      "LAF_data",
+      'LAF_reflash'
    ]),
  },
  methods: {
@ -69,7 +71,8 @@ export default {
      "setUserInfo",
      "setCurrentWeek",
      "setCurrentSchedule",
-      "setLAFData"
+      "setLAFData",
+      "setLAFReflash"
    ]),
    // 初始化
    init() {
@ -83,7 +86,7 @@ export default {
        let now = new Date().getTime(); //毫秒级时间戳
        if (
          now - this.LAF_data.get_time < 1000 * 60 * 3 &&
-          !this.need_reflash
+          !this.need_reflash && !this.LAF_reflash
        ) {
          // 上次获取的的时间是3分钟之内且无需刷新
          return;
@ -94,15 +97,49 @@ export default {
        target: document.querySelector(".laf")
      });
      getLAF().then(res => {
-        console.log(res);
-        let data = {
-          lost: res.lost,
-          found: res.found,
-          get_time: new Date().getTime()
-        };
-        this.setLAFData(data);
+        console.log(res.data);
+        let data = res.data
+        let laf
+        if(data.lost.errcode == 200 && data.found.errcode == 200) {
+          // 成功获取到信息
+          laf = {
+            lost: JSON.parse(data.lost.arr),
+            found: JSON.parse(data.found.arr),
+            get_time: new Date().getTime()
+          }
+          console.log(laf)
+          if(this.need_reflash) {
+            this.$message({
+              message: "数据更新成功",
+              type: "success"
+            });
+          }
+        } else {
+          // 信息获取失败
+          laf = {
+            lost: [],
+            found: [],
+            get_time: new Date().getTime()
+          }
+          this.$message.error("数据更新失败，请联系管理员");
+          console.log(res.data)
+        }
+        this.setLAFData(laf);
+        this.setLAFReflash(false);
        localStorage.setItem("storeState", JSON.stringify(this.$store.state));
        this.need_reflash = false;
+        load.close()        
+      }).catch(err => {
+        console.log(err)
+        laf = {
+          lost: [],
+          found: [],
+          get_time: new Date().getTime()
+        }
+        this.$message.error("网络连接失败，请联系管理员");
+        this.setLAFData(laf);
+        localStorage.setItem("storeState", JSON.stringify(this.$store.state));
+        this.need_reflash = true;
        load.close()
      });
    },
@ -118,7 +155,10 @@ export default {
      this.need_reflash = true
      this.getLAFData()
    },
-    
+    // 点击详情
+    goToAdd(){
+      this.$router.push('/lafadd')
+    }
  },
  created() {
    this.$store.replaceState(
@ -245,9 +285,10 @@ export default {
        color: #989898;
        font-size: 0.3rem;
      }
-      input {
+      input, p{
        width: 100%;
        height: 0.7rem;
+        line-height: .7rem;
        border: none;
        padding-left: 0.3rem;
        font-size: 0.3rem;