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.
375 lines
11 KiB
375 lines
11 KiB
<template>
|
|
<view class="wanlshop-find-container">
|
|
<view class="wanlshop-find-container___head" :style="{height: `${headHeight}px`}">
|
|
<view class="fixed bg-bgcolor" :style="{height: `${headHeight}px`, paddingTop: `${headTop}px`}">
|
|
<view class="head">
|
|
<view class="margin-right-bj text-xl" @tap="handleBack">
|
|
<text class="wlIcon-fanhui1"></text>
|
|
</view>
|
|
<view class="search round padding-lr-bj solid" @tap="$wanlshop.to('/pages/page/search?type=find')">
|
|
<text class="wlIcon-sousuo1 margin-right-sm"></text>
|
|
<text class="wanl-gray-dark">{{keyword ? keyword : '搜索 种草作品 或 创作者'}}</text>
|
|
</view>
|
|
</view>
|
|
<scroll-view scroll-x class="nav text-center ">
|
|
<view class="cu-item" :class="index === currentId ? 'text-30 text-bold cur' : 'wanl-gray'"
|
|
v-for="(item,index) in navList" :key="index" @tap="handleSelect(index)">
|
|
{{item.type_text}}
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
<view class="wanlshop-find-container__main">
|
|
<block v-if="currentId === 0">
|
|
<wanl-empty v-if="navList[currentId].dataList.length === 0 && navList[currentId].loaded"
|
|
text="没有找到任何动态" />
|
|
<scroll-view v-if="navList[currentId].dataList.length > 0" :style="{height: `${mainHeight}px`}" scroll-y
|
|
@scrolltolower="loadData">
|
|
<view class="find">
|
|
<view class="item" v-for="(item, index) in navList[currentId].dataList" :key="index">
|
|
<view class="cover radius-bock"
|
|
:style="{ backgroundImage: 'url(' + $wanlshop.oss(item.images[0], 200, 0) + ')' }"
|
|
@tap="onFind(item)">
|
|
</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>
|
|
{{$wanlshop.timeFormat(item.createtime, 'mm-dd')}} 发布
|
|
</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="navList[currentId].loadingType" :content-text="contentText" />
|
|
</scroll-view>
|
|
</block>
|
|
<block v-if="currentId === 1">
|
|
<wanl-empty v-if="navList[currentId].dataList.length === 0 && navList[currentId].loaded"
|
|
text="没有找到任何用户" />
|
|
<scroll-view v-if="navList[currentId].dataList.length > 0" :style="{height: `${mainHeight}px`}" scroll-y
|
|
@scrolltolower="loadData">
|
|
<view class="user">
|
|
<view class="item padding-bj margin-bj bg-white radius-bock" v-for="(item, index) in navList[currentId].dataList" :key="index" @click="handleUser(item.user_no)">
|
|
<block v-if="item.shop">
|
|
<view class="cu-avatar margin-right-bj round"
|
|
:style="{backgroundImage: `url(${$wanlshop.oss(item.shop.avatar, 88, 88)})`}"
|
|
>
|
|
</view>
|
|
<view class="subject">
|
|
<view class="info">
|
|
<view class="text-cut-2 margin-bottom-xs">
|
|
<view class="cu-tag sm bg-gradual-blue radius margin-right-xs">
|
|
商家
|
|
</view>
|
|
{{item.shop.shopname}}
|
|
</view>
|
|
<view class="flex wanl-gray-light text-sm">
|
|
<view class="margin-right"> 粉丝 <text class="margin-left-xs">{{item.fans}}</text> </view>
|
|
<view> 获赞 <text class="margin-left-xs">{{item.praised}}</text> </view>
|
|
</view>
|
|
</view>
|
|
<view class="menu">
|
|
<button class="cu-btn wlIcon margin-right-sm"
|
|
@click.stop="onShop(item.shop.id)">
|
|
<text class="wlIcon-31dianpu"></text>
|
|
</button>
|
|
<button v-if="item.isFollow === 0" class="cu-btn wlIcon"
|
|
@click.stop="handleFollow(index, item.shop)">
|
|
<text class="wlIcon-tianjia"></text>
|
|
</button>
|
|
<button v-else class="cu-btn radius-bock text-sm"
|
|
@click.stop="handleFollow(index, item.shop)">
|
|
<text class="wlIcon-31guanbi margin-right-xs text-bold"></text>取消
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<block v-else>
|
|
<view class="cu-avatar margin-right-bj round"
|
|
:style="{backgroundImage: `url(${$wanlshop.oss(item.user.avatar, 88, 88)})`}">
|
|
</view>
|
|
<view class="subject">
|
|
<view class="info">
|
|
<view class="text-cut-2 margin-bottom-xs">{{item.user.nickname}}</view>
|
|
<view class="flex wanl-gray-light text-sm">
|
|
<view class="margin-right"> 粉丝 <text class="margin-left-xs">{{item.fans}}</text> </view>
|
|
<view> 获赞 <text class="margin-left-xs">{{item.praised}}</text> </view>
|
|
</view>
|
|
</view>
|
|
<view class="menu">
|
|
<button v-if="item.isFollow === 0" class="cu-btn wlIcon"
|
|
@click.stop="handleFollow(index)">
|
|
<text class="wlIcon-tianjia"></text>
|
|
</button>
|
|
<button v-else class="cu-btn radius-bock text-sm"
|
|
@click.stop="handleFollow(index)">
|
|
<text class="wlIcon-31guanbi margin-right-xs text-bold"></text>取消
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
<uni-load-more :status="navList[currentId].loadingType" :content-text="contentText" />
|
|
</scroll-view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
headTop: 0,
|
|
headHeight: 0,
|
|
mainHeight: 0,
|
|
keyword: '',
|
|
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: 'user',
|
|
type_text: '用户',
|
|
dataList: [],
|
|
loadingType: 'more',
|
|
current_page: 1
|
|
}
|
|
],
|
|
contentText: {
|
|
contentdown: ' ',
|
|
contentrefresh: '正在疯狂加载中...',
|
|
contentnomore: '我是有底线的'
|
|
}
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
let sys = uni.getSystemInfoSync(),
|
|
headHeight = sys.statusBarHeight + uni.upx2px(160); //1.1.2升级
|
|
this.headTop = sys.statusBarHeight; //1.1.2升级
|
|
this.headHeight = headHeight;
|
|
this.mainHeight = sys.windowHeight - headHeight;
|
|
this.keyword = option.search;
|
|
this.loadData();
|
|
},
|
|
methods: {
|
|
async loadData(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';
|
|
// 获取列表
|
|
this.$api.get({
|
|
url: '/wanlshop/find/find/getList',
|
|
data: {
|
|
search: this.keyword,
|
|
type: navItem.type,
|
|
page: navItem.current_page
|
|
},
|
|
success: res => {
|
|
navItem.current_page = res.current_page; //当前页码
|
|
if (res.last_page === res.current_page) {
|
|
navItem.loadingType = 'noMore';
|
|
} else {
|
|
navItem.loadingType = 'more';
|
|
navItem.current_page++;
|
|
}
|
|
res.data.forEach(item => {
|
|
navItem.dataList.push(item);
|
|
});
|
|
this.$set(navItem, 'loaded', true);
|
|
}
|
|
});
|
|
},
|
|
async handleLike(index) {
|
|
if (this.$store.state.user.isLogin) {
|
|
let data = this.navList[this.currentId].dataList[index];
|
|
this.$api.post({
|
|
url: '/wanlshop/find/user/setFindUser',
|
|
data: {
|
|
id: data.id,
|
|
type: 'likes'
|
|
},
|
|
success: res => {
|
|
if (res.data === 0) {
|
|
data.likes -= 1;
|
|
} else {
|
|
data.likes += 1;
|
|
}
|
|
data.isLike = res.data;
|
|
}
|
|
});
|
|
} else {
|
|
this.$wanlshop.to('/pages/user/auth/auth')
|
|
}
|
|
},
|
|
async handleFollow(index, shop) {
|
|
if (this.$store.state.user.isLogin) {
|
|
let data = this.navList[this.currentId].dataList[index];
|
|
this.$api.post({
|
|
url: '/wanlshop/find/user/setFindUser',
|
|
data: {
|
|
id: data.user_no,
|
|
type: 'follow'
|
|
},
|
|
success: res => {
|
|
if(shop){
|
|
let concern = this.$store.state.statistics.dynamic.concern;
|
|
if(res.data === 0){
|
|
concern -= 1;
|
|
}else{
|
|
concern += 1;
|
|
}
|
|
this.$store.commit('statistics/dynamic', {
|
|
concern: concern,
|
|
});
|
|
}
|
|
data.isFollow = res.data;
|
|
}
|
|
});
|
|
} else {
|
|
this.$wanlshop.to('/pages/user/auth/auth')
|
|
}
|
|
},
|
|
// 格式化html
|
|
formatHtml(content) {
|
|
return (content.replace(/<\/?.+?>/g, "").replace(/ /g, ""));
|
|
},
|
|
// 选择Tag
|
|
handleSelect(index) {
|
|
this.currentId = index;
|
|
this.loadData('tabChange');
|
|
},
|
|
handleUser(user_no) {
|
|
this.$wanlshop.to(`/pages/apps/find/user?id=${user_no}`);
|
|
},
|
|
handleBack() {
|
|
this.$wanlshop.back(1);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.wanlshop-find-container {
|
|
&___head {
|
|
.fixed {
|
|
width: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
z-index: 999;
|
|
|
|
.head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 90rpx;
|
|
padding: 0 25rpx;
|
|
|
|
.search {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 68rpx;
|
|
background-color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.nav {
|
|
.cu-item {
|
|
height: 70rpx;
|
|
line-height: 70rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__main {
|
|
.find {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
padding: 0 16rpx;
|
|
justify-content: space-between;
|
|
overflow: hidden;
|
|
.item {
|
|
margin-top: 16rpx;
|
|
margin-bottom: 30rpx;
|
|
flex: 0 0 calc((100% - 16rpx) / 2);
|
|
overflow: hidden;
|
|
|
|
.cover {
|
|
height: 460rpx;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
}
|
|
|
|
.user {
|
|
overflow: hidden;
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.cu-avatar {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
flex-shrink: 0;
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.subject {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex: 1;
|
|
|
|
.info {
|
|
max-width: 250rpx;
|
|
}
|
|
|
|
.menu {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |