<template>
	<view class="page flex-col">
		<view class="block_1 flex-row">
			<view class="box_1 flex-col justify-end">

				<view v-if="list.length>0" @tap="go(item.kecheng_id)" v-for="(item, index) in list" :key="index"
					class="group_2 flex-row justify-between" style="border-bottom: 1px solid lightgray;width:95%;padding-bottom: 200rpx;">

					<image class="box_2 flex-col" :src="item.image"/>
					<view class="box_3 flex-col justify-between" style="margin-left: 10rpx;width: 60%;">
						<text class="text_6">{{item.detail.title}}</text>
						<view class="text-wrapper_2 flex-row justify-between" style="margin-top: 20rpx;">
							<text class="text_7">￥{{item.detail.price}}</text>
								
						</view>
					
					</view>
				</view>

				<view v-if="list.length == 0" class="group_2 flex-row justify-between"
					style="margin-top: 200rpx;width: 100%;text-align: center;margin-left: 0;">
					<view style="text-align: center;width: 100%;">暂无课程</view>

				</view>


			</view>

		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [],
				activeTab: "全部",
				constants: {}
			};
		},
		onLoad() {
			this.getData()
			uni.setNavigationBarColor({
				backgroundColor: '#802931', // 背景颜色
				frontColor: '#ffffff' // 前景颜色（包括标题、返回图标等）
			})

		},
		methods: {
			go(id) {
				
				uni.navigateTo({
					url: '/pages/lanhu_kechengxiangqingmulu/index?id='+id
				});
			},
			getData() {
				this.$api.get({
					url: '/wanlshop/data/getWoDeXueXi',
					success: res => {
						this.list = res
						console.log(22, res)
					}
				})
			},

		}
	};
</script>
<style lang='css'>
	@import '../common/common.css';
	@import './assets/style/index.rpx.css';


	.text-wrapper {
		width: 100%;
		padding: 20px 0;

	}

	.text-wrapper .text_2,
	.text-wrapper .text_3,
	.text-wrapper .text_4,
	.text-wrapper .text_5 {
		width: 17%;
		height: 40rpx;
		margin: 0 3%;
		padding: 0;
		text-align: center;
		text-decoration: none;
	}

	.text-wrapper .active {
		color: black;
		font-size: 15px;
		font-weight: 900;
		border-bottom: 3px solid #802931;
	}
</style>