487 lines
10 KiB
Vue
487 lines
10 KiB
Vue
<script setup>
|
||
/**
|
||
* 他人用户视频主页
|
||
*/
|
||
import {
|
||
ref,
|
||
reactive,
|
||
getCurrentInstance,
|
||
computed,
|
||
} from 'vue';
|
||
import {
|
||
onLoad,
|
||
onPageScroll,
|
||
onReachBottom,
|
||
onHide
|
||
} from '@dcloudio/uni-app'
|
||
import {
|
||
useStore
|
||
} from 'vuex'
|
||
// 工具库
|
||
import util from '@/common/js/util';
|
||
// api
|
||
import api from '@/api/index.js'
|
||
// 顶部状态栏
|
||
import statusBar from '@/components/header/statusBar.vue'
|
||
// 顶部
|
||
import apex from '@/components/header/apex.vue'
|
||
// 视频菜单
|
||
import videoMenu from '@/components/index/videoMenu.vue'
|
||
|
||
// 代理
|
||
const {
|
||
proxy
|
||
} = getCurrentInstance()
|
||
//
|
||
const store = useStore()
|
||
// 滚动头部
|
||
const scrollTop = ref(false)
|
||
// 用户id
|
||
const userId = ref('')
|
||
// 详情
|
||
const detail = reactive({})
|
||
// 列表对象
|
||
const listProperty = reactive({
|
||
data: [],
|
||
pageSize: 9,
|
||
pageNum: 1,
|
||
total: 0,
|
||
})
|
||
// 用户信息
|
||
let userinfo = computed(() => {
|
||
let result = store.state.userinfo
|
||
return result
|
||
})
|
||
|
||
//
|
||
onLoad((option) => {
|
||
// 用户id
|
||
if (option.userId) userId.value = option.userId
|
||
// 他人用户主页
|
||
getUserinfo()
|
||
// 获取列表
|
||
getList()
|
||
})
|
||
|
||
onHide(() => {
|
||
// 暂停当前视频
|
||
proxy.$refs.videoMenuRef.pause()
|
||
})
|
||
|
||
// 滚动
|
||
onPageScroll((ev) => {
|
||
scrollTop.value = ev.scrollTop > 44 ? true : false
|
||
})
|
||
|
||
onReachBottom(() => {
|
||
// 获取更多列表
|
||
getMoreList()
|
||
})
|
||
|
||
// 获取用户信息
|
||
function getUserinfo() {
|
||
api.video.getUserInfo({
|
||
query: {
|
||
userId: userId.value,
|
||
myId: userinfo.value.id,
|
||
}
|
||
}).then(rs => {
|
||
if (rs.code == 200) {
|
||
console.log('userinfo', rs)
|
||
const result = rs.data
|
||
Object.assign(detail, result)
|
||
return
|
||
}
|
||
util.alert({
|
||
content: rs.msg,
|
||
showCancel: false,
|
||
})
|
||
})
|
||
}
|
||
|
||
// 获取更多列表
|
||
function getMoreList() {
|
||
if (listProperty.total <= listProperty.data.length) return
|
||
listProperty.pageNum++
|
||
getList()
|
||
}
|
||
|
||
// 获取用户作品
|
||
function getList() {
|
||
//
|
||
api.video.myWorks({
|
||
query: {
|
||
// 人员id
|
||
userId: userId.value,
|
||
pageSize: listProperty.pageSize,
|
||
pageNum: listProperty.pageNum,
|
||
}
|
||
}).then(rs => {
|
||
if (rs.code == 200) {
|
||
if (listProperty.pageNum == 1) listProperty.data.length = 0
|
||
listProperty.data.push(...rs.rows)
|
||
listProperty.total = rs.total
|
||
return
|
||
}
|
||
util.alert({
|
||
content: rs.msg,
|
||
showCancel: false,
|
||
})
|
||
})
|
||
}
|
||
|
||
// 举报
|
||
function handleReport() {
|
||
// 关闭弹窗
|
||
proxy.$refs.menuRef.close()
|
||
|
||
// 打开模态弹窗
|
||
uni.showActionSheet({
|
||
itemList: ['举报'],
|
||
}).then(rs => {
|
||
const index = rs.tapIndex
|
||
if (index == 0) {
|
||
uni.navigateTo({
|
||
url: util.setUrl('/pages/index/report', {
|
||
userId: userId.value,
|
||
}),
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
// 拉黑
|
||
function handleBlack() {
|
||
// let text = detail.isBlock ? '取消拉黑' : '拉黑'
|
||
// util.alert({
|
||
// content: `确认要${text}用户${detail.userNickname}吗？`,
|
||
// }).then(rs => {
|
||
// let obj = {
|
||
// blockUserId: detail.id,
|
||
// status: detail.isBlock ? 1 : 0
|
||
// }
|
||
// api.mine.blockUser(obj).then(res => {
|
||
// if (res.code == 200) {
|
||
// util.alert('操作成功！')
|
||
// getUserinfo()
|
||
|
||
// // 关闭弹窗
|
||
// proxy.$refs.menuRef.close()
|
||
// }
|
||
// })
|
||
// })
|
||
}
|
||
|
||
// 复制账号
|
||
function handleCopyAccount() {
|
||
// 复制用户账号
|
||
uni.setClipboardData({
|
||
data: detail.account,
|
||
showToast: false,
|
||
success: rs => {
|
||
util.alert('复制成功')
|
||
}
|
||
})
|
||
}
|
||
|
||
// 关注用户
|
||
function handleAttention() {
|
||
let targetAtt = detail.isAttention == 0 ? 1 : 0
|
||
api.video.attention({
|
||
data: {
|
||
// 当前用户id
|
||
userId: userinfo.value.id,
|
||
// 被关注id
|
||
attentionId: detail.id,
|
||
//
|
||
isAttention: targetAtt,
|
||
}
|
||
}).then(rs => {
|
||
if (rs.code == 200) {
|
||
// 关注状态切换
|
||
detail.isAttention = targetAtt
|
||
|
||
// 他人用户主页
|
||
getUserinfo()
|
||
// 修改了他人关注状态
|
||
uni.$emit('focusUser', {
|
||
userId: detail.id,
|
||
result: detail.isAttention,
|
||
})
|
||
// 重载关注列表
|
||
uni.$emit('updateFocusList')
|
||
return
|
||
}
|
||
util.alert({
|
||
content: rs.msg,
|
||
showCancel: false,
|
||
})
|
||
})
|
||
}
|
||
|
||
// 操作不让看
|
||
function handleBlock() {
|
||
// // 反选状态
|
||
// detail.isBlock = !detail.isBlock
|
||
|
||
// api.video.videoBlock({
|
||
// query: {
|
||
// type: detail.isBlock ? 0 : 1,
|
||
// userId: detail.id,
|
||
// }
|
||
// }).then(rs => {
|
||
// if (rs.code == 200) {
|
||
// return
|
||
// }
|
||
|
||
// detail.isBlock = !detail.isBlock
|
||
// util.alert({
|
||
// content: rs.msg,
|
||
// showCancel: false,
|
||
// })
|
||
// })
|
||
}
|
||
|
||
// 私信
|
||
function handleMessage() {
|
||
util.toChat({
|
||
name: detail.userNickname,
|
||
msgId: detail.id,
|
||
type: 'C2C',
|
||
})
|
||
return
|
||
}
|
||
// 评论
|
||
function userComments() {
|
||
if (detail.isLock) {
|
||
toCommentsList()
|
||
} else {
|
||
// 解锁提示
|
||
util.alert({
|
||
content: `确认消耗${detail.consumeFruit}个榴莲果解锁评论吗？`,
|
||
}).then(rs => {
|
||
unlockComments()
|
||
})
|
||
}
|
||
}
|
||
// 解锁评论列表
|
||
function unlockComments() {
|
||
api.mine.unlockComment({ userId: detail.id }).then(res => {
|
||
if (res.code == 200) {
|
||
util.alert('解锁成功！')
|
||
if (res.data.isLock) {
|
||
toCommentsList()
|
||
getUserinfo()
|
||
}
|
||
}
|
||
})
|
||
}
|
||
// 跳转到评论列表
|
||
function toCommentsList() {
|
||
uni.navigateTo({
|
||
url: util.setUrl('/pages/mine/myComment', {
|
||
userId: detail.id,
|
||
}),
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<view class="appbw">
|
||
<!-- 页面顶部 -->
|
||
<view class="apex pr">
|
||
<view class="bg pfull">
|
||
<image :src="detail.background" mode="aspectFill" />
|
||
<view class="window pfull"></view>
|
||
</view>
|
||
|
||
<apex :bgColor="scrollTop ? '#fff' : '#fff0'" :color="scrollTop ? '#333' : '#fff'">
|
||
<template #content v-if="scrollTop">
|
||
<view class="">{{ detail.userNickname }}</view>
|
||
</template>
|
||
|
||
<template #right>
|
||
<view class="menuIcon plr5" @click="$refs.menuRef.open()">
|
||
<uni-icons type="bars" size="50rpx" :color="scrollTop ? '#333' : '#fff'" />
|
||
</view>
|
||
</template>
|
||
</apex>
|
||
|
||
<!-- 用户信息 -->
|
||
<view class="userinfo df aic pr pt20 plr30 pb60">
|
||
<view class="avatar cir">
|
||
<image class="wh200 cir" :src="detail.avatar" mode="aspectFill" />
|
||
</view>
|
||
|
||
<view class="user f1 ml20 cfff">
|
||
<view class="f36 b">{{ detail.userNickname }}</view>
|
||
<view class="f24">账号：{{ detail.account }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 内容 -->
|
||
<view class="container pr ptb30 plr30 c333">
|
||
<view class="rows">
|
||
|
||
<view class="number df">
|
||
<view class="option mr40" v-if="0">
|
||
<text class="value f36">{{ detail.userPraised }}</text>
|
||
<text class="key ml10 c666 f24">获赞</text>
|
||
</view>
|
||
|
||
<view class="option mr40">
|
||
<text class="value f36">{{ detail.userFans }}</text>
|
||
<text class="key ml10 c666 f24">粉丝</text>
|
||
</view>
|
||
|
||
<view class="option mr40">
|
||
<text class="value f36">{{ detail.userAttention }}</text>
|
||
<text class="key ml10 c666 f24">关注</text>
|
||
</view>
|
||
</view>
|
||
<view class="" @click="userComments">他的评论</view>
|
||
</view>
|
||
|
||
<!-- 个人介绍 -->
|
||
<view class="desc mtb20 c333 f28">{{ detail.userBrief }}</view>
|
||
|
||
<!-- 橱窗 -->
|
||
<view class="shopwindow df aic mtb30" v-if="detail.isShop == 1 && 0">
|
||
<image class="wh60" src="/static/shopwindow.png" mode="aspectFit" />
|
||
<view class="ml20 c333 f28">商品橱窗</view>
|
||
</view>
|
||
|
||
<!-- 关注按钮 -->
|
||
<view class="btns df">
|
||
<template v-if="detail.isAttention == 0">
|
||
<view class="btn lg cancel f1" @click="handleAttention">已关注</view>
|
||
<view class="btn lg cancel f1 ml20" @click="handleMessage">私信</view>
|
||
</template>
|
||
<template v-else>
|
||
<view class="btn lg focus f1" @click="handleAttention">关注</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 作品 -->
|
||
<view class="product mt30">
|
||
<view class="title plr30 c333 f32">
|
||
<text>作品</text>
|
||
<text class="ml10">{{ listProperty.total }}</text>
|
||
</view>
|
||
|
||
<view class="list mt20">
|
||
<videoMenu ref="videoMenuRef" :list="listProperty.data"></videoMenu>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 列表菜单 -->
|
||
<uni-popup ref="menuRef" type="bottom">
|
||
<view class="menuAlt ptb50 plr40 ">
|
||
<view class="header df">
|
||
<view class="user f1 c111">
|
||
<view class="nickname f28">{{ detail.userNickname }}</view>
|
||
<view class="df aic mt10">
|
||
<text class="f20">账号：{{ detail.account }}</text>
|
||
<image class="wh30 ml10" src="/static/copy.png" mode="aspectFit" @click="handleCopyAccount" />
|
||
<view class="f1"></view>
|
||
</view>
|
||
</view>
|
||
<view @click="$refs.menuRef.close()">
|
||
<uni-icons type="close" size="40rpx" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 选择菜单 -->
|
||
<view class="select mt20 mb10">
|
||
<!-- <view class="option ver jcc bfff br10">
|
||
<image class="wh50" src="/static/share.png" mode="aspectFit" />
|
||
<view class="txt mt20 c111 f20">分享主页</view>
|
||
</view> -->
|
||
|
||
<view class="option ver jcc bfff br10" @click="handleMessage">
|
||
<image class="wh50" src="/static/email.png" mode="aspectFit" />
|
||
<view class="txt mt20 c111 f20">私信Ta</view>
|
||
</view>
|
||
|
||
<view class="option ver jcc bfff br10" @click="handleReport">
|
||
<image class="wh50" src="/static/report.png" mode="aspectFit" />
|
||
<view class="txt mt20 c111 f20">举报</view>
|
||
</view>
|
||
|
||
<view class="option ver jcc bfff br10" @click="handleBlack">
|
||
<image class="wh50" src="/static/blackList.png" mode="aspectFit" />
|
||
<view class="txt mt20 c111 f20">
|
||
<text>{{ detail.isBlock ? '取消拉黑' : '拉黑' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 列表 -->
|
||
<view class="list mtb20 plr20 c111 f24 bfff br10" v-if="0">
|
||
<view class="item rows ptb25">
|
||
<view class="key">设置备注</view>
|
||
<view class="inputBox tac">
|
||
<input class="c111 f24" type="text" placeholder="请输入备注" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="item rows ptb25">
|
||
<view class="key">不让 Ta 看作品</view>
|
||
<view>
|
||
<switch color="#FF0F2E" :checked="detail.isBlock" style="transform: scale(.7);"
|
||
@change="handleBlock" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</template>
|
||
|
||
<style lang="scss">
|
||
// 头部
|
||
.apex {
|
||
|
||
// 用户信息
|
||
.userinfo {
|
||
.avatar {
|
||
padding: 5rpx;
|
||
background-color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 内容
|
||
.container {
|
||
margin-top: -30rpx;
|
||
border-radius: 15rpx 15rpx 0 0;
|
||
background-color: #fff;
|
||
}
|
||
|
||
// 菜单弹窗
|
||
.menuAlt {
|
||
border-radius: 24rpx 24rpx 0 0;
|
||
background: #F2F2F2;
|
||
|
||
// 选择菜单
|
||
.select {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
grid-gap: 20rpx;
|
||
|
||
// 选项
|
||
.option {
|
||
height: 160rpx;
|
||
}
|
||
}
|
||
|
||
// 列表
|
||
.list {
|
||
.inputBox {
|
||
width: 220rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |