pad_spa/src/pages/testSkin/index.vue

<template>
  <div class="mine">
    <div class="condition">
      <el-date-picker
        v-model="dates"
        type="daterange"
        range-separator="->"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>

      <el-input placeholder="请输入内容" class="search" v-model="searchText">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <el-button type="primary" class="searchButton" @click="getSkinList"
        >搜索</el-button
      >
    </div>
    <div class="list">
      <div class="tab">
        <div class="head-img">头像</div>
        <div class="head-name">昵称</div>
        <div class="head-phone">联系电话</div>
        <div class="head-ts">检测时间</div>
        <div class="head-status">状态</div>
      </div>
      <div class="content">
        <div
          class="tab user-info"
          v-for="(item, index) in userList"
          :key="index"
          @click="onDetails(item.id)"
        >
          <div class="head-img"><img :src="item.avatar_url" alt="" /></div>
          <div class="head-name">{{ item.nickname }}</div>
          <div class="head-phone">{{ item.mobile }}</div>
          <div class="head-ts">{{ item.check_time }}</div>
          <div
            class="head-status"
            :style="item.status == 1 ? 'color: #61D09D;' : 'color: #FC3019;'"
          >
            {{ item.status == 1 ? "已面诊" : "未面诊" }}
          </div>
        </div>
      </div>
      <div class="pagin">
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage1"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import api from "../../server/home";
export default {
  components: {},
  data() {
    return {
      dates: [],
      searchText: "",
      userList: [],
      currentPage1: 1,
      limit: 10,
      total: 0,
    };
  },
  computed: {},
  watch: {},

  methods: {
    getSkinList() {
      let start_date = "",
        end_date = "";
      if (this.dates && this.dates.length > 0) {
        start_date = utils.formatTime(this.dates[0], "yyyy-MM-dd");
        end_date = utils.formatTime(this.dates[1], "yyyy-MM-dd");
      }
      let params = {
        page: this.currentPage1,
        limit: this.limit,
        keywords: this.searchText||this.$route.query.id,
        start_date: start_date,
        end_date: end_date,
      };
      api.getSkinList(params).then((res) => {
        if (res.code == 200) {
          // 将用户手机号中间四位变成****
          res.data.list.map((item) => {
            item.mobile =
              item.mobile.substring(0, 3) + "****" + item.mobile.substring(7);
          });
          this.userList = res.data.list;
          this.total = res.data.total;
        }
      });
    },
    onDetails(e) {
      this.$router.push({
        path: "/testSkin/details",
        query: {
          id: e,
        },
      });
    },
    handleCurrentChange(e) {
      this.currentPage1 = e;
      this.getSkinList();
    },
  },

  created() {
    this.getSkinList();
  },

  mounted() {},
};
</script>

<style lang='less' scoped>
.mine {
  .condition {
    display: flex;

    .search {
      width: 152px;
      margin-left: 18px;
    }

    .searchButton {
      margin-left: 18px;
      width: 68px;
      background: #fa7d22;
      border-radius: 2px;
      border-color: #fa7d22;
    }
  }

  .list {
    margin-top: 18px;
    padding: 14px 12px;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
    border-radius: 8px;

    .tab {
      padding-bottom: 9px;
      border-bottom: 1px solid #e6e6e6;
      display: flex;
      align-items: center;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 20px;

      .head-img {
        width: 84px;

        img {
          width: 36px;
        }
      }

      .head-name {
        width: 144px;
      }

      .head-phone {
        width: 192px;
      }

      .head-ts {
        width: 288px;
      }

      .head-status {
      }
    }

    .content {
      border-bottom: 0px;
      padding-top: 14px;
      max-height: 300px;
      overflow: auto;

      .user-info {
        border-bottom: 18px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 22px;
      }
    }

    .el-pagination {
      text-align: center;
      margin-top: 50px;
    }
  }
}
</style>