技师详情 - 服务预约 - 用户评价
<template>
<view>
<view class='recommend'>
<view style='padding-top: 10px;'></view>
<div class='profile'>
<img :src='technician.photo' mode='heightFix' class='img' />
<div class='profile-info'>
<div class='title'>技师姓名：{{ technician.userName }}</div>
<div class='category'>专业技能：{{ categoryId }}</div>
<!-- <div class='phone-container'>
<span class='label'>技师手机号：{{ technician.phone }}</span>
</div> -->
<button @click='onPhone' type='primary' size='default'>服务预约</button>
<pre><code> </div>
</div>
<p class='intro'>个人简介：{{ technician.intro }}</p>
</view>
<!-- 评价列表 -->
<view class='evaluate-list small'>
<view class='center'>
<text class='text'>服务评价</text>
</view>
<view class='evaluate-list-item' v-for='(item, idx) in evaluateList' :key='idx'>
<view class='title'>
<view class='name'>{{ item.userName }}</view>
<view class='rate'>
<uni-rate v-model='item.commentLevel' class='rate-star' :readonly='true' />
</view>
</view>
<view class='con'>{{ item.content }}</view>
<view class='date'>{{ getDate(item.insertTime) }}</view>
</view>
<!-- <uni-load-more :status='status' :icon-size='16' :content-text='contentText' /> -->
</view>
</view>
</code></pre>
</template>
<script>
import _ from 'lodash';
export default {
data() {
return {
categoryId: '',
direstDatas: [],
list: [],
listData: [],
last_id: '',
reload: false, //是否下拉重新加载
status: 'more',
size: 10,
current: 1,
total: 0,
contentText: {
contentdown: '上拉加载更多',
contentrefresh: '加载中',
contentnomore: '没有更多'
},
filter: '', //搜索条件
// 根据地址选择的， 这个这里面要不要
storeTypeList: [],
evaluateList: [],
technician: [], // 技师列表数据
id: '',
userid: ''
}
},
onLoad(option) {
console.log('-----', option);
// const { id, categoryId } = this.$route.query;
const {
id,
categoryId
} = option;
this.id = {
id,
categoryId
}.id
this.categoryId = {
id,
categoryId
}.categoryId
// 对获取到的参数进行处理
// console.log(paramId)
// 发起请求
this.getTechnician()
},
methods: {
getTechnician() {
let userId = this.id;
let query = `?userId=${userId}`;
let query1 = `?technicianId=${userId}&page=1&size=10`;
// 定义两个请求的promise
var promise1 = this.ajax.get(this.jk.getTechnician + query);
var promise2 = this.ajax.get(this.jk.getEvaluate + query1);
// 使用Promise.all()同时调用两个接口
Promise.all([promise1, promise2])
.then(([result1, result2]) => {
// 处理第一个接口的结果
this.technician = result1.data;
console.log(this.technician);
// 处理第二个接口的结果
this.evaluateList = result2.data.records;
console.log(this.evaluateList);
})
},
getDate(time) {
const insertTime = time;
const date = new Date(insertTime);
const formattedDate =
`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
return formattedDate;
},
//联系商家
onPhone() {
if (!this.technician.phone) {
this.common.UshowToast('该未公布电话');
} else {
plus.device.dial(this.technician.phone, true);
}
},
}
}
</script>
<style lang='less'>
.recommend {
.profile {
display: flex;
align-items: center;
padding: 10px;
.img {
height: 150px;
width: 150px;
border-radius: 50%;
margin-top: -10px;
/* 负的上外边距值来使其上移 */
}
.profile-info {
margin-left: 20px;
.title {
font-size: 19px;
// font-weight: bold;
margin-bottom: 10px;
}
.phone-container {
.label {
font-size: 20px;
a {
color: #007bff;
text-decoration: none;
cursor: pointer;
&:hover {
text-decoration: underline;
}
}
}
}
}
}
}
.evaluate-list.small {
width: 95%;
height: 20%;
// padding-top: 30px;
margin-bottom: 20px; /* 添加 margin-bottom */
.evaluate-list-item {
background-color: #f9f9f9;
padding: 5px;
margin-bottom: 15px;
border-radius: 5px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
// border: 1px solid #ccc;
.title {
display: flex;
justify-content: space-between;
align-items: center;
.name {
font-size: 15px;
font-weight: bold;
}
}
.con {
margin-top: 10px;
font-size: 18px;
color: #333;
}
.date {
margin-top: 10px;
font-size: 16px;
color: #999;
}
}
}
/* Additional styles for the rate stars */
.rate-star {
font-size: 24px;
color: #FFD700;
/* Star color */
}
.category{
padding-top: 15px;
font-size: 19px;
// font-weight: bold;
margin-bottom: 10px;
}
.intro {
display: block;
font-size: 15px;
color: #555;
margin-top: 5px;
clear: both;
// padding: 20px;
}
.intro,
.evaluate-list {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
}
.center {
display: flex;
justify-content: center;
align-items: center;
height: 100%; /* 设置父元素高度，例如视窗高度 */
// padding-top: 20px;
}
.text {
text-align: center;
}
</style>服务评价这个框，和上面的框的距离怎么改大一点内容：你可以在.evaluate-list.small的样式中增加margin-bottom属性来调整服务评价框和上面框之间的距离。例如：
<p>.evaluate-list.small { ... margin-bottom: 20px;}</p>
<p>这样就可以增加服务评价框和上面框之间的距离为20px。你可以根据需要调整具体的数</p>
原文地址: https://www.cveoy.top/t/topic/qD99 著作权归作者所有。请勿转载和采集!