parking/src/views/backend/enterprise/coupons/couponstheme/sendDialog.vue

<template>
  <el-dialog title="派发优惠券" v-model="showDialog" width="800px" @close="closeDialog">
    <div style="display: flex;align-items: center">
      <div style="border: #dadada 1px solid;padding: 5px 5px;border-radius: 3px;width: 100px;text-align: center">
        姓名/手机号
      </div>
      <el-input v-model="quickSearch" style="margin-left: 10px;width: 300px" placeholder="请输入会员姓名或手机号"
                clearable
                prefix-icon="el-icon-Search" @change="getData">
      </el-input>
    </div>
    <div style="margin-top: 20px;display: flex;align-items: center;justify-content: space-between">
      <el-button style="margin-left: 0px" type="warning" @click="submit">派发（{{ selectMember.length }}）</el-button>
      <el-radio-group v-model="memberType" @change="getData()">
        <el-radio-button border :label="0">可选</el-radio-button>
        <el-radio-button border :label="1">已派发</el-radio-button>
      </el-radio-group>
    </div>
    <el-table :data="memberList" style="margin-top: 20px" border height="40vh" @selection-change="select">
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="头像" width="100" align="center" header-align="left">
        <template #default="{row}">
          <el-avatar :size="50" :src="row.headPortrait" />
        </template>
      </el-table-column>
      <el-table-column prop="nickName" label="会员" width="160"></el-table-column>
      <el-table-column prop="mobileNumber" label="手机号" width="150"></el-table-column>
      <el-table-column prop="creatorName" label="来源" width="80"></el-table-column>
      <el-table-column prop="lastLoginTime" label="最近登陆时间"></el-table-column>
    </el-table>
    <el-pagination style="background: #ffffff;padding: 20px 20px"
                   v-model:current-page="currentPage"
                   v-model:page-size="pageSize"
                   :page-sizes="[10, 20, 50, 100]"
                   :background="true"
                   layout="sizes, prev, pager, next, jumper"
                   :total="total"
                   @size-change="getData()"
                   @current-change="getData()"
    />


  </el-dialog>
</template>

<script setup>

import { ref } from "vue";
import request from "/@/api/request";
import { coupon } from "/@/api/controllerUrls";
import { ElMessage } from "element-plus";


let showDialog = ref(false);

let memberType = ref(0);
let quickSearch = ref("");
let total = ref(0);
let currentPage = ref(1);
let pageSize = ref(10);
let selectMember = ref([]);


defineExpose({
  open
});


let data = ref({});

function open(event) {
  data.value = event;
  getData();
  showDialog.value = true;
}

let memberList = ref([]);

function getData() {
  request.index(coupon, {
    id: data.value.id,
    quickSearch: quickSearch.value,
    limit: pageSize.value,
    page: currentPage.value,
    memberType: memberType.value
  }, "member").then((res) => {
    if (res.code == 1) {
      memberList.value = res.data.list;
      total.value = +res.data.total;
    }
  });
}

function select(event) {
  selectMember.value = event;
}

function submit() {
  if (selectMember.value.length == 0) {
    ElMessage({ type: "warning", message: "请选择派发对象！", grouping: true });
    return;
  }
  let ids = [];
  selectMember.value.map(value => {
    ids.push(value.id);
  });
  request.edit(coupon, {
    id: data.value.id,
    ids: ids
  }, "distribution").then((res) => {
    if (res.code == 1) {
      getData()
    }
  });
}

const emit = defineEmits(["close"]);

function closeDialog() {
  emit("close");
}


</script>

<style scoped>

</style>