nk-shop2.0/components/WaterfallsFlowItem/WaterfallsFlowItems.vue

131 lines
2.3 KiB
Vue

<template>
<view class="wf-item-page" @click="gogogo(item)">
<image :src="item.image[0]" mode="widthFix" class="item-img" />
<view class="goods_item_img" v-if="item.video_link.length>0">
<image src="@/static/images/sp.png" mode="aspectFit"></image>
</view>
<view class="title">{{item.title}}</view>
<view class="item-info">
<image :src="(item.author && item.author.avatar) || '/static/images/f.png'" mode="aspectFit"
class="info-avatar" />
<view class="info-nickname">{{ item.author.nickname }}</view>
</view>
</view>
</template>
<script>
export default {
props: {
item: {
type: Object,
require: true
},
userid: {
type: String | Number,
require: true
},
},
data() {
return {
user_id: ''
}
},
methods: {
gogogo(item) {
if (this.userid) {
if (item.video_link.length > 0) {
uni.navigateTo({
// #ifdef MP || H5
url: `/pages/short_video/nvueSwiper/index?id=${item.community_id}&uid=${this.userid}&user=1`
// #endif
// #ifdef APP
url: `/pages/short_video/appSwiper/index?id=${item.community_id}&uid=${this.userid}&user=1`
// #endif
})
} else {
uni.navigateTo({
url: `/pages/plantGrass/plant_detail/index?id=${item.community_id}`
})
}
} else {
this.$util.Tips({
title: '用户信息不存在,请完成登录在进行该操作',
icon: 'error'
})
}
},
}
}
</script>
<style lang="scss" scoped>
.wf-item-page {
background: #fff;
overflow: hidden;
border-radius: 5px;
position: relative;
}
.item-img {
width: 100%;
}
.item-info {
display: flex;
align-items: center;
padding: 5px;
}
.goods_item_img {
position: absolute;
top: 20rpx;
right: 18rpx;
width: 52rpx;
height: 52rpx;
z-index: 1 !important;
image {
width: 100%;
height: 100%;
}
}
.title {
font-size: 30rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
margin: 12px 0;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
padding: 0 5px;
}
.info-avatar {
width: 49rpx;
height: 49rpx;
border-radius: 50%;
margin-right: 5px;
}
.info-nickname {
font-size: 12px;
color: #333;
}
</style>