Skip to content

Z
zhichan
Commit 42584e1c by 尹亚亭
Options

selftreg

parent 61b8bb81
Showing with 236 additions and 162 deletions
channel-access/src/views/pages/selftmreg/ConfirmOrder.vue
......@@ -11,6 +11,7 @@
</span>
</h4>
</div>
<!-- 商标信息 -->
<div class="brand-info">
<p>
<strong>商标类型：</strong>
......@@ -35,17 +36,7 @@
</p>
<p>
<strong>商标图样：</strong>
<!-- <img
:src="
this.$parent.$parent.confirmStepsParams.stepOneThreeParams.type ==
1 &&
this.$parent.$parent.confirmStepsParams.stepOneThreeParams
.brandauto == true
? brandIconAuto
: brandIconManual
"
alt
/> -->
<img :src="brandIcon" alt />
</p>
<p>
......@@ -75,6 +66,7 @@
</span>
</h4>
</div>
<!-- 申请人及联系人信息 -->
<div class="user-info">
<ul>
<li>
......@@ -203,6 +195,34 @@
</ul>
</div>
<!-- 材料信息 -->
<div>
<div class="info-title">
<i class="selftmreg_shuxian"></i>
<h4>
材料信息&nbsp;&nbsp;&nbsp;<strong
>(可跳过进行下一步，支付完成后，在订单中上传即可)</strong
>
</h4>
</div>
<div class="show-imgs">
<ul>
<li>
<img
src="http://via.placeholder.com/100X120/f60/fff?text=hello"
alt=""
/><span>营业执照</span>
</li>
<li>
<img
src="http://via.placeholder.com/100X120/f60/fff?text=hello"
alt=""
/><span>营业执照</span>
</li>
</ul>
</div>
</div>
<div class="info-title">
<i class="selftmreg_shuxian"></i>
<h4>订单备注</h4>
......@@ -219,18 +239,12 @@
<script>
export default {
props: ["msgFromParent"],
data() {
return {
textarea: "",
// 商标展示
brandIcon: "",
// 手动上传 或 上传 的商标
brandIconManual: "",
// 自动上传的商标
brandIconAuto: ""
brandIcon: ""
};
},
methods: {
......@@ -248,11 +262,6 @@ export default {
},
created() {
// 获取缓存里面的商标图片地址
let brandIconManual = localStorage.getItem("manualImgToConfirm");
this.brandIconManual = brandIconManual;
let brandIconAuto = localStorage.getItem("autoImgToConfirm");
this.brandIconAuto = brandIconAuto;
let brandIcon = localStorage.getItem("icon");
this.brandIcon = brandIcon;
}
......@@ -276,6 +285,13 @@ export default {
font-weight: 400;
color: rgba(83, 83, 83, 1);
margin-bottom: 15px;
strong {
margin-left: 35px;
font-size: 14px;
font-family: PingFangSC;
font-weight: 400;
color: rgba(99, 101, 105, 1);
}
}
}
// 编辑图文
......@@ -348,6 +364,28 @@ export default {
}
}
// 材料信息
.show-imgs {
padding-left: 44px;
ul {
display: flex;
li {
display: inline-block;
margin-left: 15px;
width: 100px;
height: 140px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
span {
color: #636569;
font-size: 14px;
line-height: 20px;
}
}
}
}
// 订单备注 样式没加上！！
.confirm div.el-textarea textarea.el-textarea__inner {
border-radius: 0;
......
channel-access/src/views/pages/selftmreg/ModifyTrademark.vue
......@@ -170,11 +170,10 @@
<!-- 树形控件 -->
<div class="classTrademark-left-tree">
<el-tree
v-if="showTrees"
:props="props"
:data="ncldata"
empty-text="暂无数据"
node-key="fullname"
node-key="name"
show-checkbox
:expand-on-click-node="false"
:render-after-expand="false"
......@@ -183,15 +182,11 @@
ref="tree"
id="classtree"
@check-change="handleCheckChange"
@node-click="handleNodeClick"
@check="handleCheckedNodes"
></el-tree>
<p v-else>暂无数据</p>
<!-- :default-expand-all="isTreeExpand" -->
</div>
</div>
<!-- 右侧选中呈现与清除选择 -->
<!-- 右侧选中呈现与清除选择 -->
<div class="classTrademark-right">
<div class="classTrademark-right-top">
<p>已选择的商品/服务项</p>
......@@ -223,8 +218,9 @@
closable
:disable-transitions="true"
@close="handleClose(tag)"
>{{ tag.fullname }}</el-tag
>{{ tag.code + " " + tag.name }}</el-tag
>
<!-- {{ tag.fullname }} -->
</div>
</div>
</div>
......@@ -246,7 +242,6 @@ import {
import UploadImg from "@/components/uploadImg";
export default {
// props: ["stepsParams"],
components: {
UploadImg
},
......@@ -279,8 +274,10 @@ export default {
// 分类信息选择
keyZi: "",
props: {
label(data) {
if (data.code == null || data.code == null) {
label(data, node) {
// data == node.data
// console.log(data, node, "two params of label function");
if (data.code == null || node.data.code == null) {
return data.name;
} else {
return data.code + " " + data.name;
......@@ -346,14 +343,6 @@ export default {
isIndeterminate: true,
checkAll: false,
checkedNcl: [],
// 树是否展开
isTreeExpand: false,
// 自动生成 和 手动上传的图片 的保存
autoImgToConfirm: "",
manualImgToConfirm: "",
// 尼斯数据分类选择
nclOptions: [
"01",
......@@ -402,11 +391,9 @@ export default {
"44",
"45"
],
//显示树
showTrees: true,
// 是否是搜索过
isSearched: true,
// 是否没有搜索过
notSearched: true,
searchedList: []
};
},
......@@ -417,22 +404,25 @@ export default {
this.loading = true;
this.imgUrl = msg;
uploadStandardTm(this.imgUrl).then(res => {
// 手动上传图片的 保存在 localStorage里面
this.manualImgToConfirm = res.data.url;
localStorage.setItem("manualImgToConfirm", this.manualImgToConfirm);
this.loading = false;
if (res.status == 0) {
this.$message({
type: "success",
message: "上传成功"
});
// 获取Oss
getOss().then(res => {
this.data = res.data;
this.data.key = this.setKey();
this.action = res.data.url;
});
} else {
this.$message.error("上传失败，请重新上传！");
}
});
},
setKey(name, flag) {
// console.log(flag);
var myDate = new Date();
var key =
"zc_" +
......@@ -458,19 +448,11 @@ export default {
this.loading = false;
if (res.status == 0) {
this.imgUrl = res.data.url;
// 自动生成的图片 保存在 localStorage里面
this.autoImgToConfirm = res.data.url;
localStorage.setItem("autoImgToConfirm", this.autoImgToConfirm);
}
});
}
// 传递参数，改变点击状态为true
this.$bus.emit("on-click-brandauto", true);
},
manualupload() {
// 传递参数，改变点击状态为true
this.$bus.emit("on-click-brandmanual", true);
},
manualupload() {},
// 分类信息选择
// 清除选中的标签
......@@ -478,7 +460,6 @@ export default {
this.classDataList.splice(this.classDataList.indexOf(tag), 1);
// 清除左边对应的数组的选中状态 !!! 不起作用
this.$refs.tree.setChecked(tag, false, true);
// 清除缓存里面的对应项的标签
},
// 删除所有的分类标签数据
deleteClassData() {
......@@ -498,9 +479,6 @@ export default {
type: "success",
message: "删除成功!"
});
// 清除缓存里面的对应项的标签
// localStorage.removeItem("classDataList");
})
.catch(() => {
this.$message({
......@@ -512,7 +490,7 @@ export default {
// 树形结构的处理节点是否被选中
handleCheckChange(data, checked, indeterminate) {
console.log("check-change", 11111111111);
console.log("check-change", 11111111111, indeterminate);
// 检测第三级节点是否被选中(一级节点两位code，二级节点四位code,三级节点6位或是0位code)
if (data.code.length !== 2 || data.code.length !== 4) {
......@@ -532,17 +510,21 @@ export default {
let index = this.classDataList.findIndex((item, index) => {
return data.code == item.code;
});
if (index == -1) {
// classDataList的装填
this.classDataList.push(data);
}
} else {
// 被选中的数据不属于同一个类别，把此节点设置为不可选中状态
this.$refs.tree.setChecked(data, false, true);
}
// 被选中的数据不属于同一类别
else {
// 被选中的数据不属于同一个类别，给出相应的提示信息
this.$message({
message: "只能选择同一个类别",
type: "warning"
});
// 被选中的数据不属于同一个类别，把此节点设置为不可选中状态
this.$refs.tree.setChecked(data, false, true);
}
} else {
// 被选中的数据大于10条，给出相应提示，并把Checked设置为false
......@@ -566,9 +548,10 @@ export default {
},
// 树形结构的节点数据的装填
loadNode(node, resolve) {
console.log(node);
console.log(node, "loadNode load function");
var hasChild;
if (this.isSearched) {
// 没有搜索过
if (this.notSearched) {
// 给出了树是否有子节点的判断条件，一级二级有子节点，三级没有
if (node.data !== null) {
hasChild = true;
......@@ -617,30 +600,48 @@ export default {
}, 0);
}
});
} else {
// console.log(node.level);
}
// 尼斯搜索后
else {
console.log(this.classDataList);
// 装填一级节点
if (node.level == 1) {
let index = this.searchedList.findIndex(item => {
return item.code == node.data.code;
});
let data = this.searchedList[index];
// 装填上 搜回来的数据的 一级数据 xx xxxx 尼斯大类 的 子集 xxxx xxxx二级尼斯数据
resolve(data.children);
} else if (node.level == 2) {
console.log(node.data.children, "node");
}
// 如果是二级节点
else if (node.level == 2) {
console.log(
node.data.children,
node.childNodes,
"array object observer"
);
// 装填二级节点的子集 三级的可选的 商品/服务项
resolve(node.data.children);
// // 把数据装填到this.classDataList里面
// node.data.children.forEach(element => {
// let indexsearch = this.classDataList.findIndex((item, index) => {
// return item.code == element.code;
// });
// console.log(indexsearch);
// // 不存在于 classDataList数组里面 或者是 不存在编号 即 它的code=""
// if (indexsearch == -1) {
// // classDataList的装填
// if (this.classDataList.length < 10) {
// console.log("dadadadada");
// this.classDataList.push(element);
// }
// console.log(this.classDataList);
// }
// });
}
}
},
// 节点点击时的方法
handleNodeClick(data, node, component) {
// console.log(data, node, component);
console.log(node);
console.log("node-click", 33333);
},
handleCheckedNodes(node, status) {
console.log("check of checkedNodes", 222222);
this.classDataList = status.checkedNodes;
},
// 全部选中
handleCheckAllChange(val) {
......@@ -666,35 +667,86 @@ export default {
// 过滤关键字 绑定.native回车事件 用户按下回车keyCode=13时触发
filterKeyZi() {
var _that = this;
this.isSearched = false;
this.notSearched = false;
// 从 checkedNcl 里面截取类别码
let classCodes = this.checkedNcl.map(item => {
return item.substring(0, 2);
});
// 根据输入的关键字和选择的分类类别进行尼斯查询过滤
getNiceQueryFilter(this.keyZi, classCodes).then(res => {
console.log("过滤之后的尼斯数据:", res.data);
// this.ncldata = [];
if (res.data != null) {
if (res.data.length) {
_that.showTrees = true;
_that.searchedList = res.data;
_that.ncldata = res.data;
} else {
_that.showTrees = false;
console.log(this.keyZi);
// 当关键字非空时进行查询,否则返回的数据为空
if (this.keyZi != "") {
// 根据输入的关键字和选择的分类类别进行尼斯查询过滤
getNiceQueryFilter(this.keyZi, classCodes).then(res => {
console.log("过滤之后的尼斯数据:", res.data);
if (res.data != null) {
if (res.data.length) {
_that.searchedList = res.data;
_that.ncldata = res.data;
console.log(_that.ncldata);
} else {
// 利用el-tree的 empty-text="暂无数据" 属性 显示出 暂无数据的查询结果
this.ncldata = [];
}
}
}
});
});
}
},
// 取消搜索
cancelSearch() {
this.keyZi = "";
// this.checkedNcl = [];
// 显示树形结构
console.log(this.ncldata);
// 给ncldata重新附上 初始静态数据
this.ncldata = [
{ code: "01", name: "化学原料" },
{ code: "02", name: "颜料油漆" },
{ code: "03", name: "日化用品" },
{ code: "04", name: "燃料油脂" },
{ code: "05", name: "医药" },
{ code: "06", name: "金属材料" },
{ code: "07", name: "机械设备" },
{ code: "08", name: "手工器械" },
{ code: "09", name: "科学仪器" },
{ code: "10", name: "医疗器械" },
{ code: "11", name: "灯具空调" },
{ code: "12", name: "运输工具" },
{ code: "13", name: "军火烟火" },
{ code: "14", name: "珠宝钟表" },
{ code: "15", name: "乐器" },
{ code: "16", name: "办公用品" },
{ code: "17", name: "橡胶制品" },
{ code: "18", name: "皮革皮具" },
{ code: "19", name: "建筑材料" },
{ code: "20", name: "家具" },
{ code: "21", name: "厨房洁具" },
{ code: "22", name: "绳网袋篷" },
{ code: "23", name: "纱线丝" },
{ code: "24", name: "布料床单" },
{ code: "25", name: "服装鞋帽" },
{ code: "26", name: "纽扣拉链" },
{ code: "27", name: "地毯席垫" },
{ code: "28", name: "健身器材" },
{ code: "29", name: "食品" },
{ code: "30", name: "方便食品" },
{ code: "31", name: "饲料种籽" },
{ code: "32", name: "啤酒饮料" },
{ code: "33", name: "酒" },
{ code: "34", name: "烟草烟具" },
{ code: "35", name: "广告销售" },
{ code: "36", name: "金融物管" },
{ code: "37", name: "建筑修理" },
{ code: "38", name: "通讯服务" },
{ code: "39", name: "运输贮藏" },
{ code: "40", name: "材料加工" },
{ code: "41", name: "教育娱乐" },
{ code: "42", name: "网站服务" },
{ code: "43", name: "餐饮住宿" },
{ code: "44", name: "医疗园艺" },
{ code: "45", name: "社会服务" }
];
// 把树的状态 改为 没有搜索过, 可以加载数据了
this.notSearched = true;
}
},
mounted() {
......@@ -717,14 +769,10 @@ export default {
this.$parent.$parent.confirmStepsParams.stepOneThreeParams.smallKinds = this.classDataList;
}
localStorage.removeItem("icon");
// 商标图样
this.$parent.$parent.confirmStepsParams.stepOneThreeParams.icon = this.imgUrl;
localStorage.setItem(
"icon",
this.$parent.$parent.confirmStepsParams.stepOneThreeParams.icon
);
// 存储商标图样
localStorage.setItem("icon", this.imgUrl);
});
}
};
......
channel-access/src/views/pages/selftmreg/Selftmreg.vue
......@@ -20,20 +20,17 @@
<el-form class="demo-ruleForm" label-width="120px">
<div class="selftmreg_main">
<div class="selftmreg_shu"></div>
<!-- 缓存第一步 填写基本信息 组件的内容 -->
<keep-alive>
<!-- 缓存第一步 填写基本信息 组件的内容 -->
<ModifyTrademark
v-if="index == 0"
:stepsParams="confirmStepsParams"
/>
<ModifyTrademark v-if="index == 0" />
</keep-alive>
<!-- 缓存第二步 填写申请人信息 组件的内容 -->
<keep-alive>
<!-- 缓存第二步 填写申请人信息 组件的内容 -->
<ApplicationInfo
v-if="index == 1"
:stepsParams="confirmStepsParams"
/>
<ApplicationInfo v-if="index == 1" />
</keep-alive>
<!-- 第三步 确认订单 -->
<ConfirmOrder v-if="index == 2" @getIndex="getindex" />
</div>
......@@ -111,30 +108,21 @@ export default {
return {
//初始为0，对应第一步填写基本信息
index: 0,
// 是否已经勾选同意协议
// 商品/服务项目不足10项时 对话框 的显示和隐藏
dialogVisible: false,
// 是否已经勾选同意协议 勾选过才能去支付
checked: false,
// 验证参数:步骤一二的必填项参数验证
confirmStepsParams: {
stepOneThreeParams: {
// 商标选择
// 商标类型
type: 1,
// 商标名称
tname: "",
// 商标图样
icon: "",
// 商标类型是文字时，对应的 手动上传 和 自动生成 按钮的点击状态
// 手动上传或是上传图片 是否点击
brandmanual: false,
// 自动生成图片 是否点击
brandauto: false,
type: 1, // 商标类型
tname: "", // 商标名称
icon: "", // 商标图样
// 分类选择
// 选中的类别 xx xxxxx 对应 大类编号 大类名称
bigKind: "",
// 已经选中的商品/服务项
smallKinds: []
bigKind: "", // 选中的类别 xx xxxxx 对应 大类编号 大类名称
smallKinds: [] // 已经选中的商品/服务项
},
stepTwoNineParams: {
// 申请人类别
......@@ -154,15 +142,28 @@ export default {
// 联系人类别
customer: "",
telNum: "",
email: ""
}
},
email: "",
// 商品/服务项目不足10项时 对话框 的显示和隐藏
dialogVisible: false
// 材料信息
company: [
{ Icon: "", Text: "营业执照" },
{ Icon: "", Text: "代理委托书" },
{ Icon: "", Text: "优先权证明" }
],
user: [
{ Icon: "", Text: "营业执照" },
{ Icon: "", Text: "代理委托书" },
{ Icon: "", Text: "身份证明" },
{ Icon: "", Text: "优先权证明" }
]
}
}
};
},
created() {},
created() {
// 页面数据初始加载成功之后先清除之前的缓存的图片信息
localStorage.removeItem("icon");
},
methods: {
// 去支付页面
goCashier() {
......@@ -202,10 +203,11 @@ export default {
// 获取a标签和i标签以给其加入高亮的样式
let as = document.getElementsByTagName("a");
let is = document.getElementsByTagName("i");
// 有选择的非空的 自动上传图标 或 手动上传图标 的localStorage缓存数据
this.confirmStepsParams.stepOneThreeParams.icon =
localStorage.getItem("autoImgToConfirm") ||
localStorage.getItem("manualImgToConfirm");
// 图标 的localStorage缓存数据是否为非空
this.confirmStepsParams.stepOneThreeParams.icon = localStorage.getItem(
"icon"
);
// 第二步 填写申请人信息
if (this.index == 1) {
......@@ -281,7 +283,7 @@ export default {
// 如果商标名字 或 商标图样 为空
if (
this.confirmStepsParams.stepOneThreeParams.tname == "" ||
this.confirmStepsParams.stepOneThreeParams.icon == null
this.confirmStepsParams.stepOneThreeParams.icon == ""
) {
// 提示完善信息
this.$message({
......@@ -313,8 +315,8 @@ export default {
}
// 如果商标类型是 图形
else if (this.confirmStepsParams.stepOneThreeParams.type == 2) {
// 如果商标图样为空
if (this.confirmStepsParams.stepOneThreeParams.icon == null) {
// 如果商标图样为空 null
if (this.confirmStepsParams.stepOneThreeParams.icon == "") {
// 提示完善信息
this.$message({
type: "warning",
......@@ -356,21 +358,7 @@ export default {
this.index--;
}
},
mounted() {
localStorage.removeItem("icon");
// 页面初始挂载成功之后先清除之前的缓存的图片信息
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;
});
}
mounted() {}
};
</script>
......
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