双重校验及分销页面制作

package.json

@@ -60,8 +60,10 @@
     "sortablejs": "1.10.2",
     "v-fit-columns": "^0.2.0",
     "vue": "2.6.12",
+    "vue-canvas-poster": "^1.2.1",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
+    "vue-draggable-resizable": "^2.3.0",
     "vue-meta": "^2.4.0",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",

src/App.vue

@@ -5,15 +5,19 @@
 </template>
 
 <script>
-export default  {
-  name:  'App',
-    metaInfo() {
-        return {
-            title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
-            titleTemplate: title => {
-                return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
-            }
-        }
-    }
-}
+export default {
+  name: "App",
+  metaInfo() {
+    return {
+      title:
+        this.$store.state.settings.dynamicTitle &&
+        this.$store.state.settings.title,
+      titleTemplate: (title) => {
+        return title
+          ? `${title} - ${process.env.VUE_APP_TITLE}`
+          : process.env.VUE_APP_TITLE;
+      },
+    };
+  },
+};
 </script>

src/api/login.js

@@ -1,12 +1,12 @@
 import request from '@/utils/request'
 
 // 登录方法
-export function login(username, password, code, uuid) {
+export function login(username, password, code, uuid, phonenumber, smsCode) {
   const data = {
     username,
     password,
     code,
-    uuid
+    uuid, phonenumber, smsCode
   }
   return request({
     url: '/login',
@@ -15,6 +15,26 @@ export function login(username, password, code, uuid) {
   })
 }
 
+
+// 双重等保
+export function commondual_auth() {
+  return request({
+    url: '/common/free/dual_auth',
+    method: 'get',
+    timeout: 20000
+  })
+}
+// 获取登入短信
+export function commonsms_login(data) {
+  return request({
+    url: '/app/common/sms/login',
+    method: 'post',
+    data: data,
+    headers: {
+      isToken: false
+    },
+  })
+}
 // 注册方法
 export function register(data) {
   return request({

src/components/modelView/index.vue

@@ -0,0 +1,177 @@
+<template>
+    <div id="left" class="left">
+      <img
+        :style="modelData.background.css"
+        v-if="modelData.background.checked"
+        :src="modelData.background.name"
+        alt=""
+      />
+      <!-- 标题 -->
+      <vue-draggable-resizable
+        @dragstop="onDragstop1"
+        @resizestop="onResizeStop1"
+        :w="modelData.title.width"
+        :h="modelData.title.height"
+        :x="modelData.title.left"
+        :y="modelData.title.top"
+        :parent="true"
+        v-if="modelData.title.checked"
+      >
+        <p :style="modelData.title.css">{{ modelData.title.name }}</p>
+      </vue-draggable-resizable>
+      <!-- 商品图 -->
+      <vue-draggable-resizable
+        @dragstop="onDragstop2"
+        @resizestop="onResizeStop2"
+        :w="modelData.goods.width"
+        :h="modelData.goods.height"
+        :x="modelData.goods.left"
+        :y="modelData.goods.top"
+        :parent="true"
+        v-if="modelData.goods.checked"
+      >
+        <img :style="modelData.goods.css" :src="modelData.goods.name" alt="" />
+      </vue-draggable-resizable>
+      <!-- 分销码 -->
+      <vue-draggable-resizable
+        @dragstop="onDragstop3"
+        @resizestop="onResizeStop3"
+        :w="modelData.distribution.width"
+        :h="modelData.distribution.height"
+        :x="modelData.distribution.left"
+        :y="modelData.distribution.top"
+        :parent="true"
+        v-if="modelData.distribution.checked"
+      >
+        <img
+          :style="modelData.distribution.css"
+          :src="modelData.distribution.name"
+          alt=""
+        />
+      </vue-draggable-resizable>
+      <!-- 电子名片码 -->
+      <vue-draggable-resizable
+        @dragstop="onDragstop4"
+        @resizestop="onResizeStop4"
+        :w="modelData.cardCode.width"
+        :h="modelData.cardCode.height"
+        :x="modelData.cardCode.left"
+        :y="modelData.cardCode.top"
+        :parent="true"
+        v-if="modelData.cardCode.checked"
+      >
+        <img
+          :style="modelData.cardCode.css"
+          :src="modelData.cardCode.name"
+          alt=""
+        />
+      </vue-draggable-resizable>
+      <!-- 广告语 -->
+      <vue-draggable-resizable
+        @dragstop="onDragstop5"
+        @resizestop="onResizeStop5"
+        :w="modelData.advertise.width"
+        :h="modelData.advertise.height"
+        :x="modelData.advertise.left"
+        :y="modelData.advertise.top"
+        :parent="true"
+        v-if="modelData.advertise.checked"
+      >
+        <p :style="modelData.advertise.css">{{ modelData.advertise.name }}</p>
+      </vue-draggable-resizable>
+      <!-- 机构 -->
+      <vue-draggable-resizable
+        @dragstop="onDragstop6"
+        @resizestop="onResizeStop6"
+        :w="modelData.mechanism.width"
+        :h="modelData.mechanism.height"
+        :x="modelData.mechanism.left"
+        :y="modelData.mechanism.top"
+        :parent="true"
+        v-if="modelData.mechanism.checked"
+      >
+        <p :style="modelData.mechanism.css">{{ modelData.mechanism.name }}</p>
+      </vue-draggable-resizable>
+    </div>
+  </template>
+  
+  <script>
+  import VueDraggableResizable from "vue-draggable-resizable";
+  import "vue-draggable-resizable/dist/VueDraggableResizable.css";
+  export default {
+    components: { VueDraggableResizable },
+    props: {
+      modelData: {
+        type: Object,
+        default: () => {
+          return {};
+        },
+      },
+    },
+    data() {
+      return {};
+    },
+    methods: {
+      onDragstop1(left, top) {
+        this.backData("title", left, top);
+      },
+      onResizeStop1(left, top, width, height) {
+        this.backData("title", left, top, width, height);
+      },
+      onDragstop2(left, top) {
+        this.backData("goods", left, top);
+      },
+      onResizeStop2(left, top, width, height) {
+        this.backData("goods", left, top, width, height);
+      },
+      onDragstop3(left, top) {
+        this.backData("distribution", left, top);
+      },
+      onResizeStop3(left, top, width, height) {
+        this.backData("distribution", left, top, width, height);
+      },
+      onDragstop4(left, top) {
+        this.backData("cardCode", left, top);
+      },
+      onResizeStop4(left, top, width, height) {
+        this.backData("cardCode", left, top, width, height);
+      },
+      onDragstop5(left, top) {
+        this.backData("advertise", left, top);
+      },
+      onResizeStop5(left, top, width, height) {
+        this.backData("advertise", left, top, width, height);
+      },
+      onDragstop6(left, top) {
+        this.backData("mechanism", left, top);
+      },
+      onResizeStop6(left, top, width, height) {
+        this.backData("mechanism", left, top, width, height);
+      },
+  
+      backData(name, left, top, width, height) {
+        this.$emit("changeModelData", { name, left, top, width, height });
+      },
+    },
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  #left {
+    position: relative;
+    width: 375px;
+    height: 667px;
+    border: 1px solid #333;
+    margin-right: 20px;
+    flex-shrink: 0;
+    box-sizing: content-box;
+    overflow: hidden;
+  }
+  .vdr {
+    border-color: transparent;
+  }
+  .active {
+    border: 1px dashed #000;
+  }
+  </style>
+  

src/store/modules/user.js

@@ -42,8 +42,10 @@ const user = {
       // const password = userInfo.password
       const code = userInfo.code
       const uuid = userInfo.uuid
+      const phonenumber = userInfo.phonenumber
+      const smsCode = userInfo.smsCode
       return new Promise((resolve, reject) => {
-        login(username, password, code, uuid).then(res => {
+        login(username, password, code, uuid, phonenumber, smsCode).then(res => {
           setToken(res.token)
           commit('SET_TOKEN', res.token)
           resolve()

src/views/Marketing/activitySystem/activityList/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div id="">
+活动列表
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/Marketing/activitySystem/posterList/index.vue

@@ -0,0 +1,277 @@
+<template>
+  <div id="posterList">
+    <search-box-new
+      ref="searchBox"
+      :formData="formData"
+      :formList="formList"
+      @search="search"
+      @init="init"
+    />
+    <table-list
+      rowKey="id"
+      ref="tableList"
+      :tableSets="tableSet"
+      :tableData="tableData"
+      :navText="navText"
+      :loading="loading"
+      @addClick="addClick"
+    >
+      <template slot="btn" slot-scope="props">
+        <el-button type="text" @click="Status(props.scope.row)"
+          >启用/禁用</el-button
+        >
+        <el-button type="text" @click="editClick(props.scope.row)"
+          >编辑</el-button
+        >
+      </template>
+    </table-list>
+    <pagination
+      :total="total"
+      :pageSize="formData.pageSize"
+      :currentPage="formData.pageNum"
+      @handleSizeChange="handleSizeChange"
+      @handleCurrentChange="handleCurrentChange"
+    />
+    <model ref="model"></model>
+  </div>
+</template>
+
+<script>
+import searchBoxNew from "@/components/searchBoxNew";
+import tableList from "@/components/tableList";
+import pagination from "@/components/pagination";
+import model from "./model.vue"
+export default {
+  name: "PosterList",
+  components: { searchBoxNew, tableList, pagination,model },
+  data() {
+    return {
+      disabledBtn: false,
+      loading: false, //当前表单加载是否加载动画
+      navText: {
+        title: "模板管理",
+        index: 0,
+        ch: "条",
+        num: true,
+        choice: false,
+        addHide: false,
+        openCheckMore: true,
+        changeWidth: "100px",
+        backFatherBtn: {
+          status: false,
+          title: "配置下单填选模板",
+        },
+      },
+      //搜索
+      formList: [
+        {
+          lable: "姓名",
+          prop: "name",
+          placeholder: "请输入姓名",
+        },
+      ],
+      formData: {
+        status: "0,1",
+        pageSize: 10,
+        pageNum: 1,
+      },
+      // 表单
+      tableSet: [
+        {
+          label: "模板编号",
+          prop: "id",
+          hidden: true,
+        },
+        {
+          label: "模板名称",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "创建时间",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "使用状态",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "备注",
+          prop: "name",
+          hidden: true,
+        },
+      ],
+      tableData: [], //表单数据
+      total: 0, //一共多少条
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    Status(){},
+    addClick(){
+      this.$refs.model.showBox()
+    },
+    editClick(e) {
+      console.log("编辑", e);
+    },
+    search(v) {
+      this.loading = true;
+      if (v === 2) {
+        this.formData = {
+          status: "0,1",
+          pageSize: 10,
+          pageNum: 1,
+        };
+      }
+      var data = JSON.parse(JSON.stringify(this.formData));
+      if (this.formData.classStartTime) {
+        data.classStartTime = parseInt(data.classStartTime / 1000);
+      }
+      if (this.formData.classEndTime) {
+        data.classEndTime = parseInt(data.classEndTime / 1000);
+      }
+      this.$api
+        .inquirebusinessList(data)
+        .then((res) => {
+          this.tableData = res.rows;
+          this.total = res.total;
+          this.navText.index = res.total;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    init() {
+      this.search(2);
+    },
+    del(v) {
+      this.$alert(
+        "确定删除此内容？<br />内容删除后将无法恢复，请慎重考虑",
+        "提示",
+        {
+          dangerouslyUseHTMLString: true,
+        }
+      )
+        .then(() => {
+          this.$message.success("删除成功");
+          this.search();
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+
+    handleSizeChange(v) {
+      this.formData.pageSize = v;
+      this.formData.pageNum = 1;
+      this.search();
+    },
+    handleCurrentChange(v) {
+      this.formData.pageNum = v;
+      this.search();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+/deep/.el-button {
+  border-radius: 8px;
+}
+/deep/.el-dialog {
+  border-radius: 8px;
+  .el-dialog__header {
+    padding: 0;
+    .hearders {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0px 18px 0px 20px;
+      border-bottom: 1px solid #e2e2e2;
+      .leftTitle {
+        font-size: 14px;
+        font-weight: bold;
+        color: #2f4378;
+      }
+      .rightBoxs {
+        display: flex;
+        align-items: center;
+        img {
+          width: 14px;
+          height: 14px;
+          margin-left: 13px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  .el-dialog__footer {
+    padding: 0;
+    .dialog-footer {
+      padding: 0px 40px;
+      height: 70px;
+      border-top: 1px solid #e2e2e2;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+}
+.imgBox {
+  width: 100%;
+  // height: 210px;
+  border: 1px solid #e2e2e2;
+  border-radius: 8px;
+  padding: 8px 8px 3px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .imgLabel {
+    flex: 1;
+    width: 100%;
+    border: 1px dotted #e2e2e2;
+    color: #999;
+    font-size: 14px;
+    cursor: pointer;
+    border-radius: 8px;
+    .msPhoto {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      max-width: 100%;
+      max-height: 270px;
+      img {
+        max-width: 100%;
+        max-height: 270px;
+      }
+    }
+    .imgbbx {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      i {
+        font-weight: bold;
+        margin: 14px 0;
+        font-size: 24px;
+      }
+    }
+  }
+  p {
+    margin: 5px 0px;
+  }
+}
+.numInputs {
+  width: 150px;
+}
+</style>

src/views/Marketing/activitySystem/posterList/model.vue

@@ -0,0 +1,280 @@
+<template>
+  <div id="">
+    <el-dialog
+      :visible.sync="dialogVisible"
+      width="960px"
+      :show-close="false"
+      :close-on-click-modal="false"
+    >
+      <div slot="title" class="hearders">
+        <div class="leftTitle">模板</div>
+        <div class="rightBoxs">
+          <img src="@/assets/images/Close@2x.png" alt="" @click="close" />
+        </div>
+      </div>
+      <div id="content">
+    <modelView
+      ref="modelView"
+      :modelData="modelData"
+      @changeModelData="changeModelData"
+    ></modelView>
+    <div class="right">
+      <div class="lis">
+        <el-checkbox v-model="modelData.title.checked">标题：</el-checkbox
+        ><el-input v-model="modelData.title.name"></el-input
+        ><el-color-picker
+          v-model="modelData.title.css.color"
+          show-alpha
+        ></el-color-picker>
+        <el-input
+          placeholder="请输入字体大小"
+          v-model="modelData.title.css.fontSize"
+        >
+          <template slot="prepend">字体大小</template></el-input
+        >
+      </div>
+      <div class="lis">
+        <el-checkbox v-model="modelData.background.checked"
+          >背景图：</el-checkbox
+        ><el-select v-model="modelData.background.name" placeholder="请选择">
+          <el-option
+            v-for="(item, index) in backImgList"
+            :key="index"
+            :label="item.label"
+            :value="item.name"
+          >
+          </el-option>
+        </el-select>
+      </div>
+      <div class="lis">
+        <el-checkbox v-model="modelData.goods.checked">商品图：</el-checkbox
+        ><input id="goods" type="file" />
+      </div>
+      <div class="lis">
+        <el-checkbox v-model="modelData.distribution.checked"
+          >分销码</el-checkbox
+        >
+        <el-checkbox v-model="modelData.cardCode.checked"
+          >电子名片码</el-checkbox
+        >
+      </div>
+      <div class="lis">
+        <el-checkbox v-model="modelData.advertise.checked">广告语：</el-checkbox
+        ><el-input v-model="modelData.advertise.name"></el-input
+        ><el-color-picker
+          v-model="modelData.advertise.css.color"
+          show-alpha
+        ></el-color-picker>
+        <el-input
+          placeholder="请输入字体大小"
+          v-model="modelData.advertise.css.fontSize"
+        >
+          <template slot="prepend">字体大小</template></el-input
+        >
+      </div>
+      <div class="lis">
+        <el-checkbox v-model="modelData.mechanism.checked">机构：</el-checkbox
+        ><el-input v-model="modelData.mechanism.name"></el-input
+        ><el-color-picker
+          v-model="modelData.mechanism.css.color"
+          show-alpha
+        ></el-color-picker>
+        <el-input
+          placeholder="请输入字体大小"
+          v-model="modelData.mechanism.css.fontSize"
+        >
+          <template slot="prepend">字体大小</template></el-input
+        >
+      </div>
+      <el-button @click="submits">保存</el-button>
+    </div>
+  </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="close">取 消</el-button>
+        <el-button
+          type="primary"
+          :loading="disabledBtn"
+          @click="submit('listData')"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import modelView from "@/components/modelView";
+export default {
+  components: { modelView },
+  data() {
+    return {
+      dialogVisible: false,
+      disabledBtn: false,
+      //   弹窗数据
+      listData: {},
+      
+      backImgList: [
+        { label: "模板1", name: require("@/assets/model_images/model1.png") },
+        { label: "模板2", name: require("@/assets/model_images/model2.png") },
+        { label: "模板3", name: require("@/assets/model_images/model3.png") },
+      ],
+      modelData: {
+        background: {
+          name: "",
+          css: {
+            top: "0px",
+            left: "0px",
+            width: "375px",
+            height: "667px",
+            position: "absolute",
+          },
+        },
+        title: {
+          name: "",
+          top: 38,
+          left: 0,
+          width: 375,
+          height: 50,
+          css: {
+            textAlign: "center",
+            fontSize: "30px",
+            margin:"0px"
+          },
+        },
+        goods: {
+          name: require("@/assets/model_images/model1.png"),
+          top: 126,
+          left: 28,
+          width: 330,
+          height: 330,
+          css: {
+            width: "100%",
+            height: "100%",
+          },
+        },
+        distribution: {
+          name: require("@/assets/model_images/model1.png"),
+          top: 476,
+          left: 114,
+          width: 121,
+          height: 111,
+          css: {
+            width: "100%",
+            height: "100%",
+          },
+        },
+        cardCode: {
+          name: require("@/assets/model_images/model1.png"),
+          top: 476,
+          left: 244,
+          width: 125,
+          height: 112,
+          css: {
+            width: "100%",
+            height: "100%",
+          },
+        },
+        advertise: {
+          name: "",
+          top: 490,
+          left: 0,
+          width: 102,
+          height: 96,
+          css: {
+            fontSize: "20px",
+            margin:"0px"
+          },
+        },
+        mechanism: {
+          name: "",
+          top: 623,
+          left: 0,
+          width: 375,
+          height: 44,
+          css: {
+            fontSize: "16px",
+            textAlign: "center",
+            margin:"0px"
+          },
+        },
+      },
+    };
+  },
+  methods: {
+    showBox(e) {
+      this.dialogVisible = true;
+    },
+    submit() {
+      this.disabledBtn = true;
+      setTimeout(() => {
+        this.$message.success("提交成功");
+        this.disabledBtn = false;
+        this.dialogVisible = false;
+        this.search();
+      }, 500);
+    },
+    close() {
+      this.dialogVisible = false;
+    },
+    submits() {
+      console.log(this.modelData);
+    },
+    changeModelData(data) {
+      const { name, left, top, width, height } = data;
+      for (let k in this.modelData) {
+        if (k === name) {
+          this.$set(this.modelData[name], "left", left);
+          this.$set(this.modelData[name], "top", top);
+          if (width >= 0) {
+            this.$set(this.modelData[name], "width", width);
+          }
+          if (height >= 0) {
+            this.$set(this.modelData[name], "height", height);
+          }
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.header_img {
+  & > .imageStyBoxShow {
+    border-radius: 50%;
+    overflow: hidden;
+    width: 60px;
+    height: 60px;
+    margin-right: 10px;
+    border: 1px solid #999;
+  }
+  .btns {
+    border: 1px solid #333;
+    color: #333;
+    padding: 4px 6px;
+    font-style: normal;
+    border-radius: 8px;
+    cursor: pointer;
+    user-select: none;
+  }
+}
+.title_i {
+  text-align: center;
+  font-size: 12px;
+  color: rgba(134, 144, 156, 1);
+}
+
+#content {
+  display: flex;
+  & > .right {
+    & > .lis {
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
+      & > .el-input {
+        width: 200px;
+      }
+    }
+  }
+}
+</style>

src/views/Marketing/distribution/commissionList/index.vue

@@ -0,0 +1,309 @@
+<template>
+  <div id="commissionList">
+    <search-box-new
+      ref="searchBox"
+      :formData="formData"
+      :formList="formList"
+      @search="search"
+      @init="init"
+    />
+    <table-list
+      rowKey="id"
+      ref="tableList"
+      :tableSets="tableSet"
+      :tableData="tableData"
+      :navText="navText"
+      :loading="loading"
+    >
+      <template slot="btn" slot-scope="props">
+        <el-button type="text" @click="editClick(props.scope.row)"
+          >详情</el-button
+        >
+      </template>
+    </table-list>
+    <pagination
+      :total="total"
+      :pageSize="formData.pageSize"
+      :currentPage="formData.pageNum"
+      @handleSizeChange="handleSizeChange"
+      @handleCurrentChange="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+import searchBoxNew from "@/components/searchBoxNew";
+import tableList from "@/components/tableList";
+import pagination from "@/components/pagination";
+export default {
+  name: "CommissionList",
+  components: { searchBoxNew, tableList, pagination },
+  data() {
+    return {
+      disabledBtn: false,
+      loading: false, //当前表单加载是否加载动画
+      navText: {
+        title: "佣金列表",
+        index: 0,
+        ch: "条",
+        num: true,
+        choice: false,
+        addHide: true,
+        openCheckMore: true,
+        changeWidth: "100px",
+        backFatherBtn: {
+          status: false,
+          title: "配置下单填选模板",
+        },
+      },
+      //搜索
+      formList: [
+        {
+          prop1: "classStartTime",
+          prop2: "classEndTime",
+          placeholder1: "开始时间",
+          placeholder2: "结束时间",
+          scope: "moreDataPicker",
+        },
+        {
+          lable: "邀请人",
+          prop: "name",
+          placeholder: "请输入邀请人",
+        },
+        {
+          lable: "订单",
+          prop: "name",
+          placeholder: "请输入订单",
+        },
+        {
+          lable: "业务员姓名",
+          prop: "name",
+          placeholder: "请输入业务员姓名",
+        },
+      ],
+      formData: {
+        status: "0,1",
+        pageSize: 10,
+        pageNum: 1,
+      },
+      // 表单
+      tableSet: [
+        {
+          label: "业务员ID",
+          prop: "id",
+          hidden: true,
+        },
+        {
+          label: "业务员名称",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "联系方式",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "邀请人ID",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "邀请人姓名",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "累计客户数",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "累计推广员数",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "加入时间",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "所属机构",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "佣金总金额",
+          prop: "name",
+          hidden: true,
+        },
+      ],
+      tableData: [], //表单数据
+      total: 0, //一共多少条
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    editClick(e) {
+      console.log("详情", e);
+    },
+    search(v) {
+      this.loading = true;
+      if (v === 2) {
+        this.formData = {
+          status: "0,1",
+          pageSize: 10,
+          pageNum: 1,
+        };
+      }
+      var data = JSON.parse(JSON.stringify(this.formData));
+      if (this.formData.classStartTime) {
+        data.classStartTime = parseInt(data.classStartTime / 1000);
+      }
+      if (this.formData.classEndTime) {
+        data.classEndTime = parseInt(data.classEndTime / 1000);
+      }
+      this.$api
+        .inquirebusinessList(data)
+        .then((res) => {
+          this.tableData = res.rows;
+          this.total = res.total;
+          this.navText.index = res.total;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    init() {
+      this.search(2);
+    },
+    del(v) {
+      this.$alert(
+        "确定删除此内容？<br />内容删除后将无法恢复，请慎重考虑",
+        "提示",
+        {
+          dangerouslyUseHTMLString: true,
+        }
+      )
+        .then(() => {
+          this.$message.success("删除成功");
+          this.search();
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+
+    handleSizeChange(v) {
+      this.formData.pageSize = v;
+      this.formData.pageNum = 1;
+      this.search();
+    },
+    handleCurrentChange(v) {
+      this.formData.pageNum = v;
+      this.search();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+/deep/.el-button {
+  border-radius: 8px;
+}
+/deep/.el-dialog {
+  border-radius: 8px;
+  .el-dialog__header {
+    padding: 0;
+    .hearders {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0px 18px 0px 20px;
+      border-bottom: 1px solid #e2e2e2;
+      .leftTitle {
+        font-size: 14px;
+        font-weight: bold;
+        color: #2f4378;
+      }
+      .rightBoxs {
+        display: flex;
+        align-items: center;
+        img {
+          width: 14px;
+          height: 14px;
+          margin-left: 13px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  .el-dialog__footer {
+    padding: 0;
+    .dialog-footer {
+      padding: 0px 40px;
+      height: 70px;
+      border-top: 1px solid #e2e2e2;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+}
+.imgBox {
+  width: 100%;
+  // height: 210px;
+  border: 1px solid #e2e2e2;
+  border-radius: 8px;
+  padding: 8px 8px 3px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .imgLabel {
+    flex: 1;
+    width: 100%;
+    border: 1px dotted #e2e2e2;
+    color: #999;
+    font-size: 14px;
+    cursor: pointer;
+    border-radius: 8px;
+    .msPhoto {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      max-width: 100%;
+      max-height: 270px;
+      img {
+        max-width: 100%;
+        max-height: 270px;
+      }
+    }
+    .imgbbx {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      i {
+        font-weight: bold;
+        margin: 14px 0;
+        font-size: 24px;
+      }
+    }
+  }
+  p {
+    margin: 5px 0px;
+  }
+}
+.numInputs {
+  width: 150px;
+}
+</style>

src/views/Marketing/distribution/distributionOrder/index.vue

@@ -0,0 +1,326 @@
+<template>
+  <div id="distributionOrder">
+    <search-box-new
+      ref="searchBox"
+      :formData="formData"
+      :formList="formList"
+      @search="search"
+      @init="init"
+    />
+    <table-list
+      rowKey="id"
+      ref="tableList"
+      :tableSets="tableSet"
+      :tableData="tableData"
+      :navText="navText"
+      :loading="loading"
+    >
+      <template slot="btn" slot-scope="props">
+        <el-button type="text" @click="editClick(props.scope.row)"
+          >详情</el-button
+        >
+      </template>
+    </table-list>
+    <pagination
+      :total="total"
+      :pageSize="formData.pageSize"
+      :currentPage="formData.pageNum"
+      @handleSizeChange="handleSizeChange"
+      @handleCurrentChange="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+import searchBoxNew from "@/components/searchBoxNew";
+import tableList from "@/components/tableList";
+import pagination from "@/components/pagination";
+export default {
+  name: "DistributionOrder",
+  components: { searchBoxNew, tableList, pagination },
+  data() {
+    return {
+      disabledBtn: false,
+      loading: false, //当前表单加载是否加载动画
+      navText: {
+        title: "分销订单列表",
+        index: 0,
+        ch: "条",
+        num: true,
+        choice: false,
+        addHide: true,
+        openCheckMore: true,
+        changeWidth: "100px",
+        backFatherBtn: {
+          status: false,
+          title: "配置下单填选模板",
+        },
+      },
+      //搜索
+      formList: [
+        {
+          lable: "机构",
+          prop: "name",
+          placeholder: "请输入机构",
+        },
+        {
+          prop1: "classStartTime",
+          prop2: "classEndTime",
+          placeholder1: "开始时间",
+          placeholder2: "结束时间",
+          scope: "moreDataPicker",
+        },
+        {
+          lable: "姓名",
+          prop: "name",
+          placeholder: "请输入姓名",
+        },
+        {
+          lable: "订单号",
+          prop: "name",
+          placeholder: "请输入订单号",
+        },
+        {
+          prop: "status",
+          placeholder: "状态",
+          scope: "select",
+          noClear: false,
+          options: [
+            { label: "全部", value: "1,2,3" },
+            { label: "已支付", value: 1 },
+            { label: "未支付", value: 2 },
+            { label: "已退款", value: 3 },
+          ],
+        },
+      ],
+      formData: {
+        status: "0,1",
+        pageSize: 10,
+        pageNum: 1,
+      },
+      // 表单
+      tableSet: [
+        {
+          label: "编号",
+          prop: "id",
+          hidden: true,
+        },
+        {
+          label: "订单号",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "订单价格",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "所属活动",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "课程",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "学员",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "手机号",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "业务员",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "所属机构",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "交易时间",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "支付状态",
+          prop: "name",
+          hidden: true,
+        },
+      ],
+      tableData: [], //表单数据
+      total: 0, //一共多少条
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    editClick(e) {
+      console.log("详情", e);
+    },
+    search(v) {
+      this.loading = true;
+      if (v === 2) {
+        this.formData = {
+          status: "0,1",
+          pageSize: 10,
+          pageNum: 1,
+        };
+      }
+      var data = JSON.parse(JSON.stringify(this.formData));
+      if (this.formData.classStartTime) {
+        data.classStartTime = parseInt(data.classStartTime / 1000);
+      }
+      if (this.formData.classEndTime) {
+        data.classEndTime = parseInt(data.classEndTime / 1000);
+      }
+      this.$api
+        .inquirebusinessList(data)
+        .then((res) => {
+          this.tableData = res.rows;
+          this.total = res.total;
+          this.navText.index = res.total;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    init() {
+      this.search(2);
+    },
+    del(v) {
+      this.$alert(
+        "确定删除此内容？<br />内容删除后将无法恢复，请慎重考虑",
+        "提示",
+        {
+          dangerouslyUseHTMLString: true,
+        }
+      )
+        .then(() => {
+          this.$message.success("删除成功");
+          this.search();
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+
+    handleSizeChange(v) {
+      this.formData.pageSize = v;
+      this.formData.pageNum = 1;
+      this.search();
+    },
+    handleCurrentChange(v) {
+      this.formData.pageNum = v;
+      this.search();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+/deep/.el-button {
+  border-radius: 8px;
+}
+/deep/.el-dialog {
+  border-radius: 8px;
+  .el-dialog__header {
+    padding: 0;
+    .hearders {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0px 18px 0px 20px;
+      border-bottom: 1px solid #e2e2e2;
+      .leftTitle {
+        font-size: 14px;
+        font-weight: bold;
+        color: #2f4378;
+      }
+      .rightBoxs {
+        display: flex;
+        align-items: center;
+        img {
+          width: 14px;
+          height: 14px;
+          margin-left: 13px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  .el-dialog__footer {
+    padding: 0;
+    .dialog-footer {
+      padding: 0px 40px;
+      height: 70px;
+      border-top: 1px solid #e2e2e2;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+}
+.imgBox {
+  width: 100%;
+  // height: 210px;
+  border: 1px solid #e2e2e2;
+  border-radius: 8px;
+  padding: 8px 8px 3px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .imgLabel {
+    flex: 1;
+    width: 100%;
+    border: 1px dotted #e2e2e2;
+    color: #999;
+    font-size: 14px;
+    cursor: pointer;
+    border-radius: 8px;
+    .msPhoto {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      max-width: 100%;
+      max-height: 270px;
+      img {
+        max-width: 100%;
+        max-height: 270px;
+      }
+    }
+    .imgbbx {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      i {
+        font-weight: bold;
+        margin: 14px 0;
+        font-size: 24px;
+      }
+    }
+  }
+  p {
+    margin: 5px 0px;
+  }
+}
+.numInputs {
+  width: 150px;
+}
+</style>

src/views/Marketing/distribution/rankingList/index.vue

@@ -0,0 +1,282 @@
+<template>
+  <div id="rankingList">
+    <search-box-new
+      ref="searchBox"
+      :formData="formData"
+      :formList="formList"
+      @search="search"
+      @init="init"
+    />
+    <table-list
+      rowKey="id"
+      ref="tableList"
+      :tableSets="tableSet"
+      :tableData="tableData"
+      :navText="navText"
+      :loading="loading"
+    >
+    </table-list>
+    <pagination
+      :total="total"
+      :pageSize="formData.pageSize"
+      :currentPage="formData.pageNum"
+      @handleSizeChange="handleSizeChange"
+      @handleCurrentChange="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+import searchBoxNew from "@/components/searchBoxNew";
+import tableList from "@/components/tableList";
+import pagination from "@/components/pagination";
+export default {
+  name: "RankingList",
+  components: { searchBoxNew, tableList, pagination },
+  data() {
+    return {
+      disabledBtn: false,
+      loading: false, //当前表单加载是否加载动画
+      navText: {
+        tableHide:true,
+        title: "排行榜",
+        index: 0,
+        ch: "条",
+        num: true,
+        choice: false,
+        addHide: true,
+        openCheckMore: true,
+        changeWidth: "100px",
+        backFatherBtn: {
+          status: false,
+          title: "配置下单填选模板",
+        },
+      },
+      //搜索
+      formList: [
+        {
+          prop1: "classStartTime",
+          prop2: "classEndTime",
+          placeholder1: "开始时间",
+          placeholder2: "结束时间",
+          scope: "moreDataPicker",
+        },
+        {
+          prop: "status1",
+          placeholder: "范围",
+          scope: "select",
+          noClear: false,
+          options: [
+            { label: "是", value: 1 },
+            { label: "否", value: 0 },
+          ],
+        },
+        {
+          prop: "status2",
+          placeholder: "活动",
+          scope: "select",
+          noClear: false,
+          options: [
+            { label: "是", value: 1 },
+            { label: "否", value: 0 },
+          ],
+        },
+      ],
+      formData: {
+        status: "0,1",
+        pageSize: 10,
+        pageNum: 1,
+      },
+      // 表单
+      tableSet: [
+        {
+          label: "排序",
+          prop: "sort",
+          hidden: true,
+        },
+        {
+          label: "名称",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "佣金总额",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "时间",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "所属活动",
+          prop: "name",
+          hidden: true,
+        },
+      ],
+      tableData: [], //表单数据
+      total: 0, //一共多少条
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    search(v) {
+      this.loading = true;
+      if (v === 2) {
+        this.formData = {
+          status: "0,1",
+          pageSize: 10,
+          pageNum: 1,
+        };
+      }
+      var data = JSON.parse(JSON.stringify(this.formData));
+      if (this.formData.classStartTime) {
+        data.classStartTime = parseInt(data.classStartTime / 1000);
+      }
+      if (this.formData.classEndTime) {
+        data.classEndTime = parseInt(data.classEndTime / 1000);
+      }
+      this.$api
+        .inquirebusinessList(data)
+        .then((res) => {
+          this.tableData = res.rows;
+          this.total = res.total;
+          this.navText.index = res.total;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    init() {
+      this.search(2);
+    },
+    del(v) {
+      this.$alert(
+        "确定删除此内容？<br />内容删除后将无法恢复，请慎重考虑",
+        "提示",
+        {
+          dangerouslyUseHTMLString: true,
+        }
+      )
+        .then(() => {
+          this.$message.success("删除成功");
+          this.search();
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+
+    handleSizeChange(v) {
+      this.formData.pageSize = v;
+      this.formData.pageNum = 1;
+      this.search();
+    },
+    handleCurrentChange(v) {
+      this.formData.pageNum = v;
+      this.search();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+/deep/.el-button {
+  border-radius: 8px;
+}
+/deep/.el-dialog {
+  border-radius: 8px;
+  .el-dialog__header {
+    padding: 0;
+    .hearders {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0px 18px 0px 20px;
+      border-bottom: 1px solid #e2e2e2;
+      .leftTitle {
+        font-size: 14px;
+        font-weight: bold;
+        color: #2f4378;
+      }
+      .rightBoxs {
+        display: flex;
+        align-items: center;
+        img {
+          width: 14px;
+          height: 14px;
+          margin-left: 13px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  .el-dialog__footer {
+    padding: 0;
+    .dialog-footer {
+      padding: 0px 40px;
+      height: 70px;
+      border-top: 1px solid #e2e2e2;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+}
+.imgBox {
+  width: 100%;
+  // height: 210px;
+  border: 1px solid #e2e2e2;
+  border-radius: 8px;
+  padding: 8px 8px 3px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .imgLabel {
+    flex: 1;
+    width: 100%;
+    border: 1px dotted #e2e2e2;
+    color: #999;
+    font-size: 14px;
+    cursor: pointer;
+    border-radius: 8px;
+    .msPhoto {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      max-width: 100%;
+      max-height: 270px;
+      img {
+        max-width: 100%;
+        max-height: 270px;
+      }
+    }
+    .imgbbx {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      i {
+        font-weight: bold;
+        margin: 14px 0;
+        font-size: 24px;
+      }
+    }
+  }
+  p {
+    margin: 5px 0px;
+  }
+}
+.numInputs {
+  width: 150px;
+}
+</style>

src/views/Marketing/distribution/salesmanList/formBox.vue

@@ -0,0 +1,226 @@
+<template>
+  <div id="">
+    <el-dialog
+      :visible.sync="dialogVisible"
+      width="560px"
+      :show-close="false"
+      :close-on-click-modal="false"
+    >
+      <div slot="title" class="hearders">
+        <div class="leftTitle">业务员</div>
+        <div class="rightBoxs">
+          <img src="@/assets/images/Close@2x.png" alt="" @click="close" />
+        </div>
+      </div>
+      <div>
+        <el-form
+          label-position="right"
+          label-width="110px"
+          :model="listData"
+          :rules="rules"
+          ref="listData"
+          :disabled="disabled"
+        >
+          <el-form-item
+            v-for="(items, indexs) in listitem"
+            :key="indexs"
+            :label="items.label"
+            :prop="items.prop"
+          >
+            <div v-if="items.scope === 'header_img'" class="header_img">
+              <el-image
+                class="imageStyBoxShow"
+                :src="$methodsTools.splitImgHost(listData[items.prop])"
+                :preview-src-list="[
+                  $methodsTools.splitImgHost(listData[items.prop]),
+                ]"
+              >
+              </el-image>
+              <label for="imgs"
+                ><i class="btns" v-if="!disabled">更换头像</i></label
+              >
+              <input
+                id="imgs"
+                type="file"
+                style="display: none"
+                @change="uploadImg"
+              />
+            </div>
+            <el-input v-else v-model="listData[items.prop]"></el-input>
+          </el-form-item>
+        </el-form>
+        <p class="title_i">创建新账户时，默认密码为身份证号末6位</p>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="close">取 消</el-button>
+        <el-button
+          type="primary"
+          :loading="disabledBtn"
+          v-if="!disabled"
+          @click="submit('listData')"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      // 弹窗字段
+      listitem: [
+        {
+          label: "头像",
+          prop: "adverUrl",
+          scope: "header_img",
+        },
+        {
+          label: "业务员ID",
+          prop: "sort",
+        },
+        {
+          label: "姓名",
+          prop: "name",
+        },
+        {
+          label: "职务",
+          prop: "sort",
+        },
+        {
+          label: "手机号码",
+          prop: "tel",
+        },
+        {
+          label: "身份证号",
+          prop: "idCard",
+        },
+        {
+          label: "微信号",
+          prop: "wx",
+        },
+      ],
+      dialogVisible: false,
+      disabledBtn: false,
+      disabled: false,
+      //   弹窗数据
+      listData: {},
+      //表单验证
+      rules: {
+        name: [
+          {
+            required: true,
+            message: "请输入姓名",
+            trigger: "blur",
+          },
+        ],
+        tel: [
+          {
+            required: true,
+            message: "请输入手机号码",
+            trigger: "blur",
+          },
+        ],
+        idCard: [
+          {
+            required: true,
+            message: "请输入身份证号",
+            trigger: "blur",
+          },
+        ],
+        wx: [
+          {
+            required: true,
+            message: "请输入微信号",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    uploadImg(e) {
+      var file = e.target.files[0];
+      if (file === undefined) {
+        return;
+      }
+      if (file.size > 0.3 * 1024 * 1024) {
+        this.$message.warning("图片不得大于300kb");
+        return;
+      }
+      var type = e.target.value.toLowerCase().split(".").splice(-1);
+      if (type[0] != "jpg" && type[0] != "png" && type[0] != "jpeg") {
+        this.$message.warning("上传格式需为：.jpg/.png/.jpeg");
+        e.target.value = "";
+        return;
+      }
+      this.$upload
+        .upload(file, 0)
+        .then((res) => {
+          this.$set(this.listData, "adverUrl", res);
+        })
+        .finally(() => {
+          e.target.value = "";
+        });
+    },
+    showBox(e) {
+      if (e) {
+        this.disabled = true;
+      } else {
+        this.disabled = false;
+      }
+      this.dialogVisible = true;
+    },
+    submit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.rulesTableSumbit();
+        } else {
+          return false;
+        }
+      });
+    },
+    rulesTableSumbit() {
+      this.disabledBtn = true;
+      setTimeout(() => {
+        this.$message.success("修改成功");
+        this.disabledBtn = false;
+        this.dialogVisible = false;
+        this.search();
+      }, 500);
+    },
+    close() {
+      this.$refs.listData.clearValidate();
+      this.dialogVisible = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.header_img {
+  & > .imageStyBoxShow {
+    border-radius: 50%;
+    overflow: hidden;
+    width: 60px;
+    height: 60px;
+    margin-right: 10px;
+    border: 1px solid #999;
+  }
+  .btns {
+    border: 1px solid #333;
+    color: #333;
+    padding: 4px 6px;
+    font-style: normal;
+    border-radius: 8px;
+    cursor: pointer;
+    user-select: none;
+  }
+}
+.title_i {
+  text-align: center;
+  font-size: 12px;
+  color: rgba(134, 144, 156, 1);
+}
+</style>

src/views/Marketing/distribution/salesmanList/index.vue

@@ -0,0 +1,336 @@
+<template>
+  <div id="salesmanList">
+    <search-box-new
+      ref="searchBox"
+      :formData="formData"
+      :formList="formList"
+      @search="search"
+      @init="init"
+    />
+    <table-list
+      rowKey="id"
+      ref="tableList"
+      :tableSets="tableSet"
+      :tableData="tableData"
+      :navText="navText"
+      @addClick="addClick"
+      :loading="loading"
+    >
+      <template slot="customize">
+        <el-button @click="sales" type="success" size="medium">关联现有业务员</el-button>
+      </template>
+      <template slot="btn" slot-scope="props">
+        <el-button type="text" @click="del(props.scope.row)">禁用</el-button>
+        <el-button type="text" @click="del(props.scope.row)">启用</el-button>
+        <el-button type="text" @click="editClick(props.scope.row)"
+          >详情</el-button
+        >
+        <el-button type="text" @click="del(props.scope.row)">删除</el-button>
+      </template>
+    </table-list>
+    <pagination
+      :total="total"
+      :pageSize="formData.pageSize"
+      :currentPage="formData.pageNum"
+      @handleSizeChange="handleSizeChange"
+      @handleCurrentChange="handleCurrentChange"
+    />
+    <form-box ref="formBox"></form-box>
+    <sales-checkout ref="salesCheckout" > </sales-checkout>
+  </div>
+</template>
+
+<script>
+import searchBoxNew from "@/components/searchBoxNew";
+import tableList from "@/components/tableList";
+import pagination from "@/components/pagination";
+import FormBox from "./formBox.vue";
+import salesCheckout from "./salesCheckout.vue"
+export default {
+  name: "SalesmanList",
+  components: { searchBoxNew, tableList, pagination, FormBox,salesCheckout },
+  data() {
+    return {
+      disabledBtn: false,
+      loading: false, //当前表单加载是否加载动画
+      navText: {
+        title: "业务员列表",
+        index: 0,
+        ch: "条",
+        num: true,
+        choice: true,
+        addHide: false,
+        openCheckMore: true,
+        changeWidth: "260px",
+        backFatherBtn: {
+          status: false,
+          title: "配置下单填选模板",
+        },
+      },
+      //搜索
+      formList: [
+        {
+          lable: "邀请人",
+          prop: "name",
+          placeholder: "请输入邀请人",
+        },
+        {
+          lable: "订单",
+          prop: "name",
+          placeholder: "请输入订单",
+        },
+        {
+          lable: "姓名",
+          prop: "name",
+          placeholder: "请输入姓名",
+        },
+      ],
+      formData: {
+        status: "0,1",
+        pageSize: 10,
+        pageNum: 1,
+      },
+      // 表单
+      tableSet: [
+        {
+          label: "业务员",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "姓名",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "手机号",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "身份证号",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "微信号",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "所属机构",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "职务",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "邀请人ID",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "邀请人姓名",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "累计客户数",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "累计推广员数",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "账号状态",
+          prop: "bbb",
+          scope: "isOptions",
+          hidden: true,
+          options: [
+            {
+              label: "同意",
+              value: 0,
+            },
+            {
+              label: "不同意",
+              value: 1,
+            },
+          ],
+        },
+      ],
+      tableData: [], //表单数据
+      total: 0, //一共多少条
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    //关联业务员
+    sales(){
+      this.$refs.salesCheckout.showBox();
+    },
+    //添加
+    addClick() {
+      this.$refs.formBox.showBox();
+    },
+    editClick(e) {
+      this.$refs.formBox.showBox(true);
+    },
+    search(v) {
+      this.loading = true;
+      if (v === 2) {
+        this.formData = {
+          status: "0,1",
+          pageSize: 10,
+          pageNum: 1,
+        };
+      }
+      var data = JSON.parse(JSON.stringify(this.formData));
+      this.$api
+        .inquirebusinessList(data)
+        .then((res) => {
+          this.tableData = res.rows;
+          this.total = res.total;
+          this.navText.index = res.total;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    init() {
+      this.search(2);
+    },
+    del(v) {
+      this.$alert(
+        "确定删除此内容？<br />内容删除后将无法恢复，请慎重考虑",
+        "提示",
+        {
+          dangerouslyUseHTMLString: true,
+        }
+      )
+        .then(() => {
+          this.$message.success("删除成功");
+          this.search();
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+
+    handleSizeChange(v) {
+      this.formData.pageSize = v;
+      this.formData.pageNum = 1;
+      this.search();
+    },
+    handleCurrentChange(v) {
+      this.formData.pageNum = v;
+      this.search();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+/deep/.el-button {
+  border-radius: 8px;
+}
+/deep/.el-dialog {
+  border-radius: 8px;
+  .el-dialog__header {
+    padding: 0;
+    .hearders {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0px 18px 0px 20px;
+      border-bottom: 1px solid #e2e2e2;
+      .leftTitle {
+        font-size: 14px;
+        font-weight: bold;
+        color: #2f4378;
+      }
+      .rightBoxs {
+        display: flex;
+        align-items: center;
+        img {
+          width: 14px;
+          height: 14px;
+          margin-left: 13px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  .el-dialog__footer {
+    padding: 0;
+    .dialog-footer {
+      padding: 0px 40px;
+      height: 70px;
+      border-top: 1px solid #e2e2e2;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+}
+.imgBox {
+  width: 100%;
+  // height: 210px;
+  border: 1px solid #e2e2e2;
+  border-radius: 8px;
+  padding: 8px 8px 3px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .imgLabel {
+    flex: 1;
+    width: 100%;
+    border: 1px dotted #e2e2e2;
+    color: #999;
+    font-size: 14px;
+    cursor: pointer;
+    border-radius: 8px;
+    .msPhoto {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      max-width: 100%;
+      max-height: 270px;
+      img {
+        max-width: 100%;
+        max-height: 270px;
+      }
+    }
+    .imgbbx {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      i {
+        font-weight: bold;
+        margin: 14px 0;
+        font-size: 24px;
+      }
+    }
+  }
+  p {
+    margin: 5px 0px;
+  }
+}
+.numInputs {
+  width: 150px;
+}
+</style>

src/views/Marketing/distribution/salesmanList/salesCheckout.vue

@@ -0,0 +1,90 @@
+<template>
+  <div id="">
+    <el-dialog
+      :visible.sync="dialogVisible"
+      width="560px"
+      :show-close="false"
+      :close-on-click-modal="false"
+    >
+      <div slot="title" class="hearders">
+        <div class="leftTitle">关联业务员</div>
+        <div class="rightBoxs">
+          <img src="@/assets/images/Close@2x.png" alt="" @click="close" />
+        </div>
+      </div>
+      <div>
+        <label
+          >姓名：<el-input
+            style="width: 200px"
+            v-model="listData.name"
+            placeholder="请输入姓名"
+          ></el-input></label
+        ><el-button>搜索</el-button>
+      </div>
+      表格<br />分页
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="close">取 消</el-button>
+        <el-button type="primary" :loading="disabledBtn" @click="submit"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      disabledBtn: false,
+      //   弹窗数据
+      listData: {},
+    };
+  },
+  methods: {
+    showBox() {
+      this.dialogVisible = true;
+    },
+    submit() {
+      this.disabledBtn = true;
+      setTimeout(() => {
+        this.$message.success("修改成功");
+        this.disabledBtn = false;
+        this.dialogVisible = false;
+        this.search();
+      }, 500);
+    },
+    close() {
+      this.dialogVisible = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.header_img {
+  & > .imageStyBoxShow {
+    border-radius: 50%;
+    overflow: hidden;
+    width: 60px;
+    height: 60px;
+    margin-right: 10px;
+    border: 1px solid #999;
+  }
+  .btns {
+    border: 1px solid #333;
+    color: #333;
+    padding: 4px 6px;
+    font-style: normal;
+    border-radius: 8px;
+    cursor: pointer;
+    user-select: none;
+  }
+}
+.title_i {
+  text-align: center;
+  font-size: 12px;
+  color: rgba(134, 144, 156, 1);
+}
+</style>

src/views/finance/paymentList/index.vue

@@ -0,0 +1,300 @@
+<template>
+  <div id="paymentList">
+    <search-box-new
+      ref="searchBox"
+      :formData="formData"
+      :formList="formList"
+      @search="search"
+      @init="init"
+    />
+    <table-list
+      rowKey="id"
+      ref="tableList"
+      :tableSets="tableSet"
+      :tableData="tableData"
+      :navText="navText"
+      :loading="loading"
+    >
+      <template slot="customize">
+        <el-button size="medium" @click="batch" type="warning"
+          >批量支付</el-button
+        > </template
+      ><template slot="btn" slot-scope="props">
+        <el-button type="text" @click="editClick(props.scope.row)"
+          >支付</el-button
+        >
+      </template>
+    </table-list>
+    <pagination
+      :total="total"
+      :pageSize="formData.pageSize"
+      :currentPage="formData.pageNum"
+      @handleSizeChange="handleSizeChange"
+      @handleCurrentChange="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+import searchBoxNew from "@/components/searchBoxNew";
+import tableList from "@/components/tableList";
+import pagination from "@/components/pagination";
+export default {
+  name: "PaymentList",
+  components: { searchBoxNew, tableList, pagination },
+  data() {
+    return {
+      disabledBtn: false,
+      loading: false, //当前表单加载是否加载动画
+      navText: {
+        title: "提现支付列表",
+        index: 0,
+        ch: "条",
+        num: true,
+        choice: true,
+        addHide: true,
+        openCheckMore: true,
+        changeWidth: "100px",
+        backFatherBtn: {
+          status: false,
+          title: "配置下单填选模板",
+        },
+      },
+      //搜索
+      formList: [
+        {
+          prop1: "classStartTime",
+          prop2: "classEndTime",
+          placeholder1: "开始时间",
+          placeholder2: "结束时间",
+          scope: "moreDataPicker",
+        },
+        {
+          lable: "提现单号",
+          prop: "name",
+          placeholder: "请输入提现单号",
+        },
+        {
+          lable: "姓名",
+          prop: "name",
+          placeholder: "请输入姓名",
+        },
+        {
+          prop: "status1",
+          placeholder: "状态",
+          scope: "select",
+          noClear: false,
+          options: [
+            { label: "待处理", value: 2 },
+            { label: "已处理", value: 1 },
+            { label: "全部", value: 0 },
+          ],
+        },
+      ],
+      formData: {
+        status: "0,1",
+        pageSize: 10,
+        pageNum: 1,
+      },
+      // 表单
+      tableSet: [
+        {
+          label: "排序",
+          prop: "sort",
+          hidden: true,
+        },
+        {
+          label: "名称",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "佣金总额",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "时间",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "所属活动",
+          prop: "name",
+          hidden: true,
+        },
+      ],
+      tableData: [], //表单数据
+      total: 0, //一共多少条
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    batch() {
+      if (!this.$refs.tableList.allCheckData.length) {
+        this.$message.warning("请勾选需要批量支付的数量");
+        return;
+      }
+    },
+    editClick(e) {
+      console.log("支付", e);
+    },
+    search(v) {
+      this.loading = true;
+      if (v === 2) {
+        this.formData = {
+          status: "0,1",
+          pageSize: 10,
+          pageNum: 1,
+        };
+      }
+      var data = JSON.parse(JSON.stringify(this.formData));
+      if (this.formData.classStartTime) {
+        data.classStartTime = parseInt(data.classStartTime / 1000);
+      }
+      if (this.formData.classEndTime) {
+        data.classEndTime = parseInt(data.classEndTime / 1000);
+      }
+      this.$api
+        .inquirebusinessList(data)
+        .then((res) => {
+          this.tableData = res.rows;
+          this.total = res.total;
+          this.navText.index = res.total;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    init() {
+      this.search(2);
+    },
+    del(v) {
+      this.$alert(
+        "确定删除此内容？<br />内容删除后将无法恢复，请慎重考虑",
+        "提示",
+        {
+          dangerouslyUseHTMLString: true,
+        }
+      )
+        .then(() => {
+          this.$message.success("删除成功");
+          this.search();
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+
+    handleSizeChange(v) {
+      this.formData.pageSize = v;
+      this.formData.pageNum = 1;
+      this.search();
+    },
+    handleCurrentChange(v) {
+      this.formData.pageNum = v;
+      this.search();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+/deep/.el-button {
+  border-radius: 8px;
+}
+/deep/.el-dialog {
+  border-radius: 8px;
+  .el-dialog__header {
+    padding: 0;
+    .hearders {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0px 18px 0px 20px;
+      border-bottom: 1px solid #e2e2e2;
+      .leftTitle {
+        font-size: 14px;
+        font-weight: bold;
+        color: #2f4378;
+      }
+      .rightBoxs {
+        display: flex;
+        align-items: center;
+        img {
+          width: 14px;
+          height: 14px;
+          margin-left: 13px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  .el-dialog__footer {
+    padding: 0;
+    .dialog-footer {
+      padding: 0px 40px;
+      height: 70px;
+      border-top: 1px solid #e2e2e2;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+}
+.imgBox {
+  width: 100%;
+  // height: 210px;
+  border: 1px solid #e2e2e2;
+  border-radius: 8px;
+  padding: 8px 8px 3px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .imgLabel {
+    flex: 1;
+    width: 100%;
+    border: 1px dotted #e2e2e2;
+    color: #999;
+    font-size: 14px;
+    cursor: pointer;
+    border-radius: 8px;
+    .msPhoto {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      max-width: 100%;
+      max-height: 270px;
+      img {
+        max-width: 100%;
+        max-height: 270px;
+      }
+    }
+    .imgbbx {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      i {
+        font-weight: bold;
+        margin: 14px 0;
+        font-size: 24px;
+      }
+    }
+  }
+  p {
+    margin: 5px 0px;
+  }
+}
+.numInputs {
+  width: 150px;
+}
+</style>

src/views/finance/withdrawal/audit.vue

@@ -0,0 +1,139 @@
+<template>
+  <div id="">
+    <el-dialog
+      :visible.sync="dialogVisible"
+      width="560px"
+      :show-close="false"
+      :close-on-click-modal="false"
+    >
+      <div slot="title" class="hearders">
+        <div class="leftTitle">业务员</div>
+        <div class="rightBoxs">
+          <img src="@/assets/images/Close@2x.png" alt="" @click="close" />
+        </div>
+      </div>
+      <div>
+        <el-form
+          label-position="right"
+          label-width="110px"
+          :model="listData"
+          :rules="rules"
+          ref="listData"
+        >
+          <el-form-item label="申请详情">
+            <div><span>tang</span><span>发起了提现申请</span></div>
+            <div>本次提现金额：￥1500.00</div>
+          </el-form-item>
+
+          <el-form-item label="审核结果" prop="jg">
+            <el-radio-group v-model="listData.jg">
+              <el-radio :label="1">同意</el-radio>
+              <el-radio :label="0">拒绝</el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+          <el-form-item label="审核意见" prop="yj">
+            <el-input
+              type="textarea"
+              :rows="2"
+              v-model="listData.yj"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="close">取 消</el-button>
+        <el-button
+          type="primary"
+          :loading="disabledBtn"
+          @click="submit('listData')"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      disabledBtn: false,
+      //   弹窗数据
+      listData: {},
+      //表单验证
+      rules: {
+        jg: [
+          {
+            required: true,
+            message: "请选择审核结果",
+            trigger: "change",
+          },
+        ],
+        yj: [
+          {
+            required: true,
+            message: "请输入审核意见",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    showBox(e) {
+      this.dialogVisible = true;
+    },
+    submit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.rulesTableSumbit();
+        } else {
+          return false;
+        }
+      });
+    },
+    rulesTableSumbit() {
+      this.disabledBtn = true;
+      setTimeout(() => {
+        this.$message.success("提交成功");
+        this.disabledBtn = false;
+        this.dialogVisible = false;
+        this.search();
+      }, 500);
+    },
+    close() {
+      this.$refs.listData.clearValidate();
+      this.dialogVisible = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.header_img {
+  & > .imageStyBoxShow {
+    border-radius: 50%;
+    overflow: hidden;
+    width: 60px;
+    height: 60px;
+    margin-right: 10px;
+    border: 1px solid #999;
+  }
+  .btns {
+    border: 1px solid #333;
+    color: #333;
+    padding: 4px 6px;
+    font-style: normal;
+    border-radius: 8px;
+    cursor: pointer;
+    user-select: none;
+  }
+}
+.title_i {
+  text-align: center;
+  font-size: 12px;
+  color: rgba(134, 144, 156, 1);
+}
+</style>

src/views/finance/withdrawal/index.vue

@@ -0,0 +1,327 @@
+<template>
+  <div id="withdrawal">
+    <search-box-new
+      ref="searchBox"
+      :formData="formData"
+      :formList="formList"
+      @search="search"
+      @init="init"
+    />
+    <table-list
+      rowKey="id"
+      ref="tableList"
+      :tableSets="tableSet"
+      :tableData="tableData"
+      :navText="navText"
+      :loading="loading"
+      ><template slot="btn" slot-scope="props"
+        ><el-button type="text" @click="audit(props.scope.row)"
+          >审核</el-button
+        >
+        <el-button type="text" @click="editClick(props.scope.row)"
+          >详情</el-button
+        >
+      </template>
+    </table-list>
+    <pagination
+      :total="total"
+      :pageSize="formData.pageSize"
+      :currentPage="formData.pageNum"
+      @handleSizeChange="handleSizeChange"
+      @handleCurrentChange="handleCurrentChange"
+    />
+    <audit ref="audit"></audit>
+  </div>
+</template>
+
+<script>
+import searchBoxNew from "@/components/searchBoxNew";
+import tableList from "@/components/tableList";
+import pagination from "@/components/pagination";
+import audit from "./audit.vue"
+export default {
+  name: "Withdrawal",
+  components: { searchBoxNew, tableList, pagination,audit },
+  data() {
+    return {
+      disabledBtn: false,
+      loading: false, //当前表单加载是否加载动画
+      navText: {
+        title: "提现申请列表",
+        index: 0,
+        ch: "条",
+        num: true,
+        choice: false,
+        addHide: true,
+        openCheckMore: true,
+        changeWidth: "100px",
+        backFatherBtn: {
+          status: false,
+          title: "配置下单填选模板",
+        },
+      },
+      //搜索
+      formList: [
+        {
+          prop1: "classStartTime",
+          prop2: "classEndTime",
+          placeholder1: "开始时间",
+          placeholder2: "结束时间",
+          scope: "moreDataPicker",
+        },
+        {
+          lable: "提现单号",
+          prop: "name",
+          placeholder: "请输入提现单号",
+        },
+        {
+          lable: "姓名",
+          prop: "name",
+          placeholder: "请输入姓名",
+        },
+        {
+          prop: "status1",
+          placeholder: "状态",
+          scope: "select",
+          noClear: false,
+          options: [
+            { label: "待处理", value: 2 },
+            { label: "已处理", value: 1 },
+            { label: "全部", value: 0 },
+          ],
+        },
+      ],
+      formData: {
+        status: "0,1",
+        pageSize: 10,
+        pageNum: 1,
+      },
+      // 表单
+      tableSet: [
+        {
+          label: "提现单号",
+          prop: "sort",
+          hidden: true,
+        },
+        {
+          label: "申请时间",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "业务员ID",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "业务员姓名",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "所属机构",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "手机号",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "对应活动",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "提现方式",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "账号",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "金额（元）",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "状态",
+          prop: "name",
+          hidden: true,
+        },
+      ],
+      tableData: [], //表单数据
+      total: 0, //一共多少条
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    audit(e){
+      this.$refs.audit.showBox(e)
+    },
+    editClick(e) {
+      console.log("支付", e);
+    },
+    search(v) {
+      this.loading = true;
+      if (v === 2) {
+        this.formData = {
+          status: "0,1",
+          pageSize: 10,
+          pageNum: 1,
+        };
+      }
+      var data = JSON.parse(JSON.stringify(this.formData));
+      if (this.formData.classStartTime) {
+        data.classStartTime = parseInt(data.classStartTime / 1000);
+      }
+      if (this.formData.classEndTime) {
+        data.classEndTime = parseInt(data.classEndTime / 1000);
+      }
+      this.$api
+        .inquirebusinessList(data)
+        .then((res) => {
+          this.tableData = res.rows;
+          this.total = res.total;
+          this.navText.index = res.total;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    init() {
+      this.search(2);
+    },
+    del(v) {
+      this.$alert(
+        "确定删除此内容？<br />内容删除后将无法恢复，请慎重考虑",
+        "提示",
+        {
+          dangerouslyUseHTMLString: true,
+        }
+      )
+        .then(() => {
+          this.$message.success("删除成功");
+          this.search();
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+
+    handleSizeChange(v) {
+      this.formData.pageSize = v;
+      this.formData.pageNum = 1;
+      this.search();
+    },
+    handleCurrentChange(v) {
+      this.formData.pageNum = v;
+      this.search();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+/deep/.el-button {
+  border-radius: 8px;
+}
+/deep/.el-dialog {
+  border-radius: 8px;
+  .el-dialog__header {
+    padding: 0;
+    .hearders {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0px 18px 0px 20px;
+      border-bottom: 1px solid #e2e2e2;
+      .leftTitle {
+        font-size: 14px;
+        font-weight: bold;
+        color: #2f4378;
+      }
+      .rightBoxs {
+        display: flex;
+        align-items: center;
+        img {
+          width: 14px;
+          height: 14px;
+          margin-left: 13px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  .el-dialog__footer {
+    padding: 0;
+    .dialog-footer {
+      padding: 0px 40px;
+      height: 70px;
+      border-top: 1px solid #e2e2e2;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+}
+.imgBox {
+  width: 100%;
+  // height: 210px;
+  border: 1px solid #e2e2e2;
+  border-radius: 8px;
+  padding: 8px 8px 3px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .imgLabel {
+    flex: 1;
+    width: 100%;
+    border: 1px dotted #e2e2e2;
+    color: #999;
+    font-size: 14px;
+    cursor: pointer;
+    border-radius: 8px;
+    .msPhoto {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      max-width: 100%;
+      max-height: 270px;
+      img {
+        max-width: 100%;
+        max-height: 270px;
+      }
+    }
+    .imgbbx {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      i {
+        font-weight: bold;
+        margin: 14px 0;
+        font-size: 24px;
+      }
+    }
+  }
+  p {
+    margin: 5px 0px;
+  }
+}
+.numInputs {
+  width: 150px;
+}
+</style>

src/views/login.vue

@@ -57,6 +57,27 @@
             <img :src="codeUrl" @click="getCode" class="login-code-img" />
           </div>
         </el-form-item>
+        <div class="mar_stys textStys">手机号码</div>
+        <el-form-item prop="phonenumber">
+          <el-input
+            v-model="loginForm.phonenumber"
+            type="text"
+            placeholder="请输入手机号码"
+          >
+          </el-input>
+        </el-form-item>
+        <div class="mar_stys textStys">手机验证码</div>
+        <el-form-item prop="smsCode">
+          <el-input placeholder="获取验证码" v-model="loginForm.smsCode">
+            <span class="btn" slot="suffix" @click="getRegisterSms">
+              {{
+                registerCountDown == 0
+                  ? "获取验证码"
+                  : `${registerCountDown}秒重新获取`
+              }}
+            </span>
+          </el-input>
+        </el-form-item>
         <div class="rightStsyt">
           <el-checkbox v-model="loginForm.rememberMe" class="checkStyles"
             >记住密码</el-checkbox
@@ -85,7 +106,7 @@
 </template>
 
 <script>
-import { getCodeImg } from "@/api/login";
+import { getCodeImg, commondual_auth, commonsms_login } from "@/api/login";
 import Cookies from "js-cookie";
 import { encrypt, decrypt } from "@/utils/jsencrypt";
 
@@ -93,6 +114,7 @@ export default {
   name: "Login",
   data() {
     return {
+      registerCountDown: 0,
       codeUrl: "",
       cookiePassword: "",
       loginForm: {
@@ -101,6 +123,8 @@ export default {
         rememberMe: false,
         code: "",
         uuid: "",
+        phonenumber: "",
+        smsCode: "",
       },
       loginRules: {
         username: [
@@ -110,6 +134,12 @@ export default {
           { required: true, trigger: "blur", message: "请输入您的密码" },
         ],
         code: [{ required: true, trigger: "change", message: "请输入验证码" }],
+        phonenumber: [
+          { required: true, trigger: "blur", message: "请输入手机号码" },
+        ],
+        smsCode: [
+          { required: true, trigger: "blur", message: "请输入手机验证码" },
+        ],
       },
       loading: false,
       // 验证码开关
@@ -117,6 +147,8 @@ export default {
       // 注册开关
       register: false,
       redirect: undefined,
+      commondual: false,
+      getRegisterCodeLock: false,
     };
   },
   watch: {
@@ -128,10 +160,55 @@ export default {
     },
   },
   created() {
+    commondual_auth().then((res) => {
+      if (res.data === "1") {
+        this.commondual = true;
+      } else {
+        this.commondual = false;
+      }
+    });
     this.getCode();
     this.getCookie();
   },
   methods: {
+    /**
+     * 获取注册验证码
+     */
+    getRegisterSms() {
+      var self = this;
+      this.$refs.loginForm.validateField("phonenumber", (valid) => {
+        if (!valid) {
+          if (this.registerCountDown == 0) {
+            if (this.getRegisterCodeLock) {
+              return;
+            }
+            this.getRegisterCodeLock = true;
+            commonsms_login({ tel: this.loginForm.phonenumber })
+              .then((res) => {
+                this.getRegisterCodeLock = false;
+                this.$message({
+                  message: `验证码已发送`,
+                  type: "success",
+                });
+                this.registerCountDown = 60;
+                this.registerCountDownTimer = setInterval(() => {
+                  self.registerCountDown--;
+                  if (self.registerCountDown == 0) {
+                    clearInterval(self.registerCountDownTimer);
+                  }
+                }, 1000);
+              })
+              .catch((err) => {
+                this.$message({
+                  message: err.msg,
+                  type: "error",
+                });
+                this.getRegisterCodeLock = false;
+              });
+          }
+        }
+      });
+    },
     getCode() {
       getCodeImg().then((res) => {
         // this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
@@ -333,4 +410,13 @@ export default {
   display: flex;
   align-items: center;
 }
+
+.btn {
+  font-size: 14px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #3f8dfd;
+  white-space: nowrap;
+  cursor: pointer;
+}
 </style>