paper-shopkeeper-app/pages/my-client/index.vue

<template>
  <view class="content">
    <uni-nav-bar left-icon="back" statusBar @clickLeft="back" fixed title="我的客户"></uni-nav-bar>
    <scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback">
      <view class="list-item flex-col" :key="item.id" v-for="item in list">
        <view class="top-group flex-col items-end">
          <view class="text-wrapper flex-col items-center" :style="{ backgroundColor: item.haveUser ? '' : 'rgb(226, 134, 134)' }">
            <text>{{ item.haveUser ? '已注册' : '未注册' }}</text>
          </view>
          <view class="group_5 flex-row">
            <image src="/static/imgs/client/client-default.png" class="image_4" />
            <view class="right-group flex-col">
              <text class="text_5">{{ item.enterpriseName }}</text>
              <text class="text_6">{{ item.bizScope }}</text>
            </view>
          </view>
        </view>
        <view class="bottom-group justify-between">
          <text class="text_7">{{ item.foundDate | dateFormat }}</text>
          <text class="text_9" @click="go2('client-detail', { id: item.enterpriseId })">查看详情</text>
        </view>
      </view>
    </scroll-list>
  </view>
</template>

<script>
import { go2, back } from '@/utils/hook.js'
import { getMyClientList } from '@/apis/clientListApi.js'

export default {
  data() {
    return {
      pagination: {
        pageNum: 0, // 初始会执行一次下拉加载
        pageSize: 10
      },
      condition: {
        mallSupplierId: this.$store.state.supplierInfo.supplierId
      },
      list: [],
      option: {
        size: 10,
        auto: true,
        emptyText: '暂无数据~',
        background: '#F7F8FA'
      }
    }
  },
  methods: {
    go2,
    back,
    getList() {
      return new Promise((resolve, reject) => {
        getMyClientList({ ...this.condition, ...this.pagination })
          .then((res) => {
            if (res) {
              if (res.current == 1) {
                this.list = res.records
              } else {
                this.list = this.list.concat(res.records)
              }
              resolve({ list: this.list, total: res.total })
            } else {
              reject()
            }
          })
          .catch((err) => {
            reject(err)
          })
      })
    },
    downCallback() {
      this.pagination.pageNum = 1
      this.getList()
        .then(({ list, total }) => {
          this.$refs.list.refreshSuccess({ list, total })
        })
        .catch(() => {
          this.$refs.list.refreshFail()
        })
    },
    upCallback(page) {
      this.pagination.pageNum++
      this.getList()
        .then(({ list, total }) => {
          this.$refs.list.loadSuccess({ list, total })
        })
        .catch(() => {
          this.$refs.list.loadFail()
        })
    }
  },
  filters: {
    dateFormat(value) {
      if (!value) {
        return ''
      }
      return value.replace(/-/g, '/')
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 750rpx;
}
.list-item {
  background-color: rgb(255, 255, 255);
  margin-bottom: 20rpx;
  .top-group {
    padding-bottom: 114rpx;
    border-bottom: solid 2rpx rgb(221, 221, 221);
    position: relative;
    .text-wrapper {
      padding: 5rpx 0;
      color: rgb(255, 255, 255);
      font-size: 28rpx;
      font-weight: 500;
      line-height: 40rpx;
      white-space: nowrap;
      background-color: rgb(134, 226, 223);
      border-radius: 0px 0px 0px 20rpx;
      width: 124rpx;
    }
    .group_5 {
      position: absolute;
      left: 32rpx;
      right: 52rpx;
      top: 24rpx;
      .image_4 {
        width: 100rpx;
        height: 100rpx;
      }
      .right-group {
        margin-left: 20rpx;
        flex: 1 1 auto;
        .text_5 {
          color: rgb(51, 51, 51);
          font-size: 30rpx;
          font-weight: 500;
          line-height: 42rpx;
          white-space: nowrap;
        }
        .text_6 {
          margin-top: 24rpx;
          color: rgb(51, 51, 51);
          font-size: 26rpx;
          line-height: 37rpx;
          white-space: nowrap;
          width: 560rpx;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .bottom-group {
    padding: 19rpx 32rpx 20rpx;
    .text_7 {
      color: rgb(136, 136, 136);
      font-size: 28rpx;
      line-height: 40rpx;
      white-space: nowrap;
    }
    .text_9 {
      color: rgb(0, 122, 255);
      font-size: 28rpx;
      line-height: 40rpx;
      white-space: nowrap;
    }
  }
}
</style>