303 lines
7.6 KiB
Vue
303 lines
7.6 KiB
Vue
<template>
|
||
<view class="concerns">
|
||
<view>
|
||
<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
|
||
swiperWidth="750"></u-tabs-swiper>
|
||
</view>
|
||
<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" style="width:750rpx" :style="{'height':height}">
|
||
<swiper-item class="swiper-item" >
|
||
|
||
<scroll-view scroll-y style="height: 100%;width: 100%;" class="store" @scrolltolower="shangjiaapi()">
|
||
<view @touchmove.stop="">
|
||
<u-swipe-action
|
||
v-for="(item, index) in shangjia" :key="index"
|
||
:index='item.friend_tomid'
|
||
:options="options"
|
||
:show="item.show"
|
||
@click="removeFavorite"
|
||
@open="open"
|
||
>
|
||
<view class="item u-border-bottom" @click="toDetailsPage(item.friend_tomid)">
|
||
<image :src="item.friend_tomavatar"></image>
|
||
<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
|
||
<view class="title-wrap">
|
||
<view class="item-name u-line-1">{{ item.friend_tomname }}</view>
|
||
<view class="item-date">
|
||
<image src="@/pageE/static/mine/26.png"></image>
|
||
<view>{{ item.friend_tomavatar | date }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-swipe-action>
|
||
<view style="height:20rpx"></view>
|
||
<u-loadmore :status="sstatus" bg-color="#ECECEC" v-if="shangjia.length" />
|
||
|
||
</view>
|
||
|
||
<u-empty mode="list" v-if="!shangjia.length" color="#000" img-width="200" font-size="30"></u-empty>
|
||
</scroll-view>
|
||
</swiper-item>
|
||
<swiper-item class="swiper-item" >
|
||
<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="darenapi()">
|
||
<view class="concerns-container">
|
||
<view v-for="(info, index) in daren" :key="index">
|
||
<view class="daren-item">
|
||
<image class="head" :src="info.friend_tomavatar" @click="viewDetails({ id: info.friend_tomid, type: info.role })"></image>
|
||
<text class="name" @click="viewDetails({ id: info.friend_tomid, type: info.role })">{{ info.friend_tomname || '' }}</text>
|
||
<view class="guanzhu" @click="changeType(info.friend_tomid)" v-if="info.friend_followstate == 1">取消关注</view>
|
||
</view>
|
||
</view>
|
||
<u-loadmore :status="dstatus" bg-color="#ECECEC" v-if="daren.length" />
|
||
</view>
|
||
<u-empty mode="list" v-if="!daren.length" color="#000" img-width="200" font-size="30"></u-empty>
|
||
</scroll-view>
|
||
</swiper-item>
|
||
</swiper>
|
||
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
list: [{name:"商家"},{name:"达人"}],
|
||
current: 0, // tabs组件的current值，表示当前活动的tab选项
|
||
swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
|
||
daren:[],
|
||
shangjia:[],
|
||
height:0,
|
||
show: false,
|
||
options: [
|
||
{
|
||
text: '删除',
|
||
style: {
|
||
backgroundColor: '#FF3131'
|
||
}
|
||
}
|
||
],
|
||
dpage:1,
|
||
spage:1,
|
||
dstatus: 'loadmore',
|
||
sstatus: 'loadmore',
|
||
}
|
||
},
|
||
onShow() {
|
||
this.dstatus = "loadmore"
|
||
this.sstatus = "loadmore"
|
||
this.dpage = 1
|
||
this.spage = 1
|
||
this.shangjiaapi();
|
||
this.darenapi();
|
||
},
|
||
onLoad(){
|
||
let that = this
|
||
|
||
uni.getSystemInfo({
|
||
success(res){
|
||
that.height = res.windowHeight - (res.windowWidth / 750 * 80) + 'px'
|
||
}
|
||
})
|
||
},
|
||
// 下拉刷新
|
||
|
||
methods: {
|
||
// tabs通知swiper切换
|
||
tabsChange(index) {
|
||
this.swiperCurrent = index;
|
||
},
|
||
// swiper-item左右移动，通知tabs的滑块跟随移动
|
||
transition(e) {
|
||
let dx = e.detail.dx;
|
||
this.$refs.uTabs.setDx(dx);
|
||
},
|
||
// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
|
||
// swiper滑动结束，分别设置tabs和swiper的状态
|
||
animationfinish(e) {
|
||
let current = e.detail.current;
|
||
this.$refs.uTabs.setFinishCurrent(current);
|
||
this.swiperCurrent = current;
|
||
this.current = current;
|
||
},
|
||
// scroll-view到底部加载更多
|
||
onreachBottom() {
|
||
|
||
},
|
||
shangjiaapi() {
|
||
if(this.sstatus == "loading" || this.sstatus == 'nomore') return
|
||
this.sstatus = "loading"
|
||
this.$forceUpdate();
|
||
this.$u.api.attentionMemberList({role:2,page:this.spage}).then(res => {
|
||
console.log(res)
|
||
if(res.errCode == 0) {
|
||
this.spage > 1 ? this.shangjia.push(...res.data.data) : (this.shangjia = res.data.data);
|
||
this.sstatus = "loadmore"
|
||
|
||
if(res.data.data.length == 0){
|
||
this.sstatus = 'nomore'
|
||
}
|
||
this.spage++
|
||
this.$forceUpdate();
|
||
}
|
||
})
|
||
},
|
||
darenapi() {
|
||
this.$u.api.attentionMemberList({role:3,page:this.dpage}).then(res => {
|
||
if(this.dstatus == "loading" || this.dstatus == 'nomore') return
|
||
this.dstatus = "loading"
|
||
this.$forceUpdate();
|
||
|
||
console.log(this.dstatus)
|
||
console.log(res)
|
||
if(res.errCode == 0) {
|
||
this.dpage > 1 ? this.daren.push(...res.data.data) : (this.daren = res.data.data);
|
||
this.dstatus = "loadmore"
|
||
|
||
if(res.data.data.length == 0){
|
||
this.dstatus = 'nomore'
|
||
}
|
||
this.dpage++
|
||
this.$forceUpdate();
|
||
|
||
}
|
||
|
||
})
|
||
},
|
||
viewDetails({ id, type }) {
|
||
let src = type == 3 ? 'pageB/details/index' : 'pageC/merchant/index';
|
||
this.$u.route(src, {
|
||
id: id
|
||
});
|
||
},
|
||
changeType(id) {
|
||
console.log(id);
|
||
this.$u.api.attentionMember({
|
||
member_id: id
|
||
}).then(res => {
|
||
this.$u.toast(res.message);
|
||
this.attentionMemberList();
|
||
})
|
||
},
|
||
removeFavorite(id) {
|
||
console.log(id)
|
||
this.$u.api.removeFavorite({
|
||
id: id,
|
||
type: 'store'
|
||
}).then(res => {
|
||
this.$u.toast(res.message);
|
||
if(res.errCode == 0) {
|
||
this.sstatus = "loadmore"
|
||
this.spage = 1
|
||
this.shangjiaapi();
|
||
}
|
||
})
|
||
},
|
||
toDetailsPage(id) {
|
||
this.$u.route('pageC/merchant/index', {
|
||
id: id
|
||
});
|
||
},
|
||
open(index) {
|
||
// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
|
||
// 原本为'false'，再次设置为'false'会无效
|
||
this.shangjia[index].show = true;
|
||
this.shangjia.map((val, idx) => {
|
||
if(index != idx) this.list[idx].show = false;
|
||
})
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.store {
|
||
background-color: #ECECEC;
|
||
.item {
|
||
padding: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
> image {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
margin-right: 21rpx;
|
||
}
|
||
.title-wrap {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.item-name {
|
||
width: 260rpx;
|
||
font-size: 30rpx;
|
||
color: rgba(51,51,51,1);
|
||
}
|
||
.item-date {
|
||
display: flex;
|
||
align-items: center;
|
||
> image {
|
||
margin-right: 25rpx;
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.concerns {
|
||
background-color: #ECECEC;
|
||
.concerns-container {
|
||
padding: 30rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
// &:not(:nth-child(3n)) {
|
||
// margin-right: 20rpx;
|
||
// }
|
||
margin-left: -20rpx;
|
||
.daren-item{
|
||
width: 215rpx;
|
||
height: 282rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
border-radius: 10rpx;
|
||
overflow: hidden;
|
||
margin-left: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
.head{
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
margin-top: 24rpx;
|
||
background-color: #0f0;
|
||
}
|
||
.name{
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
font-weight: 400;
|
||
margin-top: 23rpx;
|
||
}
|
||
.zhuangtai{
|
||
font-size:22rpx;
|
||
color: #999;
|
||
margin-top: 19rpx;
|
||
}
|
||
.guanzhu{
|
||
width: 130rpx;
|
||
height: 50rpx;
|
||
background-color: #EDEDED;
|
||
font-size: 26rpx;
|
||
line-height: 50rpx;
|
||
color: #fff;
|
||
text-align: center;
|
||
margin-top: 19rpx;
|
||
border-radius: 25rpx;
|
||
}
|
||
.action{
|
||
background: #f3f3f3;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |