JiangxiMiniProgram/pages/carEntry/operaAppointment/comp/coachInfo.vue

<template>
	<view class="coachInfo">
		<view class="card">
			<view class="avatar">
				<!-- <image :src="FormData.photoPath" mode="" @error="handleImageError()"></image> -->
				<image :src="FormData.photoPathh" mode=""  v-if="isImagePath(FormData.photoPath)"></image>
				<image src="@/static/images/index/avatar.png" mode=""  v-else></image>
			</view>
			<view class="rightTxt">
				<view class="name_row">
					<view class="name">{{ FormData.coachName }}</view>
					<view class="tag active" v-if="vuex_userInfo.coachId==FormData.coachId">已绑定</view>
					<view class="tag" v-else>未绑定</view>
				</view>
				<moreRight text="预约其它教练课程"/>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['FormData'],
		methods: {
			handleImageError() {
				console.log('图片加载失败')
				this.FormData.photoPath = require('@/static/images/index/avatar.png')
			},
			isImagePath(path) {
			    // 定义常见的图片文件扩展名
			    const imageExtensions = /\.(jpg|jpeg|png|gif|bmp|svg)$/i;
			
			    // 使用正则表达式进行匹配
			    return imageExtensions.test(path);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coachInfo {
	  .card {
		  width: 100%;
		  height: 180rpx;
		  display: flex;
		  align-items: center;
		  padding: 0 36rpx;
	    .avatar {
			width: 100rpx;
			height: 98rpx;
			border-radius: 50%;
			overflow: hidden;
			background-color: #F2F2F2;
	    }
	
	    .rightTxt {
			flex: 1;
			padding: 0 0 0 34rpx;
	      .name_row {
			  display: flex;
			  align-items: center;
			  margin-bottom: 16rpx;
	        .name {
				font-size: 32rpx;
				color: #333;
				font-weight: 550;
	        }
	
	        .tag {
				width: 98rpx;
				height: 40rpx;
				background: #F2F2F2;
				border-radius: 4rpx;
				text-align: center;
				line-height: 40rpx;
				text-align: center;
				margin-left: 24rpx;
				color: #959595;
				&.active {
					color: $themC;
					background: #E8F3FE;
				}
	        }
	      }
	
	      moreright {
	
	      }
	    }
	  }
	}
</style>