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="createQr"
        plain
        v-if="isOuter"
        >经销商邀请二维码</el-button
      >
      <div class="search">
        <el-input
          placeholder="请输入内容"
          v-model.trim="teamValue"
          @keyup.enter.native="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>
        <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>
  </div>
</template>

<script>
import { getDealerList } from "../api";
export default {
  name: "dealerManage",
  components: {},
  props: [],
  data() {
    return {
      eldiForm: false,
      dealerForm: {
        id: 0,
        name: "",
        unionid: "",
        mobile: "",
      },
      curTeamTel: "",
      isOuter: false,
      page: {
        total: 0,
        size: 10,
        cur: 1,
      },
      teamValue: "",
      dealerInfo: [
        {
          id: 123455,
          name: "燕小六",
          unionid: "wx1525155255",
          mobile: "15699847711",
          statistics: {
            saleAmount: 15000,
            teamAmount: 11,
          },
        },
      ],
    };
  },
  watch: {
    // $route: function (to, from) {
    //   if(to.path == '/course/dealerManage'){
    //     this.init();
    //   }
    // },
  },
  created() {
    this.init();
  },
  methods: {
    //获取经销商列表
    getDealerMap(type, pid) {
      console.log(123)
      let data = {
        page: this.page.cur,
        pageSize: this.page.size,
        marketable: type,
      };
      if (pid != undefined) {
        data.pid = pid;
      }
      console.log(data);
      getDealerList(data).then((res) => {
        // console.log(res);
        this.dealerInfo = res.list;
        this.page.cur = res.page;
        this.page.size = res.size;
        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() {
      console.log(this.$route.params.id)
      // if (this.$route.params.id) {
      //   console.log(1111)
      //   this.isOuter = false;
      //   this.curTeamTel = `${this.$route.query.tel}的团队`;
      //   this.getDealerMap(1, this.$route.params.id);
      // } else {
      //   console.log(2222)
      //   this.isOuter = true;
      //   this.getDealerMap(1);
      // }
      console.log(2222)
        this.isOuter = true;
        this.getDealerMap(1);
    },
    // 跳转到我的团队
    toDealerTeam(row) {
      console.log(row);
      if (row.statistics.teamAmount != 0) {
        this.$router.push({
          path: `/course/dealerTeam/${row.id}?tel=${row.tel}`,
          params: {
            tel: row.tel,
          },
        });
      }else{
        this.$message({
          message: '您还没有团队',
          type: 'warning',
          showClose: true,
          duration: 3000,
        });
        
      }
    },
    // 搜索
    teamSearch() {
      if (this.teamValue) {
        console.log(this.teamValue);
      }
    },
    // 创建二维码
    createQr() {},
    // 切换当前页
    curPageChange() {
      console.log(this.page);
    },
    // 打开弹窗修改个人信息
    infoEdit(row) {
      this.dealerForm = JSON.parse(JSON.stringify(row));
      this.eldiForm = true;
      console.log(row);
    },
    // 跳转查看交易详情
    dealerPay(row) {
      console.log(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>