xingmingyi_applet/pages/user/mine/buy.vue

<template>
	<view>
		<u-sticky>
		<view class="top dfsb">
			<view @click="sectionChange(item.type)" :class="[type == item.type ? 'sel' : '', 'li']"
				v-for="(item, index) in video_type" :key="index">{{ item.name }}</view>
		</view></u-sticky>
		<view v-if="type==1" class="cl-one dffs">
			<view @click="nextTo(item)" class="vidLi" v-for="(item, ind) in list" :key="ind">
				<view class="imgbox">
					<image :src="item.img" mode=""></image>
					<view class="look">{{ item.time_length }} </view>
				</view>
				<view class="title elli">{{ item.title }}</view> 
			</view>
		</view> 
		<!-- -->
		<view v-if="type==2" class="twobox">
			<view class="goodLi dfsb dfsb" v-for="(item, index) in list" :key="index">
				<view @click="navTo(item)" class="boxli dffd">
					<view class="textmain">
						{{item.name||''}}
					</view>
					<view class="monli dfsb">
						<text class="textgrey fontmid">SHIPIN</text> 
					</view>
					<view class="monli dfsb">
						<text class="promain">结束时间：{{item.end_time }} </text>
					</view>
				</view> 
			</view>
		</view>
	</view>
</template>

