179 lines
6.6 KiB
Vue
179 lines
6.6 KiB
Vue
<template>
|
|
<view class="">
|
|
<!-- 普通瀑布流 -->
|
|
<view class="community-list" v-if="type == 'waterfall'">
|
|
<router-link v-for="(item, index) in list" :key="index" class=""
|
|
:to="'/bundle_b/pages/community_detail/community_detail?id=' + item.id">
|
|
<view class="community-list--item bg-white m-t-20">
|
|
<view class="community-img">
|
|
<u-lazy-load threshold="0" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
|
|
</view>
|
|
<view class="community-info">
|
|
<view class="community-title line-2">{{item.content}}</view>
|
|
<view class="m-t-10 flex">
|
|
<u-image width="50" height="50" border-radius="50%" :src="item.avatar"></u-image>
|
|
<view class="user-name flex-1 line-2">{{ item.nickname }}</view>
|
|
<view class="likes">
|
|
<image
|
|
:src="item.is_like?'/static/images/icon_collection_s.png':'/static/images/icon_likes.png'">
|
|
</image>
|
|
<text class="xs muted m-l-6">{{ item.like }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</router-link>
|
|
</view>
|
|
|
|
<!-- 用户作品瀑布流 -->
|
|
<view class="community-list" v-if="type == 'works'">
|
|
|
|
<router-link v-for="(item, index) in list" :key="index" class=""
|
|
:to="'/bundle_b/pages/community_detail/community_detail?id=' + item.id">
|
|
<view class="community-list--item bg-white m-t-20">
|
|
<view class="community-img">
|
|
<!-- 审核 Start -->
|
|
<view class="works flex row-center " v-if="item.status === 0 || item.status === 2">
|
|
<view class="text-center nr white">
|
|
<view>{{ item.status_desc }}</view>
|
|
<view class="m-t-10">{{ item.audit_remark_desc }}</view>
|
|
</view>
|
|
</view>
|
|
<!-- 审核 End -->
|
|
<u-lazy-load threshold="0" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
|
|
</view>
|
|
<view class="community-info">
|
|
<view class="community-title line-2">{{item.content}}</view>
|
|
<view class="m-t-20 flex">
|
|
<view class="user-name flex-1 line-2">{{ item.create_time }}</view>
|
|
|
|
<view class="likes">
|
|
<image
|
|
:src="item.is_like?'/static/images/icon_collection_s.png':'/static/images/icon_likes.png'">
|
|
</image>
|
|
<text class="xs muted m-l-6">{{ item.like }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</router-link>
|
|
</view>
|
|
|
|
<!-- 首页list -->
|
|
<view class="community-list flex" v-if="type == 'index'">
|
|
<router-link v-for="(item, index) in list" :key="index" class="community-list--item bg-white m-r-20"
|
|
:to="'/bundle_b/pages/community_detail/community_detail?id=' + item.id">
|
|
<view class="community-index">
|
|
<view class="wrap white sm p-l-10">
|
|
<view class="index-title line-1">{{ item.content }}</view>
|
|
<view class="flex m-t-10">
|
|
<u-lazy-load threshold="0" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
|
|
<view class="index-name line-1 m-l-6">
|
|
{{ item.nickname }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-image width="240" height="240" :src="item.image" borderRadius="14"></u-image>
|
|
</view>
|
|
</router-link>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
list: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
// 两行时有效
|
|
width: {
|
|
type: String,
|
|
default: '347rpx'
|
|
},
|
|
type: {
|
|
type: String
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.community-list {
|
|
&--item {
|
|
border-radius: 14rpx;
|
|
|
|
// 个人中心审核作品
|
|
.community-img {
|
|
width: 336rpx;
|
|
position: relative;
|
|
|
|
.works {
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 10;
|
|
border-radius: 14rpx;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
.community-index {
|
|
width: 240rpx;
|
|
position: relative;
|
|
|
|
.wrap {
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 10;
|
|
border-radius: 14rpx;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
position: absolute;
|
|
padding-top: 140rpx;
|
|
|
|
.index-title {
|
|
width: 210rpx;
|
|
}
|
|
|
|
.index-name {
|
|
width: 160rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.community-info {
|
|
padding: 10rpx;
|
|
|
|
.community-title {
|
|
font-size: 28rpx;
|
|
line-height: 40rpx;
|
|
color: $-color-normal;
|
|
}
|
|
|
|
.user-name {
|
|
color: $-color-muted;
|
|
font-size: 24rpx;
|
|
margin: 0 10rpx;
|
|
}
|
|
|
|
.likes {
|
|
image {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|