444 lines
11 KiB
Vue
444 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<view class="hzIndex">
|
|||
|
|
<hzHeader title="菜单评价"></hzHeader>
|
|||
|
|
<view class="hzContent" style="padding-top: 200upx;">
|
|||
|
|
<view class="content">
|
|||
|
|
<view class="star-rating">
|
|||
|
|
<view class="label">
|
|||
|
|
<text>菜谱评分<text style="color: red;">*</text>：</text>
|
|||
|
|
</view>
|
|||
|
|
<stars-rating :starsIndex="starsIndex1" :isEditStars="true" @starsClick="evaluateStar(1,$event)"></stars-rating>
|
|||
|
|
</view>
|
|||
|
|
<view class="star-rating">
|
|||
|
|
<view class="label">
|
|||
|
|
<text>菜品评分<text style="color: red;">*</text>：</text>
|
|||
|
|
</view>
|
|||
|
|
<stars-rating :starsIndex="starsIndex2" :isEditStars="true" @starsClick="evaluateStar(2,$event)"></stars-rating>
|
|||
|
|
</view>
|
|||
|
|
<view class="star-rating">
|
|||
|
|
<view class="label">
|
|||
|
|
<text>食堂服务<text style="color: red;">*</text>：</text>
|
|||
|
|
</view>
|
|||
|
|
<stars-rating :starsIndex="starsIndex3" :isEditStars="true" @starsClick="evaluateStar(3,$event)"></stars-rating>
|
|||
|
|
</view>
|
|||
|
|
<view class="star-rating">
|
|||
|
|
<view class="label">
|
|||
|
|
<text>就餐环境<text style="color: red;">*</text>：</text>
|
|||
|
|
</view>
|
|||
|
|
<stars-rating :starsIndex="starsIndex4" :isEditStars="true" @starsClick="evaluateStar(4,$event)"></stars-rating>
|
|||
|
|
</view>
|
|||
|
|
<view class="star-rating">
|
|||
|
|
<view class="label">
|
|||
|
|
<text>卫生状况<text style="color: red;">*</text>：</text>
|
|||
|
|
</view>
|
|||
|
|
<stars-rating :starsIndex="starsIndex5" :isEditStars="true" @starsClick="evaluateStar(5,$event)"></stars-rating>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view>
|
|||
|
|
<view style="margin: 20upx;font-size: 32upx;">
|
|||
|
|
<text>上传图片：</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="img-box">
|
|||
|
|
<view class="img-item" v-for="(item, index) in imgs" :key="index">
|
|||
|
|
<image class="remove-btn" @click="removeImg(index)" src="/static/icons/delete-icon.png" mode=""></image>
|
|||
|
|
<image class="img" :src="item.replace(/[\r\n]/g,'')" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="img-item upload-btn" @click="chooseImg()" v-if="imgs.length < 3"><image class="img" src="/static/imgs/tianjia-img.png" mode=""></image></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view>
|
|||
|
|
<view style="margin: 20upx;font-size: 32upx;">
|
|||
|
|
<text>建议意见：</text>
|
|||
|
|
</view>
|
|||
|
|
<textarea style="border: 1px solid #e5e5e5;border-radius: 10upx;font-size: 28upx;padding: 10upx;" value="" placeholder="请输入建议或意见" maxlength="500" v-model="evContent" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="occupied" style="height: 300upx;"></view>
|
|||
|
|
<view class="footer-btn"><view class="btn" @click="submit()">提交</view></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import starsRating from '@/components/starsRating';
|
|||
|
|
import uniRate from '@/components/uni-rate/uni-rate.vue';
|
|||
|
|
import { addEvaluate } from '@/common/api.js';
|
|||
|
|
import { callbackRequest, getStorage, alertTip, sureAlterTip,convertImgToBase64,uploadImg } from '@/common/util.js';
|
|||
|
|
export default {
|
|||
|
|
components: { uniRate,starsRating },
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
starsIndex1: 0, // 默认星级评价分数
|
|||
|
|
starsIndex2: 0, // 默认星级评价分数
|
|||
|
|
starsIndex3: 0, // 默认星级评价分数
|
|||
|
|
starsIndex4: 0, // 默认星级评价分数
|
|||
|
|
starsIndex5: 0, // 默认星级评价分数
|
|||
|
|
imgs:[],
|
|||
|
|
imgsId:[],
|
|||
|
|
userInfo: getStorage('userInfo'),
|
|||
|
|
evContent: '', //评价内容
|
|||
|
|
day: '',
|
|||
|
|
foodType: '',
|
|||
|
|
year: '',
|
|||
|
|
weeks: '',
|
|||
|
|
grade: 5,
|
|||
|
|
items: [
|
|||
|
|
{
|
|||
|
|
value: '0',
|
|||
|
|
name: '非常满意'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: '1',
|
|||
|
|
name: '满意',
|
|||
|
|
checked: 'true'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: '2',
|
|||
|
|
name: '一般'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
current:0
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onLoad(option) {
|
|||
|
|
this.day = option.day;
|
|||
|
|
this.foodType = option.foodType;
|
|||
|
|
this.year = option.year;
|
|||
|
|
this.weeks = option.weeks;
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
evaluateStar() {
|
|||
|
|
console.log(...arguments)
|
|||
|
|
console.log(arguments[0])
|
|||
|
|
let starstype = arguments[0]
|
|||
|
|
if(starstype==1){
|
|||
|
|
this.starsIndex1 = arguments[1];
|
|||
|
|
}if(starstype==2){
|
|||
|
|
this.starsIndex2 = arguments[1];
|
|||
|
|
}if(starstype==3){
|
|||
|
|
this.starsIndex3 = arguments[1];
|
|||
|
|
}if(starstype==4){
|
|||
|
|
this.starsIndex4 = arguments[1];
|
|||
|
|
}if(starstype==5){
|
|||
|
|
this.starsIndex5 = arguments[1];
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
submit() {
|
|||
|
|
console.log(this.starsIndex1)
|
|||
|
|
console.log(this.starsIndex2)
|
|||
|
|
console.log(this.starsIndex3)
|
|||
|
|
console.log(this.starsIndex4)
|
|||
|
|
console.log(this.starsIndex5)
|
|||
|
|
|
|||
|
|
if (this.starsIndex1==0) {
|
|||
|
|
alertTip('请选择菜谱评分');
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if (this.starsIndex2==0) {
|
|||
|
|
alertTip('请选择菜品评分');
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if (this.starsIndex3==0) {
|
|||
|
|
alertTip('请选择食堂服务');
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if (this.starsIndex4==0) {
|
|||
|
|
alertTip('请选择就餐环境');
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if (this.starsIndex5==0) {
|
|||
|
|
alertTip('请选择卫生状况');
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
// if (this.imgsId.length==0) {
|
|||
|
|
// alertTip('请选择图片');
|
|||
|
|
// return false;
|
|||
|
|
// }
|
|||
|
|
// if (!this.evContent) {
|
|||
|
|
// alertTip('请输入建议意见');
|
|||
|
|
// return false;
|
|||
|
|
// }
|
|||
|
|
let data;
|
|||
|
|
data = {
|
|||
|
|
method: addEvaluate,
|
|||
|
|
data: {
|
|||
|
|
userId: this.userInfo.id,
|
|||
|
|
userName: this.userInfo.userName,
|
|||
|
|
evaluate: this.evContent,
|
|||
|
|
recipeScore:this.starsIndex1,
|
|||
|
|
varietyScore:this.starsIndex2,
|
|||
|
|
canteenScore:this.starsIndex3,
|
|||
|
|
diningScore:this.starsIndex4,
|
|||
|
|
healthScore:this.starsIndex5,
|
|||
|
|
weeks:this.weeks,
|
|||
|
|
year:this.year,
|
|||
|
|
foodType:this.foodType,
|
|||
|
|
day:this.day,
|
|||
|
|
photo:this.imgsId.join(','),
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
callbackRequest(data).then(res => {
|
|||
|
|
if (res.data.returnCode == 1) {
|
|||
|
|
sureAlterTip('', '评价成功', false).then(_ => {
|
|||
|
|
uni.navigateBack(1);
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
alertTip(res.data.returnMsg);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 上传图片
|
|||
|
|
async chooseImg() {
|
|||
|
|
let chec = 0;
|
|||
|
|
let sty = [];
|
|||
|
|
let _this = this;
|
|||
|
|
uni.showActionSheet({
|
|||
|
|
itemList:['拍照','相册'],
|
|||
|
|
success:function(resp){
|
|||
|
|
chec = resp.tapIndex;
|
|||
|
|
if (chec == 0) {
|
|||
|
|
sty = ['camera']; //从相册相机选择
|
|||
|
|
} else {
|
|||
|
|
sty = ['album']; //从相册相机选择
|
|||
|
|
}
|
|||
|
|
uni.chooseImage({
|
|||
|
|
count:3,
|
|||
|
|
sizeType: ['compressed'],
|
|||
|
|
sourceType: sty,
|
|||
|
|
quality: 1,
|
|||
|
|
success: async function(res){
|
|||
|
|
let resData = res.tempFilePaths;
|
|||
|
|
for(let i=0;i<resData.length;i++){
|
|||
|
|
if(_this.imgs.length>3){
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
uni.getImageInfo({
|
|||
|
|
src: resData[i],
|
|||
|
|
success:async (path) => {
|
|||
|
|
convertImgToBase64(path.path, async function(base64) {
|
|||
|
|
if(_this.imgs.length<3){
|
|||
|
|
// _this.imgs.push(base64);
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '图片上传中'
|
|||
|
|
})
|
|||
|
|
let blength = base64.length;
|
|||
|
|
let glength = 7500;
|
|||
|
|
if(blength<=glength){
|
|||
|
|
let uploadParam = {
|
|||
|
|
base64: base64,
|
|||
|
|
userId: getStorage('userInfo').userId+i,
|
|||
|
|
groupEnd: '1'
|
|||
|
|
}
|
|||
|
|
await uploadImg(uploadParam).then(resu => {
|
|||
|
|
resu = resu.data ;
|
|||
|
|
uni.hideLoading();
|
|||
|
|
if (resu.returnCode != 1) {
|
|||
|
|
alertTip(resu.returnMsg);
|
|||
|
|
}else{
|
|||
|
|
_this.imgs.push(base64);
|
|||
|
|
_this.imgsId.push(resu.returnData+".jpg");
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}else{
|
|||
|
|
let fnum = parseInt(blength/glength);
|
|||
|
|
for(let j=1;j<fnum+1;j++){
|
|||
|
|
if(j==fnum){
|
|||
|
|
let groupBase = base64.slice((j-1)*glength);
|
|||
|
|
console.log(groupBase.length,"groupBaselength");
|
|||
|
|
let uploadParam = {
|
|||
|
|
base64: groupBase,
|
|||
|
|
userId: getStorage('userInfo').userId+i,
|
|||
|
|
groupEnd: '1'
|
|||
|
|
}
|
|||
|
|
await uploadImg(uploadParam).then(resu => {
|
|||
|
|
resu = resu.data ;
|
|||
|
|
if (resu.returnCode == 1) {
|
|||
|
|
_this.imgs.push(base64);
|
|||
|
|
_this.imgsId.push(resu.returnData+".jpg");
|
|||
|
|
} else {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
alertTip(resu.returnMsg);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}else{
|
|||
|
|
let groupBase = base64.slice((j-1)*glength,glength*j);
|
|||
|
|
let uploadParam = {
|
|||
|
|
base64: groupBase,
|
|||
|
|
userId: getStorage('userInfo').userId+i,
|
|||
|
|
groupEnd: '0'
|
|||
|
|
}
|
|||
|
|
await uploadImg(uploadParam).then(resu => {
|
|||
|
|
resu = resu.data ;
|
|||
|
|
if (resu.returnCode == 1) {
|
|||
|
|
} else {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
alertTip(resu.returnMsg);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
uni.hideLoading();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
fail:function(resp){
|
|||
|
|
console.log(resp.errMsg);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
removeImg(index) {
|
|||
|
|
this.imgs.splice(index, 1);
|
|||
|
|
this.imgsId.splice(index, 1);
|
|||
|
|
// console.log(this.imgs);
|
|||
|
|
// console.log(this.imgsId);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
@import '@/static/css/common.scss';
|
|||
|
|
.star-rating{
|
|||
|
|
padding: 20upx 20upx;
|
|||
|
|
display: flex;
|
|||
|
|
|
|||
|
|
.label{
|
|||
|
|
font-size: 32upx;
|
|||
|
|
margin-right: 20upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.img-box {
|
|||
|
|
overflow: hidden;
|
|||
|
|
padding-top: 20rpx;
|
|||
|
|
padding-bottom: 10rpx;
|
|||
|
|
|
|||
|
|
.img-item {
|
|||
|
|
float: left;
|
|||
|
|
width: 190upx;
|
|||
|
|
height: 190upx;
|
|||
|
|
border: 1px solid #ddd;
|
|||
|
|
margin: 0 22rpx 20upx 0upx;
|
|||
|
|
position: relative;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
.img {
|
|||
|
|
display: block;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.remove-btn {
|
|||
|
|
position: absolute;
|
|||
|
|
top: -18upx;
|
|||
|
|
right: -18upx;
|
|||
|
|
width: 44upx;
|
|||
|
|
height: 44upx;
|
|||
|
|
z-index: 2;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.upload-btn {
|
|||
|
|
.img {
|
|||
|
|
width: 60upx;
|
|||
|
|
height: 60upx;
|
|||
|
|
margin: unset;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.starActive {
|
|||
|
|
color: #ff8000;
|
|||
|
|
}
|
|||
|
|
.main {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background: #f3f3f3;
|
|||
|
|
}
|
|||
|
|
.content {
|
|||
|
|
margin: 0 20upx;
|
|||
|
|
border-radius: 20upx;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
padding-bottom: 80upx;
|
|||
|
|
background: #fff;
|
|||
|
|
position: relative;
|
|||
|
|
font-size: 26upx;
|
|||
|
|
textarea {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 300rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #666;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.grade {
|
|||
|
|
font-size: 28upx;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #444;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.grade .rate {
|
|||
|
|
margin-left: 80upx;
|
|||
|
|
margin-top: -18upx;
|
|||
|
|
}
|
|||
|
|
.uni-title {
|
|||
|
|
padding: 20upx 0upx;
|
|||
|
|
margin-left: 20px;
|
|||
|
|
font-size: 18px;
|
|||
|
|
}
|
|||
|
|
.radio {
|
|||
|
|
padding: 0 20px;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 300rpx;
|
|||
|
|
font-size: 30upx;
|
|||
|
|
color: #666;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
style: 'transform:scale(0.7)';
|
|||
|
|
.rediobox {
|
|||
|
|
font-size: 28upx;
|
|||
|
|
margin-top: 30upx;
|
|||
|
|
width: 38upx;
|
|||
|
|
height: 38upx;
|
|||
|
|
// line-height: 10upx;
|
|||
|
|
}
|
|||
|
|
.txt {
|
|||
|
|
margin-left: 18upx;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
// margin-top: 20px;
|
|||
|
|
// width: 35upx;
|
|||
|
|
// height: 35upx;
|
|||
|
|
// line-height: 35upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/deep/.rediobox .uni-radio-input,
|
|||
|
|
/deep/.rediobox .uni-radio-wrapper {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border: #e5e5e5;
|
|||
|
|
}
|
|||
|
|
/deep/ .rediobox .uni-radio-input {
|
|||
|
|
margin-right: 0;
|
|||
|
|
}
|
|||
|
|
</style>
|