uniapp商城评论组件（带星）
一、components下新建文件夹xiujun-evaluate，放入iconfont.css、uni-evaluate.vue文件
iconfont.css文件代码
@font-face {
font-family: 'iconfont'; / project id 1237225 /
src: url('https://at.alicdn.com/t/font_1237225_y90nldmnpij.eot');
src: url('https://at.alicdn.com/t/font_1237225_y90nldmnpij.eot?#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_1237225_y90nldmnpij.woff2') format('woff2'),
url('https://at.alicdn.com/t/font_1237225_y90nldmnpij.woff') format('woff'),
url('https://at.alicdn.com/t/font_1237225_y90nldmnpij.ttf') format('truetype'),
url('https://at.alicdn.com/t/font_1237225_y90nldmnpij.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-pingjia-copy:before {
content: "\e640";
}
.icon-xingxing:before {
content: "\e870";
}
uni-evaluate.vue代码
<template>
<view class="evaluateBox">
<view class="evaluate-header">
<view class="title">
<text v-if="isShowIcon&&level==1" class="iconfont" style="color:#999"></text>
<text v-if="isShowTotal&&level==1" style="margin-left: 10upx;">商品评价 ({{ allNum }})</text>
<text v-if="isShowTotal&&level==2" style="margin-left: 10upx;">全部评论 ({{ allNum }})</text>
</view>
<!-- <view class="total">
<view class="stars">
<view class="stars-normal">
<view class="box">
<block v-for="i in 5" :key="i"><text class="iconfont"></text></block>
</view>
</view>
<view class="stars-selected" :style="{ width: (rate / 5) * 100 + '%' }">
<view class="box">
<block v-for="j in 5" :key="j"><text class="iconfont"></text></block>
</view>
</view>
</view>
<text>{{ rate }}{{ (rate * 10) % 10 == 0 ? '.0' : '' }}</text>
</view> -->
</view>
<view class="lists" v-if="listData&&listData.length > 0">
<block v-for="(item, index_) in listData" :key="index_">
<view class="item">
<view class="icon">
<image :src="item.avatar" mode="widthFix" style="width:100%" />
</view>
<view class="info">
<view class="name-time">
<text class="name">{{ item.userName }}</text>
<view class="stars" v-if="level==1">
<view class="stars-normal">
<view class="box">
<block v-for="i_ in 5" :key="i_"><!-- <text class="yticon cuIcon-favorfill" style="color: #D8D8D8;"></text> --><text class="iconfont"></text></block>
</view>
</view>
<view class="stars-selected" :style="{ width: (item.contentStar / 5) * 100 + '%' }">
<view class="box">
<block v-for="j_ in 5" :key="j_"><!-- <text class="yticon cuIcon-favorfill" style="color: #ED1C24;"></text> --><text class="iconfont"></text></block>
</view>
</view>
</view>
</view>
<view class="time">{{ item.createTime }}</view>
<view class="evaluate-content">
<text v-if="item.pid!=pid" decode=true space=nbsp>
@
<text v-for="(item1, index1_) in listData" :key="index1_" v-if="item1.pid==item.pid">
{{item.userName}}
</text>
</text>
<text>{{ item.content || '用户暂未评价' }}</text>
<view class="imgs" v-if="item.picsUrl">
<block v-for="(imgurl, index) in item.picsUrl.split(',')" :key="index">
<view class="imgs-box">
<image :src="imgurl" mode="aspectFit" style="width: 100%;height: 100upx;" @click="previewImg(imgurl,item.picsUrl.split(','))"></image>
</view>
</block>
</view>
<view class="comAndlike">
<text class="yticon cuIcon-comment isconmments" v-if="level==1" @click="goComments(item)"></text>
<text class="yticon cuIcon-comment isconmments" v-if="level==2" @click="goLocalComments(item)"></text>
<text v-if="item.replyComments&&item.replyComments.length>0"> {{item.replyComments.length}} </text>
<text class="yticon cuIcon-likefill islike" @click="goLike(item.id)" v-if="item.isVote=='1'"></text>
<text class="yticon cuIcon-like islike" @click="goLike(item.id)" v-else></text>
<text v-if="item.upVote&&item.upVote>0"> {{item.upVote}} </text>
</view>
</view>
</view>
</view>
</block>
</view>
<view class="no-lists" v-else>暂无评论</view>
</view>
</template>
<script>
//数据模拟
//import data from './list.js';
export default {
props: {
//如果有父id
pid: {
type: Number,
default: 0
},
//总评价数
allNum: {
type: Number,
default: 0
},
//评价列表数据
listData: {
type: Array,
default: []
},
//是否显示总评价数量
isShowTotal: {
type: Boolean,
default: true
},
//是否显示评价前面的图标
isShowIcon: {
type: Boolean,
default: true
},
//总评分
rate: {
type: Number,
default: 4.6
},
//第几级评论
level:{
type: Number,
default: 0
},
},
data() {
return {}
},
methods: {
previewImg(src, urls) {
uni.previewImage({
current: src,
urls
})
},
//前往二级评价
goComments(item) {
this.$navigateTo(`/pages/goods/twoComments?commentId=`+item.id+'&orderId='+item.orderId);
},
//点赞评价
goLike(id) {
//点赞当前评价接口
this.$emit('goLikeComment', id);
},
//发表二级评价
goLocalComments(item){
console.log(item.id)
//点赞当前评价接口
this.$emit('goLocalComments', item);
}
}
};
</script>
<style scoped>
@import './iconfont.css';
.evaluateBox {
width: 100%;
margin-bottom: 120upx;
}
.evaluate-header {
width: 100%;
height: 80upx;
display: flex;
justify-content: space-between;
padding: 20upx;
align-items: center;
margin-bottom: 12upx;
box-sizing: border-box;
border-bottom: 1upx solid #e5e5e5;
}
.evaluateBox .title {
display: flex;
align-items: center;
color: #000000;
font-size: 30upx;
}
.total {
/ flex: 1; /
height: 100%;
font-size: 30upx;
color: #d76d9d;
display: flex;
align-items: center;
justify-content: flex-end;
}
.stars {
width: 180upx;
height: 36upx;
position: relative;
}
.stars .box {
width: 180upx;
}
.stars-normal {
width: 100%;
position: absolute;
left: 0;
top: 0;
color: #ccc;
}
.stars-selected {
position: absolute;
left: 0;
top: 0;
z-index: 1;
color: #fde16d;
overflow: hidden;
}
.stars-selected .iconfont,
.stars-normal .iconfont {
font-size: 36upx;
}
.lists .item {
padding: 20upx;
display: flex;
/ height: auto; /
/ align-items: center; /
font-size: 22upx;
color: #999;
}
.lists .item .icon {
width: 60upx;
height: 60upx;
border-radius: 50%;
overflow: hidden;
margin-right: 26upx;
/ align-self: flex-start; /
}
.lists .item .info {
flex: 1;
font-size: 26upx;
color: #666;
}
.info .name-time {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 6upx;
}
.lists .info .stars {
width: 140upx;
}
.info .stars-normal .iconfont,
.info .stars-selected .iconfont {
font-size: 28upx;
}
.info .stars .box {
width: 140upx;
}
.lists .info .evaluate-content {
color: #000;
font-size: 28upx;
text-align: left;
padding-top: 6upx;
}
.info .evaluate-content .imgs {
display: flex;
flex-wrap: wrap;
padding-top: 6upx;
}
.evaluate-content .imgs .imgs-box {
width: 25%;
padding-right: 10upx;
box-sizing: border-box;
}
/* .evaluate-content .imgs .imgs-box:nth-child(4n+1){
padding-left: 0;
}
.evaluate-content .imgs .imgs-box:nth-child(4n){
padding-right: 0;
} */
.no-lists {
padding: 20upx 0;
text-align: center;
font-size: 24upx;
color: #666;
}
.comAndlike {
text-align: right;
}
.islike {
margin-left: 10upx;
}
</style>
二、使用组件
一级评论页面comments.vue代码
<template>
<view>
<uni-evaluate @goLikeComment="goLikeComment" :allNum="allNum" :level="level" :listData="commentList" :rate="rate" />
<view v-show="isLoadMore">
<uni-load-more :status="loadingType"></uni-load-more>
</view>
</view>
</template>
<script>
import uniEvaluate from '../../components/xiujun-evaluate/uni-evaluate.vue';
export default {
components: {
uniEvaluate
},
data() {
return {
id: "",
commentText2: '', //底部评论内容
bottomshow: true, //控制底部评论收藏数的显示，输入评论时不显示
ishowInput: false, //控制底部输入框是否自动获取焦点
replyInput: false, //控制点击评论时显示回复
rate: 100,
level: 1,
isLoadMore: false, //是否加载中
loadingType: 'loading',
pageNum: 1,
pageSize: 10,
allNum:0,
allpage:0,
commentList: [
// {
// id: 1,
// header_img: "http://qpf79y6n0.hb-bkt.clouddn.com/2abfc891f84ffadd670af3d01995d463.png",
// user_name: "测试1",
// rate: 5,
// create_time: "2019-04-12",
// content: "好评",
// isLike: false,
// imgs: [
// 'http://qpf79y6n0.hb-bkt.clouddn.com/103a5fbb18ef89076273903062c349c3.jpg',
// 'http://qpf79y6n0.hb-bkt.clouddn.com/e5428cfdbd0546909a5e576538efcf2d.jpg',
// 'http://qpf79y6n0.hb-bkt.clouddn.com/2abfc891f84ffadd670af3d01995d463.png',
// 'http://qpf79y6n0.hb-bkt.clouddn.com/2abfc891f84ffadd670af3d01995d463.png',
// 'http://qpf79y6n0.hb-bkt.clouddn.com/2abfc891f84ffadd670af3d01995d463.png',
// ],
// list: [{
// id: 1,
// header_img: "http://qpf79y6n0.hb-bkt.clouddn.com/2abfc891f84ffadd670af3d01995d463.png",
// user_name: "测试1",
// rate: 5,
// create_time: "2019-04-12",
// content: "好评",
// isLike: false
// }]
// },
// {
// id: 2,
// content: "中评",
// create_time: "2019-04-12",
// header_img: "http://qpf79y6n0.hb-bkt.clouddn.com/2abfc891f84ffadd670af3d01995d463.png",
// user_name: "测试2",
// rate: 4,
// isLike: false,
// // imgs:[]
// },
// {
// id: 3,
// content: "",
// create_time: "2019-04-12",
// header_img: "http://qpf79y6n0.hb-bkt.clouddn.com/2abfc891f84ffadd670af3d01995d463.png",
// user_name: "测试3",
// rate: 2,
// isLike: false,
// // imgs:[]
// }, {
// id: 4,
// content: "好评",
// create_time: "2019-04-12",
// header_img: "http://qpf79y6n0.hb-bkt.clouddn.com/2abfc891f84ffadd670af3d01995d463.png",
// user_name: "测试4",
// rate: 5,
// isLike: false,
// imgs: [
// 'http://qpf79y6n0.hb-bkt.clouddn.com/103a5fbb18ef89076273903062c349c3.jpg',
// 'http://qpf79y6n0.hb-bkt.clouddn.com/e5428cfdbd0546909a5e576538efcf2d.jpg',
// 'http://qpf79y6n0.hb-bkt.clouddn.com/2abfc891f84ffadd670af3d01995d463.png',
// 'http://qpf79y6n0.hb-bkt.clouddn.com/2abfc891f84ffadd670af3d01995d463.png',
// 'http://qpf79y6n0.hb-bkt.clouddn.com/2abfc891f84ffadd670af3d01995d463.png',
// ]
// },
// {
// id: 5,
// content: "中评",
// create_time: "2019-04-12",
// header_img: "http://qpf79y6n0.hb-bkt.clouddn.com/2abfc891f84ffadd670af3d01995d463.png",
// user_name: "测试5",
// rate: 3.5,
// isLike: false,
// // imgs:[]
// },
// {
// id: 6,
// content: "",
// create_time: "2019-04-12",
// header_img: "http://qpf79y6n0.hb-bkt.clouddn.com/2abfc891f84ffadd670af3d01995d463.png",
// user_name: "测试6",
// rate: 2.3,
// // imgs:[]
// }
], //评论
commentItmeId: 0, //评论按钮点击后的id
placeholder: '说点什么了.......', //控制底部输入框的提示信息
commentId: 0, //记录回复点击的评论id
replyId: 0,
isLoading: false, //是否加载中
userInfo:{
"id":-1
},
}
},
onLoad: function(e) {
var _this = this;
if (e.id) {
_this.id = e.id; //e.id;
_this.getCommentList();
this.userInfo=this.getUser();
}
},
onReachBottom() { //上拉触底函数
if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
this.isLoadMore = true
this.pageNum += 1
console.log(this.pageNum)
this.getCommentList();
}
},
methods: {
/**
* 获取评论集合
*/
getCommentList: function() {
let _this = this;
_this.commentId = 0;
_this.commentItmeId = 0;
_this.$post("api/pms/comment/getCommentList", {
productId: _this.id,
pageNum: _this.pageNum,
pageSize: _this.pageSize,
}, (res) => {
console.log(res)
if (res.code == 0) {
_this.allNum=res.data.allNum;
_this.allpage=res.data.allpage;
var list = res.data.list;
for (var i = 0; i < list.length; i++) {
if (list[i].avatar != '' && list[i].avatar != null && list[i].avatar.indexOf("http") == -1) {
list[i].avatar = _this.$host + list[i].avatar;
}
if(list[i].pid&&list[i].type==0){
list.remove(i,1);
}
}
if (list) {
_this.commentList = _this.commentList.concat(list)
if (_this.pageNum >= _this.allpage) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
_this.isLoadMore = true
_this.loadingType = 'nomore'
} else {
_this.isLoadMore = false
}
} else {
_this.isLoadMore = true
_this.loadingType = 'nomore'
}
} else {
_this.isLoadMore = false
if (_this.pageNum > 1) {
_this.pageNum -= 1
}
_this.$uniApi.showToastNoIcon("网络繁忙！");
}
}, res => {
uni.showToast({
title: '服务器开小差了呢，请您稍后再试',
icon: 'none'
})
this.isLoadMore = false
if (this.pageNum > 1) {
this.pageNum -= 1
}
console.log(err)
})
},
/**
* 点赞评论
*/
goLikeComment: function(id) {
console.log('goLikeComment')
console.log(id)
console.log(this.commentList)
let _this = this;
console.log(_this.userInfo)
if(_this.userInfo.userId&&_this.userInfo.userId!=-1){//用户存在
_this.$post("api/pms/comment/updateCommentVote", {
id: id,
}, (res) => {
console.log(res)
if (res.code == 0) {
uni.showToast({
title: '操作成功',
icon: 'none'
})
}else{
_this.$uniApi.showToastNoIcon("网络繁忙！");
}
}, res => {
uni.showToast({
title: '服务器开小差了呢，请您稍后再试',
icon: 'none'
})
this.isLoadMore = false
if (this.pageNum > 1) {
this.pageNum -= 1
}
console.log(err)
})
for (var i = 0; i < _this.commentList.length; i++) {
if (_this.commentList[i].id == id) {
if(_this.commentList[i].isVote=='1'){
_this.commentList[i].isVote = '0';
}else{
_this.commentList[i].isVote = '1';
}
}
}
}else{
uni.showToast({
title: '未登录！',
icon: 'none'
})
}
console.log(this.commentList)
}
}
}
</script>
<style lang="scss">
page {
background-color: #FFFFFF;
}
.avatar {
width: 68upx;
height: 68upx;
image {
width: 100%;
height: 100%;
border-radius: 100px;
}
}
.commentList {
padding: 20upx;
.text-b5c1d2 {
color: #b5c1d2;
}
.comment-item {
padding-bottom: 30upx;
.commentText {
flex: 1;
margin-left: 20upx;
.reply {
background-color: #f5f5f5;
padding: 5upx;
margin-top: 20upx;
.comment-text {
word-wrap: break-word;
word-break: break-all;
}
}
.comment-time {
padding: 10upx 5upx;
.cuIcon-comment {
margin-right: 15upx;
}
}
}
}
}
.bottom-view {
position: fixed;
width: 750upx;
height: 100upx;
bottom: 0;
padding: 0 50upx;
border-top: 1px solid #e5e6eb;
.commentText {
flex: 1;
input {
background-color: #e5e6eb;
height: 1.8em;
line-height: 1.8em;
padding: 0 10upx;
border-radius: 50px;
}
}
.flex {
view {
margin-left: 20upx;
}
}
.pl {
margin-left: 20upx;
}
}
</style>
二级评论页面twoComments.vue代码
<template>
<view>
<uni-evaluate @goLikeComment="goLikeComment" :pid="commentsId" :allNum="allNum" @goLocalComments="goLocalComments" :level="level" :listData="commentList" :rate="rate" />
<!-- <view class="commentList">
<view class="comment-item flex" v-for="(item,index) in commentList" :key="index">
<view class="avatar">
<image :src="item.avatar||'../../static/default/15.png'"></image>
</view>
<view class="commentText font-28">
<view class="text-gray">{{item.userName}}</view>
<view>{{item.content}}</view>
<view class="reply font-26" v-if="item.replyComments.length>0">
<view v-for="(it,i) in item.replyComments" :key="i">
<view class="comment-text">
<text class="text-b5c1d2">{{it.userName}}：</text>
<text v-if="it.pid!=item.id">回复</text>
<text class="text-b5c1d2" :decode="true" v-if="it.pid!=item.id"> @{{it.parentNickname}}：</text>
<text @click="showInput2(it.userName,it.id)">{{it.content}}</text>
</view>
</view>
</view>
<view class="text-gray comment-time font-23 flex justify-between">
<view>{{item.createTime.substring(5,16)}}</view>
<view class="flex">
<view class="cuIcon-comment" @click="showInput(item.id)">
<text class="text-white">.</text><!-- 白点占位
</view>
<view class="cuIcon-likefill" :class="item.isVote==1?'text-red':'text-gray'">{{item.upVote}}</view>
</view>
</view>
</view>
</view>
</view> -->
<view v-show="isLoadMore">
<uni-load-more :status="loadingType"></uni-load-more>
</view>
<view style="height: 120upx;"></view>
<view class="bottom-view bg-white flex align-center justify-between">
<view class="commentText">
<input type="text" :focus='ishowInput' v-model="commentText2" cursor-spacing="10" confirm-type="done" @focus="hideBottom"
@blur="showBottom" :placeholder="placeholder" placeholder-class="font-26" />
</view>
<view v-if="!bottomshow&&commentText2!=''&&!replyInput" class="pl">
<view class="text00CBFF font-30" @click="setComment()">评论</view>
</view>
<view v-if="!bottomshow&&commentText2!=''&&replyInput" class="pl">
<view class="text00CBFF font-30" @click="setCommentUp()">回复</view>
</view>
</view>
</view>
</template>
<script>
import uniEvaluate from '../../components/xiujun-evaluate/uni-evaluate.vue';
export default {
components: {
uniEvaluate
},
data() {
return {
id: "",
commentText2: '', //底部评论内容
bottomshow: true, //控制底部评论收藏数的显示，输入评论时不显示
ishowInput: false, //控制底部输入框是否自动获取焦点
replyInput: false, //控制点击评论时显示回复
rate: 100,
level:2,
isLoadMore: false, //是否加载中
loadingType: 'loading',
commentList: [
// {
// id: 1,
// header_img: "http://qpf79y6n0.hb-bkt.clouddn.com/2abfc891f84ffadd670af3d01995d463.png",
// user_name: "测试1",
// rate: 5,
// create_time: "2019-04-12",
// content: "好评",
// isLike:false,
// },
// {
// id:2,
// content: "中评",
// create_time: "2019-04-12",
// header_img: "http://qpf79y6n0.hb-bkt.clouddn.com/2abfc891f84ffadd670af3d01995d463.png",
// user_name: "测试2",
// rate: 4,
// isLike:false,
// // imgs:[]
// },
// {
// id:3,
// content: "",
// create_time: "2019-04-12",
// header_img: "http://qpf79y6n0.hb-bkt.clouddn.com/2abfc891f84ffadd670af3d01995d463.png",
// user_name: "测试3",
// rate: 2,
// isLike:false,
// // imgs:[]
// }, {
// id:4,
// content: "好评",
// create_time: "2019-04-12",
// header_img: "http://qpf79y6n0.hb-bkt.clouddn.com/2abfc891f84ffadd670af3d01995d463.png",
// user_name: "测试4",
// rate: 5,
// isLike:false,
// },
// {
// id:5,
// content: "中评",
// create_time: "2019-04-12",
// header_img: "http://qpf79y6n0.hb-bkt.clouddn.com/2abfc891f84ffadd670af3d01995d463.png",
// user_name: "测试5",
// rate: 3.5,
// isLike:false,
// // imgs:[]
// },
// {
// id:6,
// content: "",
// create_time: "2019-04-12",
// header_img: "http://qpf79y6n0.hb-bkt.clouddn.com/2abfc891f84ffadd670af3d01995d463.png",
// user_name: "测试6",
// rate: 2.3,
// // imgs:[]
// }
], //评论
commentItmeId: 0, //评论按钮点击后的id
placeholder: '说点什么了.......', //控制底部输入框的提示信息
commentId: 0, //记录回复点击的评论id
replyId: 0,
isLoading: false, //是否加载中
userInfo:{
"id":-1
},
pageNum: 1,
pageSize: 4,
allNum:0,
allpage:0,
commentsId:'',
orderId:'',
}
},
onLoad: function(e) {
var _this = this;
console.log(e)
if (e.commentId&&e.orderId) {
//_this.id = 124; //e.id;
_this.commentsId=e.commentId
_this.orderId=e.orderId
_this.getCommentList();
this.userInfo=this.getUser();
}
},
onReachBottom() { //上拉触底函数
if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
this.isLoadMore = true
this.page += 1
this.getCommentList();
}
},
methods: {
/**
* 底部回复
*/
setCommentUp: function() {
var _this = this;
var _this = this;
_this.$post("api/pms/comment/addConmment", {
orderId: _this.orderId,
pid:_this.commentId,
content:_this.commentText2,
contentStar:0
}, (res) => {
console.log(res)
if (res.code == 0) {
uni.hideLoading()
uni.showToast({title: '提交成功！'})
_this.getCommentList();
//this.$navigateTo(`/pages/goods/twoComments?commentId=`+_this.commentsId+'&orderId='+_this.orderId);
} else {
uni.hideLoading()
_this.$uniApi.showToastNoIcon("网络繁忙！");
}
}, res => {
uni.hideLoading()
uni.showToast({title: '服务器开小差了呢，请您稍后再试',icon:'none'})
console.log(res.msg)
})
},
/**
* 评论
*/
setComment: function(id) {
var _this = this;
_this.$post("api/pms/comment/addConmment", {
orderId: _this.orderId,
pid:_this.commentsId,
content:_this.commentText2,
contentStar:0
}, (res) => {
console.log(res)
if (res.code == 0) {
uni.hideLoading()
uni.showToast({title: '提交成功！'})
_this.getCommentList();
//this.$navigateTo(`/pages/goods/twoComments?commentId=`+_this.commentsId+'&orderId='+_this.orderId);
} else {
uni.hideLoading()
_this.$uniApi.showToastNoIcon("网络繁忙！");
}
}, res => {
uni.hideLoading()
uni.showToast({title: '服务器开小差了呢，请您稍后再试',icon:'none'})
console.log(res.msg)
})
},
/**
* 获取评论集合
*/
getCommentList: function() {
var _this = this;
_this.commentId = 0;
_this.commentItmeId = 0;
console.log(_this.commentsId)
_this.$post("api/pms/comment/getCommentListById", {
id: _this.commentsId,
}, (res) => {
console.log(res)
if (res.code == 0) {
var list = res.data.productCommentList.replyComments;
_this.allNum=res.data.productCommentList.replyComments.length?res.data.productCommentList.replyComments.length:0;
//_this.allpage=res.data.productCommentList.allpage;
console.log(list)
for (var i = 0; i < list.length; i++) {
if (list[i].avatar != '' && list[i].avatar != null && list[i].avatar.indexOf("http") == -1) {
list[i].avatar = _this.$host + list[i].avatar;
}
// if(list[i].pid!=_this.commentsId){
// list.splice(i,1)
// }
}
if (list) {
_this.commentList = list;//_this.commentList.concat(list)
if (_this.pageNum >= _this.allpage) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
_this.isLoadMore = true
_this.loadingType = 'nomore'
} else {
_this.isLoadMore = false
}
} else {
_this.isLoadMore = true
_this.loadingType = 'nomore'
}
} else {
_this.isLoadMore = false
if (_this.pageNum > 1) {
_this.pageNum -= 1
}
_this.$uniApi.showToastNoIcon("网络繁忙！");
}
}, res => {
uni.showToast({
title: '服务器开小差了呢，请您稍后再试',
icon: 'none'
})
this.isLoadMore = false
if (this.pageNum > 1) {
this.pageNum -= 1
}
console.log(res)
})
},
/**
* 点击评论内容时触发回复
*/
showInput2: function(name, id) {
var _this = this;
_this.commentId = id;
setTimeout(function() {
_this.commentText2 = '';
_this.placeholder = "回复 @" + name;
_this.replyInput = true;
_this.ishowInput = true;
}, 50)
},
/**
* 点击评论下的评论图标触发显示
*/
showInput: function(id) {
var _this = this;
_this.commentItmeId = id;
setTimeout(function() {
_this.commentText2 = '';
_this.placeholder = "评论点啥了......";
_this.replyId = id;
_this.replyInput = false;
_this.ishowInput = true;
}, 50)
},
/**
* 点击底部输入框时收起评论数
*/
hideBottom: function() {
/* this.placeholder="说点什么了......"; */
this.bottomshow = false
},
/**
* 底部输入框失去焦点时有评论内容时显示评论按钮
*/
showBottom: function() {
var _this = this;
_this.ishowInput = false;
if (_this.commentText2 == '') {
_this.bottomshow = true
}
},
/**
* 点赞评论
*/
goLikeComment: function(id) {
console.log('goLikeComment')
console.log(id)
console.log(this.commentList)
let _this = this;
console.log(_this.userInfo)
if(_this.userInfo.userId&&_this.userInfo.userId!=-1){//用户存在
_this.$post("api/pms/comment/updateCommentVote", {
id: id,
}, (res) => {
console.log('updateCommentVote',res)
if (res.code == 0) {
uni.showToast({
title: '操作成功',
icon: 'none'
})
}else{
_this.$uniApi.showToastNoIcon("网络繁忙！");
}
}, res => {
uni.showToast({
title: '服务器开小差了呢，请您稍后再试',
icon: 'none'
})
this.isLoadMore = false
if (this.pageNum > 1) {
this.pageNum -= 1
}
console.log(err)
})
for (var i = 0; i < _this.commentList.length; i++) {
if (_this.commentList[i].id == id) {
if(_this.commentList[i].isVote=='1'){
_this.commentList[i].isVote = '0';
}else{
_this.commentList[i].isVote = '1';
}
}
}
}else{
uni.showToast({
title: '未登录！',
icon: 'none'
})
}
console.log(this.commentList)
},
/**
* 发表二级评价
*/
goLocalComments: function(item) {
console.log('goLikeComment')
console.log(item)
this.showInput2(item.userName,item.id);
//this.commentList=this.commentList.concat(this.commentList);
console.log(this.commentList)
},
}
}
</script>
<style lang="scss">
page {
background-color: #FFFFFF;
}
.avatar {
width: 68upx;
height: 68upx;
image {
width: 100%;
height: 100%;
border-radius: 100px;
}
}
.commentList {
padding: 20upx;
.text-b5c1d2 {
color: #b5c1d2;
}
.comment-item {
padding-bottom: 30upx;
.commentText {
flex: 1;
margin-left: 20upx;
.reply {
background-color: #f5f5f5;
padding: 5upx;
margin-top: 20upx;
.comment-text {
word-wrap: break-word;
word-break: break-all;
}
}
.comment-time {
padding: 10upx 5upx;
.cuIcon-comment {
margin-right: 15upx;
}
}
}
}
}
.bottom-view {
position: fixed;
width: 750upx;
height: 100upx;
bottom: 0;
padding: 0 50upx;
border-top: 1px solid #e5e6eb;
.commentText {
flex: 1;
input {
background-color: #e5e6eb;
height: 1.8em;
line-height: 1.8em;
padding: 0 10upx;
border-radius: 50px;
}
}
.flex {
view {
margin-left: 20upx;
}
}
.pl {
margin-left: 20upx;
}
}
</style>
提交一级评论页面addComments.vue代码（uploadImg组件参考uniapp上传多图片组件）
<template>
<view class='issue'>
<view class="issue-head">
<slot name="headPic"></slot>
<image v-if="headPicShow" :src="headPicValue" class="issue-head-pic" mode=""></image>
<text v-if="headTitleShow" class="issue-head-title">{{headTitleValue.slice(0,5)}}</text>
<view class="issue-head-star-box" v-if="starsShow">
<image v-for="(item,index) in starsMax" :key="index" :src="(index+1)>score?starDefault:starActive" :class="score==index+1?'active':''"
mode="" @click="setScore(index+1)"></image>
</view>
</view>
<textarea v-if="textareaShow" @blur="blur" :value="textareaValue" :placeholder="textareaPlaceholder" />
<view class="uploadMoreImg">
<uploadImg ref='uploadImg' :mode="imgList" @chooseFile='chooseFile' @imgDelete='imgDelete' :control='control' :columnNum="columnNum">
</uploadImg>
</view>
<view class="issue-btn-box">
<button v-if="submitShow" class="submit-btn" type="primary" @click="doSubmit">{{submitText}}</button>
<slot name="submit"></slot>
</view>
</view>
</template>
<script>
import uploadImg from '../../components/more-uploadImg/uploadImg.vue';
export default {
components: {
uploadImg
},
data() {
let _conf=this.getConst();
return {
conf:_conf,
orderId:'-1',
imgList: [],
control:true,//是否显示上传图片
columnNum:5,//图片张数
key:3,
starsDisabled:false,
headPicShow:'',//图片
headPicValue:require('@/static/img/st_pic.png'),
headTitleShow:'提交评价',//标题
headTitleValue:'评价分数',
starsShow:true,
starsMax:5,
starDefault:require('@/static/img/st_star.png'),
starActive:require('@/static/img/st_star_active.png'),
score:0,
starsDisabled:false, //是否禁用star
textareaShow:true,// 多行文本显示
textareaPlaceholder:"宝贝满足你的期待吗？说说你的使用心得，分享给想买的他们吧",
submitShow:true,
submitText:"发布",
textareaValue:'',
upimgList:''
}
},
onLoad(o) {
this.orderId=o.orderId;
},
methods: {
/**
* @name 设置分数
*/
setScore(score){
if(this.starsDisabled!==false)return
this.score=score
//this.$emit("scoreChange",score)
},
/**
* @name 获取textarea内容
*/
blur(e){
this.textareaValue=e.detail.value
},
/**
* @name 提交
*/
doSubmit(){
let _this = this;
// if(!_this.textareaValue||_this.textareaValue==''){
// _this.$uniApi.showToastNoIcon("评论内容必填！");
// return;
// }
//上传图片并提交
//提交内容
uni.showLoading({
"title": "提交中"
});
if(_this.imgList.length>0){
console.log('_this.imgList',_this.imgList);
for (var i = 0; i < _this.imgList.length; i++) {
uni.uploadFile({
method: "POST",
url: _this.conf.baseuri+"api/pms/comment/uploadPic", //仅为示例，非真实的接口地址
filePath: _this.imgList[i],
name: 'file',
header: {
'token': uni.getStorageSync('token'),
},
success: (uploadFileRes) => {
console.log('uploadFileRes.data',JSON.parse(uploadFileRes.data));
console.log(JSON.parse(uploadFileRes.data).data.picUrl);
var upimgList1='';
if(i==1){
upimgList1=_this.conf.baseuri+JSON.parse(uploadFileRes.data).data.picUrl;
}else{
upimgList1=upimgList1+','+_this.conf.baseuri+JSON.parse(uploadFileRes.data).data.picUrl;
}
if(i++==_this.imgList.length){
console.log('upimgList1=====',upimgList1)
_this.$post("api/pms/comment/addConmment", {
orderId: _this.orderId,
//pid:null,
content:_this.textareaValue,
picsUrl :upimgList1,
contentStar:_this.score,
}, (res) => {
console.log(res)
if (res.code == 0) {
uni.hideLoading()
uni.showToast({title: '提交成功！'})
uni.navigateBack({//返回
delta: 1
})
} else {
uni.hideLoading()
_this.$uniApi.showToastNoIcon("网络繁忙！");
}
}, res => {
uni.hideLoading()
uni.showToast({title: '服务器开小差了呢，请您稍后再试',icon:'none'})
console.log(res.msg)
})
}
},
fail: function(res) {
uni.showToast({
title: "网络异常",
icon: 'none',
duration: 1000
});
uni.hideLoading();
}
});
}
// _this.$uploadImg(_this.imgList,res=>{
// console.log('$uploadImg',res);
// }, res => {
// uni.showToast({title: '上传图片失败！',icon:'none'})
// console.log(res.msg)
// })
}else{
//提交内容
uni.showLoading({
"title": "提交中"
});
_this.$post("api/pms/comment/addConmment", {
orderId: _this.orderId,
//pid:null,
content:_this.textareaValue,
//picsUrl :'',
contentStar:_this.score,
}, (res) => {
console.log(res)
if (res.code == 0) {
uni.hideLoading()
uni.showToast({title: '提交成功！'})
this.$navigateTo(`/pages/user/user`);
} else {
uni.hideLoading()
_this.$uniApi.showToastNoIcon("网络繁忙！");
}
}, res => {
uni.hideLoading()
uni.showToast({title: '服务器开小差了呢，请您稍后再试',icon:'none'})
console.log(res.msg)
})
}
},
//选择图片
chooseFile(e){
this.imgList=e;
console.log(e)
console.log(this.imgList)
},
//删除选择的图片
imgDelete(e){
this.imgList=e;
console.log(e)
console.log(this.imgList)
}
}
}
</script>
<style lang='scss'>
$backgroundC:#f9f9f9;
$borderColor:#f5f5f5;
$white:#ffffff;
$fontSize:28upx;
.content{
height: 100%;
}
.uploadMoreImg{
width: 100%;
background-color: #ffffff;
}
.issue {
background-color: $backgroundC;
&-head{
background-color: $white;
height: 100upx;
border-top: 1upx solid $borderColor;
border-bottom: 1upx solid $borderColor;
padding: 0 25upx;
&-pic{
width: 70upx;
height: 70upx;
border-radius: 50%;
vertical-align: middle;
margin-right: 17upx;
}
&-title{
line-height: 100upx;
font-size: 30upx;
vertical-align: middle;
margin-right: 35upx;
}
&-star-box{
display: inline-block;
image{
width: 32upx;
height: 32upx;
vertical-align: middle;
margin-right: 14upx;
}
image.active{
animation: star_move ease-in 1 1s,star_rotate ease 1.5s infinite 1s;
}
}
}
textarea{
width: 100%;
height: 420upx;
background-color: $white;
font-size: $fontSize;
color: #898989;
padding: 24upx;
box-sizing: border-box;
line-height: 40upx
}
&-btn-box{
padding: 54upx 30upx;
button{
width: 100%;
height: 80upx;
border-radius: 80upx;
font-size: $fontSize;
background-color: #3682FF;
line-height: 80upx
}
}
}
@keyframes star_move{
from{
width: 50upx;
height: 50upx;
transform: rotate(180deg)
}
to{
width: 32upx;
height: 32upx;
transform: rotate(0)
}
}
@keyframes star_rotate{
0%{
transform: rotateY(360deg)
}
100%{
transform: rotateY(180deg)
}
}
</style>
扫一扫
2253
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