<script>
	import videoList from '@/components/videoList.vue';

	export default {
		components: {
			videoList
		},
		data() {
			return {
				type: 1,
				video_type: [{
					type: 1,
					name: '单视频'
				}, {
					type: 2,
					name: '多视频'
				}],
				list: [],
				status: 'loadmore',
				page: 1,
				pagenum: 10,

			};
		},
		onPullDownRefresh() {
			this.page = 1;
			this.list = [];
			this.getInfoList();
			setTimeout(res => {
				uni.stopPullDownRefresh();
			}, 1000);
		},

		onReachBottom() {
			if (this.status == 'nomore') return;
			this.status = 'loadmore';
			this.page = ++this.page;
			this.getInfoList();
		},
		onLoad() {
			this.getInfoList();
		},
		methods: {
			// 单视频
			nextTo(item) {
				uni.navigateTo({
					url: '/pages/index/video/videoInfo?id=' + item.id
				});
			},
			sectionChange(key) { 
				this.page = 1;
				this.list = [];
				this.type = key;
				this.getInfoList();
			},
			getInfoList() {
				let url = 'user/myVideoList';
				this.$api
					.request(url, {
						type: this.type,
						page: this.page,
						limit: this.pagenum
					})
					.then(data => {
						if (data.code == '200') {
							this.list = this.list.concat(data.data);
							if (data.data.length < this.pagnum) {
								this.status = 'nomore';
							}
						} else {
							this.$api.toast(data.msg);
						}
					});
			},
			navTo(item) {
				uni.navigateTo({
					url: `/pagesA/catList/catli?cat_id=${item.cate_id}`
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.top { 
		margin: 20rpx 0;
		background-color: #fff;
		// justify-content: center;
		justify-content: space-around;

		.li { 
			border-bottom: 5rpx solid transparent;
			padding: 20rpx 0;
		}

		.sel { 
			color: #025b58;
			border-bottom: 5rpx solid #025b58;
		}
	}

	.cl-one { 
		padding: 0 30rpx; 
			align-items: flex-start; 
			flex-wrap: wrap;
			.vidLi {
				background: #ffffff;
				box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.07);
				border-radius: 0px 0px 10rpx 10rpx;
				width: 330rpx;
				margin-right: 30rpx;
				margin-bottom: 30rpx;
				&:nth-of-type(2n){
					margin-right: 0;
				}
				.imgbox {
					width: 330rpx;
					height: 238rpx;
					position: relative;
					image {
					width: 330rpx;
					height: 238rpx;
						border-radius: 10rpx;
					}
					.look {
						position: absolute;
						bottom: 15rpx;
						right: 19rpx;
						background: rgba(#000, 0.3);
						border-radius: 18rpx;
						font-size: 20rpx;
						line-height: 28rpx;
						padding: 5rpx 14rpx;
						color: #ffffff;
						display: inline-block;
					}
				}
				.title {
					margin: 18rpx 12rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500; 
				}
			}
	}
	.twobox{
		padding: 0 30rpx;
		.goodLi {
				width: 100%;
				margin-top: 40rpx;
		
				.boxli {
					flex: 1;
					margin-right: 20rpx;
					padding: 20rpx 20rpx 10rpx 28rpx;
		 
					.monli {
						width: 100%;
						margin-top: 15rpx; 
					}
		
				}
		
		
				&:nth-of-type(3n-2) {
					.boxli {
						background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXIAAACGCAMAAAD3jvGAAAAAAXNSR0IArs4c6QAAAYlQTFRFAAAA////////////3///6Oj/6+v/7u7/4fD/////5OT/////6Oj/////3+r/4uv/5OT/5ub/9/f/4Oj34un44+P45eX4+Pj/4ef54uj54+P55OT6+vr/4eb64uf64+P64OT79vb/4eX74ub74+P34OT34eX3+Pj/4ub44+P44OT44eX49fX/4uX54OP54eT54eT54uX54OP54eT64eT64uX34OX34eP34uT44uX44OX44eP44uT44OT44OX44eP54uT54OT54eX54eP34uT34OT34eX34eP44uP44OT44eT44eP44OP44eT44eT44eP44OP54eT54eT34eP34OP34eT34eT44OP44OP44eT44eT44OP44eP44eT44eT44OT44eP34eT34eT34OT34eP34eP34OT44OT44eP44eP44OT49Pb+9vf/9vf/6+769vf/8/X+9fb/8vP+9fb/4OP45+j64OT49vf/4eT44OP44OP49vf/4eT44eT44eT45Of55un67vD99vf/Yx4bvgAAAH50Uk5TAAIEBggLDQ8RERMUFhcYGhwfHyEjJScnKiwuMDAzNTc5Ojs+QEJERUdJS01OT1JUVlhbXV9hY2ZoamxvcXN1d3p8foCDhYeJi46QkpSXmZudn6Kkpqirra+xs7a4ury/wcPFx8rMztDT1dfY2Nne4OTo7u7w8fLz9Pf5+fv96tGGfAAAAWdJREFUeNrt17FKQmEcxmGP6BByME/oWVycXLoR9ygIomjxLrwT76oLaXHVBheJTiD0vYk8v/XbHv68eqpNT3/e53bX/djnU6C79Q3ycLe/mCMvU/NeIw/XvtXIw01fa+ThZh3myEuaN8jT5i8N8vT/85/MkcfNkcfNkRc3b5GnzZ9b5OEm38yRx82RR8znyNPmT3Pk4cYn5sjj5sjj5shz5gvkafPHBfJwo6M58rg58qz5Enna/OG+N8BQoH3V9TJcfSAv0eHQ/WRY0vWRI7/6KuTIDYtcOXKdb44cOXIhRy7kyIX8/7/4kSNHLluOXMhtuVw5cuSy5a5cyJHLlrtyIUduy+XKkQs5cvn5dOXIhdyWy5UjF3LkQo4cuZAjF3LkQo4cuZAjF3LkQo5cyJEjF3LkQo5cyJEjF3LkQo5cyJELOXLkQo5cyJELOXLkQo5cyJELOXIhR45cyJELOXIhvyRyBPG+ACG3FwEV1LKsAAAAAElFTkSuQmCC) no-repeat;
						background-size: 100% 100%;
					}
				}
		
				&:nth-of-type(3n-1) {
					.boxli {
						background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXIAAACGCAMAAAD3jvGAAAAAAXNSR0IArs4c6QAAAYxQTFRFAAAA///////////U///////f///R///q///Y///M///S///w///X///R///0//TU//XO//bR//fO///v//fR//jM//jP//jR///r//nO//nR//TN//TP///v//XN//XP//bM//bO//vt//bP//fO//fP//fN//fO//vt//TN//XO//XM//XN//XP//zs//bN//bO//bN//bO//fN//TO//TM//TN//XO//XN//XO//XM//bN//bM//bN//bM//TN//TO//XN//XO//XM//XN//vt//XM//XN//bM//bN//TN//TN//TN//XM//XN//XM//XN//XM//XN//XN//TN//TN//TM//TN//XM//XN//XM//XN//XN//XN//XN//TM//vs//TN//TM//TN//XM//XM//XN//vs//XN//XN//XN//XM//rr//XN//TM//TN//TM//rs//rs//vr//TN//rn//vs//TM//TM//vr//XN//XM//vr//XN//XM//vs//XN//XN//nm//vsfHMuigAAAIF0Uk5TAAIEBgcICwwNDxERExYXGBocHx8hIyUnJyosLjAwMzU3OTo7PkBCREVHSUtNT1FSVFZYW11fYWNmaGpsb3FzdXd6fH6AgYOFh4mLjpCSlJeZm52foqSmqKutr7Gztri6ury/wcPExcXHyszOz9DT1dfY4Oju7u7w8vP09/j5+/v9EeGL8AAAAX9JREFUeNrt2k9KAnEcxuH8AwOJYrlIMDe6mZV3EQSJghJP4l28h3foBC26grvAllE4u/m9EDyf7eweXr6zmOkcbtR6nx+nr8aHfT4FehzPjo3mXT4lGi5fKuThlm8V8vRxaTJHXtB8gDxtvhsgD/dw1Rx5WfMR8rT5foQ83P1+gjxt/jpBHu7urznygPkUedr8eYo83PiXOfKM+Rx52vxpjjzc8Mccecx8gTxtvl0gD3e7rZGnzTc18nDVpkYeN18hT5uvV34dCtdfIy/T5dL05PzusITrueXpOsjTdZFbuZXLyq1cVv4PzJEjR67W35/IrdzKZeXI5bBYuazcypELuVsuK0cu5G65rBw5crnlVi7kyOWWWzlyIUcur08rF3LkQu71aeVCjlzIkQs5cuRCjlzIkQs5ciFHjlzIkQs5cl3PF34rRy7kyIUcuZAjRy7kyIUcuZAjF3LkyIUcuZAjF3LkyJXI31pWjlzI3XIhd1iEHLlbLitHrhbIEcT7Bji0GCzVYAigAAAAAElFTkSuQmCC) no-repeat;
						background-size: 100% 100%;
					}
				}
		
				&:nth-of-type(3n) {
					.boxli {
						background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXIAAACGCAMAAAD3jvGAAAAAAXNSR0IArs4c6QAAAYlQTFRFAAAA/////////////////+jo/+vr/+7u//Dw//////Lk//////Po///0/+rq/+vr/+3t/+/m//f3//Do/+np/+rq/+vl//j4/+3n/+7o/+np/+rq//r0/+vm/+zn/+zo/+3p//b2/+nl/+rm/+vn/+zo/+zl//j0/+nm/+rn/+vn/+vo//Xy/+zl/+nm/+rn/+rn/+vl/+vm/+nm/+rn/+rn/+rl/+vm/+nm/+nn/+rl/+rm/+vm/+vn/+nn/+rl/+rm/+rm/+vn/+nl/+rm/+rm/+rm/+vl/+nl/+nm/+rm/+rn/+rl/+nm/+nm/+rm/+rl/+rl/+nm/+nm/+nm/+rl/+rm/+rm/+nm/+nl/+rl/+rm/+rm/+nm/+nl/+rm/+rm/+rm/+nl/+nl/+rm/+rm/+rl/+rl/+nm/+nm/+rm//T0//b0//b0//Du//b1//T0//X0//Pz//X0/+rl/+3q/+rm//b1/+nm/+nl/+nl//b1/+rm/+rm/+rm/+zp/+3q//Hw//b1aTKk/wAAAH50Uk5TAAIEBggLDQ8RERMUFhcYGhwfHyEjJScnKiwuMDAzNTc5Ojs+QEJERUdJS01OT1JUVlhbXV9hY2ZoamxvcXN1d3p8foCDhYeJi46QkpSXmZudn6Kkpqirra+xs7a4ury/wcPFx8rMztDT1dfY2Nne4OTo7u7w8fLz9Pf5+fv96tGGfAAAAWdJREFUeNrt17FKQmEcxmGP6BByME/oWVycXLoR9ygIomjxLrwT76oLaXHVBheJTiD0vYk8v/XbHv68eqpNT3/e53bX/djnU6C79Q3ycLe/mCMvU/NeIw/XvtXIw01fa+ThZh3myEuaN8jT5i8N8vT/85/MkcfNkcfNkRc3b5GnzZ9b5OEm38yRx82RR8znyNPmT3Pk4cYn5sjj5sjj5shz5gvkafPHBfJwo6M58rg58qz5Enna/OG+N8BQoH3V9TJcfSAv0eHQ/WRY0vWRI7/6KuTIDYtcOXKdb44cOXIhRy7kyIX8/7/4kSNHLluOXMhtuVw5cuSy5a5cyJHLlrtyIUduy+XKkQs5cvn5dOXIhdyWy5UjF3LkQo4cuZAjF3LkQo4cuZAjF3LkQo5cyJEjF3LkQo5cyJEjF3LkQo5cyJELOXLkQo5cyJELOXLkQo5cyJELOXIhR45cyJELOXIhvyRyBPG+ACG3FwEV1LKsAAAAAElFTkSuQmCC) no-repeat;
						background-size: 100% 100%;
					}
				}
		
				.libuy {
					width: 147rpx;
					height: 64rpx;
					text-align: center;
					line-height: 64rpx;
					background: rgba(205, 222, 222, 0.39);
					color: #26565A;
					font-size: 26rpx;
					border-radius: 34rpx;
				}
		
				.libuyOK {
					background: #f5f5f5;
					color: #999;
				}
		
			}
		
	}
</style>