SmartParks_uniapp/pages/sys/user/myRepair/repairEvaluate.vue

<template>
  <view class="evaluate-container">
  
    <!-- 评分项 -->
    <view class="evaluate-list">
      <view class="evaluate-row">
        <text class="evaluate-label">服务评价</text>
        <view class="evaluate-stars">
          <image v-for="i in 5" :key="i" :src="score >= i ? '/static/ic_evaluate_select.png' : '/static/ic_evaluate_disselect.png'" class="evaluate-star" @click="score = i" />
        </view>
      </view>
      <view class="evaluate-desc">- 具体说说看 -</view>
      <view class="evaluate-row">
        <text class="evaluate-label">专业性</text>
        <view class="evaluate-stars">
          <image v-for="i in 5" :key="i" :src="proScore >= i ? '/static/ic_evaluate_select.png' : '/static/ic_evaluate_disselect.png'" class="evaluate-star" @click="proScore = i" />
        </view>
      </view>
      <view class="evaluate-row">
        <text class="evaluate-label">服务态度</text>
        <view class="evaluate-stars">
          <image v-for="i in 5" :key="i" :src="attitudeScore >= i ? '/static/ic_evaluate_select.png' : '/static/ic_evaluate_disselect.png'" class="evaluate-star" @click="attitudeScore = i" />
        </view>
      </view>
      <view class="evaluate-row">
        <text class="evaluate-label">时效性</text>
        <view class="evaluate-stars">
          <image v-for="i in 5" :key="i" :src="timelyScore >= i ? '/static/ic_evaluate_select.png' : '/static/ic_evaluate_disselect.png'" class="evaluate-star" @click="timelyScore = i" />
        </view>
      </view>
    </view>
    <!-- 标签选择 -->
    <view class="evaluate-tag-title">- 选择或自定义任一标签 -</view>
    <view class="evaluate-tags">
      <view v-for="(tag, idx) in tags" :key="idx" :class="['evaluate-tag', selectedTags.includes(tag) ? 'selected' : '']" @click="toggleTag(tag)">{{ tag }}</view>
    </view>
    <!-- 输入框 -->
    <textarea class="evaluate-textarea" placeholder="说点什么吧..." v-model="comment" />
    <!-- 提交按钮 -->
    <button class="evaluate-btn">提交</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      score: 4,
      proScore: 5,
      attitudeScore: 4,
      timelyScore: 4,
      tags: ['专业性强', '态度谦和', '声音甜美', '速度很快'],
      selectedTags: ['专业性强', '态度谦和'],
      comment: ''
    }
  },
  methods: {
    toggleTag(tag) {
      if (this.selectedTags.includes(tag)) {
        this.selectedTags = this.selectedTags.filter(t => t !== tag)
      } else {
        this.selectedTags.push(tag)
      }
    }
  }
}
</script>

<style scoped>
.evaluate-container {
  min-height: 100vh;
  background: #fff;
  padding-bottom: 40rpx;
  /* 防止在iOS等设备上滑动到顶部或底部时出现回弹效果 */
  overscroll-behavior-y: contain;
}

.evaluate-back {
  position: absolute;
  left: 37rpx;
  width: 15rpx;
  height: 33rpx;
}
.evaluate-title {
  font-size: 30rpx;
  color: #000;
}
.evaluate-list {
  margin: 0 53rpx 0 40rpx;
}
.evaluate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 38rpx;
}
.evaluate-label {
  font-size: 30rpx;
  color: #222;
  width: 160rpx;
  text-align: left;
}
.evaluate-stars {
  display: flex;
  align-items: center;
}
.evaluate-star {
  width: 36rpx;
  height: 34rpx;
  margin-right: 36rpx;
}
.evaluate-desc {
  color: #BDBDBD;
  font-size: 24rpx;
  text-align: center;
  margin-top: 67rpx;
  margin-bottom: 57rpx;
}
.evaluate-tag-title {
  color: #BDBDBD;
  font-size: 24rpx;
  text-align: center;
  margin: 60rpx 0 0 0;
}
.evaluate-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin: 52rpx 25rpx 0 25rpx;
}
.evaluate-tag {
  flex: 0 0 calc((100% - 60rpx) / 4);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64rpx;
  border-radius: 32rpx;
  font-size: 28rpx;
  color: #666666;
  background: #F2F2F2;
}
.evaluate-tag.selected {
  background: #0090FF;
  color: #fff;
}

.evaluate-textarea {
  width: 85vw;
  min-height: 120rpx;
  background: #F5F6F7;
  border-radius: 10rpx;
  font-size: 26rpx;
  color: #B6C2CE;
  padding: 23rpx 27rpx 23rpx 27rpx;
  margin: 49rpx auto 0 auto;
  display: block;
}
.evaluate-btn {
  width: 80vw;
  height: 88rpx;
  background: #0090FF;
  color: #fff;
  font-size: 36rpx;
  border: none;
  border-radius: 44rpx;
  margin: 137rpx auto 0 auto;
  display: block;
  font-weight: bold;
  box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.18);
}
</style>