gdy_pc_8/src/course/dealerManage/home.vue

<template>
  <div class="page">
    <el-page-header
      @back="$router.go(-1)"
      :content="curTeamTel"
      style="margin-bottom: 20px"
      v-if="!isOuter"
    ></el-page-header>
    <el-header height="40px" style="display: flex; align-items: center">
      <el-button
        type="primary"
        size="normal"
        @click="qropen"
        plain
        v-if="isOuter"
        >经销商邀请二维码</el-button
      >
      <div class="search">
        <!-- @keyup.enter.native="teamSearch" -->
        <el-input
          placeholder="请输入用户名"
          v-model.trim="teamValue"
          @input="teamSearch"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
    </el-header>
    <el-container class="course_data">
      <el-table
        :data="dealerInfo"
        border
        stripe
        highlight-current-row
        v-loading="loading"
      >
        <el-table-column prop="name" label="用户名" align="center">
        </el-table-column>
        <!-- <el-table-column label="微信ID" align="center" min-width="100px">
          <template slot-scope="scope"> {{ scope.row.unionid }} </template>
        </el-table-column> -->
        <el-table-column label="手机号" align="center">
          <template slot-scope="scope"> {{ scope.row.mobile }} </template>
        </el-table-column>
        <el-table-column
          label="TA的团队"
          align="center"
          style="color: #409eff"
          class="outTeam"
          v-if="isOuter"
        >
          <template slot-scope="scope">
            <span
              @click="toDealerTeam(scope.row)"
              style="color: #409eff; cursor: pointer"
              >{{ scope.row.statistics.teamAmount }}</span
            >
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="250" align="center">
          <template slot-scope="scope">
            <!-- <el-button
              type="text"
              size="mini"
              @click="infoEdit(scope.row, scope.$index)"
              >修改信息</el-button
            > -->
            <el-button
              size="mini"
              type="text"
              @click="dealerPay(scope.row, scope.$index)"
              >课程名额修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="proness">
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="curPageChange()"
          :current-page.sync="page.cur"
          :page-size="page.size"
          :total="page.total"
          :hide-on-single-page="false"
        >
        </el-pagination>
      </div>
    </el-container>
    <el-dialog
      title="用户信息修改"
      :visible.sync="eldiForm"
      width="40%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center
      @close="cancleDi"
    >
      <el-form
        :model="dealerForm"
        ref="form"
        label-width="100px"
        :inline="false"
        size="normal"
      >
        <el-form-item label="用户名">
          <el-input v-model="dealerForm.name"></el-input>
        </el-form-item>
        <el-form-item label="绑定微信ID">
          <el-input v-model="dealerForm.unionid"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="dealerForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="cancleDi">取消</el-button>
        <el-button type="primary" @click="confirmSave">保存</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="qrVisible"
      width="400px"
      title="经销商邀请二维码"
      center
      @close="cancleQr"
    >
      <div id="root" style="display: flex;justify-content: center;" ref="qrCodeUrl"></div>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
import { getDealerList } from "../api";
export default {
  name: "dealerManage",
  components: {},
  props: [],
  data() {
    return {
      loading: true,
      qrVisible: false,
      qrcode: null,
      qrcodeStatus: false,
      eldiForm: false,
      dealerForm: {
        id: 0,
        name: "",
        unionid: "",
        mobile: "",
      },
      curTeamTel: "",
      isOuter: false,
      page: {
        total: 0,
        size: 10,
        cur: 1,
      },
      teamValue: "",
      dealerInfo: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    qropen() {
      this.qrVisible = true;
      this.$nextTick(() => {
        this.creatQrCode();
      });
    },
    cancleQr() {},
    creatQrCode() {
      if (!this.qrcodeStatus) {
        console.log(`${process.env.BASE_API}/m/#/courseLogin?pid=0`)
        this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
          text: `${process.env.BASE_API}/m/#/courseLogin?pid=0`, // 需要转换为二维码的内容
          width: 300,
          height: 300,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H,
        });
        this.qrcodeStatus = true;
      }
    },
    //获取经销商列表
    getDealerMap(type=1) {
      let data = {
        page: this.page.cur,
        pageSize: this.page.size,
        marketable: type,
      };
      if (this.$route.params.id) {
        data.pid = this.$route.params.id;
      }
      if (this.teamValue) {
        data.keyword = this.teamValue;
      }
      getDealerList(data).then((res) => {
        this.loading = false;
        this.dealerInfo = res.list;
        this.page.cur = res.current;
        this.page.total = res.total;
      });
    },
    // 修改经销商信息
    confirmSave() {
      this.$confirm("确定要修改经销商信息吗？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "info",
      })
        .then((action) => {
          this.$message({
            message: "交易成功！",
            type: "success",
            showClose: true,
            duration: 1500,
          });
          this.cancleDi();
        })
        .catch(() => {
          this.cancleDi();
        });
    },
    // 取消修改并重置表单
    cancleDi() {
      let form = {
        id: 0,
        name: "",
        unionid: "",
        mobile: "",
      };
      this.dealerForm = form;
      this.eldiForm = false;
    },
    // 初始化
    init() {
      if (
        this.$route.path.includes("/course/dealerTeam") &&
        this.$route.params.id
      ) {
        this.isOuter = false;
        this.curTeamTel = `${this.$route.query.name}的团队`;
        this.getDealerMap(1, this.$route.params.id);
      } else {
        this.isOuter = true;
        this.getDealerMap(1);
      }
    },
    // 跳转到我的团队
    toDealerTeam(row) {
      if (row.statistics.teamAmount != 0) {
        this.$router.push({
          path: `/course/dealerTeam/${row.id}?name=${row.name}`,
        });
      } else {
        this.$message({
          message: "您还没有团队",
          type: "warning",
          showClose: true,
          duration: 3000,
        });
      }
    },
    // 搜索
    teamSearch() {
      this.loading = true;
      this.page.cur = 1;
      this.getDealerMap();
    },
    // 切换当前页
    curPageChange() {
      this.loading = true;
      this.getDealerMap();
    },
    // 打开弹窗修改个人信息
    infoEdit(row) {
      this.dealerForm = JSON.parse(JSON.stringify(row));
      this.eldiForm = true;
    },
    // 跳转查看交易详情
    dealerPay(row) {
      this.$router.push(`/course/dealerEdit/${row.id}?name=${row.name}`);
    },
  },
  computed: {},
};
</script>
<style scoped lang="scss">
.page {
  padding: 15px;
  background-color: #fff;
  border-radius: 5px;
  .search {
    margin-left: 15px;
  }
  .course_data {
    margin-top: 25px;
    display: block;
    .proness {
      margin-top: 20px;
      display: flex;
      justify-content: center;
    }
  }
}
</style>