307 lines
6.8 KiB
Vue
307 lines
6.8 KiB
Vue
<template>
|
|
<view class="page">
|
|
<u-navbar title="我的收藏" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
|
|
title-size='36' height='36' id="navbar">
|
|
</u-navbar>
|
|
|
|
<!-- 分类导航栏 -->
|
|
<view class="category-nav">
|
|
<view
|
|
v-for="(item, index) in categories"
|
|
:key="index"
|
|
class="category-item"
|
|
:class="{ active: activeCategory === index + 1 }"
|
|
@click="switchCategory(index)"
|
|
>
|
|
{{ item.name }}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 收藏内容列表 -->
|
|
<scroll-view @scrolltolower="handqixing" scroll-y refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="black" class="content-list">
|
|
<view
|
|
v-for="(item, index) in contentList"
|
|
:key="index"
|
|
class="content-item" @click.stop="btnxq(item)">
|
|
<view class="item-image">
|
|
<video v-if="isVideo(item.bstPicture.split(',')[0])" :src="item.bstPicture.split(',')[0]" :controls="false"></video>
|
|
<image v-else :src="item.bstPicture.split(',')[0]" mode="aspectFill" class="image"></image>
|
|
</view>
|
|
<view class="item-content" style="position: relative;">
|
|
<image @click.stop="btnqx(item,index)" style="position: absolute;top: 0rpx;right: 0rpx;width: 50rpx;height: 50rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uREVO9VLwercFEWbnurd" mode=""></image>
|
|
<view class="item-title">{{ item.bstName }}</view>
|
|
<view class="item-bottom">
|
|
<view class="item-tag" v-if="item.bstType == 1">攻略</view>
|
|
<view class="item-tag" v-if="item.bstType == 3">景区</view>
|
|
<view class="item-tag" v-if="item.bstType == 2">动态</view>
|
|
<view class="item-tag" v-if="item.bstType == 4">商家</view>
|
|
<view class="item-date">收藏于{{ item.createTime }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="" style="width: 100%;text-align: center;margin-top: 30rpx;color: #ccc;">
|
|
快去收藏更多内容吧
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
backgroundColor: "#fff",
|
|
},
|
|
activeCategory: 1,
|
|
categories: [
|
|
{ name: '全部'},
|
|
{ name: '攻略'},
|
|
{ name: '动态'},
|
|
{ name: '景点'},
|
|
// { name: '商家'}
|
|
],
|
|
contentList: [],
|
|
userId:'',
|
|
pageNum:1,
|
|
isRefreshing:false,
|
|
bstType:'',
|
|
total:0
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.userId = option.userId
|
|
this.getlist()
|
|
},
|
|
methods: {
|
|
// 点击进行取消收藏
|
|
btnqx(item,index){
|
|
this.$u.delete(`/app/favorite/cancel/${item.bstId}?bstType=${item.bstType}`).then(res =>{
|
|
if(res.code == 200){
|
|
uni.showToast({
|
|
title: '取消收藏成功',
|
|
icon: 'success',
|
|
duration:3000
|
|
})
|
|
this.contentList.splice(index, 1)
|
|
}else{
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration:3000
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 判断获取的数据是否为视频（通过后缀名）
|
|
isVideo(url) {
|
|
if (!url || typeof url !== 'string') return false
|
|
const lower = url.split('?')[0].toLowerCase()
|
|
return ['.mp4','.mov','.m4v','.mkv','.avi','.wmv','.flv','.webm','.3gp'].some(ext => lower.endsWith(ext))
|
|
},
|
|
// 请求收藏列表
|
|
getlist(){
|
|
this.$u.get(`/app/favorite/list?pageNum=${this.pageNum}&pageSize=20&userId=${this.userId}&bstType=${this.bstType}`).then(res =>{
|
|
if(res.code == 200){
|
|
this.total = res.total
|
|
if(this.pageNum == 1){
|
|
this.pageNum++
|
|
this.contentList = res.rows
|
|
}else{
|
|
this.pageNum++
|
|
this.contentList = this.contentList.concat(res.rows)
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 点击跳转详情
|
|
btnxq(item){
|
|
if(item.bstType == 1){
|
|
uni.navigateTo({
|
|
url:'/page_fenbao/gonglue/gongluexq?id=' + item.bstId
|
|
})
|
|
}else if(item.bstType == 2){
|
|
uni.navigateTo({
|
|
url:'/page_fenbao/guangchang/dongtaixq?id=' + item.bstId
|
|
})
|
|
}else if(item.bstType == 3){
|
|
uni.navigateTo({
|
|
url:'/page_fenbao/remenxq?id=' + item.bstId
|
|
})
|
|
}else if(item.bstType == 4){
|
|
|
|
}
|
|
},
|
|
// 上拉加载更多
|
|
handqixing() {
|
|
console.log('加载更多')
|
|
if(this.contentList.length < this.total){
|
|
this.getlist()
|
|
}
|
|
},
|
|
// 下拉刷新
|
|
onRefresh() {
|
|
this.isRefreshing = true
|
|
setTimeout(() => {
|
|
this.pageNum = 1
|
|
this.getlist()
|
|
this.isRefreshing = false
|
|
}, 1000)
|
|
},
|
|
// 点击tab进行切换
|
|
switchCategory(index) {
|
|
this.activeCategory = Number(index) + 1
|
|
this.pageNum = 1
|
|
if(index == 0){
|
|
this.bstType = ''
|
|
this.getlist()
|
|
}else{
|
|
this.bstType = index
|
|
this.getlist()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: #fff;
|
|
}
|
|
|
|
.page {
|
|
height: 100vh;
|
|
background: #fff;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.category-nav {
|
|
display: flex;
|
|
padding: 20rpx 30rpx;
|
|
background: #fff;
|
|
border-bottom: 1rpx solid #f5f5f5;
|
|
}
|
|
|
|
.category-item {
|
|
flex: 1;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
background: #f8f8f8;
|
|
margin: 0 10rpx;
|
|
border-radius: 10rpx;
|
|
transition: all 0.3s ease;
|
|
|
|
&.active {
|
|
background: #32CD7A;
|
|
color: #fff;
|
|
}
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.content-list {
|
|
width: 100%;
|
|
height: 83vh;
|
|
overflow: scroll;
|
|
padding-bottom: 80rpx;
|
|
}
|
|
|
|
.content-item {
|
|
display: flex;
|
|
padding: 30rpx;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
// align-items: center;
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.item-image {
|
|
position: relative;
|
|
width: 142rpx;
|
|
height: 142rpx;
|
|
border-radius:8rpx;
|
|
margin-right: 20rpx;
|
|
flex-shrink: 0;
|
|
video{
|
|
width: 142rpx;
|
|
height: 142rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
}
|
|
|
|
.image {
|
|
width: 142rpx;
|
|
height: 142rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.location-tag {
|
|
position: absolute;
|
|
bottom: 10rpx;
|
|
left: 10rpx;
|
|
background: #3D3D3D;
|
|
border-radius: 10rpx;
|
|
padding: 6rpx 12rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.location-icon {
|
|
font-size: 20rpx;
|
|
margin-right: 6rpx;
|
|
}
|
|
|
|
.location-text {
|
|
font-size: 20rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
.item-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.item-title {
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
line-height: 1.4;
|
|
margin-bottom: 20rpx;
|
|
font-weight: 500;
|
|
width: 200px; /* 1. 必须设置宽度 */
|
|
white-space: nowrap; /* 2. 强制文本在一行显示 */
|
|
overflow: hidden; /* 3. 隐藏超出容器的内容 */
|
|
text-overflow: ellipsis; /* 4. 显示省略号 */
|
|
}
|
|
|
|
.item-bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.item-tag {
|
|
background: #e6f3ff;
|
|
color: #1890ff;
|
|
border: 1rpx solid #91d5ff;
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 10rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.item-date {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
</style> |