XLJK-web/xinlijiankang-uniapp-main/pages/index/ztsp.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="#FFFFFF" back-icon-color="#FFFFFF"></u-navbar>

		<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="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="ztryeddf">
			<view class="indhuyr">
				<view class="indjbrr"></view>
				<text>热门推荐</text>
			</view>
			
			<view class="inyyshiy">
				<view class="ztmddy"  @click="toDetail(item.id,item.to_type)" style="overflow: hidden;" v-for="(item,index) in hotlist" :key="index">
                    <image :src="item.img" style="width: 100%; height: 100%;" mode="aspectFill"></image>
                </view>
				
			</view>
		</view>
		
		<view class="ztdknuy">
			<view class="indhuyr">
				<view class="indjbrr"></view>
				<text>最新课程</text>
			</view>
			
			<view>
				
				<view class="zytlidde" @click="toDetail(item.id,1)" v-for="(item,index) in clist" :key="index">
					<view class="zytyyrimg" style="overflow: hidden;">
                        <image :src="item.img" 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>
							<image src="/static/zy/zyb3.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
						</view>
						<view class="flztoa">
							<view class="fzctob zytyotxtc">
								<text>{{item.sales}}人观看</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: '#486A92',
				},
				hhyanm: {
					color: '#FFFFFF',
				},
				timestamp: 86400,
				list: [],
                hotlist:[]   ,// 热门推荐
                clist:[]

			}
		},
        onLoad() {
            this.getInfo()
            this.getHot()
        },
        methods:{
            getInfo(){
                this.$post({
                    data:{
                        do:'CourseType',
                        data:{
                            user_id:uni.getStorageSync('id'),
                            type_id:30,
                            pw:35
                        }
                    }
                }).then(res=>{
                    console.log(res,'iiiiiiiiiii')
                    this.list = res.data[0].img
                    this.clist = res.data[0].list
                })
            },
            toSearch(){
                console.log(111)
                uni.navigateTo({
                    url:'/pages/index/SearchPage?type_id=30'
                })
            },
            // 获取热门推荐
            getHot(){
                this.$post({
                    data:{
                        do:'HomeView',
                    }
                }).then(res=>{
                    console.log(res,'hhhhhhhhh')
                    this.hotlist = res.data.type_5
                })
            },
            toDetail(id,type){
                if (type == 1) {
                	uni.navigateTo({
                		url: './kcxq-x?id=' + id
                	})
                } else if (type == 2) {
                	uni.navigateTo({
                		url: './zxshi?id=' + id
                	})
                }
            }
        }

	}
</script>

<style lang="scss" scoped>
	 .ztdknuy {
	     background: #FFFFFF;
	     border-radius: 16rpx 16rpx 16rpx 16rpx;
	    box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.058823529411764705);
	     padding: 30rpx 23rpx;
	     padding-bottom: 200rpx;
		 margin: 0  24rpx;
		 margin-top: 30rpx;
 
	 }
	 .ztmddy {
	     width: 214rpx;
	     height:176rpx;
	     background:#374B6E;
	     border-radius: 16rpx 16rpx 16rpx 16rpx;
	 }
	 .ztryeddf {
	     background: #FFFFFF;
	     border-radius: 16rpx 16rpx 16rpx 16rpx;
	     padding: 32rpx 20rpx;
		 margin: 0 24rpx;
	     margin-top: 10rpx;
	 }
	 
</style>