MinNan/index_fenbao/minNanyu/minNanyu.vue

<template>
	<view class="body2">
		<u-navbar :autoBack="true" title="闽南语" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#121212"></u-navbar>
		<view class="jz_swiper">
			<u-swiper
				:list="list1"
				indicatorStyle="bottom: 10rpx"
				indicatorMode="dot"
				height="335rpx"
				:indicator="true"
				:autoplay="true"
				:circular="true"
				keyName="image"
			></u-swiper>
		</view>
		<!--闽南语歌曲 -->
		<view class="" v-for="(item, index) in mnGeQu" :key="item.id">
			<view class="text-wrapper_7">
				<text lines="1" class="text_4">{{ item.name }}</text>
				<text lines="1" class="text_5" @click="yinPinLieBiao">查看更多》</text>
			</view>
			<view class="banxin">
				<view class="content">
					<scroll-view scroll-x style="display: flex; white-space: nowrap">
						<view @click="videoBtn(index, index1)" class="mn_container" v-for="(item2, index1) in mnGeQu[index].content_list" :key="item">
							<view class="mn_box">
								<image :src="item2.thumbnail" style="border-radius: 10rpx 10rpx 10rpx 0rpx; width: 100%; height: 100%"></image>
							</view>
							<text class="mn_text">{{ item2.title }}</text>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<!--闽南语歌曲end -->
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			main_body_id: '',
			list1: [
				{
					image: 'https://speech.xmu.edu.cn/_upload/article/images/c0/fa/3ff524314ed9992200a0db99bb7b/824d7b82-5e07-4857-9c35-5d1219bc710f.jpg',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				},
				{
					image: 'https://img0.baidu.com/it/u=1455151824,1249683265&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
					title: '身无彩凤双飞翼，心有灵犀一点通'
				},
				{
					image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2F20292d28-c439-2758-a2a7-c954170fde70%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1697881437&t=db418f32a3826bfaf554feb7ae6f4ba8',
					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}
			],
			// 闽南歌曲
			mnGeQu: []
		};
	},
	onLoad(o) {
		that = this;
		this.main_body_id = this.$db.get('main_body_id');
		this.getColumnList(o.id);
		this.getContentList(o.id);
		this.getMainBodyColumnContentList(o.id);
	},
	methods: {
		yinPinLieBiao() {
			uni.navigateTo({
				url: '/index_fenbao/minNanyu/yinPinLieBiao'
			});
		},
		getColumnList(id) {
			this.$api.getColumnList(
				{
					model_id: id,
					main_body_id: this.main_body_id
				},
				function (res) {
					// console.log(res, 'res');
				}
			);
		},
		// 栏目内容列表查看更多
		getContentList(id) {
			this.$api.getContentList(
				{
					model_id: id,
					main_body_id: this.main_body_id,
					flag: 'recommend',
					page: '1',
					pageSize: '10'
				},
				function (res) {
					// console.log(res, '内容列表');
					// that.projectList = res.data;
				}
			);
		},
		// 主体栏目内容列表
		getMainBodyColumnContentList(id) {
			this.$api.getMainBodyColumnContentList(
				{
					model_id: id,
					main_body_id: 5
				},
				function (res) {
					that.mnGeQu = res.data;
					// console.log(that.mnGeQu, '内容列表默认');
				}
			);
		},
		// 视频
		videoBtn(i, is) {
			// console.log(i, '55555555555');
			// console.log(is, '6666666666');
			// console.log(this.mnGeQu[i].content_list[is].id, '75555558');
			uni.navigateTo({
				url: '/index_fenbao/minNanyu/videoPage?id=' + this.mnGeQu[i].content_list[is].id
			});
		}
	}
};
</script>

<style>
.body2 {
	background-size: 100% 100%;
	background-attachment: fixed;
	background-repeat: repeat-y;
	background-color: #efefef;
	padding-bottom: 60rpx;
}
/deep/.u-swiper-indicator__wrapper__dot--active {
	width: 5px !important;
}
/* 去除轮播图标题遮罩背景色 */
.u-swiper__wrapper__item__wrapper__title {
	background-color: transparent !important;
}
.banxin {
	margin: 0 32rpx 0 32rpx;
}
.text-wrapper_7 {
	width: 651rpx;
	height: 45rpx;
	flex-direction: row;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 33rpx 0 25rpx 48rpx;
}
.text_4 {
	width: 112rpx;
	height: 27rpx;
	color: rgba(49, 37, 32, 1);
	font-size: 28rpx;
	font-weight: 700;
	white-space: nowrap;
	line-height: 28rpx;
}
.text_5 {
	width: 89rpx;
	height: 20rpx;
	color: rgba(18, 18, 18, 1);
	font-size: 22rpx;
	white-space: nowrap;
	line-height: 20rpx;
	margin-top: 3rpx;
}
.mn_container {
	display: inline-block;
	margin-right: 20rpx;
	text-align: center;
}

.mn_box {
	width: 261rpx;
	height: 349rpx;
	background: #ca5642;
	margin-bottom: 10rpx;
	border-radius: 10rpx 10rpx 10rpx 0rpx;
}

.mn_text {
	font-size: 28rpx;
	color: #333;
}
</style>