233 lines
6.4 KiB
Vue
233 lines
6.4 KiB
Vue
<template>
|
||
<view class="main">
|
||
<view class="cont">
|
||
<view class="cont_top">
|
||
<view class="cont_top_l">
|
||
<view class="cont_top_text">商品评价 <text class="cont_top_num">{{count}}</text>/{{evalList.length}}</view>
|
||
<view class="cont_top_btn">一键好评</view>
|
||
</view>
|
||
<view class="cont_top_r">匿名</view>
|
||
</view>
|
||
|
||
|
||
<template v-for="(item,index) in evalList" :key="index">
|
||
<view class="cont_shop" @click="unfold(item)">
|
||
<view class="cont_shop_l">
|
||
<view class="cont_shop_img">
|
||
<image class="cont_shop_imgUrl" :src="item.image" mode="widthFix"></image>
|
||
</view>
|
||
<view class="cont_shop_x">
|
||
<view class="cont_shop_title"><text>{{item.storeName}}</text></view>
|
||
<view class="cont_shop_type">
|
||
<block v-for="(i,idx) in item.list" :key="idx">
|
||
<view @click.stop="clickEval(item,i)" class="cont_goos" :class="i.checkedShow?'cont_goos_aver':''"><image class="cont_goos_img" :src="i.checkedShow?i.imgUrl_aver:i.imgUrl" mode="widthFix"></image>{{i.name}}</view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<block v-if="item.show">
|
||
<view class="cont_shop_edit">
|
||
<view class="cont_text">
|
||
<image class="cont_text_img" src="../../static/eval/editeval.png"></image>
|
||
<textarea class="cont_textarea" :disable-default-padding="isIos" placeholder="可以从新鲜度、包装等多个角度描述哦～" v-model="item.comment"></textarea>
|
||
</view>
|
||
<view class="cont_ul">
|
||
|
||
<view class="cont_li" v-for="(img,i) in item.uploadImg" :key="i">
|
||
<view class="cont_upload_remove" @click="delImg(item,i)">
|
||
<image class="cont_upload_remove_img" src="../../static/eval/closeImg.png" mode="widthFix"></image>
|
||
</view>
|
||
<image class="cont_li_img" :src="img" mode="aspectFill"></image>
|
||
</view>
|
||
|
||
<view class="cont_li cont_upload" @click="chooseImage(item)" v-if="item.uploadImg.length <= 5">
|
||
<image class="cont_upload_img" src="../../static/eval/adds.png" mode="widthFix"></image>
|
||
<view class="cont_upload_text">添加图片</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="cont_shop_border"></view>
|
||
</block>
|
||
</template>
|
||
|
||
</view>
|
||
<view style="height: 300rpx;"></view>
|
||
|
||
<view class="footer">
|
||
<view class="footer_btn" :class="count == 0?'opy':''">提交</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { loads } from '@/utils/index.js'
|
||
import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
|
||
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
|
||
import { storeToRefs } from 'pinia';//实现解构付值
|
||
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
|
||
import { orderReplyproduct } from "@/server/api.js"
|
||
const counterStore = useCounterStore(); // 使用 Store
|
||
const { proxy } = getCurrentInstance();
|
||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||
const {statusHeight,headerHeight,statusBartop } = storeToRefs(counterStore);
|
||
const active = ref(0);
|
||
const isIos = ref(false);
|
||
const orderNo = ref("");
|
||
const evalList = ref([]);
|
||
|
||
const count = computed(() => {
|
||
const count = evalList.value.filter(item => item.productScore > 0);
|
||
return count.length
|
||
});
|
||
|
||
const System = () =>{
|
||
const phone = wx.getSystemInfoSync();
|
||
if (phone.platform == 'ios') {
|
||
isIos.value = true
|
||
} else if (phone.platform == 'android') {
|
||
isIos.value = false
|
||
}
|
||
};
|
||
const unfold = (e) =>{
|
||
evalList.value.forEach((item,index)=>{
|
||
if(e.id == item.id){item.show = !item.show;}
|
||
})
|
||
}
|
||
const clickEval = (item,i) =>{
|
||
let productScore = 0;
|
||
evalList.value.forEach(evalList=>{
|
||
if(item.id == evalList.id){
|
||
evalList.list.forEach(item=>{
|
||
if(i.id == item.id){
|
||
item.checkedShow = true;
|
||
if(i.id == 1){
|
||
productScore = 2;
|
||
}else if(i.id == 2){
|
||
productScore = 4;
|
||
}else{
|
||
productScore = 5;
|
||
}
|
||
}else{
|
||
item.checkedShow = false;
|
||
}
|
||
})
|
||
if(item.id == evalList.id){
|
||
item.show = true;
|
||
item.productScore = productScore;
|
||
}
|
||
}
|
||
})
|
||
}
|
||
const api_orderReplyproduct=()=>{
|
||
loads('', true)
|
||
const params = {
|
||
orderNo:orderNo.value
|
||
}
|
||
return orderReplyproduct(params).then(({data}) => {
|
||
uni.hideLoading();
|
||
data.forEach((item,index) => {
|
||
item.id = index+1;
|
||
if(data.length > 1){
|
||
item.show = false;
|
||
}else{
|
||
item.show = true;
|
||
}
|
||
item.comment = "";
|
||
item.pics = "";
|
||
item.productScore = 0;
|
||
item.serviceScore = 0;
|
||
item.uploadImg = [];
|
||
item.list = [
|
||
{
|
||
id:1,
|
||
imgUrl:'../../static/eval/negative.png',
|
||
imgUrl_aver:'../../static/eval/negative_aver.png',
|
||
name:"差评",
|
||
checkedShow:false
|
||
},
|
||
{
|
||
id:2,
|
||
imgUrl:'../../static/eval/ordinary.png',
|
||
imgUrl_aver:'../../static/eval/ordinary_aver.png',
|
||
name:"一般",
|
||
checkedShow:false
|
||
},
|
||
{
|
||
id:3,
|
||
imgUrl:'../../static/eval/good.png',
|
||
imgUrl_aver:'../../static/eval/good_aver.png',
|
||
name:"好评",
|
||
checkedShow:false
|
||
}
|
||
]
|
||
})
|
||
evalList.value = data;
|
||
}).catch(({message}) => {
|
||
uni.hideLoading();
|
||
uni.showModal({
|
||
content:message,
|
||
showCancel: false,
|
||
success: () => {
|
||
uni.navigateBack({
|
||
delta:1
|
||
})
|
||
}
|
||
})
|
||
})
|
||
}
|
||
//删除上传图片
|
||
const delImg = (e,i) =>{
|
||
evalList.value.forEach(item=>{
|
||
if(e.id == item.id){
|
||
console.log('000000')
|
||
const tempFileimg = item.uploadImg.slice()
|
||
// const picture = this.picture.slice()
|
||
tempFileimg.splice(i, 1)
|
||
// picture.splice(i, 1)
|
||
item.uploadImg = tempFileimg
|
||
// this.picture = picture
|
||
}
|
||
})
|
||
}
|
||
//选择图片
|
||
const chooseImage = (e) => {
|
||
uni.chooseImage({
|
||
count: 6, // 最多选择6张
|
||
sizeType: ['original', 'compressed'], // 可选择原图或压缩图
|
||
sourceType: ['album', 'camera'], // 可从相册或相机选择
|
||
success: (res) => {
|
||
// imageList.value = res.tempFilePaths; // 获取临时路径
|
||
evalList.value.forEach(item=>{
|
||
if(e.id == item.id){
|
||
item.uploadImg.push(res.tempFilePaths)
|
||
}
|
||
})
|
||
console.log('evalList--',evalList.value);
|
||
},
|
||
fail: (err) => {
|
||
console.error('选择图片失败:', err);
|
||
uni.showToast({ title: '选择图片失败', icon: 'none' });
|
||
}
|
||
});
|
||
};
|
||
|
||
|
||
|
||
onLoad((options) => {
|
||
System();
|
||
if(options.orderNo){
|
||
orderNo.value = options.orderNo;
|
||
}
|
||
api_orderReplyproduct();
|
||
});
|
||
onShow(() => {});
|
||
onReady(()=>{})
|
||
onPullDownRefresh(()=>{})
|
||
onReachBottom(()=>{})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import './style.scss';
|
||
</style> |