web-zk-h5/pages/specialMember/list.vue

<template>
  <view class="contain">
    <view class="kuang">

      <view class="kuang_i tit2">
        <view>{{ '会员姓名' }}</view>
        <view>{{ '联系方式' }}</view>
      </view>
      <view v-for="item,index in tableData"
            :class="[index%2?'kuang_ii':'kuang_i']">
        <view>{{ item.memberName }}</view>
        <view>{{ item.phone }}</view>
      </view>

    </view>
    <u-button class="export"
              @click="handleExport"
              type="warning"
              text="导出"></u-button>
  </view>
</template>

<script>
import * as api from '@/config/regiest'
import { saveAs } from 'file-saver'
import { getToken, removeToken } from '@/config/auth.js'

export default {
  data() {
    return {
      tableData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 50,
      },
      total: 0,
      recName: '',
      recPhone: '',
    }
  },
  onLoad(options) {
    this.recName = options.recName
    this.recPhone = options.recPhone
    this.getDataList()
  },
  onReachBottom() {
    this.queryParams.pageNum++
    this.getDataList()
  },
  methods: {
    getDataList() {
      api
        .specialList(
          Object.assign(
            {
              recName: this.recName,
              recPhone: this.recPhone,
            },
            this.queryParams
          )
        )
        .then((res) => {
          if (res.code == 200) {
            this.tableData = this.tableData.concat(res.rows)
            this.total = res.total
          }
        })
    },
    /** 导出按钮操作 */
    handleExport() {
      uni.request({
        url:
          uni.$u.http.config.baseURL +
          '/member/api/member-special/special-export',
        responseType: 'arraybuffer',//接收格式
        method: 'POST',
        data: {
          recName: this.recName,
          recPhone: this.recPhone,
        },
        header: {
          'Content-Type': 'application/x-www-form-urlencoded',
          Authorization: getToken(),
        },
        success: async (data) => {
          const blob = new Blob([data.data])
          let a = document.createElement('a')
          let href = window.URL.createObjectURL(blob) //创建下载的链接
          a.href = href
          a.download = `${'会员信息'}${new Date().getTime()}.xlsx` //下载后文件名
          document.body.appendChild(a)
          a.click() //点击下载
          document.body.removeChild(a) //下载完成移除元素
          window.URL.revokeObjectURL(href) //释放掉blob对象
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.contain {
  background: #fff;
}
.tit2 {
  background: #eee;
  padding: 10rpx 20rpx;
}
.kuang {
  padding: 20rpx 40rpx 120rpx 40rpx;
}
.kuang_i {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6rpx 20rpx;
}
.kuang_ii {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6rpx 20rpx;
  background: #eee;
}
.export {
  // width: 25%;
  position: fixed;
  bottom: 0%;
}
</style>