You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

902 lines
24 KiB

3 weeks ago
<template>
<view class="wanlgroups-user-container">
<view class="wanlgroups-user-container__head" :style="{ height: headHeight + 'px' }">
<view class="background" v-if="headerOpacity > 0" :style="{
height: headHeight + 'px',
opacity: headerOpacity,
backgroundColor: userData.color
}">
<view class="bgcolor"></view>
</view>
<view class="navigater text-white" :style="{
height: headHeight + 'px',
paddingTop: headTop + 'px'
}">
<view class="text-xl">
<view class="margin-right">
<text class="wlIcon-fanhui1 text-bold" @tap="handleBack"></text>
</view>
<view class="text-cut" style="width: 100rpx;">
<text class="text-lg" v-if="headerOpacity > 0" :style="{ opacity: headerOpacity }">
{{ userData.user.nickname }}
</text>
</view>
</view>
<view class="text-xl">
<text v-if="headerOpacity > 0 && !isMyfind && userData.isFollow === 0"
:style="{ opacity: headerOpacity }" class="margin-right text-sm"
@tap="handleFollow(userData.shop)">
+ 关注
</text>
<text class="wlIcon-fenxiangcopy margin-right-xl text-bold" @tap="showModal('share')" />
<text class="wlIcon-gengduo text-bold" @tap="showModal('menu')" />
</view>
</view>
</view>
<!-- 主体 -->
<view class="wanlgroups-user-container__main" :style="{
backgroundColor: userData.color,
backgroundImage: `url(${$wanlshop.oss( userData.image, 0, 50, 1, 'transparent', 'png' )})`
}">
<view class="head text-white" :style="{ paddingTop: headHeight + 'px' }" @click="handleTheme">
<view class="userinfo">
<view class="cu-avatar margin-right-bj round" :style="{
backgroundImage: `url(${$wanlshop.oss(userData.user.avatar, 88, 88)})`
}" />
<view>
<view class="text-xl margin-bottom-xs">{{ userData.user.nickname }}</view>
<view class="text-xs text-white-agba">
<text>账户号</text>
<text>{{ userData.user_no }}</text>
<text class="wlIcon-fuzhi margin-left-sm"
@click.stop="$wanlshop.copy(userData.user_no)"></text>
</view>
</view>
</view>
<view class="margin-top-xl text-sm">
<text>{{ userData.user.bio || '他/她未留下任何个性签名' }}</text>
<text v-if="isMyfind" class="wlIcon-jifen margin-left-xs" @click.stop="handleUserEdit"></text>
</view>
<view class="findinfo margin-top">
<view class="quantity">
<view class="project" @click.stop="
$wanlshop.to(`/pages/apps/find/user/follow?id=${userData.user_no}`)
">
<view class="text-lg">
{{ $wanlshop.toFormat( userData.follow < 0 ? 0 : userData.follow, 'thousand' ) }}
</view>
<view class="text-xs text-white-agba">关注</view>
</view>
<view class="project" @click.stop="
$wanlshop.to(`/pages/apps/find/user/fans?id=${userData.user_no}`)
">
<view class="text-lg">
{{ $wanlshop.toFormat( userData.fans < 0 ? 0 : userData.fans, 'thousand' ) }}
</view>
<view class="text-xs text-white-agba">粉丝</view>
</view>
<view class="project" @click.stop="showModal('praised')">
<view class="text-lg">
{{ $wanlshop.toFormat( userData.praised < 0 ? 0 : userData.praised, 'thousand' ) }}
</view>
<view class="text-xs text-white-agba">获赞</view>
</view>
</view>
<view>
<button v-if="isMyfind" class="cu-btn round line-white" @click.stop="handleUserEdit">
编辑资料
</button>
<block v-else>
<block v-if="loadingFollow">
<button v-if="userData.isFollow === 0" class="cu-btn round line-white">
<text class="wlIcon-jiazai1 wlIconfont-spin margin-right-xs"></text>
关注中..
</button>
<button v-else class="cu-btn round line-white">
<text class="wlIcon-jiazai1 wlIconfont-spin margin-right-xs"></text>
取消中..
</button>
</block>
<block v-else>
<button v-if="userData.isFollow === 0" class="cu-btn round line-white"
@click.stop="handleFollow(userData.shop)">
<text class="wlIcon-tianjia margin-right-xs"></text>
关注
</button>
<button v-else class="cu-btn round line-white"
@click.stop="handleFollow(userData.shop)">
已关注
</button>
</block>
</block>
</view>
</view>
<view v-if="userData.shop" class="shopinfo margin-top-bj solid-top padding-top-bj"
@click.stop="onShop(userData.shop.id)">
<view class="cu-avatar margin-right-bj round" :style="{ backgroundImage: `url(${$wanlshop.oss(userData.shop.avatar, 88, 88)})` }" />
<view class="subject">
<view class="info">
<view v-if="userData.shop.isself == 1">
<view class="cu-tag sm line-white radius margin-right-xs">
自营店
</view>
<text class="text-cut" style="width: 50%;">
{{ userData.shop.shopname }}
</text>
</view>
<view v-else>
<view class="cu-tag sm line-white radius margin-right-xs"
v-if="userData.shop.state == 0">
个人店
</view>
<view class="cu-tag sm line-white radius margin-right-xs"
v-if="userData.shop.state == 1">
企业店
</view>
<view class="cu-tag sm line-white radius margin-right-xs"
v-if="userData.shop.state == 2">
旗舰店
</view>
<text class="text-cut" style="width: 50%;">
{{ userData.shop.shopname }}
</text>
</view>
</view>
<view class="menu">
<button class="cu-btn wlIcon margin-right-sm line-white round">
<text class="wlIcon-31dianpu"></text>
</button>
</view>
</view>
</view>
</view>
</view>
<view class="wanlgroups-user-container__list bg-white">
<view class="questionbag" :style="{ top: `${headHeight}px` }">
<scroll-view scroll-x class="bg-white nav text-center">
<view class="cu-item" :class="index === currentId ? 'text-30 text-bold' : 'wanl-gray'"
v-for="(item, index) in navList" :key="index" @tap="handleSelect(index)">
{{ item.type_text }}
</view>
</scroll-view>
</view>
<view class="main">
<view v-show="keys === currentId" v-for="(data, keys) in navList" :key="keys">
<block v-if="isMyfind">
<view v-if="data.dataList.length === 0 && data.loaded" class="empty">
<view class="text-center wanl-gray">
<image :src="$wanlshop.appstc('/default/collect_default3x.png')"></image>
<view class="text-30 margin-bottom-bj">
{{ keys === 0 ? '你还没有发布任何作品' : '你还没有任何喜欢的收藏' }}
</view>
<button v-if="keys === 0" class="cu-btn line-black" @tap="handlePublish()">
立即发布
</button>
<button v-else class="cu-btn line-black" @click="$wanlshop.to('/pages/apps/find/list')">
去看看
</button>
</view>
</view>
</block>
<block v-else>
<wanl-empty v-if="data.dataList.length === 0 && data.loaded"
:text="keys === 0 ? '他/她还没有发布过任何作品' : '他/她还没有任何收藏'" src="collect_default3x" />
</block>
<view class="list" v-if="data.dataList.length > 0">
<view class="item" v-for="(item, index) in data.dataList" :key="index">
<view v-if="item.state === 'normal'" class="examine radius-bock" :style="{
backgroundImage:
'url(' + $wanlshop.oss(item.images[0], 200, 0) + ')'
}" @tap="onFind(item)">
<view class="cover radius-bock" :style="{
backgroundImage:
'url(' + $wanlshop.oss(item.images[0], 200, 0) + ')'
}" />
<view v-if="item.type === 'video'" class="state padding-sm text-white text-xxxl">
<text class="wlIcon-video" />
</view>
</view>
<view v-else class="examine radius-bock"
@tap="$wanlshop.msg(`内容${stateText[item.state].text}, 无法查看`)">
<view class="cover" :style="{
backgroundImage:
'url(' + $wanlshop.oss(item.images[0], 200, 0) + ')'
}" />
<view class="state flex justify-center align-center">
<view v-if="item.state" class="text-xxl text-center"
:style="{ color: stateText[item.state].color }">
<text :class="stateText[item.state].icon" />
<view class="text-df">
{{ stateText[item.state].text }}
</view>
</view>
</view>
</view>
<view class="padding-xs text-bold5">
<view class="text-cut-2">
<view class="cu-tag sm radius margin-right-xs" :class="[typeList[item.type]]">
{{ item.type_text }}
</view>
{{ formatHtml(item.content) }}
</view>
</view>
<view class="flex wanl-gray text-min padding-lr-xs justify-between">
<view>
<text>
{{ $wanlshop.timeFormat(item.createtime, 'mm-dd') }} 发布
</text>
<text v-if="isMyfind && keys === 0" class="text-red margin-left-xs"
@tap="handleDel(index)">
删除
</text>
</view>
<view :class="{ 'text-red': item.isLike === 1 }" @tap="handleLike(index)">
<text :class="[
item.isLike === 1 ? 'wlIcon-yiguanzhu1' : 'wlIcon-likes'
]"></text>
<text class="margin-left-xs">{{ item.likes }}</text>
</view>
</view>
</view>
</view>
<uni-load-more :status="data.loadingType" :content-text="contentText" />
</view>
</view>
</view>
<!-- 模态框 -->
<view class="WANL-MODAL wanlgroups-user-container__modal">
<view class="cu-modal top-modal" :class="modalName == 'menu' ? 'show' : ''" @tap="hideModal()">
<view class="wanl-modal-menu cu-dialog" @tap.stop="">
<wanl-direct @change="hideModal" />
</view>
</view>
<!-- 分享 -->
<view class="cu-modal wanl-share bottom-modal" :class="modalName == 'share' ? 'show' : ''"
@tap="hideModal()">
<view class="cu-dialog" @tap.stop="">
<wanl-share
ref="wanlShare"
page="pages/apps/find/user"
:scene="{id:find_user, qr:'fu'}"
:scrollAnimation="scrollAnimation"
@change="hideModal()"
/>
</view>
</view>
<view class="cu-modal praised" :class="modalName == 'praised' ? 'show' : ''" @tap="hideModal()">
<view class="cu-dialog" @tap.stop="">
<image :src="$wanlshop.appstc('/common/find_fans3x.png')" mode="widthFix"></image>
<view class="margin-tb-lg">
<text class="wanl-gray-dark">
{{
`${userData.user.nickname}”共收获得 ${$wanlshop.toFormat(
userData.praised < 0 ? 0 : userData.praised,
'thousand'
)} 个赞`
}}
</text>
</view>
<view class="padding-tb-bj solid-top" @tap="hideModal()">
<text class="text-bold">确认</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import {
mapState
} from 'vuex';
export default {
data() {
return {
find_user: null,
headHeight: 0,
headerOpacity: 0,
windowHeight: 0,
headTop: 0,
isMyfind: false,
loadingFollow: false,
modalName: null,
scrollAnimation: 300,
userData: {
user_no: '',
user: {
avatar: '',
nickname: '加载中..'
},
follow: 0,
fans: 0,
likes: 0,
praised: 0,
color: '#e9dacd',
image: '',
isFollow: 0
},
stateText: {
publish: {
icon: 'wlIcon-jiazai wlIconfont-spin',
text: '发布中',
color: '#fff'
},
examine: {
icon: 'wlIcon-shouhoufuwu-zidongpingjia',
text: '待审核',
color: '#e6442b'
},
hazard: {
icon: 'wlIcon-zhuyidapx',
text: '内容违规',
color: '#e6442b'
},
transcoding: {
icon: 'wlIcon-jiazai1 wlIconfont-spin',
text: '转码中',
color: '#fff'
},
screenshot: {
icon: 'wlIcon-tupian wlIconfont-spin',
text: '生成封面中',
color: '#fff'
}
},
currentId: 0,
typeList: {
new: 'bg-gradual-yellow',
live: 'wanl-bg-orange',
want: 'bg-gradual-green',
activity: 'bg-gradual-orange',
show: 'wanl-bg-pink',
video: 'wanl-bg-pink'
},
navList: [{
type: 'works',
type_text: '作品',
dataList: [],
loadingType: 'more',
current_page: 1
},
{
type: 'likes',
type_text: '喜欢',
dataList: [],
loadingType: 'more',
current_page: 1
}
],
contentText: {
contentdown: ' ',
contentrefresh: '正在疯狂加载中...',
contentnomore: '我是有底线的'
}
};
},
computed: {
...mapState(['common'])
},
onLoad(query) {
// 计算页面尺寸
let sys = this.$wanlshop.wanlsys();
this.headTop = sys.top;
this.headHeight = sys.height;
this.windowHeight = sys.windowHeight;
// 判断是否小程序来源 1.1.9升级
if(query.hasOwnProperty('scene')){
let scene = decodeURIComponent(query.scene);
scene = this.$wanlshop.getParam(scene);
this.find_user = scene.id;
}else{
if(query.hasOwnProperty('id')){
this.find_user = query.id;
}
}
// 加载 Api
this.loadData();
},
// 下拉刷新
onReachBottom() {
this.loadFindData();
},
onPageScroll(e) {
let tmpY = 170;
e.scrollTop = e.scrollTop > tmpY ? 170 : e.scrollTop;
this.headerOpacity = e.scrollTop * (1 / tmpY);
},
methods: {
async loadData() {
await uni.request({
url: '/wanlshop/find/user/userInfo',
method: 'POST',
data: {
id: this.find_user
},
success: res => {
if (res.data.user_id === this.$store.state.user.id) {
this.isMyfind = true;
}
// this.navList[0].type_text = `作品(${res.data.works})`;
// this.navList[1].type_text = `喜欢(${res.data.likes})`;
this.userData = res.data;
this.loadFindData();
}
});
},
loadFindData(source) {
//这里是将订单挂载到tab列表下
let navItem = this.navList[this.currentId];
//判断是否最后一页
if (navItem.loadingType == 'noMore') {
return;
}
//tab切换只有第一次需要加载数据
if (source === 'tabChange' && navItem.loaded === true) {
return;
}
//防止重复加载
if (navItem.loadingType === 'loading') {
return;
}
navItem.loadingType = 'loading';
let type =
navItem.type === 'works' ? (this.isMyfind ? 'myfind' : navItem.type) : navItem.type;
// 获取列表
uni.request({
url: '/wanlshop/find/find/getList',
data: {
type: type,
user_no: this.userData.user_no,
page: navItem.current_page
},
success: res => {
navItem.current_page = res.data.current_page; //当前页码
if (res.data.last_page === res.data.current_page) {
navItem.loadingType = 'noMore';
} else {
navItem.loadingType = 'more';
navItem.current_page++;
}
res.data.data.forEach(item => {
navItem.dataList.push(item);
});
this.$set(navItem, 'loaded', true);
}
});
},
async handleFollow(shop) {
if (this.$store.state.user.isLogin) {
this.loadingFollow = true;
await uni.request({
url: '/wanlshop/find/user/setFindUser',
method: 'POST',
data: {
id: this.userData.user_no,
type: 'follow'
},
success: res => {
if (shop) {
let concern = this.$store.state.statistics.dynamic.concern;
if (res.data.data === 0) {
concern -= 1;
} else {
concern += 1;
}
this.$store.commit('statistics/dynamic', {
concern: concern
});
}
if (res.data.data === 1) {
this.userData.fans += 1;
} else if (res.data.data === 0) {
this.userData.fans -= 1;
}
this.userData.isFollow = res.data.data;
this.loadingFollow = false;
}
});
} else {
this.$wanlshop.to('/pages/user/auth/auth');
}
},
async handleLike(index) {
if (this.$store.state.user.isLogin) {
let data = this.navList[this.currentId].dataList[index];
await uni.request({
url: '/wanlshop/find/user/setFindUser',
method: 'POST',
data: {
id: data.id,
type: 'likes'
},
success: res => {
if (res.data.data === 0) {
data.likes -= 1;
} else {
data.likes += 1;
}
data.isLike = res.data.data;
}
});
} else {
this.$wanlshop.to('/pages/user/auth/auth');
}
},
async handleDel(index) {
if (this.$store.state.user.isLogin) {
uni.showModal({
content: '确定要删除此作品?',
success: res => {
if (res.confirm) {
let data = this.navList[this.currentId].dataList;
uni.request({
url: '/wanlshop/find/find/delData',
method: 'POST',
data: {
id: data[index].id
},
success: del => {
data.splice(index, 1);
}
});
}
}
});
} else {
this.$wanlshop.to('/pages/user/auth/auth');
}
},
async handleTheme() {
if (this.isMyfind) {
uni.showActionSheet({
itemList: ['从主题库选择背景', '从相册上传图片'],
success: action => {
if (action.tapIndex === 0) {
this.$wanlshop.to('/pages/user/theme');
} else if (action.tapIndex === 1) {
uni.chooseImage({
success: res => {
uni.request({
url: '/wanlshop/common/uploadData',
success: updata => {
uni.uploadFile({
url: updata.data
.uploadurl,
filePath: res
.tempFilePaths[0],
name: 'file',
formData: updata.data
.storage ==
'local' ? null :
updata.data
.multipart,
success: data => {
this.editTheme({
url: JSON
.parse(
data
.data
)
.data
.url,
type: 'upload'
});
},
fail: error => {
uni.showToast({
title: JSON
.parse(
error
.data
)
.msg,
icon: 'error',
position: true
});
}
});
}
});
}
});
}
}
});
}
},
async editTheme(data) {
await uni.request({
url: '/wanlshop/find/user/editTheme',
method: 'POST',
data: data,
success: res => {
this.userData.image = res.data.image;
this.userData.color = res.data.color;
}
});
},
handlePublish() {
let itemList = [],
url = [];
if (this.userData.shop) {
if (this.userData.isVideo) {
if (this.userData.isLive) {
itemList = ['发布种草', '发布短视频', '商家直播'];
url = ['/pages/apps/find/user/add?type=want', '/pages/apps/find/user/add?type=video',
'/pages/shop/live/live'
];
} else {
itemList = ['发布种草', '发布短视频'];
url = ['/pages/apps/find/user/add?type=want', '/pages/apps/find/user/add?type=video'];
}
} else {
if (this.userData.isLive) {
itemList = ['发布种草', '商家直播'];
url = ['/pages/apps/find/user/add?type=want', '/pages/apps/find/user/add?type=video'];
} else {
itemList = ['发布种草'];
url = ['/pages/apps/find/user/add?type=want'];
}
}
} else {
if (this.userData.isVideo) {
itemList = ['发布种草', '发布短视频'];
url = ['/pages/apps/find/user/add?type=want', '/pages/apps/find/user/add?type=video'];
} else {
itemList = ['发布种草'];
url = ['/pages/apps/find/user/add?type=want'];
}
}
uni.showActionSheet({
itemList: itemList,
success: res => {
if (res.tapIndex === 2) {
// #ifdef APP-PLUS || MP-WEIXIN
this.$wanlshop.to(url[res.tapIndex]);
// #endif
// #ifndef APP-PLUS || MP-WEIXIN
this.$wanlshop.msg('目前只开放App和微信小程序直播');
// #endif
} else {
this.$wanlshop.to(url[res.tapIndex]);
}
}
});
},
// 选择Tag
handleSelect(index) {
this.currentId = index;
this.loadFindData('tabChange');
},
handleBack() {
this.$wanlshop.back(1);
},
handleUserEdit() {
this.$wanlshop.auth('/pages/user/setting/user');
},
// 格式化html
formatHtml(content) {
return content.replace(/<\/?.+?>/g, '').replace(/ /g, '');
},
// 弹出层
showModal(name) {
// 滚动下分享
if (name == 'share' && this.modalName != 'share') {
setTimeout(() => {
this.scrollAnimation = 300;
}, 300);
}
this.modalName = name;
},
hideModal(name) {
if (name) {
this.showModal(name);
} else {
// 强制关闭海报
if(this.modalName == 'share'){
this.$refs.wanlShare.closePoster();
}
this.modalName = null;
}
}
}
};
</script>
<style lang="scss">
page {
background-color: #ffffff;
}
.wanlgroups-user-container {
&__head {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9;
.background {
position: absolute;
left: 0;
right: 0;
z-index: 1;
.bgcolor {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
}
.navigater {
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
left: 0;
right: 0;
z-index: 9;
padding-left: 25rpx;
padding-right: 25rpx;
/* #ifdef MP */
padding-right: 200rpx;
/* #endif */
&>view {
display: flex;
align-items: center;
}
}
}
&__main {
background-size: 100% auto;
background-repeat: no-repeat;
background-position-y: center;
.text-white-agba {
color: rgba(255, 255, 255, 0.9);
}
.head {
padding: 0 30rpx;
padding-bottom: 50rpx;
background-color: rgba(0, 0, 0, 0.4);
.userinfo {
display: flex;
align-items: center;
.cu-avatar {
width: 130rpx;
height: 130rpx;
}
}
.findinfo {
display: flex;
align-items: center;
justify-content: space-between;
.quantity {
display: flex;
.project {
width: 100rpx;
margin-right: 10rpx;
overflow: hidden;
}
}
}
.shopinfo {
display: flex;
align-items: center;
justify-content: space-between;
&.solid-top {
&::after {
border-top: 1rpx solid rgba(255, 255, 255, 0.92);
}
}
.cu-avatar {
background-color: rgba(0, 0, 0, 0.1);
width: 65rpx;
height: 65rpx;
}
.subject {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
.info {
&>view {
display: flex;
align-items: center;
}
}
}
}
}
}
&__list {
margin-top: -30rpx;
border-radius: 24rpx 24rpx 0 0;
padding-top: 2rpx;
.questionbag {
position: -webkit-sticky;
position: sticky;
z-index: 99;
margin: 0 16rpx;
}
.main {
.empty {
padding-top: 100rpx;
display: flex;
justify-content: center;
image {
width: 320rpx;
height: 320rpx;
}
}
.list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 0 16rpx;
justify-content: space-between;
.item {
margin-bottom: 40rpx;
flex: 0 0 calc((100% - 16rpx) / 2);
overflow: hidden;
.examine {
height: 460rpx;
position: relative;
.cover {
height: 460rpx;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.state {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.2);
}
}
}
}
}
}
&__modal {
.praised {
.cu-dialog {
width: 70%;
overflow: hidden;
image {
height: 100%;
}
}
}
}
}
</style>