zhishifufei_uniapp/components/EvaluateDialog/index.vue

<template>
  <view :class="{ on: dialogShow }" class="evaluate-dialog" @touchmove.stop>
    <view class="rate-section">
      <view>满意度</view>
      <view>
        <text
          v-for="star in 5"
          :key="star"
          :class="{ on: star <= rateValue }"
          class="iconfont iconxing"
          @click="rateChange(star)"
        ></text>
      </view>
      <view>{{ rateValue | rateCovert }}</view>
    </view>
    <view class="custom-section">
      <textarea
        v-model="textValue"
        placeholder-style="color: #bbb"
        auto-height
        maxlength="500"
        placeholder="课程满足你的期待么？说说你的想法，分享给想学习的他们吧~"
      ></textarea>
      <view class="img-box flex flex-wrap">
        <view class="img-item pos" v-for="(item, index) in imageList" :key="item">
          <image class="upload-img-item" :src="item" :alt="item" />
          <view class="del-btn" @click="imageDelete(index)"></view>
        </view>
        <view class="label img-item" v-if="imageList.length < 6" @click="imageUpload">
          <text>上传图片</text>
        </view>
      </view>
    </view>
    <view class="submit-btn flex flex-center" @click="evaluateSubmit">立即评价</view>
  </view>
</template>

<script>
export default {
  filters: {
    rateCovert(value) {
      return ["非常差", "差", "一般", "好", "非常好"][value - 1];
    },
  },
  props: {
    dialogShow: {
      type: Boolean,
      default: false,
    },
    rateValue: {
      type: Number,
      default: 5,
    },
    imageList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      textHeight: "",
      textValue: "",
    };
  },
  methods: {
    rateChange(value) {
      this.$emit("rate-change", value);
    },
    async imageUpload() {
      const { tempFilePaths } = await this.$util.wrapFn(uni.chooseImage, {
        count: 1,
        extension: ["png", "jpg", "jpeg"],
      });
      const path = tempFilePaths[0];

      uni.showLoading({
        mask: true,
      });
      try {
        const result = await this.$util.uploadImg(path);

        this.$emit("image-upload", result);

        uni.hideLoading();
      } catch (err) {
        uni.hideLoading();
        this.$util.showMsg(err.msg || err);
      }
    },
    imageDelete(index) {
      this.$emit("image-delete", index);
    },
    evaluateSubmit() {
      this.$emit("evaluate-submit", this.textValue);
    },
  },
};
</script>

<style scoped lang="scss">
.evaluate-dialog {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 56;
  max-height: 90%;
  padding: 50rpx 30rpx calc(40rpx + var(--safe-bottom));
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  background-color: #ffffff;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  transition: transform 0.3s;
  transform: translateY(100%);
}

.evaluate-dialog.on {
  transform: translateY(0);
}

.evaluate-dialog .rate-section {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #282828;
}

.evaluate-dialog .rate-section view:nth-child(2) {
  margin-right: 30rpx;
  margin-left: 20rpx;
  font-size: 36rpx;
  color: #ccc;
}

.evaluate-dialog .iconxing ~ .iconxing {
  margin-left: 16rpx;
}

.evaluate-dialog .iconxing.on {
  color: #ff6b00;
}

.evaluate-dialog .rate-section view:last-child {
  font-size: 24rpx;
  color: #aaa;
}

.evaluate-dialog .custom-section {
  padding: 30rpx;
  border-radius: 10rpx;
  margin-top: 50rpx;
  background-color: #fafafa;
}

.evaluate-dialog textarea {
  font-size: 28rpx;
  min-height: 100rpx;
}

.evaluate-dialog .custom-section .img-box {
  margin-top: 60rpx;
}

.evaluate-dialog .img-item {
  width: 140rpx;
  height: 140rpx;
  margin-right: calc((100% - 140rpx * 4) / 3);

  &:nth-child(4n) {
    margin-right: 0;
  }

  &:nth-child(n + 5) {
    margin-top: 32rpx;
  }
}

.evaluate-dialog .upload-img-item {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6rpx;
  object-fit: cover;
  pointer-events: none;
}

.evaluate-dialog .del-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  margin-top: -12rpx;
  margin-right: -12rpx;
  background: #2c8eff
    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA1klEQVQ4T63TLVJDUQyG4edUlBkQrQYcawGDKCuAVbCE7gBThwAUi4BKNCyBH4nChknnlCnl3jt0bmPPyZvkS74SETs4wjs+SymhIyKiYBf7eCsRcYApnnGXoDZITR7hBBNcJSBpp7jAHDdNkLXkczzgOgHZ0pKaD38gnX9y3K4PVY7WAll9ES2QW3zhGI3d/QBaIE91OylYoz6/ACuQcVX5EgPcY4bX9Q1tF9Cgw/9H6CVirzX2PqQep/y4POV0VZrpZUMzneVq0wvDauePDey8h8O08zdMV6S1c4zvwQAAAABJRU5ErkJggg==")
    center/16rpx no-repeat;
}

.evaluate-dialog .label {
  border: 1px solid #ddd;
  border-radius: 6rpx;
  box-sizing: border-box;
  line-height: 140rpx;
  text-align: center;
}

.evaluate-dialog .label text {
  display: inline-block;
  padding-top: 50rpx;
  background: url(@/static/images/camera.png) center top/46rpx no-repeat;
  vertical-align: middle;
  font-size: 22rpx;
  line-height: 1.5;
  color: #bbb;
}

.evaluate-dialog .submit-btn {
  height: 86rpx;
  border-radius: 43rpx;
  margin-top: 55rpx;
  background: linear-gradient(90deg, #409dff 0%, #1e85fb 100%);
  font-size: 30rpx;
  color: #ffffff;
}
</style>