yshop-pro-uniapp/pages/evaluate/evaluate.vue

<template>
  <layout class="evaluate">
    <uv-navbar
        :fixed="false"
        title="评价"
        left-arrow
        @leftClick="goBack"
    />
    <view class="evaluate-card mb-20">
      <div class="evaluate-item">
        <view class="evaluate-label">商品评价</view>
        <uv-rate
            :count="5"
            v-model="productScore"
        ></uv-rate>
      </div>
      <uv-line color="#E6E6E6"></uv-line>
      <view class="evaluate-content">
        <uv-textarea
            v-model="comment"
            placeholder="请填写您遇到的问题，这将帮助我们为您提供更好的服务"
        ></uv-textarea>
        <uv-upload
            :fileList="fileList1"
            name="1"
            multiple
            :maxCount="10"
            @afterRead="afterRead"
            @delete="handleDeletePic"
        ></uv-upload>

      </view>
    </view>

    <view class="card evaluate-card noBorder">
      <view class="card-head">
        <view class="card-title">服务评价</view>
      </view>
      <view class="card-content">
        <div class="evaluate-item min">
          <view class="evaluate-label">服务评价</view>
          <uv-rate
              :count="5"
              v-model="serviceScore"
          ></uv-rate>
        </div>
      </view>
    </view>


    <div class="form-buttons">
      <uv-button
          round
          block
          type="primary"
          @tap="handleOrderComments"
      >
        提交评论
      </uv-button>
    </div>
  </layout>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { orderComments } from '@/api/order'
import { VUE_APP_UPLOAD_URL } from '@/config'
import { useRouter } from "@/hooks/useRouter";

const {getParams, push} = useRouter()
const productScore = ref(0)
const serviceScore = ref(0)
const unique = ref(null)
const pics = ref([])
const fileList1 = ref([])
const comment = ref("")
const orderInfoData = ref(null)

const {goBack} = useRouter()
const handleOrderComments = async () => {
  const res = await orderComments([{
    "comment": comment.value,
    "pics": pics.value.toString(),
    "productScore": productScore.value,
    "serviceScore": serviceScore.value,
    "unique": unique.value,
  }])
  if (res) {
    uni.showToast({
      title: "评价成功",
      icon: "none",
      duration: 2000
    });
    push({url:'/pages/orderList/orderList'},{data:{type: 3}})
  }
}

const handleDeletePic = (event) => {
  pics.value.splice(event.index, 1)
  fileList1.value.splice(event.index, 1)
}


const afterRead = async (event) => {
  // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
  let lists = [].concat(event.file)
  let fileListLen = fileList1.value.length
  lists.map((item) => {
    fileList1.value.push({
      ...item,
      status: 'uploading',
      message: '上传中'
    })
  })
  for (let i = 0; i < lists.length; i++) {
    const result = await uploadFilePromise(lists[i].url)
    let item = fileList1.value[fileListLen]
    fileList1.value.splice(fileListLen, 1, Object.assign(item, {
      status: 'success',
      message: '',
      url: result
    }))
    let url = JSON.parse(result)
    pics.value.push(url.data)
    fileListLen++
  }
}

const uploadFilePromise = (url) => {
  return new Promise((resolve, reject) => {
    let a = uni.uploadFile({
      url: VUE_APP_UPLOAD_URL,
      filePath: url,
      name: 'file',
      formData: {
        user: 'test'
      },
      success: (res) => {
        setTimeout(() => {
          resolve(res.data)
        }, 1000)
      }
    });
  })
}


onLoad((options) => {
  const params = getParams(options)
  unique.value = params.unique
})


</script>

<style lang="scss">
.evaluate-item {
  display: flex;
  align-items: center;
  padding: 30rpx 34rpx;

  &.min {
    .evaluate-label {
      font-size: 28rpx;
      color: #333333;
    }
  }

  .evaluate-label {
    margin-right: 24rpx;
    font-size: 32rpx;
    color: #333333;
  }
}

.evaluate-content {
  padding: 34rpx;

  .uv-textarea {
    padding: 0;
    border: 0;
  }
}

.evaluate-card {
  background: #fff;
}
</style>