351 lines
8.9 KiB
Vue
351 lines
8.9 KiB
Vue
|
<template>
|
|||
|
|
<view class="page">
|
|||
|
|
<!-- 导航栏 -->
|
|||
|
|
<u-navbar
|
|||
|
|
title="评价商家"
|
|||
|
|
:border-bottom="false"
|
|||
|
|
:background="bgc"
|
|||
|
|
back-icon-color="#262B37"
|
|||
|
|
title-color='#262B37'
|
|||
|
|
title-size='36'
|
|||
|
|
height='46'
|
|||
|
|
id="navbar"
|
|||
|
|
>
|
|||
|
|
</u-navbar>
|
|||
|
|
<!-- 提示栏 -->
|
|||
|
|
<view class="tip-bar">
|
|||
|
|
<text>提交评价或建议，帮助商家做得更好~</text>
|
|||
|
|
</view>
|
|||
|
|
<!-- 评价主体 -->
|
|||
|
|
<view class="eval-container">
|
|||
|
|
<!-- 匿名提交 -->
|
|||
|
|
<view class="anonymous-wrap">
|
|||
|
|
<text>您对商家满意吗？</text>
|
|||
|
|
<u-checkbox
|
|||
|
|
v-model="isAnonymous"
|
|||
|
|
shape="circle"
|
|||
|
|
size="24rpx"
|
|||
|
|
label="匿名提交"
|
|||
|
|
label-size="26rpx"
|
|||
|
|
>匿名提交</u-checkbox>
|
|||
|
|
</view>
|
|||
|
|
<!-- 商家信息 -->
|
|||
|
|
<view class="merchant-info">
|
|||
|
|
<image class="merchant-img" v-if="jdobj.picture" :src="jdobj.picture.split(',')[0]" mode="aspectFill"></image>
|
|||
|
|
<image class="merchant-img" v-else src="/static/merchant.png" mode="aspectFill"></image>
|
|||
|
|
<text class="merchant-name">{{jdobj.name == undefined ? '--' : jdobj.name}}</text>
|
|||
|
|
</view>
|
|||
|
|
<!-- 评价主体 -->
|
|||
|
|
<view class="eval-container" style="padding: 0;margin: 0;margin-top: 20rpx;">
|
|||
|
|
<!-- 修改后的评分项 -->
|
|||
|
|
<view class="score-item" v-for="(item, index) in scoreList" :key="index">
|
|||
|
|
<text class="score-label">{{ item.label }}</text>
|
|||
|
|
<view class="stars-wrap">
|
|||
|
|
<u-icon
|
|||
|
|
v-for="sIdx in 5"
|
|||
|
|
:key="sIdx"
|
|||
|
|
name="star-fill"
|
|||
|
|
:color="sIdx <= item.score ? '#FFC107' : '#eee'"
|
|||
|
|
size="36rpx"
|
|||
|
|
@click="setScore(index, sIdx)"
|
|||
|
|
class="star"
|
|||
|
|
></u-icon>
|
|||
|
|
</view>
|
|||
|
|
<text class="score-text">{{ item.text }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 评价输入 -->
|
|||
|
|
<view class="eval-input">
|
|||
|
|
<u-icon name="chat" color="#999" size="32rpx"></u-icon>
|
|||
|
|
<textarea v-model="contxt" placeholder="说说酒店怎么样，给大家参考" placeholder-style="color:#999"></textarea>
|
|||
|
|
</view>
|
|||
|
|
<!-- 上传附件 -->
|
|||
|
|
<view class="upload-wrap">
|
|||
|
|
<view class="upload-item">
|
|||
|
|
<view class="" style="position: relative;" v-for="(item,index) in imglist" :key="index">
|
|||
|
|
<image :src="item" style="width: 200rpx;height: 200rpx;border-radius: 10rpx;" mode="aspectFill"></image>
|
|||
|
|
<text @click="btndel(index)" style="font-size: 44rpx;display: block;width: 40rpx;height: 40rpx;color: #fff;background-color: red;position: absolute;right: -20rpx;top: -20rpx;line-height: 40rpx;border-radius: 50%;text-align: center;">×</text>
|
|||
|
|
</view>
|
|||
|
|
<image @click="getimage" src="https://api.ccttiot.com/smartmeter/img/static/u3z28zohbXoJ5kWcR6X1" style="width: 200rpx;height: 200rpx;filter: grayscale(100%);" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 底部提交按钮 -->
|
|||
|
|
<button class="submit-btn" @click="btntj">提交</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
bgc: {
|
|||
|
|
backgroundColor: "#fff",
|
|||
|
|
},
|
|||
|
|
isAnonymous: false,
|
|||
|
|
// 评分数据
|
|||
|
|
scoreList: [
|
|||
|
|
{ label: '综合', score: 5, text: '非常满意' },
|
|||
|
|
{ label: '位置', score: 5, text: '非常满意' },
|
|||
|
|
{ label: '设施', score: 5, text: '非常满意' },
|
|||
|
|
{ label: '服务', score: 5, text: '非常满意' },
|
|||
|
|
{ label: '卫生', score: 5, text: '非常满意' }
|
|||
|
|
],
|
|||
|
|
id:'',
|
|||
|
|
jdobj:{},
|
|||
|
|
token:'',
|
|||
|
|
imglist:[],
|
|||
|
|
contxt:'',
|
|||
|
|
jlflag:true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(e) {
|
|||
|
|
console.log(e);
|
|||
|
|
this.id = e.id
|
|||
|
|
this.getxq()
|
|||
|
|
this.getqiniuyun()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 点击进行提交
|
|||
|
|
btntj(){
|
|||
|
|
if(this.contxt == ''){
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '酒店评价不能为空',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 3000
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if(this.jlflag == false){
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.jlflag = false
|
|||
|
|
const picture = this.imglist.join(',')
|
|||
|
|
let data = {
|
|||
|
|
bstType:3,
|
|||
|
|
bstId:this.id,
|
|||
|
|
content:this.contxt,
|
|||
|
|
mediaUrl:picture,
|
|||
|
|
rating:this.scoreList[0].score,
|
|||
|
|
locationRating:this.scoreList[1].score,
|
|||
|
|
facilityRating:this.scoreList[2].score,
|
|||
|
|
serviceRating:this.scoreList[3].score,
|
|||
|
|
hygieneRating:this.scoreList[4].score,
|
|||
|
|
anonymous:this.isAnonymous
|
|||
|
|
}
|
|||
|
|
this.$u.post(`/app/comment/add`,data).then(res =>{
|
|||
|
|
if(res.code == 200){
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '评价成功',
|
|||
|
|
icon: 'success',
|
|||
|
|
duration: 3000
|
|||
|
|
})
|
|||
|
|
setTimeout(()=>{
|
|||
|
|
uni.navigateBack()
|
|||
|
|
this.jlflag = true
|
|||
|
|
},1500)
|
|||
|
|
}else{
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg,
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 3000
|
|||
|
|
})
|
|||
|
|
this.jlflag = true
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 点击评分
|
|||
|
|
setScore(index, score) {
|
|||
|
|
this.scoreList[index].score = score;
|
|||
|
|
const textMap = ['非常不满意', '不满意', '一般', '满意', '非常满意'];
|
|||
|
|
this.scoreList[index].text = textMap[score];
|
|||
|
|
console.log( this.scoreList);
|
|||
|
|
},
|
|||
|
|
// 查询酒店详情
|
|||
|
|
getxq(){
|
|||
|
|
this.$u.get(`/app/hotel/${this.id}`).then(res =>{
|
|||
|
|
if(res.code == 200){
|
|||
|
|
this.jdobj = res.data
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 获取七牛云上传token
|
|||
|
|
getqiniuyun(){
|
|||
|
|
this.$u.get("/common/qiniuToken").then((res) => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
this.token = res.data
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 点击删除图片
|
|||
|
|
btndel(index){
|
|||
|
|
this.imglist.splice(index, 1)
|
|||
|
|
},
|
|||
|
|
getimage(e){
|
|||
|
|
if(this.imglist.length >= 9){
|
|||
|
|
return uni.showToast({ title: '最多选择九张图片', icon: 'none',duration:3000 })
|
|||
|
|
}
|
|||
|
|
let _this = this
|
|||
|
|
// 使用 uni.chooseMedia 从手机相册选择图片和视频
|
|||
|
|
uni.chooseMedia({
|
|||
|
|
count: 9 - this.imglist.length, // 剩余可选择的数量
|
|||
|
|
mediaType: ['image'], // 允许选择图片和视频
|
|||
|
|
sourceType: ['album', 'camera'], // 允许从相册和相机选择
|
|||
|
|
camera: 'back', // 默认后置摄像头
|
|||
|
|
success(res) {
|
|||
|
|
const tempFiles = res.tempFiles
|
|||
|
|
tempFiles.forEach(file => {
|
|||
|
|
wx.uploadFile({
|
|||
|
|
url: 'https://up-z2.qiniup.com',
|
|||
|
|
name: 'file',
|
|||
|
|
filePath: file.tempFilePath, //文件路径
|
|||
|
|
formData: {
|
|||
|
|
token: _this.token, //后端返回的token
|
|||
|
|
key:file.tempFilePath //传的文件名称
|
|||
|
|
},
|
|||
|
|
success: function(res) {
|
|||
|
|
let str = JSON.parse(res.data)
|
|||
|
|
let fileUrl = 'https://api.ccttiot.com/' + str.key
|
|||
|
|
// 添加到媒体列表
|
|||
|
|
_this.imglist.push(fileUrl)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
fail(err) {
|
|||
|
|
console.log('选择照片失败:', err)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '选择失败',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 3000
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less">
|
|||
|
|
page {
|
|||
|
|
background: #f5f7fa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 提示栏 */
|
|||
|
|
.tip-bar {
|
|||
|
|
background: #fffbe6;
|
|||
|
|
color: #fa8c16;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
padding: 16rpx 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 评价主体容器 */
|
|||
|
|
.eval-container {
|
|||
|
|
background: #fff;
|
|||
|
|
margin: 20rpx;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
padding: 24rpx;
|
|||
|
|
// box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 匿名提交 */
|
|||
|
|
.anonymous-wrap {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 商家信息 */
|
|||
|
|
.merchant-info {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
.merchant-img {
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
background: #eee;
|
|||
|
|
margin-right: 16rpx;
|
|||
|
|
}
|
|||
|
|
.merchant-name {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 评分项 */
|
|||
|
|
.score-item {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
.score-label {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
width: 120rpx;
|
|||
|
|
}
|
|||
|
|
.stars-wrap {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 12rpx;
|
|||
|
|
flex: 1;
|
|||
|
|
.star {
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: color 0.2s ease;
|
|||
|
|
// 增加hover效果，提升用户体验
|
|||
|
|
&:hover {
|
|||
|
|
color: #FFD700 !important; // 悬浮时颜色更亮
|
|||
|
|
transform: scale(1.1); // 轻微放大
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.score-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #ff9500;
|
|||
|
|
font-weight: 500;
|
|||
|
|
width: 150rpx;
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
/* 评价输入 */
|
|||
|
|
.eval-input {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
gap: 16rpx;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
textarea {
|
|||
|
|
flex: 1;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #333;
|
|||
|
|
min-height: 80rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
/* 上传附件 */
|
|||
|
|
.upload-wrap {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 40rpx;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
.upload-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 24rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
/* 提交按钮 */
|
|||
|
|
.submit-btn {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 88rpx;
|
|||
|
|
line-height: 88rpx;
|
|||
|
|
background: #ff9500;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|