XLJK-web/xinlijiankang-uniapp-main/pages/index/kc.vue

<template>
	<view class="">
		<u-navbar :border-bottom="false" back-icon-size="35" title="课程" title-size="32" :background="background"
			:back-text-style="hhyanm" title-color="#000000" back-icon-color="#000000"></u-navbar>
		<view class="rmkdwwer" @click="toSearch">
			<view class="fzctob inbddwddre">
				<image src="/static/index/ina1.png"
					style="width: 40rpx;height: 40rpx;min-width: 40rpx;margin-right: 12rpx;"></image>
				<input type="text" disabled value="" placeholder-style="color: #CCCCCC;font-size: 28rpx;"
					placeholder="搜索你感兴趣的内容" />
			</view>
		</view>
		<view class="zykkddr">
			<!-- <view class="zykkddra">
				<image src="/static/zy/zya1.png"
					style="width: 750rpx;height: 410rpx;margin-top: -102rpx;margin-left: 132rpx;" mode=""></image>
			</view> -->
			<view class="zykkddrb">
				<view style="margin: 0 24rpx;">
					<u-swiper :list="list" interval="58000" height="364" border-radius="16"></u-swiper>
				</view>
			</view>
		</view>
		<!-- 分类 -->
		<view class="nav-box bgfff">
			<view class="grid-item" v-for="item in labelList" @click="goto(item.id,item.label)">
				<!-- <image  mode="widthFix" class="nav" :src="item.icon"></image> -->
				<image src="/static/index/ibb5.png" style="width: 68rpx;height: 68rpx;"></image>
				<text class="text">{{ item.label }}</text>
			</view >
		</view>

		<!-- 视频列表 -->
		<view class="rmknuy">
			<view class="zyhttry" style="padding: 20rpx 30rpx;">
				<!-- <image v-if="identity >0" src="/static/index/kcr1.png" style="width: 200rpx;height: 56rpx" mode=""></image> -->
				<!-- <image v-else src="/static/index/kcr2.png" style="width: 160rpx;height: 56rpx" mode=""></image> -->
				<view class="rmknuy-title">大咖好课</view>
			</view>
			<view style="padding: 20rpx 30rpx;">
				<view class="zytlidde" @click="toDetail(item)"
					v-for="(item,index) in dkhkList" :key="index">
					<view class="zytyyrimg" style="overflow: hidden;">
						<image :src="item.cover" mode="aspectFill" style="width: 100%; height: 100%;"></image>
					</view>
					<view class="zytyyopf">
						<view class="zytyotxta"><text>{{item.title}}</text></view>
						
						<view class="flztoa zytyotxtb">
							<text>{{item.lecturer_name}}</text>
						</view>
						<view class="flztoa zytyotxtc" style="margin-top: 6rpx;">
							<text>
								<text style="padding-right: 10rpx;">折扣价格: {{item.current_price}}</text>
								<text>原价格: {{item.original_price}}</text>
							</text>
							<image src="/static/zy/zyb3.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
						</view>
						<view class="flztoa">
							<view class="fzctob zytyotxtc">
								<text>{{item.play_count}}播放量 - 共{{item.chapter_num}}课时</text>
								<!-- <image v-show="xqaxuye" @click="xqaxuye = false" src="/static/zy/zyb1.png" style="width: 36rpx;height: 36rpx;margin-left: 20rpx;" mode=""></image>
								<image  v-show="!xqaxuye"  @click="xqaxuye = true" src="/static/zy/zyb2.png" style="width: 36rpx;height: 36rpx;margin-left: 20rpx;" mode=""></image> -->
							</view>
							<!-- 分钟 -->
							<text class="zytyotxtd">{{item.time}}</text>
						</view>
					</view>
				</view>
				<view class="zyhxyyer"></view>
			</view>
		</view>
		<view class="rmknuy">
			<view class="zyhttry" style="padding: 20rpx 30rpx;">
				<!-- <image v-if="identity >0" src="/static/index/kcr1.png" style="width: 200rpx;height: 56rpx" mode=""></image> -->
				<!-- <image v-else src="/static/index/kcr2.png" style="width: 160rpx;height: 56rpx" mode=""></image> -->
				<view class="rmknuy-title">免费试听</view>
			</view>
			<view style="padding: 20rpx 30rpx;">
				<view class="zytlidde" @click="toDetail(item)"
					v-for="(item,index) in mfstList" :key="index">
					<view class="zytyyrimg" style="overflow: hidden;">
						<image :src="item.cover" mode="aspectFill" style="width: 100%; height: 100%;"></image>
					</view>
					<view class="zytyyopf">
						<view class="zytyotxta"><text>{{item.title}}</text></view>
						<view class="flztoa zytyotxtb">
							<text></text>
							<image src="/static/zy/zyb3.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
						</view>
						<view class="flztoa">
							<view class="fzctob zytyotxtc">
								<text>{{item.play_count}}播放量</text>
								<!-- <image v-show="xqaxuye" @click="xqaxuye = false" src="/static/zy/zyb1.png" style="width: 36rpx;height: 36rpx;margin-left: 20rpx;" mode=""></image>
								<image  v-show="!xqaxuye"  @click="xqaxuye = true" src="/static/zy/zyb2.png" style="width: 36rpx;height: 36rpx;margin-left: 20rpx;" mode=""></image> -->
							</view>
							<!-- 分钟 -->
							<text class="zytyotxtd">{{item.time}}</text>
						</view>
					</view>
				</view>
				<view class="zyhxyyer"></view>
			</view>
		</view>
	</view>
