farming-business-shop-web/src/views/marketing/components/user-dialog.vue

<template>
  <el-dialog
    title="选择用户"
    :visible.sync="dialogVisible"
    width="80%"
    :before-close="handleClose"
  >
    <div>
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="120px"
      >
        <el-form-item label="" prop="key">
          <el-input
            v-model="queryParams.key"
            placeholder="请输入用户ID,用户昵称搜索"
            clearable
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="浏览记录" prop="browseFlag">
          <el-select
            v-model="queryParams.browseFlag"
            placeholder="请选择浏览记录"
            style="width: 240px"
          >
            <el-option label="全部" value=""> </el-option>
            <el-option label="7天内浏览用户" value="7"> </el-option>
            <el-option label="30天内浏览用户" value="30"> </el-option>
            <el-option label="半年内浏览用户" value="180"> </el-option>
            <el-option label="一年内浏览用户" value="365"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下单记录" prop="orderFlag">
          <el-select
            v-model="queryParams.orderFlag"
            placeholder="请选择下单记录"
            style="width: 240px"
          >
            <el-option label="全部" value=""> </el-option>
            <el-option label="30天内下单用户" value="30"> </el-option>
            <el-option label="半年内下单用户" value="180"> </el-option>
            <el-option label="一年内下单用户" value="365"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="推送状态" prop="pushStatus">
          <el-select
            v-model="queryParams.pushStatus"
            placeholder="请选择推送状态"
            style="width: 240px"
          >
            <el-option label="全部" value=""> </el-option>
            <el-option label="未推送" value="0"> </el-option>
            <el-option label="已推送" value="1"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="领取状态" prop="receiveStatus">
          <el-select
            v-model="queryParams.receiveStatus"
            placeholder="请选择领取状态"
            style="width: 240px"
          >
            <el-option label="全部" value=""> </el-option>
            <el-option label="未领取" value="0"> </el-option>
            <el-option label="已领取" value="1"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <el-table
        v-loading="loading"
        :data="tableList"
        @selection-change="handleSelectionChange"
        row-key="id"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="用户ID" align="center" prop="id" />
        <el-table-column label="用户头像" align="center">
          <template slot-scope="scope">
            <el-image
              style="width: 60px; height: 60px"
              :src="scope.row.headUrl"
              :preview-src-list="[scope.row.headUrl]"
            >
            </el-image>
          </template>
        </el-table-column>

        <el-table-column label="用户昵称" align="center" prop="nick" />
        <el-table-column label="浏览记录" align="center" prop="browseRecord">
          <template slot-scope="scope">
            {{
              scope.row.browseRecord
                ? $moment(Number(scope.row.browseRecord)).format("yyyy-MM-DD HH:mm:ss")
                : ""
            }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="距离" align="center" width="120" /> -->
        <el-table-column label="下单记录" align="center" prop="orderRecord">
          <template slot-scope="scope">
            {{
              scope.row.orderRecord
                ? $moment(Number(scope.row.orderRecord)).format("yyyy-MM-DD HH:mm:ss")
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column label="近期推送记录" align="center" prop="topicName" />
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNo"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import moment from "moment";
import * as markApi from "@/api/marketing/index";
export default {
  data() {
    return {
      dialogVisible: false,
      queryParams: {
        browseFlag: "",
        pageNo: 1,
        pageSize: 5,
        orderFlag: "",
        key: "",
        pushStatus: "",
        receiveStatus: "",
      },
      total: 0,
      loading: false,
      tableList: [],
      multipleSelection: [],
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    dialogSubmit() {
      this.$emit("productDialogInfo", this.multipleSelection);
      this.handleClose();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleQuery() {
      this.getList();
    },
    /** 查询参数列表 */
    getList() {
      this.loading = true;
      markApi.selectUserMsg(this.queryParams).then((res) => {
        this.tableList = res.data.records;
        this.total = res.data.total;
        this.loading = false;
      });
    },
    handleClose() {
      this.dialogVisible = false;
    },
    openDialog() {
      this.dialogVisible = true;
      this.getList();
    },
  },
};
</script>

<style>
.el-cascader-panel
  > .el-scrollbar:first-child
  > .el-cascader-menu__wrap
  > .el-cascader-menu__list
  > .el-cascader-node
  > .el-radio {
  display: block;
}
</style>