xiongmao/pages/index/video-column/video-column.vue

<!-- 视频专栏 -->
<template>
	<view class="wrap">

		<view class="tab-list">
			<view :class="{ 'active' : isActive === index }" class="child" v-for="(item,index) in navList" :key="index"
				@click="checked(index)">
				{{item.title}}
				<image src="../../../static/border.png" class="border-img" mode="widthFix"></image>
			</view>
		</view>

		<view class="content-box" v-if="isActive == 0">
			<view class="video-module" @click="informationDetails">
				<video id="myVideo"
					src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
					enable-danmu controls style="width: 100%;height: 262rpx;"></video>
				<view class="video-title">
					时令养生到底怎么去养生？
				</view>
			</view>

			<view class="list">
				<view class="item" @click="informationDetails">
					<view class="item-top">
						<view class="item-top-sidebar">
							<view class="item-top-name">大暑已到易伤津耗气，可用药粥滋补身体</view>
							<view class="item-top-msg">
								3.2万人浏览
							</view>
						</view>
						<view class="img-box">
							<image src="../../../static/img-4.png" class="item-top-img" mode="aspectFill"></image>
							<image src="../../../static/play.png" class="play-img"></image>
						</view>
					</view>
				</view>
				<view class="item" @click="informationDetails">
					<view class="item-top">
						<view class="item-top-sidebar">
							<view class="item-top-name">大暑已到易伤津耗气，可用药粥滋补身体</view>
							<view class="item-top-msg">
								3.2万人浏览
							</view>
						</view>
						<view class="img-box">
							<image src="../../../static/img-4.png" class="item-top-img" mode="aspectFill"></image>
							<image src="../../../static/play.png" class="play-img"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content-box" v-if="isActive == 1">
			<view class="video-module" @click="videoDetails">
				<video id="myVideo"
					src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
					enable-danmu controls style="width: 100%;height: 262rpx;"></video>
				<view class="video-title">
					时令养生到底怎么去养生？
				</view>
			</view>
			<view class="list-2">
				<view class="item-2">
					<view class="img-box2">
						<image src="../../../static/img-4.png" class="item-img2" mode="aspectFill"></image>
						<image src="../../../static/play.png" class="play-img"></image>
					</view>
					<view class="item-bottom">
						<view class="item-top-name">大暑已到易伤津耗气，可用药粥滋补身体</view>
						<view class="item-bottom-msg">
							3.2万人浏览
						</view>
					</view>
				</view>
				<view class="item-2">
					<view class="img-box2">
						<image src="../../../static/img-4.png" class="item-img2" mode="aspectFill"></image>
						<image src="../../../static/play.png" class="play-img"></image>
					</view>
					<view class="item-bottom">
						<view class="item-top-name">大暑已到易伤津耗气，可用药粥滋补身体</view>
						<view class="item-bottom-msg">
							3.2万人浏览
						</view>
					</view>
				</view>
				<view class="item-2">
					<view class="img-box2">
						<image src="../../../static/img-4.png" class="item-img2" mode="aspectFill"></image>
						<image src="../../../static/play.png" class="play-img"></image>
					</view>
					<view class="item-bottom">
						<view class="item-top-name">大暑已到易伤津耗气，可用药粥滋补身体</view>
						<view class="item-bottom-msg">
							3.2万人浏览
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content-box" v-if="isActive == 2">
			<view class="product-list">
				<view class="product-item" @click="productDetails">
					<view class="product-item-column2">
						<image src="../../../static/img-4.png" class="product-item-column2-img" mode="aspectFill">
						</image>
						<view class="product-item-column2-bottom">
							<view class="product-item-column-name2">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
							<view class="product-item-column2-row-between">
								<view class="product-item-column2-price">
									￥394.00
									<text>￥34.00</text>
								</view>
								<button type="default" class="product-item-column2-btn">
									<image src="../../../static/add-icon.png" mode=""></image>
								</button>
							</view>
						</view>
					</view>
				</view>
				<view class="product-item" @click="productDetails">
					<view class="product-item-column2">
						<image src="../../../static/img-4.png" class="product-item-column2-img" mode="aspectFill">
						</image>
						<view class="product-item-column2-bottom">
							<view class="product-item-column-name2">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
							<view class="product-item-column2-row-between">
								<view class="product-item-column2-price">
									￥394.00
									<text>￥34.00</text>
								</view>
								<button type="default" class="product-item-column2-btn">
									<image src="../../../static/add-icon.png" mode=""></image>
								</button>
							</view>
						</view>
					</view>
				</view>
				<view class="product-item" @click="productDetails">
					<view class="product-item-column2">
						<image src="../../../static/img-4.png" class="product-item-column2-img" mode="aspectFill">
						</image>
						<view class="product-item-column2-bottom">
							<view class="product-item-column-name2">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
							<view class="product-item-column2-row-between">
								<view class="product-item-column2-price">
									￥394.00
									<text>￥34.00</text>
								</view>
								<button type="default" class="product-item-column2-btn">
									<image src="../../../static/add-icon.png" mode=""></image>
								</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	;
	export default {
		data() {
			return {
				//选项卡
				isActive: 1,
				navList: [{
					index: 0,
					title: '资讯',
				}, {
					index: 1,
					title: "养生",
				}, {
					index: 2,
					title: "产品"
				}]
			}
		},
		onLoad() {

		},
		methods: {
			checked(index) {
				this.isActive = index
			},
			//跳转咨询详情
			informationDetails() {
				uni.navigateTo({
					url: '../../health-encyclopedia/video-details/video-details'
				})
			},
			// 跳转视频详情
			videoDetails() {
				uni.navigateTo({
					url: '../../health-encyclopedia/video-details/video-details'
				})
			},
			// 跳转商品详情
			productDetails() {
				uni.navigateTo({
					url: '../product-details/product-details'
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "./video-column.css";
</style>