123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175 |
- <template>
- <view class="myfollow">
- <navbar ref="navbar" :config="config"></navbar>
- <view class="follow">
- <view v-if="myfollow.length>0">
- <view class="item" v-for="(item,index) in myfollow" :key="index" @click="goToDetail(item)">
-
- <image v-if="item.head_photo" :src="item.head_photo" style="border-radius: 50%;" mode=""></image>
- <image v-else :src="imgUrl+'/head-on.png'" style="border-radius: 50%;" mode=""></image>
- <view class="name-and-time">
- <view class="name u-text-width">
- {{item.nickname}}
- </view>
- <view class="time">
- {{item.concern_time}}
- </view>
- </view>
- <view class="cancel" @click.stop="cancelfollow(item)">
- 取消关注
- </view>
- </view>
- <loadMore v-if="myfollow.length>0" :status="status"></loadMore>
- </view>
- <nodata v-else :config="{top:20,content:'暂无关注~'}"></nodata>
- </view>
- <ldLoading isFullScreen :active="loading"></ldLoading>
- </view>
- </template>
- <script>
- import {myConcerns} from "@/api/userInfo.js"
- export default{
- data(){
- return{
- config: {
- back: true, //false是tolbar页面 是则不写
- title: '我的关注',
- color: '#1A1A1A',
- //背景颜色;参数一:透明度(0-1);参数二:背景颜色(array则为线性渐变,string为单色背景)
- backgroundColor: [1, "#FFFFFF"],
- statusBarFontColor: '#1A1A1A',
- },
- myfollow:[] ,//我的关注列表
- params:{
- page:1,
- limit:10,
- },
- totalPage:null,
- currPage:1,
- status:"more",
- noData: false,
- loading: true,
- imgUrl: this.$mConfig.staticUrl
- }
- },
-
- onLoad(options) {
- console.log(options)
- this.params.userId = options.user_id
- this.getData()
- },
- //下拉刷新
- onPullDownRefresh(){
- this.params.page=1
- this.myfollow=[]
- this.getData()
- },
- //上拉加载
- onReachBottom(e){
- if(this.totalPage<=this.currPage){
- this.status = "noMore"
- }else{
- this.status="more"
- this.params.page++
- this.getData()
- }
- },
-
- methods:{
- goToDetail(item){
- console.log(item.user_id)
- uni.navigateTo({
- url:"../community/homepage?user_id="+item.user_id
- })
- },
- getData(){
- this.$http.get(myConcerns,this.params)
- .then(res=>{
- if(res&&res.code==200){
- this.loading = false
- uni.stopPullDownRefresh()
- this.myfollow = this.myfollow.concat(res.page.list)
- if(this.myfollow.length==0){
- this.noData = true
- }else{
- this.noData = false
- }
- this.totalPage = res.page.totalPage
- this.currPage = res.page.currPage
- if(res.page.totalPage<=res.page.currPage){
- this.status = "noMore";
- }else{
- this.status= "more"
- }
- }
- })
- },
- cancelfollow(e){
- let that = this;
- uni.showModal({
- title: '提示',
- content: `您确认要取消关注${e.nickname}吗?`,
- success: async function (res) {
- if (res.confirm) {
- let concerned_user_id =e.user_id
- that.$http.post("/concerns/cancel-concern",{
- concerned_user_id:concerned_user_id
- }).then(res=>{
- if(res&&res.code==200){
- that.$mUtil.toast("取消成功")
- that.myfollow.forEach((item,index) => {
- if(item.user_id == e.user_id) {
- that.myfollow.splice(index,1)
- }
- })
- }
- })
- }
- }
- })
- }
- },
- }
- </script>
- <style lang="scss" scoped>
- .item{
- margin: 30rpx 30rpx 40rpx 30rpx;
- display: flex;
- padding-bottom:40rpx;
- align-items: center;
- border-bottom: 1rpx solid #E6E6E6;
- image{
- width: 100rpx;
- height: 100rpx;
- }
- .name-and-time{
- flex: 1;
- margin-left: 28rpx;
- .name{
- color: #1A1A1A;
- font-size: 28rpx;
- font-weight: Regular;
- }
- .time{
- color: #999999;
- font-size: 24rpx;
- font-weight: Regular;
- margin-top: 10rpx;
- }
- }
- .cancel{
- padding: 12rpx 34rpx;
- color: #ffffff;
- font-size: 28rpx;
- font-weight: Medium;
- background-color: #0B844A;
- border-radius: 32rpx;
-
- }
- }
- </style>
|