Jingde-town-wechat-uniapp/pages_order/service/StudyFurther.vue

<template>
	<!-- 我要研学 -->
	<view class="page">
		<navbar title="我要研学" leftClick @leftClick="$utils.navigateBack" />
		
		<view class="search">
			<uv-search 
			placeholder="搜索服务" 
			v-model="keyword" 
			:animation="true"
			height="70"
			:showAction="false"
			searchIconSize="44"
			>
			</uv-search>
		</view>
		
		<view class="list">
			<view class="item"
			@click="$utils.navigateTo('/pages_order/service/StudyAndPathDetail?type=Study&id=' + item.id)"
			v-for="(item,index) in list"
			:key="index">
				<view class="image">
					<image :src="item.amusementImage[0]" mode=""></image>
					<view class="type">
						报名中
					</view>
				</view>
				<view class="info">
					<view class="title text-ellipsis">
						{{ item.amusementTitle }}
					</view>
					<view class="price">
						￥5000.00
					</view>
				</view>
			</view>
		</view>
		<tabber/>
	</view>
</template>

<script>
	import mixinsList from '@/mixins/list.js'
	export default {
		mixins : [mixinsList],
		data() {
			return {
				isShow: 0,
				mixinsListApi : 'queryAmusementList',
				list : [],
			}
		},
		onLoad() {
			this.queryParams.amusementType = 1
		},
		methods: {
			setPath(i){
				this.getData()
			},
			getDataThen(list){
				list.forEach(n => n.amusementImage = 
				n.amusementImage ? 
				n.amusementImage.split(',') : [])
			},
		}
	}
</script>

<style  scoped lang="scss">
.page{
	.search{
		background-color: #fff;
		padding: 20rpx;
	}
	.list{
		.item{
			margin: 30rpx 20rpx 50rpx;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0 0 10rpx 10rpx #00000011;
			.image{
				width: 100%;
				height: 400rpx;
				position: relative;
				image{
					width: 100%;
					height: 90%;
					border-radius: 20rpx;
					margin-top: 10rpx;
				}
				.type{
					position: absolute;
					top: -10rpx;
					height: 62rpx;
					left: 30rpx;
					background-color: darkgoldenrod;
					color: #fff;
					font-size: 28rpx;
					padding: 0 18rpx;
					border-radius: 14rpx;
					line-height: 56rpx;
				}
			}
			.info{
				
				.title{
					margin-left: 14rpx;
					margin-bottom: 8rpx;
					font-size: 32rpx;
					font-weight: 700;
				}
				.price{
					font-size: 30rpx;
					margin-left: 12rpx;
					margin-bottom: 8rpx;
					color: darkgoldenrod;
				}
			}
		}
	}
}
</style>