<template>
<view class="box">
<view class="main">
<!-- 总体评价-->
<view class="population populationCont2">
<view class="title">总体评价</view>
<view class=" " style="padding-left: 30rpx;">
<view class="xxBox">
<uni-rate v-model="grade" :max="5" color="#EEEEEE" active-color="#FF0000" :size="20" :margin="20"
@change="gradeCl" />
<view class="td orangeColor" v-if="grade==5">非常好</view>
<view class="td orangeColor" v-if="grade==4">很好</view>
<view class="td orangeColor" v-if="grade==3">好</view>
<view class="td orangeColor" v-if="grade==2">一般</view>
<view class="td orangeColor" v-if="grade==1">差</view>
</view>
</view>
</view>
<!-- 商家服务评价-->
<view class="population">
<view class="title">商家服务评价</view>
<view class="rowView">
<view class="littleTitle">服务态度</view>
<view class="xxBox">
<uni-rate v-model="xx" :max="5" color="#EEEEEE" active-color="#FF4F00" :size="20" :margin="20"
@change="taidu" />
<view class="td orangeColor" v-if="taiduStar==5">非常好</view>
<view class="td orangeColor" v-if="taiduStar==4">很好</view>
<view class="td orangeColor" v-if="taiduStar==3">好</view>
<view class="td orangeColor" v-if="taiduStar==2">一般</view>
<view class="td orangeColor" v-if="taiduStar==1">差</view>
</view>
</view>
<view class="rowView">
<view class="littleTitle">施工质量</view>
<view class="xxBox">
<uni-rate v-model="yy" :max="5" color="#EEEEEE" active-color="#FF4F00" :size="20" :margin="20"
@change="zhiliang" />
<view class="td orangeColor" v-if="zhiliangStar==5">非常好</view>
<view class="td orangeColor" v-if="zhiliangStar==4">很好</view>
<view class="td orangeColor" v-if="zhiliangStar==3">好</view>
<view class="td orangeColor" v-if="zhiliangStar==2">一般</view>
<view class="td orangeColor" v-if="zhiliangStar==1">差</view>
</view>
</view>
<view class="rowView">
<view class="littleTitle">店面环境</view>
<view class="xxBox">
<uni-rate v-model="zz" :max="5" color="#EEEEEE" active-color="#FF4F00" :size="20" :margin="20"
@change="huanjing" />
<view class="td orangeColor" v-if="huanjingStar==5">非常好</view>
<view class="td orangeColor" v-if="huanjingStar==4">很好</view>
<view class="td orangeColor" v-if="huanjingStar==3">好</view>
<view class="td orangeColor" v-if="huanjingStar==2">一般</view>
<view class="td orangeColor" v-if="huanjingStar==1">差</view>
</view>
</view>
</view>
<!-- 评价内容 和图片 -->
<view class="population">
<!-- 建议 -->
<view class="firstView">
<view>
<textarea placeholder-style="color:#999999" placeholder="说说哪里满意，帮大家选择~" v-model="exeContent"
class="textareaCont" maxlength="-1" auto-height="true" @confirm="feedDone" />
</view>
</view>
<!-- 图片 -->
<view class="secondView">
<view class="imgBox">
<view class="imgLine" v-for="(img,imgindex) in imgArr">
<image :class="{img4:(imgindex+1)%4==0}" :src="img" mode="" class="itemImg" @click="previewImage(imgindex,imgArr)"></image>
<image src="../../static/img/icon_del_red.png" mode="" class="delImg"
@click="delimg(imgindex)"></image>
</view>
<view class="imgLine" @click="uploadImg">
<image src="../../static/img/btn_pic.png" mode="" class="itemImg"></image>
</view>
</view>
</view>
</view>
<view class="bottom">
<view class="shoreDz" @click="submit">发表评论</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
grade: '5',
xx: 5,
yy: 5,
zz: 5,
taiduStar: 5,
zhiliangStar: 5,
huanjingStar: 5,
imgArr: [],
exeContent: '',
shopID:'',
sheetID:'',
}
},
onLoad(opt) {
console.log('opt++',opt);
this.shopID = opt.shopID
this.sheetID = opt.sheetID
// uni.setStorage({
// key: 'evaluate',
// data: 1,
// success: function () {
// }
// });
},
onShow() {
},
methods: {
changeGrade(v) {
console.log(v);
this.grade = v
},
taidu(e) {
console.log(e)
this.taiduStar = e.value
},
zhiliang(e) {
console.log(e)
this.zhiliangStar = e.value
},
gradeCl(e) {
console.log(e)
this.grade = e.value
},
huanjing(e) {
console.log(e)
this.huanjingStar = e.value
},
feedDone(e) {
this.exeContent = e.target.value
},
previewImage(index, arr) {
// 预览图片
uni.previewImage({
urls: arr,
current: index,
longPressActions: {
itemList: ['发送给朋友', '保存图片', '收藏'],
success: function(data) {
console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
},
fail: function(err) {
console.log(err.errMsg);
}
}
});
},
uploadImg() {
var that = this;
var num=9;
var length=this.imgArr.length;
if(length==9){
uni.showToast({
title: '最多上传9张图片',
icon: 'none',
duration: 2000,
});
return false;
}
uni.chooseMedia({
mediaType: ['image'],
sourceType: ['album','camera'],
count:num-length,
sizeType:['compressed'],
camera: 'back',
success: (chooseImageRes) => {
console.log('图片',chooseImageRes);
const tempFiles = chooseImageRes.tempFiles;
tempFiles.forEach(v => {
console.log(that.$request.baseUrl + 'tuhuUploadFile');
uni.uploadFile({
url: that.$request.baseUrl + 'tuhuUploadFile',
filePath: v.tempFilePath,
name: 'file',
formData: {
'user': 'test'
},
success: (uploadFileRes) => {
console.log(JSON.parse(uploadFileRes.data).data);
that.imgArr = that.imgArr.concat(JSON.parse(
uploadFileRes.data).data);
}
});
})
}
});
},
delimg(index) {
this.imgArr.splice(index, 1)
},
submit() {
uni.showLoading({
title: '保存中'
})
var exeImg = this.imgArr.join(',')
this.$http('openMiniEvaluate/addOpenEvaluate', {
shopID:this.shopID,
sheetID:this.sheetID,
overallEvaluation:this.grade,
serviceEvaluation:this.taiduStar,
constructionEvaluation:this.zhiliangStar,
storeEvaluation:this.huanjingStar,
eContent: this.exeContent,
imgs: exeImg
}, 'POST').then(res => {
//this.submitSuperCheckSheet()
uni.showToast({
title: '提交成功',
icon: 'none',
duration: 2000,
});
let pages = getCurrentPages(); // 当前页面
let beforePage = pages[pages.length - 2]; // 上一页
setTimeout(function() {
uni.navigateBack({
success: function() {
beforePage.onLoad(); // 执行上一页的onLoad方法
}
});
}, 2000);
})
}
}
}
</script>
<style scoped>
.box {
min-height: 100vh;
background: #F4F5F7;
}
.main {
padding: 20rpx 24rpx;
margin-bottom: 120rpx;
}
.population {
margin-top: 20rpx;
background: #FFFFFF;
padding: 30rpx 20rpx;
border-radius: 10rpx;
}
.title {
font-size: 30rpx;
font-weight: 600;
color: #333333;
}
.populationImg {
width: 32rpx;
height: 32rpx;
}
.populationCont {
display: flex;
padding-top: 30rpx;
}
.populationLine {
display: flex;
line-height: 32rpx;
font-size: 28rpx;
color: #999999;
width: 200rpx;
}
.populationTxt {
padding-left: 12rpx;
}
.orangeColor {
color: #FF0000;
}
.rowView {
padding: 30rpx 0rpx 0rpx;
display: flex;
justify-content: space-between;
}
.littleTitle {
font-size: 28rpx;
color: #666666;
line-height: 32rpx;
}
.xxBox {
display: flex;
justify-content: flex-start;
}
.td {
width: 80rpx;
font-size: 24rpx;
margin-left: 10rpx;
}
.firstView,
.secondView {
background-color: #FFFFFF;
border-radius: 10rpx;
}
.firstView {
margin-bottom: 20rpx;
}
.textareaCont {
padding: 20rpx 0rpx;
min-height: 150rpx;
width: 95%;
font-size: 28rpx;
}
.imgBox {
display: flex;
flex-wrap: wrap;
padding: 20rpx 0rpx;
}
.imgLine {
position: relative;
margin-right: 10rpx;
}
.itemImg {
width: 150rpx;
height: 150rpx;
margin-right: 5rpx;
}
/* .img4 {
margin-right: 20rpx;
} */
.delImg {
width: 32rpx;
height: 32rpx;
position: absolute;
right: 0rpx;
top: 0rpx;
}
.bottom {
width: 750rpx;
height: 120rpx;
background: #FFFFFF;
box-shadow: 0px -4px 8px 0px rgba(153, 153, 153, 0.08);
position: fixed;
left: 0;
bottom: 0;
display: flex;
justify-content: space-around;
}
.shoreDz {
width: 702rpx;
height: 74rpx;
background: #D53533;
border-radius: 37rpx;
text-align: center;
line-height: 74rpx;
color: #FFFFFF;
font-size: 30rpx;
margin-top: 24rpx;
}
.populationCont2{
display: flex;
justify-content: space-between;
}
</style>