后端接口
var express = require('express');
const sql = require('../sql')
const Comment = require('../sql/collection/comments')
const User = require('../sql/collection/users')
const uuid = require('node-uuid');
const utils = require('./../utils');
var router = express.Router();
// 获取评论信息列表
router.get('/', function(req, res, next) {
let { proid } = req.query;
let arr = []
let comment = []
// 内部包含用户的信息，通过用户id 获取到所有的用户名，对应的相关评论，拼接数据
sql.find(Comment, { proid }, { _id: 0 }).then(data => {
comment = data
var promises = data.map((item, index) => {
return sql.find(User, { userid: item.userid }, { _id: 0 })
})
return Promise.all(promises)
}).then(list => {
console.log('comment', comment)
console.log('list', list)
list.map((item,index) => {
arr.push({
commentid: comment[index].commentid,
username: item[0].username,
text: comment[index].text,
rating: comment[index].rating,
file: comment[index].file,
flag: comment[index].flag,
time: comment[index].createtime
})
})
res.send({
code: '200',
data: arr
})
})
});
router.post('/add', (req, res, next) => {
var now = new Date();
var year = now.getFullYear(); //得到年份
var month = now.getMonth();//得到月份
var date = now.getDate();//得到日期
month = month + 1;
if (month < 10) month = "0" + month;
if (date < 10) date = "0" + date;
var time = "";
time = year + "-" + month + "-" + date;
let { userid, rating } = req.body;
rating = rating * 1 || 5
let list = JSON.parse(req.body.info)
for (let item of list) {
item.userid = userid,
item.commentid = 'comment_' + uuid.v1()
item.rating = rating
item.createtime = time
}
console.log(list)
sql.insert(Comment, ...list).then(() => {
res.send(utils.commentsuccess)
})
})
// router.post('/add',(req, res, next) => {
// let { userid, rating } = req.body
// rating = rating *1 || 5
// let list = JSON.parse(req.query.)
// })
module.exports = router;
sql/collection:
const mongoose = require('../db.js'); // 引入数据库连接模块
const Schema = mongoose.Schema; // 拿到当前数据库相应的集合对象
// 设计用户表的集合
const commentSchema = new Schema({ // 设计用户集合的字段以及数据类型
commentid: {type: String },
userid: { type: String },
proid: { type: String },
text: { type: String }, //评论内容
rating: { type: Number }, //评分
username: {type: String},
num: { type: Number },
price: { type: Number },
proimg: {type: String},
createtime:{ type: String}, // 发布时间
proname: {type: String},
createtime:{ type: String}, // 发布时间
file: {type: String},// 头像信息
flag: {type: String}//好、中、差评
})
module.exports = mongoose.model('Comment', commentSchema);
前端页面：
<template>
<div class="box">
<Header>
<div slot="center">我的评价</div>
<div slot="Icon"></div>
<div slot="release" class="release" @click="release(scorelist)">发布</div>
</Header>
<div class="content">
<ul>
<li v-for="item of scorelist[0]" :key="item.proid">
<div class="shopimg">
<img :src="item.proimg" alt="">
<p>{{ item.proname }}</p>
</div>
<div class="comment">
<p>整体评价
<i class="iconfont icon-haoping" :class="item.flag === 3 ? 'active' : ' '" @click="score(item,3)"></i><span>好评</span>
<i class="iconfont icon-zhongping" :class="item.flag === 2 ? 'active' : ' '" @click="score(item,2)"></i><span>中评</span>
<i class="iconfont icon-chaping" :class="item.flag === 1 ? 'active' : ' '" @click="score(item,1)"></i><span>差评</span>
<input type="hidden" v-model="hidden" >
</p>
</div>
<div class="evacontent">
<van-cell-group :key="item.proid">
<van-field
v-model="item.text"
rows="2"
autosize
type="textarea"
maxlength="100"
placeholder="你觉得产品好用吗？"
show-word-limit
:name="item.proid"
/>
</van-cell-group>
</div>
<div class="upload">
<van-uploader :after-read="afterRead" upload-text="添加照片"/>
</div>
<div class="anonymous">
<div class="checkbox">
<van-checkbox v-model="checked" checked-color="#ff9000">匿名</van-checkbox>
</div>
<p>你写的评价将会以匿名的方式展现</p>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
import axios from '@/utils/request'
import Header from '@/components/Header'
import Vue from 'vue'
import { Field, Uploader, Checkbox, CheckboxGroup, Rate, Toast, CellGroup } from 'vant'
Vue.use(Field)
Vue.use(CellGroup)
Vue.use(Uploader)
Vue.use(Checkbox).use(CheckboxGroup)
Vue.use(Rate)
Vue.use(Toast)
export default {
data () {
return {
name: '', // 每个文本域的单独的id
checked: true,
scorelist: [],
proid: '',
message: '',
hidden: 1
}
},
components: {
Header
},
created () {
axios.get('/order/evaluate?orderid=' + this.$route.query.orderid).then(res => {
let arr = []
res.data.data.map(item => {
arr.push(item.list)
})
this.scorelist = arr
console.log(this.scorelist)
for (let it of this.scorelist[0]) {
console.log(it)
it.text = ''
it.flag = 3
it.username = localStorage.getItem('username')
}
})
axios.get('headimg/getimg?userid=' + localStorage.getItem('userid')).then(res => {
let headimg = res.data.data[0].file
for (let it of this.scorelist[0]) {
it.file = headimg
}
})
},
methods: {
afterRead (file) {
// 此时可以自行将文件上传至服务器
console.log(file)
},
score (obj, index) {
obj.flag = index
console.log(this.scorelist[0])
console.log(obj)
this.hidden = Math.random()
},
release (scorelist) {
// console.log(scorelist)
// let note = []
scorelist[0].map(item => {
if (item.text === '') {
Toast('请填写内容')
} else {
console.log(scorelist[0])
// note.push(item.text)
let userid = localStorage.getItem('userid')
let orderid = this.$route.query.orderid
// console.log(userid)
// console.log(url)
axios.post('/comment/add', {
userid,
info: JSON.stringify(scorelist[0])
}).then(res => {
axios.get('order/updatestatus?orderid=' + orderid + '&status=' + 3).then(res => {
this.$router.back()
})
})
}
})
}
}
}
</script>
<style lang="scss">
@import '@/lib/reset.scss';
.box{
@include rect(100%,100%);
.release{
color:#d79968;margin-right:2px;font-weight:bold;@include rect(100%,100%);
}
.content{
@include rect(100%,100%);
ul{
@include rect(100%,100%);margin-bottom:.1rem;
li{
@include rect(100%,auto);@include background-color(#fff);@include flexbox();@include flex-direction(column);margin:.1rem 0 ;
.shopimg{@include flexbox();@include flex-direction();@include align-items();
padding:0 .1rem;
img{@include display(block); @include rect(.8rem,.8rem);margin:.05rem .1rem 0 0;border:1px solid #dcdcdc;}
p{color:#626262;}
}
.comment{
@include rect(100%,.5rem);margin-top:.1rem;@include flexbox();@include align-items();border-bottom:1px solid #dcdcdc;padding:0 .1rem;
p{
font-size:.18rem;color:#000;
i{font-size:.25rem;margin:0 .1rem 0 .25rem;display: inline-block;
@include color(#bfbfbf);}
.active{@include color(#f23030);}
span{font:.12rem/.5rem '';}
}
}
.evacontent{
margin-top:.1rem; @include rect(100%,auto);
}
.upload{
padding:0 .1rem; @include rect(100%,auto);
}
.anonymous{
border-top:1px solid #dcdcdc; padding:0 .1rem;@include rect(100%,.5rem);
@include flexbox();justify-content: space-between;@include align-items();
.checkbox{}
p{font:.14rem/.5rem '';@include color(#bfbfbf);}
}
}
}
}
}
</style>
vue之写发表评论思路的相关教程结束。
