陶杰
2025-01-19 87a56274d598af9842b593ec972f517161f60707
sub_pages/customer/self/follow.vue
@@ -1,118 +1,135 @@
<template>
  <view class="follow-page">
    <view class="follow-item m-b-40" v-for="(item,index) of list" :key="index">
      <image class="avatar img100" :src="item.avatar" mode="aspectFill"></image>
      <view class="info">
        <view class="name">{{ item.supplierName }}</view>
        <view class="time">{{ item.createTime }}</view>
      </view>
      <view class="m-l-a m-r-0 flex">
        <view class="button button-1" @click="clearFollow(item)">取消关注</view>
        <view class="button button-2" @click="toDetail(item)">进店</view>
      </view>
    </view>
  </view>
   <view class="follow-page">
      <no-data v-if="!list||list.length===0" style="width: 100%;"></no-data>
      <view class="follow-item m-b-40 flex" v-for="(item,index) of list" :key="index">
         <image class="avatar img100" :src="item.cover" mode="aspectFill"  @click="toDetail(item)"></image>
         <view class="info"  @click="toDetail(item)">
            <view class="name">{{ item.supplierName }}</view>
            <view class="time">{{ item.createTime }}</view>
         </view>
         <view class="m-l-a m-r-0 flex">
            <view class="button button-1" @click="clearFollow(item)">取消关注</view>
            <view class="button button-2" @click="toDetail(item)">进店</view>
         </view>
      </view>
   </view>
</template>
<script>
export default {
  data() {
    return {}
  },
  async onPullDownRefresh() {
    await this.refreshList()
    uni.stopPullDownRefresh()
  },
  async onShow() {
    if (this.sign['follow']) {
      await this.$store.dispatch('sign_clear', 'follow');
      this.refreshList()
    }
  },
  async onLoad() {
    await this.$store.dispatch('sign_clear', 'follow');
    this.listApi = '/api/follow/list'
    this.getList()
  },
  methods: {
    toDetail(item) {
      uni.navigateTo({
        url: '/sub_pages/customer/shop/shop?id=' + (item.id || '')
      })
    },
    async clearFollow(item) {
      this.$message.showLoading()
      const {code} = await this.$http.request('get', `/api/follow/delete`, {
        params: {
          supplierId: item.id
        }
      })
      this.$message.hideLoading()
      if (code === 0) {
        //删除list里的本元素
        for (var i = 0; i < this.list.length; i++) {
          if (this.list[i].id === item.id) {
            this.list.splice(i, 1)
          }
        }
      }
    },
    getList_after() {
      // uni.
    }
  }
}
   export default {
      data() {
         return {}
      },
      async onPullDownRefresh() {
         await this.refreshList()
         uni.stopPullDownRefresh()
      },
      async onShow() {
         if (this.sign['follow']) {
            await this.$store.dispatch('sign_clear', 'follow');
            this.refreshList()
         }
      },
      async onLoad() {
         await this.$store.dispatch('sign_clear', 'follow');
         this.listApi = '/api/follow/list'
         this.getList()
      },
      methods: {
         toDetail(item) {
            uni.navigateTo({
               url: '/sub_pages/customer/shop/shop?id=' + (item.supplierId || '')
            })
         },
         async clearFollow(item) {
            this.$message.showLoading()
            const {
               code
            } = await this.$http.request('get', `/api/follow/delete`, {
               params: {
                  supplierId: item.supplierId
               }
            })
            this.$message.hideLoading()
            if (code === 0) {
               //删除list里的本元素
               // for (var i = 0; i < this.list.length; i++) {
               //    if (this.list[i].id === item.id) {
               //       this.list.splice(i, 1)
               //    }
               // }
               this.refreshList()
            }
         },
         // getList_after() {
         //    // uni.
         // }
      }
   }
</script>
<style lang="scss" scoped>
.follow-page {
  .follow-item {
    .avatar {
      width: 114rpx;
      height: 114rpx;
      border: 2rpx solid #FFFFFF;
      border-radius: 50%;
      margin-right: 10rpx;
    }
   .follow-page {
      min-height: 99vh;
      .follow-item {
         padding: 30rpx;
         background-color: #FFFFFF;
         margin-bottom: 20rpx;
    .info {
      .name {
        font-weight: 600;
        font-size: 36rpx;
        color: #000000;
        line-height: 50rpx;
      }
         .avatar {
            width: 80rpx;
            height: 80rpx;
            border: 2rpx solid #FFFFFF;
            border-radius: 50%;
            margin-right: 20rpx;
         }
      .time {
        font-weight: 400;
        font-size: 28rpx;
        color: #666666;
        line-height: 40rpx;
      }
    }
         .info {
            .name {
               font-weight: 600;
               font-size: 32rpx;
               color: #000000;
               line-height: 40rpx;
               margin-top: 6rpx;
            }
    .button {
      padding: 14rpx 36rpx;
      text-align: center;
      margin-left: 10rpx;
      font-weight: 400;
      font-size: 24rpx;
      line-height: 60rpx;
            .time {
               font-weight: 400;
               font-size: 24rpx;
               color: #666666;
               line-height: 40rpx;
            }
         }
    }
         .button {
            padding: 14rpx 36rpx;
            text-align: center;
            margin-left: 10rpx;
            font-weight: 400;
            font-size: 24rpx;
            line-height: 30rpx;
            border-radius: 34rpx;
            margin-top: 10rpx;
    .button-1 {
      color: #999999;
      border-radius: 34rpx;
      border: 2rpx solid #999999;
    }
            // min-width: 128rpx;
            height: 30rpx;
    .button-2 {
      border-radius: 34rpx;
      border: 2rpx solid #20613D;
      color: #20613D;
    }
  }
}
</style>
         }
         .button-1 {
            color: #999999;
            border: 2rpx solid #999999;
         }
         .button-2 {
            border: 2rpx solid #20613D;
            color: #20613D;
         }
      }
   }
</style>