hbsmUniapp/src/pagesOrder/pages/evaluate/evaluate.vue

<script setup lang="ts">
import { cleanContent } from '@/utils/common'
import { postOrderEvaluateApi } from '@/api/order'
import { ref } from 'vue'
import { uploadApi } from '@/api/common'

const props = defineProps<{
  detail_id?: string
  order_id?: string
}>()

const content = ref('')
const images = ref([])

const score = ref(5)
const rateArr = ['非常差', '差', '一般', '好', '非常好']
const rateStr = ref(rateArr[score.value - 1])
const onChange = (event: UniHelper.UniRateOnChangeEvent) => {
  rateStr.value = rateArr[event.value - 1]
}

const tmpPathArr = ref<string[]>([])
const imagePathArr = ref<string[]>([])
const onSelect = (e: UniHelper.UniFilePickerOnSelectEvent) => {
  tmpPathArr.value = tmpPathArr.value.concat(e.tempFilePaths)
}

const onDelete = (e: UniHelper.UniFilePickerOnDeleteEvent) => {
  // 移除图片
  const index = tmpPathArr.value.findIndex((item) => item === e.tempFilePath)
  tmpPathArr.value.splice(index, 1)
}

const onSubmit = async () => {
  const uploadPromises = tmpPathArr.value.map((item) => {
    return new Promise((resolve, reject) => {
      uploadApi(item).then((res) => {
        // console.log(res)
        imagePathArr.value.push(res.result.url)
        resolve(res)
      })
    })
  })
  try {
    uni.showLoading({
      title: '数据提交中...',
    })
    await Promise.all(uploadPromises)
    const res = await postOrderEvaluateApi({
      detail_id: props.detail_id ?? '',
      order_id: props.order_id ?? '',
      score: score.value,
      content: cleanContent(content.value),
      images: imagePathArr.value.join(','),
    })
    if (res.msg) {
      uni.showToast({
        title: res.msg,
        icon: 'error',
      })
      return
    }
    uni.showToast({
      title: '评价成功',
      icon: 'success',
    })
    setTimeout(() => {
      uni.navigateBack({
        delta: 1,
      })
    }, 1500)
  } catch (err) {
    // 处理错误
    console.log(err)
    uni.showToast({
      title: '评价失败,请刷新重试',
      icon: 'none',
    })
  }
}
</script>

<template>
  <view class="body">
    <view class="top">
      <text class="text">商品评价</text>
      <view class="rate">
        <uni-rate v-model="score" @change="onChange" />
      </view>
      <text class="rate-text">{{ rateStr }}</text>
    </view>
    <view class="content">
      <uni-easyinput
        type="textarea"
        autoHeight
        v-model="content"
        placeholder="请输入评价内容"
        :inputBorder="false"
      ></uni-easyinput>
    </view>
    <view class="image">
      <uni-file-picker
        v-model="images"
        file-mediatype="image"
        mode="grid"
        file-extname="png,jpg"
        :limit="9"
        return-type="array"
        @select="onSelect"
        @delete="onDelete"
        :auto-upload="false"
      >
        <view class="upload">
          <uni-icons type="camera" color="#ff0000" size="30"></uni-icons>
          <text class="text">添加图片</text>
        </view>
      </uni-file-picker>
    </view>
  </view>
  <shop-submit-button @tap="onSubmit">提交评价</shop-submit-button>
</template>

<style lang="scss">
page {
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  background-color: #f4f4f4;
}

.body {
  display: flex;
  flex-direction: column;
  border-radius: 10rpx;
  overflow: hidden;
  border: 1rpx solid #ccc;

  .top {
    padding: 20rpx 15rpx 20rpx;
    display: flex;
    align-items: center;
    background-color: #fff;

    .rate {
      margin: 0 20rpx 0 0rpx;
      cursor: pointer;
    }

    .text {
      font-size: 24rpx;
      color: #333;
      margin-right: 20rpx;
    }

    .rate-text {
      font-size: 20rpx;
      color: #666;
    }
  }

  .content {
    display: flex;
    background-color: #fff;
    margin-top: 10rpx;
    padding: 15rpx;

    .uni-easyinput {
      width: 100%;
      font-size: 24rpx;
      line-height: 1.5;
      color: #666;
    }
  }

  .image {
    display: flex;
    background-color: #fff;
    margin-top: 10rpx;
    padding: 0;
    align-items: flex-start;

    .upload {
      display: flex;
      flex-direction: column;
      text-align: center;
      font-size: 24rpx;

      .text {
        color: #666;
        font-size: 27rpx;
      }
    }
  }
}

.sub-button {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  width: 100%;

  .button-container {
    background-color: white;
    padding: 10rpx;
    border-radius: 20rpx;
    width: 100%;
  }

  button {
    width: 100%;
    background-color: #ff5f3c;
    color: white;
    border-radius: 20rpx;
    text-align: center;
    cursor: pointer;
  }
}
</style>