v0.0.1 selftmreg

ac091c86 · 尹亚亭 · 7d5eacf0 · ac091c86 · ac091c86 · ac091c86
Commit ac091c86 authored Jan 13, 2020 by 尹亚亭
5 changed files
--- a/channel-access/src/views/pages/selftmreg/ApplicationInfo.vue
+++ b/channel-access/src/views/pages/selftmreg/ApplicationInfo.vue
@@ -254,20 +254,32 @@ import imgUrl2 from "@/assets/imgs/sbzc/wtsD.png";
 import imgUrl3 from "@/assets/imgs/sbzc/yxqD.png";
 import { getCompanyInfoByLikeName } from "@/api/tmTools.js";
 export default {
+  // 接收父组件传过来的参数
+  // props: ["stepsParams"],
  data() {
    return {
      // 申请人信息表格 及 验证
      aruleForm: {
-        name: "中",
+        // 申请人类型：企业 个体户
        resource: 1,
-        xinyongma: "",
+        // 企业
+        // 公司名称
+        name: "中",
+        // 执照详细地址
        address: "",
+        // 邮政编码（企业和个体户）
        postal: "",
-        username: "",
+        //  统一社会信用代码（企业和个体户）
-        idCard: "",
+        xinyongma: "",
-        zhuAddress: "",
+        // 个体户
+        // 姓名
        uname: "",
+        // 身份证号
        uid: "",
+        // 身份证住址
        uaddress: ""
      },
      arules: {
@@ -323,6 +335,30 @@ export default {
      toViewImgSrc: ""
    };
  },
+  mounted() {
+    // // 去编辑之后的第二步页面信息的装填
+    // // 填写申请人信息部分
+    // this.aruleForm.resource = this.stepsParams.stepTwoNineParams.atype;
+    // // 企业
+    // this.aruleForm.name = this.stepsParams.stepTwoNineParams.companyName;
+    // this.aruleForm.address = this.stepsParams.stepTwoNineParams.licenseAddress;
+    // if (this.stepsParams.stepTwoNineParams.atype == 1) {
+    //   this.aruleForm.xinyongma = this.stepsParams.stepTwoNineParams.creditCode;
+    //   this.aruleForm.postal = this.stepsParams.stepTwoNineParams.postalCode;
+    // }
+    // // 个体户
+    // this.aruleForm.uname = this.stepsParams.stepTwoNineParams.username;
+    // this.aruleForm.uid = this.stepsParams.stepTwoNineParams.idCard;
+    // this.aruleForm.uaddress = this.stepsParams.stepTwoNineParams.idAddress;
+    // if (this.stepsParams.stepTwoNineParams.atype == 2) {
+    //   this.aruleForm.xinyongma = this.stepsParams.stepTwoNineParams.ucreditCode;
+    //   this.aruleForm.postal = this.stepsParams.stepTwoNineParams.upostalCode;
+    // }
+    // // 订单联系人部分
+    // this.ruleForm.contanct = this.stepsParams.stepTwoNineParams.customer;
+    // this.ruleForm.phone = this.stepsParams.stepTwoNineParams.telNum;
+    // this.ruleForm.email = this.stepsParams.stepTwoNineParams.email;
+  },
  methods: {
    // 资料上传
    enter(index) {
@@ -353,13 +389,10 @@ export default {
        cb(res.data);
      });
    },
+    // 统一社会信用代码  和 执照详细地址 的自动装填
    handleSelect(item) {
      this.aruleForm.xinyongma = item.creditCode;
      this.aruleForm.address = item.regLocation;
-    },
-    addMessage() {
-      console.log(this.ruleForm);
    }
  },
  updated() {

--- a/channel-access/src/views/pages/selftmreg/ConfirmOrder.vue
+++ b/channel-access/src/views/pages/selftmreg/ConfirmOrder.vue
@@ -223,33 +223,34 @@ export default {
  data() {
    return {
      textarea: "",
      // 选中的商标种类
      checkedKinds: [],
      // 商标展示
+      // 手动上传 或 上传 的商标
      brandIconManual: "",
+      // 自动上传的商标
      brandIconAuto: ""
    };
  },
  methods: {
+    // 子向父传参 this.$emit(eventName,params)
    // 编辑 商标信息
    goStepOne() {
-      console.log(111);
      // 去第一步骤的页面
      this.$emit("getIndex", 0);
    },
    // 编辑 申请人及联系人信息
    goStepTwo() {
-      console.log(222);
      // 去第二步骤的页面
      this.$emit("getIndex", 1);
    }
  },
  created() {
+    // 获取缓存里面的已经选中的商品/服务项
    let checkedKinds = JSON.parse(localStorage.getItem("classDataList"));
    this.checkedKinds = checkedKinds;
+    // 获取缓存里面的商标图片地址
    let brandIconManual = localStorage.getItem("manualImgToConfirm");
    this.brandIconManual = brandIconManual;
    let brandIconAuto = localStorage.getItem("autoImgToConfirm");

--- a/channel-access/src/views/pages/selftmreg/ModifyTrademark.vue
+++ b/channel-access/src/views/pages/selftmreg/ModifyTrademark.vue
@@ -187,6 +187,7 @@
        </div>
      </div>
      <!-- 右侧选中呈现与清除选择 -->
      <div class="classTrademark-right">
        <div class="classTrademark-right-top">
          <p>已选择的商品/服务项</p>
@@ -229,6 +230,7 @@
 </template>
 <script>
+// 导入获取接口数据的方法
 import {
  getNiceQueryCategory,
  getNiceQueryFilter,
@@ -236,9 +238,11 @@ import {
  getOss,
  uploadStandardTm
 } from "@/api/tmTools.js";
+// 导入图片上传的公共组件
 import UploadImg from "@/components/uploadImg";
 export default {
+  // props: ["stepsParams"],
  components: {
    UploadImg
  },
@@ -468,6 +472,14 @@ export default {
              });
              if (index == -1) {
                this.classDataList.push(data);
+                // // 选择的商品种类的数据更新存储在父组件的数据里面
+                // this.$parent.$parent.confirmStepsParams.stepOneThreeParams.smallKinds = this.classDataList;
+                // console.log(
+                //   this.$parent.$parent.confirmStepsParams.stepOneThreeParams
+                //     .smallKinds
+                // );
                // 把选中的小类数据保存在localstorage里面
                localStorage.setItem(
                  "classDataList",
@@ -489,6 +501,7 @@ export default {
              message: "最多选择10项",
              type: "warning"
            });
+            // 把此节点设置为不可选中状态
            this.$refs.tree.setChecked(data, false);
          }
        } else {
@@ -510,8 +523,6 @@ export default {
        hasChild = true;
      }
-      // console.log(node);
      // 初始的一级45个类别的静态数据的装填
      if (node.level === 0) {
        return resolve(this.ncldata);
@@ -526,7 +537,6 @@ export default {
          let index = this.ncldata.findIndex((item, index) => {
            return item.code == node.data.code;
          });
-          // console.log(index);
          this.ncldata[index].children = res.data.rows;
          setTimeout(() => {
            var data;
@@ -579,14 +589,14 @@ export default {
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.checkedList.length;
-      this.keyZi = "";
+      // this.keyZi = "";
    },
    // 点击确定,隐藏类别选择框
    confirmClass() {
      this.typeListShow = false;
    },
-    // 过滤关键字  绑定el-input的change事件,使得在输入框失去焦点或用户按下回车keyCode=13时触发
+    // 过滤关键字 绑定.native回车事件 用户按下回车keyCode=13时触发
    filterKeyZi() {
      let classCodes = this.checkedType.map(item => {
        return item.substring(0, 2);
@@ -614,9 +624,10 @@ export default {
      this.action = res.data.url;
    });
-    // 获取并更改最外层父组件的数据
+    // // 去编辑之后的信息装填
-    this.$parent.$parent.abc = 456;
+    // this.ruleForm.resource = this.stepsParams.stepOneThreeParams.type;
-    console.log("11111", this.$parent.$parent.abc);
+    // this.ruleForm.name = this.stepsParams.stepOneThreeParams.tname;
+    // this.imgUrl = this.stepsParams.stepOneThreeParams.icon;
  },
  updated() {
    this.$nextTick(() => {
@@ -629,9 +640,6 @@ export default {
        this.$parent.$parent.confirmStepsParams.stepOneThreeParams.bigKind = this.$refs.bigKind.innerHTML;
        this.$parent.$parent.confirmStepsParams.stepOneThreeParams.smallKinds = this.classDataList;
      }
-      // 手动上传按钮的改变
-      // this.manualupload();
    });
  }
 };

--- a/channel-access/src/views/pages/selftmreg/PayOrder.vue
+++ b/channel-access/src/views/pages/selftmreg/PayOrder.vue
-<!-- 第四步：支付订单页面 -->
-<template>
-  <div>支付订单页面</div>
-</template>
\ No newline at end of file
--- a/channel-access/src/views/pages/selftmreg/Selftmreg.vue
+++ b/channel-access/src/views/pages/selftmreg/Selftmreg.vue
@@ -20,24 +20,33 @@
        <el-form class="demo-ruleForm" label-width="120px">
          <div class="selftmreg_main">
            <div class="selftmreg_shu"></div>
-            <ModifyTrademark v-if="index == 0" />
+            <keep-alive>
-            <ApplicationInfo v-if="index == 1" />
+              <!-- 缓存第一步 填写基本信息 组件的内容 -->
+              <ModifyTrademark
+                v-if="index == 0"
+                :stepsParams="confirmStepsParams"
+              />
+            </keep-alive>
+            <keep-alive>
+              <!-- 缓存第二步 填写申请人信息 组件的内容 -->
+              <ApplicationInfo
+                v-if="index == 1"
+                :stepsParams="confirmStepsParams"
+              />
+            </keep-alive>
+            <!-- 第三步 确认订单 -->
            <ConfirmOrder v-if="index == 2" @getIndex="getindex" />
-            <PayOrder v-if="index == 3" />
          </div>
        </el-form>
      </div>
    </div>
    <!-- 商品/服务项目不足10项 对话框 -->
-    <el-dialog
+    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
-      title="提示"
-      :visible.sync="dialogVisible"
-      width="30%"
-      :before-close="handleClose"
-    >
      <span
-        >01类化学原料，商品/服务项目<i>不足10项</i>，已选{{
+        >{{
+          this.confirmStepsParams.stepOneThreeParams.bigKind
+        }}，商品/服务项目<i>不足10项</i>，已选{{
          this.confirmStepsParams.stepOneThreeParams.smallKinds.length
        }}项，还可选{{
          10 - this.confirmStepsParams.stepOneThreeParams.smallKinds.length
@@ -45,14 +54,7 @@
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">修改</el-button>
-        <el-button
+        <el-button type="primary" @click="intoStepTwo">确 定</el-button>
-          type="primary"
-          @click="
-            dialogVisible = false;
-            index++;
-          "
-          >确 定</el-button
-        >
      </span>
    </el-dialog>
@@ -85,19 +87,19 @@
 </template>
 <script>
-// 主体页面里面的组件
+// 主体内容步骤条组件
 import SelftmregPageSteps from "./SelftmregPageSteps";
+// 主体页面三个步骤对应的组件
 import ModifyTrademark from "./ModifyTrademark";
 import ApplicationInfo from "./ApplicationInfo";
 import ConfirmOrder from "./ConfirmOrder";
-import PayOrder from "./PayOrder";
 export default {
  components: {
    SelftmregPageSteps,
    ModifyTrademark,
    ApplicationInfo,
-    ConfirmOrder,
+    ConfirmOrder
-    PayOrder
  },
  data() {
    return {
@@ -106,20 +108,26 @@ export default {
      // 是否已经勾选同意协议
      checked: false,
-      abc: 1243,
      // 验证参数:步骤一二的必填项参数验证
      confirmStepsParams: {
        stepOneThreeParams: {
          // 商标选择
+          // 商标类型
          type: 1,
+          // 商标名称
          tname: "",
+          // 商标图样
          icon: "",
-          // 手动上传或是上传图片
+          // 商标类型是文字时，对应的 手动上传 和 自动生成 按钮的点击状态
+          // 手动上传或是上传图片 是否点击
          brandmanual: false,
-          // 自动生成图片
+          // 自动生成图片 是否点击
          brandauto: false,
          // 分类选择
+          // 选中的类别 xx xxxxx 对应 大类编号 大类名称
          bigKind: "",
+          // 已经选中的商品/服务项
          smallKinds: []
        },
        stepTwoNineParams: {
@@ -144,40 +152,59 @@ export default {
        }
      },
-      // 商品/服务项目不足10项 对话框
+      // 商品/服务项目不足10项时 对话框 的显示和隐藏
      dialogVisible: false
    };
  },
-  created() {
+  created() {},
-    if (this.index == 0) {
-      this.$router.push("/selftmreg");
-    }
-  },
  methods: {
-    // 去编辑的对应步骤
+    // 商品/服务项目不足10项 对话框 点击确定按钮 进入第二步 填写申请人信息
+    intoStepTwo() {
+      this.dialogVisible = false;
+      this.index++;
+      let as = document.getElementsByTagName("a");
+      let is = document.getElementsByTagName("i");
+      // 给 第二步填写申请人信息对应的步骤进度条 添加高亮样式
+      as[1].classList.add("active");
+      is[3].classList.add("active");
+    },
+    // 接收第三步确认订单 子组件里面传来的index参数 去编辑的对应步骤组件
    getindex(index) {
-      console.log(index);
+      // 商标信息的去编辑 对应 第一步 填写基本信息 index =0
+      //  申请人及联系人信息 对应 第二步 填写申请人信息 index =1
      this.index = index;
+      let as = document.getElementsByTagName("a");
+      let is = document.getElementsByTagName("i");
+      if (index == 0) {
+        // 去掉该 第三步确认订单 步骤条的样式
+        as[2].classList.remove("active");
+        is[4].classList.remove("active");
+      }
+      // 去掉该 第三步确认订单 步骤条的样式 index=1时
+      as[this.index + 1].classList.remove("active");
+      is[this.index + 3].classList.remove("active");
    },
+    // 点击下一步按钮
    next() {
      // 获取a标签和i标签以给其加入高亮的样式
      let as = document.getElementsByTagName("a");
      let is = document.getElementsByTagName("i");
-      // 有选择好的 自动上传图标 或 手动上传图标
+      // 有选择的非空的 自动上传图标 或 手动上传图标 的localStorage缓存数据
      this.confirmStepsParams.stepOneThreeParams.icon =
        localStorage.getItem("autoImgToConfirm") ||
        localStorage.getItem("manualImgToConfirm");
-      if (this.index == 2) {
-        // 给 第三步确认订单信息对应的步骤进度条 添加高亮样式
+      // 第二步 填写申请人信息
-        as[2].classList.add("active");
-        is[4].classList.add("active");
-      }
      if (this.index == 1) {
        // 给 第二步填写申请人信息对应的步骤进度条 添加高亮样式
        as[1].classList.add("active");
        is[3].classList.add("active");
        // 进入第三步之前的信息验证
+        // 如果申请人类型是企业
        if (this.confirmStepsParams.stepTwoNineParams.atype == 1) {
+          // 企业对应的四项申请人信息 与 订单联系人对应的三项必填信息 有任一个为空
          if (
            this.confirmStepsParams.stepTwoNineParams.companyName == "" ||
            this.confirmStepsParams.stepTwoNineParams.creditCode == "" ||
@@ -187,14 +214,24 @@ export default {
            this.confirmStepsParams.stepTwoNineParams.telNum == "" ||
            this.confirmStepsParams.stepTwoNineParams.email == ""
          ) {
+            // 给出完善信息提示
            this.$message({
              type: "warning",
              message: "请完善信息"
            });
-          } else {
+          }
+          // 企业对应的四项申请人信息 与 订单联系人对应的三项必填信息 均为非空，验证通过
+          else {
+            // 进入下一个组件 第三步确认订单信息组件
            this.index++;
+            // 给 第三步确认订单信息对应的步骤进度条 添加高亮样式
+            as[2].classList.add("active");
+            is[4].classList.add("active");
+          }
        }
-        } else if (this.confirmStepsParams.stepTwoNineParams.atype == 2) {
+        // 如果申请人类型是个体户
+        else if (this.confirmStepsParams.stepTwoNineParams.atype == 2) {
+          // 个体户对应的五项申请人信息 与 订单联系人对应的三项必填信息 有任一个为空
          if (
            this.confirmStepsParams.stepTwoNineParams.username == "" ||
            this.confirmStepsParams.stepTwoNineParams.idCard == "" ||
@@ -205,93 +242,107 @@ export default {
            this.confirmStepsParams.stepTwoNineParams.telNum == "" ||
            this.confirmStepsParams.stepTwoNineParams.email == ""
          ) {
+            // 给出完善信息提示
            this.$message({
              type: "warning",
              message: "请完善信息"
            });
-          } else {
+          }
+          // 个体户对应的五项申请人信息 与 订单联系人对应的三项必填信息 均为非空，验证通过
+          else {
+            // 进入下一个组件 第三步确认订单信息组件
            this.index++;
+            // 给 第三步确认订单信息对应的步骤进度条 添加高亮样式
+            as[2].classList.add("active");
+            is[4].classList.add("active");
          }
        }
      }
+      // 第一步 填写基本信息
      if (this.index == 0) {
        // 进入第二步之前的信息验证
+        // 商标类型是 文字 和 文字及图形 则含有 商标名字 这一项
        if (
          this.confirmStepsParams.stepOneThreeParams.type == 1 ||
          this.confirmStepsParams.stepOneThreeParams.type == 3
        ) {
-          console.log(
+          // 如果商标名字 或 商标图样 为空
-            this.confirmStepsParams.stepOneThreeParams.tname,
-            this.confirmStepsParams.stepOneThreeParams.icon,
-            this.confirmStepsParams.stepOneThreeParams.bigKind
-          );
          if (
            this.confirmStepsParams.stepOneThreeParams.tname == "" ||
-            this.confirmStepsParams.stepOneThreeParams.icon == ""
+            this.confirmStepsParams.stepOneThreeParams.icon == null
          ) {
+            //  提示完善信息
            this.$message({
              type: "warning",
              message: "请完善信息"
            });
-            console.log("asdasdsadsa");
+          }
-          } else if (this.confirmStepsParams.stepOneThreeParams.bigKind == "") {
+          // 如果商标名字 或 商标图样 非空 商标分类并未选择
+          else if (
+            this.confirmStepsParams.stepOneThreeParams.bigKind == "" ||
+            this.confirmStepsParams.stepOneThreeParams.smallKinds.length == 0
+          ) {
            this.$message({
              type: "warning",
-              message: "请完善信息"
+              message: "请选择商品分类"
            });
-          } else {
+          }
+          // 如果商标名字 或 商标图样 非空 商标分类已经选择
+          else {
+            // 如果选的数量少于十个
            if (
-              this.confirmStepsParams.stepOneThreeParams.smallKinds.length < 10
+              this.confirmStepsParams.stepOneThreeParams.smallKinds.length <= 10
            ) {
-              // 弹出提示框
+              // 弹出提示框   在提示框的 确定 按钮里进入下一个组件 第二步填写申请人信息 组件并给其对应进度条高亮
              this.dialogVisible = true;
            }
-            // this.index++;
-            // 给 第二步填写申请人信息对应的步骤进度条 添加高亮样式
-            as[1].classList.add("active");
-            is[3].classList.add("active");
          }
-        } else if (this.confirmStepsParams.stepOneThreeParams.type == 2) {
+        }
-          if (
+        // 如果商标类型是 图形
-            this.confirmStepsParams.stepOneThreeParams.icon == "" ||
+        else if (this.confirmStepsParams.stepOneThreeParams.type == 2) {
-            this.confirmStepsParams.stepOneThreeParams.bigKind == ""
+          // 如果商标图样为空
-          ) {
+          if (this.confirmStepsParams.stepOneThreeParams.icon == null) {
+            // 提示完善信息
            this.$message({
              type: "warning",
              message: "请完善信息"
            });
-          } else {
+          }
-            if (
+          // 商标图样非空
-              this.confirmStepsParams.stepOneThreeParams.smallKinds.length < 10
+          else {
-            ) {
+            // 如果大类为空
+            if (this.confirmStepsParams.stepOneThreeParams.bigKind == "") {
+              // 提示选择商标分类
              this.$message({
                type: "warning",
-                message: "商品/服务项目不足10项"
+                message: "请选择商标分类"
              });
            }
+            // 如果大类非空， 选的数量少于十个
+            else if (
+              this.confirmStepsParams.stepOneThreeParams.smallKinds.length <= 10
+            ) {
+              // 弹出提示框  在提示框的 确定 按钮里进入下一个组件 第二步填写申请人信息 组件并给其对应进度条高亮
+              this.dialogVisible = true;
+            }
          }
        }
      }
    },
+    // 第二步 填写申请人信息 组件时， 有一个上一步按钮
    prev() {
      // 获取a标签和i标签以给其加入高亮的样式
      let as = document.getElementsByTagName("a");
      let is = document.getElementsByTagName("i");
-      // 去掉该步骤条的样式
+      // 去掉该步骤条 第二步 填写申请人信息 的样式
      as[this.index].classList.remove("active");
      is[this.index + 2].classList.remove("active");
-      // 加载上一步的组件
+      // 加载上一步的组件 显示 第一步 填写基本信息
      this.index--;
-    },
-    // 商品/服务项目不足10项 对话框
-    handleClose(done) {
-      this.$confirm("确认关闭？")
-        .then(_ => {
-          done();
-        })
-        .catch(_ => {});
    }
  },
  mounted() {
@@ -299,11 +350,11 @@ export default {
    localStorage.removeItem("manualImgToConfirm");
    localStorage.removeItem("autoImgToConfirm");
-    // 手动上传或上传 参数更新
+    // 手动上传或上传 按钮点击 参数更新
    this.$bus.on("on-click-brandmanual", msg => {
      this.confirmStepsParams.stepOneThreeParams.brandmanual = msg;
    });
-    // 自动生成 参数更新
+    // 自动生成 按钮点击 参数更新
    this.$bus.on("on-click-brandauto", msg => {
      this.confirmStepsParams.stepOneThreeParams.brandauto = msg;
    });