Skip to content

Z
zhichan
Commit 42584e1c by 尹亚亭
Options

selftreg

parent 61b8bb81
Showing with 104 additions and 78 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/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