技师详情 - 专业技能 - 服务评价

<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>			&lt;/div&gt;
		&lt;/div&gt;
		&lt;p class=&quot;intro&quot;&gt;个人简介：{{ technician.intro }}&lt;/p&gt;
	&lt;/view&gt;
	
	&lt;!-- 评价列表 --&gt;
	&lt;view class=&quot;evaluate-list small&quot;&gt;
		 &lt;view class=&quot;center&quot;&gt;
		    &lt;text class=&quot;text&quot;&gt;服务评价&lt;/text&gt;
		  &lt;/view&gt;
		&lt;view class=&quot;evaluate-list-item&quot; v-for=&quot;(item, idx) in evaluateList&quot; :key=&quot;idx&quot;&gt;
			&lt;view class=&quot;title&quot;&gt;
				&lt;view class=&quot;name&quot;&gt;{{ item.userName }}&lt;/view&gt;
				&lt;view class=&quot;rate&quot;&gt;
					&lt;uni-rate v-model=&quot;item.commentLevel&quot; class=&quot;rate-star&quot; :readonly=&quot;true&quot; /&gt;
				&lt;/view&gt;
			&lt;/view&gt;
			&lt;view class=&quot;con&quot;&gt;{{ item.content }}&lt;/view&gt;
			&lt;view class=&quot;date&quot;&gt;{{ getDate(item.insertTime) }}&lt;/view&gt;
		&lt;/view&gt;
		&lt;!-- &lt;uni-load-more :status=&quot;status&quot; :icon-size=&quot;16&quot; :content-text=&quot;contentText&quot; /&gt; --&gt;
	&lt;/view&gt;
&lt;/view&gt;
</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: 50px;
		
		.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>