odd_job_applet/pages/video/videolist.vue

<template>
	<view>
		<view class="listbox grid col-2">
			<block v-for="(item,index) in plist" :key="index">
				<view class="cu-card case vitembox" @tap="goDetail(item.id)">
					<view class="cu-item shadow">
						<view class="image">
							<image :src="item.imageurl" mode="aspectFill" style="height: 350rpx;"></image>
							<view class="cu-bar bg-shadeBottom"> <text class="text-cut">{{item.title}}</text></view>
						</view>
						<!-- <view class="text-content padding-lr-xs padding-top-xs text-cut">{{item.title}}</view> -->
						<view class="cu-list menu-avatar">
							<view class="cu-item">
								<view class="cu-avatar round" :style="'background-image:url('+item.worker.tilpic+');'"></view>
								<view class="content flex-sub">
									<view class="text-grey"><text class="text-sm text-cur" style="height: 44rpx; overflow: hidden;">{{item.worker.title}}</text></view> 
									<view class="text-gray text-sm flex justify-between">
										<view>{{item.createtime}}</view>
										<!-- <view class="text-gray text-right basis-xs text-sm">
											<text class="cuIcon-shop margin-right-xs text-lg"></text>
											进店
										</view> -->
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<uni-load-more :status="pstatus"></uni-load-more>
		
		
		<view class="padding-sm"></view>
		<view class="padding-xl"></view>
		<view class="cu-bar tabbar bg-white foot">
			<view class="action text-gray" @tap="goNavPage('/pages/index/index')">
				<view class="cuIcon-cu-image">
					<image src="../../static/tabbar/index.png"></image>
				</view>
				首页
			</view>
			<view class="action text-gray" @tap="goNavPage('/pages/comjobs/comjobs')">
				<view class="cuIcon-cu-image">
					<image src="../../static/tabbar/jobs.png"></image>
				</view>
				招聘
			</view>
			<!-- #ifndef MP-WEIXIN -->
			<view class="action text-blue videoimg" @tap="goNavPage('/pages/video/videolist')">
				<view class="cuIcon-cu-image">
					<image src="../../static/tabbar/video.png"></image>
				</view>
				微工作
			</view>
			<!-- #endif -->
			<!--
			<view class="action text-gray" @tap="goNavPage('/pages/broker/brokerlist')">
				<view class="cuIcon-cu-image">
					<image src="../../static/tabbar/broker.png"></image>
				</view>
				经纪人
			</view>
			-->
			<view class="action text-gray" @tap="goNavPage('/pages/my/my')">
				<view class="cuIcon-cu-image">
					<image src="../../static/tabbar/my.png"></image>
				</view>
				我的
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
	var _this;
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				userinfo: false,

				pstatus: 'more',
				ppage: 1,
				psize: 20,
				plist: [],
				
			}
		},
		onLoad: function(option) {
			_this = this;
			_this.userinfo = uni.getStorageSync('userinfo') || false;
			_this.getMore();
		},
		onPullDownRefresh: function() {
			_this.pageRefresh();
		},
		onReachBottom: function() {
			if (_this.pstatus !== 'more') {
				return;
			}
			_this.getMore();
		},
		onShareAppMessage: function(res) {
			return {
				title: "视频动态",
				path: "/pages/video/videolist"
		    }
		},
		methods: {
			goDetail: function(videoid) {
				uni.navigateTo({
					url: '/pages/video/detail?videoid=' + videoid
				});
			},
			
			pageRefresh: function() {
				_this.pstatus = 'more';
				_this.ppage = 1;
				_this.plist = [];
				_this.getMore();
			},
			getMore: function() {
				_this.$req.ajax({
					path: "video/getmore",
					data: {
						ppage: _this.ppage,
						psize: _this.psize
					}
				}).then((data) => {
					_this.pstatus = data.pstatus;
					_this.plist = _this.plist.concat(data.plist);
					_this.ppage += 1;
					uni.stopPullDownRefresh();
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},
			
			goNavPage: function(pageurl) {
				uni.redirectTo({
					url: pageurl
				});
			},
		}
	} 
</script>


<style lang="scss">
	.cu-card>.cu-item { margin: 30rpx 15rpx 0rpx 15rpx; border-radius: 6rpx; }
	.vitembox{ width: 360rpx; }
	
	.cu-list.menu-avatar>.cu-item>.cu-avatar{ left: 15rpx !important; }
	.cu-list.menu-avatar>.cu-item .content.flex-sub {
		width: calc(100% - 60rpx - 20rpx);
	}
	.cu-list.menu-avatar>.cu-item {
		height: 120rpx;
	}
	.cu-list.menu-avatar>.cu-item .content {
		left: 90rpx;
	}
	
	.cu-card.case .image .cu-bar{ padding: 0rpx 15rpx; }

	// .vitembox image{ width: 360rpx; height: 165rpx; }
	
</style>