Commit 71cb10d3 by 任建

tj

parent aaa35c5e
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>channel-access</title> <title>channel-access</title>
</head> </head>
<body>
<body>
<noscript> <noscript>
<strong>We're sorry but channel-access doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but channel-access doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
</html>
</html>
\ No newline at end of file
...@@ -6,5 +6,24 @@ ...@@ -6,5 +6,24 @@
</template> </template>
<style lang="scss"> <style lang="scss">
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
outline: none;
box-sizing: border-box;
}
html,body{
width: 100%;
height: 100%;
font-size: 14px;
}
#app{
width: 100%;
height: 100%;
}
.v-modal{
z-index: 1999 !important;
}
</style> </style>
import axios from "axios";
// 用ip export function getNcldata() {
// var host = "https://movie.douban.com/"; return axios.post(
var dev = "192.168.18.237"; "http://192.168.18.45:4004/web/trademark/tmqueryCtl/doPost", {
export default { actionProcess: "jd",
testData: `${dev ? dev : host}/xxx` sign: "2FviZ9PGws8Pt1fBhq0t90mjUvI",
actionBody: {
nclcode: "01",
timeStamp: 1578036301,
channelUserId: "a5EyZC8Ht/Gpm2rKPeDpoziYmdcA/nF0"
},
actionType: "getNcl",
requrl: "/action/tmTools/springBoard",
isUser: "no",
isDecryptUser: "no"
}
);
} }
\ No newline at end of file
/* 改变主题色变量 */ /* 改变主题色变量 */
$--color-primary: red;
// $--color-primary: #409EFF;
/* 改变 icon 字体路径变量,必需 */ /* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts'; $--font-path: '~element-ui/lib/theme-chalk/fonts';
// 自定义主题色变量 // 自定义主题色变量
$themecolor:red; $themecolor:#409EFF;
;
@import "~element-ui/packages/theme-chalk/src/index"; @import "~element-ui/packages/theme-chalk/src/index";
\ No newline at end of file
<template>
<div class="hello">
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
<template>
<div class="jdindentlist-drawerDetail">
<div class="headerTips">
<i class="el-icon-warning"></i> 格式为<span>PDF</span>
<span>JPG</span>,大小不能超过<span>10M</span>
</div>
<!-- -->
<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>
<div class="drawer-bottom">
<button class="esc">取消</button>
<button class="enter">保存</button>
</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>
</template>
<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 {
data() {
return {
chakanKey: null,
toViewImgType: false,
toViewImgSrc: ""
};
},
methods: {
enter(index) {
this.chakanKey = index;
},
lookImage(index) {
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>
<style lang="scss">
.jdindentlist-drawerDetail {
.headerTips {
color: red;
position: absolute;
top: 10px;
left: 120px;
font-size: 12px;
}
.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>
...@@ -12,7 +12,7 @@ Vue.use(Element) ...@@ -12,7 +12,7 @@ Vue.use(Element)
Vue.config.productionTip = false Vue.config.productionTip = false
new Vue({ new Vue({
router, router,
store, store,
render: h => h(App) render: h => h(App)
}).$mount('#app') }).$mount('#app')
\ No newline at end of file
import Vue from 'vue' import Vue from "vue";
import VueRouter from 'vue-router' import VueRouter from "vue-router";
import Home from '../views/pages/Home'
Vue.use(VueRouter)
const routes = [ Vue.use(VueRouter);
{
path: '/', const routes = [{
name: 'home', path: "/:chanue/jdindentlist",
component: Home name: "jdindentdetail",
}, component: () =>
import ("@/views/pages/jdindentlist")
] },
{
path: "/:chanue/jdindentdetail",
name: "jdindentdetail",
component: () =>
import ("@/views/pages/jdindentdetail")
}
];
const router = new VueRouter({ const router = new VueRouter({
routes routes
}) });
export default router export default router;
\ No newline at end of file
<template>
<div class="home">
<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<el-input v-model="input" placeholder="请输入内容"></el-input>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<Abc />
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import Abc from "@/views/pages/abc.vue";
import api from '@/api/api.js'
export default {
name: "home",
components: {
HelloWorld,
Abc
},
data() {
return {
input: "123"
};
},
created() {
this.$axios
.get("/api/j/search_tags", { type: "movie", source: "1" })
.then(d => {
console.log(d);
});
}
};
</script>
<template>
<div>
<header>111111111111111</header>
</div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
@import "../../assets/css/globelcolor";
header {
background: $--color-primary;
}
</style>
\ No newline at end of file
<template>
<div class="applicantInfo">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="150px"
class="demo-ruleForm"
label-position="left"
>
<el-form-item label="申请人类型:" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio :label="1" border>企业</el-radio>
<el-radio :label="2" border>个体户</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="公司名称:" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="统一社会信用代码:" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="执照详细地址:" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="邮政编码:" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
name: "",
region: "",
date1: "",
date2: "",
delivery: false,
type: [],
resource: 1,
desc: ""
},
rules: {
name: [
{ required: true, message: "请输入活动名称", trigger: "blur" },
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
],
region: [
{ required: true, message: "请选择活动区域", trigger: "change" }
],
date1: [
{
type: "date",
required: true,
message: "请选择日期",
trigger: "change"
}
],
date2: [
{
type: "date",
required: true,
message: "请选择时间",
trigger: "change"
}
],
type: [
{
type: "array",
required: true,
message: "请至少选择一个活动性质",
trigger: "change"
}
],
resource: [
{ required: true, message: "请选择活动资源", trigger: "change" }
],
desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
};
</script>
<style lang="scss">
.applicantInfo {
width: 100%;
.el-radio__input {
display: none;
}
}
</style>
<template>
<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>
</div>
</div>
<!-- 底部按钮 -->
<div class="drawer-bottom">
<button class="esc">取消</button>
<button class="enter">保存</button>
</div>
<!-- -->
</div>
</template>
<script>
import { getNcldata } from "@/api/api.js";
export default {
data() {
return {
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: {
handleClose(tag) {
console.log(tag);
this.classDataList.splice(this.classDataList.indexOf(tag), 1);
}
},
mounted() {
getNcldata().then(res => {
console.log(res.data);
});
}
};
</script>
<style lang="scss">
.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>
<template>
<div class="jdindentdetail">
<div class="jdindentdetail-wrapper">
<div class="jdindentdetail-top">
<div class="quan"></div>
<div class="dangqian">
当前位置:
</div>
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item>交付中心</el-breadcrumb-item>
<el-breadcrumb-item>订单详情</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="jdindentdetail-main">
<div class="jdindentdetail-main-item">
<div class="main-item-title">
交付流程
<span> </span>
</div>
<div class="main-item-container">
<div class="items-container">
<el-steps :active="2" align-center space="200px">
<el-step title="待上传材料"></el-step>
<el-step title="待审核"></el-step>
<el-step title="待递交"></el-step>
<el-step title="已递交"></el-step>
<el-step title="已完成"></el-step>
</el-steps>
<div class="hr"></div>
<div class="step-row">
<el-steps direction="vertical" :active="1" space="17px">
<el-step title="步骤 1"></el-step>
<el-step title="步骤 2"></el-step>
<el-step title="步骤 3"></el-step>
<el-step title="步骤 2"></el-step>
<el-step title="步骤 3"></el-step>
<el-step title="步骤 2"></el-step>
<el-step title="步骤 3"></el-step>
</el-steps>
</div>
</div>
</div>
</div>
<!-- -->
<div class="jdindentdetail-main-item">
<div class="main-item-title">
商标信息
<span>
<i class="el-icon-edit" @click="showDrawer('修改商标信息', 1)"
>修改</i
>
</span>
</div>
<div class="main-item-container">
<div class="messageShang">
<div class="message-left">
<div><img src="" alt="" /></div>
<p>商标图样</p>
</div>
<div class="message-right">
<p>商标名称:<span>公司宝及图</span></p>
<p>商标类型:<span>公司宝及图</span></p>
<p>商标说明:<span>公司宝及图</span></p>
</div>
</div>
</div>
</div>
<!-- -->
<div class="jdindentdetail-main-item">
<div class="main-item-title">
商标类别
<span></span>
</div>
<div class="main-item-container">
<div class="classShang">
<div class="classShang-top">
第02类
<span>待上传材料</span>
<span
><i
class="el-icon-edit"
@click="showDrawer('修改商标类别', 2)"
>修改</i
></span
>
</div>
<div class="classShang-main">
<p>商品服务项目:</p>
<ul>
<li>0201木材染色剂</li>
<li>0201着色剂</li>
<li>0201着色剂</li>
<li>0201着色剂</li>
<li>0201木材染色剂</li>
<li>0201着色剂</li>
<li>0201着色剂</li>
<li>0201着色剂</li>
<li>0201木材染色剂</li>
<li>0201着色剂</li>
<li>0201着色剂</li>
<li>0201着色剂</li>
<li>0201木材染色剂</li>
<li>0201着色剂</li>
<li>0201着色剂</li>
<li>0201着色剂</li>
<li>0201木材染色剂</li>
<li>0201着色剂</li>
<li>0201着色剂</li>
<li>0201着色剂</li>
<li>0201木材染色剂</li>
<li>0201着色剂</li>
<li>0201着色剂</li>
<li>0201着色剂</li>
</ul>
</div>
<div class="classShang-main">
<p>官方回执文件:</p>
<ul>
<li>
<span>0201木材染色剂0201着色剂</span>
</li>
<li>
<span>0201木材染色剂0201着色剂</span>
</li>
<li>
<span>0201木材染色剂0201着色剂</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- -->
<div class="jdindentdetail-main-item">
<div class="main-item-title">
交官文件
<span
><i class="el-icon-edit" @click="showDrawer('修改交官文件', 3)"
>修改</i
></span
>
</div>
<div class="main-item-container">
<div class="jiaoFile">
<div class="jiaoFile-item">
<div>
<img src="@/assets/imgs/indent/materialNull.png" alt="" />
</div>
<p>营业执照</p>
</div>
<div class="jiaoFile-item">
<div>
<img src="@/assets/imgs/indent/materialNull.png" alt="" />
</div>
<p>委托书</p>
</div>
<div class="jiaoFile-item">
<div>
<img src="@/assets/imgs/indent/materialNull.png" alt="" />
</div>
<p>优先权证明</p>
</div>
</div>
</div>
</div>
<!-- -->
<div class="jdindentdetail-main-item">
<div class="main-item-title">
申请人信息 -(中国大陆 - 企业)
<span
><i class="el-icon-edit" @click="showDrawer('修改申请人信息', 4)"
>修改</i
></span
>
</div>
<div class="main-item-container">
<div class="messageSheng">
<div class="row-item">
<p>公司名称:</p>
<span>公司联大共享科技有限公司</span>
</div>
<div class="row-item">
<p>社会统一信用代码:</p>
<span>1309475938BVLAKJ</span>
</div>
<div class="row-item">
<p>公司地址:</p>
<span>北京市房山区良乡凯旋大街建设路18号-D740</span>
</div>
<div class="row-item">
<p>邮政编码:</p>
<span>100000</span>
</div>
</div>
</div>
</div>
<!-- -->
<div class="jdindentdetail-main-item">
<div class="main-item-title">
订单联系人
<span
><i class="el-icon-edit" @click="showDrawer('修改订单联系人', 5)"
>修改</i
></span
>
</div>
<div class="main-item-container">
<div class="peopleTel">
<div class="row-item">
<p>联系人:</p>
<span>蔡辉</span>
</div>
<div class="row-item">
<p>电话:</p>
<span>13947593838</span>
</div>
<div class="row-item">
<p>邮箱:</p>
<span>234345234@qq.com</span>
</div>
<div class="row-item">
<p>座机:</p>
<span>010-6145168393</span>
</div>
</div>
</div>
</div>
<!-- -->
<div class="jdindentdetail-main-item">
<div class="main-item-title">
付款信息
<span></span>
</div>
<div class="main-item-container">
<div class="messageFu">
<div class="row-item">
<p>实付金额:</p>
<span>300.00</span>
</div>
</div>
</div>
</div>
<!-- -->
</div>
</div>
<el-drawer
:title="drawerTitle"
custom-class="jdindentdetail-drawer"
size="700px"
:visible.sync="showUploadStuff"
>
<!-- 修改商标信息 -->
<ModifyTrademark v-if="drawerIndex == 1" />
<!-- 修改商标类别 -->
<ClassTrademark v-if="drawerIndex == 2" />
<!-- 修改交管文件 -->
<JiaoFile v-if="drawerIndex == 3" />
<!-- 修改申请人信息 -->
<ApplicantInfo v-if="drawerIndex == 4" />
</el-drawer>
</div>
</template>
<script>
import JiaoFile from "@/components/drawer";
import ClassTrademark from "./classTrademark";
import ModifyTrademark from "./modifyTrademark";
import ApplicantInfo from "./applicantInfo";
export default {
components: {
JiaoFile,
ClassTrademark,
ModifyTrademark,
ApplicantInfo
},
data() {
return {
drawerIndex: null,
drawerTitle: "",
showUploadStuff: false
};
},
methods: {
showDrawer(title, index) {
this.drawerTitle = title;
this.drawerIndex = index;
this.showUploadStuff = true;
}
},
mounted() {}
};
</script>
<style lang="scss">
.jdindentdetail {
width: 100%;
height: 100%;
background: #eceef3;
overflow: auto;
.jdindentdetail-wrapper {
width: 1020px;
background: #fff;
padding: 0 20px 20px;
margin: 0 auto;
}
.el-drawer__header {
width: 100%;
margin: 0;
padding: 8px 21px;
background: #f6f9ff;
span {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #333333;
text-align: left;
}
}
.el-drawer__body {
padding: 23px 20px;
}
}
.jdindentdetail-top {
width: 100%;
height: 60px;
display: flex;
align-items: center;
.quan {
display: inline-block;
width: 12px;
height: 12px;
background: rgb(255, 255, 255);
border: 3px solid rgb(48, 113, 254);
border-radius: 100%;
}
.dangqian {
margin-left: 10px;
}
.jdindentdetail-main {
width: 100%;
.jdindentdetail-main-item {
width: 100%;
}
}
}
.main-item-title {
background: #eef2fb;
width: 100%;
height: 32px;
line-height: 32px;
padding: 0 12px;
font-family: PingFangSC-Regular;
font-size: 12px;
color: #333;
span {
float: right;
font-family: PingFangSC-Regular;
font-size: 12px;
color: #3071fe;
cursor: pointer;
}
}
.main-item-container {
width: 100%;
padding: 20px 0;
}
//交付流程
.items-container {
border: 1px solid #e3e3e3;
padding: 20px 10px;
.is-finish > .el-step__line {
border-color: #3071fe;
}
.el-step__line {
background-color: #eef2fb;
}
.is-finish .el-step__icon-inner {
color: #fff;
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 14px;
}
.is-process .el-step__icon-inner {
color: #bbb;
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 14px;
}
.is-wait .el-step__icon-inner {
color: #bbb;
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 14px;
}
.is-finish .el-step__icon,
.is-finish .is-text {
border-color: #3071fe;
background: #3071fe;
}
.is-process .el-step__icon,
.is-process .is-text {
border-color: #eef2fb;
background: #eef2fb;
}
.is-wait .el-step__icon,
.is-wait .is-text {
border-color: #eef2fb;
background: #eef2fb;
}
.is-wait,
.is-process {
color: #bbb !important;
font-weight: 500 !important;
}
.is-finish,
.is-wait,
.is-process {
font-family: PingFangSC-Regular;
font-size: 12px;
color: #333333;
}
}
.hr {
width: 100%;
height: 1px;
background: #e3e3e3;
margin: 20px 0;
}
.step-row {
min-height: 72px;
max-height: 120px;
padding-left: 25px;
overflow-y: auto;
.el-step,
.is-vertical,
.el-step__head {
line-height: 26px;
text-align: center;
}
.is-finish .el-step__icon {
background: #3071fe;
width: 12px;
height: 12px;
}
.is-finish .el-step__icon-inner {
color: #3071fe;
}
.is-finish > .el-step__line {
background-color: #fff;
border-color: #fff;
color: #eef2fb;
}
.is-process > .el-step__line {
background-color: #fff;
color: #eef2fb;
}
.is-process > .el-step__icon,
.is-process > .el-step__icon > .el-step__icon-inner {
width: 12px;
height: 12px;
border-radius: 100px;
background-color: #eef2fb;
color: #eef2fb;
}
.is-wait > .el-step__line {
background-color: #fff;
color: #eef2fb;
}
.is-wait > .el-step__icon,
.is-wait > .el-step__icon > .el-step__icon-inner {
width: 12px;
height: 12px;
border-radius: 100px;
background-color: #eef2fb;
color: #eef2fb;
}
.is-finish {
color: #3071fe;
}
.is-wait,
.is-process {
font-family: PingFangSC-Regular;
font-size: 12px;
color: #666;
}
}
.step-row::-webkit-scrollbar {
width: 10px;
height: 1px;
}
.step-row::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #eef2fb;
}
.step-row::-webkit-scrollbar-track {
border-radius: 10px;
background: #fff;
}
//商标信息
.messageShang {
padding: 0 20px;
display: flex;
.message-left {
width: 91px;
height: 100%;
margin-right: 10px;
div {
width: 91px;
height: 91px;
background: #ccc;
background: #ffffff;
border: 1px solid #dee0eb;
img {
width: 100%;
height: 100%;
}
}
p {
width: 91px;
text-align: center;
font-family: PingFangSC-Regular;
font-size: 12px;
color: #333333;
margin-top: 5px;
}
}
.message-right {
flex: 1;
p {
margin-bottom: 13px;
font-family: PingFangSC-Regular;
font-size: 12px;
color: #777777;
span {
font-family: PingFangSC-Regular;
font-size: 12px;
color: #333333;
}
}
}
}
//商标类别
.classShang:first-child {
border: none;
padding-top: 0px;
}
.classShang:last-child {
padding-bottom: 0px;
}
.classShang {
width: 100%;
padding: 20px;
border-top: 1px solid #e3e3e3;
.classShang-top {
border-left: 1px solid rgba(47, 47, 47, 1);
height: 16px;
padding-left: 8px;
box-sizing: border-box;
font-size: 14px;
color: rgba(47, 47, 47, 1);
line-height: 16px;
span {
color: #3071fe;
margin-left: 24px;
}
}
.classShang-main {
display: flex;
margin-top: 20px;
p {
width: 84px;
font-family: PingFangSC-Regular;
font-size: 12px;
color: #777777;
}
ul {
flex: 1;
li {
float: left;
font-family: PingFangSC-Regular;
font-size: 12px;
color: #333333;
margin-right: 20px;
margin-bottom: 5px;
span {
color: #3071fe;
}
}
}
}
}
//交官文件
.jiaoFile {
width: 100%;
padding: 0 20px;
display: flex;
.jiaoFile-item {
width: 81px;
height: 100%;
margin-right: 20px;
div {
width: 81px;
height: 100px;
border: 1px solid #dee0eb;
text-align: center;
line-height: 81px;
img {
width: 100%;
height: 100%;
}
}
p {
width: 81px;
margin-top: 5px;
font-family: PingFangSC-Regular;
font-size: 12px;
color: #666666;
text-align: center;
}
}
}
//申请人信息
.messageSheng {
padding: 0 20px;
.row-item {
width: 100%;
display: flex;
line-height: 30px;
font-family: PingFangSC-Regular;
font-size: 12px;
p {
width: 108px;
color: #777777;
}
span {
color: #333333;
}
}
}
//订单联系人
.peopleTel {
padding: 0 20px;
.row-item {
width: 100%;
display: flex;
line-height: 30px;
font-family: PingFangSC-Regular;
font-size: 12px;
p {
width: 48px;
color: #777777;
}
span {
color: #333333;
}
}
}
//付款信息
.messageFu {
padding: 0 20px;
.row-item {
width: 100%;
display: flex;
line-height: 30px;
font-family: PingFangSC-Regular;
font-size: 12px;
p {
width: 60px;
color: #777777;
}
span {
color: #333333;
}
}
}
////////
</style>
<template>
<div class="modifyTrademark">
<div class="modifyTrademark-main">
<div class="categoryFrom">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
label-position="left"
>
<el-form-item label="商标类型:" prop="resource">
<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>
<el-form-item
label="商标图样:"
prop="name"
v-if="ruleForm.resource == 1"
>
<div class="trademark-name">
<div>
<el-button>手动上传</el-button>
<el-button>自动生成</el-button>
</div>
<div>
<div class="trademarkImg">
<img src="" alt="" />
</div>
<p>
<i class="el-icon-warning"></i
>自动生成的商标图样默认以“宋体”字样自左向右排列递交官方。
</p>
</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>
<!-- -->
<div class="drawer-bottom">
<button class="esc">取消</button>
<button class="enter">保存</button>
</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>
</template>
<script>
export default {
data() {
return {
drawerRight: false,
lookIndex: null,
drawerTitle: "",
ruleForm: {
name: "",
resource: 1
},
rules: {
name: [{ required: true, message: "请输入商标名称", trigger: "blur" }],
resource: [
{ required: true, message: "请选择活动资源", trigger: "change" }
]
}
};
},
methods: {
lookImg(title, index) {
this.drawerTitle = title;
this.lookIndex = index;
this.drawerRight = true;
}
}
};
</script>
<style lang="scss">
.modifyTrademark {
width: 100%;
.el-drawer__container {
background: rgba(0, 0, 0, 0.2);
}
.shangImg {
width: 100% !important;
}
p {
line-height: 25px;
font-size: 14px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(74, 74, 74, 1);
width: 100%;
padding: 20px 30px;
}
}
.categoryFrom {
.el-input {
input {
width: 330px;
height: 34px;
border-radius: 0px;
}
}
.a-span {
font-family: PingFangSC-Regular;
font-size: 12px;
color: #409eff;
cursor: pointer;
margin-left: 30px;
}
.trademark-name {
width: 100%;
div {
width: 100%;
display: flex;
margin: 7px 0 24px;
button {
padding: 7px 15px;
border-radius: 100px;
color: rgb(102, 102, 102);
font-size: 12px;
}
.trademarkImg {
width: 124px;
height: 124px;
border: 2px dashed #e9e9e9;
img {
width: 100%;
height: 100%;
}
}
p {
font-family: PingFangSC-Regular;
padding: 20px;
font-size: 12px;
color: #bbbbbb;
line-height: 20px;
flex: 1;
}
.p-left {
flex: 1;
display: flex;
flex-direction: column;
p {
padding: 0 20px;
line-height: 25px;
span {
font-family: PingFangSC-Regular;
font-size: 12px;
color: #409eff;
cursor: pointer;
}
}
}
}
}
}
</style>
<template>
<div class="container-from">
<div class="from-left">
<div class="from-item">
<span class="span-left">交付单号:</span>
<el-input
v-model="from.deliveryOrderNo"
placeholder="请输入内容"
></el-input>
</div>
<div class="from-item">
<span class="span-left">业务类型:</span>
<el-select v-model="from.itemName" placeholder="请选择">
<el-option
v-for="item in businessType"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="from-item">
<span class="span-left">交付状态:</span>
<el-select v-model="from.deliveryStatus" placeholder="请选择">
<el-option
v-for="item in DeliveryStatus"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="from-item">
<span class="span-left">下单时间:</span>
<el-date-picker
v-model="from.CreateDate"
type="daterange"
align="right"
start-placeholder="起始"
end-placeholder="结束"
:picker-options="pickerOptions"
>
</el-date-picker>
</div>
<div class="from-item">
<span class="span-left">商标名称:</span>
<el-input v-model="from.tmName" placeholder="请输入内容"></el-input>
</div>
<div class="from-item">
<span class="span-left">申请人:</span>
<el-input v-model="from.name" placeholder="请输入内容"></el-input>
</div>
</div>
<div class="from-right">
<el-button @click="find()">查询</el-button>
<el-button class="btnTwo">重置</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
//from表单选择内容
from: {
channelServiceNo: null,
deliveryOrderNo: "",
itemCode: "",
deliveryStatus: "",
payStatus: "",
tmName: "",
name: "",
startTime: "2019-12-1",
entTime: "2020-1-5",
pageIndex: 1,
pageSize: 30,
timeStamp: 1577787047,
channelUserId: "a5EyZC8Ht/Gpm2rKPeDpoziYmdcA/nF0",
itemName: "",
CreateDate: []
},
//业务类型
businessType: [
{
value: "zzzc",
label: "自助申请"
},
{
value: "zzfzzc",
label: "专家辅助申请"
},
{
value: "dbsbzc",
label: "担保申请"
}
],
//交付状态
DeliveryStatus: [
{
value: "dfwsfw",
label: "待服务"
},
{
value: "dsccl",
label: "待上传材料"
},
{
value: "dqrfa",
label: "待确认方案"
},
{
value: "fabtg",
label: "方案不通过"
},
{
value: "dsh",
label: "待审核"
},
{
value: "ddj",
label: "待递交"
},
{
value: "ydj",
label: "已递交"
},
{
value: "ywc",
label: "已完成"
}
],
//日期选择器
pickerOptions: {
shortcuts: [
{
text: "本月",
onClick(picker) {
picker.$emit("pick", [new Date(), new Date()]);
}
},
{
text: "今年至今",
onClick(picker) {
const end = new Date();
const start = new Date(new Date().getFullYear(), 0);
picker.$emit("pick", [start, end]);
}
},
{
text: "最近六个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 6);
picker.$emit("pick", [start, end]);
}
}
]
}
};
},
methods: {
find() {
console.log(this.from);
}
}
};
</script>
<style lang="scss">
.container-from {
width: 100%;
padding: 30px 40px;
display: flex;
}
.from-left {
flex: 8;
display: flex;
flex-wrap: wrap;
.from-item {
display: flex;
margin-right: 30px;
margin-bottom: 24px;
.span-left {
display: flex;
justify-content: center;
align-items: center;
min-width: 70px;
color: rgba(47, 47, 47, 1);
}
.el-input > input,
.el-input__inner {
width: 175px;
height: 36px;
background: rgba(255, 255, 255, 1);
border-radius: 0;
border: 1px solid rgba(225, 225, 225, 1);
}
}
}
.from-right {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
button,
button:hover,
button:focus {
border-radius: 100px;
width: 58px;
height: 28px;
padding: 0;
font-size: 12px;
margin-top: 20px;
border: 1px solid rgb(48, 113, 254);
background: rgb(49, 113, 255);
color: rgb(255, 255, 255);
}
.btnTwo,
.btnTwo:hover,
.btnTwo:focus {
background: #fff !important;
color: #000 !important;
}
}
</style>
<template>
<div class="jdindentlist">
<div class="jdindentList-top">
<span></span>
<div>订单列表</div>
</div>
<div class="jdindentList-container">
<el-tabs type="border-card">
<el-tab-pane label="商标订单">
<!-- from表单查询 -->
<From />
<!-- tab表格 -->
<TabList />
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script>
import From from "./from";
import TabList from "./tabList";
export default {
components: {
From,
TabList
},
data() {
return {};
},
methods: {},
mounted() {}
};
</script>
<style lang="scss">
.jdindentlist {
width: 100%;
height: 100%;
padding: 0 20px;
overflow: auto;
}
.jdindentList-top {
width: 100%;
height: 60px;
display: flex;
align-items: center;
span {
display: inline-block;
width: 12px;
height: 12px;
background: rgb(255, 255, 255);
border: 3px solid rgb(48, 113, 254);
border-radius: 100%;
}
div {
flex: 1;
font-size: 16px;
margin-left: 10px;
display: flex;
align-items: center;
}
}
.jdindentList-container {
width: 100%;
.el-tabs {
box-shadow: none;
border: none;
.el-tabs__nav-scroll {
border-bottom: none;
background-color: #eef2fb;
.el-tabs__item {
padding: 0 40px !important;
border: 2px solid transparent;
margin-top: 0;
}
.is-active {
border-top: 2px solid #3071fe;
border-right-color: #fff !important;
border-left-color: #fff !important;
}
}
.el-tabs__content {
padding: 0;
}
}
}
</style>
<template>
<div class="container-list">
<el-table :data="tableData" style="width: 100%">
<el-table-column
prop="deliveryOrderNo"
label="交付单号"
align="center"
width="180"
>
<template slot-scope="scope">
<el-tooltip
placement="top"
:content="scope.row.deliveryOrderNo"
:disabled="scope.row.deliveryOrderNo ? false : true"
>
<p solt="content">
{{
scope.row.deliveryOrderNo ? scope.row.deliveryOrderNo : "---"
}}
</p>
</el-tooltip>
</template>
</el-table-column>
<el-table-column
prop="itemName"
label="业务类型"
width="180"
align="center"
><template slot-scope="scope">
<el-tooltip
placement="top"
:content="scope.row.itemName"
:disabled="scope.row.itemName ? false : true"
>
<p solt="content">
{{ scope.row.itemName ? scope.row.itemName : "---" }}
</p>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="tmName" label="商标名称" width="100" align="center"
><template slot-scope="scope">
<el-tooltip
placement="top"
:content="scope.row.tmName"
:disabled="scope.row.tmName ? false : true"
>
<p solt="content">
{{ scope.row.tmName ? scope.row.tmName : "---" }}
</p>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="nclOneCodes" label="类别" align="center"
><template slot-scope="scope">
<el-tooltip
placement="top"
:content="scope.row.nclOneCodes"
:disabled="scope.row.nclOneCodes ? false : true"
>
<p solt="content">
{{ scope.row.nclOneCodes ? scope.row.nclOneCodes : "---" }}
</p>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="nclOneCount" label="件数" align="center"
><template slot-scope="scope">
<el-tooltip
placement="top"
:content="scope.row.nclOneCount.toString()"
:disabled="scope.row.nclOneCount ? false : true"
>
<p solt="content">
{{ scope.row.nclOneCount ? scope.row.nclOneCount : "---" }}
</p>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="name" label="申请人" align="center"
><template slot-scope="scope">
<el-tooltip
placement="top"
:content="scope.row.name"
:disabled="scope.row.name ? false : true"
>
<p solt="content">
{{ scope.row.name ? scope.row.name : "---" }}
</p>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="totalSum" label="订单金额" align="center"
><template slot-scope="scope">
<el-tooltip
placement="top"
:content="scope.row.totalSum"
:disabled="scope.row.totalSum ? false : true"
>
<p solt="content">
{{ scope.row.totalSum ? scope.row.totalSum : "---" }}
</p>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="deliveryStatusName" label="交付状态" align="center"
><template slot-scope="scope">
<el-tooltip
placement="top"
:content="scope.row.deliveryStatusName"
:disabled="scope.row.deliveryStatusName ? false : true"
>
<p solt="content">
{{
scope.row.deliveryStatusName
? scope.row.deliveryStatusName
: "---"
}}
</p>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="CreateDate" label="下单时间" align="center"
><template slot-scope="scope">
<el-tooltip
placement="top"
:content="scope.row.CreateDate"
:disabled="scope.row.CreateDate ? false : true"
>
<p solt="content">
{{ scope.row.CreateDate ? scope.row.CreateDate : "---" }}
</p>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="submitTime" label="递交时间" align="center"
><template slot-scope="scope">
<el-tooltip
placement="top"
:content="scope.row.submitTime"
:disabled="scope.row.submitTime ? false : true"
>
<p solt="content">
{{ scope.row.submitTime ? scope.row.submitTime : "---" }}
</p>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="address" label="操作" align="center">
<template slot-scope="scope" align="center" width="150">
<el-button
size="mini"
@click="
$router.push({
path: '/jd/jdindentdetail',
query: {
deliveryOrderNo: 'JF201912161543hQCdUw',
channelUserId: 'a5EyZC8Ht/Gpm2rKPeDpoziYmdcA/nF0',
deliveryStatus: 'dsccl',
totalSum: '0.01'
}
})
"
>详情</el-button
>
<el-button size="mini" @click="drawerClick(scope)"
>上传材料</el-button
>
<el-button size="mini">确认注册方案</el-button>
<el-button size="mini">去注册</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-size="pageSize"
layout="prev, pager, next, jumper"
:total="tableData.length"
>
</el-pagination>
</div>
<!-- 抽屉 -->
<el-drawer
title="上传材料"
custom-class="jdindentdetail-drawer"
size="700px"
:visible.sync="showUploadStuff"
>
<Drawer />
</el-drawer>
</div>
</template>
<script>
import Drawer from "@/components/drawer";
export default {
components: {
Drawer
},
data() {
return {
//初始页码
currentPage: 1,
//每页条数
pageSize: 10,
//表格数据
tableData: [
{
needNo: "FW_GOODS-581976-1_6059523",
channelServiceNo: "521111800127842646",
deliveryOrderNo: "JF201912161543hQCdUw",
tmName: "kl",
nclOneCount: 1,
nclOneCodes: "02",
itemCode: "zzsbzc",
itemName: "商标注册【自助申请】",
totalSum: "0.01",
name: "中国铁路北京局集团有限公司",
deliveryStatus: "dsccl",
deliveryStatusName: "待上传材料",
payStatus: "yfk",
payStatusName: "已付款",
CreateDate: "2019-12-16T07:43:03.000Z",
submitTime: null,
customerType: "ent",
businessLicensePic: "",
identityCardPic: "",
gzwtsUrl: null,
smwjUrl: null
}
],
showUploadStuff: false
};
},
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
},
drawerClick() {
this.showUploadStuff = true;
}
}
};
</script>
<style lang="scss">
.container-list {
margin-top: 0;
background: #fff;
max-height: 30%;
box-sizing: border-box;
border: 1px solid #ebeef5;
margin-bottom: 30px;
.el-table {
th > .cell {
text-align: center;
font-weight: 500;
color: #000;
}
td > .cell {
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
p {
overflow: hidden;
text-overflow: ellipsis;
}
}
td:last-child > .cell {
text-align: center;
white-space: inherit;
}
}
.cell button {
text-align: center;
padding: 5px;
margin: 0;
border: 0;
width: 100%;
color: #0f8ee9;
background: none;
}
.cell button:hover {
background: none;
}
.el-table .has-gutter tr th {
background-color: #eef2fb;
}
.pagination {
background: #ebeef5;
.el-pagination {
width: 100%;
height: 46px;
display: flex;
justify-content: center;
align-items: center;
}
}
.el-drawer__header {
width: 100%;
margin: 0;
padding: 8px 21px;
background: #f6f9ff;
span {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #333333;
text-align: left;
}
}
.el-drawer__body {
padding: 23px 20px;
}
}
</style>
module.exports = { module.exports = {
outputDir: 'dist', //build输出目录 outputDir: 'dist', //build输出目录
assetsDir: 'assets', //静态资源目录(js, css, img) assetsDir: 'assets', //静态资源目录(js, css, img)
lintOnSave: false, //是否开启eslint lintOnSave: false, //是否开启eslint
devServer: { devServer: {
...@@ -11,9 +11,9 @@ module.exports = { ...@@ -11,9 +11,9 @@ module.exports = {
proxy: { proxy: {
'/api': { '/api': {
target: 'https://movie.douban.com', //API服务器的地址 target: 'https://movie.douban.com', //API服务器的地址
ws: true, //代理websockets ws: true, //代理websockets
changeOrigin: true, // 虚拟的站点需要更管origin changeOrigin: true, // 虚拟的站点需要更管origin
pathRewrite: { //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc' pathRewrite: { //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
'^/api': '' '^/api': ''
} }
} }
......
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