topnuomi
/
xx-applets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加评价页面

This commit is contained in:
TOP糯米 2023-03-29 01:13:19 +08:00
parent 5b409e267a
commit fb73175426
3 changed files with 306 additions and 2 deletions
src
components/appraise
group.vuesection.vue
pages/service
detail.vue

207
src/components/appraise/group.vue Normal file
View File

@ -0,0 +1,207 @@
<template>
<view class="component-appraise-group">
<view class="group-cate-group">
<view class="cate-item" :class="{ active: cate == 0 }" @click="cate = 0">
<text>全部</text>
</view>
<view class="cate-item" :class="{ active: cate == 1 }" @click="cate = 1">
<text>有图</text>
</view>
<view class="cate-item" :class="{ active: cate == 2 }" @click="cate = 2">
<text>文字</text>
</view>
</view>
<view class="appraise-list-box">
<view class="appraise-item" v-for="(item, index) in list" :key="index">
<view class="appraise-left">
<image class="avatar" :src="item.avatar" mode="aspectFill" />
</view>
<view class="appraise-right">
<view class="head">
<text class="nickname">{{ item.nickname }}</text>
<text class="date">{{ item.createTime }}</text>
<text class="desc">
<text class="area">{{ item.area }}</text>
<text class="worker">服务人员：{{ item.worker }}</text>
</text>
<view class="grade">
<uni-rate :readonly="true" :value="item.grade" :allowHalf="false" :size="utils.rpx2px(40)" />
</view>
</view>
<view class="tags">
<view class="tag" v-for="(tag, tagIdx) in item.tags" :key="tagIdx">{{ tag }}</view>
</view>
<view v-show="item.content != ''" class="content">
<rich-text :nodes="item.content"></rich-text>
</view>
<view v-show="item.images.length > 0" class="image-group">
<view class="image-item" v-for="(image, imageIdx) in item.images" :key="imageIdx">
<image class="image" :src="image" mode="aspectFill" @click="previewImage(item.images, imageIdx)" />
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import UniRate from "@/uni_modules/uni-rate/components/uni-rate/uni-rate.vue";
export default {
name: "appraise-group",
data() {
return {
utils: this.$utils,
tabHeight: 0,
cate: 0,
list: [
{
id: 1,
avatar: "https://xiongxiong.vipwjf.com/upload/portal/20230215/93a0f7f676b470c40e25cc3b5c16db3e.png",
nickname: "李先生",
createTime: "2022-10-20 22:48:13",
tags: ["技术专业", "技术专业", "技术专业"],
area: "四川省绵阳市",
worker: "李师傅",
grade: 5,
images: [
"https://xiongxiong.vipwjf.com/upload/portal/20230215/93a0f7f676b470c40e25cc3b5c16db3e.png",
"https://xiongxiong.vipwjf.com/upload/portal/20230215/93a0f7f676b470c40e25cc3b5c16db3e.png",
"https://xiongxiong.vipwjf.com/upload/portal/20230215/93a0f7f676b470c40e25cc3b5c16db3e.png",
"https://xiongxiong.vipwjf.com/upload/portal/20230215/93a0f7f676b470c40e25cc3b5c16db3e.png",
],
content: "测试评价内容",
},
],
};
},
components: {
UniRate,
},
created() {},
mounted() {},
destroyed() {},
methods: {
changeCate(index) {
this.cateIndex = index;
},
previewImage(list, index) {
uni.previewImage({
urls: list,
current: index,
});
},
},
};
</script>
<style lang="less" scoped>
.component-appraise-group {
width: 100%;
.group-cate-group {
width: 100%;
display: flex;
flex-wrap: wrap;
line-height: 32rpx;
margin-bottom: 40rpx;
.cate-item {
font-size: 24rpx;
color: #333333;
margin-right: 40rpx;
transition: all 0.35s;
}
.cate-item.active {
font-size: 32rpx;
font-weight: bold;
color: #333333;
}
}
.appraise-list-box {
width: 100%;
.appraise-item {
box-sizing: border-box;
padding: 30rpx;
border: 2rpx solid #d7d7d7;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
}
.appraise-left {
.avatar {
width: 70rpx;
height: 70rpx;
box-sizing: border-box;
border: 2rpx solid #999999;
}
}
.appraise-right {
width: 525rpx;
.head {
position: relative;
width: 100%;
}
.nickname,
.date,
.desc {
display: block;
}
.nickname {
font-size: 30rpx;
line-height: 30rpx;
color: #333333;
}
.date {
font-size: 22rpx;
line-height: 22rpx;
color: #999999;
margin: 18rpx 0;
}
.desc {
font-size: 22rpx;
line-height: 22rpx;
color: #999999;
}
.area {
margin-right: 30rpx;
}
.tags {
width: 100%;
margin: 30rpx 0;
}
.tag {
display: inline-block;
font-size: 22rpx;
line-height: 22rpx;
color: #666666;
padding: 12rpx 24rpx;
background: #f6f6f6;
border-radius: 23rpx;
margin-right: 24rpx;
}
}
.grade {
position: absolute;
top: 0;
right: 0;
}
.content {
font-size: 28rpx;
font-size: #666666;
}
.image-group {
width: 100%;
margin-top: 20rpx;
}
.image-item {
display: inline-block;
width: 110rpx;
height: 110rpx;
margin-right: 20rpx;
.image {
width: 100%;
height: 100%;
}
}
}
</style>

89
src/components/appraise/section.vue Normal file
View File

@ -0,0 +1,89 @@
<template>
<view class="component-appraise-section">
<view class="appraise-total"> 累计 {{ total }} 条真实用户评价 </view>
<view class="appraise-tags-group">
<view class="tag-item" v-for="(item, index) in tags" :key="index">
<text>{{ item.name }}（{{ item.count }}）</text>
</view>
</view>
<div class="appraise-group-box">
<appraise-group />
</div>
</view>
</template>
<script>
import AppraiseGroup from "@/components/appraise/group";
export default {
name: "appraise-section",
data() {
return {
total: 12345,
tags: [
{
name: "技术专业",
count: 100,
},
{
name: "礼貌热情",
count: 100,
},
{
name: "认真负责",
count: 100,
},
{
name: "快速完工",
count: 100,
},
{
name: "按时上门",
count: 100,
},
],
};
},
components: {
AppraiseGroup,
},
created() {},
mounted() {},
destroyed() {},
methods: {},
};
</script>
<style lang="less" scoped>
.component-appraise-section {
width: 100%;
box-sizing: border-box;
padding: 30rpx;
background-color: #ffffff;
.appraise-total {
font-size: 24rpx;
line-height: 24rpx;
color: #333333;
}
.appraise-tags-group {
width: 100%;
display: flex;
flex-wrap: wrap;
margin-bottom: 35rpx;
.tag-item {
background: #f6f7ff;
border-radius: 26rpx;
padding: 14rpx 10rpx;
box-sizing: border-box;
text-align: center;
font-size: 24rpx;
line-height: 24rpx;
color: #333333;
margin-right: 18rpx;
margin-top: 35rpx;
}
.tag-item:nth-child(3n) {
margin-right: 0;
}
}
}
</style>

12
src/pages/service/detail.vue
View File

@ -60,7 +60,9 @@
</view>
</view>
<view v-if="tabIndex == 1" class="tab-item tab1">
<view class="reviews"> </view>
<view class="reviews">
<app-appraise-section />
</view>
</view>
</view>
</app-layout>
@ -68,12 +70,13 @@
<script>
import AppLayout from "@/components/layout/layout";
import AppAppraiseSection from "@/components/appraise/section";
export default {
name: "service-detail",
data() {
return {
pageConfig: {},
tabIndex: 0, // 1评价
tabIndex: 1, // 1评价
tabHeight: 0,
currentBanner: 1,
pageTitle: "服务详情",
@ -90,6 +93,7 @@ export default {
},
components: {
AppLayout,
AppAppraiseSection,
},
onLoad(e) {
this.pageConfig = getApp().globalData.pageConfig;
@ -301,4 +305,8 @@ export default {
}
}
}
.reviews {
width: 100%;
height: auto;
}
</style>