Skip to content

Z
zhichan
Commit 11bd2cab by 尹亚亭
Options

from selftmreg to next step

parent b2f2b22b
Showing with 394 additions and 71 deletions
channel-access/src/api/tmOrder.js
......@@ -2,15 +2,29 @@ import http from "@/http/http.js";
let baseUrl = "/api/web/action/tmOrder/springBoard";
// 获取jdtrademark商标注册卡片信息
// 获取jdtrademark商标注册申请类型：自主/专家辅助/担保 卡片信息
// 产品列表-根据产品大类获取-应用中心
export function getRegInfo() {
export function getProductListCards() {
return http.post(baseUrl, {
actionBody: {
typeOneCode: "sbfu"
},
actionType: "getCAProductListByTypeOneCode",
actionProcess: "jd"
});
}
// 产品详情:点击首页的 专家辅助申请 和 担保申请-进入相应的专家辅助申请 和 担保申请产品详情页面
// 产品详情-应用中心
export function getProductDetail() {
return http.post(baseUrl, {
actionBody: {
// 自助: FW_GOODS-581976-1
// 辅助：FW_GOODS-580010-1
// 担保：FW_GOODS-581978-1
channelItemCode: "FW_GOODS-581978-1"
},
actionType: "getCAProductDetail",
actionProcess: "bw"
});
}
channel-access/src/main.js
......@@ -14,7 +14,7 @@ import { seveCookie } from "@/utils/getToken.js";
import VueClipboard from "vue-clipboard2";
// 使用bus进行通信
import VueBus from "vue-bus";
// import VueBus from "vue-bus";
//
import Router from "vue-router";
......@@ -29,7 +29,7 @@ getTokens().then(res => {
seveCookie("token", res.data.data.token);
});
Vue.use(Element);
Vue.use(VueBus);
// Vue.use(VueBus);
Vue.use(VueClipboard);
Vue.config.productionTip = false;
new Vue({
......
channel-access/src/router/index.js
......@@ -95,6 +95,11 @@ const routes = [
component: () => import("@/views/pages/selftmreg/Selftmreg")
},
{
path: "/guaranteereg",
name: "guaranteereg",
component: () => import("@/views/pages/guaranteereg/Guaranteereg")
},
{
// path: "/bycnoticeindex",
path: "/bycnoticeindex",
name: "bycnoticeindex",
......
channel-access/src/views/pages/guaranteereg/Guaranteereg.vue 0 → 100644
<template>
<div class="productdetails">
<div class="productdetails-main">
<div class="productdetails-main-container">
<div class="productdetails-main-top">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/jdtrademark' }"
>首页</el-breadcrumb-item
>
<el-breadcrumb-item>担保商标注册</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="productdetails-main-detail">
<div class="productdetails-left">
<img src="@/assets/imgs/商标注册-担保申请.png" alt="" />
</div>
<div class="productdetails-right">
<h1>担保商标注册</h1>
<p>
专业知产顾问一对一商标检索分析，提高注册成功率，注册不成功，全额退款！
</p>
<div class="priceMsg">
<div>
<span
>总价<b>¥{{ (servicecharge + officialfee) * count }}</b></span
>
<span
>官費<b>¥{{ officialfee }}</b></span
>
<span
>服务费<b>¥{{ servicecharge }}</b></span
>
</div>
<p>
该服务由公司宝提供，<span>发票请到订单中心-发票管理开取</span>
</p>
</div>
<div class="productdetail-count">
<p>数量</p>
<el-input-number
size="mini"
v-model="count"
:min="1"
></el-input-number>
</div>
<div class="bottom-btn">
<el-button @click="goPlaceOrder()">立即购买</el-button>
<span><img src="@/assets/imgs/wenti.png" alt="" />咨询客服</span>
</div>
</div>
</div>
<div class="productdetails-main-space"></div>
<div class="productdetails-main-bottom-pic">
<h3><span>产品详情</span><i></i></h3>
<img src="@/assets/imgs/dbsqPic.jpg" alt="" />
</div>
</div>
</div>
</div>
</template>
<script>
import { getProductDetail } from "@/api/tmOrder.js";
export default {
data() {
return {
count: 1,
officialfee: 300,
servicecharge: 1080,
productDetails: {}
};
},
methods: {
goPlaceOrder() {
this.$router.push({
path: "/placeorder",
query: {
count: this.count,
type: "zjfz"
}
});
}
},
created() {
getProductDetail().then(res => {
// 请求数据并装填到productDetails里面
// if (res.) {
// }
console.log(res.data);
this.productDetails = res.data;
});
}
};
</script>
<style lang="scss">
.productdetails {
width: 100%;
.productdetails-main {
width: 100%;
min-height: 786px;
}
}
.productdetails-main-container {
max-width: 1190px;
padding: 0 20px;
margin: 0 auto;
.productdetails-main-top {
width: 100%;
height: 60px;
display: flex;
align-items: center;
border-bottom: 1px solid #cecece;
}
.productdetails-main-detail {
width: 100%;
display: flex;
padding: 20px 0;
.productdetails-left {
display: inline-block;
width: 400px;
height: 340px;
border: 1px solid rgba(207, 207, 207, 1);
margin-right: 40px;
img {
display: block;
}
}
.productdetails-right {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-evenly;
h1 {
font-size: 20px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(51, 51, 51, 1);
line-height: 36px;
margin-bottom: 5px;
color: #333;
font-weight: 700;
font-size: 24px;
}
p {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(153, 153, 153, 1);
line-height: 20px;
}
.priceMsg {
width: 100%;
padding: 15px 17px;
background: #f3f7fd;
margin-bottom: 20px;
margin-top: 12px;
margin: 15px 0;
div {
width: 100%;
margin-bottom: 12px;
span {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(153, 153, 153, 1);
line-height: 17px;
margin-right: 40px;
b {
font-size: 23px;
color: #ff5b00;
margin-left: 20px;
}
}
}
p {
font-size: 12px;
font-family: PingFangSC-Light, PingFang SC;
font-weight: 300;
color: rgba(153, 153, 153, 1);
line-height: 17px;
span {
color: #3071fe;
}
}
}
.productdetail-count {
display: flex;
align-items: center;
margin-bottom: 15px;
p {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(153, 153, 153, 1);
line-height: 20px;
margin-right: 12px;
}
}
.bottom-btn {
display: flex;
align-items: center;
button {
width: 128px;
height: 36px;
background: rgba(48, 113, 254, 1);
border: 1px solid rgba(48, 113, 254, 1);
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
line-height: 20px;
padding: 0;
border-radius: 0;
margin-right: 10px;
span {
color: rgba(255, 255, 255, 1);
}
}
span {
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(48, 113, 254, 1);
line-height: 20px;
cursor: pointer;
img {
display: inline-block;
width: 16px;
margin-right: 7px;
}
}
}
}
}
.productdetails-main-space {
width: 107px;
height: 3px;
background-color: #2f95fc;
margin-top: 30px;
}
.productdetails-main-bottom-pic {
width: 1190px;
min-height: 800px;
border: 1px solid #ededed;
h3 {
width: 1190px;
background-color: #f1f1f1;
margin: 0;
height: 30px;
border-top: 1px solid #ededed;
span {
display: inline-block;
width: 107px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 14px;
color: #666;
background-color: #fff;
border: none;
vertical-align: top;
}
i {
display: inline-block;
width: 1091px;
height: 28px;
border: 1px solid #eee;
}
}
img {
display: block;
width: 1190px;
}
}
}
</style>
channel-access/src/views/pages/jdtrademark/Jdtmbrandreg.vue
......@@ -98,7 +98,7 @@
<script>
// 注册信息数据请求
import { getRegInfo } from "@/api/tmOrder.js";
import { getProductListCards } from "@/api/tmOrder.js";
export default {
data() {
......@@ -109,9 +109,9 @@ export default {
};
},
mounted() {
getRegInfo().then(res => {
getProductListCards().then(res => {
// 请求数据并装填到datalist里面
console.log(res.data);
// console.log(res.data);
this.dataList = res.data;
});
},
......@@ -123,13 +123,13 @@ export default {
// 点击购买去相应的购买页面
goOwnBuyPage(index) {
if (index == 0) {
this.$router.push("/selftmreg")
this.$router.push("/selftmreg");
}
if (index == 1) {
location.href = "https://market.jdcloud.com/service/details/582208";
this.$router.push("/productdetails");
}
if (index == 2) {
location.href = "https://market.jdcloud.com/service/details/582207";
this.$router.push("/guaranteereg");
}
}
}
......
channel-access/src/views/pages/jdtrademark/Jdtrademark.vue
......@@ -20,8 +20,8 @@
<div>
<img :src="item.img" alt />
</div>
<p>{{item.name}}</p>
<p>{{item.text}}</p>
<p>{{ item.name }}</p>
<p>{{ item.text }}</p>
</li>
</ul>
</div>
......@@ -41,9 +41,9 @@
<div>
<img :src="item.img" alt />
</div>
<div>{{item.title}}</div>
<div>{{ item.title }}</div>
</div>
<div>{{item.text}}</div>
<div>{{ item.text }}</div>
</li>
</ul>
</div>
......@@ -142,10 +142,11 @@ export default {
};
},
methods: {
// 检验是否登录成功，如果登录成功，进入订单列表页
/*点击 我的订单 去订单列表页jdindentlist */
goIndentList() {
location.href =
"https://oauth2.jdcloud.com/authorize?response_type=token&redirect_uri=https://tm.plus.jdcloud.com/jdtm/getUser&state=jdindentlist&client_id=9491577327154697";
this.$router.push("/jdindentlist");
}
}
};
......
channel-access/src/views/pages/selftmreg/ApplicationInfo.vue
......@@ -345,8 +345,6 @@ export default {
components: {
UploadImg
},
// 接收父组件传过来的参数
// props: ["stepsParams"],
data() {
return {
// 申请人信息表格 及 验证
......@@ -500,7 +498,6 @@ export default {
});
},
setKey(name, flag) {
// name = name.substring(name.length - 5);
var myDate = new Date();
var key =
"zc_" +
......@@ -551,6 +548,8 @@ export default {
this.aruleForm.address = item.regLocation;
}
},
// 获取并修改父组件里面的第二步填写申请人信息的参数，以供在第三步确认订单里面进行使用和更新
updated() {
this.$nextTick(() => {
// 申请人类别
......@@ -583,6 +582,17 @@ export default {
this.$parent.$parent.confirmStepsParams.stepTwoNineParams.telNum = this.ruleForm.phone;
// 电子邮箱
this.$parent.$parent.confirmStepsParams.stepTwoNineParams.email = this.ruleForm.email;
// 资料上传
// 企业： 营业执照 代理委托书 优先权证明
this.$parent.$parent.confirmStepsParams.stepTwoNineParams.company[0].Icon = this.imgUrl1;
this.$parent.$parent.confirmStepsParams.stepTwoNineParams.company[1].Icon = this.imgUrl2;
this.$parent.$parent.confirmStepsParams.stepTwoNineParams.company[2].Icon = this.imgUrl3;
// 个体户： 营业执照 代理委托书 优先权证明 身份证明
this.$parent.$parent.confirmStepsParams.stepTwoNineParams.user[0].Icon = this.imgUrl1;
this.$parent.$parent.confirmStepsParams.stepTwoNineParams.user[1].Icon = this.imgUrl4;
this.$parent.$parent.confirmStepsParams.stepTwoNineParams.user[2].Icon = this.imgUrl2;
this.$parent.$parent.confirmStepsParams.stepTwoNineParams.user[3].Icon = this.imgUrl3;
});
}
};
......
channel-access/src/views/pages/selftmreg/ConfirmOrder.vue
......@@ -206,18 +206,32 @@
</h4>
</div>
<div class="show-imgs">
<ul>
<li>
<img
src="http://via.placeholder.com/100X120/f60/fff?text=hello"
alt=""
/><span>营业执照</span>
<ul
v-if="
this.$parent.$parent.confirmStepsParams.stepTwoNineParams.atype == 1
"
>
<li
v-for="(item, index) in this.$parent.$parent.confirmStepsParams
.stepTwoNineParams.company"
:key="index"
v-show="item.Icon != ''"
>
<img :src="item.Icon" alt="" /><span>{{ item.Text }}</span>
</li>
<li>
<img
src="http://via.placeholder.com/100X120/f60/fff?text=hello"
alt=""
/><span>营业执照</span>
</ul>
<ul
v-if="
this.$parent.$parent.confirmStepsParams.stepTwoNineParams.atype == 2
"
>
<li
v-for="(obj, index) in this.$parent.$parent.confirmStepsParams
.stepTwoNineParams.user"
:key="index + obj.Text"
v-show="obj.Icon != ''"
>
<img :src="obj.Icon" alt="" /><span>{{ obj.Text }}</span>
</li>
</ul>
</div>
......@@ -252,12 +266,12 @@ export default {
// 编辑 商标信息
goStepOne() {
// 去第一步骤的页面
this.$emit("getIndex", 0);
this.$emit("geteditindex", 0);
},
// 编辑 申请人及联系人信息
goStepTwo() {
// 去第二步骤的页面
this.$emit("getIndex", 1);
this.$emit("geteditindex", 1);
}
},
created() {
......@@ -378,6 +392,12 @@ export default {
flex-direction: column;
justify-content: center;
align-items: center;
img {
display: block;
height: 118px;
width: 98px;
border: 2px dashed rgb(233, 233, 233);
}
span {
color: #636569;
font-size: 14px;
......
channel-access/src/views/pages/selftmreg/ModifyTrademark.vue
......@@ -490,7 +490,7 @@ export default {
// 树形结构的处理节点是否被选中
handleCheckChange(data, checked, indeterminate) {
console.log("check-change", 11111111111, indeterminate);
console.log("check-change", 11111111111, indeterminate, data);
// 检测第三级节点是否被选中(一级节点两位code，二级节点四位code,三级节点6位或是0位code)
if (data.code.length !== 2 || data.code.length !== 4) {
......@@ -498,19 +498,22 @@ export default {
if (checked) {
// 判断选中的是否是同一类别
if (!this.classDataList.length) {
// 如果动态数据为空，就把这第一个选中的复选框的前两位类别码保存为全局的类别码
// 如果动态数据为空，就把这第一个选中的复选框的父级代码pcode前两位类别码保存为全局的类别码
this.classCode = data.pcode.substring(0, 2);
}
// 保存选中的节点的前两位
// 保存选中的节点的父级代码前两位
let datacode = data.pcode.substring(0, 2);
// 被选中的数据小于十条
if (this.classDataList.length < 10) {
console.log(this.classDataList);
// 被选中的数据属于同一个类别
if (datacode == this.classCode) {
let index = this.classDataList.findIndex((item, index) => {
return data.code == item.code;
// item.code可能不存在
// return data.code == item.pcode.substring(0, 2);
return data.name == item.name;
});
// 索引是 -1，不是常规的索引下标，代表这个元素不存在于这个数组之中
if (index == -1) {
// classDataList的装填
this.classDataList.push(data);
......@@ -518,16 +521,21 @@ export default {
}
// 被选中的数据不属于同一类别
else {
alert(
"hello,here is some problems.Maybe i need separate or rebuid/improvement the logic of choice/search---tree.At least I need deal with classDataList more Scientifically. "
);
// 被选中的数据不属于同一个类别，把此节点设置为不可选中状态
this.$refs.tree.setChecked(data, false, true);
// 被选中的数据不属于同一个类别，给出相应的提示信息
this.$message({
message: "只能选择同一个类别",
type: "warning"
});
// 被选中的数据不属于同一个类别，把此节点设置为不可选中状态
this.$refs.tree.setChecked(data, false, true);
}
} else {
}
// 被选中的数据大于10条，给出相应提示，并把Checked设置为false
else {
this.$message({
message: "最多选择10项",
type: "warning"
......@@ -535,11 +543,15 @@ export default {
// 把此节点设置为不可选中状态
this.$refs.tree.setChecked(data, false, true);
}
} else {
}
// 如果第三级节点没被选中，找出没被选中的数据的下标，把其从数组中清除，以此实现左边勾选取消右侧的选中的标签数据的对应清除
else {
let index = this.classDataList.findIndex((item, index) => {
return data.code == item.code;
// 注意： item.code可能不存在 data.code同样可能不存在
// return data.code == item.pcode.substring(0, 2);
return data.name == item.name;
});
if (index != -1) {
this.classDataList.splice(index, 1);
}
......@@ -603,11 +615,12 @@ export default {
}
// 尼斯搜索后
else {
console.log(this.classDataList);
// 只保留 resolve(node.data.children); 也可以，因为后端接口返回的是一个完整的 tree的data格式，包含一级二级三级数据，可以直接渲染二级的子，得到三级树叶子
// 装填一级节点
if (node.level == 1) {
let index = this.searchedList.findIndex(item => {
return item.code == node.data.code;
// return item.code == node.data.code;
return item.name == node.data.name;
});
let data = this.searchedList[index];
// 装填上 搜回来的数据的 一级数据 xx xxxx 尼斯大类 的 子集 xxxx xxxx二级尼斯数据
......@@ -615,30 +628,9 @@ export default {
}
// 如果是二级节点
else if (node.level == 2) {
console.log(
node.data.children,
node.childNodes,
"array object observer"
);
console.log(node.data.children, "array observer");
// 装填二级节点的子集 三级的可选的 商品/服务项
resolve(node.data.children);
// // 把数据装填到this.classDataList里面
// node.data.children.forEach(element => {
// let indexsearch = this.classDataList.findIndex((item, index) => {
// return item.code == element.code;
// });
// console.log(indexsearch);
// // 不存在于 classDataList数组里面 或者是 不存在编号 即 它的code=""
// if (indexsearch == -1) {
// // classDataList的装填
// if (this.classDataList.length < 10) {
// console.log("dadadadada");
// this.classDataList.push(element);
// }
// console.log(this.classDataList);
// }
// });
}
}
},
......@@ -683,7 +675,6 @@ export default {
if (res.data.length) {
_that.searchedList = res.data;
_that.ncldata = res.data;
console.log(_that.ncldata);
} else {
// 利用el-tree的 empty-text="暂无数据" 属性 显示出 暂无数据的查询结果
this.ncldata = [];
......@@ -757,6 +748,8 @@ export default {
this.action = res.data.url;
});
},
// 获取并修改父组件里面的第一步填写基本信息的参数，以供在第三步确认订单里面进行使用和更新
updated() {
this.$nextTick(() => {
// 商标类型
......@@ -768,7 +761,6 @@ export default {
this.$parent.$parent.confirmStepsParams.stepOneThreeParams.bigKind = this.$refs.bigKind.innerHTML;
this.$parent.$parent.confirmStepsParams.stepOneThreeParams.smallKinds = this.classDataList;
}
// 商标图样
this.$parent.$parent.confirmStepsParams.stepOneThreeParams.icon = this.imgUrl;
// 存储商标图样
......
channel-access/src/views/pages/selftmreg/Selftmreg.vue
......@@ -32,7 +32,7 @@
</keep-alive>
<!-- 第三步 确认订单 -->
<ConfirmOrder v-if="index == 2" @getIndex="getindex" />
<ConfirmOrder v-if="index == 2" @geteditindex="getindex" />
</div>
</el-form>
</div>
......@@ -152,8 +152,8 @@ export default {
],
user: [
{ Icon: "", Text: "营业执照" },
{ Icon: "", Text: "代理委托书" },
{ Icon: "", Text: "身份证明" },
{ Icon: "", Text: "代理委托书" },
{ Icon: "", Text: "优先权证明" }
]
}
......
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