</template>
<style>
	page {
		background: #FAFAFA;
	}
</style>
<script>
	export default {
		data() {
			return {
				xqaxuye: false,
				xqaxuyea: true,
				xqaxuyeb: true,
				background: {
					backgroundColor: '#ffffff',
				},
				hhyanm: {
					color: '#FFFFFF',
				},
				timestamp: 86400,
				list: [],
				identity: 0, // 0普通用户 1 讲师
				mfstList:[], // 免费试听
				dkhkList:[], // 大咖好课
				courseList: [
					{
						id:1,
						cover:'',//封面
						title:'标题',
						original_price:0,
						current_price:0,
						pay_count:0,//领取数量
						one_level_label:0,
						tow_level_label:0,
						type:0,//类型
					},
				],
				curtab: 0 ,// 当前选中的分类index
				labelList: [
					{label:'分类一',icon:''},
					{label:'分类二',icon:''},
					{label:'分类三',icon:''},
				]
			}
		},
		onLoad() {
			// 分类
			// this.getLabelList();
			this.getOne1Label();
			this.getOne2Label();
			this.identity = uni.getStorageSync('userinfo').identity || 0
			
		},
		methods: {
			toSearch() {
				console.log(111)
				let id = this.type == 1 ? 31 : 34
				uni.navigateTo({
					url: '/pages/index/SearchPage?type_id=' + id
				})
			},
			changeTab(index) {
				this.curtab = index
			},
			// 课程分类
			getLabelList() {
				this.$request.labelList({}).then(res => {
					console.log(res)
					this.labelList = res.data
				}).catch(err => {
					console.log(err)
				})
			},
			// 课程筛选 免费
			getOne1Label() {
				this.$request.getCourseListByLabel({
					one_label:1, // 1免费 2大咖
				}).then(res => {
					console.log(res)
					this.mfstList = res.data;
				}).catch(err => {
					console.log(err)
				})
			},
			//课程筛选  大咖
			getOne2Label() {
				this.$request.getCourseListByLabel({
					 one_label:2, // 1免费 2大咖
				}).then(res => {
					console.log(res)
					this.dkhkList = res.data;
				}).catch(err => {
					console.log(err)
				})
			},
			toDetail(i) {
				let item = JSON.stringify(i);
				uni.navigateTo({
					url: './kcxq-x?item=' + item
				})
			},
			goto(id,t) {
				uni.navigateTo({
					url: '/pages/index/kcxq-t?id=' + id +'&title=' + t
				})
			},
		}


	}
</script>

<style lang="scss" scoped>
	.rmknuy{
		padding-bottom: 100rpx;
	}
	.rmknuy-title{
		font-size: 40rpx;
		font-weight: bold;
	}
	.nav{width: 80rpx;height: 80rpx !important;margin: 0 auto;}
	.nav-box{
		display: flex;
		width: 100%;
		flex-wrap: wrap; padding: 0 0 40rpx 0;margin-bottom: 15rpx;}
	.grid-item{
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		margin-top: 20rpx;
		}
	.nav-box .text{margin-top: 8rpx;}
	.bgfff{background-color: #fff;}
</style>