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) {
isUser: "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";
Vue.use(VueRouter);
const routes = [{
const routes = [
{
path: "/jdbycdetailtm",
name: "jdbycdetailtm",
component: () =>
import("@/views/pages/jdbycdetailtm")
},
{
component: () => import("@/views/pages/jdbycdetailtm")
},
{
path: "/companydetail",
name: "companydetail",
component: () =>
import("@/views/pages/companydetail")
},
{
component: () => import("@/views/pages/companydetail")
},
{
path: "/jdindentlist",
name: "jdindentdetail",
component: () =>
import("@/views/pages/jdindentlist")
},
{
component: () => import("@/views/pages/jdindentlist")
},
{
path: "/jdindentdetail",
name: "jdindentdetail",
component: () =>
import("@/views/pages/jdindentdetail")
},
/////////
{
component: () => import("@/views/pages/jdindentdetail")
},
/////////
{
path: "/jdtrademark",
name: "jdtrademark",
component: () =>
import("@/views/pages/jdtrademark/Jdtrademark")
},
{
component: () => import("@/views/pages/jdtrademark/Jdtrademark")
},
{
path: "/selftmreg",
name: "selftmreg",
component: () =>
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",
component: () => import("@/views/pages/selftmreg/Selftmreg")
},
{
path: "/bycnoticeindex",
name: "bycnoticeindex",
component: () =>
import("@/views/pages/bycnoticeindex/Bycnoticeindex")
}
component: () => import("@/views/pages/bycnoticeindex/Bycnoticeindex")
}
];
const router = new VueRouter({
routes
routes
});
export default router;
\ No newline at end of file
export default router;
channel-access/src/views/pages/jdindentdetail/applicantInfo.vue
......@@ -91,7 +91,7 @@
</el-form-item>
</div>
</el-form>
<!-- 底部按钮 -->
<div class="drawer-bottom">
<button class="esc">取消</button>
......@@ -132,6 +132,7 @@ export default {
};
</script>
<style lang="scss">
//
.applicantInfo {
width: 100%;
.el-radio {
......
channel-access/src/views/pages/jdindentdetail/classTrademark.vue
......@@ -3,12 +3,7 @@
<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>
<el-input placeholder="请输入关键字进行过滤" suffix-icon="el-icon-search" v-model="keyZi"></el-input>
<span class="quxiao">取消</span>
</div>
<!-- 树形控件 -->
......@@ -21,8 +16,7 @@
default-expand-all
:expand-on-click-node="false"
:props="props"
>
</el-tree>
></el-tree>
</div>
</div>
<!-- -->
......@@ -33,13 +27,16 @@
</div>
<div class="classTrademark-right-main">
<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>
</div>
<div class="classData" v-else>
<div class="classData-top">
<h4>第02类 颜料油漆</h4>
<p>已选择<span>1</span>项</p>
<p>
已选择
<span>1</span>项
</p>
<i class="el-icon-delete"></i>
</div>
<div class="classData-main">
......@@ -49,9 +46,7 @@
closable
:disable-transitions="false"
@close="handleClose(tag)"
>
{{ tag }}
</el-tag>
>{{ tag }}</el-tag>
</div>
</div>
</div>
......@@ -66,7 +61,7 @@
</template>
<script>
import { getNcldata } from "@/api/api.js";
import { getJdbycdetailtmData } from "@/api/api.js";
export default {
data() {
return {
......@@ -170,7 +165,7 @@ export default {
}
},
mounted() {
getNcldata().then(res => {
getJdbycdetailtmData().then(res => {
console.log(res.data);
});
}
......
channel-access/src/views/pages/jdtrademark/Jdtmbrandreg.vue
......@@ -23,46 +23,42 @@
<div class="brandreg-swiper">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="brandreg-swiper-hearder">
<div
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>
<img
src="http://gsb-zc.oss-cn-beijing.aliyuncs.com/zc_qft_pi15755163570461.png"
alt
/>
<img :src="item.productLogo" alt />
</div>
<div>京东云PLUS商标自助申请</div>
<div>{{item.itemName}}</div>
</div>
</div>
<div class="brandreg-swiper-content">
<div
class="brandreg-swiper-content"
:class="{'brandreg-swiper-content-button-enter':index==current}"
>
<ul>
<li>
<li v-for="(t, i) in JSON.parse(item.productDesc).desc" :key="i+t">
<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>
<div>
<img src="../../../assets/imgs/dbx.png" alt />
</div>
<div>全流程跟踪，掌握申请进度</div>
<div>{{t}}</div>
</li>
</ul>
<div>
<div>
<sup>￥</sup>
<span>300</span>/件
<span>{{item.proPrice}}</span>/件
</div>
<div class="brandreg-swiper-content-button">立即购买</div>
<div class="brandreg-swiper-content-button" @click="goOwnBuyPage(index)">立即购买</div>
</div>
</div>
</div>
......@@ -76,20 +72,41 @@
</template>
<script>
import api from "@/api/api.js";
// 注册信息数据请求
import { getRegInfo } from "@/api/api.js";
export default {
data() {
return {
dataList: [],
showArrows: false
showArrows: false,
current: 1
};
},
mounted() {
// 请求数据并装填到datalist里面
getRegInfo().then(res => {
// 请求数据并装填到datalist里面
this.dataList = res.data.data;
});
},
methods: {
/*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>
......@@ -153,7 +170,7 @@ export default {
margin-top: 22px;
.swiper-container {
width: 1203px;
height: 380px;
// height: 380px;
padding-left: 3px;
.swiper-wrapper {
display: flex;
......@@ -161,7 +178,7 @@ export default {
.swiper-slide {
width: 400px !important;
box-sizing: border-box;
height: 370px;
// height: 370px;
text-align: center;
margin-right: 0 !important;
transition: all 0.1s;
......@@ -172,9 +189,9 @@ export default {
}
}
/* 移入 */
/* 移入之后的高亮样式 */
.brandreg-swiper .swiper-slide-enter {
height: 380px;
height: 370px;
}
.brandreg-swiper .brandreg-swiper-hearder-enter {
height: 80px;
......@@ -184,10 +201,12 @@ export default {
line-height: 80px;
}
.brandreg-swiper .brandreg-swiper-content-button-enter {
background: #32b6e7;
border: 1px solid #32b6e7;
color: #fff;
cursor: pointer;
.brandreg-swiper-content-button {
background: #32b6e7;
border: 1px solid #32b6e7;
color: #fff;
cursor: pointer;
}
}
/* 轮播卡片头部图文 */
......@@ -276,5 +295,6 @@ export default {
font-family: PingFangSC-Regular, PingFangSC;
font-weight: 400;
color: rgba(0, 136, 199, 1);
margin-bottom: 10px;
}
</style>
\ No newline at end of file
channel-access/src/views/pages/jdtrademark/Jdtmsearch.vue
......@@ -109,7 +109,6 @@ export default {
/*类别选中项 */
handleCheckedCitiesChange(value) {
this.checkedType = value;
console.log(this.checkedType, this.searchValue);
let checkedCount = value.length;
this.checkAll = checkedCount === this.typeList.length;
......@@ -118,8 +117,7 @@ export default {
},
goSearch() {
this.$router.push({
// bug01
path: `/${this.$root.channelName}/jdbycquerytm`,
path: `/jdbycquerytm`,
query: {
checkedNcl: JSON.stringify(this.checkedType),
tminput: this.searchValue
......@@ -160,7 +158,6 @@ export default {
height: 28px;
font-size: 28px;
font-family: PangMenZhengDao;
/* color: rgb(168, 24, 24); */
color: #fff;
line-height: 32px;
letter-spacing: 1px;
......
channel-access/src/views/pages/jdtrademark/Jdtrademark.vue
<template>
<div class="jdtrademark">
<!-- 轮播图 -->
<!-- 头部banner -->
<div class="jdtrademark-banner">
<div>
<div @click="goIndentList">我的订单</div>
......@@ -51,6 +51,7 @@
</template>
<script>
// 导入拆分出去的两个组件
import Jdtmsearch from "./Jdtmsearch";
import Jdtmbrandreg from "./Jdtmbrandreg";
......@@ -155,7 +156,7 @@ export default {
.jdtrademark-banner {
min-height: 480px;
background: yellowgreen;
/* assets的别名？ */
/* assets的别名？不能用@ */
background: url(../../../assets/imgs/banner.png) center center no-repeat;
background-size: cover;
> div {
......
channel-access/src/views/pages/selftmreg/ApplicationInfo.vue
<!-- 第二步：填写申请人信息 -->
<template>
<div class="infomation">
<!-- 申请人信息 -->
......@@ -5,6 +7,7 @@
<i class="selftmreg_shuxian"></i>
<h4>填写申请人信息</h4>
</div>
<div class="applicantInfo">
<el-form
:model="ruleForm"
......@@ -22,10 +25,16 @@
</el-form-item>
<div v-if="ruleForm.resource == 1">
<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 label="统一社会信用代码：" prop="xinyongma">
<el-input v-model="ruleForm.xinyongma" placeholder="请输入统一社会信用代码"></el-input>
<el-input
v-model="ruleForm.xinyongma"
placeholder="请输入统一社会信用代码"
></el-input>
<el-popover
placement="right-end"
width="170"
......@@ -36,24 +45,43 @@
</el-popover>
</el-form-item>
<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 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>
</div>
<div v-if="ruleForm.resource == 2">
<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 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 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 label="统一社会信用代码：" prop="xinyongma">
<el-input v-model="ruleForm.xinyongma" placeholder="请输入统一社会信用代码"></el-input>
<el-input
v-model="ruleForm.xinyongma"
placeholder="请输入统一社会信用代码"
></el-input>
<el-popover
placement="right-end"
width="170"
......@@ -64,7 +92,11 @@
</el-popover>
</el-form-item>
<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>
</div>
</el-form>
......@@ -84,19 +116,35 @@
label-position="left"
>
<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 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 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 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 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>
</div>
......@@ -109,12 +157,10 @@
</h4>
</div>
<div class="jdindentlist-drawerDetail">
<!-- -->
<div class="from-main">
<!-- 上传营业执照 -->
<div class="from-items">
<div class="from-item-title">
<span>*</span>上传材料：营业执照
</div>
<div class="from-item-title"><span>*</span>上传材料：营业执照</div>
<div class="upload-box">
<!-- 1 -->
</div>
......@@ -122,15 +168,24 @@
<img src="@/assets/imgs/sbzc/yyzz1.png" alt />
<div class="chakan" @click="lookImage(1)">查看大图</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 class="from-items">
<div class="from-item-title">
<p>
<span>*</span>上传材料：代理委托书
</p>
<p><span>*</span>上传材料：代理委托书</p>
<a
href="http://gsb-zc.oss-cn-beijing.aliyuncs.com/igirl_channel_tmwtsdemo001.doc"
>下载委托书模板</a>
>下载委托书模板</a
>
</div>
<div class="upload-box">
<!-- 2 -->
......@@ -139,13 +194,22 @@
<img src="@/assets/imgs/sbzc/wts1.png" alt />
<div class="chakan" @click="lookImage(2)">查看大图</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 class="from-items">
<div class="from-item-title">
<p>上传材料：优先权证明</p>
<a
href="http://gsb-zc.oss-cn-beijing.aliyuncs.com/yzq_201908281849646526xujnsedjnqwdoni.doc"
>下载优先权证明</a>
>下载优先权证明</a
>
</div>
<div class="upload-box">
<!-- 3 -->
......@@ -156,18 +220,6 @@
</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>
</template>
......@@ -371,6 +423,27 @@ export default {
.jdindentlist-drawerDetail {
.from-main {
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 {
......
channel-access/src/views/pages/selftmreg/ConfirmOrder.vue
<!-- 第三步：确认订单 -->
<template>
<div class="confirm">
<div class="info-title">
......@@ -42,7 +44,7 @@
<i class="selftmreg_shuxian"></i>
<h4>
申请人及联系人信息
<span class="edit">
<span class="edit" @click="goSteptwo">
<i class="el-icon-edit"></i>
<b>编辑</b>
</span>
......@@ -90,7 +92,12 @@
<h4>订单备注</h4>
</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>
</template>
......@@ -100,6 +107,13 @@ export default {
return {
textarea: ""
};
},
methods: {
// click未生效
goSteptwo() {
console.log(222);
// 去第二步骤的页面
}
}
};
</script>
......@@ -199,4 +213,4 @@ export default {
resize: none;
border: 1px solid #d6daeb;
}
</style>
\ No newline at end of file
</style>
channel-access/src/views/pages/selftmreg/ModifyTrademark.vue
<!-- 第一步：填写基本信息 商标信息 分类选择-->
<template>
<div>
<!-- 基本信息填写 -->
......@@ -18,16 +19,25 @@
<el-radio :label="2">图形</el-radio>
<el-radio :label="3">文字及图形</el-radio>
</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
label="商标名称："
prop="name"
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 label="商标图样：" prop="name" v-if="ruleForm.resource == 1">
<el-form-item
label="商标图样："
prop="name"
v-if="ruleForm.resource == 1"
>
<div class="trademark-name">
<div>
<el-button>手动上传</el-button>
......@@ -37,8 +47,9 @@
<div class="trademarkImg">
<img src="@/assets/imgs/zwtp.png" alt />
</div>
<p>
<i class="el-icon-warning"></i>自动生成的商标图样默认以“宋体”字样自左向右排列递交官方。
<p class="locate-bottom">
<i class="el-icon-warning"></i
>自动生成的商标图样默认以“宋体”字样自左向右排列递交官方。
</p>
</div>
</div>
......@@ -55,16 +66,21 @@
</div>
<div class="p-left">
<p>
<i class="el-icon-warning"></i>上传黑白图样，注册后可以更换商标颜色使用；
<i class="el-icon-warning"></i
>上传黑白图样，注册后可以更换商标颜色使用；
</p>
<p>
<i class="el-icon-warning"></i>上传彩色图样，注册后只能按照该彩色图样使用，并在委托书商标名称后方增加文字“（指定颜色）”；
<i class="el-icon-warning"></i
>上传彩色图样，注册后只能按照该彩色图样使用，并在委托书商标名称后方增加文字“（指定颜色）”；
</p>
<p>
<i class="el-icon-warning"></i>上传的彩色图样需与黑白图样的样式一致。
<i class="el-icon-warning"></i
>上传的彩色图样需与黑白图样的样式一致。
</p>
<p>
<span @click="lookImg('查看上传商标图样注意事项', 2)">查看上传商标图样注意事项</span>
<span @click="lookImg('查看上传商标图样注意事项', 2)"
>查看上传商标图样注意事项</span
>
</p>
</div>
</div>
......@@ -77,10 +93,15 @@
<el-drawer
:title="drawerTitle"
custom-class="jdindentdetail-drawer"
size="430px"
size="510px"
: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">
图样文件格式应为jpg，图形应清晰，图样文件大小应小于“200KB”，且图形像素介于“600X600
- 1500X1500”之间，如果通过扫描获得图样的，应按
......@@ -96,7 +117,11 @@
<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>
<el-input
placeholder="请输入关键字进行过滤"
suffix-icon="el-icon-search"
v-model="keyZi"
></el-input>
<span class="quxiao">取消</span>
</div>
<!-- 树形控件 -->
......@@ -139,7 +164,8 @@
closable
:disable-transitions="false"
@close="handleClose(tag)"
>{{ tag }}</el-tag>
>{{ tag }}</el-tag
>
</div>
</div>
</div>
......@@ -149,6 +175,7 @@
</template>
<script>
import { getJdbycdetailtmData } from "@/api/api.js";
export default {
data() {
return {
......@@ -239,6 +266,7 @@ export default {
"12asd3",
"12adqwe3"
]
// classdata:
};
},
methods: {
......@@ -253,7 +281,12 @@ export default {
this.classDataList.splice(this.classDataList.indexOf(tag), 1);
}
},
mounted() {}
mounted() {
// getJdbycdetailtmData().then(res => {
// // 请求数据并装填到datalist里面
// this.dataList = res.data.data;
// });
}
};
</script>
......@@ -285,12 +318,18 @@ export default {
}
}
.a-span {
font-family: PingFangSC-Regular;
width: 108px;
height: 17px;
font-size: 12px;
color: #409eff;
cursor: pointer;
font-family: PingFangSC-Regular;
font-weight: 400;
line-height: 17px;
margin-left: 30px;
}
.a-span:hover {
color: #0989c5;
text-decoration: underline;
}
.trademark-name {
width: 100%;
div {
......
channel-access/src/views/pages/selftmreg/PayOrder.vue
<!-- 第四步：支付订单页面 -->
<template>
<div>支付订单页面</div>
</template>
\ No newline at end of file
channel-access/src/views/pages/selftmreg/Selftmreg.vue
......@@ -3,7 +3,9 @@
<!-- 导航面包屑 -->
<div class="jdindentdetail-nav">
<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>
</div>
......@@ -14,29 +16,17 @@
<div class="jdindentdetail-page">
<div class="jdindentdetail-wrap">
<!-- 主体内容步骤条 -->
<SelftmregPageSteps ref="qwe" />
<SelftmregPageSteps ref="steps" />
<!-- 主页内容 -->
<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 /> -->
<ModifyTrademark v-if="index == 0" />
<ApplicationInfo v-if="index == 1" />
<ConfirmOrder v-if="index == 2" />
<PayOrder v-if="index == 3" />
</div>
<div style="clear:both;"></div>
......@@ -47,11 +37,26 @@
<!-- 底部付款按钮 -->
<div class="footer-wrap">
<div class="tabButtomPrcie">
<span>
<span v-if="index == 0">
应付总额：
<i>￥0.00</i>
</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>
......@@ -74,32 +79,64 @@ export default {
},
data() {
return {
//
index: 0
//初始为0，对应第一步填写基本信息
index: 0,
// 是否已经勾选同意协议
checked: false,
firstNums: {
one: {
type: "ds",
name: "",
icon: ""
},
two: {
name: "",
types: []
},
three: {}
}
};
},
created() {
if (this.index == 0) {
this.$router.push("/selftmreg/basic");
this.$router.push("/selftmreg");
}
},
methods: {
next() {
console.log("two level router");
// 加载二级路由组件：第二步，填写申请人信息
// this.$router.push("/:chanue/selftmreg/user");
console.log(this.$refs.qwe.$refs.asd.children);
// console.log(this.$refs.steps.$refs.uls.children);
this.index++;
// 获取a标签和i标签以给其加入高亮的样式
let as = document.getElementsByTagName("a");
let is = document.getElementsByTagName("i");
if (this.index == 1) {
this.$router.push("/selftmreg/user");
// 给 第二步填写申请人信息对应的步骤进度条 添加高亮样式
as[1].classList.add("active");
is[3].classList.add("active");
}
if (this.index == 2) {
this.$router.push("/selftmreg/confirm");
// 给 第三步确认订单信息对应的步骤进度条 添加高亮样式
as[2].classList.add("active");
is[4].classList.add("active");
}
// 加载二级路由组件：第三步，确认订单
// this.$router.push("/:chanue/selftmreg/confirm");
// 加载二级路由组件：第四步，支付订单
// this.$router.push("/:chanue/selftmreg/pay");
if (this.index == 3) {
// 给 第四步支付订单对应的步骤进度条 添加高亮样式
as[3].classList.add("active");
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 {
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>
<div class="selftmreg_steps">
<div class="pointsRule">
<ul id="list" ref="asd">
<ul id="list" ref="uls">
<li>
<a class="active">
<span>填写基本信息</span>
......@@ -142,12 +143,8 @@ export default {};
}
}
/* 激活后，高亮背景 */
/* 激活后，高亮背景 优先级最高*/
.active {
background: #51d2b7;
background: #51d2b7 !important;
}
// ul li a
// ul li a i
// background: #51d2b7;
</style>
\ No newline at end of file
</style>
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