jje_uniapp/orderPages/bookService/components/chooseServiceTeacher.vue

<template>
	<view>
		<uni-popup ref="chooseServiceTeacherPopup" :catchtouchmove="true" type="bottom">
			<view class="chooseServiceTeacherView">
				<view class="chooseServiceTeacherTitle">
					<text>选择服务人员</text>
				</view>

				<scroll-view class="scrollY" scroll-y>
					<view class="serviceTeacherView" v-for="(item,index) in workPersonList"  @click="selectworkPerson(item,index)">
						<view v-if="item.personId === -1" class="serviceTeacher  flex-col justify-center" :class="{selectBack: item.personId == serviceUserId}">
							<view class="flex-row">
								<text class="teacherName">{{item.personName}} </text>
								<u-icon name="rmb-circle" color="#666666"></u-icon>
								<text class="teacherMsg">预约费用：{{item.fee}}</text>
							</view>

						</view>

						<view v-else class="serviceTeacher1 flex-row" :class="{selectBack: item.personId == serviceUserId}">
							<image class="teacherImg" src="/static/order/nvren.png"></image>
							<view class="flex-col justify-around teacherR ">
								<view class="flex-row">
									<text class="teacherName1">{{item.personName}}</text>
									<text class="teacherTag">造型总监</text>
								</view>
								<view>
									<text class="teacherMsg1">优质服务，从我做起</text>
								</view>
								<view class="flex-row ">
									<view :style="{'marginTop':'7rpx'}">
										<u-icon name="rmb-circle" color="#666666"></u-icon>
									</view>
									<text class="teacherMsg">预约费用：</text>
									<text class="teacherMsg" :style="{'color':'#ED569F'}">{{item.fee}}</text>
								</view>
							</view>
						</view>
						<view class="serobV" v-if="item.personId == serviceUserId">
							<image class="serobVicon" src="/static/order/ud20.png"></image>
						</view>
					</view>



				</scroll-view>

				<view class="flex-row justify-between chooseServiceTeacherButton">
					<view class="chooseServiceTeacherButtonL" @click="closePopup">
						<text>取消</text>
					</view>
					<view class="chooseServiceTeacherButtonR" @click="submit">
						<text>确定</text>
					</view>
				</view>
			</view>

		</uni-popup>

	</view>
</template>

<script>
	export default {
		name: 'chooseServiceTeacher',
		props: {
			storeId: {
				type: String,
				default () {
					return ''
				}
			},
			date: {
				type: String,
				default () {
					return ''
				}
			}
		},
		data() {
			return {
				serviceUserId:'',
				selectIndex:'',
				workPersonList: []
			}
		},
		methods: {

			submit(){
				this.$emit("getWorkPerson",this.workPersonList[this.selectIndex])
				this.closePopup()
			},

			closePopup() {
				this.$refs.chooseServiceTeacherPopup.close()
			},

			selectworkPerson(e,index){
				this.serviceUserId = e.personId
				this.selectIndex = index
			},

			openPopup(serviceUserId) {
				this.serviceUserId = serviceUserId
				this.$refs.chooseServiceTeacherPopup.open()
				this.getServicePerson()

			},



			// 查询服务工作人员列表
			getServicePerson() {
				this.$api.getServicePerson({
					date: this.date,
					storeId: this.storeId,
				}).then((res) => {
					console.log(res)
					this.workPersonList = res.data.data;
					this.getImgUrlByOssId(res.data.data)
				})
			},
			// 获取图片
			getImgUrlByOssId(data) {
				for (let i = 0; i < data.length; i++) {
					if (data[i].facePhoto) {
						this.$api.getImage(data[i].facePhoto).then(res => {
							data[i].imgUrl = res.data.data[0].url.replace(/^http:/, "https:")
							this.$set(this.workPersonList, i, data[i])
						});
					}
				}
			},



		}
	}
</script>

<style scoped lang="scss">
	.chooseServiceTeacherView {
		width: 750rpx;
		height: 850rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}

	.chooseServiceTeacherTitle {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		line-height: 44rpx;
		margin-left: 34rpx;
		padding-top: 26rpx;
	}

	.scrollY {
		width: 686rpx;
		height: 604rpx;
		margin-left: 32rpx;
		margin-top: 32rpx;
	}


	.serviceTeacherView {
		position: relative;
	}

	.serviceTeacher {
		width: 678rpx;
		height: 92rpx;
		background: #FAFAFA;
		border-radius: 8rpx;
		border: 4rpx solid #FAFAFA;
		position: relative;
	}

	.teacherName {
		padding-right: 26rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #111111;
		margin-left: 24rpx;
	}

	.teacherName1 {
		font-size: 32rpx;
		font-weight: bold;
		color: #111111;
	}

	.teacherTag {
		padding: 6rpx 24rpx;
		background: #FFF6CE;
		border-radius: 8rpx;
		border: 2rpx solid #FFE05C;
		font-size: 20rpx;
		font-weight: 400;
		color: #333333;
		line-height: 32rpx;
		margin-left: 16rpx;
	}

	.teacherMsg {
		font-size: 24rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-left: 8rpx;
		margin-top: 5rpx;
	}

	.teacherR {
		width: 400rpx;
		height: 180rpx;
		margin-top: 24rpx;
		margin-left: 24rpx;
	}

	.teacherMsg1 {
		font-size: 24rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 40rpx;
	}

	.teacherImg {
		width: 180rpx;
		height: 180rpx;
		border-radius: 8rpx;
		margin-top: 22rpx;
		margin-left: 22rpx;
	}

	.serviceTeacher1 {
		width: 678rpx;
		height: 222rpx;
		background: #FAFAFA;
		border-radius: 16rpx;
		border: 4rpx solid #FAFAFA;
		margin-top: 24rpx;
	}

	.chooseServiceTeacherButton {
		width: 686rpx;
		height: 80rpx;
		margin-left: 32rpx;
		margin-top: 32rpx;
	}

	.chooseServiceTeacherButtonL {
		width: 332rpx;
		height: 80rpx;
		background: #F5F5F5;
		border-radius: 54rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
	}

	.chooseServiceTeacherButtonR {
		width: 332rpx;
		height: 80rpx;
		background: #FFE05C;
		border-radius: 54rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.serobV {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		top: 0;
		right: 0;
	}

	.serobVicon {
		width: 32rpx;
		height: 32rpx;
	}

	.selectBack {
		background: rgba(255, 224, 92, 0.1);
		border: 4rpx solid #FFE05C;
		box-sizing:border-box
	}
</style>