lcoco/pages/my/set/blacklist.vue

<template>
  <view class="blacklist-box">
    <en-nav title="黑名单" :title-color="'#333'"   @navHeight="setNavHeight"></en-nav>
    <scroll-view  class="blacklist-list" :scroll-y="true"  :scroll-x="true" :style="{'height':'calc(100% - '+navHeight+'rpx)'}">
      <view class="blacklist-item" v-for="(item,i) in list">
        <view class="blacklist-left">
          <image class="blacklist-img" src="/static/img/temporary/4.png" mode="aspectFill"></image>
        </view>
        <view class="blacklist-right">
          <view class="blacklist-title">
            <view class="title-text sys-color-black sys-weight-600 sys-height-44">江小明</view>
            <view class="title-icon" @click.stop="showDel(item,i)">
              <text class="iconfont sys-height-44 sys-color-black">&#xe74b;</text>
            </view>
          </view>
          <view class="blacklist-text">
            <view class="text-item sys-color-gray-9">女/24/天瓶座</view>
            <view class="text-item sys-color-gray-9">2023/04/24</view>
          </view>
        </view>
      </view>
    </scroll-view>
    <en-blank v-if="list<=0"></en-blank>
    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog type="center" cancelText="取消"
                        confirmText="确定" title="移除黑名单" content="是否移除黑名单"
                        @confirm="delBlackItem()"
                        @close="close()"></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import EnNav from "@/components/en-utils/en-nav/en-nav";
import {delBlackItem, getBlackList} from "@/api/my";
import tools from "@/service/tools";
import EnBlank from "@/components/en-utils/en-blank/en-blank";
export default {
  components: {EnBlank, EnNav},
  data() {
    return {
      navHeight:0,
      list:[],
      isAjax:false,
      total:undefined,
      page:1,
      selectItem:{},
      selectIndex:0,
    }
  },
  mounted() {
    this.startList()
  },
  methods: {
    setNavHeight(navHeight){
      this.navHeight=navHeight
    },
    close(){
      this.isPop = false;
      this.$refs.alertDialog.close()
    },
    showDel(selectItem,selectIndex){
      this.selectItem=selectItem
      this.selectIndex=selectIndex
      this.$refs.alertDialog.open()
    },
    delBlackItem(){
      delBlackItem(this.selectItem.id).then((res)=>{
        if(res.code===1){
          tools.success('取消成功')
          this.close()
          this.list.splice(this.selectIndex,1)

        }else {
          tools.error(res.msg)
        }
      })
    },
    startList(){
      if(this.userId<=0){
        // return false
      }
      this.list=[]
      this.isAjax=false
      this.total=undefined
      this.page=1
      this.getBlackList()


    },
    getBlackList(){
      if(this.isAjax){
        return
      }
      this.isAjax=true
      let that=this
      getBlackList({'pageNo':this.page,'pageSize':'20'}).then((res)=>{
        this.isAjax=false
        if(res.code===0){
          res.data.data.forEach((item)=>{
            that.list.push(item )
          })
          ++that.page
          that.total=res.data.total
        }
      })
    },

  }
}
</script>

<style scoped lang="scss">
.blacklist-box{
  height: 100vh;
  padding: 0 32rpx;
  overflow-x: auto;
  .blacklist-list{
    width: calc(100vw - 64rpx);
  }

  .blacklist-item{
    width: calc(100vw - 64rpx);
    display: flex;
    justify-content: space-between;

    .blacklist-left{
      padding: 32rpx 0;
      margin-right: 28rpx;
      .blacklist-img{
        border-radius: 50%;
        width: 96rpx;
        height: 96rpx;
      }
    }
    .blacklist-right{

      padding: 32rpx 0;
      width: calc(100% - 124rpx);
      border-bottom: 1rpx solid #F2F2F2;
      .blacklist-title{
        display: flex;
        justify-content: space-between;
        height: 44rpx;
        .title-text{
          font-size: 32rpx;
        }
        .title-icon{
          .iconfont{
            font-size:  24rpx;
          }
        }
      }
      .blacklist-text{
        display: flex;
        justify-content: space-between;
        margin-top: 4rpx;
        .text-item{
          font-size: 28rpx;
        }
      }
    }
  }
}

</style>