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.
336 lines
9.6 KiB
336 lines
9.6 KiB
<template>
|
|
<view class="my-interest">
|
|
<view class="my-interest-h-title flex j-evenly bg-color-white">
|
|
<block v-for="(item, idx) in heartitleList" :key="idx">
|
|
<view class="my-interest-h-title-tx " @click="selectTitle(idx)">
|
|
<text>{{item }}</text>
|
|
<view v-if="sleIndex == idx" class="actives" :style="{'background-color': t('color1')}"></view>
|
|
</view>
|
|
</block>
|
|
|
|
</view>
|
|
<view class="my-interest-user" v-if="sleIndex == 0">
|
|
<block v-for="(item, idx) in userList" :key="item.id" >
|
|
<view class="topic-box flex j-between al-item-center" >
|
|
<view class="my-interest-conton flex al-item-center text-overflow-tx" @tap="goto" :data-url="'/diary/info/info?id=' + item.id">
|
|
<image v-if="item.headimg" class="conton-img border-rius-r" :src="item.headimg" mode=""></image>
|
|
<text v-else style="font-size: 90rpx; color: #ccc;" class="iconfont icon-tupianjiazaishibai"></text>
|
|
<view class="conton-tex overflow-hd flex flex-colum j-between flex1 ">
|
|
<view class="font-w text-overflow-tx conton-tex-tlt">{{item.nickname}}</view>
|
|
<text class="color-gray text-overflow-tx fs12">笔记·{{item.luntan_count}} | 粉丝·{{item.fans_count}}</text>
|
|
</view>
|
|
</view>
|
|
<text v-if="item.is_member_follow == 0" class="concern-btn color-white border-rius-5" :style="{'background-color': t('color1')}" @click="attention(item.id, idx, 'user')">关注</text>
|
|
<view v-else class="concern-btn border-rius-5" :style="{'border-color':t('color1'), 'color':t('color1')}" @click="attention(item.id, idx, 'user')">
|
|
已关注
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
<view class="my-interest-topic overflow-hd" v-if="sleIndex == 1">
|
|
<block v-for="(item, idx) in topicList" :key="item.id">
|
|
<view class="topic-box flex j-between al-item-center" >
|
|
<view class="my-interest-contx flex al-item-center" @click="goto" :data-url="'/diary/topic/topic?id='+item.id">
|
|
<text class="tip-c-l-img-t color-white" :style="{'background-color': t('color1')}">#</text>
|
|
<view class="conton-tex overflow-hd flex flex-colum j-between flex1">
|
|
<view class="font-w text-overflow-tx conton-tex-tlt">{{item.topic_name}}</view>
|
|
<text class="color-gray text-overflow-tx fs12">话题·{{item.member_count}}人参与讨论</text>
|
|
</view>
|
|
</view>
|
|
<text v-if="item.is_member_follow == 0" class="concern-btn color-white border-rius-5" :style="{'background-color': t('color1')}" @click="attention(item.id, idx, 'topic')">关注</text>
|
|
<view v-else class="concern-btn border-rius-5" :style="{'border-color':t('color1'), 'color':t('color1')}" @click="attention(item.id, idx, 'topic')">
|
|
已关注
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
<view class="my-interest-sorte overflow-hd" v-if="sleIndex == 2">
|
|
<block v-for="(item, idx) in sorteList" :key="item.id">
|
|
<view class="my-interest-sorte-bx bg-color-white border-rius-5">
|
|
<view class=" flex j-between al-item-center">
|
|
<view class="my-interest-contx flex al-item-center">
|
|
<image v-if="item.logo" class="sorte-img border-rius-5" :src="item.logo" mode=""></image>
|
|
<text v-else style="font-size: 80rpx; color: #ccc;" class="iconfont icon-tupianjiazaishibai"></text>
|
|
<view class="conton-tex overflow-hd flex flex-colum j-between flex1">
|
|
<view class="font-w conton-tex-tlt text-overflow-tx">{{item.name}}</view>
|
|
<text class="color-gray text-overflow-tx fs12">关注数{{item.fans_count}}</text>
|
|
</view>
|
|
</view>
|
|
<text class="concern-btn color-white border-rius-5" :style="{'background-color': t('color1')}" @tap="goto" :data-url="'/pagesA/shop/index?id=' + item.id">进店</text>
|
|
</view>
|
|
<view class="flex flex-w">
|
|
<block v-for="(data, nm) in item.prolist" :key="nm">
|
|
<view class="sorte-gs flex">
|
|
<image v-if="data.pic" class="sorte-gs-img border-rius-5" :src="data.pic" mode=""></image>
|
|
<view v-else style="width: 150rpx;height: 150rpx;text-align: center;line-height: 150rpx;">
|
|
<text style="font-size: 80rpx; color: #ccc;" class="iconfont icon-tupianjiazaishibai"></text>
|
|
</view>
|
|
<view class="sorte-gs-tx border-rius-5 color-white fs12">¥{{data.sell_price}}</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
<loading v-if="loading"></loading>
|
|
<nomore v-if="!isData"></nomore>
|
|
<!-- 悬浮按钮 -->
|
|
<drag-button></drag-button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
var app = getApp();
|
|
export default {
|
|
data(){
|
|
return {
|
|
loading:false,
|
|
isData: true,
|
|
sleIndex: 0,
|
|
heartitleList: ['用户','话题','店铺'],
|
|
pages:1,
|
|
userList: [],
|
|
topicList: [],
|
|
sorteList:[]
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getUserList()
|
|
},
|
|
onReachBottom() {
|
|
if(this.sleIndex == 0 && this.isData) {
|
|
this.getUserList()
|
|
}else if(this.sleIndex == 1 && this.isData) {
|
|
this.getTopicList()
|
|
}else if(this.sleIndex == 2 && this.isData) {
|
|
this.getSorteList()
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
selectTitle(num) {
|
|
this.sleIndex = num
|
|
this.pages = 1
|
|
this.isData = true
|
|
this.userList = []
|
|
this.topicList = []
|
|
this.sorteList = []
|
|
if(this.sleIndex == 0) {
|
|
this.getUserList()
|
|
}else if(this.sleIndex == 1) {
|
|
this.getTopicList()
|
|
}else {
|
|
this.getSorteList()
|
|
}
|
|
},
|
|
// 点击关注
|
|
attention(id, idxs, type) {
|
|
// type -> 用户 user 话题 topic
|
|
app.post('ApiMy/addFollow',{follow_id:id,type:type}, res => {
|
|
if(res.msg == '已关注') {
|
|
if(type == 'user') {
|
|
this.userList[idxs].is_member_follow = 1
|
|
}else {
|
|
this.topicList[idxs].is_member_follow = 1
|
|
}
|
|
|
|
// this.$forceUpdate()
|
|
}else {
|
|
if(type == 'user') {
|
|
this.userList[idxs].is_member_follow = 0
|
|
}else {
|
|
this.topicList[idxs].is_member_follow = 0
|
|
}
|
|
// this.$forceUpdate()
|
|
}
|
|
})
|
|
},
|
|
|
|
// 用户列表
|
|
getUserList() {
|
|
this.loading = true
|
|
app.post('ApiMy/followList',{pagenum:this.pages,type:'user'}, res => {
|
|
this.loading = false
|
|
if(res.datalist.length > 0) {
|
|
this.userList= [...this.userList, ...res.datalist]
|
|
this.pages++
|
|
}else {
|
|
this.isData = false
|
|
}
|
|
})
|
|
},
|
|
// 话题列表
|
|
getTopicList() {
|
|
this.loading = true
|
|
app.post('ApiMy/followList',{pagenum:this.pages,type:'topic'}, res => {
|
|
this.loading = false
|
|
if(res.datalist.length > 0) {
|
|
this.topicList= [...this.topicList, ...res.datalist]
|
|
this.pages++
|
|
}else {
|
|
this.isData = false
|
|
}
|
|
})
|
|
},
|
|
// 店铺列表
|
|
getSorteList() {
|
|
this.loading = true
|
|
app.post('ApiMy/followList',{pagenum:this.pages,type:'store'}, res => {
|
|
this.loading = false
|
|
if(res.datalist.length > 0) {
|
|
this.sorteList= [...this.sorteList, ...res.datalist]
|
|
this.pages++
|
|
}else {
|
|
this.isData = false
|
|
}
|
|
})
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.my-interest {
|
|
|
|
.flex {display: flex;}
|
|
.flex1 {flex: 1;}
|
|
.j-center {justify-content: center;}
|
|
.j-between {justify-content: space-between;}
|
|
.j-around {justify-content: space-around;}
|
|
.j-evenly {justify-content: space-evenly;}
|
|
.flex-colum{flex-direction: column;}
|
|
.flex-w{flex-wrap: wrap;}
|
|
.al-item-center {align-items: center;}
|
|
.font-w {font-weight: bold;}
|
|
.fs12 {font-size: 24rpx;}
|
|
.color-gray {color: #999;}
|
|
.color-white{color: #fff;}
|
|
.bg-color-white {background-color: #fff;}
|
|
.border-rius-r {border-radius: 800rpx;}
|
|
.border-rius-5 {border-radius: 10rpx;}
|
|
.border-rius-10 {border-radius: 20rpx;}
|
|
.overflow-hd {overflow: hidden;}
|
|
.text-overflow-tx {text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
|
|
.text-overflow-line { display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;word-wrap: break-word;word-break: break-all;}
|
|
|
|
.my-interest-h-title {
|
|
height: 80rpx;
|
|
padding: 20rpx 0;
|
|
.my-interest-h-title-tx {
|
|
padding: 0 10rpx;
|
|
position: relative;
|
|
}
|
|
.actives {
|
|
width: 100%;
|
|
height: 6rpx;
|
|
display: block;
|
|
position: absolute;
|
|
border-radius: 2rpx;
|
|
bottom: -10rpx;
|
|
left: 0;
|
|
// background-color: #EFBD6F;
|
|
}
|
|
}
|
|
|
|
|
|
// 用户
|
|
.my-interest-user {
|
|
padding: 20rpx;
|
|
.topic-box {
|
|
margin-top: 28rpx;
|
|
}
|
|
.topic-box:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.my-interest-conton {
|
|
width: 80%;
|
|
// height: 90rpx;
|
|
// margin-top: 28rpx;
|
|
|
|
.conton-img {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
.conton-tex {
|
|
height: 80rpx;
|
|
padding-left: 30rpx;
|
|
|
|
.conton-tex-tlt {
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
.concern-btn {
|
|
width: 124rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
border-width: 2rpx ;
|
|
border-style: solid;
|
|
}
|
|
// 话题
|
|
.my-interest-topic {
|
|
padding: 0 20rpx 20rpx;
|
|
.topic-box {
|
|
margin-top: 28rpx;
|
|
}
|
|
.my-interest-contx {
|
|
width: 80%;
|
|
.tip-c-l-img-t {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// 店铺
|
|
.my-interest-sorte {
|
|
padding: 0 20rpx 20rpx;
|
|
|
|
.my-interest-sorte-bx {
|
|
padding: 20rpx;
|
|
margin-top: 30rpx;
|
|
|
|
.my-interest-contx {
|
|
overflow: hidden;
|
|
width: 80%;
|
|
}
|
|
.sorte-img {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
}
|
|
|
|
.sorte-gs:nth-child(4n + 1) {
|
|
margin-left: 0;
|
|
}
|
|
.sorte-gs {
|
|
padding-top: 20rpx;
|
|
margin-left: calc((100% - 600rpx) / 3);
|
|
position: relative;
|
|
.sorte-gs-img {
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
}
|
|
.sorte-gs-tx {
|
|
padding: 2rpx 16rpx;
|
|
position: absolute;
|
|
bottom: 2rpx;
|
|
right: 6rpx;
|
|
background-color: rgba(153, 153, 153, .7);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|