264 lines
5.2 KiB
Vue
264 lines
5.2 KiB
Vue
<template>
|
||
<view class="page">
|
||
<view style="height:150rpx;width:100%;"></view>
|
||
<view class="row-space-around" >
|
||
<view class="bg-gray-help margin-sm padding-lr-lg padding-tb-sm radius-xs" v-for="(item,index) in MemberPostsList" :key="index" @tap="goLive(item.story_id)">
|
||
<image lazy-load :src="item.story_file[0]" style="width:366rpx;" />
|
||
<view class="item-info">
|
||
<image :src="item.user_avatar" mode="aspectFill" class="info-avatar" />
|
||
<text class="item-name">{{item.user_nickname}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="m-loading-box" style="margin-top:120rpx;">
|
||
<block v-if="ispage">
|
||
<view class="u-loadmore">
|
||
<label class="u-loading"></label>
|
||
<text class="u-loadmore-tips">{{__('正在加载')}}</text>
|
||
</view>
|
||
<view>
|
||
<text></text>
|
||
</view>
|
||
</block>
|
||
<block v-else>
|
||
<view class="u-loadmore u-loadmore-line">
|
||
<text class="u-loadmore-tips">{{__('没有更多数据啦！')}}</text>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import dateUtil from "@/helpers/util_date";
|
||
import statusBar from '@/components/status-bar.vue'
|
||
import { mapState, mapMutations } from 'vuex';
|
||
export default {
|
||
props:{
|
||
// 瀑布流列表
|
||
videoList:{
|
||
type:Array,
|
||
require:true
|
||
},
|
||
|
||
},
|
||
data() {
|
||
return {
|
||
flag: false,
|
||
ispage: false,
|
||
page:1,
|
||
MemberPostsList: [],
|
||
is_loaded:false,
|
||
};
|
||
},
|
||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin','__', '$',]),
|
||
components: {
|
||
statusBar,
|
||
},
|
||
|
||
created() {
|
||
this.getPostsList()
|
||
},
|
||
|
||
watch:{
|
||
|
||
},
|
||
methods:{
|
||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
||
|
||
|
||
getPostsList: function (force_refresh) {
|
||
let that = this;
|
||
var params = {page: this.page, 'rand':1};
|
||
|
||
that.$.request({
|
||
url: this.Config.URL.sns.story_lists,
|
||
data: params,
|
||
success: function (data, status, msg, code) {
|
||
if (data.items.length > 0) {
|
||
for (var r = 0; r < data.items.length; r++) {
|
||
data.items[r]['story_time_str'] = dateUtil.dateUtils.format(that.$.datetimeFormatter(data.items[r]['story_time']));
|
||
}
|
||
|
||
let tmp = []
|
||
|
||
if (force_refresh)
|
||
{
|
||
tmp = data.items.concat(that.MemberPostsList);
|
||
}
|
||
else
|
||
{
|
||
tmp = that.MemberPostsList.concat(data.items);
|
||
}
|
||
|
||
if (data.page >= data.total) {
|
||
that.MemberPostsList = tmp
|
||
that.flag = false
|
||
that.ispage = false
|
||
} else {
|
||
that.MemberPostsList = tmp
|
||
that.flag = true
|
||
that.ispage = true
|
||
}
|
||
|
||
} else {
|
||
that.flag = false
|
||
that.ispage = false
|
||
|
||
}
|
||
|
||
that.is_loaded = true
|
||
|
||
|
||
that.$.stopPullDownRefresh()
|
||
that.$.hideLoading();
|
||
}
|
||
});
|
||
},
|
||
|
||
goLive: function(e) {
|
||
this.$emit('confirm', e);
|
||
},
|
||
|
||
scrollbottom: function(e) {
|
||
if (this.flag) {
|
||
var that = this;
|
||
that.flag = false;
|
||
clearTimeout(n);
|
||
|
||
that.page = parseInt(that.page) + 1;
|
||
|
||
var n = setTimeout(function() {
|
||
that.getPostsList();
|
||
}, 500);
|
||
}
|
||
},
|
||
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
.page {
|
||
background-color: #000000;
|
||
}
|
||
/* 横向两端对齐,位于各行之前、之间、之后都留有空白的容器内 */
|
||
.row-space-around {
|
||
/* #ifndef APP-PLUS-NVUE */
|
||
display: flex;
|
||
position: relative;
|
||
/* #endif */
|
||
flex-direction: row !important;
|
||
/* justify-content: space-around !important; */
|
||
flex-wrap:wrap !important;
|
||
background-color: #000000;
|
||
}
|
||
|
||
.radius-xs {
|
||
/* padding:10rpx; */
|
||
border-radius: 10rpx;
|
||
background-color: #fff;
|
||
margin: 4rpx;
|
||
}
|
||
|
||
.lv-status {
|
||
|
||
/* height:50rpx;
|
||
width:120rpx; */
|
||
background-color: rgba(0, 0, 0, 0.4);
|
||
border-radius: 50rpx;
|
||
color: #fff;
|
||
font-size: 18rpx;
|
||
padding: 4rpx 12rpx;
|
||
position: absolute;
|
||
top: 20rpx;
|
||
left: 20rpx;
|
||
display: flex;
|
||
flex-direction:row !important;
|
||
/* #ifdef APP-PLUS-NVUE */
|
||
padding-top:14rpx;
|
||
/* #endif */
|
||
|
||
}
|
||
|
||
.dot-gray {
|
||
background-color: #ababab;
|
||
border-radius: 50%;
|
||
margin-right: 4rpx;
|
||
margin-top: 14rpx;
|
||
height: 12rpx;
|
||
width: 12rpx;
|
||
width: 12rpx;
|
||
/* #ifdef APP-PLUS-NVUE */
|
||
margin-top: 4rpx;
|
||
/* #endif */
|
||
}
|
||
|
||
.dot {
|
||
background-color: #ababab;
|
||
border-radius: 50%;
|
||
margin-right: 4rpx;
|
||
margin-top: 14rpx;
|
||
height: 12rpx;
|
||
width: 12rpx;
|
||
/* #ifdef APP-PLUS-NVUE */
|
||
margin-top: 4rpx;
|
||
/* #endif */
|
||
}
|
||
|
||
.info-avatar {
|
||
height: 50rpx;
|
||
width: 50rpx;
|
||
border-radius: 50rpx;
|
||
|
||
}
|
||
|
||
.item-name {
|
||
color: #fff;
|
||
margin-left: 10rpx;
|
||
font-size: 24rpx;
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.item-info {
|
||
position: absolute;
|
||
width:300rpx;
|
||
bottom:30rpx;
|
||
left:20rpx;
|
||
display: flex;
|
||
flex-direction:row !important;
|
||
flex-wrap: wrap !important;
|
||
overflow:hidden;
|
||
}
|
||
|
||
.live-room-name {
|
||
width:344rpx;
|
||
|
||
padding:10rpx 6rpx;
|
||
}
|
||
|
||
.room-name {
|
||
overflow:hidden;
|
||
text-overflow:ellipsis;
|
||
lines: 2;
|
||
font-size: 24rpx;
|
||
}
|
||
.u-loading {
|
||
width:40rpx;
|
||
height:40rpx;
|
||
margin-left:220rpx;
|
||
}
|
||
.u-loadmore-tips {
|
||
background-color: #000000;
|
||
color:#fff;
|
||
/* #ifdef APP-PLUS-NVUE */
|
||
width:400rpx;
|
||
margin-left:280rpx;
|
||
/* #endif */
|
||
}
|
||
</style>
|