jje_uniapp/orderPages/serviceTeacher/index.vue

<template>
	<view class="">
		<view v-for="(item,index) in workPersonList" @click="chooseServiceTeacher(item)" class="h-item-row">
			<view class="h-img">
				<image src="../../static/logo.png" mode=""></image>
			</view>
			<view class="h-item-content">
				<view class="h-title">
					<view class="name">
						<text>{{item.title}}</text>
					</view>
					<!-- <view class="btn">
                        <text>包房</text>
                    </view> -->
				</view>
				<view class="h-desc">
					<text>优质服务，从我做起</text>
				</view>
				<view class="h-content">
					<u-icon name="thumb-up" color="#333" size="16"></u-icon>
					<view class="h-text">
						<text>好评率：</text>
					</view>
					<view class="h-text1">
						<text>{{item.goodRate}}%</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				reqParm: {
					auth: true,
					schedulingDate: null,
					periodId: null,
					organization: null, // 所属门店
				},
				workPersonList: []
			}
		},
		onLoad(option) {

			this.reqParm.schedulingDate = option.schedulingDate;
			this.reqParm.periodId = option.periodId;
			this.reqParm.organization = option.organization;

			// 查询服务工作人员列表
			this.serviceWorkPersonList();
		},
		methods: {
			// 查询服务工作人员列表
			serviceWorkPersonList() {
				serviceWorkPersonList({
					data: this.reqParm
				}).then((res) => {
					this.workPersonList = res.rows;
				}).catch(() => {
					uni.showToast({
						title: "操作失败"
					})
				});
			},
			// 获取图片
			async getImgUrlByOssId(data) {
				for (let i = 0; i < data.length; i++) {
					const item = data[i];
					let url = await this.$getImgUrlByOssId(item.facePhoto);
					item.imgUrl = url;
				}
				this.serviceObjectList = data
				return data;
			},
			// 选择服务老师
			chooseServiceTeacher(item) {
				// 选择完成后返回上一页
				uni.navigateBack({
					delta: 1,
				});
				uni.$emit('selectedDataFromChild', item);
			}
		},
	};
</script>

<style scoped lang="scss">
	.h-item-row {
		display: flex;
		font-family: PingFangSC-Medium, PingFang SC;
		margin: 12px;
		background: #fff;
		padding: 12px;

		.h-img {
			margin-right: 8px;

			image {
				height: 80px;
				width: 80px;
			}
		}

		.h-item-content {
			.h-title {
				font-size: 16px;
				font-weight: 500;
				line-height: 30px;
				display: flex;

				.name {
					padding-right: 6px;
					color: #111111;
				}

				.btn text {
					background: #fff5d0;
					color: #333333;
					font-size: 12px;
					border: 1px solid #FFE05C;
					padding-left: 10px;
					padding-right: 10px;
				}
			}

			.h-desc {
				font-size: 12px;
				font-weight: 400;
				color: #999999;
				line-height: 25px;
			}

			.h-content {
				display: flex;
				align-items: center;
				font-size: 12px;
				font-weight: 400;
				line-height: 25px;

				.h-text {
					color: #999999;
				}

				.h-text1 {
					color: #ED569F;
				}
			}
		}
	}
</style>