From 63cacb57cc67585333ee02655afd45b574a67f78 Mon Sep 17 00:00:00 2001 From: RainSun Date: Thu, 13 Feb 2020 11:14:17 +0800 Subject: [PATCH] finish addlaf beta --- babel.config.js | 12 +- package.json | 1 + src/App.vue | 2 +- src/axios/api.js | 75 +-- src/axios/fetch.js | 6 +- src/components/Comment.vue | 202 ++++---- src/components/FooterNav.vue | 4 +- src/components/InfoCard.vue | 10 +- src/components/LAFCard.vue | 11 +- src/main.js | 2 + src/router/index.js | 6 + src/store/index.js | 11 + src/style/main.scss | 4 + src/views/Schedule.vue | 1 + src/views/lostandfound/LAFAdd.vue | 627 ++++++++++++++++++++++++ src/views/lostandfound/LAFDetail.vue | 419 ++++++++++++---- src/views/lostandfound/LostAndFound.vue | 67 ++- 17 files changed, 1202 insertions(+), 258 deletions(-) create mode 100644 src/views/lostandfound/LAFAdd.vue diff --git a/babel.config.js b/babel.config.js index 40218d4..a71ba33 100644 --- 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，需要单独导入需要的插件 [ diff --git a/package.json b/package.json index 0777406..5c4ef66 100644 --- 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", diff --git a/src/App.vue b/src/App.vue index e1e6408..7a649b3 100644 --- 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( diff --git a/src/axios/api.js b/src/axios/api.js index ad53e81..a52a1a6 100644 --- 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) +} \ No newline at end of file diff --git a/src/axios/fetch.js b/src/axios/fetch.js index 28868da..4d4532e 100644 --- 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 }) diff --git a/src/components/Comment.vue b/src/components/Comment.vue index 0481469..50efef2 100644 --- a/src/components/Comment.vue +++ b/src/components/Comment.vue @@ -1,33 +1,31 @@ + + \ No newline at end of file diff --git a/src/views/lostandfound/LAFDetail.vue b/src/views/lostandfound/LAFDetail.vue index 14e8d9c..58ca911 100644 --- a/src/views/lostandfound/LAFDetail.vue +++ b/src/views/lostandfound/LAFDetail.vue @@ -1,25 +1,46 @@ @@ -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 { \ No newline at end of file diff --git a/src/views/lostandfound/LostAndFound.vue b/src/views/lostandfound/LostAndFound.vue index 8da217d..a2991ff 100644 --- a/src/views/lostandfound/LostAndFound.vue +++ b/src/views/lostandfound/LostAndFound.vue @@ -6,7 +6,7 @@
失物招领
-
+
@@ -15,6 +15,7 @@
+

该功能开发中

搜索
@@ -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;