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> |