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.
723 lines
17 KiB
723 lines
17 KiB
<template>
|
|
<scroll-view
|
|
class="wanlshop-find-container"
|
|
:style="{
|
|
paddingTop: `${headHeight}px`,
|
|
height: `${windowHeight}px`,
|
|
backgroundColor: ``
|
|
}"
|
|
scroll-y
|
|
enable-back-to-top
|
|
enable-flex="true"
|
|
@scrolltoupper="handleUpper"
|
|
@scrolltolower="handleLower"
|
|
>
|
|
<block v-if="!user.isLogin && !userNo">
|
|
<view
|
|
class="bg-white margin-bj radius-bock flex align-center justify-center padding-lr padding-tb-xl"
|
|
>
|
|
<view class="text-center">
|
|
<text class="wanl-gray">登录后才能看到您关注店铺的动态哦</text>
|
|
<view class="margin-top-sm">
|
|
<button class="cu-btn bg-orange" @tap="$wanlshop.auth('/pages/find')">
|
|
马上登陆
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<block v-else>
|
|
<view
|
|
class="wanlshop-find-container__list wanl-find margin-top-sm"
|
|
v-for="(find, index) in dataList"
|
|
:key="find.id"
|
|
>
|
|
<view class="margin-lr-bj bg-white radius-bock padding-lr-bj padding-top-bj">
|
|
<!-- 头部 -->
|
|
<view class="userinfo">
|
|
<block v-if="find.shop">
|
|
<view class="avatar" @tap="handleUser(find.user_no)">
|
|
<view
|
|
class="cu-avatar round margin-right-bj"
|
|
:style="{
|
|
backgroundImage:
|
|
'url(' +
|
|
$wanlshop.oss(find.shop.avatar, 35, 35, 2, 'avatar') +
|
|
')'
|
|
}"
|
|
></view>
|
|
<view class="content">
|
|
<view class="wanl-find-head text-cut">
|
|
<text class="wanl-black margin-right-bj shopname">
|
|
{{ find.shop.shopname }}
|
|
</text>
|
|
<!-- <view
|
|
v-if="find.isLive"
|
|
@tap="onLive(find.isLive.id)"
|
|
class="cu-tag sm wanl-bg-orange round"
|
|
>
|
|
<text class="wlIcon-zhibo"></text>
|
|
直播中
|
|
</view> -->
|
|
</view>
|
|
<view class="wanl-gray text-min">
|
|
{{ $wanlshop.timeToDate(find.createtime) }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="menu">
|
|
<button
|
|
class="cu-btn radius-bock text-sm"
|
|
@click.stop="handleFollow(index, find.shop)"
|
|
>
|
|
<view v-if="find.isFollow === 0">
|
|
<text
|
|
class="wlIcon-31xuanze margin-right-xs text-bold"
|
|
></text>
|
|
关注
|
|
</view>
|
|
<view v-else>
|
|
<text
|
|
class="wlIcon-31guanbi margin-right-xs text-bold"
|
|
></text>
|
|
取关
|
|
</view>
|
|
</button>
|
|
<button
|
|
class="cu-btn wlIcon margin-left-sm"
|
|
@click.stop="onShop(find.shop.id)"
|
|
>
|
|
<text class="wlIcon-31dianpu"></text>
|
|
</button>
|
|
</view>
|
|
</block>
|
|
<block v-else>
|
|
<view class="avatar" @tap="handleUser(find.user_no)">
|
|
<view
|
|
class="cu-avatar round margin-right-bj"
|
|
:style="{
|
|
backgroundImage:
|
|
'url(' +
|
|
$wanlshop.oss(find.user.avatar, 35, 35, 2, 'avatar') +
|
|
')'
|
|
}"
|
|
></view>
|
|
<view class="content">
|
|
<view class="wanl-find-head text-cut">
|
|
<text class="wanl-black margin-right-bj shopname">
|
|
{{ find.user.nickname }}
|
|
</text>
|
|
<!-- <view
|
|
v-if="find.isLive"
|
|
@tap="onLive(find.isLive.id)"
|
|
class="cu-tag sm wanl-bg-orange round"
|
|
>
|
|
<text class="wlIcon-zhibo"></text>
|
|
直播中
|
|
</view> -->
|
|
</view>
|
|
<view class="wanl-gray text-min">
|
|
{{ $wanlshop.timeToDate(find.createtime) }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="menu">
|
|
<button
|
|
class="cu-btn radius-bock text-sm"
|
|
@click.stop="handleFollow(index)"
|
|
>
|
|
<view v-if="find.isFollow === 0">
|
|
<text
|
|
class="wlIcon-31xuanze margin-right-xs text-bold"
|
|
></text>
|
|
关注
|
|
</view>
|
|
<view v-else>
|
|
<text
|
|
class="wlIcon-31guanbi margin-right-xs text-bold"
|
|
></text>
|
|
取关
|
|
</view>
|
|
</button>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
<!-- 内容 -->
|
|
<view
|
|
class="content margin-tb-bj wanl-gray-dark text-cut-2"
|
|
@tap="onFind(find)"
|
|
>
|
|
<view
|
|
class="cu-tag sm radius margin-right-xs"
|
|
:class="[typeList[find.type]]"
|
|
>
|
|
{{ find.type_text }}
|
|
</view>
|
|
{{ formatHtml(find.content) }}
|
|
</view>
|
|
<!-- 图片 -->
|
|
<view class="container radius-bock">
|
|
<block v-for="(img, kes) in find.images" :key="kes">
|
|
<block v-if="find.type === 'live'">
|
|
<view
|
|
class="item"
|
|
@tap="onFind(find)"
|
|
:class="[kes == 0 ? 'item-live' : '']"
|
|
:style="{
|
|
backgroundImage: 'url(' + $wanlshop.oss(img, 200, 0) + ')'
|
|
}"
|
|
>
|
|
<block v-if="kes == 0">
|
|
<view class="play">
|
|
<text
|
|
:class="[
|
|
find.live.state == 1
|
|
? 'wlIcon-icon_zhibo-mian'
|
|
: 'wlIcon-guijihuifang'
|
|
]"
|
|
></text>
|
|
</view>
|
|
<view class="state text-white" v-if="find.live.state == 1">
|
|
<view class="tags wanl-bg-orange">
|
|
<text class="wlIcon-zhibo"></text>
|
|
<text class="text-min">直播</text>
|
|
</view>
|
|
<view class="text-sm">{{ find.live.views }} 在看</view>
|
|
</view>
|
|
<view class="state text-white" v-else>
|
|
<view class="tags bg-grey">
|
|
<text class="text-min">回放</text>
|
|
</view>
|
|
<view class="text-sm">{{ find.live.views }} 看过</view>
|
|
</view>
|
|
<!-- <view class="number text-white">
|
|
<view>{{$wanlshop.toFormat(find.live.goods_ids.split(',').length,'hundred')}}</view>
|
|
<text>宝贝</text>
|
|
</view> -->
|
|
<view
|
|
class="like text-center text-white"
|
|
v-if="find.live.state == 1"
|
|
>
|
|
<view class="likebut">
|
|
<text class="wlIcon-yiguanzhu1"></text>
|
|
</view>
|
|
<text class="text-min">{{ find.live.like }}</text>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</block>
|
|
<block v-else-if="find.type === 'video'">
|
|
<view class="item item-1 text-sl radius-bock" :style="{ backgroundImage: 'url(' + $wanlshop.oss(img, 200, 0) + ')' }" @tap="onFind(find)">
|
|
<text class="wlIcon-video text-white"></text>
|
|
</view>
|
|
</block>
|
|
<block v-else>
|
|
<block v-if="find.images.length == 1">
|
|
<view
|
|
class="item item-1 radius-bock"
|
|
@tap="previewImage(find.images, kes)"
|
|
:style="{
|
|
backgroundImage:
|
|
'url(' + $wanlshop.oss(img, 200, 0) + ')'
|
|
}"
|
|
></view>
|
|
</block>
|
|
<block v-else-if="find.images.length == 3">
|
|
<view
|
|
class="item"
|
|
@tap="previewImage(find.images, kes)"
|
|
:class="[kes == 0 ? 'item-3' : '']"
|
|
:style="{
|
|
backgroundImage:
|
|
'url(' + $wanlshop.oss(img, 200, 0) + ')'
|
|
}"
|
|
></view>
|
|
</block>
|
|
<block v-else>
|
|
<view
|
|
class="item"
|
|
@tap="previewImage(find.images, kes)"
|
|
:style="{
|
|
backgroundImage:
|
|
'url(' + $wanlshop.oss(img, 200, 200) + ')'
|
|
}"
|
|
></view>
|
|
</block>
|
|
</block>
|
|
</block>
|
|
</view>
|
|
<!-- 商品 -->
|
|
<scroll-view class="scroll-view margin-top-sm" scroll-x="true">
|
|
<view
|
|
class="scroll-view-item radius-bock"
|
|
:class="[find.goods.length == 1 ? 'col-1' : '']"
|
|
v-for="(goods, sub) in find.goods"
|
|
:key="goods.id"
|
|
@tap="onGoods(goods.id)"
|
|
>
|
|
<view class="img">
|
|
<image lazy-load :src="$wanlshop.oss(goods.image, 50, 50)"></image>
|
|
</view>
|
|
<view class="content padding-left-bj text-cut text-df">
|
|
{{ goods.title }}
|
|
<view class="flex align-center">
|
|
<text class="text-price text-orange">{{ goods.price }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="icon text-lg wanl-gray-light">
|
|
<text class="wlIcon-fanhui6"></text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="flex justify-between padding-tb-bj align-center">
|
|
<view
|
|
v-if="find.type == 'live'"
|
|
class="wanl-gray-light text-sm"
|
|
@tap="onFind(find)"
|
|
>
|
|
{{ find.live.views }} 阅读
|
|
</view>
|
|
<view v-else class="wanl-gray-light text-sm" @tap="onFind(find)">
|
|
{{ find.views }} 阅读
|
|
</view>
|
|
<view class="flex">
|
|
<view
|
|
:class="[find.isLike === 1 ? 'wanl-orange' : '']"
|
|
@tap="handleLike(index)"
|
|
>
|
|
<text
|
|
:class="[
|
|
find.isLike === 1 ? 'wlIcon-dianzan1' : 'wlIcon-dianzan11'
|
|
]"
|
|
></text>
|
|
<text class="margin-left-xs">{{ find.likes }}</text>
|
|
</view>
|
|
<view
|
|
class="margin-left"
|
|
@tap="onFind(find, 'comments')"
|
|
v-if="appConfig.comment_switch == 'Y'"
|
|
>
|
|
<text class="wlIcon-pinglun"></text>
|
|
<text class="margin-left-xs">{{ find.comments }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="padding-tb-bj solid-top text-center text-orange"
|
|
v-if="find.newGoods > 0"
|
|
@tap="onShop(find.shop_id)"
|
|
>
|
|
进店查看 {{ find.newGoods }} 件新品
|
|
<text class="wlIcon-fanhui6 margin-left-xs"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<wanl-empty
|
|
v-if="status !== 'loading' && dataList.length === 0"
|
|
src="collect_default3x"
|
|
text="没有找到任何发现动态"
|
|
/>
|
|
<uni-load-more
|
|
:status="status"
|
|
:content-text="contentText"
|
|
v-if="dataList.length > 0"
|
|
/>
|
|
</block>
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'wanlShopFind',
|
|
props: {
|
|
// 页面配置
|
|
windowHeight: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
headHeight: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
currentItemId: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
userNo: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
appConfig: {
|
|
type: Object,
|
|
default() {
|
|
return {};
|
|
}
|
|
},
|
|
user: {
|
|
type: Object,
|
|
default() {
|
|
return {};
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
currentItemId(newVal, oldVal) {
|
|
if (newVal === 'follow') {
|
|
this.loadData();
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
typeList: {
|
|
new: 'bg-gradual-yellow',
|
|
live: 'wanl-bg-orange',
|
|
want: 'bg-gradual-green',
|
|
activity: 'bg-gradual-orange',
|
|
show: 'wanl-bg-pink',
|
|
video: 'wanl-bg-orange'
|
|
},
|
|
dataList: [], //数据
|
|
current_page: 1, //当前页码
|
|
last_page: 1, //总页码
|
|
status: 'loading',
|
|
contentText: {
|
|
contentdown: '下拉加载更多',
|
|
contentrefresh: '疯狂加载中...',
|
|
contentnomore: '我是有底线的'
|
|
}
|
|
};
|
|
},
|
|
methods: {
|
|
async loadData(type) {
|
|
this.status = 'loading';
|
|
let data = {
|
|
page: this.current_page
|
|
};
|
|
// 判断上拉还是下拉
|
|
if (type === 'upper') {
|
|
this.current_page = 1;
|
|
} else if (type === 'lower') {
|
|
if (this.current_page >= this.last_page) {
|
|
this.status = 'noMore';
|
|
return false;
|
|
} else {
|
|
this.current_page += 1;
|
|
}
|
|
}
|
|
if (this.currentItemId === 'follow') {
|
|
data.type = this.currentItemId;
|
|
}
|
|
// 请求数据
|
|
await this.$api.get({
|
|
url: '/wanlshop/find/find/getList',
|
|
data: data,
|
|
success: res => {
|
|
if (type === 'lower') {
|
|
this.dataList = this.dataList.concat(res.data);
|
|
} else {
|
|
this.dataList = res.data;
|
|
}
|
|
this.current_page = res.current_page; //当前页码
|
|
this.last_page = res.last_page; //总页码
|
|
// 判断是否还有数据
|
|
if (res.current_page === res.last_page || res.total === 0) {
|
|
this.status = 'noMore';
|
|
} else {
|
|
this.status = 'more';
|
|
}
|
|
}
|
|
});
|
|
},
|
|
async handleLike(index) {
|
|
if (this.$store.state.user.isLogin) {
|
|
let data = this.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.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');
|
|
}
|
|
},
|
|
handleUpper() {
|
|
// this.loadData('upper');
|
|
},
|
|
handleLower() {
|
|
this.loadData('lower');
|
|
},
|
|
handleUser(user_no) {
|
|
this.$wanlshop.to(`/pages/apps/find/user?id=${user_no}`);
|
|
},
|
|
//预览图片
|
|
previewImage(image, index) {
|
|
var imgArr = [];
|
|
for (var item of image) {
|
|
imgArr = imgArr.concat(this.$wanlshop.oss(item, 500));
|
|
}
|
|
uni.previewImage({
|
|
urls: imgArr,
|
|
current: imgArr[index],
|
|
indicator: 'number'
|
|
});
|
|
},
|
|
// 格式化html
|
|
formatHtml(content) {
|
|
return content.replace(/<\/?.+?>/g, '').replace(/ /g, '');
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.wanlshop-find-container {
|
|
&__list {
|
|
.userinfo {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
text {
|
|
&[class*='wlIcon-'] {
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.avatar {
|
|
width: calc(100% - 245rpx);
|
|
display: flex;
|
|
align-items: center;
|
|
.cu-avatar {
|
|
background-color: #f5f5f5;
|
|
flex-shrink: 1;
|
|
}
|
|
.content{
|
|
width: calc(100% - 90rpx);
|
|
}
|
|
.cu-tag {
|
|
font-size: 20rpx;
|
|
padding: 0px 10rpx !important;
|
|
}
|
|
}
|
|
// 待优化溢出,临时解决方案
|
|
.menu{
|
|
text-align: right;
|
|
width: 245rpx;
|
|
}
|
|
|
|
.cu-btn {
|
|
&.sm {
|
|
padding: 0 20rpx;
|
|
font-size: 26rpx;
|
|
height: 50rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
.cu-tag {
|
|
&.sm {
|
|
padding: 6rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.container {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
|
|
&.col-2 {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid #fff;
|
|
min-height: 6rem;
|
|
width: 100%;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
&.item-1 {
|
|
grid-column: 1 / 3;
|
|
grid-row: 1 / 3;
|
|
height: 600rpx;
|
|
}
|
|
|
|
&.item-3 {
|
|
grid-column: 1 / 3;
|
|
grid-row: 1 / 3;
|
|
}
|
|
|
|
&.item-live {
|
|
position: relative;
|
|
grid-column: 1 / 3;
|
|
grid-row: 1 / 3;
|
|
|
|
.play {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
border: 1px solid rgba(255, 255, 255, 0.5);
|
|
font-size: 56rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
.state {
|
|
display: flex;
|
|
position: absolute;
|
|
left: 20rpx;
|
|
bottom: 20rpx;
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
height: 36rpx;
|
|
line-height: 36rpx;
|
|
border-radius: 8rpx;
|
|
overflow: hidden;
|
|
|
|
& > view {
|
|
padding: 0 12rpx;
|
|
}
|
|
|
|
.tags {
|
|
height: 100%;
|
|
border-radius: 8rpx;
|
|
font-size: 28rpx;
|
|
|
|
& > text {
|
|
margin-right: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.number {
|
|
position: absolute;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
border: 1px solid rgba(255, 255, 255, 0.5);
|
|
border-radius: 8rpx 8rpx 0 20rpx;
|
|
overflow: hidden;
|
|
padding: 8rpx 6rpx;
|
|
top: 10rpx;
|
|
right: 10rpx;
|
|
line-height: 1;
|
|
text-align: center;
|
|
|
|
& > view {
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
& > text {
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
|
|
.like {
|
|
position: absolute;
|
|
bottom: 15rpx;
|
|
right: 30rpx;
|
|
line-height: 1.2;
|
|
|
|
.likebut {
|
|
background-color: #f40;
|
|
border-radius: 50%;
|
|
width: 45rpx;
|
|
line-height: 46rpx;
|
|
height: 45rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.scroll-view {
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
|
|
.scroll-view-item {
|
|
display: inline-flex;
|
|
width: 60%;
|
|
height: 100rpx;
|
|
overflow: hidden;
|
|
margin-right: 10rpx;
|
|
background-color: #f9f9f9;
|
|
align-items: center;
|
|
|
|
&.col-1 {
|
|
width: 100%;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.img {
|
|
height: 100rpx;
|
|
width: 100rpx;
|
|
border-radius: 18rpx 0 0 18rpx;
|
|
background-color: #efefef;
|
|
|
|
image {
|
|
height: 100rpx;
|
|
width: 100rpx;
|
|
border-radius: 18rpx 0 0 18rpx;
|
|
background-color: #efefef;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
flex: 1;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.icon {
|
|
width: 60rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|