CjyTravel/subPageB/cate/index.vue

<template>
	<view class="s-page-wrapper">
		<view class="destination-list" >
			<view class="list-content" mode="scaleToFill" v-for="(item,index) in mudidiList" :key="index">
				<image :src="item.logo"  class="list-img" mode="scaleToFill" ></image>
				<view  class="list-text" >
				   <view  class="list-text1" >{{item.title}}</view>
				   <view  class="list-text2" >{{item.subtitle}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mudidiList: [],
				netType:true
			};
		},
		onLoad() {
			var that = this;
			this.$util.getNetworkType(
				function(res){
					if(res.networkType === 'none'){
						uni.showToast({
							title:that.$param.netMsg,
							icon:"none",
							duration:2000
						})
						that.netType = false;
					}
				},function(){
					uni.showToast({
						title:that.$param.netMsg,
						icon:"none",
						duration:2000
					})
					that.netType = false;
				}
			)
			if(!that.netType){
				return;
			}
			uni.showLoading({
				title: "加载中",
				mask: true
			})
			this.getRedisRegion();
			that.$util.saveOperatorLog(that,"FUN","目的地");
		},
		onReady() {
			setTimeout(function() {
				uni.hideLoading();
			}, 500);
		},
		onNavigationBarButtonTap: function(index) {
			let cmr = plus.camera.getCamera();
			let res = cmr.supportedVideoResolutions[0];
			let fmt = cmr.supportedVideoFormats[0];
			cmr.startVideoCapture(
				function(path) {
					plus.io.resolveLocalFileSystemURL(
						path,
						entry => {
							entry.file(function(file) {
							});
						},
						e => {}
					);
				},
				function(error) {
					console.log('Resolve file URL failed: ' + e.message);
				}, {
					resolution: res,
					format: fmt,
					videoMaximumDuration: 10
				}
			);
		},
		methods: {
			getRedisRegion: function(){
				var that = this;
				var data = {
					key: that.$param.userkey + '_mdd_list'
				};
				that.$Request.post(that.$config.getRedisData, data).then(res => {
					if (res.status == 200) {
						var d = res.data.mddList;
						for (var i = 0; i < d.length; i++) {
							d[i].logo = that.$config.ROOTPATH + d[i].logo;
						}
						that.mudidiList = d;
					} else {
						that.getData();
					}
				});
			},
			getData() {
				var that = this;
				var url = this.$config.getMessageInfoFormFilter;
				var data = {
					type: this.$param.mddType,
					userkey:this.$param.userkey,
					pageSize:100,
					"sort": "2"
				};
				this.$Request.post(url, data).then(res => {
					var flag = that.$util.isSuccess(res);
					if(!flag){
						return;
					}
					var d = res.data;
					for (var i = 0; i < d.length; i++) {
						d[i].logo = this.$config.ROOTPATH + d[i].logo;
					}
					this.mudidiList = d;
				});
			},
			
		}
	};
</script>

<style>
	.destination-list {
		background-color: #f9f9f9;
		padding:32rpx;
		overflow: hidden;
	}

	.destination-list .list-content {
		float: left;
		width: 47%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		margin:1.5%;
		border-radius:16rpx;
		position: relative;
		overflow: hidden;
		
	}
    .destination-list .list-content .list-img{
	    width: 100%;	
	}
	.destination-list .list-content img {
		display: block;
		width: 100%;
	}
	.list-content .list-text{
		position:absolute;
		width: 100%;
		left: 0;
		bottom: 0;
		background: linear-gradient(to bottom, transparent, #000 100%);
		padding-bottom: 20rpx;
		padding-top: 40rpx;
	}
	.list-content .list-text .list-text1{
		font-size: 40rpx;
		font-weight: bold;
		color: #fff;
		padding: 6rpx 20rpx;
		text-shadow: rgba(0,0,0,.5) 0 0 30rpx;
	}
	.list-content .list-text .list-text2{
		font-size: 24rpx;
		color: #fff;
		opacity: .8;
		height: 72rpx;
		line-height: 36rpx;
		padding: 2rpx 20rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	/* 目的地 图片背景色块填充*/
	.destination-list .list-content:nth-child(4n) .list-img{ background: #f2dedc;}
	.destination-list .list-content:nth-child(4n+1) .list-img{ background: #dcf0f2;}
	.destination-list .list-content:nth-child(4n+2) .list-img{ background: #e6f2dc;}
	.destination-list .list-content:nth-child(4n+3) .list-img{ background: #e9dcf2;}
</style>