xiaokuaisong-xiaochengxu/uniapp04/pages/orderEvaluation/orderEvaluation.vue

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app'; 
import { apiImageUrl } from '../../API/api';

const orderData = ref(null);
const userId = ref(uni.getStorageSync("userId")); // 从存储获取用户ID

const getOrder = () => {
  uni.request({
    url: apiImageUrl + '/api/orders/get/my',
    method: 'GET',
    data: {
      id: uni.getStorageSync("evaluationOrderID")
    },
	header: {
	  'Content-Type': 'application/json',
	  'cookie': uni.getStorageSync("cookie") || ''
	},
    success(res) {
      console.log(res);
      orderData.value = res.data.data;
      uni.setStorageSync("orderData", orderData.value)
      showBusinessReview.value = true;
      showDeliveryReview.value = !!orderData.value.errandId;
    },
    fail(err) {
      console.log(err);
    }
  })
}

onMounted(() => {
  getOrder();
});

// 评分和评价内容
const rateValueBusiness = ref(0);
const rateValueDelivery = ref(0);
const reviewContentBusiness = ref('');
const reviewContentDelivery = ref('');

// 显示控制
const showBusinessReview = ref(false);
const showDeliveryReview = ref(false);

// 评分变化处理
const onChangeBusiness = (e) => {
  rateValueBusiness.value = e.value;
};

const onChangeDelivery = (e) => {
  rateValueDelivery.value = e.value;
};

// 提交评价函数
const orderEvaluation = (isDelivery) => {
  const baseData = {
    orderId: orderData.value.id, // 订单ID
    userId:  orderData.value.userId,        // 用户ID
    rating: isDelivery ? rateValueDelivery.value : rateValueBusiness.value,
    review: isDelivery ? reviewContentDelivery.value : reviewContentBusiness.value
  };

  const requestData = {
    ...baseData,
    ratedEntityId: isDelivery===1 ? orderData.value.errandId : orderData.value.businessId,
    ratedEntityType: isDelivery ? 1 : 0
  };

  uni.request({
    url: apiImageUrl + '/api/level/add',
    method: 'POST',
    data: requestData,
	header: {
	  'Content-Type': 'application/json',
	  'cookie': uni.getStorageSync("cookie") || ''
	},
    success(res) {
      console.log(res);
      if(res.data.code===0){
		  uni.showToast({
		    title: '评价成功',
		    icon: 'success'
		  });
		  setTimeout(() => {
		    uni.navigateBack();
		  }, 1500);
	  }
      // 提交成功后跳转回订单页
	  else {
		  uni.showToast({
		  	title:res.description,
			 icon: 'fail'
		  })
	  }
     
    },
    fail(err) {
      console.log(err);
      uni.showToast({
        title: '提交失败',
        icon: 'error'
      });
    }
  });
}
</script>

<template>
  <view class="viewport">
    <!-- 商家评价 -->
    <view v-if="showBusinessReview" class="center">
      <p class="title">评价商家</p>
      <uni-rate 
        v-model="rateValueBusiness" 
        @change="onChangeBusiness" 
        class="rate" 
      />
      <textarea 
        v-model="reviewContentBusiness" 
        class="review-content" 
        placeholder="请输入商家评价内容"
      ></textarea>
      <button class="submit-button" @click="orderEvaluation(0)">提交商家评价</button>
    </view>
    
    <!-- 跑腿评价 -->
    <view v-if="showDeliveryReview && orderData?.errandId" class="center">
      <p class="title">评价跑腿</p>
      <uni-rate 
        v-model="rateValueDelivery" 
        @change="onChangeDelivery" 
        class="rate" 
      />
      <textarea 
        v-model="reviewContentDelivery" 
        class="review-content" 
        placeholder="请输入跑腿评价内容"
      ></textarea>
      <button class="submit-button" @click="orderEvaluation(1)">提交跑腿评价</button>
    </view>
  </view>
</template>
<style lang="scss">
page {
  height: 100vh;
  overflow: hidden;
  background-color: #4095e5;
}
.active {
	float: left;
	width: 30%;
	height: 100%;
}
.img {
	margin: 15px;
}
.aboutMessage {
	float: right;
	width: 240px;
	height: 100%;
	.title {
		font-size: 20px;
		padding: 10px;
		font-weight: 700;
	}
	.total {
		color: #999;
		padding-left: 10px;
	}
	.money {
		color: #4095e5;
		padding: 10px;
		font-weight: 700;
	}
}
.message {
	width: 90%;
	height: 100px;
	border-radius: 25px;
	background-color: #fff;
	margin: 0 auto;
}

.viewport {
	width: 90%;
	height: 100vh;
	border-radius: 15px;
	background-color: #fff;
	margin: 0 auto;
}
.center {
	width: 80%;
	height: 350px;
	margin: 0 auto;
	padding-top: 20px;
	.title {
		font-size: 20px;
		padding: 10px;
		font-weight: 700;
	}
}
.review-content {
	margin-top: 20px;
  resize: none;
  height: 100px;
  margin-bottom: 16px;
}

.submit-button {
  background-color: #4095e5;
  color: white;
  padding: 8px 16px;
  border: none;
  line-height: 30px;
  border-radius: 30px;
}
</style>