Skip to content

Z
zhichan
Commit 7c67cb35 by 任建
Options

Merge branch 'channel-access' of gitlab.gongsibao.com:jiangyong/zhichan into channel-access

parents d9c150d5 4d2bdadc
Showing with 1164 additions and 301 deletions
channel-access/src/router/index.js
...@@ -4,48 +4,78 @@ import VueRouter from "vue-router"; ...@@ -4,48 +4,78 @@ import VueRouter from "vue-router";
Vue.use(VueRouter); Vue.use(VueRouter);
const routes = [{ const routes = [{
path: "/:chanue/jdbycdetailtm", path: "/:chanue/jdbycdetailtm",
name: "jdbycdetailtm", name: "jdbycdetailtm",
component: () => component: () =>
import ("@/views/pages/jdbycdetailtm") import("@/views/pages/jdbycdetailtm")
}, },
{ {
path: "/:chanue/companydetail", path: "/:chanue/companydetail",
name: "companydetail", name: "companydetail",
component: () => component: () =>
import ("@/views/pages/companydetail") import("@/views/pages/companydetail")
}, },
{ {
path: "/:chanue/jdindentlist", path: "/:chanue/jdindentlist",
name: "jdindentdetail", name: "jdindentdetail",
component: () => component: () =>
import ("@/views/pages/jdindentlist") import("@/views/pages/jdindentlist")
}, },
{ {
path: "/:chanue/jdindentdetail", path: "/:chanue/jdindentdetail",
name: "jdindentdetail", name: "jdindentdetail",
component: () => component: () =>
import ("@/views/pages/jdindentdetail") import("@/views/pages/jdindentdetail")
}, },
///////// /////////
{ {
path: "/:chanue/jdtrademark", path: "/:chanue/jdtrademark",
name: "jdtrademark", name: "jdtrademark",
component: () => component: () =>
import ("@/views/pages/jdtrademark/Jdtrademark") import("@/views/pages/jdtrademark/Jdtrademark")
}, },
{ {
path: "/:chanue/selftmreg", path: "/:chanue/selftmreg",
name: "selftmreg", name: "selftmreg",
component: () => component: () =>
import ("@/views/pages/selftmreg/Selftmreg") import("@/views/pages/selftmreg/Selftmreg"),
}, // 默认页面是一级路由下的第一个子路由
{ redirect: '/:chanue/selftmreg/basic',
path: "/bycnoticeindex", // 配置二级路由
name: "bycnoticeindex", children: [
component: () => // 第一步：填写基本信息
import ("@/views/pages/bycnoticeindex/Bycnoticeindex") {
} path: "basic",
component: () =>
import("@/views/pages/selftmreg/ModifyTrademark"),
},
// 第二步：填写申请人信息
{
path: "user",
component: () =>
import("@/views/pages/selftmreg/ApplicationInfo"),
},
// 第三步：确认订单
{
path: "confirm",
component: () =>
import("@/views/pages/selftmreg/ConfirmOrder"),
},
// 第四步：支付订单
{
path: "pay",
component: () =>
import("@/views/pages/selftmreg/PayOrder"),
},
]
},
{
// path: "/bycnoticeindex",
path: "/:chanue/bycnoticeindex",
name: "bycnoticeindex",
component: () =>
import("@/views/pages/bycnoticeindex/Bycnoticeindex")
}
]; ];
const router = new VueRouter({ const router = new VueRouter({
routes routes
......
channel-access/src/views/pages/selftmreg/ApplicationInfo.vue
<template> <template>
<div class="infomation"> <div class="infomation">
<i class="selfmreg_shuxian"></i> <!-- 申请人信息 -->
<!-- <span>填写申请人信息</span> --> <div class="info-title">
<i class="selftmreg_shuxian"></i>
<h4>填写申请人信息</h4>
</div>
<div class="applicantInfo"> <div class="applicantInfo">
<el-form <el-form
:model="ruleForm" :model="ruleForm"
...@@ -17,106 +20,441 @@ ...@@ -17,106 +20,441 @@
<el-radio :label="2" border>个体户</el-radio> <el-radio :label="2" border>个体户</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="公司名称：" prop="name"> <div v-if="ruleForm.resource == 1">
<el-input v-model="ruleForm.name"></el-input> <el-form-item label="公司名称：" prop="name">
<el-input v-model="ruleForm.name" placeholder="请输入公司名称"></el-input>
</el-form-item>
<el-form-item label="统一社会信用代码：" prop="xinyongma">
<el-input v-model="ruleForm.xinyongma" placeholder="请输入统一社会信用代码"></el-input>
<el-popover
placement="right-end"
width="170"
trigger="hover"
content="由于官方商标注册增加“统一社会信用代码”的填写，企业申请必填，个体工商户申请可不填此项，请仔细核对营业执照填写。"
>
<el-button class="el-icon-question" slot="reference"></el-button>
</el-popover>
</el-form-item>
<el-form-item label="执照详细地址：" prop="address">
<el-input v-model="ruleForm.address" placeholder="请输入执照详细地址"></el-input>
</el-form-item>
<el-form-item label="邮政编码：" prop="postal">
<el-input v-model="ruleForm.postal" placeholder="请输入邮政编码" :maxlength="6"></el-input>
</el-form-item>
</div>
<div v-if="ruleForm.resource == 2">
<el-form-item label="姓名：" prop="name">
<el-input v-model="ruleForm.username" placeholder="请输入您的姓名"></el-input>
</el-form-item>
<el-form-item label="身份证号：" prop="name">
<el-input v-model="ruleForm.idCard" placeholder="请输入您的身份证号"></el-input>
</el-form-item>
<el-form-item label="注册地址：" prop="name">
<el-input v-model="ruleForm.idCard" placeholder="请输入注册地址"></el-input>
</el-form-item>
<el-form-item label="统一社会信用代码：" prop="xinyongma">
<el-input v-model="ruleForm.xinyongma" placeholder="请输入统一社会信用代码"></el-input>
<el-popover
placement="right-end"
width="170"
trigger="hover"
content="由于官方商标注册增加“统一社会信用代码”的填写，企业申请必填，个体工商户申请可不填此项，请仔细核对营业执照填写。"
>
<el-button class="el-icon-question" slot="reference"></el-button>
</el-popover>
</el-form-item>
<el-form-item label="邮政编码：" prop="postal">
<el-input v-model="ruleForm.postal" placeholder="请输入邮政编码" :maxlength="6"></el-input>
</el-form-item>
</div>
</el-form>
</div>
<!-- 订单联系人 -->
<div class="info-title">
<i class="selftmreg_shuxian"></i>
<h4>订单联系人</h4>
</div>
<div class="orderContact">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="110px"
class="demo-ruleForm"
label-position="left"
>
<el-form-item label="客户联系人：" prop="contanct">
<el-input v-model="ruleForm.contanct" placeholder="请输入联系人"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="统一社会信用代码：" prop="name"> <el-form-item label="联系电话：" prop="phone">
<el-input v-model="ruleForm.name"></el-input> <el-input v-model="ruleForm.phone" placeholder="请输入联系电话"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="执照详细地址：" prop="name"> <el-form-item label="电子邮箱：" prop="email">
<el-input v-model="ruleForm.name"></el-input> <el-input v-model="ruleForm.email" placeholder="请输入电子邮箱"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="邮政编码：" prop="name"> <el-form-item label="座机：">
<el-input v-model="ruleForm.name"></el-input> <el-input v-model="ruleForm.tel" placeholder="区号座机号码"></el-input>
</el-form-item>
<el-form-item label="传真：">
<el-input v-model="ruleForm.faxNumber" placeholder="请输入传真号" :maxlength="6"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<!-- 资料上传 -->
<div class="info-title">
<i class="selftmreg_shuxian"></i>
<h4>
资料上传
<span>（可跳过进行下一步，支付完成后，在订单中上传即可）</span>
</h4>
</div>
<div class="jdindentlist-drawerDetail">
<!-- -->
<div class="from-main">
<div class="from-items">
<div class="from-item-title">
<span>*</span>上传材料：营业执照
</div>
<div class="upload-box">
<!-- 1 -->
</div>
<div class="upload-box-next">
<img src="@/assets/imgs/sbzc/yyzz1.png" alt />
<div class="chakan" @click="lookImage(1)">查看大图</div>
</div>
</div>
<div class="from-items">
<div class="from-item-title">
<p>
<span>*</span>上传材料：代理委托书
</p>
<a
href="http://gsb-zc.oss-cn-beijing.aliyuncs.com/igirl_channel_tmwtsdemo001.doc"
>下载委托书模板</a>
</div>
<div class="upload-box">
<!-- 2 -->
</div>
<div class="upload-box-next">
<img src="@/assets/imgs/sbzc/wts1.png" alt />
<div class="chakan" @click="lookImage(2)">查看大图</div>
</div>
</div>
<div class="from-items">
<div class="from-item-title">
<p>上传材料：优先权证明</p>
<a
href="http://gsb-zc.oss-cn-beijing.aliyuncs.com/yzq_201908281849646526xujnsedjnqwdoni.doc"
>下载优先权证明</a>
</div>
<div class="upload-box">
<!-- 3 -->
</div>
<div class="upload-box-next">
<img src="@/assets/imgs/sbzc/yxq.png" alt />
<div class="chakan" @click="lookImage(3)">查看大图</div>
</div>
</div>
</div>
<!-- dialog -->
<el-dialog
style="z-index:99999;background:rgba(0,0,0,.3)"
title
:visible.sync="toViewImgType"
center
width="72%"
append-to-body
>
<img :src="toViewImgSrc" style="max-width:100%;display:block;margin: 0 auto;" alt />
</el-dialog>
</div>
</div> </div>
</template> </template>
<script> <script>
import imgUrl1 from "@/assets/imgs/sbzc/yyzzD.png";
import imgUrl2 from "@/assets/imgs/sbzc/wtsD.png";
import imgUrl3 from "@/assets/imgs/sbzc/yxqD.png";
export default { export default {
data() { data() {
return { return {
// 申请人信息表格 及 验证
ruleForm: { ruleForm: {
name: "", name: "",
region: "",
date1: "",
date2: "",
delivery: false,
type: [],
resource: 1, resource: 1,
desc: "" xinyongma: "",
address: "",
postal: "",
username: "",
idCard: "",
zhuAddress: ""
}, },
rules: { rules: {
name: [ resource: [
{ required: true, message: "请输入活动名称", trigger: "blur" }, { required: true, message: "请选择申请人类型", trigger: "change" }
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
], ],
region: [ name: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
{ required: true, message: "请选择活动区域", trigger: "change" } xinyongma: [
{ required: true, message: "请输入统一社会信用代码", trigger: "blur" }
], ],
date1: [ address: [
{ { required: true, message: "请输入执照详细地址", trigger: "blur" }
type: "date",
required: true,
message: "请选择日期",
trigger: "change"
}
], ],
date2: [ postal: [{ required: true, message: "请输入邮政编码", trigger: "blur" }]
{ },
type: "date", // 订单联系人表格信息 及验证
required: true, ruleForm: {
message: "请选择时间", contanct: "",
trigger: "change" phone: "",
} email: "",
tel: "",
faxNumber: ""
},
rules: {
contanct: [
{ required: true, message: "请输入联系人", trigger: "blur" }
], ],
type: [ phone: [
{ required: true, message: "请输入统一社会信用代码", trigger: "blur" }
],
email: [
{ required: true, message: "请输入邮箱地址", trigger: "blur" },
{ {
type: "array", type: "email",
required: true, message: "请输入正确的邮箱地址",
message: "请至少选择一个活动性质", trigger: ["blur", "change"]
trigger: "change"
} }
], ]
resource: [ },
{ required: true, message: "请选择活动资源", trigger: "change" }
], // 资料上传
desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }] chakanKey: null,
} toViewImgType: false,
toViewImgSrc: ""
}; };
}, },
methods: { methods: {
submitForm(formName) { // 资料上传
this.$refs[formName].validate(valid => { enter(index) {
if (valid) { this.chakanKey = index;
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
}, },
resetForm(formName) { lookImage(index) {
this.$refs[formName].resetFields(); console.log(123123);
this.toViewImgType = true;
switch (index) {
case 1:
this.toViewImgSrc = imgUrl1;
break;
case 2:
this.toViewImgSrc = imgUrl2;
break;
case 3:
this.toViewImgSrc = imgUrl3;
break;
}
} }
} }
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.selftmreg_shuxian { .info-title {
width: 3px; .selftmreg_shuxian {
height: 15px; width: 3px;
background-color: #0989c5; height: 15px;
display: inherit; background-color: #0989c5;
float: left; display: inherit;
margin-top: 4px; float: left;
margin-right: 10px; margin-top: 4px;
margin-right: 10px;
}
h4 {
font-size: 16px;
font-family: PingFangSC;
font-weight: 400;
color: rgba(83, 83, 83, 1);
margin-bottom: 15px;
span {
margin-left: 35px;
font-size: 14px;
font-family: PingFangSC;
font-weight: 400;
color: rgba(99, 101, 105, 1);
}
}
} }
/* 申请人信息 */
.applicantInfo { .applicantInfo {
width: 100%; width: 100%;
.el-radio {
height: auto;
padding: 7px 28px;
border-radius: 0px;
border: 1px solid #dee0eb;
.el-radio__label {
padding: 0;
font-family: PingFangSC-Regular;
font-size: 12px;
color: #333333;
}
}
.el-radio__input { .el-radio__input {
display: none; display: none;
} }
.el-form-item {
.el-button {
border: none;
width: 12px;
height: 12px;
border-radius: 100%;
font-size: 12px;
padding: 0;
color: #3071fe;
line-height: 10px;
text-align: left;
margin-left: 10px;
}
}
.el-input {
width: 350px;
height: 40px;
input {
width: 350px;
height: 40px;
border-radius: 0px;
}
}
}
/* 订单联系人 */
.orderContact {
width: 100%;
.el-radio {
height: auto;
padding: 7px 28px;
border-radius: 0px;
border: 1px solid #dee0eb;
.el-radio__label {
padding: 0;
font-family: PingFangSC-Regular;
font-size: 12px;
color: #333333;
}
}
.el-radio__input {
display: none;
}
.el-form-item {
.el-button {
border: none;
width: 12px;
height: 12px;
border-radius: 100%;
font-size: 12px;
padding: 0;
color: #3071fe;
line-height: 10px;
text-align: left;
margin-left: 10px;
}
}
.el-input {
width: 350px;
height: 40px;
input {
width: 350px;
height: 40px;
border-radius: 0px;
}
}
}
/* 资料上传 */
.jdindentlist-drawerDetail {
.from-main {
width: 100%;
}
}
.drawer-bottom {
width: 100%;
padding: 10px 20px 20px;
position: absolute;
bottom: 0px;
left: 0;
border-top: 1px solid #dee0eb;
button {
padding: 6px 28px;
border-radius: 100px;
border: none;
font-family: PingFangSC-Regular;
font-size: 12px;
margin-right: 10px;
}
.esc {
background: #e7eaf3;
color: #777777;
}
.enter {
background: #3071fe;
color: #ffffff;
}
}
.from-items {
width: 100%;
height: 120px;
display: flex;
margin-top: 20px;
.from-item-title {
width: 160px;
font-size: 14px;
font-family: PingFangSC;
font-weight: 400;
color: rgba(99, 101, 105, 1);
span {
color: #f00;
}
a {
color: #0f8ee9;
font-size: 13px;
cursor: pointer;
line-height: 0px;
border-bottom: 1px solid #0f8ee9;
height: 5px;
margin-left: 50px;
}
}
.upload-box {
width: 98px;
height: 100%;
cursor: pointer;
position: relative;
border: 3px dashed #ccc;
margin-left: 20px;
}
.upload-box-next {
width: 98px;
height: 100%;
cursor: pointer;
position: relative;
border: 3px dashed #ccc;
margin-left: 20px;
img {
width: 100%;
height: 100%;
}
.chakan {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
display: none;
color: #fff;
}
}
.upload-box-next:hover > .chakan {
display: flex;
justify-content: center;
align-items: center;
}
} }
</style> </style>
channel-access/src/views/pages/selftmreg/ConfirmOrder.vue 0 → 100644
<template>
<div class="confirm">
<div class="info-title">
<i class="selftmreg_shuxian"></i>
<h4>
商标信息
<span class="edit">
<i class="el-icon-edit"></i>
<b>编辑</b>
</span>
</h4>
</div>
<div class="brand-info">
<p>
<strong>商标类型：</strong>
<span>文字图标</span>
</p>
<p>
<strong>商标名称：</strong>
<span>gongsibao</span>
</p>
<p>
<strong>商标图样：</strong>
<img src="http://temp.im/104x104/ff5a5f/fff" alt />
</p>
<p>
<strong>商标类别：</strong>
<span class="detail-type">
<i>15 类 乐器</i>
<br />
<b>150001 手风琴</b>
<b>150008 钢琴</b>
<b>150011 小六角手风琴</b>
<b>150013 低音提琴（乐器）</b>
<b>150016 大号（号）</b>
<b>150019 小铃帽（乐器）</b>
</span>
</p>
</div>
<div class="info-title">
<i class="selftmreg_shuxian"></i>
<h4>
申请人及联系人信息
<span class="edit">
<i class="el-icon-edit"></i>
<b>编辑</b>
</span>
</h4>
</div>
<div class="user-info">
<ul>
<li>
<strong>申请人类型：</strong>
<span>企业</span>
</li>
<li>
<strong>公司名称：</strong>
<span>company name</span>
</li>
<li>
<strong>邮政编码：</strong>
<span>463800</span>
</li>
<li>
<strong>公司地址：</strong>
<span>company address</span>
</li>
<li>
<strong>联系人：</strong>
<span>reqr</span>
</li>
<li>
<strong>联系电话：</strong>
<span>13525897326</span>
</li>
<li>
<strong>电子邮箱：</strong>
<span>12e3r@qq.com</span>
</li>
<li>
<strong>信用编码：</strong>
<span>91110000551350971K</span>
</li>
</ul>
</div>
<div class="info-title">
<i class="selftmreg_shuxian"></i>
<h4>订单备注</h4>
</div>
<!-- 文本域 -->
<el-input type="textarea" :rows="2" placeholder="如有特殊需要，请填写订单备注" v-model="textarea"></el-input>
</div>
</template>
<script>
export default {
data() {
return {
textarea: ""
};
}
};
</script>
<style lang="scss" scoped>
.info-title {
.selftmreg_shuxian {
width: 3px;
height: 15px;
background-color: #0989c5;
display: inherit;
float: left;
margin-top: 4px;
margin-right: 10px;
}
h4 {
font-size: 16px;
font-family: PingFangSC;
font-weight: 400;
color: rgba(83, 83, 83, 1);
margin-bottom: 15px;
}
}
// 编辑图文
.edit {
color: #409efe;
}
// 商标信息
.brand-info {
p {
margin-bottom: 23px;
strong {
width: 120px;
display: inline-block;
text-align: right;
color: rgb(99, 101, 105);
}
span {
font-size: 14px;
font-weight: 400;
color: #333;
}
span.detail-type {
display: inline-block;
width: 900px;
vertical-align: top;
i {
font-size: 14px;
font-weight: 600;
display: inline-block;
padding-bottom: 10px;
}
b {
font-size: 14px;
font-weight: 400;
margin-right: 20px;
text-align: left;
color: #333;
}
}
img {
display: inline-block;
border: 2px dashed rgb(233, 233, 233);
vertical-align: top;
}
}
}
// 申请人及联系人信息
.user-info {
ul {
li {
display: inline-block;
width: 50%;
padding-bottom: 23px;
strong {
width: 120px;
display: inline-block;
text-align: right;
color: rgb(99, 101, 105);
}
span {
font-size: 14px;
font-weight: 400;
color: #333;
}
}
}
}
// 订单备注 样式没加上！！
.confirm div.el-textarea textarea.el-textarea__inner {
border-radius: 0;
min-width: 980px;
height: 82px;
resize: none;
border: 1px solid #d6daeb;
}
</style>
\ No newline at end of file
channel-access/src/views/pages/selftmreg/ModifyTrademark.vue
<template> <template>
<div class="modifyTrademark"> <div>
<div class="modifyTrademark-main"> <!-- 基本信息填写 -->
<div class="categoryFrom"> <div class="modifyTrademark">
<el-form <div class="modifyTrademark-main">
:model="ruleForm" <div class="categoryFrom">
:rules="rules" <el-form
ref="ruleForm" :model="ruleForm"
label-width="100px" :rules="rules"
class="demo-ruleForm" ref="ruleForm"
label-position="left" label-width="100px"
> class="demo-ruleForm"
<el-form-item label="商标类型：" prop="resource"> label-position="left"
<el-radio-group v-model="ruleForm.resource">
<el-radio :label="1">文字</el-radio>
<el-radio :label="2">图形</el-radio>
<el-radio :label="3">文字及图形</el-radio>
</el-radio-group>
<span class="a-span" @click="lookImg('如何选择商标类型', 1)">如何选择商标类型?</span>
</el-form-item>
<el-form-item
label="商标名称："
prop="name"
v-if="ruleForm.resource == 1 || ruleForm.resource == 3"
> >
<el-input v-model="ruleForm.name" placeholder="请输入商标名称"></el-input> <el-form-item label="商标类型：" prop="resource">
</el-form-item> <el-radio-group v-model="ruleForm.resource">
<el-form-item label="商标图样：" prop="name" v-if="ruleForm.resource == 1"> <el-radio :label="1">文字</el-radio>
<div class="trademark-name"> <el-radio :label="2">图形</el-radio>
<div> <el-radio :label="3">文字及图形</el-radio>
<el-button>手动上传</el-button> </el-radio-group>
<el-button>自动生成</el-button> <span class="a-span" @click="lookImg('如何选择商标类型', 1)">如何选择商标类型?</span>
</div> </el-form-item>
<div> <el-form-item
<div class="trademarkImg"> label="商标名称："
<img src="@/assets/imgs/zwtp.png" alt /> prop="name"
</div> v-if="ruleForm.resource == 1 || ruleForm.resource == 3"
<p> >
<i class="el-icon-warning"></i>自动生成的商标图样默认以“宋体”字样自左向右排列递交官方。 <el-input v-model="ruleForm.name" placeholder="请输入商标名称"></el-input>
</p> </el-form-item>
</div> <el-form-item label="商标图样：" prop="name" v-if="ruleForm.resource == 1">
</div> <div class="trademark-name">
</el-form-item> <div>
<el-form-item <el-button>手动上传</el-button>
label="商标图样：" <el-button>自动生成</el-button>
prop="name"
v-if="ruleForm.resource == 2 || ruleForm.resource == 3"
>
<div class="trademark-name">
<div>
<div class="trademarkImg">
<img src alt />
</div> </div>
<div class="p-left"> <div>
<p> <div class="trademarkImg">
<i class="el-icon-warning"></i>上传黑白图样，注册后可以更换商标颜色使用； <img src="@/assets/imgs/zwtp.png" alt />
</p> </div>
<p>
<i class="el-icon-warning"></i>上传彩色图样，注册后只能按照该彩色图样使用，并在委托书商标名称后方增加文字“（指定颜色）”；
</p>
<p>
<i class="el-icon-warning"></i>上传的彩色图样需与黑白图样的样式一致。
</p>
<p> <p>
<span @click="lookImg('查看上传商标图样注意事项', 2)">查看上传商标图样注意事项</span> <i class="el-icon-warning"></i>自动生成的商标图样默认以“宋体”字样自左向右排列递交官方。
</p> </p>
</div> </div>
</div> </div>
</el-form-item>
<el-form-item
label="商标图样："
prop="name"
v-if="ruleForm.resource == 2 || ruleForm.resource == 3"
>
<div class="trademark-name">
<div>
<div class="trademarkImg">
<img src alt />
</div>
<div class="p-left">
<p>
<i class="el-icon-warning"></i>上传黑白图样，注册后可以更换商标颜色使用；
</p>
<p>
<i class="el-icon-warning"></i>上传彩色图样，注册后只能按照该彩色图样使用，并在委托书商标名称后方增加文字“（指定颜色）”；
</p>
<p>
<i class="el-icon-warning"></i>上传的彩色图样需与黑白图样的样式一致。
</p>
<p>
<span @click="lookImg('查看上传商标图样注意事项', 2)">查看上传商标图样注意事项</span>
</p>
</div>
</div>
</div>
</el-form-item>
</el-form>
</div>
</div>
<!-- -->
<el-drawer
:title="drawerTitle"
custom-class="jdindentdetail-drawer"
size="430px"
:visible.sync="drawerRight"
>
<img class="shangImg" src="@/assets/imgs/jdt/shuoming.png" alt v-if="lookIndex == 1" />
<p v-if="lookIndex == 2">
图样文件格式应为jpg，图形应清晰，图样文件大小应小于“200KB”，且图形像素介于“600X600
- 1500X1500”之间，如果通过扫描获得图样的，应按
24位彩色，300dpi分辨率扫描符合《商标法》及其实施条例规定的图形（图形清晰，大于5X5厘米且小于10X10厘米），申请人（或代理人）应确保扫描后的图
形与原图形的色彩深浅（或灰度）一致，否则，可能影响《商标注册证》上图形的清晰度）如上传图样为黑白，取得注册后，可以更换商标颜色使用；如上传图样为彩色，取得注册后只能按
照该彩色图样使用；如确认提交彩色图样，需在委托书商标名称后方增加以下文字“（指定颜色）”
</p>
</el-drawer>
</div>
<!-- 分类信息选择 -->
<div class="classTrademark">
<div class="classTrademark-left">
<div class="classTrademark-left-top">
<el-button>分类</el-button>
<el-input placeholder="请输入关键字进行过滤" suffix-icon="el-icon-search" v-model="keyZi"></el-input>
<span class="quxiao">取消</span>
</div>
<!-- 树形控件 -->
<div class="classTrademark-left-tree">
<el-tree
:data="ncldata"
show-checkbox
empty-text="暂无数据"
node-key="id"
default-expand-all
:expand-on-click-node="false"
:props="props"
></el-tree>
</div>
</div>
<!-- -->
<div class="classTrademark-right">
<div class="classTrademark-right-top">
<p>已选择的商品/服务项</p>
<span class="el-icon-delete">清除全部</span>
</div>
<div class="classTrademark-right-main">
<div class="notData" v-if="classDataList.length == 0">
<img src="@/assets/imgs/kong-2.png" alt />
<span>请点击左侧选择商标类别</span>
</div>
<div class="classData">
<div class="classData-top">
<h4>第02类 颜料油漆</h4>
<p>
已选择
<span>1</span>项
</p>
<i class="el-icon-delete"></i>
</div>
<div class="classData-main">
<el-tag
:key="tag"
v-for="tag in classDataList"
closable
:disable-transitions="false"
@close="handleClose(tag)"
>{{ tag }}</el-tag>
</div> </div>
</el-form-item> </div>
</el-form> </div>
</div> </div>
</div> </div>
<!-- -->
<el-drawer
:title="drawerTitle"
custom-class="jdindentdetail-drawer"
size="430px"
:visible.sync="drawerRight"
>
<img class="shangImg" src="@/assets/imgs/jdt/shuoming.png" alt v-if="lookIndex == 1" />
<p v-if="lookIndex == 2">
图样文件格式应为jpg，图形应清晰，图样文件大小应小于“200KB”，且图形像素介于“600X600
- 1500X1500”之间，如果通过扫描获得图样的，应按
24位彩色，300dpi分辨率扫描符合《商标法》及其实施条例规定的图形（图形清晰，大于5X5厘米且小于10X10厘米），申请人（或代理人）应确保扫描后的图
形与原图形的色彩深浅（或灰度）一致，否则，可能影响《商标注册证》上图形的清晰度）如上传图样为黑白，取得注册后，可以更换商标颜色使用；如上传图样为彩色，取得注册后只能按
照该彩色图样使用；如确认提交彩色图样，需在委托书商标名称后方增加以下文字“（指定颜色）”
</p>
</el-drawer>
</div> </div>
</template> </template>
<script> <script>
import { getNcldata } from "@/api/api.js";
export default { export default {
data() { data() {
return { return {
// 基本信息填写
drawerRight: false, drawerRight: false,
lookIndex: null, lookIndex: null,
drawerTitle: "", drawerTitle: "",
...@@ -106,7 +166,80 @@ export default { ...@@ -106,7 +166,80 @@ export default {
resource: [ resource: [
{ required: true, message: "请选择活动资源", trigger: "change" } { required: true, message: "请选择活动资源", trigger: "change" }
] ]
} },
// 分类信息选择
keyZi: "",
props: {
label(data) {
if (data.code == null || data.code == null) {
return data.name;
} else {
return data.code + " " + data.name;
}
},
children: "children"
},
ncldata: [
{ code: "01", name: "化学原料", type: 1 },
{ code: "02", name: "颜料油漆", type: 1 },
{ code: "03", name: "日化用品", type: 1 },
{ code: "04", name: "燃料油脂", type: 1 },
{ code: "05", name: "医药", type: 1 },
{ code: "06", name: "金属材料", type: 1 },
{ code: "07", name: "机械设备", type: 1 },
{ code: "08", name: "手工器械", type: 1 },
{ code: "09", name: "科学仪器", type: 1 },
{ code: "10", name: "医疗器械", type: 1 },
{ code: "11", name: "灯具空调", type: 1 },
{ code: "12", name: "运输工具", type: 1 },
{ code: "13", name: "军火烟火", type: 1 },
{ code: "14", name: "珠宝钟表", type: 1 },
{ code: "15", name: "乐器", type: 1 },
{ code: "16", name: "办公用品", type: 1 },
{ code: "17", name: "橡胶制品", type: 1 },
{ code: "18", name: "皮革皮具", type: 1 },
{ code: "19", name: "建筑材料", type: 1 },
{ code: "20", name: "家具", type: 1 },
{ code: "21", name: "厨房洁具", type: 1 },
{ code: "22", name: "绳网袋篷", type: 1 },
{ code: "23", name: "纱线丝", type: 1 },
{ code: "24", name: "布料床单", type: 1 },
{ code: "25", name: "服装鞋帽", type: 1 },
{ code: "26", name: "纽扣拉链", type: 1 },
{ code: "27", name: "地毯席垫", type: 1 },
{ code: "28", name: "健身器材", type: 1 },
{ code: "29", name: "食品", type: 1 },
{ code: "30", name: "方便食品", type: 1 },
{ code: "31", name: "饲料种籽", type: 1 },
{ code: "32", name: "啤酒饮料", type: 1 },
{ code: "33", name: "酒", type: 1 },
{ code: "34", name: "烟草烟具", type: 1 },
{ code: "35", name: "广告销售", type: 1 },
{ code: "36", name: "金融物管", type: 1 },
{ code: "37", name: "建筑修理", type: 1 },
{ code: "38", name: "通讯服务", type: 1 },
{ code: "39", name: "运输贮藏", type: 1 },
{ code: "40", name: "材料加工", type: 1 },
{ code: "41", name: "教育娱乐", type: 1 },
{ code: "42", name: "网站服务", type: 1 },
{ code: "43", name: "餐饮住宿", type: 1 },
{ code: "44", name: "医疗园艺", type: 1 },
{ code: "45", name: "社会服务", type: 1 }
],
classDataList: [
"121233",
"1qwe23",
"12qwe3",
"12weqwe3",
"123",
"12adsa3",
"12qweq3",
"12dad3",
"1asd23",
"12asd3",
"12adqwe3"
]
}; };
}, },
methods: { methods: {
...@@ -114,7 +247,17 @@ export default { ...@@ -114,7 +247,17 @@ export default {
this.drawerTitle = title; this.drawerTitle = title;
this.lookIndex = index; this.lookIndex = index;
this.drawerRight = true; this.drawerRight = true;
},
// 分类信息选择
handleClose(tag) {
console.log(tag);
this.classDataList.splice(this.classDataList.indexOf(tag), 1);
} }
},
mounted() {
getNcldata().then(res => {
console.log(res.data);
});
} }
}; };
</script> </script>
...@@ -200,4 +343,155 @@ export default { ...@@ -200,4 +343,155 @@ export default {
} }
} }
} }
// 分类信息选择
.classTrademark {
width: 100%;
display: flex;
.classTrademark-left {
width: 295px;
}
.classTrademark-right {
flex: 1;
}
}
.classTrademark-left-top {
width: 100%;
height: 54px;
border: 1px solid #dee0eb;
background: #eef2fb;
display: flex;
.el-button {
width: 50px;
height: 34px;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
border-radius: 0px;
margin: 10px;
}
.el-input {
width: 180px;
height: 34px;
font-size: 12px;
margin: 10px 0;
input {
width: 100%;
height: 100%;
border-radius: 0px;
}
}
.quxiao {
flex: 1;
font-size: 12px;
color: #3f7bff;
justify-content: center;
align-items: center;
display: flex;
cursor: pointer;
}
}
.classTrademark-left-tree::-webkit-scrollbar {
width: 10px;
height: 1px;
}
.classTrademark-left-tree::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #eef2fb;
}
.classTrademark-left-tree::-webkit-scrollbar-track {
border-radius: 10px;
background: #fff;
}
.classTrademark-left-tree {
width: 100%;
height: 500px;
border: 1px solid #dee0eb;
border-top: none;
overflow: auto;
}
.classTrademark-right-top {
width: 100%;
height: 54px;
border: 1px solid #dee0eb;
border-left: none;
background: #eef2fb;
padding: 0 10px 0 20px;
p {
line-height: 53px;
float: left;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #333333;
}
span {
float: right;
line-height: 53px;
font-family: PingFangSC-Regular;
font-size: 12px;
color: #3f7bff;
cursor: pointer;
}
}
.classTrademark-right-main {
width: 100%;
height: 500px;
border: 1px solid #dee0eb;
border-top: none;
border-left: none;
overflow: auto;
.notData {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
span {
font-size: 13px;
color: #828282;
line-height: 30px;
}
}
.classData {
width: 100%;
height: 100%;
padding: 20px;
display: flex;
flex-direction: column;
.classData-top {
width: 100%;
display: flex;
margin-bottom: 14px;
h4 {
flex: 6;
}
p {
flex: 2;
span {
color: #3f7bff;
}
}
i {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
}
.classData-main {
flex: 1;
overflow: auto;
.el-tag {
border-radius: 0;
background: #fff;
margin: 7px 7px;
font-family: PingFangSC-Regular;
font-size: 12px;
}
}
}
}
</style> </style>
channel-access/src/views/pages/selftmreg/PayOrder.vue 0 → 100644
<template>
<div>支付订单页面</div>
</template>
\ No newline at end of file
channel-access/src/views/pages/selftmreg/Selftmreg.vue
...@@ -3,8 +3,6 @@ ...@@ -3,8 +3,6 @@
<!-- 导航面包屑 --> <!-- 导航面包屑 -->
<div class="jdindentdetail-nav"> <div class="jdindentdetail-nav">
<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb separator-class="el-icon-arrow-right">
<!-- titleName:商标注册服务 -->
<!-- <el-breadcrumb-item :to="listPath" class="isActive">商标注册服务{{titleName}}</el-breadcrumb-item> -->
<el-breadcrumb-item class="isActive">商标注册服务</el-breadcrumb-item> <el-breadcrumb-item class="isActive">商标注册服务</el-breadcrumb-item>
<el-breadcrumb-item>自助商标注册</el-breadcrumb-item> <el-breadcrumb-item>自助商标注册</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
...@@ -12,7 +10,39 @@ ...@@ -12,7 +10,39 @@
<!-- 主体页面 --> <!-- 主体页面 -->
<SelftmregPage /> <!-- <SelftmregPage /> -->
<div class="jdindentdetail-page">
<div class="jdindentdetail-wrap">
<!-- 主体内容步骤条 -->
<SelftmregPageSteps />
<!-- 主页内容 -->
<el-form class="demo-ruleForm" label-width="120px">
<div class="selftmreg_main">
<div class="selftmreg_shu"></div>
<!-- Divider 分割线 -->
<!-- <el-divider></el-divider> -->
<router-view></router-view>
<!-- 第一步：填写基本信息 商标信息 分类选择-->
<!-- <ModifyTrademark /> -->
<!-- 第二步：填写申请人信息 -->
<!-- <ApplicationInfo /> -->
<!-- 第三步：确认订单 -->
<!-- <ConfirmOrder /> -->
<!-- 第四步：支付订单页面 -->
<!-- <PayOrder /> -->
</div>
<div style="clear:both;"></div>
</el-form>
</div>
</div>
<!-- 底部付款按钮 --> <!-- 底部付款按钮 -->
<div class="footer-wrap"> <div class="footer-wrap">
...@@ -21,20 +51,43 @@ ...@@ -21,20 +51,43 @@
应付总额： 应付总额：
<i>￥0.00</i> <i>￥0.00</i>
</span> </span>
<el-button type="primary">下一步</el-button> <el-button type="primary" @click="next">下一步</el-button>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import SelftmregPage from "./SelftmregPage"; // 主体页面里面的组件
import SelftmregPageSteps from "./SelftmregPageSteps";
import ModifyTrademark from "./ModifyTrademark";
import ApplicationInfo from "./ApplicationInfo";
import ConfirmOrder from "./ConfirmOrder";
import PayOrder from "./PayOrder";
export default { export default {
components: { components: {
SelftmregPage SelftmregPageSteps,
ModifyTrademark,
ApplicationInfo,
ConfirmOrder,
PayOrder
}, },
data() { data() {
return {}; return {
//
};
},
methods: {
next() {
console.log("two level router");
// 加载二级路由组件：第二步，填写申请人信息
// this.$router.push("/:chanue/selftmreg/user");
console.log(this);
// 加载二级路由组件：第三步，确认订单
// this.$router.push("/:chanue/selftmreg/confirm");
// 加载二级路由组件：第四步，支付订单
// this.$router.push("/:chanue/selftmreg/pay");
}
} }
}; };
</script> </script>
...@@ -71,6 +124,32 @@ export default { ...@@ -71,6 +124,32 @@ export default {
} }
} }
// 主体页面
.jdindentdetail-page {
background-color: white;
width: 1200px;
margin: 0 auto;
padding-bottom: 90px;
}
.jdindentdetail-wrap {
text-align: left;
border: 1px solid rgba(220, 223, 230, 1);
position: relative;
}
.selftmreg_main {
width: 100%;
padding: 0px 20px;
box-sizing: border-box;
overflow: hidden;
margin-bottom: 50px;
}
.selftmreg_shu {
width: 1143px;
height: 1px;
background-color: #eeeeee;
margin: 20px 0;
}
/* 底部付款按钮 */ /* 底部付款按钮 */
.footer-wrap { .footer-wrap {
width: 100%; width: 100%;
......
channel-access/src/views/pages/selftmreg/SelftmregPage.vue deleted 100644 → 0
<template>
<div class="jdindentdetail-page">
<div class="jdindentdetail-wrap">
<!-- 主体内容步骤条 -->
<SelftmregPageSteps />
<!-- 主页内容 -->
<el-form class="demo-ruleForm" label-width="120px">
<div class="selftmreg_main">
<div class="selftmreg_shu"></div>
<!-- 第一步：填写基本信息 商标信息 -->
<!-- <ModifyTrademark /> -->
<!-- 第一步：填写基本信息 分类选择 -->
<!-- <ClassTrademark /> -->
<!-- 第二步：填写申请人信息 -->
<ApplicationInfo />
<!-- 第三步：确认订单 -->
<!-- <SelftmregPageConfirmStep /> -->
</div>
<div style="clear:both;"></div>
</el-form>
</div>
</div>
</template>
<script>
import SelftmregPageSteps from "./SelftmregPageSteps";
import ModifyTrademark from "./ModifyTrademark";
import ClassTrademark from "../jdindentdetail/classTrademark";
import ApplicationInfo from "./ApplicationInfo";
import SelftmregPageConfirmStep from "./SelftmregPageConfirmStep";
export default {
components: {
SelftmregPageSteps,
ModifyTrademark,
ClassTrademark,
ApplicationInfo,
SelftmregPageConfirmStep
},
data() {
return {};
}
};
</script>
<style lang="scss" scoped>
.jdindentdetail-page {
background-color: white;
width: 1200px;
margin: 0 auto;
padding-bottom: 90px;
}
.jdindentdetail-wrap {
text-align: left;
border: 1px solid rgba(220, 223, 230, 1);
position: relative;
}
/* 主页内容 */
.selftmreg_main {
width: 100%;
padding: 0px 20px;
box-sizing: border-box;
overflow: hidden;
}
.selftmreg_shu {
width: 1143px;
height: 1px;
background-color: #eeeeee;
margin: 20px 0;
}
</style>
\ No newline at end of file
channel-access/src/views/pages/selftmreg/SelftmregPageConfirmStep.vue deleted 100644 → 0
<template>
<div class="confirm">
<i class="selftmreg_shuxian"></i>
</div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
.selftmreg_shuxian {
width: 3px;
height: 15px;
background-color: #0989c5;
display: inherit;
float: left;
margin-top: 4px;
margin-right: 10px;
}
</style>
\ No newline at end of file
channel-access/src/views/pages/selftmreg/SelftmregPageSteps.vue
<template> <template>
<div class="selftmreg_main"> <div class="selftmreg_steps">
<div class="pointsRule"> <div class="pointsRule">
<ul id="list"> <ul id="list">
<li> <li>
...@@ -38,7 +38,7 @@ export default {}; ...@@ -38,7 +38,7 @@ export default {};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.selftmreg_main { .selftmreg_steps {
width: 100%; width: 100%;
padding: 0px 20px; padding: 0px 20px;
box-sizing: border-box; box-sizing: border-box;
...@@ -90,22 +90,27 @@ export default {}; ...@@ -90,22 +90,27 @@ export default {};
i { i {
float: right; float: right;
/* border: #e3e3e3 solid; border: #e3e3e3 solid;
border-width: 1px 1px 0 0; */ border-width: 1px 1px 0 0;
width: 21px; width: 21px;
height: 22px; height: 22px;
/* 往左上的位移变化 */ /* 往左上的位移变化 */
margin: -4px -11px 0px 10px; // margin: -4px -11px 0px 10px;
margin: 2px 0px 0px 14px;
top: 2px; top: 2px;
transform: rotate(45deg); transform: rotate(45deg);
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
/* background: #e3e3e3; */ background: #e3e3e3;
-moz-transform: rotate(45deg); -moz-transform: rotate(45deg);
/* Firefox浏览器 */ /* Firefox浏览器 */
-ms-transform: rotate(45deg); -ms-transform: rotate(45deg);
position: absolute;
z-index: 22;
} }
em.before { em.before {
...@@ -119,6 +124,7 @@ export default {}; ...@@ -119,6 +124,7 @@ export default {};
margin: -4px 10px 0px -11px; margin: -4px 10px 0px -11px;
top: 2px; top: 2px;
background: #fff; background: #fff;
z-index: 2;
} }
} }
} }
...@@ -126,6 +132,11 @@ export default {}; ...@@ -126,6 +132,11 @@ export default {};
li:first-child { li:first-child {
border-left: 1px solid #e3e3e3; border-left: 1px solid #e3e3e3;
background: #e3e3e3; background: #e3e3e3;
i {
margin: 2px 0px 0px 25px;
background: #51d2b7;
}
} }
} }
} }
...@@ -135,4 +146,8 @@ export default {}; ...@@ -135,4 +146,8 @@ export default {};
.active { .active {
background: #51d2b7; background: #51d2b7;
} }
// ul li a
// ul li a i
// background: #51d2b7;
</style> </style>
\ No newline at end of file
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