增加评价页面
This commit is contained in:
parent
5b409e267a
commit
fb73175426
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -60,7 +60,9 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="tabIndex == 1" class="tab-item tab1">
|
<view v-if="tabIndex == 1" class="tab-item tab1">
|
||||||
<view class="reviews"> </view>
|
<view class="reviews">
|
||||||
|
<app-appraise-section />
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</app-layout>
|
</app-layout>
|
||||||
|
|
@ -68,12 +70,13 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import AppLayout from "@/components/layout/layout";
|
import AppLayout from "@/components/layout/layout";
|
||||||
|
import AppAppraiseSection from "@/components/appraise/section";
|
||||||
export default {
|
export default {
|
||||||
name: "service-detail",
|
name: "service-detail",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
pageConfig: {},
|
pageConfig: {},
|
||||||
tabIndex: 0, // 1评价
|
tabIndex: 1, // 1评价
|
||||||
tabHeight: 0,
|
tabHeight: 0,
|
||||||
currentBanner: 1,
|
currentBanner: 1,
|
||||||
pageTitle: "服务详情",
|
pageTitle: "服务详情",
|
||||||
|
|
@ -90,6 +93,7 @@ export default {
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
AppLayout,
|
AppLayout,
|
||||||
|
AppAppraiseSection,
|
||||||
},
|
},
|
||||||
onLoad(e) {
|
onLoad(e) {
|
||||||
this.pageConfig = getApp().globalData.pageConfig;
|
this.pageConfig = getApp().globalData.pageConfig;
|
||||||
|
|
@ -301,4 +305,8 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.reviews {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue