Skip to content

Z
zhichan
Commit ac091c86 by 尹亚亭
Options

v0.0.1 selftmreg

parent 7d5eacf0
Showing with 200 additions and 113 deletions
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: "",
zhuAddress: "",
// 统一社会信用代码（企业和个体户）
xinyongma: "",
// 个体户
// 姓名
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() {
......
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");
......
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;
console.log("11111", this.$parent.$parent.abc);
// // 去编辑之后的信息装填
// this.ruleForm.resource = this.stepsParams.stepOneThreeParams.type;
// 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();
});
}
};
......
channel-access/src/views/pages/selftmreg/PayOrder.vue deleted 100644 → 0
<!-- 第四步：支付订单页面 -->
<template>
<div>支付订单页面</div>
</template>
\ No newline at end of file
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" />
<ApplicationInfo v-if="index == 1" />
<keep-alive>
<!-- 缓存第一步 填写基本信息 组件的内容 -->
<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
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
>
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
<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
type="primary"
@click="
dialogVisible = false;
index++;
"
>确 定</el-button
>
<el-button type="primary" @click="intoStepTwo">确 定</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,
PayOrder
ConfirmOrder
},
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() {
if (this.index == 0) {
this.$router.push("/selftmreg");
}
},
created() {},
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 == "" ||
this.confirmStepsParams.stepOneThreeParams.bigKind == ""
) {
}
// 如果商标类型是 图形
else if (this.confirmStepsParams.stepOneThreeParams.type == 2) {
// 如果商标图样为空
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;
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment