151 lines
4.6 KiB
Vue
151 lines
4.6 KiB
Vue
<template>
|
||
<view class="container">
|
||
|
||
<!-- 评分区域 -->
|
||
<view class="rating-section">
|
||
<!-- 订单编号 -->
|
||
<view class="order-info">
|
||
<text class="order-label">订单编号</text>
|
||
<text class="order-value">{{ itemObj.order_no }}</text>
|
||
</view>
|
||
<view class="goods">
|
||
<view>
|
||
<image :src="itemObj.commodity_order_item_list[0].commodity_pic" class="goodsImg"></image>
|
||
</view>
|
||
<view class="rating">
|
||
<view>很差</view>
|
||
<view>差</view>
|
||
<view>一般</view>
|
||
<view>不错</view>
|
||
<view>满意</view>
|
||
</view>
|
||
</view>
|
||
<!-- 商品品质 -->
|
||
<view class="rating-item">
|
||
<text class="rating-label">商品品质</text>
|
||
<u-rate v-model="qualityRating" size="40" active-color="#FFB400" inactive-color="#EEEEEE" gutter="60"></u-rate>
|
||
</view>
|
||
|
||
<!-- 配送速度 -->
|
||
<view class="rating-item">
|
||
<text class="rating-label">配送速度</text>
|
||
<u-rate v-model="speedRating" size="40" active-color="#FFB400" inactive-color="#EEEEEE" gutter="60"></u-rate>
|
||
</view>
|
||
|
||
<!-- 快递员服务 -->
|
||
<view class="rating-item">
|
||
<text class="rating-label">快递员服务</text>
|
||
<u-rate v-model="serviceRating" size="40" active-color="#FFB400" inactive-color="#EEEEEE" gutter="60"></u-rate>
|
||
</view>
|
||
|
||
<!-- 评价输入 -->
|
||
<view class="comment-section">
|
||
<textarea class="comment-input" placeholder="展开说说对商品的想法吧…" v-model="comment"></textarea>
|
||
</view>
|
||
<!-- 图片上传 -->
|
||
<view class="upload-section">
|
||
<view class="image-list">
|
||
<view class="image-item" v-for="(img, index) in imageList" :key="index">
|
||
<image :src="img" class="uploaded-img"></image>
|
||
<view class="delete-btn" @click="deleteImage(index)">
|
||
<text class="delete-icon">×</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="upload-btn" @click="chooseImage" v-if="imageList.length < 3">
|
||
<image src="https://static.hshuishang.com/myOrder/upload.png" class="upload-icon">
|
||
</image>
|
||
<view class="upload-text">上传图片</view>
|
||
<view class="upload-count">({{ imageList.length }}/3)</view>
|
||
</view>
|
||
</view>
|
||
<!-- 提交按钮 -->
|
||
<view class="submit-btn" @click="submitEvaluate">
|
||
<text class="btn-text">提交</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import uImage from "../../../uni_modules/uview-ui/components/u--image/u--image.vue";
|
||
import { picUrl, NavgateTo, request } from "../../../utils";
|
||
import { apiArr } from "../../../api/afterSale";
|
||
|
||
export default {
|
||
components: { uImage },
|
||
data() {
|
||
return {
|
||
// 评分数据
|
||
qualityRating: 0,
|
||
speedRating: 0,
|
||
serviceRating: 0,
|
||
// 评价内容
|
||
comment: "",
|
||
// 图片列表
|
||
imageList: [],
|
||
itemObj: {},
|
||
};
|
||
},
|
||
methods: {
|
||
// 选择图片
|
||
chooseImage() {
|
||
if (this.imageList.length >= 3) {
|
||
uni.showToast({
|
||
title: "最多上传3张图片",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
uni.chooseImage({
|
||
count: 3 - this.imageList.length,
|
||
sizeType: ["original", "compressed"],
|
||
sourceType: ["album", "camera"],
|
||
success: (res) => {
|
||
this.imageList = this.imageList.concat(res.tempFilePaths);
|
||
},
|
||
});
|
||
},
|
||
// 删除图片
|
||
deleteImage(index) {
|
||
this.imageList.splice(index, 1);
|
||
},
|
||
// 提交评价
|
||
submitEvaluate() {
|
||
if (!this.comment.trim() && this.imageList.length === 0) {
|
||
uni.showToast({
|
||
title: "请至少填写评价内容或上传图片",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
const params = {
|
||
order_id: this.itemObj.id,
|
||
goods_id: this.itemObj.commodity_order_item_list[0].goods_id,
|
||
user_id: uni.getStorageSync("userId"),
|
||
quality_score: this.qualityRating,
|
||
speed_score: this.speedRating,
|
||
service_score: this.serviceRating,
|
||
user_review: this.comment,
|
||
review_image: this.imageList,
|
||
}
|
||
request(apiArr.createReview, "POST", params).then((res) => {
|
||
uni.showToast({
|
||
title: "评价提交成功",
|
||
icon: "success",
|
||
});
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
}, 1500);
|
||
});
|
||
},
|
||
},
|
||
onLoad(options) {
|
||
this.itemObj = JSON.parse(decodeURIComponent(options.item));
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
@import url("./index.css");
|
||
</style> |