pad_spa/src/pages/coupon/index.vue

<template>
  <div class="mine">
    <div class="table">
      <el-input
        class="search-input"
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        size="mini"
        v-model="searckItem"
      ></el-input>
      <div class="search-button" @click="getUserList">搜索</div>
      <div class="coupon">选择优惠券</div>
      <el-select
        class="coupon-select"
        v-model="coupon"
        size="mini"
        placeholder="选择优惠券"
      >
        <el-option
          v-for="item in couponList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <div class="num-tips">数量</div>
      <div class="coupon-num">
        <div class="reduce" @click="reduceNum">-</div>
        <div class="num">{{ couponNum }}</div>
        <div class="add" @click="couponNum++">+</div>
      </div>
      <div class="send-coupon" style="margin-left: 39px" @click="sendCoupon">
        发送
      </div>
    </div>
    <div class="user-list">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        height="500"
        style="width: 100%; border-radius: 8px"
        @selection-change="handleSelectionChange"
        @row-click="goDetail"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="头像" width="120">
          <template slot-scope="scope">
            <div class="head-img">
              <img :src="scope.row.avatar_url" alt />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="nickname"
          label="昵称"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="mobile"
          label="联系电话"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="create_time"
          label="注册时间"
          show-overflow-tooltip
        ></el-table-column>
      </el-table>

      <div class="pagin">
        <el-pagination
          background
          layout="prev, pager, next"
          @size-change="handleSizeChange"
          @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 {
      searckItem: "",
      couponList: [],
      tableData: [],
      multipleSelection: [], //选中的列表
      coupon: "",
      couponNum: 1, //优惠券数量
      currentPage1: 1,
      total: 0,
      limit: 10,
    };
  },
  computed: {},
  watch: {},

  methods: {
    // 发券中心点击用户跳转到用户详情
    goDetail(row, column, event) {
      console.log(1);
      this.$router.push({
        path: "/customerMan/details",
        query: {
          id: row.id,
        },
      });
    },
    reduceNum() {
      this.couponNum > 1 ? this.couponNum-- : (this.couponNum = 1);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 发送优惠券
    sendCoupon() {
      let selectIds = "";
      for (let i = 0; i < this.multipleSelection.length; i++) {
        selectIds = selectIds + "," + this.multipleSelection[i].id;
      }
      let params = {
        id: this.coupon,
        user_ids: selectIds.substring(1, selectIds.length),
        num: this.couponNum,
      };
      api.sendCoupon(params).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "发送成功",
            type: "success",
          });
        }
      });
    },

    // 获取订单列表
    getUserList() {
      let params = {
        page: this.currentPage1,
        limit: this.limit,
        keywords: this.searckItem,
      };
      api.getUserList(params).then((res) => {
        if (res.code == 200) {
          // 将用户手机号中间四位变成****
          res.data.list.map((item) => {
            item.mobile =
              item.mobile.substring(0, 3) + "****" + item.mobile.substring(7);
          });
          this.tableData = res.data.list;
          this.total = res.data.total;
        }
      });
    },

    // 获取优惠券列表
    getCouponInfo() {
      let params = {
        page: this.currentPage1,
        limit: 100,
      };
      api.getCouponInfo(params).then((res) => {
        if (res.code == 200) {
          this.couponList = res.data.list;
        }
      });
    },

    handleCurrentChange(e) {
      this.currentPage1 = e;
      this.getUserList();
    },

    handleSizeChange(val) {},
  },

  created() {
    this.getUserList();
    this.getCouponInfo();
  },

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

<style lang='less' scoped>
.mine {
  .table {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
    .search-input {
      width: 152px;
    }
    .search-button,
    .send-coupon {
      margin-left: 16px;
      width: 68px;
      height: 28px;
      line-height: 28px;
      background: #fa7d22;
      border-radius: 2px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      text-align: center;
    }
    .coupon {
      margin-left: 40px;
    }
    .coupon-select {
      margin-left: 12px;
      width: 174px;
    }
    .num-tips {
      margin-left: 40px;
    }
    .coupon-num {
      margin-left: 12px;
      background: #ffffff;
      display: flex;
      div {
        width: 28px;
        height: 28px;
        line-height: 28px;
        text-align: center;
      }
      .reduce,
      .add {
        border: 1px solid #d9d9d9;
        line-height: 26px;
        font-size: 18px;
      }
      .num {
        border-top: 1px solid #d9d9d9;
        border-bottom: 1px solid #d9d9d9;
      }
    }
  }
  .user-list {
    margin-top: 18px;
    padding: 0 12px;
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
    border-radius: 8px;
    .head-img {
      width: 36px;
      height: 36px;
      border-radius: 50%;

      img {
        width: 100%;
        height: 100%;
      }
    }
    .pagin {
      padding: 20px 0;
      .el-pagination {
        text-align: center;
      }
    }
    /deep/ .el-table th > .cell {
      font-size: 14px !important;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 20px;
    }
    /deep/ .el-table td,
    .el-table th.is-leaf {
      border-bottom: none;
    }
  }
}
</style>