Skip to content

Z
zhichan
Commit e2ff41cd by 尹亚亭
Options

selftmreg

parent 86ba77b1
Showing with 411 additions and 218 deletions
channel-access/src/api/api.js
...@@ -45,4 +45,21 @@ export function getCompanyInfo(name) { ...@@ -45,4 +45,21 @@ export function getCompanyInfo(name) {
isUser: "no", isUser: "no",
isDecryptUser: "no" isDecryptUser: "no"
}); });
}
// 获取jdtrademark商标注册卡片信息
export function getRegInfo() {
return axios.post(baseUrl, {
actionProcess: "jd",
sign: "2FviZ9PGws8Pt1fBhq0t90mjUvI",
actionBody: {
channelUserId: "",
itemCode: "sbfu",
timeStamp: 1578362897
},
actionType: "getProductListByTypeOneCode",
isDecryptUser: "no",
isUser: "no",
requrl: "/action/tmOrder/springBoard"
})
} }
\ No newline at end of file
channel-access/src/router/index.js
...@@ -3,80 +3,46 @@ import VueRouter from "vue-router"; ...@@ -3,80 +3,46 @@ import VueRouter from "vue-router";
Vue.use(VueRouter); Vue.use(VueRouter);
const routes = [{ const routes = [
{
path: "/jdbycdetailtm", path: "/jdbycdetailtm",
name: "jdbycdetailtm", name: "jdbycdetailtm",
component: () => component: () => import("@/views/pages/jdbycdetailtm")
import("@/views/pages/jdbycdetailtm") },
}, {
{
path: "/companydetail", path: "/companydetail",
name: "companydetail", name: "companydetail",
component: () => component: () => import("@/views/pages/companydetail")
import("@/views/pages/companydetail") },
}, {
{
path: "/jdindentlist", path: "/jdindentlist",
name: "jdindentdetail", name: "jdindentdetail",
component: () => component: () => import("@/views/pages/jdindentlist")
import("@/views/pages/jdindentlist") },
}, {
{
path: "/jdindentdetail", path: "/jdindentdetail",
name: "jdindentdetail", name: "jdindentdetail",
component: () => component: () => import("@/views/pages/jdindentdetail")
import("@/views/pages/jdindentdetail") },
}, /////////
///////// {
{
path: "/jdtrademark", path: "/jdtrademark",
name: "jdtrademark", name: "jdtrademark",
component: () => component: () => import("@/views/pages/jdtrademark/Jdtrademark")
import("@/views/pages/jdtrademark/Jdtrademark") },
}, {
{
path: "/selftmreg", path: "/selftmreg",
name: "selftmreg", name: "selftmreg",
component: () => component: () => import("@/views/pages/selftmreg/Selftmreg")
import("@/views/pages/selftmreg/Selftmreg"), },
// 配置二级路由 {
children: [
// 第一步：填写基本信息
{
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: "/bycnoticeindex", path: "/bycnoticeindex",
name: "bycnoticeindex", name: "bycnoticeindex",
component: () => component: () => import("@/views/pages/bycnoticeindex/Bycnoticeindex")
import("@/views/pages/bycnoticeindex/Bycnoticeindex") }
}
]; ];
const router = new VueRouter({ const router = new VueRouter({
routes routes
}); });
export default router; export default router;
\ No newline at end of file
channel-access/src/views/pages/jdindentdetail/applicantInfo.vue
...@@ -91,7 +91,7 @@ ...@@ -91,7 +91,7 @@
</el-form-item> </el-form-item>
</div> </div>
</el-form> </el-form>
<!-- 底部按钮 --> <!-- 底部按钮 -->
<div class="drawer-bottom"> <div class="drawer-bottom">
<button class="esc">取消</button> <button class="esc">取消</button>
...@@ -132,6 +132,7 @@ export default { ...@@ -132,6 +132,7 @@ export default {
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
//
.applicantInfo { .applicantInfo {
width: 100%; width: 100%;
.el-radio { .el-radio {
......
channel-access/src/views/pages/jdindentdetail/classTrademark.vue
...@@ -3,12 +3,7 @@ ...@@ -3,12 +3,7 @@
<div class="classTrademark-left"> <div class="classTrademark-left">
<div class="classTrademark-left-top"> <div class="classTrademark-left-top">
<el-button>分类</el-button> <el-button>分类</el-button>
<el-input <el-input placeholder="请输入关键字进行过滤" suffix-icon="el-icon-search" v-model="keyZi"></el-input>
placeholder="请输入关键字进行过滤"
suffix-icon="el-icon-search"
v-model="keyZi"
>
</el-input>
<span class="quxiao">取消</span> <span class="quxiao">取消</span>
</div> </div>
<!-- 树形控件 --> <!-- 树形控件 -->
...@@ -21,8 +16,7 @@ ...@@ -21,8 +16,7 @@
default-expand-all default-expand-all
:expand-on-click-node="false" :expand-on-click-node="false"
:props="props" :props="props"
> ></el-tree>
</el-tree>
</div> </div>
</div> </div>
<!-- --> <!-- -->
...@@ -33,13 +27,16 @@ ...@@ -33,13 +27,16 @@
</div> </div>
<div class="classTrademark-right-main"> <div class="classTrademark-right-main">
<div class="notData" v-if="classDataList.length == 0"> <div class="notData" v-if="classDataList.length == 0">
<img src="@/assets/imgs/kong-2.png" alt="" /> <img src="@/assets/imgs/kong-2.png" alt />
<span>请点击左侧选择商标类别</span> <span>请点击左侧选择商标类别</span>
</div> </div>
<div class="classData" v-else> <div class="classData" v-else>
<div class="classData-top"> <div class="classData-top">
<h4>第02类 颜料油漆</h4> <h4>第02类 颜料油漆</h4>
<p>已选择<span>1</span>项</p> <p>
已选择
<span>1</span>项
</p>
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</div> </div>
<div class="classData-main"> <div class="classData-main">
...@@ -49,9 +46,7 @@ ...@@ -49,9 +46,7 @@
closable closable
:disable-transitions="false" :disable-transitions="false"
@close="handleClose(tag)" @close="handleClose(tag)"
> >{{ tag }}</el-tag>
{{ tag }}
</el-tag>
</div> </div>
</div> </div>
</div> </div>
...@@ -66,7 +61,7 @@ ...@@ -66,7 +61,7 @@
</template> </template>
<script> <script>
import { getNcldata } from "@/api/api.js"; import { getJdbycdetailtmData } from "@/api/api.js";
export default { export default {
data() { data() {
return { return {
...@@ -170,7 +165,7 @@ export default { ...@@ -170,7 +165,7 @@ export default {
} }
}, },
mounted() { mounted() {
getNcldata().then(res => { getJdbycdetailtmData().then(res => {
console.log(res.data); console.log(res.data);
}); });
} }
......
channel-access/src/views/pages/jdtrademark/Jdtmbrandreg.vue
...@@ -23,46 +23,42 @@ ...@@ -23,46 +23,42 @@
<div class="brandreg-swiper"> <div class="brandreg-swiper">
<div class="swiper-container"> <div class="swiper-container">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide"> <div
<div class="brandreg-swiper-hearder"> class="swiper-slide"
v-for="(item,index) in dataList"
:key="index"
@mouseenter="addActive(index,$event)"
:class="{'swiper-slide-enter':index==current}"
>
<div
class="brandreg-swiper-hearder"
:class="{'brandreg-swiper-hearder-enter':index==current}"
>
<div> <div>
<div> <div>
<img <img :src="item.productLogo" alt />
src="http://gsb-zc.oss-cn-beijing.aliyuncs.com/zc_qft_pi15755163570461.png"
alt
/>
</div> </div>
<div>京东云PLUS商标自助申请</div> <div>{{item.itemName}}</div>
</div> </div>
</div> </div>
<div class="brandreg-swiper-content"> <div
class="brandreg-swiper-content"
:class="{'brandreg-swiper-content-button-enter':index==current}"
>
<ul> <ul>
<li> <li v-for="(t, i) in JSON.parse(item.productDesc).desc" :key="i+t">
<div> <div>
<img src="../../../assets/imgs/dbx.png" alt /> <img src="../../../assets/imgs/dbx.png" alt />
</div> </div>
<div>自己检索商标，准备官方所需注册材料</div> <div>{{t}}</div>
</li>
<!-- 写死的三条数据 -->
<li>
<div>
<img src="../../../assets/imgs/dbx.png" alt />
</div>
<div>提交迅速，及时反馈</div>
</li>
<li>
<div>
<img src="../../../assets/imgs/dbx.png" alt />
</div>
<div>全流程跟踪，掌握申请进度</div>
</li> </li>
</ul> </ul>
<div> <div>
<div> <div>
<sup>￥</sup> <sup>￥</sup>
<span>300</span>/件 <span>{{item.proPrice}}</span>/件
</div> </div>
<div class="brandreg-swiper-content-button">立即购买</div> <div class="brandreg-swiper-content-button" @click="goOwnBuyPage(index)">立即购买</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -76,20 +72,41 @@ ...@@ -76,20 +72,41 @@
</template> </template>
<script> <script>
import api from "@/api/api.js"; // 注册信息数据请求
import { getRegInfo } from "@/api/api.js";
export default { export default {
data() { data() {
return { return {
dataList: [], dataList: [],
showArrows: false showArrows: false,
current: 1
}; };
}, },
mounted() { mounted() {
// 请求数据并装填到datalist里面 getRegInfo().then(res => {
// 请求数据并装填到datalist里面
this.dataList = res.data.data;
});
}, },
methods: { methods: {
/*swiper区域添加class */ /*swiper区域添加class */
addActive(index, event) {
this.current = index;
},
// 点击购买去相应的购买页面
goOwnBuyPage(index) {
if (index == 0) {
location.href =
"https://oauth2.jdcloud.com/authorize?response_type=token&redirect_uri=https://tm.plus.jdcloud.com/jdtm/getUser&state=selftmreg&client_id=9491577327154697";
}
if (index == 1) {
location.href = "https://market.jdcloud.com/service/details/582208";
}
if (index == 2) {
location.href = "https://market.jdcloud.com/service/details/582207";
}
}
} }
}; };
</script> </script>
...@@ -153,7 +170,7 @@ export default { ...@@ -153,7 +170,7 @@ export default {
margin-top: 22px; margin-top: 22px;
.swiper-container { .swiper-container {
width: 1203px; width: 1203px;
height: 380px; // height: 380px;
padding-left: 3px; padding-left: 3px;
.swiper-wrapper { .swiper-wrapper {
display: flex; display: flex;
...@@ -161,7 +178,7 @@ export default { ...@@ -161,7 +178,7 @@ export default {
.swiper-slide { .swiper-slide {
width: 400px !important; width: 400px !important;
box-sizing: border-box; box-sizing: border-box;
height: 370px; // height: 370px;
text-align: center; text-align: center;
margin-right: 0 !important; margin-right: 0 !important;
transition: all 0.1s; transition: all 0.1s;
...@@ -172,9 +189,9 @@ export default { ...@@ -172,9 +189,9 @@ export default {
} }
} }
/* 移入 */ /* 移入之后的高亮样式 */
.brandreg-swiper .swiper-slide-enter { .brandreg-swiper .swiper-slide-enter {
height: 380px; height: 370px;
} }
.brandreg-swiper .brandreg-swiper-hearder-enter { .brandreg-swiper .brandreg-swiper-hearder-enter {
height: 80px; height: 80px;
...@@ -184,10 +201,12 @@ export default { ...@@ -184,10 +201,12 @@ export default {
line-height: 80px; line-height: 80px;
} }
.brandreg-swiper .brandreg-swiper-content-button-enter { .brandreg-swiper .brandreg-swiper-content-button-enter {
background: #32b6e7; .brandreg-swiper-content-button {
border: 1px solid #32b6e7; background: #32b6e7;
color: #fff; border: 1px solid #32b6e7;
cursor: pointer; color: #fff;
cursor: pointer;
}
} }
/* 轮播卡片头部图文 */ /* 轮播卡片头部图文 */
...@@ -276,5 +295,6 @@ export default { ...@@ -276,5 +295,6 @@ export default {
font-family: PingFangSC-Regular, PingFangSC; font-family: PingFangSC-Regular, PingFangSC;
font-weight: 400; font-weight: 400;
color: rgba(0, 136, 199, 1); color: rgba(0, 136, 199, 1);
margin-bottom: 10px;
} }
</style> </style>
\ No newline at end of file
channel-access/src/views/pages/jdtrademark/Jdtmsearch.vue
...@@ -109,7 +109,6 @@ export default { ...@@ -109,7 +109,6 @@ export default {
/*类别选中项 */ /*类别选中项 */
handleCheckedCitiesChange(value) { handleCheckedCitiesChange(value) {
this.checkedType = value; this.checkedType = value;
console.log(this.checkedType, this.searchValue);
let checkedCount = value.length; let checkedCount = value.length;
this.checkAll = checkedCount === this.typeList.length; this.checkAll = checkedCount === this.typeList.length;
...@@ -118,8 +117,7 @@ export default { ...@@ -118,8 +117,7 @@ export default {
}, },
goSearch() { goSearch() {
this.$router.push({ this.$router.push({
// bug01 path: `/jdbycquerytm`,
path: `/${this.$root.channelName}/jdbycquerytm`,
query: { query: {
checkedNcl: JSON.stringify(this.checkedType), checkedNcl: JSON.stringify(this.checkedType),
tminput: this.searchValue tminput: this.searchValue
...@@ -160,7 +158,6 @@ export default { ...@@ -160,7 +158,6 @@ export default {
height: 28px; height: 28px;
font-size: 28px; font-size: 28px;
font-family: PangMenZhengDao; font-family: PangMenZhengDao;
/* color: rgb(168, 24, 24); */
color: #fff; color: #fff;
line-height: 32px; line-height: 32px;
letter-spacing: 1px; letter-spacing: 1px;
......
channel-access/src/views/pages/jdtrademark/Jdtrademark.vue
<template> <template>
<div class="jdtrademark"> <div class="jdtrademark">
<!-- 轮播图 --> <!-- 头部banner -->
<div class="jdtrademark-banner"> <div class="jdtrademark-banner">
<div> <div>
<div @click="goIndentList">我的订单</div> <div @click="goIndentList">我的订单</div>
...@@ -51,6 +51,7 @@ ...@@ -51,6 +51,7 @@
</template> </template>
<script> <script>
// 导入拆分出去的两个组件
import Jdtmsearch from "./Jdtmsearch"; import Jdtmsearch from "./Jdtmsearch";
import Jdtmbrandreg from "./Jdtmbrandreg"; import Jdtmbrandreg from "./Jdtmbrandreg";
...@@ -155,7 +156,7 @@ export default { ...@@ -155,7 +156,7 @@ export default {
.jdtrademark-banner { .jdtrademark-banner {
min-height: 480px; min-height: 480px;
background: yellowgreen; background: yellowgreen;
/* assets的别名？ */ /* assets的别名？不能用@ */
background: url(../../../assets/imgs/banner.png) center center no-repeat; background: url(../../../assets/imgs/banner.png) center center no-repeat;
background-size: cover; background-size: cover;
> div { > div {
......
channel-access/src/views/pages/selftmreg/ApplicationInfo.vue
<!-- 第二步：填写申请人信息 -->
<template> <template>
<div class="infomation"> <div class="infomation">
<!-- 申请人信息 --> <!-- 申请人信息 -->
...@@ -5,6 +7,7 @@ ...@@ -5,6 +7,7 @@
<i class="selftmreg_shuxian"></i> <i class="selftmreg_shuxian"></i>
<h4>填写申请人信息</h4> <h4>填写申请人信息</h4>
</div> </div>
<div class="applicantInfo"> <div class="applicantInfo">
<el-form <el-form
:model="ruleForm" :model="ruleForm"
...@@ -22,10 +25,16 @@ ...@@ -22,10 +25,16 @@
</el-form-item> </el-form-item>
<div v-if="ruleForm.resource == 1"> <div v-if="ruleForm.resource == 1">
<el-form-item label="公司名称：" prop="name"> <el-form-item label="公司名称：" prop="name">
<el-input v-model="ruleForm.name" placeholder="请输入公司名称"></el-input> <el-input
v-model="ruleForm.name"
placeholder="请输入公司名称"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="统一社会信用代码：" prop="xinyongma"> <el-form-item label="统一社会信用代码：" prop="xinyongma">
<el-input v-model="ruleForm.xinyongma" placeholder="请输入统一社会信用代码"></el-input> <el-input
v-model="ruleForm.xinyongma"
placeholder="请输入统一社会信用代码"
></el-input>
<el-popover <el-popover
placement="right-end" placement="right-end"
width="170" width="170"
...@@ -36,24 +45,43 @@ ...@@ -36,24 +45,43 @@
</el-popover> </el-popover>
</el-form-item> </el-form-item>
<el-form-item label="执照详细地址：" prop="address"> <el-form-item label="执照详细地址：" prop="address">
<el-input v-model="ruleForm.address" placeholder="请输入执照详细地址"></el-input> <el-input
v-model="ruleForm.address"
placeholder="请输入执照详细地址"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="邮政编码：" prop="postal"> <el-form-item label="邮政编码：" prop="postal">
<el-input v-model="ruleForm.postal" placeholder="请输入邮政编码" :maxlength="6"></el-input> <el-input
v-model="ruleForm.postal"
placeholder="请输入邮政编码"
:maxlength="6"
></el-input>
</el-form-item> </el-form-item>
</div> </div>
<div v-if="ruleForm.resource == 2"> <div v-if="ruleForm.resource == 2">
<el-form-item label="姓名：" prop="name"> <el-form-item label="姓名：" prop="name">
<el-input v-model="ruleForm.username" placeholder="请输入您的姓名"></el-input> <el-input
v-model="ruleForm.username"
placeholder="请输入您的姓名"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="身份证号：" prop="name"> <el-form-item label="身份证号：" prop="name">
<el-input v-model="ruleForm.idCard" placeholder="请输入您的身份证号"></el-input> <el-input
v-model="ruleForm.idCard"
placeholder="请输入您的身份证号"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="注册地址：" prop="name"> <el-form-item label="注册地址：" prop="name">
<el-input v-model="ruleForm.idCard" placeholder="请输入注册地址"></el-input> <el-input
v-model="ruleForm.idCard"
placeholder="请输入注册地址"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="统一社会信用代码：" prop="xinyongma"> <el-form-item label="统一社会信用代码：" prop="xinyongma">
<el-input v-model="ruleForm.xinyongma" placeholder="请输入统一社会信用代码"></el-input> <el-input
v-model="ruleForm.xinyongma"
placeholder="请输入统一社会信用代码"
></el-input>
<el-popover <el-popover
placement="right-end" placement="right-end"
width="170" width="170"
...@@ -64,7 +92,11 @@ ...@@ -64,7 +92,11 @@
</el-popover> </el-popover>
</el-form-item> </el-form-item>
<el-form-item label="邮政编码：" prop="postal"> <el-form-item label="邮政编码：" prop="postal">
<el-input v-model="ruleForm.postal" placeholder="请输入邮政编码" :maxlength="6"></el-input> <el-input
v-model="ruleForm.postal"
placeholder="请输入邮政编码"
:maxlength="6"
></el-input>
</el-form-item> </el-form-item>
</div> </div>
</el-form> </el-form>
...@@ -84,19 +116,35 @@ ...@@ -84,19 +116,35 @@
label-position="left" label-position="left"
> >
<el-form-item label="客户联系人：" prop="contanct"> <el-form-item label="客户联系人：" prop="contanct">
<el-input v-model="ruleForm.contanct" placeholder="请输入联系人"></el-input> <el-input
v-model="ruleForm.contanct"
placeholder="请输入联系人"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="联系电话：" prop="phone"> <el-form-item label="联系电话：" prop="phone">
<el-input v-model="ruleForm.phone" placeholder="请输入联系电话"></el-input> <el-input
v-model="ruleForm.phone"
placeholder="请输入联系电话"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="电子邮箱：" prop="email"> <el-form-item label="电子邮箱：" prop="email">
<el-input v-model="ruleForm.email" placeholder="请输入电子邮箱"></el-input> <el-input
v-model="ruleForm.email"
placeholder="请输入电子邮箱"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="座机："> <el-form-item label="座机：">
<el-input v-model="ruleForm.tel" placeholder="区号座机号码"></el-input> <el-input
v-model="ruleForm.tel"
placeholder="区号座机号码"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="传真："> <el-form-item label="传真：">
<el-input v-model="ruleForm.faxNumber" placeholder="请输入传真号" :maxlength="6"></el-input> <el-input
v-model="ruleForm.faxNumber"
placeholder="请输入传真号"
:maxlength="6"
></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
...@@ -109,12 +157,10 @@ ...@@ -109,12 +157,10 @@
</h4> </h4>
</div> </div>
<div class="jdindentlist-drawerDetail"> <div class="jdindentlist-drawerDetail">
<!-- -->
<div class="from-main"> <div class="from-main">
<!-- 上传营业执照 -->
<div class="from-items"> <div class="from-items">
<div class="from-item-title"> <div class="from-item-title"><span>*</span>上传材料：营业执照</div>
<span>*</span>上传材料：营业执照
</div>
<div class="upload-box"> <div class="upload-box">
<!-- 1 --> <!-- 1 -->
</div> </div>
...@@ -122,15 +168,24 @@ ...@@ -122,15 +168,24 @@
<img src="@/assets/imgs/sbzc/yyzz1.png" alt /> <img src="@/assets/imgs/sbzc/yyzz1.png" alt />
<div class="chakan" @click="lookImage(1)">查看大图</div> <div class="chakan" @click="lookImage(1)">查看大图</div>
</div> </div>
<div class="text">
<i class="el-icon-warning"></i>
材料要求盖章/签字清晰完整，建议盖章/签字在文件中间空白处不压字<br />格式为<span>PDF</span>或<span>JPG</span>，大小不能超过<span
>10M</span
><br /><span
>商标局声明：自2018年1月1日起，国内申请人办理商标注册、异议、变更、转让、续展等商标事宜，应当使用标注统一社会信用代码身份证明文件，未使用则不予受理</span
>。
</div>
</div> </div>
<!-- 上传代理委托书 -->
<div class="from-items"> <div class="from-items">
<div class="from-item-title"> <div class="from-item-title">
<p> <p><span>*</span>上传材料：代理委托书</p>
<span>*</span>上传材料：代理委托书
</p>
<a <a
href="http://gsb-zc.oss-cn-beijing.aliyuncs.com/igirl_channel_tmwtsdemo001.doc" href="http://gsb-zc.oss-cn-beijing.aliyuncs.com/igirl_channel_tmwtsdemo001.doc"
>下载委托书模板</a> >下载委托书模板</a
>
</div> </div>
<div class="upload-box"> <div class="upload-box">
<!-- 2 --> <!-- 2 -->
...@@ -139,13 +194,22 @@ ...@@ -139,13 +194,22 @@
<img src="@/assets/imgs/sbzc/wts1.png" alt /> <img src="@/assets/imgs/sbzc/wts1.png" alt />
<div class="chakan" @click="lookImage(2)">查看大图</div> <div class="chakan" @click="lookImage(2)">查看大图</div>
</div> </div>
<div class="text">
<i class="el-icon-warning"></i>
材料要求盖章/签字清晰完整，建议盖章/签字在文件中间空白处不压字<br />请上传由申请人盖章或签字的中文代理委托书彩色扫描件，格式为<span>JPG</span>宽高的大小为<br /><span
>4000px~600px</span
>，<span>300dpi</span>分辨率，大小不能超过<span>10M</span>。
</div>
</div> </div>
<!-- 上传优先权证明 -->
<div class="from-items"> <div class="from-items">
<div class="from-item-title"> <div class="from-item-title">
<p>上传材料：优先权证明</p> <p>上传材料：优先权证明</p>
<a <a
href="http://gsb-zc.oss-cn-beijing.aliyuncs.com/yzq_201908281849646526xujnsedjnqwdoni.doc" href="http://gsb-zc.oss-cn-beijing.aliyuncs.com/yzq_201908281849646526xujnsedjnqwdoni.doc"
>下载优先权证明</a> >下载优先权证明</a
>
</div> </div>
<div class="upload-box"> <div class="upload-box">
<!-- 3 --> <!-- 3 -->
...@@ -156,18 +220,6 @@ ...@@ -156,18 +220,6 @@
</div> </div>
</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> </div>
</template> </template>
...@@ -371,6 +423,27 @@ export default { ...@@ -371,6 +423,27 @@ export default {
.jdindentlist-drawerDetail { .jdindentlist-drawerDetail {
.from-main { .from-main {
width: 100%; width: 100%;
// 资料上传的文本说明
.text {
margin-top: 25px;
padding-left: 60px;
text-align: left;
width: 542px;
line-height: 24px;
font-size: 12px;
font-family: PingFangSC;
font-weight: 400;
color: rgba(136, 136, 136, 1);
position: relative;
i.el-icon-warning {
position: absolute;
left: 35px;
top: 5px;
}
span {
color: #0f8ee9;
}
}
} }
} }
.drawer-bottom { .drawer-bottom {
......
channel-access/src/views/pages/selftmreg/ConfirmOrder.vue
<!-- 第三步：确认订单 -->
<template> <template>
<div class="confirm"> <div class="confirm">
<div class="info-title"> <div class="info-title">
...@@ -42,7 +44,7 @@ ...@@ -42,7 +44,7 @@
<i class="selftmreg_shuxian"></i> <i class="selftmreg_shuxian"></i>
<h4> <h4>
申请人及联系人信息 申请人及联系人信息
<span class="edit"> <span class="edit" @click="goSteptwo">
<i class="el-icon-edit"></i> <i class="el-icon-edit"></i>
<b>编辑</b> <b>编辑</b>
</span> </span>
...@@ -90,7 +92,12 @@ ...@@ -90,7 +92,12 @@
<h4>订单备注</h4> <h4>订单备注</h4>
</div> </div>
<!-- 文本域 --> <!-- 文本域 -->
<el-input type="textarea" :rows="2" placeholder="如有特殊需要，请填写订单备注" v-model="textarea"></el-input> <el-input
type="textarea"
:rows="2"
placeholder="如有特殊需要，请填写订单备注"
v-model="textarea"
></el-input>
</div> </div>
</template> </template>
...@@ -100,6 +107,13 @@ export default { ...@@ -100,6 +107,13 @@ export default {
return { return {
textarea: "" textarea: ""
}; };
},
methods: {
// click未生效
goSteptwo() {
console.log(222);
// 去第二步骤的页面
}
} }
}; };
</script> </script>
...@@ -199,4 +213,4 @@ export default { ...@@ -199,4 +213,4 @@ export default {
resize: none; resize: none;
border: 1px solid #d6daeb; border: 1px solid #d6daeb;
} }
</style> </style>
\ No newline at end of file
channel-access/src/views/pages/selftmreg/ModifyTrademark.vue
<!-- 第一步：填写基本信息 商标信息 分类选择-->
<template> <template>
<div> <div>
<!-- 基本信息填写 --> <!-- 基本信息填写 -->
...@@ -18,16 +19,25 @@ ...@@ -18,16 +19,25 @@
<el-radio :label="2">图形</el-radio> <el-radio :label="2">图形</el-radio>
<el-radio :label="3">文字及图形</el-radio> <el-radio :label="3">文字及图形</el-radio>
</el-radio-group> </el-radio-group>
<span class="a-span" @click="lookImg('如何选择商标类型', 1)">如何选择商标类型?</span> <span class="a-span" @click="lookImg('如何选择商标类型', 1)"
>如何选择商标类型?</span
>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="商标名称：" label="商标名称："
prop="name" prop="name"
v-if="ruleForm.resource == 1 || ruleForm.resource == 3" v-if="ruleForm.resource == 1 || ruleForm.resource == 3"
> >
<el-input v-model="ruleForm.name" placeholder="请输入商标名称"></el-input> <el-input
v-model="ruleForm.name"
placeholder="请输入商标名称"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="商标图样：" prop="name" v-if="ruleForm.resource == 1"> <el-form-item
label="商标图样："
prop="name"
v-if="ruleForm.resource == 1"
>
<div class="trademark-name"> <div class="trademark-name">
<div> <div>
<el-button>手动上传</el-button> <el-button>手动上传</el-button>
...@@ -37,8 +47,9 @@ ...@@ -37,8 +47,9 @@
<div class="trademarkImg"> <div class="trademarkImg">
<img src="@/assets/imgs/zwtp.png" alt /> <img src="@/assets/imgs/zwtp.png" alt />
</div> </div>
<p> <p class="locate-bottom">
<i class="el-icon-warning"></i>自动生成的商标图样默认以“宋体”字样自左向右排列递交官方。 <i class="el-icon-warning"></i
>自动生成的商标图样默认以“宋体”字样自左向右排列递交官方。
</p> </p>
</div> </div>
</div> </div>
...@@ -55,16 +66,21 @@ ...@@ -55,16 +66,21 @@
</div> </div>
<div class="p-left"> <div class="p-left">
<p> <p>
<i class="el-icon-warning"></i>上传黑白图样，注册后可以更换商标颜色使用； <i class="el-icon-warning"></i
>上传黑白图样，注册后可以更换商标颜色使用；
</p> </p>
<p> <p>
<i class="el-icon-warning"></i>上传彩色图样，注册后只能按照该彩色图样使用，并在委托书商标名称后方增加文字“（指定颜色）”； <i class="el-icon-warning"></i
>上传彩色图样，注册后只能按照该彩色图样使用，并在委托书商标名称后方增加文字“（指定颜色）”；
</p> </p>
<p> <p>
<i class="el-icon-warning"></i>上传的彩色图样需与黑白图样的样式一致。 <i class="el-icon-warning"></i
>上传的彩色图样需与黑白图样的样式一致。
</p> </p>
<p> <p>
<span @click="lookImg('查看上传商标图样注意事项', 2)">查看上传商标图样注意事项</span> <span @click="lookImg('查看上传商标图样注意事项', 2)"
>查看上传商标图样注意事项</span
>
</p> </p>
</div> </div>
</div> </div>
...@@ -77,10 +93,15 @@ ...@@ -77,10 +93,15 @@
<el-drawer <el-drawer
:title="drawerTitle" :title="drawerTitle"
custom-class="jdindentdetail-drawer" custom-class="jdindentdetail-drawer"
size="430px" size="510px"
:visible.sync="drawerRight" :visible.sync="drawerRight"
> >
<img class="shangImg" src="@/assets/imgs/jdt/shuoming.png" alt v-if="lookIndex == 1" /> <img
class="shangImg"
src="@/assets/imgs/jdt/shuoming.png"
alt
v-if="lookIndex == 1"
/>
<p v-if="lookIndex == 2"> <p v-if="lookIndex == 2">
图样文件格式应为jpg，图形应清晰，图样文件大小应小于“200KB”，且图形像素介于“600X600 图样文件格式应为jpg，图形应清晰，图样文件大小应小于“200KB”，且图形像素介于“600X600
- 1500X1500”之间，如果通过扫描获得图样的，应按 - 1500X1500”之间，如果通过扫描获得图样的，应按
...@@ -96,7 +117,11 @@ ...@@ -96,7 +117,11 @@
<div class="classTrademark-left"> <div class="classTrademark-left">
<div class="classTrademark-left-top"> <div class="classTrademark-left-top">
<el-button>分类</el-button> <el-button>分类</el-button>
<el-input placeholder="请输入关键字进行过滤" suffix-icon="el-icon-search" v-model="keyZi"></el-input> <el-input
placeholder="请输入关键字进行过滤"
suffix-icon="el-icon-search"
v-model="keyZi"
></el-input>
<span class="quxiao">取消</span> <span class="quxiao">取消</span>
</div> </div>
<!-- 树形控件 --> <!-- 树形控件 -->
...@@ -139,7 +164,8 @@ ...@@ -139,7 +164,8 @@
closable closable
:disable-transitions="false" :disable-transitions="false"
@close="handleClose(tag)" @close="handleClose(tag)"
>{{ tag }}</el-tag> >{{ tag }}</el-tag
>
</div> </div>
</div> </div>
</div> </div>
...@@ -149,6 +175,7 @@ ...@@ -149,6 +175,7 @@
</template> </template>
<script> <script>
import { getJdbycdetailtmData } from "@/api/api.js";
export default { export default {
data() { data() {
return { return {
...@@ -239,6 +266,7 @@ export default { ...@@ -239,6 +266,7 @@ export default {
"12asd3", "12asd3",
"12adqwe3" "12adqwe3"
] ]
// classdata:
}; };
}, },
methods: { methods: {
...@@ -253,7 +281,12 @@ export default { ...@@ -253,7 +281,12 @@ export default {
this.classDataList.splice(this.classDataList.indexOf(tag), 1); this.classDataList.splice(this.classDataList.indexOf(tag), 1);
} }
}, },
mounted() {} mounted() {
// getJdbycdetailtmData().then(res => {
// // 请求数据并装填到datalist里面
// this.dataList = res.data.data;
// });
}
}; };
</script> </script>
...@@ -285,12 +318,18 @@ export default { ...@@ -285,12 +318,18 @@ export default {
} }
} }
.a-span { .a-span {
font-family: PingFangSC-Regular; width: 108px;
height: 17px;
font-size: 12px; font-size: 12px;
color: #409eff; font-family: PingFangSC-Regular;
cursor: pointer; font-weight: 400;
line-height: 17px;
margin-left: 30px; margin-left: 30px;
} }
.a-span:hover {
color: #0989c5;
text-decoration: underline;
}
.trademark-name { .trademark-name {
width: 100%; width: 100%;
div { div {
......
channel-access/src/views/pages/selftmreg/PayOrder.vue
<!-- 第四步：支付订单页面 -->
<template> <template>
<div>支付订单页面</div> <div>支付订单页面</div>
</template> </template>
\ No newline at end of file
channel-access/src/views/pages/selftmreg/Selftmreg.vue
...@@ -3,7 +3,9 @@ ...@@ -3,7 +3,9 @@
<!-- 导航面包屑 --> <!-- 导航面包屑 -->
<div class="jdindentdetail-nav"> <div class="jdindentdetail-nav">
<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item class="isActive">商标注册服务</el-breadcrumb-item> <el-breadcrumb-item class="isActive" :to="{ path: '/jdtrademark' }"
>商标注册服务</el-breadcrumb-item
>
<el-breadcrumb-item>自助商标注册</el-breadcrumb-item> <el-breadcrumb-item>自助商标注册</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
...@@ -14,29 +16,17 @@ ...@@ -14,29 +16,17 @@
<div class="jdindentdetail-page"> <div class="jdindentdetail-page">
<div class="jdindentdetail-wrap"> <div class="jdindentdetail-wrap">
<!-- 主体内容步骤条 --> <!-- 主体内容步骤条 -->
<SelftmregPageSteps ref="qwe" /> <SelftmregPageSteps ref="steps" />
<!-- 主页内容 --> <!-- 主页内容 -->
<el-form class="demo-ruleForm" label-width="120px"> <el-form class="demo-ruleForm" label-width="120px">
<div class="selftmreg_main"> <div class="selftmreg_main">
<div class="selftmreg_shu"></div> <div class="selftmreg_shu"></div>
<!-- Divider 分割线 --> <ModifyTrademark v-if="index == 0" />
<!-- <el-divider></el-divider> --> <ApplicationInfo v-if="index == 1" />
<ConfirmOrder v-if="index == 2" />
<router-view></router-view> <PayOrder v-if="index == 3" />
<!-- 第一步：填写基本信息 商标信息 分类选择-->
<!-- <ModifyTrademark /> -->
<!-- 第二步：填写申请人信息 -->
<!-- <ApplicationInfo /> -->
<!-- 第三步：确认订单 -->
<!-- <ConfirmOrder /> -->
<!-- 第四步：支付订单页面 -->
<!-- <PayOrder /> -->
</div> </div>
<div style="clear:both;"></div> <div style="clear:both;"></div>
...@@ -47,11 +37,26 @@ ...@@ -47,11 +37,26 @@
<!-- 底部付款按钮 --> <!-- 底部付款按钮 -->
<div class="footer-wrap"> <div class="footer-wrap">
<div class="tabButtomPrcie"> <div class="tabButtomPrcie">
<span> <span v-if="index == 0">
应付总额： 应付总额：
<i>￥0.00</i> <i>￥0.00</i>
</span> </span>
<el-button type="primary" @click="next">下一步</el-button> <el-button plain @click="prev" v-if="index == 1">上一步</el-button>
<el-button type="primary" @click="next" v-if="index == 0 || index == 1"
>下一步</el-button
>
<label v-if="index == 2">
<input type="checkbox" v-model="checked" />
我已阅读<span>《商标服务合同》</span>且同意该合同内容
</label>
<el-button
type="primary"
@click="next"
v-if="index == 2"
:disabled="!checked"
:class="{ disabled: !checked }"
>提交订单</el-button
>
</div> </div>
</div> </div>
</div> </div>
...@@ -74,32 +79,64 @@ export default { ...@@ -74,32 +79,64 @@ export default {
}, },
data() { data() {
return { return {
// //初始为0，对应第一步填写基本信息
index: 0 index: 0,
// 是否已经勾选同意协议
checked: false,
firstNums: {
one: {
type: "ds",
name: "",
icon: ""
},
two: {
name: "",
types: []
},
three: {}
}
}; };
}, },
created() { created() {
if (this.index == 0) { if (this.index == 0) {
this.$router.push("/selftmreg/basic"); this.$router.push("/selftmreg");
} }
}, },
methods: { methods: {
next() { next() {
console.log("two level router"); // console.log(this.$refs.steps.$refs.uls.children);
// 加载二级路由组件：第二步，填写申请人信息
// this.$router.push("/:chanue/selftmreg/user");
console.log(this.$refs.qwe.$refs.asd.children);
this.index++; this.index++;
// 获取a标签和i标签以给其加入高亮的样式
let as = document.getElementsByTagName("a");
let is = document.getElementsByTagName("i");
if (this.index == 1) { if (this.index == 1) {
this.$router.push("/selftmreg/user"); // 给 第二步填写申请人信息对应的步骤进度条 添加高亮样式
as[1].classList.add("active");
is[3].classList.add("active");
} }
if (this.index == 2) { if (this.index == 2) {
this.$router.push("/selftmreg/confirm"); // 给 第三步确认订单信息对应的步骤进度条 添加高亮样式
as[2].classList.add("active");
is[4].classList.add("active");
} }
// 加载二级路由组件：第三步，确认订单 if (this.index == 3) {
// this.$router.push("/:chanue/selftmreg/confirm"); // 给 第四步支付订单对应的步骤进度条 添加高亮样式
// 加载二级路由组件：第四步，支付订单 as[3].classList.add("active");
// this.$router.push("/:chanue/selftmreg/pay"); is[5].classList.add("active");
} else {
}
},
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--;
} }
} }
}; };
...@@ -193,6 +230,41 @@ export default { ...@@ -193,6 +230,41 @@ export default {
font-size: 24px; font-size: 24px;
} }
} }
label {
font-size: 14px;
font-family: PingFangSC;
font-weight: 400;
color: rgb(102, 102, 102);
margin-right: 20px;
span {
color: rgb(15, 142, 233);
}
}
button.el-button--primary {
padding: 8px 20px;
width: 170px;
background: rgb(81, 210, 183);
border-radius: 0px;
color: rgb(255, 255, 255);
border: 0px;
}
button {
padding: 8px 20px;
width: 170px;
background: none;
border-radius: 0px;
color: rgb(81, 210, 183);
border: 1px solid;
}
.disabled {
opacity: 0.5;
}
} }
} }
</style>
\ No newline at end of file // 底部按钮样式重写
</style>
channel-access/src/views/pages/selftmreg/SelftmregPageSteps.vue
<!-- 头部进度条 -->
<template> <template>
<div class="selftmreg_steps"> <div class="selftmreg_steps">
<div class="pointsRule"> <div class="pointsRule">
<ul id="list" ref="asd"> <ul id="list" ref="uls">
<li> <li>
<a class="active"> <a class="active">
<span>填写基本信息</span> <span>填写基本信息</span>
...@@ -142,12 +143,8 @@ export default {}; ...@@ -142,12 +143,8 @@ export default {};
} }
} }
/* 激活后，高亮背景 */ /* 激活后，高亮背景 优先级最高*/
.active { .active {
background: #51d2b7; background: #51d2b7 !important;
} }
</style>
// ul li a
// ul li a i
// background: #51d2b7;
</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