hg_zlxc_h5/pages/schoolDetails/comp/tabCon.vue

<template>
	<view class="tabCon">
		<view class="tab1" v-if="current==1">
			<view class="item" v-for="(item,index) in TrainingClass" :key="index">
				<view class="carType">{{item.className}}</view>
				<view class="price_row">
					<view class="oldPrice">
						<view class="price">
							{{item.totalPrice.toString().slice(0,-2)}}
						</view>
						<view class="lab">原价</view>
					</view>
					
					<view class="subtract">
						<view class="preferential">
							<image src="../../../static/images/second_img_huiyuan.png" mode=""></image>
						</view>
						<view class="text">
							立减 <text>270</text> 元
						</view>
					</view>
					<view class="signUp" @click="goSign(item)">报名</view>
				</view>
				
				<readMore show-height="0" text-indent="0" :toggle="true" v-if="item.introduce">
					<rich-text :nodes="item.introduce"></rich-text>
				</readMore>
			</view>
		</view>
		
		<view class="tab2" v-else>
			<view class="ul">
				<view class="li" v-for="(item, index) in siteList" :key="index" @click="openMap(item)">
					<view class="cover">
						<image src="@/static/images/second_img_field@3x.png" mode=""></image>
					</view>
					<view class="textCon">
						<view class="name oneRowText">{{item.siteName}}</view>
						<view class="address towRowText">{{item.address}}</view>
					</view>
					<view class="lookBtn bgLinear">查看</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import readMore from '@/components/readMore/readMore.vue'
	import indexApi from '@/api/index.js'
	export default {
		components: {readMore},
		props: ['TrainingClass', 'siteList', 'current'],
		data() {
			return {
				
			}
		},
		methods: {
			// 去报名
			goSign(item) {
				this.$store.commit('ForecastClassType', item)
				this.$goPage('/pages/application/entry')
			},
			// 打开地图
			openMap(item) {
				uni.openLocation({
					latitude: item.lat,
					longitude: item.lng
				})
				console.log(item)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tabCon {
		width: 100%;
		
	  .tab1 {
		  width: 100%;
	    .item {
			width: 100%;
			margin-bottom: 48rpx;
	      .carType {
			font-weight: 600;
			color: #333333;
			font-size: 32rpx;
	      }
	
	      .price_row {
			  width: 100%;
			  display: flex;
			  justify-content: space-between;
			  height: 108rpx;
			  align-items: center;
			  margin: 16rpx 0 30rpx 0;
	        .oldPrice {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #686B73;
	          .price {
				font-size: 40rpx;
				text-decoration: line-through;
	          }
	
	          .lab {
				font-size: 28rpx;
	          }
	        }
	
	        .subtract {
				flex: 1;
				background: url('../../../static/images/second_img_huiyuanbg@3x.png') no-repeat;
				background-size: 248rpx 108rpx;
				background-position: 40rpx 0;
				display: flex;
				align-items: center;
				padding: 0 0 0 10rpx;
				height: 108rpx;
	          .preferential {
				  width: 118rpx;
				  height: 68rpx;
				  background-color: #fff;
	          }
	
	          .text {
				font-size: 24rpx;
				color: #FE6547;
				margin-left: 24rpx;
				text {
					font-size: 42rpx;
					margin: 0 10rpx;
				}
	          }
	        }
	
	        .signUp {
				width: 98rpx;
				height: 104rpx;
				background: linear-gradient(180deg, #FF3731 0%, #FA7B3C 100%);
				border-radius: 8rpx;
				font-size: 28rpx;
				color: #fff;
				text-align: center;
				line-height: 104rpx;
	        }
	      }
	    }
	  }
	}
	
	.tab2 {
		width: 100%;
	  .ul {
		  width: 100%;
	    .li {
			width: 100%;
			padding: 24rpx 0;
			display: flex;
			align-items: center;
	      .cover {
	        width: 204rpx;
			height: 140rpx;
			
	      }
	
	      .textCon {
			  flex: 1;
			  padding: 0 24rpx;
			  width: 0;
			  height: 100%;
			  min-height: 140rpx;
	        .name {
				font-size: 32rpx;
				color: #333;
	        }
	
	        .address {
				font-size: 28rpx;
				color: #686B73;
	        }
	      }
	
	      .lookBtn {
				width: 104rpx;
				height: 56rpx;
				// background: linear-gradient(180deg, #3593FB 0%, #53D3E5 100%);
				border-radius: 36rpx;
				font-size: 28rpx;
				color: #fff;
				line-height: 56rpx;
				text-align: center;
	      }
	    }
	  }
	}
</style>