<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>