luoyang-uniapp-app/pages/indexEntry/findShcool/shcoolDetail/comp/tab3.vue

<template>
	<view class="tabCon">
		<view class="tab1" v-if="coachList.length">
			<view class="card"  v-for="(item,index) in coachList" :key="index">
				<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="rightCon">
					<view class="flex">
						<view class="name">{{ item.name }}</view>
						<!-- <view class="age">10年教龄</view> -->
					</view>
					<view class="flex-b">
						<view class="starBox">
							{{item.stars || 0}}
						</view>
						<view class="btn"  v-if="showSign"  @click="goPageSign(item)">报名</view>
						<view class="more" v-else @click="goPageDetail(item)">
							<view class="moreText">查看详情</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="padding-bottom: 20rpx;" v-if="coachList.length>20">
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
	
	export default {
		props: ['showSign', 'coachList', 'status'],
		methods: {
			// 去详情
			goPageDetail(item) {
				let objStr = encodeURIComponent(JSON.stringify(item))
				this.$goPage('/pages/indexEntry/findShcool/coachComment/coachComment?item='+ objStr)
			},
			// 去报名
			goPageSign(item) {
				this.$store.commit('upDateSchoolClass', {})
				this.$store.commit('upDateSchoolCoach', item)
				this.$u.utils.clickSignUp()
			},
			handleImageError(item) {
				item.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>
	.tabCon {
		width: 100%;
	  .tab1 {
		  width: 100%;
	    .card {
			width: 100%;
			display: flex;
			align-items: center;
			padding: 36rpx;
			border-bottom: 1rpx solid #f4f4f4;
	      .avatar {
	        width: 100rpx;
	        height: 98rpx;
			border-radius: 50%;
			margin-right: 34rpx;
			background-color: #f6f6f6;
	      }
		.rightCon {
			flex: 1;
			width: 0;
			.flex {
						  
			  .name {
				font-size: 32rpx;
				color: #333;
				font-weight: 500;
			  }
				
			  .age {
				width: 142rpx;
				height: 40rpx;
				background: #E8F3FE;
				border-radius: 4rpx;
				color: $themC;
				text-align: center;
				line-height: 40rpx;
				margin-left: 24rpx;
				font-size: 24rpx;
			  }
			}
				
			.flex-b {
			  margin-top: 14rpx;
			  .more {
				  display: flex;
				  align-items: center;
			    .moreText {
					font-size: 24rpx;
					color: #686B73;
					margin-right: 10rpx;
			    }
			  }
			}
		}
	      
	    }
	  }
	}
	.btn {
		width: 130rpx;
		height: 60rpx;
		background: #1989FA;
		border-radius: 8rpx;
		color: #fff;
		text-align: center;
		line-height: 60rpx;
		font-size: 28rpx;
	}
</style>