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

<template>
  <layout class="evaluate">
    <uv-navbar
      :fixed="false"
      title="评价"
      left-arrow
      @leftClick="$onClickLeft"
    />
    <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="pics"
          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 { navigateTo, back } from '@/utils/router'
import { onLoad } from '@dcloudio/uni-app'
import { useMainStore } from '@/store/store'
import { orderComments, orderCancel, orderInfo, orderTake, orderDelete } from '@/api/order'


import {
  getAddressDel,
  getAddressDefault,
  getAddressAddAndEdit,
  getAddressList,
  getAddressCityList,
} from '@/api/address'

const productScore = ref(0)
const serviceScore = ref(0)
const unique = ref(null)
const pics = ref([])
const comment = ref("")
const orderInfoData = ref(null)

const handleOrderComments = async () => {
  const res = await orderComments([{
    "comment": comment.value,
    "pics": pics.value.toString(),
    "productScore": productScore.value,
    "serviceScore": serviceScore.value,
    "unique": unique.value,
  }])
  console.log("--> % handleOrderComments % res:\n", res)
}

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


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

const uploadFilePromise = (url) => {
  return new Promise((resolve, reject) => {
    let a = uni.uploadFile({
      url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
      filePath: url,
      name: 'file',
      formData: {
        user: 'test'
      },
      success: (res) => {
        setTimeout(() => {
          resolve(res.data.data)
        }, 1000)
      }
    });
  })
}



onLoad((option) => {
  unique.value = option.unique
  // unique.value = option.orderId
})



</script>

<style lang="less">
.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>