Skip to content

G
groupPurchase-miniapp
Commit 7338687b authored by 陈宗胤（贵阳日报）'s avatar 陈宗胤（贵阳日报）
Browse files
Options

1

parent 9fc608eb
Show whitespace changes
Inline Side-by-side
Showing with 152 additions and 107 deletions
src/pages/assistingAgriculture/commentList/card.vue
View file @ 7338687b
<template>
<div class="card">
<div class="card" v-for="(item, index) in commentData" :key="index">
<div class="card-top">
<div class="avatar flex-align-center">
<img src="/static/assistingAgriculture/comment/1.png" alt="" />
<img :src="item.avatar" alt="" />
<div class="name">
<p>不爱吃鱼的小猫咪</p>
<div class="flex-align-center">
<img src="/src/static/assistingAgriculture/comment/emoji.png" alt="" />
5.0分 好评
<p>{{ item.nickName }}</p>
<div class="grade flex-align-center">5.0分</div>
</div>
</div>
</div>
<div class="info">2024-08-03发表于贵州 ｜ 朋友出游 ｜ 2024-07-22出发</div>
<div class="info">{{ item.createTime[0] }}发表</div>
</div>
<div class="card-content">
<div class="text-wrap" :style="showMore ? 'max-height:none;' : ''">
跟团游行程紧凑有序，充分利用了时间，让游客能够在有限的时间内充分游览黄果树的主要景点，如黄果树大瀑布、陡坡塘瀑布、天星桥景区等,不留遗憾。导游专业且热情，对景区有深入的了解，能够生动有趣地讲解景点的历史、文化和特色,同时耐心解答游跟团游行程紧凑有序，充分利用了时间，让游客能够在有限的时间内充分游览黄果树的主要景点，如黄果树大瀑布、陡坡塘瀑布、天星桥景区等,不留遗憾。导游专业且热情，对景区有深入的了解，能够生动有趣地讲解景点的历史、文化和特色,同时耐心解答游跟团游行程紧凑有序，充分利用了时间，让游客能够在有限的时间内充分游览黄果树的主要景点，如黄果树大瀑布、陡坡塘瀑布、天星桥景区等,不留遗憾。导游专业且热情，对景区有深入的了解，能够生动有趣地讲解景点的历史、文化和特色,同时耐心解答游
<div class="more" v-if="!showMore" @click="showMore = true">全文</div>
<div class="text-wrap">
{{ item.evaluation }}
</div>
<div class="img-wrap">
<wd-img
v-for="v in Math.floor(Math.random() * 6 + 1)"
:key="v"
:src="`/src/static/assistingAgriculture/comment/${v}.png`"
enable-preview
/>
<wd-img v-for="(item, index) in item.images" :key="index" :src="item" enable-preview />
</div>
</div>
</div>
......@@ -33,6 +24,12 @@
<script setup>
import { ref } from 'vue';
const showMore = ref(false);
const props = defineProps({
commentData: {
type: Array,
default: () => [],
},
});
</script>
<style lang="scss" scoped>
......@@ -40,6 +37,7 @@ const showMore = ref(false);
background-color: #fff;
border-radius: 16rpx;
padding: 20rpx;
margin-bottom: 10rpx;
.card-top {
padding-bottom: 20rpx;
border-bottom: 2rpx solid #f3f3f3;
......@@ -55,23 +53,23 @@ const showMore = ref(false);
font-size: 28rpx;
color: #3d3d3d;
}
div {
.grade {
margin-top: 18rpx;
font-size: 16rpx;
background: rgba(253, 223, 109, 0.1686);
line-height: 24rpx;
color: #e1961d;
width: 116rpx;
// width: 116rpx;
border-radius: 200rpx;
padding-left: 32rpx;
// padding-left: 32rpx;
box-sizing: border-box;
position: relative;
img {
height: 24rpx;
position: absolute;
left: 0;
width: 24rpx;
}
// img {
// height: 24rpx;
// position: absolute;
// left: 0;
// width: 24rpx;
// }
}
}
}
......@@ -88,7 +86,7 @@ const showMore = ref(false);
line-height: normal;
color: #3d3d3d;
overflow: hidden;
max-height: 150rpx;
// max-height: 150rpx;
position: relative;
.more {
position: absolute;
......
src/pages/assistingAgriculture/commentList/index.vue
View file @ 7338687b
......@@ -2,37 +2,52 @@
<div class="comment-list">
<div class="top-bar flex-align-center">
<wd-icon name="thin-arrow-left"></wd-icon>
<wd-search hide-cancel placeholder="点评关键词/特色" placeholder-left />
<wd-search @search="search" hide-cancel placeholder="点评关键词/特色" placeholder-left />
</div>
<scroll-view class="content" :scroll-y="true">
<scroll-view @scrolltolower="scrolltolower" class="content" :scroll-y="true">
<div class="filter-box">
<div class="score-sort flex-between">
<div class="score">
<span class="num">6.9</span>
<span class="t1">超棒</span>
<span class="t2">527条</span>
<wd-icon name="check-outline" class="t1"></wd-icon>
<span class="num">{{ topData.score }}</span>
<!-- <span class="t1">超棒</span> -->
<span class="t2">{{ topData.count }}条</span>
<!-- <wd-icon name="check-outline" class="t1"></wd-icon> -->
</div>
<div class="sort">
<!-- <div class="sort">
<span class="active">推荐排序</span>
｜
<span>重新点评</span>
</div>
</div> -->
</div>
<div class="type flex-between">
<p class="active">全部</p>
<p v-for="(v, i) in commentTypeList" :key="i">{{ v.text }}({{ v.value }})</p>
<p @tap="choice(-1)" :class="{ active: select === -1 }">全部</p>
<p
@tap="choice(i, v.type)"
:class="{ active: select === i }"
v-for="(v, i) in commentTypeList"
:key="i"
>
{{ v.text }}({{ v.value }})
</p>
</div>
<div class="tags">
<div class="item" v-for="(v, i) in tagList" :key="i">
{{ v.evaluation }}({{ v.count }})
</div>
<div class="tags" :style="{ 'max-height': showMoreTag ? '600px' : '90rpx' }">
<div class="item" v-for="(v, i) in tagList" :key="i">{{ v.text }}({{ v.value }})</div>
<div class="more" @click="showMoreTag = !showMoreTag">
<!-- <div class="more" @click="showMoreTag = !showMoreTag">
更多
<wd-icon name="arrow-down" :class="{ rotate: showMoreTag }"></wd-icon>
</div>
</div> -->
</div>
</div>
<div class="card-list">
<card v-for="v in 10" :key="v" />
<card :commentData="commentData" />
<view
style="width: 100%; text-align: center; font-size: 24rpx; margin: 10rpx 0; color: #888989"
v-if="show"
>
没有更多啦~
</view>
</div>
</scroll-view>
<div class="back">
......@@ -44,91 +59,120 @@
<script setup>
import { ref } from 'vue';
import card from './card.vue';
import { getCommentList } from '../../../api/packageDetail';
const commentTypeList = [
import { getCommentList, getEvalStatis } from '../../../api/packageDetail';
const commentTypeList = reactive([
{
text: '图/视频',
value: 183,
value: 0,
type: 'img',
},
{
text: '追评',
value: 5,
value: 0,
type: 'append',
},
{
text: '中差评',
value: 5,
value: 0,
type: 'diff',
},
{
text: '好评',
value: 514,
},
];
const tagList = [
{
text: '餐食棒',
value: 44,
},
{
text: '导游负责耐心',
value: 44,
},
{
text: '车辆条件好',
value: 514,
},
{
text: '餐食棒',
value: 44,
},
{
text: '餐食棒',
value: 44,
},
{
text: '导游负责耐心',
value: 44,
},
{
text: '行程安排合理',
value: 5,
value: 0,
type: 'good',
},
{
text: '车辆条件好',
value: 514,
},
{
text: '行程安排合理',
value: 5,
},
{
text: '导游负责耐心',
value: 44,
},
{
text: '行程安排合理',
value: 5,
},
{
text: '车辆条件好',
value: 514,
},
];
]);
const imgUrl = import.meta.env.VITE_APP_IMG_URL;
const tagList = ref([]);
const commentData = ref([]);
const commentParameters = {
shopId: '1818876196597334017',
prodId: '43828',
current: 1,
size: 10,
};
const show = ref(false);
let total;
const select = ref(-1);
const topData = ref({});
onLoad((options) => {
getEvalStatisFn();
getCommentListFn();
});
const search = (e) => {
reset();
commentParameters.evaluation = e.value;
getCommentListFn();
};
// 数据重置
const reset = () => {
commentParameters.current = 1;
commentData.value = [];
show.value = false;
};
const scrolltolower = () => {
console.log('触底加载触底加载触底加载');
if (commentData.value.length < total) {
commentParameters.current++;
getCommentListFn();
return;
}
show.value = true;
};
// 触底加载
onReachBottom(() => {
if (cardData2.value.length + 5 < total) {
listParams.current++;
getMerchantListPaging();
}
});
const showMoreTag = ref(false);
// 评论列表数量统计和相同好评最多的评语
const getEvalStatisFn = () => {
getEvalStatis({ prodId: commentParameters.prodId }).then((res) => {
console.log('评论数量统计和相同好评最多的评语', res);
res.data.score = res.data.score.toFixed(1);
topData.value = res.data;
tagList.value = res.data.evals;
commentTypeList[0].value = res.data.imgCount;
commentTypeList[1].value = res.data.append;
commentTypeList[2].value = res.data.diffCount;
commentTypeList[3].value = res.data.goodCount;
});
};
// 评论列表
const getCommentListFn = () => {
xma.showLoading({
title: '加载中...',
mask: true,
});
getCommentList(commentParameters).then((res) => {
console.log('打印评论', res);
xma.hideLoading();
total = res.data.total;
res.data.records.forEach((v) => {
v.avatar = imgUrl + v.avatar;
v.prodPic = imgUrl + v.prodPic;
v.createTime = v.createTime.split(' ');
if (v.images) {
v.images = v.images.split(',').map((item) => {
item = imgUrl + item;
return item;
});
}
// console.log('v.images', v.images);
});
console.log('res.data.records', res.data.records);
commentData.value = [...commentData.value, ...res.data.records];
});
};
// tabs选择
const choice = (i, type) => {
select.value = i;
reset();
commentParameters.type = type;
getCommentListFn();
};
</script>
<style lang="scss" scoped>
......@@ -188,6 +232,7 @@ uni-page-body {
.type {
font-size: 22rpx;
color: #767676;
box-sizing: border-box;
.active {
color: #3d3d3d;
font-size: 24rpx;
......@@ -212,7 +257,7 @@ uni-page-body {
flex-wrap: wrap;
gap: 10rpx;
position: relative;
max-height: 80rpx;
// max-height: 80rpx;
overflow: hidden;
transition: all 0.3s;
.item {
......
src/pages/index/index.vue
View file @ 7338687b
......@@ -14,7 +14,7 @@
v-for="(item, index) in classificationT"
:key="index"
>
<image class="imgs" :src="item.icon" mode="widthFix" />
<image class="imgs" :src="item.icon" />
<text class="introduce">{{ item.categoryName }}</text>
</view>
</view>
......@@ -25,7 +25,7 @@
v-for="(item, index) in classificationB"
:key="index"
>
<image class="imgs" :src="item.icon" mode="widthFix" />
<image class="imgs" :src="item.icon" />
<text class="introduce">{{ item.categoryName }}</text>
</view>
</view>
......@@ -564,7 +564,7 @@ page {
display: flex;
justify-content: space-evenly;
margin-top: 32rpx;
align-items: center;
align-items: flex-end;
.choice {
display: flex;
flex-direction: column;
......@@ -577,6 +577,7 @@ page {
Source Han Sans;
.imgs {
width: 88rpx;
height: 88rpx;
}
}
}
......@@ -584,7 +585,7 @@ page {
display: flex;
justify-content: space-evenly;
margin-top: 34rpx;
align-items: center;
align-items: flex-end;
.choice {
display: flex;
flex-direction: column;
......@@ -597,6 +598,7 @@ page {
Source Han Sans;
.imgs {
width: 68rpx;
height: 68rpx;
margin-bottom: 8rpx;
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment