luoyang-uniapp-app/pages/indexEntry/findShcool/coachComment/coachInfo.vue

<template>
	<view class="card">
		<view class="avatar">
			<image :src="item.photoPath" mode=""  v-if="isImagePath(item.photoPath)"></image>
			<image src="@/static/images/index/avatar.png" mode=""  v-else></image>
		</view>
		<view class="info">
			<view class="name">{{ item.name}}</view>
			<view class="star_row">
				<u-rate active-color="#FCAC00" inactive-color="#FCAC00" gutter="1" :size="16" :value="item.stars"   :count="5" :readonly="true" allowHalf></u-rate>
				<view class="num">{{ item.stars }}</view>
			</view>
			<view class="flex-b">
				<view class="carType">准教车型：{{ item.teachCarType }}</view>
				<view class="btn" @click="goSign">报名</view>
			</view>
			<view class="schoolName">{{ item.schoolName }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['item'],
		methods: {
			isImagePath(path) {
			    // 定义常见的图片文件扩展名
			    const imageExtensions = /\.(jpg|jpeg|png|gif|bmp|svg)$/i;
			
			    // 使用正则表达式进行匹配
			    return imageExtensions.test(path);
			},
			async goSign() {
				this.$store.commit('upDateSchoolCoach', this.item)
				this.$store.commit('upDateSchoolClass', {})
				this.$u.utils.clickSignUp()
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.card {
		padding: 20rpx !important;
		display: flex;
	  .avatar {
		  width: 134rpx;
		  height: 134rpx;
		  border-radius: 50%;
	  }
	
	  .info {
		  flex: 1;
		  padding: 0 20rpx;
	    .name {
			font-size: 28rpx;
			color: #333;
			font-weight: 700;
	    }
	
	    .star_row {
			display: flex;
			align-items: center;
			margin: 10rpx 0;
	      .num {
			font-size: 24rpx;
			font-weight: 700;
	      }
	    }
	
	    .carType {
			padding: 0 20rpx;
			height: 46rpx;
			background: rgba(80,165,255,0.1);
			border: 1px solid #50A5FF;
			border-radius: 10rpx;
			line-height: 46rpx;
			color: $themC;
			font-size: 24rpx;
			display: inline-block;
	    }
	
	    .schoolName {
			font-size: 24rpx;
			color: #999;
			margin-top: 20rpx;
	    }
	  }
	
	  .btn {
			width: 112rpx;
			height: 55rpx;
			background: $themC;
			border-radius: 28rpx;
			line-height: 55rpx;
			text-align: center;
			color: #fff;
			font-size: 24rpx;
			margin-top: -20rpx;
	  }
	}
</style>