myVlog.vue

<template>
	<view class="content">
		<view v-if="vlogList.length>0 && show===false" class="noEmpty">
			<view style="height: 20rpx;"></view>
			<u-search bg-color="#434957" color="#ffffff" placeholder="景区/关键词搜索" v-model="search" :clearabled="true"
				@search="query" :show-action="false"></u-search>
			<view class="body">
				<view class="item" v-for="(item,index) in vlogList" :key="index" @click="navTo(item)">
					<image :src="item.thumbImageUrl" mode="widthFix"></image>
					<text>{{item.merchantName}}</text>
				</view>
			</view>
		</view>
		<view v-else-if="vlogList.length===0 && show===false" class="empty">
			<view class="row">
				<text>空空如也...</text>
				<image src="../../../static/img/vlog/icon/icon_thereisnovideo.png"></image>
			</view>
			<navigator url="../vlogface/vlogface" class="btnn">
				<view>点击获取我的Vlog</view>
			</navigator>
		</view>
		<view v-else></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true, //跳转过渡页面
				vlogList: [], //我的vlog集合
			}
		},
		onReady() {},
		onLoad() {
			this.$request('distribution/vlog/getVlogCreateInfo', {//获取结果
					userId: uni.getStorageSync('openid')
			}).then(res=>{
				setTimeout(()=>{
					this.getMyVlogList()
				},1000)
			})
		},
		methods: {
			navTo(item){
				this.$u.route('/pages/vlog/vlogList/vlogList?merchantId='+item.merchantId)
			},
			getMyVlogList(){
				this.$request('wechatUser/myPage/getVlogRecord', {
					openid: uni.getStorageSync('openid'),
					productType:0
				}).then(res => {
					this.show = false
					if(res.code==='00'){
						this.vlogList = res.data
						if (this.vlogList.length > 0) { //如果有数据
							uni.setNavigationBarColor({ //动态更改导航条颜色
								frontColor: '#ffffff',
								backgroundColor: '#192033',
								animation: {
									duration: 1,
									timingFunc: 'easeIn'
								}
							})
							uni.setBackgroundColor({
								backgroundColor: '#192033'
							})
						} else { //数据为空
							this.show = false
						}
					}else{
						uni.showModal({
							title: '提示',
							content: res.message,
							showCancel: false,
						})
					}
				})
			},
			query(e) {
				console.log(e)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100%;
		width: 100%;
		text-align: center;
		.noEmpty {
			color: #fff;
			height: 100%;
			width: 100%;
			background-color: #192033;
			padding: 0 20rpx;

			.body {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-top: 30rpx;

				.item {
					width: 49%;
					height: 250rpx;
					margin-top: 20rpx;

					image {
						width: 100%;
						height: 80%;
						border-radius: 10rpx;
					}

					text {
						font-weight: bold;
					}
				}
			}
		}

		.empty {
			height: 100%;
			width: 100%;
			background-color: #fff;
			padding: 0 20rpx;
			text-align: center;
			padding-top: 30rpx;

			.row {
				height: 200rpx;
				background: linear-gradient(90deg, #ECF5FF 0%, #CEE5FF 100%);
				line-height: 200rpx;
				border-radius: 10rpx;
				margin-bottom: 300rpx;

				text {
					font-weight: bold;
					font-size: 32rpx;
					float: left;
					margin-left: 120rpx;
				}

				image {
					height: 180rpx;
					width: 200rpx;
					float: right;
					margin-right: 50rpx;
				}
			}

			.btnn {
				display: inline-block;
				font-size: 28rpx;
				border-radius: 40rpx;
				background-color: #FFE600;
				padding: 20rpx 40rpx;
				margin: 30rpx 0;
				font-weight: bold;
			}
		}
	}
</style>