325 lines
9.2 KiB
Vue
325 lines
9.2 KiB
Vue
<template>
|
||
<view class="mian">
|
||
<view class="head">
|
||
<view class="eval_tag" v-for="(item,index) in reviewTags" :key="index" @click="referClick(item,index)" :class="act == index?'eval_tag_active':''" ><image v-if="item.imgUrl" class="eval_tag_img" :src="item.imgUrl" mode="widthFix"></image>{{item.tag}} <text v-if="item.num >= 1">{{item.num >= 5000?'5000+':item.num}}</text></view>
|
||
</view>
|
||
<view class="eval_item" v-for="(item,index) in List" :key="index">
|
||
<view class="eval_item_top">
|
||
<view class="eval_item_l">
|
||
<image class="eval_item_userimg" :src="item.avatar" mode="widthFix"></image>
|
||
<view class="eval_item_username">{{item.nickname}}</view>
|
||
<!-- <view class="eval_item_userdesc">买过3次</view> -->
|
||
<view class="eval_item_usertext"><image class="eval_item_usertext_img" :src="item.evalImg" lazy-load mode="widthFix"></image>{{item.evalName}}</view>
|
||
</view>
|
||
<view class="eval_item_r"></view>
|
||
</view>
|
||
<view class="eval_item_text"><text>{{item.comment}}</text></view>
|
||
<view class="eval_item_ul">
|
||
|
||
<view class="eval_item_li" v-for="(pics,index) in item.pics" :key="index">
|
||
<image :src="pics" lazy-load mode="widthFix" @click.stop="previewImage(item,index)"></image>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="eval_item_bottom">
|
||
<view class="eval_item_time">{{item.createTime}}</view>
|
||
<!-- <view class="eval_item_numa"><image src="../../static/eval/heart.png" lazy-load mode="widthFix"></image>67</view> -->
|
||
</view>
|
||
</view>
|
||
<view style="height: 200rpx;"></view>
|
||
<!-- 底部 -->
|
||
<view class="footer">
|
||
<view class="footer_cont">
|
||
<view class="footer_l">
|
||
<view class="footer_li">
|
||
<view class="footer_icon" @click="favorite">
|
||
<image class="footer_icon_img" :src="productInfo.favor_img" mode="widthFix"></image>
|
||
</view>
|
||
<view class="footer_name">收藏</view>
|
||
</view>
|
||
<view class="footer_li" @click="goCart()">
|
||
<view class="footer_icon">
|
||
<view class="footer_amount" v-if="cartcount > 0">{{cartcount}}</view>
|
||
<image class="footer_icon_img" src="../../static/shopdetail/cart.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="footer_name">购物车</view>
|
||
</view>
|
||
</view>
|
||
<view class="footer_r">
|
||
<view class="footer_btn footer_btn_bcg border_l" @click="addCartShop()">加入购物车</view>
|
||
<!-- <view class="footer_btn footer_btn_bcg border_r" @click="orderConfirm">立即下单</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<multi
|
||
ref="shopData"
|
||
@add-success="handleAddSuccess"
|
||
@add-error="handleAddError"
|
||
></multi>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { loads } from '@/utils/index.js'
|
||
import multi from '@/components/multi/multi.vue'
|
||
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"
|
||
const counterStore = useCounterStore(); // 使用 Store
|
||
const { proxy } = getCurrentInstance();
|
||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||
const {statusHeight,headerHeight,statusBartop,token,cartcount } = storeToRefs(counterStore);
|
||
import { replyconfig,replylist,frontcartcount,frontdetail,collectcancel,collectadd } from '@/server/api'
|
||
const productId = ref('');//产品id
|
||
const havePics = ref('');//有图传1
|
||
const latest = ref('');//查最新传1
|
||
const limits = ref(10);//一页查多少条
|
||
const pages = ref(0);//第几页
|
||
const tag = ref('');//评论标名称
|
||
const type = ref(0);//评论等级:0全部，1好评，2中评，3差评
|
||
const total = ref(0);
|
||
const reviewTags = ref([]);
|
||
const picsCount = ref('');
|
||
const sumCount = ref('');
|
||
const decs = ref('');
|
||
const List = ref([]);
|
||
const act = ref(0);
|
||
const productInfo = ref({})
|
||
const shopData = ref({});
|
||
const referClick=(item,index)=>{
|
||
if(act.value == index) return false;
|
||
act.value = index;
|
||
if(index == 0){
|
||
havePics.value = '';
|
||
latest.value = '';
|
||
tag.value = '';
|
||
type.type = 0;
|
||
}else if(index == 1 && item.tag == '图片'){
|
||
havePics.value = 1;
|
||
latest.value = '';
|
||
tag.value = '';
|
||
type.type = 0;
|
||
}else if(index == 2){
|
||
havePics.value = '';
|
||
latest.value = 1;
|
||
tag.value = '';
|
||
type.type = 0;
|
||
}else{
|
||
havePics.value = '';
|
||
latest.value = '';
|
||
tag.value = item.tag;
|
||
type.type = 0;
|
||
}
|
||
List.value = [];
|
||
total.value = 0;
|
||
decs.value = '';
|
||
pages.value = 0;
|
||
api_replylist()
|
||
}
|
||
const api_detail=()=>{
|
||
loads('', true);
|
||
return frontdetail(productId.value).then(({data}) => {
|
||
uni.hideLoading();
|
||
if(data.userCollect){
|
||
data.favor_img = "../../static/shopdetail/collect_acer.png"
|
||
}else{
|
||
data.favor_img = "../../static/shopdetail/collect.png"
|
||
}
|
||
productInfo.value = data;
|
||
})
|
||
.catch(({message}) => {
|
||
uni.hideLoading();
|
||
uni.showModal({
|
||
content:message,
|
||
showCancel: false
|
||
})
|
||
})
|
||
}
|
||
//购物车数量
|
||
const api_frontcartcount=()=>{
|
||
frontcartcount().then(({data}) => {cartcount.value = data.count;})
|
||
}
|
||
const addCartShop = () =>{
|
||
const item = {
|
||
image:productInfo.value.image,
|
||
storeName:productInfo.value.storeName,
|
||
price:productInfo.value.price,
|
||
otPrice:productInfo.value.otPrice,
|
||
specType:productInfo.value.specType,
|
||
id:productInfo.value.id
|
||
}
|
||
shopData.value.addCart(item,1);
|
||
}
|
||
// 加入购物车成功回调
|
||
const handleAddSuccess = (data) => {}
|
||
// 加入购物车失败回调
|
||
const handleAddError = (error) => {}
|
||
const api_replyconfig=()=>{
|
||
return replyconfig(productId.value).then(({data}) => {
|
||
let arr = [
|
||
{tag:"全部",num:data.sumCount},
|
||
{tag:'最新',num:0,imgUrl:'../../static/eval/newest.png'},
|
||
]
|
||
let imgArr = [
|
||
{tag:'图片',num:data.picsCount,imgUrl:'../../static/eval/img.png'}
|
||
]
|
||
if(data.picsCount >= 1){
|
||
arr.splice(1,0, ...imgArr); // 在索引 1 的位置插入，不删除任何元素
|
||
}
|
||
data.reviewTags.unshift(...arr);
|
||
if(tag.value){
|
||
data.reviewTags.forEach((item,index)=>{
|
||
if(tag.value == item.tag){act.value = index}
|
||
})
|
||
}
|
||
reviewTags.value = data.reviewTags;
|
||
picsCount.value = data.picsCount;
|
||
sumCount.value = data.sumCount;
|
||
})
|
||
.then(()=>api_replylist())
|
||
.then(()=>api_detail())
|
||
.then(()=>api_frontcartcount())
|
||
.catch(({message}) => {
|
||
uni.showModal({
|
||
content:message,
|
||
showCancel: false
|
||
})
|
||
})
|
||
}
|
||
const previewImage=(item,i)=>{
|
||
uni.previewImage({
|
||
current: i,
|
||
urls:item.pics
|
||
});
|
||
};
|
||
const api_replylist=()=>{
|
||
pages.value = pages.value + 1;
|
||
decs.value = "—— 加载中... ——";
|
||
if(List.value.length > 0 && List.value.length >= total.value){
|
||
decs.value = "—— 嗷呜，已经到底啦 ——";
|
||
return false
|
||
}
|
||
const params = {
|
||
productId:productId.value,
|
||
page:pages.value,
|
||
limit:limits.value
|
||
};
|
||
if(havePics.value){
|
||
params.havePics = havePics.value;
|
||
}
|
||
if(latest.value){
|
||
params.latest = latest.value;
|
||
}
|
||
if(tag.value){
|
||
params.tag = tag.value;
|
||
}
|
||
if(type.value == 1 || type.value == 2 || type.value == 3){
|
||
params.type = type.value
|
||
}else{
|
||
params.type = type.value;
|
||
}
|
||
return replylist(params).then(({data}) => {
|
||
total.value = data.total;
|
||
decs.value = '—— 上拉加载更多 ——'
|
||
data.list.forEach((item,index)=>{
|
||
if(item.score >= 4){
|
||
item.evalName = '好评',
|
||
item.evalImg = '../../static/eval/praise.png'
|
||
}else if(item.score > 2 && item.score < 4){
|
||
item.evalName = '中评',
|
||
item.evalImg = '../../static/eval/praise.png'
|
||
}else if(item.score <= 2){
|
||
item.evalName = '差评',
|
||
item.evalImg = '../../static/eval/praise.png'
|
||
}else{
|
||
item.evalName = '',
|
||
item.evalImg = ''
|
||
}
|
||
})
|
||
List.value = List.value.concat(data.list);
|
||
if(List.value < total.value){
|
||
decs.value = '—— 上拉加载更多 ——'
|
||
}else{
|
||
decs.value = '—— 嗷呜，已经到底啦 ——';
|
||
}
|
||
}).catch(({message}) => {
|
||
uni.showModal({
|
||
content:message,
|
||
showCancel: false
|
||
})
|
||
})
|
||
}
|
||
const favorite = ()=>{
|
||
if(productInfo.value.userCollect){
|
||
api_collectcancel();
|
||
}else{
|
||
api_collectadd();
|
||
}
|
||
}
|
||
const api_collectadd=()=>{
|
||
loads('', true);
|
||
let data = {
|
||
category:"store",
|
||
id:productInfo.value.id
|
||
}
|
||
return collectadd(data).then(({message}) => {
|
||
uni.hideLoading();
|
||
api_detail();
|
||
}).catch(({message}) => {
|
||
uni.hideLoading();
|
||
uni.showModal({
|
||
content:message,
|
||
showCancel: false
|
||
})
|
||
})
|
||
}
|
||
const api_collectcancel=()=>{
|
||
loads('', true);
|
||
return collectcancel(productInfo.value.id).then(({message}) => {
|
||
uni.hideLoading();
|
||
api_detail();
|
||
}).catch(({message}) => {
|
||
uni.hideLoading();
|
||
uni.showModal({
|
||
content:message,
|
||
showCancel: false
|
||
})
|
||
})
|
||
}
|
||
onLoad((options) => {
|
||
if(options.productId){
|
||
productId.value = options.productId;
|
||
}
|
||
if(options.havePics){
|
||
havePics.value = options.havePics;
|
||
}
|
||
if(options.latest){
|
||
latest.value = options.latest;
|
||
}
|
||
if(options.tag){
|
||
tag.value = options.tag;
|
||
}
|
||
if(options.type == 0 || options.type == 1 || options.type == 2 || options.type == 3){
|
||
type.value = options.type;;
|
||
}
|
||
api_replyconfig();
|
||
});
|
||
onShow(() => {});
|
||
onReady(()=>{})
|
||
onPullDownRefresh(()=>{
|
||
List.value = [];
|
||
total.value = 0;
|
||
decs.value = '';
|
||
pages.value = 0;
|
||
api_replyconfig();
|
||
uni.stopPullDownRefresh();
|
||
})
|
||
onReachBottom(()=>{
|
||
api_replylist();
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import './style.scss';
|
||
</style> |