From 4145acebe6a7eefec9d8c34807d559488f253e08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=8F?= <1978476055@qq.com>
Date: Thu, 28 Nov 2024 16:17:17 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B3=A8=E9=94=80=E5=88=97=E8=A1=A8=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/user/cancel/index.vue | 765 ++++++++++++++++++++++++++++++++
 1 file changed, 765 insertions(+)
 create mode 100644 src/views/user/cancel/index.vue

diff --git a/src/views/user/cancel/index.vue b/src/views/user/cancel/index.vue
new file mode 100644
index 0000000..deaf038
--- /dev/null
+++ b/src/views/user/cancel/index.vue
@@ -0,0 +1,765 @@
+<template>
+  <div class="divBox">
+    <div class="selCard">
+      <el-form
+        :model="userFrom"
+        ref="searchForm"
+        inline
+        size="small"
+        label-width="85px"
+      >
+        <div class="acea-row search-form">
+          <div>
+            <el-form-item label="关键字：">
+              <el-input
+                placeholder="请输入名字,账户,手机号"
+                v-model="userFrom.keyword"
+                class="input-with-select selWidth"
+                clearable
+              >
+                <!-- <el-select
+                  v-model="select"
+                  slot="prepend"
+                  clearable
+                  placeholder="请选择"
+                >
+                  <el-option label="全部" value="">全部</el-option>
+                  <el-option label="真实姓名" value="real_name"
+                    >真实姓名</el-option
+                  >
+                  <el-option label="手机号" value="phone">手机号</el-option>
+                </el-select> -->
+              </el-input>
+            </el-form-item>
+            <el-form-item
+              label="身份证号码："
+              prop="card_id"
+              label-width="100px"
+            >
+              <el-input
+                placeholder="请输入身份证号码"
+                v-model="userFrom.card_id"
+                clearable
+              ></el-input>
+            </el-form-item>
+          </div>
+          <el-form-item class="search-form-sub">
+            <el-button type="primary" size="small" @click="changeSearch(1)"
+              >搜索</el-button
+            >
+            <el-button size="small" @click="searchReset()">重置</el-button>
+          </el-form-item>
+        </div>
+      </el-form>
+    </div>
+    <el-card class="mt14">
+      <el-table
+        v-loading="listLoading"
+        :data="tableData.data"
+        size="small"
+        highlight-current-row
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column prop="uid" label="ID" min-width="60" />
+        <!-- <el-table-column prop="number" label="ID号" min-width="60" /> -->
+        <el-table-column prop="phone" label="手机号" min-width="120" />
+        <el-table-column prop="real_name" label="真实姓名" min-width="120" />
+        <el-table-column prop="card_id" label="身份证" min-width="100" />
+        <el-table-column prop="create_time" label="注册时间" min-width="120" />
+        <el-table-column prop="zhuce_time" label="注销时间" min-width="120" />
+        <el-table-column prop="admin_name" label="操作人" min-width="80" />
+      </el-table>
+      <div class="block">
+        <el-pagination
+          background
+          :page-size="userFrom.limit"
+          :current-page="userFrom.page"
+          layout="total, prev, pager, next, jumper"
+          :total="tableData.total"
+          @size-change="handleSizeChange"
+          @current-change="pageChange"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import {
+  backupinfoLstApi,
+  groupLstApi,
+  labelLstApi,
+  extendInfo,
+  exportUserApi,
+  userInfoSelectApi,
+  userMemberListApi,
+  sysVerifyCodeApi,
+  cancelUserApi,
+} from "@/api/user";
+import newsCategory from "@/components/newsCategory/index.vue";
+import createWorkBook from "@/utils/newToExcel.js";
+const checkMobile = (rule, value, cb) => {
+  const regMobile = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
+  if (regMobile.test(value)) {
+    // 合法的手机号码
+    return cb();
+  }
+  cb(new Error("手机号码格式不正确"));
+};
+export default {
+  name: "UserList",
+  components: {
+    newsCategory,
+  },
+  data() {
+    return {
+      moren: require("@/assets/images/f.png"),
+      verifyCode: false,
+      verifyInfo: "",
+      verify: {
+        phone: "",
+      },
+      select: "",
+      keywords: "",
+      timeVal: [],
+      timeVal2: [],
+      selectList: [],
+      drawer: false,
+      maxCols: 3,
+      isShowSend: true,
+      visible: false,
+      user_type: "",
+      tableData: {
+        data: [],
+        total: 0,
+      },
+      uid: "",
+      listLoading: true,
+      multipleSelection: [],
+      ids: "",
+      wechatIds: "",
+      uid: "",
+      labelPosition: "right",
+      userProps: {
+        children: "children",
+        label: "name",
+        value: "name",
+      },
+      userFrom: {
+        label_id: "",
+        user_type: "",
+        keyword: "",
+        member_level: "",
+        sex: "",
+        is_promoter: "",
+        country: "",
+        pay_count: "",
+        user_time_type: "",
+        user_time: "",
+        nickname: "",
+        phone: "",
+        province: "",
+        city: "",
+        is_svip: "",
+        page: 1,
+        limit: 20,
+        group_id: "",
+        fields_type: "",
+        fields_value: "",
+      },
+      address: [],
+      grid: {
+        xl: 8,
+        lg: 12,
+        md: 12,
+        sm: 24,
+        xs: 24,
+      },
+      grid2: {
+        xl: 18,
+        lg: 16,
+        md: 12,
+        sm: 24,
+        xs: 24,
+      },
+      grid3: {
+        xl: 8,
+        lg: 12,
+        md: 12,
+        sm: 24,
+        xs: 24,
+      },
+      addresData: [],
+      groupList: [],
+      labelLists: [],
+      memberList: [],
+      chkName: "",
+      checkedIds: [], // 订单当前页选中的数据
+      noChecked: [], // 订单全选状态下当前页不选中的数据
+      checkedPage: [],
+      visibleCoupon: false,
+      visibleDistributor: false,
+      couponForm: {
+        用户标签: "",
+        用户类型: "",
+        性别: "",
+        // 身份: '',
+        消费情况: "",
+        访问情况: "",
+        访问时间: "",
+        昵称: "",
+      },
+      allCheck: false,
+      cancel_time: null,
+      createDrawer: false,
+      is_promoter: 0,
+    };
+  },
+  mounted() {
+    this.groupLists();
+    this.getTagList();
+    this.getMemberList();
+    this.getSelectList();
+    this.getList("");
+  },
+  methods: {
+    /**重置 */
+    searchReset() {
+      this.timeVal = [];
+      this.timeVa2 = [];
+      this.userFrom.user_time = "";
+      this.userFrom.birthday = "";
+      this.select = "";
+      this.keywords = "";
+      this.$refs.searchForm.resetFields();
+      this.changeSearch(1);
+    },
+    cancellationUser(row) {
+      this.$confirm("此操作将注销账号, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          cancelUserApi(row.uid).then((res) => {
+            if (res.status == 200) {
+              this.$message({
+                type: "success",
+                message: res.message,
+              });
+              this.getList(1);
+            }
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消注销",
+          });
+        });
+    },
+    handleRefer() {
+      this.$refs["verify"].validate((valid) => {
+        if (valid) {
+          sysVerifyCodeApi(this.verify)
+            .then((res) => {
+              if (res.status == 200) {
+                this.verifyInfo = res.message;
+              } else {
+                this.verifyInfo = "";
+                this.$message.warning(res.message);
+              }
+            })
+            .catch((res) => {
+              this.verifyInfo = "";
+              this.$message.error(res.message);
+            });
+        }
+      });
+    },
+    changeSearch(num) {
+      this.userSearchs(num);
+      //   this.resetSearchVal();
+      //   switch (this.select) {
+      //     case "uid":
+      //       this.userFrom.uid = this.keywords;
+      //       this.userSearchs(num);
+      //       break;
+      //     case "nickname":
+      //       this.userFrom.nickname = this.keywords;
+      //       this.userSearchs(num);
+      //       break;
+      //     case "phone":
+      //       this.userFrom.phone = this.keywords;
+      //       this.userSearchs(num);
+      //       break;
+      //     default:
+      //       this.userFrom.keyword = this.keywords;
+      //       this.userSearchs(num);
+      //       break;
+      //   }
+    },
+    resetSearchVal() {
+      this.userFrom.phone = "";
+      this.userFrom.nickname = "";
+      this.userFrom.uid = "";
+      this.userFrom.keyword = "";
+    },
+    // 用户
+    onHandle(name) {
+      this.chkName = this.chkName === name ? "" : name;
+      this.changeType(!(this.chkName === ""));
+    },
+    changeType(v) {
+      if (v) {
+        if (!this.chkName) {
+          this.chkName = "dan";
+        }
+      } else {
+        this.chkName = "";
+        this.allCheck = false;
+      }
+      const index = this.checkedPage.indexOf(this.userFrom.page);
+      if (this.chkName === "dan") {
+        this.checkedPage.push(this.userFrom.page);
+      } else if (index > -1) {
+        this.checkedPage.splice(index, 1);
+      }
+
+      this.syncCheckedId();
+    },
+    syncCheckedId() {
+      const ids = this.tableData.data.map((v) => {
+        if (!v.cancel_time) {
+          return v.uid;
+        }
+      });
+      if (this.chkName === "duo") {
+        this.checkedIds = [];
+        this.allCheck = true;
+      } else if (this.chkName === "dan") {
+        this.allCheck = false;
+        ids.forEach((id) => {
+          const index = this.checkedIds.indexOf(id);
+          if (index === -1) {
+            this.checkedIds.push(id);
+          }
+        });
+      } else {
+        ids.forEach((id) => {
+          const index = this.checkedIds.indexOf(id);
+          if (index > -1) {
+            this.checkedIds.splice(index, 1);
+          }
+        });
+      }
+    },
+    // 分开选择
+    changeOne(v, user) {
+      if (v) {
+        if (this.chkName === "duo") {
+          const index = this.noChecked.indexOf(user.uid);
+          if (index > -1) this.noChecked.splice(index, 1);
+        } else {
+          const index = this.checkedIds.indexOf(user.uid);
+          if (index === -1) this.checkedIds.push(user.uid);
+        }
+      } else {
+        if (this.chkName === "duo") {
+          const index = this.noChecked.indexOf(user.uid);
+          if (index === -1) this.noChecked.push(user.uid);
+        } else {
+          const index = this.checkedIds.indexOf(user.uid);
+          if (index > -1) this.checkedIds.splice(index, 1);
+        }
+      }
+    },
+    // 发送优惠券
+    sendCoupon() {
+      if (this.checkedIds.length == 0 && this.allCheck == false) {
+        this.$message.warning("请选择用户");
+      } else {
+        this.visibleCoupon = true;
+      }
+    },
+    // 导出
+    async exportList() {
+      const loading = this.$loading({
+        lock: true,
+        text: "正在拼命导出中，请耐心等待...",
+        spinner: "el-icon-loading",
+        background: "hsla(0, 0%, 100%, .9)",
+      });
+      let excelData = JSON.parse(JSON.stringify(this.userFrom)),
+        data = [];
+      excelData.page = 1;
+      excelData.limit = 500;
+      let pageCount = 1;
+      let lebData = {};
+      for (let i = 0; i < pageCount; i++) {
+        lebData = await this.downData(excelData);
+        pageCount = Math.ceil(lebData.count / excelData.limit);
+        if (lebData.export.length) {
+          data = data.concat(lebData.export);
+          excelData.page++;
+        }
+      }
+      createWorkBook(
+        lebData.header,
+        lebData.title,
+        data,
+        lebData.foot,
+        lebData.filename
+      );
+      loading.close();
+      return;
+    },
+    /**导出用户列表 */
+    downData(excelData) {
+      return new Promise((resolve, reject) => {
+        exportUserApi(excelData).then((res) => {
+          return resolve(res.data);
+        });
+      });
+    },
+    sendSuccess() {
+      this.visibleCoupon = false;
+    },
+    getCoupounParmas() {
+      let label_id = this.userFrom.label_id == "" ? "" : this.getLabelValue(),
+        user_type = this.findKey(this.userFrom.user_type, {
+          "": "",
+          微信用户: "wechat",
+          小程序用户: "routine",
+          H5用户: "h5",
+        }),
+        sex = this.findKey(this.userFrom.sex, {
+          男: "1",
+          女: "2",
+          保密: "0",
+          "": "",
+        }),
+        pay_count = this.findKey(this.userFrom.sex, {
+          "0次": "-1",
+          "1次以上": "0",
+          "2次以上": "1",
+          "3次以上": "2",
+          "4次以上": "3",
+          "5次以上": "4",
+          "": "",
+        }),
+        is_promoter = this.findKey(this.userFrom.is_promoter, {
+          邀请员: "1",
+          普通用户: "0",
+          "": "",
+        }),
+        user_time_type =
+          this.userFrom.user_time_type == "visit"
+            ? "最后访问"
+            : this.userFrom.user_time_type == "add_time"
+            ? "首次访问"
+            : "";
+      this.couponForm = {
+        用户标签: label_id,
+        用户类型: user_type,
+        性别: sex,
+        消费情况: pay_count,
+        // 身份: is_promoter,
+        访问情况: user_time_type,
+        访问时间: this.userFrom.user_time,
+        昵称: this.userFrom.nickname,
+      };
+    },
+    findKey(value, data, compare = (a, b) => a === b) {
+      return Object.keys(data).find((k) => compare(data[k], value));
+    },
+    getLabelValue() {
+      let labelName = "";
+      for (let i = 0; i < this.labelLists.length; i++) {
+        if (this.labelLists[i]["label_id"] === this.userFrom.label_id) {
+          labelName = this.labelLists[i]["label_name"];
+          return labelName;
+        }
+      }
+    },
+    // 具体日期
+    onchangeTime(e) {
+      this.timeVal = e;
+      this.userFrom.user_time = e ? this.timeVal.join("-") : "";
+      this.changeSearch(1);
+    },
+    // 具体日期
+    onchangeTime2(e) {
+      this.timeVal2 = e;
+      this.userFrom.birthday = e ? this.timeVal2.join("-") : "";
+      this.changeSearch(1);
+    },
+    userSearchs(num) {
+      if (this.userFrom.user_time_type && !this.userFrom.user_time) {
+        this.$message.error("请选择访问时间");
+      } else if (!this.userFrom.user_time_type && this.userFrom.user_time) {
+        this.$message.error("请选择访问情况");
+      } else {
+        this.getList(num);
+      }
+    },
+    // 创建用户
+    createUser() {
+      // this.$modalForm(createUserApi()).then(() => this.getList(''))
+      this.createDrawer = true;
+    },
+    // 验证码查询
+    GetverifyCode() {
+      this.verify.phone = "";
+      this.verifyInfo = "";
+      this.verifyCode = true;
+    },
+    // 分组列表
+    groupLists() {
+      groupLstApi({
+        page: 1,
+        limit: 9999,
+      })
+        .then(async (res) => {
+          this.groupList = res.data.list;
+        })
+        .catch((res) => {
+          this.$message.error(res.message);
+        });
+    },
+    // 补充信息搜索
+    getSelectList() {
+      userInfoSelectApi()
+        .then(async (res) => {
+          this.selectList = res.data;
+        })
+        .catch((res) => {
+          this.$message.error(res.message);
+        });
+    },
+    // 标签列表
+    getTagList() {
+      labelLstApi({
+        page: 1,
+        limit: 9999,
+      })
+        .then((res) => {
+          this.labelLists = res.data.list;
+        })
+        .catch((res) => {
+          this.$message.error(res.message);
+        });
+    },
+    // 用户等级列表
+    getMemberList() {
+      userMemberListApi()
+        .then((res) => {
+          this.memberList = res.data;
+        })
+        .catch((res) => {
+          this.$message.error(res.message);
+        });
+    },
+    // 账户详情
+    onDetails(id) {
+      this.drawer = true;
+      this.uid = id;
+      this.cancel_time = this.tableData.data.find(
+        (item) => item.uid === id
+      ).cancel_time;
+      this.$refs.userDetails.getData(id, false, true);
+    },
+    closeDrawer() {
+      this.drawer = false;
+      this.createDrawer = false;
+    },
+    changeDrawer(v) {
+      this.drawer = v;
+    },
+    sendNews() {
+      if (this.checkedIds.length === 0 && this.allCheck == false)
+        return this.$message.warning("请先选择用户");
+      this.visible = true;
+      this.wechatIds = this.getWechatUsers(
+        this.tableData.data,
+        this.checkedIds
+      );
+    },
+    handleClose() {
+      this.visible = false;
+    },
+    /**获取选中的微信用户Id */
+    getWechatUsers(arr1, arr2) {
+      let newArr = [];
+      if (this.allCheck) {
+        for (let i = 0; i < arr1.length; i++) {
+          if (arr1[i]["wechat_user_id"]) {
+            newArr.push(arr1[i]["wechat_user_id"]);
+          }
+        }
+      } else {
+        for (let i = 0; i < arr1.length; i++) {
+          for (let j = 0; j < arr2.length; j++) {
+            if (arr1[i]["uid"] === arr2[j] && arr1[i]["wechat_user_id"]) {
+              newArr.push(arr2[j]);
+            }
+          }
+        }
+      }
+      return newArr;
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+      const data = [];
+      const wechatData = [];
+      this.multipleSelection.map((item) => {
+        data.push(item.uid);
+        wechatData.push(item.wechat_user_id);
+      });
+      this.ids = data.join(",");
+      this.wechatIds = wechatData.join(",");
+    },
+    // 列表
+    getList(num) {
+      this.listLoading = true;
+      this.userFrom.page = num ? num : this.userFrom.page;
+      this.userFrom.user_type = this.user_type;
+      this.userFrom.province = this.address[0];
+      this.userFrom.city = this.address[1];
+      if (this.userFrom.user_type === "0") this.userFrom.user_type = "";
+      backupinfoLstApi(this.userFrom)
+        .then((res) => {
+          this.tableData.data = res.data.list;
+          this.tableData.total = res.data.count;
+          this.listLoading = false;
+          this.getCoupounParmas();
+          // this.checkedIds = [];
+        })
+        .catch((res) => {
+          this.listLoading = false;
+          this.$message.error(res.message);
+        });
+    },
+    pageChange(page) {
+      this.userFrom.page = page;
+      this.changeSearch();
+    },
+    handleSizeChange(val) {
+      this.userFrom.limit = val;
+      this.changeSearch();
+    },
+    // 编辑
+    onEdit(id) {
+      // this.$modalForm(userUpdateApi(id)).then(() => this.getList(''))
+      this.drawer = true;
+      this.uid = id;
+      this.$refs.userDetails.getData(id, true, false);
+    },
+    // 重置
+    reset() {
+      this.userFrom = {
+        label_id: "",
+        user_type: "",
+        sex: "",
+        is_promoter: "",
+        country: "",
+        pay_count: "",
+        user_time_type: "",
+        user_time: "",
+        nickname: "",
+        province: "",
+        city: "",
+        page: 1,
+        limit: 20,
+        group_id: "",
+      };
+      this.timeVal = [];
+      this.changeSearch(1);
+    },
+    // 更新信息
+    extendInfo(row) {
+      this.$modalForm(extendInfo(row.uid)).then(() => this.changeSearch());
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/form.scss";
+.check {
+  color: #00a2d4;
+}
+.btn_bottom {
+  display: flex;
+  justify-content: end;
+}
+.dia ::v-deep .el-dialog__body {
+  height: 700px !important;
+}
+.text-right {
+  text-align: right;
+}
+.minwidth {
+  display: inline-block;
+  max-width: 200px;
+  line-height: 20px;
+}
+.search-form {
+  display: flex;
+  justify-content: space-between;
+  .search-form-box {
+    display: flex;
+    flex-wrap: wrap;
+    flex: 1;
+  }
+  a {
+    color: var(--prev-color-primary);
+  }
+}
+.selWidth {
+  width: 250px !important;
+}
+.search-form-sub {
+  display: flex;
+}
+.container {
+  min-width: 821px;
+}
+.container ::v-deep .el-form-item {
+  width: 100%;
+}
+.container ::v-deep .el-form-item__content {
+  width: 72%;
+}
+.vipName {
+  color: #dab176;
+}
+.el-dropdown-link {
+  cursor: pointer;
+  color: var(--prev-color-primary);
+  font-size: 12px;
+}
+.el-icon-arrow-down {
+  font-size: 12px;
+}
+.demo-table-expand {
+  font-size: 0;
+}
+.demo-table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 33.33%;
+}
+::v-deep .el-date-editor.el-input {
+  width: 100%;
+}
+::v-deep [type="reset"],
+[type="submit"],
+button,
+html [type="button"] {
+  -webkit-appearance: none !important;
+}
+::v-deep .el-input-group__prepend .el-input {
+  width: 100px;
+}
+</style>