finish addlaf beta
This commit is contained in:
parent
fc7d52ad2b
commit
63cacb57cc
@ -31,12 +31,12 @@ const plugins = [
|
|||||||
// 帮助减少 helper 函数
|
// 帮助减少 helper 函数
|
||||||
[
|
[
|
||||||
"@babel/plugin-transform-runtime",
|
"@babel/plugin-transform-runtime",
|
||||||
{
|
// {
|
||||||
"corejs": false, // 默认值，可以不写
|
// "corejs": false, // 默认值，可以不写
|
||||||
"helpers": true, // 默认，可以不写
|
// "helpers": true, // 默认，可以不写
|
||||||
"regenerator": false, // 通过 preset-env 已经使用了全局的 regeneratorRuntime, 不再需要 transform-runtime 提供的 不污染全局的 regeneratorRuntime
|
// "regenerator": false, // 通过 preset-env 已经使用了全局的 regeneratorRuntime, 不再需要 transform-runtime 提供的 不污染全局的 regeneratorRuntime
|
||||||
"useESModules": true, // 使用 es modules helpers, 减少 commonJS 语法代码
|
// "useESModules": true, // 使用 es modules helpers, 减少 commonJS 语法代码
|
||||||
}
|
// }
|
||||||
],
|
],
|
||||||
// 由于没有了 stage-x，需要单独导入需要的插件
|
// 由于没有了 stage-x，需要单独导入需要的插件
|
||||||
[
|
[
|
||||||
|
|||||||
@ -15,6 +15,7 @@
|
|||||||
"element-ui": "^2.13.0",
|
"element-ui": "^2.13.0",
|
||||||
"register-service-worker": "^1.6.2",
|
"register-service-worker": "^1.6.2",
|
||||||
"vue": "^2.6.10",
|
"vue": "^2.6.10",
|
||||||
|
"vue-clipboard2": "^0.3.1",
|
||||||
"vue-router": "^3.1.3",
|
"vue-router": "^3.1.3",
|
||||||
"vue-svg-icon": "^1.2.9",
|
"vue-svg-icon": "^1.2.9",
|
||||||
"vuex": "^3.1.2",
|
"vuex": "^3.1.2",
|
||||||
|
|||||||
@ -40,7 +40,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
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里的状态信息
|
//在页面加载时读取localStorage里的状态信息
|
||||||
this.$store.replaceState(
|
this.$store.replaceState(
|
||||||
Object.assign(
|
Object.assign(
|
||||||
|
|||||||
@ -12,35 +12,50 @@ export function login(data) {
|
|||||||
return api.post('/login', params)
|
return api.post('/login', params)
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getLAF() {
|
// 上传图片
|
||||||
return new Promise(function(resolve, reject) {
|
export function uploadPhoto(file) {
|
||||||
let data = {
|
let param = new FormData();
|
||||||
errcode: 200,
|
param.append('photo', file);
|
||||||
lost: [{
|
return api.put('/photo/upload', param, {
|
||||||
// 数据库id
|
headers: {
|
||||||
_id: '100',
|
'Content-Type': 'multipart/form-data',
|
||||||
// 标题
|
}
|
||||||
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 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)
|
||||||
|
}
|
||||||
@ -1,12 +1,12 @@
|
|||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
|
|
||||||
export const api = axios.create({
|
export const api = axios.create({
|
||||||
// baseURL: 'http://coc.powerrain.cn/api/',
|
baseURL: 'http://coc.powerrain.cn/api/',
|
||||||
baseURL: window.location.origin + '/api/',
|
// baseURL: window.location.origin + '/api/',
|
||||||
// baseURL: 'http://152.136.99.231:8001' + '/api/',
|
// baseURL: 'http://152.136.99.231:8001' + '/api/',
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/x-www-form-urlencoded',
|
'Content-Type': 'application/x-www-form-urlencoded',
|
||||||
'Accept': 'application/vnd.toast.v1+json'
|
'Accept': 'application/json'
|
||||||
},
|
},
|
||||||
timeout: 10 * 1000
|
timeout: 10 * 1000
|
||||||
})
|
})
|
||||||
|
|||||||
@ -1,33 +1,31 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="comment-warp" v-if="content.comment && content.comment.length!=0">
|
<div class="comment-warp" v-if="content.comment && content.comment.length!=0">
|
||||||
<div class="comment-title"># 留言</div>
|
<div class="comment-title"># 留言</div>
|
||||||
<div class="comment-item" v-for="(comment, c) in content.comment" :key="c">
|
<div class="comment-item" v-for="(comment, c) in content.comment" :key="c">
|
||||||
<div class="comment-box">
|
<div class="comment-box">
|
||||||
<div class="reply-btn">
|
<i class="el-icon-chat-dot-round label-icon-big"></i>
|
||||||
<!-- <icon name class="reply"></icon> -->
|
<div class="reply-btn">
|
||||||
<span @click="openInput(c, -1)">回复</span>
|
<span @click="openInput(c, -1)">回复</span>
|
||||||
</div>
|
</div>
|
||||||
<img :src="comment.user_avatar" class="comment-avatar" />
|
<div class="comment-detail-box">
|
||||||
<div class="comment-detail-box">
|
<div class="comment-user-nick">{{comment.user_info.user_name}}</div>
|
||||||
<div class="comment-user-nick">{{comment.user_nick}}</div>
|
<div class="comment-time">{{formatDateTime(comment.time)}}</div>
|
||||||
<div class="comment-time">{{formatDateTime(comment.time)}}</div>
|
<div class="comment-msg">{{comment.msg}}</div>
|
||||||
<div class="comment-msg">{{comment.msg}}</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="reply-item" v-for="(reply, r) in comment.reply" :key="r">
|
||||||
<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">
|
<div class="reply-btn">
|
||||||
<!-- <icon name class="reply"></icon> -->
|
<span @click="openInput(c, r)">回复</span>
|
||||||
<span @click="openInput(c, r)">回复</span>
|
</div>
|
||||||
</div>
|
<div class="reply-detail-box">
|
||||||
<img :src="reply.user_avatar" class="reply-avatar" />
|
<div class="reply-user-nick">{{reply.user_info.user_name}}</div>
|
||||||
<div class="reply-detail-box">
|
<div class="reply-time">{{formatDateTime(reply.time)}}</div>
|
||||||
<div class="reply-user-nick">{{reply.user_nick}}</div>
|
<div class="reply-msg">{{reply.msg}}</div>
|
||||||
<div class="reply-time">{{formatDateTime(reply.time)}}</div>
|
</div>
|
||||||
<div class="reply-msg">{{reply.msg}}</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { mapState, mapActions } from "vuex";
|
import { mapState, mapActions } from "vuex";
|
||||||
@ -35,17 +33,13 @@ import { formatDateTime } from "@/lib/utils.js";
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "comment",
|
name: "comment",
|
||||||
props: ["content"],
|
props: ["content","openInput"],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {};
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
computed: {},
|
||||||
methods: {
|
methods: {
|
||||||
formatDateTime
|
formatDateTime,
|
||||||
},
|
},
|
||||||
created() {}
|
created() {}
|
||||||
};
|
};
|
||||||
@ -54,76 +48,74 @@ export default {
|
|||||||
<style scoped lang="scss" type="text/scss">
|
<style scoped lang="scss" type="text/scss">
|
||||||
@import "../style/main";
|
@import "../style/main";
|
||||||
.comment-warp {
|
.comment-warp {
|
||||||
padding: 0.5rem 0.4rem;
|
padding: 0.5rem 0.4rem;
|
||||||
.comment-title {
|
.comment-title {
|
||||||
font-size: 0.4rem;
|
font-size: 0.4rem;
|
||||||
}
|
}
|
||||||
.comment-item {
|
.comment-item {
|
||||||
padding-top: 0.5rem;
|
padding-top: 0.5rem;
|
||||||
padding-bottom: 0.5rem;
|
padding-bottom: 0.5rem;
|
||||||
border-bottom: 1px #eee solid;
|
border-bottom: 1px #eee solid;
|
||||||
.reply-btn {
|
.reply-btn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0.1rem;
|
top: 0.1rem;
|
||||||
right: 0rem;
|
right: 0rem;
|
||||||
font-size: 0.3rem;
|
font-size: 0.3rem;
|
||||||
color: $main-color;
|
color: $main-color;
|
||||||
}
|
}
|
||||||
.comment-box {
|
.comment-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.comment-avatar {
|
.label-icon-big {
|
||||||
height: 1rem;
|
font-size: .7rem;
|
||||||
width: 1rem;
|
color: $main-color;
|
||||||
border-radius: 50%;
|
}
|
||||||
|
.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 {
|
.reply-detail-box {
|
||||||
margin-left: 0.2rem;
|
margin-left: 0.2rem;
|
||||||
.comment-user-nick {
|
.reply-user-nick {
|
||||||
font-size: 0.4rem;
|
font-size: 0.3rem;
|
||||||
margin-bottom: 0.1rem;
|
margin-bottom: 0.1rem;
|
||||||
}
|
}
|
||||||
.comment-time {
|
.reply-time {
|
||||||
font-size: 0.2rem;
|
font-size: 0.2rem;
|
||||||
margin-bottom: 0.3rem;
|
margin-bottom: 0.1rem;
|
||||||
color: $secondary-text;
|
color: $secondary-text;
|
||||||
}
|
}
|
||||||
.comment-msg {
|
.reply-msg {
|
||||||
font-size: 0.4rem;
|
font-size: 0.3rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -9,10 +9,10 @@
|
|||||||
<i :class="current_page == 'grade'? 'select' : ''" class="el-icon-s-claim"></i>
|
<i :class="current_page == 'grade'? 'select' : ''" class="el-icon-s-claim"></i>
|
||||||
<p :class="current_page == 'grade'? 'select' : ''">成绩</p>
|
<p :class="current_page == 'grade'? 'select' : ''">成绩</p>
|
||||||
</div>
|
</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>
|
<i :class="current_page == 'laf'? 'select' : ''" class="el-icon-s-flag"></i>
|
||||||
<p :class="current_page == 'laf'? 'select' : ''">失物招领</p>
|
<p :class="current_page == 'laf'? 'select' : ''">失物招领</p>
|
||||||
</div> -->
|
</div>
|
||||||
<div class="content" @click="goToAddress('/myaccount')">
|
<div class="content" @click="goToAddress('/myaccount')">
|
||||||
<i :class="current_page == 'myaccount'? 'select' : ''" class="el-icon-s-custom"></i>
|
<i :class="current_page == 'myaccount'? 'select' : ''" class="el-icon-s-custom"></i>
|
||||||
<p :class="current_page == 'myaccount'? 'select' : ''">我的</p>
|
<p :class="current_page == 'myaccount'? 'select' : ''">我的</p>
|
||||||
|
|||||||
@ -5,9 +5,9 @@
|
|||||||
<div class="time">{{show_time}}</div>
|
<div class="time">{{show_time}}</div>
|
||||||
<!-- 内容 -->
|
<!-- 内容 -->
|
||||||
<div class="content-text">{{data.content}}</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">
|
<div class="img-warp">
|
||||||
<img :src="data.img_url" alt/>
|
<img :src="imgaddr" alt/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="addr-box">
|
<div class="addr-box">
|
||||||
@ -28,9 +28,7 @@ export default {
|
|||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
imgaddr: function() {
|
imgaddr: function() {
|
||||||
return (
|
return "https://coc.powerrain.cn/api/" + "photo/show/" + this.data.img_url
|
||||||
"https://coc.powerrain.cn/api/" + "photo/show/" + this.data.img_url
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
show_time:function() {
|
show_time:function() {
|
||||||
return formatDateTime(new Date(parseInt(this.data.create_time)));
|
return formatDateTime(new Date(parseInt(this.data.create_time)));
|
||||||
@ -64,7 +62,7 @@ export default {
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
.time {
|
.time {
|
||||||
font-size: 0.2rem;
|
font-size: 0.3rem;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
color: #909399;
|
color: #909399;
|
||||||
height: 0.3rem;
|
height: 0.3rem;
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="content-box" @click="goToDetail()">
|
<div class="content-box" @click="goToDetail()">
|
||||||
<img :src="content.img_url" alt />
|
<img :src="imgaddr" alt />
|
||||||
<div class="text-box">
|
<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="time">{{show_time}}</div>
|
||||||
<div class="addr">
|
<div class="addr">
|
||||||
<i class="el-icon-location-information icon"></i>
|
<i class="el-icon-location-information icon"></i>
|
||||||
@ -24,6 +24,11 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
imgaddr: function() {
|
||||||
|
return (
|
||||||
|
"https://coc.powerrain.cn/api/" + "photo/show/" + this.content.img_url
|
||||||
|
);
|
||||||
|
},
|
||||||
show_time:function() {
|
show_time:function() {
|
||||||
return formatDateTime(new Date(parseInt(this.content.create_time)));
|
return formatDateTime(new Date(parseInt(this.content.create_time)));
|
||||||
},
|
},
|
||||||
@ -41,7 +46,7 @@ export default {
|
|||||||
<style scoped lang="scss" type="text/scss">
|
<style scoped lang="scss" type="text/scss">
|
||||||
@import "../style/main";
|
@import "../style/main";
|
||||||
.content-box {
|
.content-box {
|
||||||
max-width: 48%;
|
width: 48%;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 0.2em;
|
border-radius: 0.2em;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|||||||
@ -56,6 +56,8 @@ Vue.use(Element);
|
|||||||
// Vue.prototype.$prompt = MessageBox.prompt;
|
// Vue.prototype.$prompt = MessageBox.prompt;
|
||||||
// Vue.prototype.$notify = Notification;
|
// Vue.prototype.$notify = Notification;
|
||||||
// Vue.prototype.$message = Message;
|
// Vue.prototype.$message = Message;
|
||||||
|
import VueClipboard from "vue-clipboard2";
|
||||||
|
Vue.use(VueClipboard);
|
||||||
|
|
||||||
Vue.component('icon', Icon);
|
Vue.component('icon', Icon);
|
||||||
new Vue({
|
new Vue({
|
||||||
|
|||||||
@ -7,6 +7,7 @@ import MyAccount from '../views/MyAccount.vue'
|
|||||||
import Personal from '../views/Personal.vue'
|
import Personal from '../views/Personal.vue'
|
||||||
import LostAndFound from '../views/lostandfound/LostAndFound.vue'
|
import LostAndFound from '../views/lostandfound/LostAndFound.vue'
|
||||||
import LAFDetail from '../views/lostandfound/LAFDetail.vue'
|
import LAFDetail from '../views/lostandfound/LAFDetail.vue'
|
||||||
|
import LAFAdd from '../views/lostandfound/LAFAdd.vue'
|
||||||
|
|
||||||
Vue.use(VueRouter)
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
@ -51,6 +52,11 @@ const routes = [
|
|||||||
path: '/lafdetail',
|
path: '/lafdetail',
|
||||||
name: 'LAFDetail',
|
name: 'LAFDetail',
|
||||||
component: LAFDetail
|
component: LAFDetail
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/lafadd',
|
||||||
|
name: 'LAFAdd',
|
||||||
|
component: LAFAdd
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
@ -22,6 +22,9 @@ export default new Vuex.Store({
|
|||||||
|
|
||||||
// LAF
|
// LAF
|
||||||
LAF_data: '',
|
LAF_data: '',
|
||||||
|
|
||||||
|
// 失物招领首页刷新
|
||||||
|
LAF_reflash: false
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
// 设置当前页面
|
// 设置当前页面
|
||||||
@ -47,6 +50,10 @@ export default new Vuex.Store({
|
|||||||
// 设置LAF
|
// 设置LAF
|
||||||
SET_LAFDATA(state, LAF_data) {
|
SET_LAFDATA(state, LAF_data) {
|
||||||
state.LAF_data = LAF_data
|
state.LAF_data = LAF_data
|
||||||
|
},
|
||||||
|
// 设置失物招领首页刷新
|
||||||
|
SET_LAFREFLASH(state, LAF_reflash) {
|
||||||
|
state.LAF_reflash = LAF_reflash
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
@ -73,6 +80,10 @@ export default new Vuex.Store({
|
|||||||
// 设置个性化
|
// 设置个性化
|
||||||
setLAFData({ commit }, LAF_data) {
|
setLAFData({ commit }, LAF_data) {
|
||||||
commit('SET_LAFDATA', LAF_data)
|
commit('SET_LAFDATA', LAF_data)
|
||||||
|
},
|
||||||
|
// 设置失物招领首页刷新
|
||||||
|
setLAFReflash({ commit }, LAF_reflash) {
|
||||||
|
commit('SET_LAFREFLASH', LAF_reflash)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
modules: {
|
modules: {
|
||||||
|
|||||||
@ -47,6 +47,8 @@ $grey: #8799a3;
|
|||||||
$gray: #aaa;
|
$gray: #aaa;
|
||||||
$black: #333;
|
$black: #333;
|
||||||
$white: #fff;
|
$white: #fff;
|
||||||
|
$LAFPurple: #ab64f6;
|
||||||
|
$LAFBlue: #61dbf7;
|
||||||
$gradualRed: linear-gradient(45deg, #f43f3b, #ec008c);
|
$gradualRed: linear-gradient(45deg, #f43f3b, #ec008c);
|
||||||
// $gradualOrange: linear-gradient(45deg, #ff9700, #ed1c24);
|
// $gradualOrange: linear-gradient(45deg, #ff9700, #ed1c24);
|
||||||
$gradualOrange: linear-gradient(45deg, #ed1c24, #ff9700);
|
$gradualOrange: linear-gradient(45deg, #ed1c24, #ff9700);
|
||||||
@ -55,5 +57,7 @@ $gradualPurple: linear-gradient(45deg, #9000ff, #5e00ff);
|
|||||||
$gradualPink: linear-gradient(45deg, #ec008c, #6739b6);
|
$gradualPink: linear-gradient(45deg, #ec008c, #6739b6);
|
||||||
$gradualBlue: linear-gradient(45deg, #0081ff, #1cbbb4);
|
$gradualBlue: linear-gradient(45deg, #0081ff, #1cbbb4);
|
||||||
$gradualLoginSubmit: linear-gradient(to right, #f0da4b, #ff005e);
|
$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, #f0da4b, #ff005e);
|
||||||
|
// $gradualLoginTitle:linear-gradient(to bottom right, #feecb6, #fcd0aa);
|
||||||
$gradualLAF:linear-gradient(45deg, #ab64f6, #61dbf7);
|
$gradualLAF:linear-gradient(45deg, #ab64f6, #61dbf7);
|
||||||
|
|||||||
@ -388,6 +388,7 @@ export default {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
// background-image: linear-gradient(to right, #f0da4b, #ff005e);
|
// background-image: linear-gradient(to right, #f0da4b, #ff005e);
|
||||||
background-image: $gradualLoginSubmit;
|
background-image: $gradualLoginSubmit;
|
||||||
|
// background: #ffca9f;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
position: relative;
|
position: relative;
|
||||||
.left-box,
|
.left-box,
|
||||||
|
|||||||
627
src/views/lostandfound/LAFAdd.vue
Normal file
627
src/views/lostandfound/LAFAdd.vue
Normal file
@ -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>
|
||||||
@ -1,25 +1,46 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="personal">
|
<div class="LAFDetail">
|
||||||
<header>
|
<header>
|
||||||
<div class="w">
|
<div class="w">
|
||||||
<div class="icon-box">
|
<div class="icon-box">
|
||||||
<i class="el-icon-back title-icon" @click="back()"></i>
|
<i class="el-icon-back title-icon" @click="back()"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="title-box">详情</div>
|
<div class="title-box">详情</div>
|
||||||
|
<div class="icon-box del-box">
|
||||||
|
<i class="el-icon-delete title-icon" @click="openDelLAF()"></i>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div style="height: 1.2rem;"></div>
|
<div style="height: 1.2rem;"></div>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<InfoCard :data="content"></InfoCard>
|
<InfoCard :data="content"></InfoCard>
|
||||||
<Comment :content="content"></Comment>
|
<Comment :content="content" :openInput="openInput"></Comment>
|
||||||
</div>
|
</div>
|
||||||
<div style="height: 1.3rem;"></div>
|
<div style="height: 1.3rem;"></div>
|
||||||
<footer v-if="show_footer">
|
<footer v-if="show_footer">
|
||||||
<div class="footer-w">
|
<div class="footer-w">
|
||||||
<div class="comment">我要留言</div>
|
<div class="comment" @click="openInput(-1, -1)">我要留言</div>
|
||||||
<div class="finish">联系发布者</div>
|
<div class="finish" v-if="content.contact_way.type!='none'" @click="openDialog()">联系发布者</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -30,7 +51,7 @@ import FooterSpace from "@/components/FooterSpace.vue";
|
|||||||
import InfoCard from "@/components/InfoCard.vue";
|
import InfoCard from "@/components/InfoCard.vue";
|
||||||
import Comment from "@/components/Comment.vue";
|
import Comment from "@/components/Comment.vue";
|
||||||
import { mapState, mapActions } from "vuex";
|
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 { formatDateTime } from "@/lib/utils.js";
|
||||||
import { Loading } from "element-ui";
|
import { Loading } from "element-ui";
|
||||||
|
|
||||||
@ -38,8 +59,14 @@ export default {
|
|||||||
name: "LAFDetail",
|
name: "LAFDetail",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
content: {},
|
content: {
|
||||||
show_footer: true
|
contact_way:{
|
||||||
|
type: 'none'
|
||||||
|
},
|
||||||
|
img_url:'no_img.png'
|
||||||
|
},
|
||||||
|
show_footer: true,
|
||||||
|
show_contact: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -56,103 +83,232 @@ export default {
|
|||||||
"setUserInfo",
|
"setUserInfo",
|
||||||
"setCurrentWeek",
|
"setCurrentWeek",
|
||||||
"setCurrentSchedule",
|
"setCurrentSchedule",
|
||||||
"setPersonalized"
|
"setPersonalized",
|
||||||
|
"setLAFReflash"
|
||||||
]),
|
]),
|
||||||
formatDateTime,
|
formatDateTime,
|
||||||
// 初始化
|
// 初始化
|
||||||
init() {
|
init() {
|
||||||
// let id = this.$route.params.item._id["$oid"];
|
// let id = this.$route.params.item._id["$oid"];
|
||||||
Object.keys(this.$route.params).length == 0;
|
// 防止本页刷新后丢失params导致渲染出错，直接返回上一级
|
||||||
if (Object.keys(this.$route.params).length == 0) {
|
if (Object.keys(this.$route.params).length == 0) {
|
||||||
this.$router.go(-1);
|
this.$router.go(-1);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
let id = this.$route.params.item._id;
|
let id = this.$route.params.item._id["$oid"];
|
||||||
this.getPageData(id);
|
let type = this.$route.params.item.type
|
||||||
|
this.getPageData(id,type);
|
||||||
},
|
},
|
||||||
// 获取本页详情
|
// 获取本页详情
|
||||||
getPageData() {
|
getPageData(id, type) {
|
||||||
this.content = {
|
let load = Loading.service({
|
||||||
// 数据库id
|
background: "rgba(236,245,255,.7)",
|
||||||
_id: "100",
|
target: document.querySelector(".LAFDetail")
|
||||||
// 标题
|
});
|
||||||
title: "测试用文本",
|
let data = {
|
||||||
// 内容
|
id,
|
||||||
content: "不知道这是谁的本子，放120了",
|
type
|
||||||
// 时间
|
}
|
||||||
create_time: "1581152278111",
|
getLAFDetail(data).then(res => {
|
||||||
// 图片
|
// console.log(res)
|
||||||
img_url:
|
if(res.data.errcode == 200) {
|
||||||
"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3488199501,3589420970&fm=26&gp=0.jpg",
|
// 获取成功
|
||||||
// 区域
|
this.content = JSON.parse(res.data.detail)
|
||||||
total_addr: "南区",
|
// console.log(this.content)
|
||||||
// 地点
|
load.close()
|
||||||
detail_addr: "南研1201",
|
} else {
|
||||||
// 联系方式（可选）
|
// 获取失败
|
||||||
contact_way: { type: "QQ", content: "1144131090" },
|
load.close()
|
||||||
// 评论
|
this.$message.error("服务器开小差了，请过段时间重试");
|
||||||
comment: [
|
console.log(res.data)
|
||||||
|
this.back()
|
||||||
]
|
}
|
||||||
};
|
}).catch(err => {
|
||||||
this.addComment()
|
load.close()
|
||||||
|
this.$message.error("服务器开小差了，请过段时间重试");
|
||||||
|
console.log(err)
|
||||||
|
this.back()
|
||||||
|
})
|
||||||
},
|
},
|
||||||
back() {
|
back() {
|
||||||
this.$router.go(-1);
|
this.$router.go(-1);
|
||||||
},
|
},
|
||||||
addComment() {
|
|
||||||
if (this.content.comment && this.content.comment.length!=0) return;
|
// 打开输入框
|
||||||
console.log("加入commnet");
|
openInput(comment_index, reply_index) {
|
||||||
this.content.comment = [
|
console.log(comment_index,reply_index)
|
||||||
|
this.show_footer = false
|
||||||
|
this.$prompt(
|
||||||
|
`请输入内容，为保证信息质量，该操作将实名制`,
|
||||||
|
"提示",
|
||||||
{
|
{
|
||||||
user_avatar: "http://img02.fs.yiban.cn/16515387/avatar/user/200",
|
confirmButtonText: "确定",
|
||||||
msg: "这可能是一个评论吧，应该就是了",
|
cancelButtonText: "取消",
|
||||||
user_nick: "英树",
|
inputPattern: /^[^\^\$\/\<\(\)]{3,}$/,
|
||||||
time: 1575256258182,
|
inputErrorMessage: "请勿输入特殊符号，至少3个字,"
|
||||||
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"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
];
|
)
|
||||||
}
|
.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() {
|
created() {
|
||||||
// 刷新vuex
|
// 刷新vuex
|
||||||
@ -191,7 +347,7 @@ export default {
|
|||||||
|
|
||||||
<style scoped lang="scss" type="text/scss">
|
<style scoped lang="scss" type="text/scss">
|
||||||
@import "../../style/main";
|
@import "../../style/main";
|
||||||
.personal {
|
.LAFDetail {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
@ -233,6 +389,13 @@ export default {
|
|||||||
font-size: 0.6rem;
|
font-size: 0.6rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.del-box {
|
||||||
|
right: 0;
|
||||||
|
left: auto;
|
||||||
|
.title-icon {
|
||||||
|
font-size: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
footer {
|
footer {
|
||||||
@ -240,7 +403,7 @@ export default {
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 1000;
|
z-index: 100;
|
||||||
.footer-w {
|
.footer-w {
|
||||||
border-top: 1px #eee solid;
|
border-top: 1px #eee solid;
|
||||||
display: flex;
|
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>
|
</style>
|
||||||
@ -6,7 +6,7 @@
|
|||||||
<i class="el-icon-refresh icon"></i>
|
<i class="el-icon-refresh icon"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="title-box">失物招领</div>
|
<div class="title-box">失物招领</div>
|
||||||
<div class="icon-box">
|
<div class="icon-box" @click="goToAdd()">
|
||||||
<i class="el-icon-plus icon"></i>
|
<i class="el-icon-plus icon"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -15,6 +15,7 @@
|
|||||||
<div class="search-warp">
|
<div class="search-warp">
|
||||||
<div class="search-box">
|
<div class="search-box">
|
||||||
<i class="el-icon-search icon"></i>
|
<i class="el-icon-search icon"></i>
|
||||||
|
<p>该功能开发中</p>
|
||||||
<!-- <input type="text" placeholder="输入物品名" /> -->
|
<!-- <input type="text" placeholder="输入物品名" /> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="submit">搜索</div>
|
<div class="submit">搜索</div>
|
||||||
@ -60,7 +61,8 @@ export default {
|
|||||||
"current_week",
|
"current_week",
|
||||||
"current_schedule",
|
"current_schedule",
|
||||||
"personalized",
|
"personalized",
|
||||||
"LAF_data"
|
"LAF_data",
|
||||||
|
'LAF_reflash'
|
||||||
]),
|
]),
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@ -69,7 +71,8 @@ export default {
|
|||||||
"setUserInfo",
|
"setUserInfo",
|
||||||
"setCurrentWeek",
|
"setCurrentWeek",
|
||||||
"setCurrentSchedule",
|
"setCurrentSchedule",
|
||||||
"setLAFData"
|
"setLAFData",
|
||||||
|
"setLAFReflash"
|
||||||
]),
|
]),
|
||||||
// 初始化
|
// 初始化
|
||||||
init() {
|
init() {
|
||||||
@ -83,7 +86,7 @@ export default {
|
|||||||
let now = new Date().getTime(); //毫秒级时间戳
|
let now = new Date().getTime(); //毫秒级时间戳
|
||||||
if (
|
if (
|
||||||
now - this.LAF_data.get_time < 1000 * 60 * 3 &&
|
now - this.LAF_data.get_time < 1000 * 60 * 3 &&
|
||||||
!this.need_reflash
|
!this.need_reflash && !this.LAF_reflash
|
||||||
) {
|
) {
|
||||||
// 上次获取的的时间是3分钟之内且无需刷新
|
// 上次获取的的时间是3分钟之内且无需刷新
|
||||||
return;
|
return;
|
||||||
@ -94,15 +97,49 @@ export default {
|
|||||||
target: document.querySelector(".laf")
|
target: document.querySelector(".laf")
|
||||||
});
|
});
|
||||||
getLAF().then(res => {
|
getLAF().then(res => {
|
||||||
console.log(res);
|
console.log(res.data);
|
||||||
let data = {
|
let data = res.data
|
||||||
lost: res.lost,
|
let laf
|
||||||
found: res.found,
|
if(data.lost.errcode == 200 && data.found.errcode == 200) {
|
||||||
get_time: new Date().getTime()
|
// 成功获取到信息
|
||||||
};
|
laf = {
|
||||||
this.setLAFData(data);
|
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));
|
localStorage.setItem("storeState", JSON.stringify(this.$store.state));
|
||||||
this.need_reflash = false;
|
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()
|
load.close()
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
@ -118,7 +155,10 @@ export default {
|
|||||||
this.need_reflash = true
|
this.need_reflash = true
|
||||||
this.getLAFData()
|
this.getLAFData()
|
||||||
},
|
},
|
||||||
|
// 点击详情
|
||||||
|
goToAdd(){
|
||||||
|
this.$router.push('/lafadd')
|
||||||
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.$store.replaceState(
|
this.$store.replaceState(
|
||||||
@ -245,9 +285,10 @@ export default {
|
|||||||
color: #989898;
|
color: #989898;
|
||||||
font-size: 0.3rem;
|
font-size: 0.3rem;
|
||||||
}
|
}
|
||||||
input {
|
input, p{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 0.7rem;
|
height: 0.7rem;
|
||||||
|
line-height: .7rem;
|
||||||
border: none;
|
border: none;
|
||||||
padding-left: 0.3rem;
|
padding-left: 0.3rem;
|
||||||
font-size: 0.3rem;
|
font-size: 0.3rem;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user