501 lines
11 KiB
Vue
501 lines
11 KiB
Vue
<script setup>
|
|
/**
|
|
* 用户视频主页
|
|
*/
|
|
import {
|
|
ref,
|
|
reactive,
|
|
computed,
|
|
getCurrentInstance,
|
|
} from 'vue';
|
|
import {
|
|
onLoad,
|
|
onReady,
|
|
onUnload,
|
|
onPageScroll,
|
|
onReachBottom,
|
|
} from '@dcloudio/uni-app'
|
|
import {
|
|
useStore,
|
|
} from 'vuex'
|
|
// 工具库
|
|
import util from '@/common/js/util';
|
|
// 代理
|
|
const {
|
|
proxy
|
|
} = getCurrentInstance()
|
|
// vuex
|
|
const store = useStore()
|
|
|
|
// 顶部状态栏
|
|
import statusBar from '@/components/header/statusBar.vue'
|
|
// 未登录状态
|
|
import noLogin from '@/components/login/noLogin'
|
|
// 收藏列表
|
|
import collectList from '@/components/index/collectList.vue'
|
|
// 收藏
|
|
import collectAdd from '@/components/index/collectAdd.vue';
|
|
// 底部导航
|
|
import footerMneu from '@/components/footerMenu/footerMenu'
|
|
// 我的作品
|
|
import product from '@/components/mine/product.vue';
|
|
// 我的喜欢
|
|
import like from '@/components/mine/like.vue';
|
|
// 我的历史
|
|
import history from '@/components/mine/history.vue';
|
|
|
|
// 是否显示顶部遮罩
|
|
const headerShow = ref(false)
|
|
|
|
// 分类列表
|
|
const tabList = reactive([{
|
|
name: '作品',
|
|
ref: 'productRef',
|
|
load: false,
|
|
},
|
|
{
|
|
name: '喜欢',
|
|
ref: 'likeRef',
|
|
load: false,
|
|
},
|
|
{
|
|
name: '收藏',
|
|
ref: 'collectRef',
|
|
load: false,
|
|
},
|
|
{
|
|
name: '历史浏览',
|
|
ref: 'historyRef',
|
|
load: false,
|
|
},
|
|
{
|
|
name: '投流历史',
|
|
load: false,
|
|
}
|
|
])
|
|
// 分类列表下标
|
|
const tabIndex = ref('')
|
|
// tab当前项
|
|
const tabCurrent = computed(() => tabList[tabIndex.value])
|
|
// 用户信息
|
|
const userinfo = computed(() => store.state.userinfo || {})
|
|
|
|
onLoad(() => {
|
|
// 初始化
|
|
handleTabIndex(0)
|
|
// 开启监听
|
|
addListener()
|
|
})
|
|
|
|
onReady(() => {
|
|
// proxy.$refs.menuRef.open()
|
|
// proxy.$refs.collectAddRef.open()
|
|
})
|
|
|
|
onUnload(() => {
|
|
// 移除监听
|
|
removeList()
|
|
})
|
|
|
|
// 滚动
|
|
onPageScroll((ev) => {
|
|
headerShow.value = ev.scrollTop > 44 ? true : false
|
|
})
|
|
|
|
// 页面滚动到底部
|
|
onReachBottom(() => {
|
|
proxy.$refs[tabCurrent.value.ref].getMoreList()
|
|
})
|
|
|
|
// 开启监听
|
|
function addListener() {
|
|
// 开启监听
|
|
uni.$on('focusUser', () => {
|
|
// 更新用户信息
|
|
util.getUserinfo()
|
|
})
|
|
|
|
// 开启监听
|
|
uni.$on('deleteVideo', () => {
|
|
proxy.$refs[tabCurrent.value.ref].refreshList()
|
|
})
|
|
}
|
|
|
|
// 移除监听
|
|
function removeList() {
|
|
uni.$off('focusUser')
|
|
uni.$off('deleteVideo')
|
|
}
|
|
|
|
// 举报
|
|
function handleReport() {
|
|
// 关闭弹窗
|
|
proxy.$refs.menuRef.close()
|
|
|
|
// 打开模态弹窗
|
|
uni.showActionSheet({
|
|
itemList: ['举报'],
|
|
}).then(rs => {
|
|
const index = rs.tapIndex
|
|
if (index == 0) {
|
|
uni.navigateTo({
|
|
url: '/pages/index/report',
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
// 切换tab下标
|
|
function handleTabIndex(index) {
|
|
if (tabIndex.value === index) return
|
|
tabIndex.value = index
|
|
tabList[tabIndex.value].load = true
|
|
}
|
|
|
|
/**
|
|
* 点击收藏文件夹
|
|
* @param {Object} item 被点击的当前项
|
|
*/
|
|
function handleCollectsItem(item) {
|
|
uni.navigateTo({
|
|
url: util.setUrl('/pages/mine/collectsVideo', {
|
|
collectId: item.id,
|
|
collectName: item.folderName,
|
|
})
|
|
})
|
|
}
|
|
|
|
// 点击扫码
|
|
function scanQRCode() {
|
|
util.scan()
|
|
}
|
|
|
|
// 跳转
|
|
function navigateToPage(path) {
|
|
uni.navigateTo({
|
|
url: path
|
|
});
|
|
}
|
|
|
|
// 退出登录
|
|
function handleLogout() {
|
|
util.alert({
|
|
content: '确认退出登录吗？',
|
|
}).then(rs => {
|
|
if (!rs.confirm) return
|
|
//
|
|
proxy.$refs.menuRef.close()
|
|
//
|
|
util.logout(() => {
|
|
// #ifdef APP
|
|
plus.runtime.restart()
|
|
// #endif
|
|
})
|
|
})
|
|
}
|
|
|
|
// 验证登录
|
|
function isAuth(url) {
|
|
util.isAuth({
|
|
success() {
|
|
uni.navigateTo({
|
|
url,
|
|
})
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="page" v-if="!userinfo.id">
|
|
<noLogin class="f1" />
|
|
</view>
|
|
|
|
<view class="appbw" v-else>
|
|
<!-- 页面顶部 -->
|
|
<view class="apex pr" :class="{ 'active': headerShow }">
|
|
<!-- 用户自定义背景图 -->
|
|
<view class="bg pfull">
|
|
<image :src="userinfo.background" mode="aspectFill" />
|
|
<view class="window pfull"></view>
|
|
</view>
|
|
|
|
<statusBar />
|
|
<view class="head"></view>
|
|
|
|
<!-- 头部导航 -->
|
|
<view class="header pf t0 l0 r0">
|
|
<statusBar />
|
|
<view class="head rows plr30 f40">
|
|
<view class="back" @click="scanQRCode">
|
|
<uni-icons type="scan" size="50rpx" color="#fff" />
|
|
</view>
|
|
|
|
<view class="name f32">{{userinfo.userNickname}}</view>
|
|
|
|
<view class="menuIcon plr5" @click="$refs.menuRef.open()">
|
|
<uni-icons type="bars" size="50rpx" color="#fff" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 用户信息 -->
|
|
<view class="userinfo rows pr pt20 plr30 pb60 cfff">
|
|
<navigator url="/pages/mine/userinfo" class="avatar pr cir">
|
|
<image class="wh200 cir" :src="userinfo.avatar" mode="aspectFill" />
|
|
|
|
<image class="wh55 pa r0 b0" src="/static/shop.png" mode="aspectFit" v-if="userinfo.isShop == 1" />
|
|
</navigator>
|
|
|
|
<navigator url="/pages/mine/userinfo" class="user f1 ml20">
|
|
<view class="f36 b">{{userinfo.userNickname}}</view>
|
|
<view class="f24">账号：{{userinfo.account}}</view>
|
|
</navigator>
|
|
|
|
<view class="tac" v-if="userinfo.isShop == 1">
|
|
<uni-icons type="shop" color="" size="60rpx" />
|
|
<view class="f24">我的产品</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 内容 -->
|
|
<view class="container oh pr plr30 c333 bfff">
|
|
<!-- 统计数字 -->
|
|
<view class="number mtb30 tac f1">
|
|
<view class="option">
|
|
<view class="value fmid f36 br10">{{userinfo.publicPraised}}</view>
|
|
<view class="key ml10 c666 f24">公开赞</view>
|
|
</view>
|
|
|
|
<view class="option">
|
|
<view class="value fmid f36 br10">{{userinfo.privacyPraised}}</view>
|
|
<view class="key ml10 c666 f24">隐私赞</view>
|
|
</view>
|
|
|
|
<view class="option" @click="navigateToPage('/pages/news/newAttention')">
|
|
<view class="value fmid f36 br10">{{userinfo.userAttention}}</view>
|
|
<view class="key ml10 c666 f24">关注</view>
|
|
</view>
|
|
|
|
<view class="option" @click="navigateToPage('/pages/news/newFans')">
|
|
<view class="value fmid f36 br10">{{userinfo.userFans}}</view>
|
|
<view class="key ml10 c666 f24">粉丝</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 个人介绍 -->
|
|
<view class="rows mt30">
|
|
<view class="desc f1 c333 f28">{{userinfo.personalSignature || '暂无个签~'}}</view>
|
|
|
|
<view class="option" @click="navigateToPage('/pages/mine/myComment')">
|
|
<view class="value fmid f36 br10">
|
|
<uni-icons type="chat" size="40rpx" />
|
|
</view>
|
|
<view class="key ml10 c666 f24">我的评论</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 作品 -->
|
|
<view class="product mt30">
|
|
<view class="tab">
|
|
<scroll-view scroll-x="true" class="scroll">
|
|
<view class="item tac" :class="{ 'active': tabIndex == index }" v-for="(item, index) in tabList"
|
|
:key="index" @click="handleTabIndex(index)">
|
|
<view class="txt ptb10 plr35">{{ item.name }}</view>
|
|
<view class="line"></view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!-- 我发布的作品 -->
|
|
<view v-show="tabIndex === 0" v-if="tabList[0].load">
|
|
<product ref="productRef" />
|
|
</view>
|
|
|
|
<!-- 我的喜欢 -->
|
|
<view class="like" v-show="tabIndex === 1" v-if="tabList[1].load">
|
|
<like ref="likeRef" />
|
|
</view>
|
|
|
|
<!-- 我的收藏 -->
|
|
<view class="collect" v-show="tabIndex === 2" v-if="tabList[2].load">
|
|
<!-- 添加收藏按钮 -->
|
|
<view class="btn bd1s fmid mtb20 mlr20 c333 f32" @click="$refs.collectAddRef.open()">
|
|
<uni-icons type="plus" size="30rpx" />
|
|
<view>添加收藏</view>
|
|
</view>
|
|
|
|
<!-- 收藏列表按钮 -->
|
|
<collectList ref="collectRef" @handleItem="handleCollectsItem" />
|
|
</view>
|
|
|
|
<view class="history" v-show="tabIndex === 3" v-if="tabList[3].load">
|
|
<history ref="historyRef" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部导航 -->
|
|
<footerMenu ref="footerMneuRef" page="homepage" />
|
|
|
|
<!-- 新增收藏 -->
|
|
<collectAdd ref="collectAddRef" />
|
|
|
|
<!-- 列表菜单 -->
|
|
<uni-popup ref="menuRef" type="right">
|
|
<view class="menuAlt df fdc ptb50 plr40 bfff">
|
|
<view class="f1">
|
|
|
|
<statusBar />
|
|
<view class="head rows">
|
|
<uni-icons type="left" size="40rpx" @click="$refs.menuRef.close()" />
|
|
</view>
|
|
|
|
<!-- 菜单列表 -->
|
|
<view class="list mt30 c000 f32">
|
|
<navigator url="/pages/mine/setting/setting">
|
|
<view class="item rows ptb20">
|
|
<image class="wh50" src="/static/userMenu.png" mode="aspectFit" />
|
|
<view class="txt ml20 f1">账户与安全</view>
|
|
</view>
|
|
</navigator>
|
|
<navigator url="/pages/index/wallet">
|
|
<view class="item rows ptb20">
|
|
<image class="wh50" src="/static/userMenu.png" mode="aspectFit" />
|
|
<view class="txt ml20 f1">我的钱包</view>
|
|
</view>
|
|
</navigator>
|
|
<!-- <view class="item rows ptb20">
|
|
<image class="wh50" src="/static/userMenu.png" mode="aspectFit" />
|
|
<view class="txt ml20 f1">我的客服</view>
|
|
</view> -->
|
|
<view @click="isAuth('/pages/index/myQrCode')">
|
|
<view class="item rows ptb20">
|
|
<image class="wh50" src="/static/userMenu.png" mode="aspectFit" />
|
|
<view class="txt ml20 f1">我的分享</view>
|
|
</view>
|
|
</view>
|
|
<navigator url="/pages/mine/userinfo">
|
|
<view class="item rows ptb20">
|
|
<image class="wh50" src="/static/userMenu.png" mode="aspectFit" />
|
|
<view class="txt ml20 f1">个人资料</view>
|
|
</view>
|
|
</navigator>
|
|
</view>
|
|
</view>
|
|
<view class="btn cancel" @click="handleLogout">退出登录</view>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
// 顶部
|
|
.apex {
|
|
|
|
.header {
|
|
color: #fff;
|
|
transition: .3s;
|
|
z-index: 10;
|
|
}
|
|
|
|
.name {
|
|
opacity: 0;
|
|
transition: .3s;
|
|
}
|
|
|
|
&.active {
|
|
.header {
|
|
color: #333;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.name {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 内容
|
|
.container {
|
|
margin-top: -30rpx;
|
|
border-radius: 15rpx 15rpx 0 0;
|
|
|
|
//
|
|
.number {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
grid-gap: 25rpx;
|
|
}
|
|
|
|
.value {
|
|
height: 68rpx;
|
|
background-color: #F3F3F5;
|
|
}
|
|
}
|
|
|
|
// 头部
|
|
.menuAlt {
|
|
box-sizing: border-box;
|
|
width: 65vw;
|
|
height: 100vh;
|
|
}
|
|
|
|
// 产品
|
|
.product {
|
|
|
|
//
|
|
.tab {
|
|
|
|
.scroll {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
// 列表项
|
|
.item {
|
|
display: inline-block;
|
|
color: #666666;
|
|
transition: .3s;
|
|
|
|
// 线
|
|
.line {
|
|
height: 4rpx;
|
|
opacity: 0;
|
|
background-color: #272727;
|
|
}
|
|
|
|
// 激活的
|
|
&.active {
|
|
color: #272727;
|
|
|
|
.line {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 视频列表
|
|
.list {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-gap: 5rpx;
|
|
|
|
.item {
|
|
height: 360rpx;
|
|
}
|
|
|
|
.window {
|
|
background-color: rgba(0, 0, 0, .1);
|
|
}
|
|
|
|
// 播放量
|
|
.amount {
|
|
.txt {
|
|
opacity: .5;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |