479 lines
12 KiB
Vue
479 lines
12 KiB
Vue
<template>
|
||
<view>
|
||
<unicloud-db ref='udb' v-slot:default="{ pagination, hasMore, loading, error, options }"
|
||
orderby="last_view_time desc"
|
||
@error="onqueryerror" :page-size="10"
|
||
@onPullDownRefresh="onPullDownRefresh" @load="listLoad"
|
||
:collection="colList" >
|
||
<!-- 基于 uni-list 的页面布局 field="user_id.nickname"-->
|
||
<!-- #ifdef APP-NVUE -->
|
||
<list class="uni-list" :border="false" :style="{ height: listHeight }">
|
||
<!-- #endif -->
|
||
<!-- #ifndef APP-NVUE -->
|
||
<scroll-view
|
||
scroll-y
|
||
class="uni-list"
|
||
refresher-enabled
|
||
:refresher-triggered="loadType=== 'refresh'"
|
||
:style="{ height: listHeight }"
|
||
@refresherrefresh="refresh"
|
||
@scrolltolower="loadMore"
|
||
>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP-NVUE -->
|
||
<refresh-box :loading="loading" @refresh="refresh"></refresh-box>
|
||
<!-- #endif -->
|
||
|
||
<!-- 列表渲染 -->
|
||
<template v-for="(item, index) in followLst">
|
||
<view class="follow-item">
|
||
|
||
<view class="avatar-container" @click="toPersonalpage(item)">
|
||
<cloud-image
|
||
:src="item.fid[0].avatar_file.url || 'https://qnycdn.mymoyu.top/static/avatar.jpg'"
|
||
mode="aspectFill" border-radius="50%"
|
||
height="80rpx" width="80rpx"></cloud-image>
|
||
</view>
|
||
|
||
<view class="info-container" @click="toPersonalpage(item)">
|
||
{{ item.fid[0].nickname }}
|
||
</view>
|
||
|
||
<view
|
||
class="btn-container"
|
||
:class="{
|
||
'followed': item.fid[0].isFollow,
|
||
|
||
}"
|
||
|
||
>
|
||
|
||
<view @click="toggleFollow(item, index)">{{ item.fid[0].isFollow ? '已关注' : '关注' }}</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<!-- 加载状态：上拉加载更多，加载中，没有更多数据了，加载错误 -->
|
||
<!-- #ifdef APP-PLUS -->
|
||
<uni-list-item>
|
||
<template v-slot:body>
|
||
<!-- #endif -->
|
||
<uni-load-state @networkResume="refresh"
|
||
:state="{ data: listData, pagination, hasMore, loading, error }"
|
||
@loadMore="loadMore">
|
||
</uni-load-state>
|
||
<!-- #ifdef APP-PLUS -->
|
||
</template>
|
||
</uni-list-item>
|
||
<!-- #endif -->
|
||
<!-- #ifndef APP-NVUE -->
|
||
</scroll-view>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP-NVUE -->
|
||
</list>
|
||
<!-- #endif -->
|
||
</unicloud-db>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import statusBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar";
|
||
import translatePublishTime from "@/uni_modules/uni-cms-article/common/publish-time";
|
||
import refreshBox from "@/uni_modules/uni-cms-article/components/refresh-box/refreshBox.nvue";
|
||
// import cloudImage from "../../components/cloud-image.vue"
|
||
import cloudImage from "../../components/cloud-image.vue";
|
||
import {
|
||
parseImageUrl
|
||
} from "@/uni_modules/uni-cms-article/common/parse-image-url";
|
||
|
||
const db = uniCloud.database();
|
||
|
||
const uniIdCo = uniCloud.importObject("uni-id-co")
|
||
import {
|
||
store,
|
||
mutations
|
||
} from '@/pages3/uni_modules/uni-id-pages/common/store.js';
|
||
import { follow } from "../../uniCloud-alipay/cloudfunctions/follow/index.obj";
|
||
|
||
export default {
|
||
components: {
|
||
statusBar,
|
||
refreshBox,
|
||
cloudImage
|
||
},
|
||
computed: {
|
||
userInfo() {
|
||
return store.userInfo
|
||
},
|
||
realNameStatus() {
|
||
if (!this.userInfo.realNameAuth) {
|
||
return 0
|
||
}
|
||
|
||
return this.userInfo.realNameAuth.authStatus
|
||
},
|
||
// 根据当前语言返回不同的搜索框占位符
|
||
inputPlaceholder(e) {
|
||
if (uni.getStorageSync('CURRENT_LANG') == "en") {
|
||
return 'Please enter the search content' // 英文
|
||
} else {
|
||
return '请输入搜索内容' // 中文
|
||
}
|
||
},
|
||
// 连表查询，返回两个集合的查询结果
|
||
colList() {
|
||
|
||
return [
|
||
db.collection("follow")
|
||
.where(this.where)
|
||
.field("_id,fid,create_time")
|
||
.getTemp(),
|
||
db.collection("uni-id-users")
|
||
.field('_id,nickname,avatar_file')
|
||
.getTemp()
|
||
|
||
];
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
tags_v: [],
|
||
tags: [
|
||
|
||
],
|
||
|
||
showRefresh: false, // 是否显示刷新按钮
|
||
listHeight: 0, // 列表高度
|
||
mpButtonLeftPlaceholderSize: 0, // 小程序左侧icon占位大小
|
||
mpButtonPlaceholderSize: 87, // 小程序导航栏按钮占位大小
|
||
navBarHeight: 44, // 导航栏高度
|
||
refreshStatus: 0, // 刷新状态 0: 未刷新 1: 刷新中 2: 刷新完成
|
||
listData: [], // 列表数据
|
||
loadType: null,
|
||
|
||
followLst: [],
|
||
|
||
where:{},
|
||
}
|
||
},
|
||
methods: {
|
||
toPersonalpage(item) {
|
||
console.log(item)
|
||
uni.navigateTo({
|
||
url: "/uni_modules/zetank-personalpage/pages/personalpage/personalpage?uid=" + item.fid[0]._id
|
||
})
|
||
},
|
||
async toggleFollow(item, index) {
|
||
console.log(item)
|
||
try {
|
||
|
||
if (item.fid[0].isFollow === false) {
|
||
const res = await uniCloud.importObject("follow").follow({
|
||
uid: this.userInfo._id,
|
||
fid: item.fid[0]._id
|
||
});
|
||
if (res.code === 200) {
|
||
console.log(res);
|
||
this.followLst[0].fid[index].isFollow = true;
|
||
} else {
|
||
console.log(res.msg);
|
||
}
|
||
}
|
||
else if (item.fid[0].isFollow === true) {
|
||
const res = await uniCloud.importObject("follow").reFollow({
|
||
uid: this.userInfo._id,
|
||
fid: item.fid[0]._id
|
||
});
|
||
if (res.code === 200) {
|
||
if (res.code === 200) {
|
||
console.log(res);
|
||
this.followLst[index].fid[0].isFollow = false;
|
||
}
|
||
} else {
|
||
console.log(res.msg)
|
||
}
|
||
}
|
||
}catch(e) {
|
||
console.log(e.message)
|
||
}
|
||
},
|
||
async listLoad(data) {
|
||
if (!data || data.length === 0 ) return 0;
|
||
let followLst = [];
|
||
if (data[0].fid) {
|
||
let item = {...data[0]};
|
||
item.fid[0].isFollow = true;
|
||
followLst.push(item)
|
||
}
|
||
console.log(followLst);
|
||
this.followLst = this.loadType === 'loadMore' ? this.followLst.concat(followLst) : followLst
|
||
this.loadType = null;
|
||
|
||
},
|
||
// 初始化导航栏大小
|
||
initNavBarSize() {
|
||
// 获取小程序导航栏按钮信息
|
||
// #ifdef MP-TOUTIAO
|
||
let menuButtonInfo = tt.getCustomButtonBoundingClientRect()
|
||
menuButtonInfo.width = menuButtonInfo.capsule.width // 小程序按钮区域中使用的按钮宽度
|
||
this.mpButtonLeftPlaceholderSize = menuButtonInfo.leftIcon.width + 10
|
||
// #endif
|
||
// #ifndef MP-TOUTIAO
|
||
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||
// #endif
|
||
// 计算小程序导航栏按钮占位大小
|
||
this.mpButtonPlaceholderSize = menuButtonInfo.width + 10
|
||
// 获取系统信息，判断是否为 iOS 系统，设置导航栏高度
|
||
this.navBarHeight = uni.getSystemInfoSync().system.toLowerCase().includes('ios') ? 44 : 48
|
||
},
|
||
// 格式化时间戳
|
||
publishTime(timestamp) {
|
||
return translatePublishTime(timestamp)
|
||
},
|
||
// // 点击搜索框
|
||
// searchClick(e) {
|
||
// uni.hideKeyboard();
|
||
// uni.navigateTo({
|
||
// url: '/uni_modules/uni-cms-article/pages/search/search'
|
||
// });
|
||
// },
|
||
// 重试
|
||
retry() {
|
||
this.refresh()
|
||
},
|
||
// 刷新
|
||
refresh() {
|
||
this.loadType = 'refresh'
|
||
this.$refs.udb.loadData({
|
||
clear: true
|
||
}, () => {
|
||
uni.stopPullDownRefresh()
|
||
// #ifdef APP-NVUE
|
||
this.showRefresh = false
|
||
// #endif
|
||
})
|
||
},
|
||
// 加载更多
|
||
loadMore() {
|
||
this.loadType = 'loadMore'
|
||
this.$refs.udb.loadMore()
|
||
},
|
||
// 查询出错
|
||
onqueryerror(e) {
|
||
console.error(e);
|
||
},
|
||
|
||
// #ifdef H5
|
||
// 下拉刷新
|
||
onPullDownRefresh() {
|
||
this.refresh()
|
||
},
|
||
// #endif
|
||
change(currentPage, type) {
|
||
this.page.currentPage = currentPage;
|
||
console.log("点击了" + type + "，当前页：" + currentPage);
|
||
this.data_clear();
|
||
},
|
||
},
|
||
async onReady() {
|
||
// #ifdef MP
|
||
this.initNavBarSize() // 初始化导航栏大小
|
||
// #endif
|
||
/* 可用窗口高度 - 搜索框高 - 状态栏高 */
|
||
this.listHeight = uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - this
|
||
.navBarHeight + 'px'; // 计算列表高度
|
||
|
||
this.where = {uid: this.userInfo._id};
|
||
console.log(this.where)
|
||
this.$refs.udb.loadData();
|
||
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
|
||
/* #ifndef APP-NVUE */
|
||
.pages view {
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
.pages {
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.refresh {
|
||
text-align: center;
|
||
}
|
||
|
||
.nav-box {
|
||
background-color: #FFFFFF;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
|
||
/* #ifndef APP-PLUS */
|
||
z-index: 9;
|
||
/* #endif */
|
||
}
|
||
|
||
.pages .nav {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.uni-search-box {
|
||
flex: 1;
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.uni-search-box ::v-deep .uni-searchbar {
|
||
padding: 0;
|
||
}
|
||
|
||
.uni-search-box ::v-deep .uni-searchbar__box {
|
||
height: 32px;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.cover-search-bar {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
top: 0;
|
||
/* #ifndef APP-NVUE */
|
||
z-index: 999;
|
||
/* #endif */
|
||
}
|
||
|
||
.pages .uni-list ::v-deep .uni-list-item__container {
|
||
flex-direction: row;
|
||
width: 100%;
|
||
}
|
||
|
||
.pages .uni-list ::v-deep .uni-list-item {
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.pages .uni-list ::v-deep .uni-load-more {
|
||
display: flex;
|
||
}
|
||
|
||
.pages .uni-list ::v-deep .uni-list--border:after {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.main {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
padding-left: 30rpx;
|
||
padding-right: 30rpx;
|
||
padding-top: 24rpx;
|
||
padding-bottom: 24rpx;
|
||
.title {
|
||
font-size: 30rpx;
|
||
color: #bbb;
|
||
}
|
||
|
||
.thumbnails {
|
||
margin: 20rpx 0;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: row;
|
||
.img {
|
||
flex: 1;
|
||
/* #ifndef APP-NVUE */
|
||
width: auto;
|
||
/* #endif */
|
||
height: 200rpx;
|
||
border-radius: 8rpx;
|
||
margin: 0 10rpx;
|
||
&:first-child {
|
||
margin-left: 0;
|
||
}
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.info {
|
||
display: flex;
|
||
flex-direction: row;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.author,
|
||
.publish_date {
|
||
font-size: 24rpx;
|
||
color: #bbbbbb;
|
||
}
|
||
|
||
.publish_date {
|
||
margin-left: 14rpx;
|
||
}
|
||
}
|
||
|
||
/* 父容器设置 */
|
||
.follow-item {
|
||
will-change: transform; /* 启用GPU加速 */
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 24rpx;
|
||
margin: 20rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
|
||
}
|
||
|
||
/* 头像区块 (占1份) */
|
||
.avatar-container {
|
||
flex: 1;
|
||
min-width: 0; /* 防止内容溢出 */
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
/* 信息区块 (占3份) */
|
||
.info-container {
|
||
flex: 3;
|
||
min-width: 0; /* 关键：允许文本截断 */
|
||
overflow: hidden;
|
||
}
|
||
.name {
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1; /* 单行显示 */
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 按钮区块 (占2份) */
|
||
.btn-container {
|
||
flex:1.5;
|
||
text-align: center;
|
||
padding: 12rpx 24rpx;
|
||
border: 1rpx solid #07C160;
|
||
border-radius: 40rpx;
|
||
color: #07C160;
|
||
transition: all 0.3s;
|
||
}
|
||
.btn-container.followed {
|
||
border-color: #CCCCCC;
|
||
color: #666666;
|
||
background: #F8F8F8;
|
||
}
|
||
|
||
</style> |