Skip to content

G
gs1
Commit 307434ab by Tang
Options

feat: 境内境外查询页面【90%】，样式问题未解决，添加其他查询基础页面

parent 29c4b97d
Showing with 469 additions and 260 deletions
src/assets/css/_base.scss
// 查询表单 // 查询表单
.content-query{ .content-query {
.el-form{ .el-form {
@include el-form @include el-form .el-row {
.el-row{ .el-col {
.el-col{ .el-form-item {
.el-form-item{ width: 100%;
width:100%; .el-form-item__content {
.el-form-item__content{ width: calc(100% - 150px);
width:calc(100% - 150px)
} }
} }
} }
} }
} }
} }
.content-list{ .content-list {
.el-form{ .el-form {
@include el-form @include el-form;
} }
} }
.content-msg{ .content-msg {
padding:20px 20px; padding: 20px 20px;
background:$bg-color; background: $bg-color;
border-radius: 14px; border-radius: 14px;
} }
...@@ -77,7 +76,8 @@ ...@@ -77,7 +76,8 @@
} }
/* ul ol 样式 */ /* ul ol 样式 */
ul, ol { ul,
ol {
margin: 10px 0 10px 20px; margin: 10px 0 10px 20px;
} }
} }
...@@ -153,54 +153,54 @@ ...@@ -153,54 +153,54 @@
&:hover, &:hover,
&:focus { &:focus {
background: transparent background: transparent;
} }
} }
// 分页 // 分页
.el-pagination.is-background { .el-pagination.is-background {
margin-top: 20px; margin-top: 20px;
text-align: center; text-align: center;
.el-pager li:not(.disabled).active { .el-pager li:not(.disabled).active {
background: #FFB73F; background: #ffb73f;
} }
.el-pager li { .el-pager li {
border-radius: 5px; border-radius: 5px;
} }
.btn-prev, .btn-next { .btn-prev,
.btn-next {
border-radius: 5px; border-radius: 5px;
} }
.el-input__inner { .el-input__inner {
border-radius: 5px !important; border-radius: 5px !important;
&:hover, &:focus { &:hover,
border-color: #FFB73F !important; &:focus {
border-color: #ffb73f !important;
} }
} }
.el-input__inner.is-focus { .el-input__inner.is-focus {
border-color: #FFB73F !important; border-color: #ffb73f !important;
} }
} }
.el-select-dropdown.el-popper { .el-select-dropdown.el-popper {
.el-scrollbar { .el-scrollbar {
li.el-select-dropdown__item.selected { li.el-select-dropdown__item.selected {
color: #FFB73F !important; color: #ffb73f !important;
} }
} }
} }
// 表格 // 表格
.content-list { .content-list {
.el-table { .el-table {
@include el-table @include el-table;
} }
} }
...@@ -245,7 +245,6 @@ ...@@ -245,7 +245,6 @@
color: #b94339; color: #b94339;
} }
} }
} }
.el-form-item.full-item { .el-form-item.full-item {
...@@ -262,7 +261,6 @@ ...@@ -262,7 +261,6 @@
} }
} }
// 弹窗 // 弹窗
.el-dialog { .el-dialog {
width: 600px; width: 600px;
...@@ -278,7 +276,7 @@ ...@@ -278,7 +276,7 @@
} }
.el-form { .el-form {
@include el-form @include el-form;
} }
} }
...@@ -292,7 +290,7 @@ ...@@ -292,7 +290,7 @@
color: #969696; color: #969696;
&.is-active { &.is-active {
color: $system-color5 color: $system-color5;
} }
} }
} }
...@@ -303,7 +301,7 @@ ...@@ -303,7 +301,7 @@
color: $system-color5; color: $system-color5;
a { a {
color: $system-color5 color: $system-color5;
} }
} }
} }
...@@ -339,7 +337,7 @@ ...@@ -339,7 +337,7 @@
.el-form-item__label { .el-form-item__label {
// vertical-align:-52%; // vertical-align:-52%;
&::before { &::before {
content: '*'; content: "*";
font-size: 20px; font-size: 20px;
color: $side-menu-active-color; color: $side-menu-active-color;
vertical-align: -16%; vertical-align: -16%;
...@@ -385,7 +383,7 @@ ...@@ -385,7 +383,7 @@
} }
tr td { tr td {
color: #7B7F83; color: #7b7f83;
font-size: 11px; font-size: 11px;
text-align: center; text-align: center;
} }
...@@ -474,7 +472,6 @@ ...@@ -474,7 +472,6 @@
color: #ffb73f; color: #ffb73f;
} }
} }
} }
} }
} }
...@@ -493,6 +490,11 @@ ...@@ -493,6 +490,11 @@
color: $theme-color1; color: $theme-color1;
} }
.y-center {
display: flex;
align-items: center;
}
@media screen and (max-width: 992px) { @media screen and (max-width: 992px) {
.marginTopLg20 { .marginTopLg20 {
margin-top: 20px; margin-top: 20px;
......
src/assets/css/_reset.scss deleted 100644 → 0
@charset "utf-8";
/* CSS Document */
html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,img {
margin: 0;
padding: 0;
}
html,body,#app{
height: 100%;
background: #F0F5FA;
}
body{
font-size: 12px;
font-family: PingFangSC-Regular, sans-serif;
}
h1,h2,h3,h4,h5,h6{
font-weight: normal;
}
a{
text-decoration: none;
}
ul,ol {
list-style: none
}
input {
border: none;
padding-top: 0;
padding-bottom: 0;
}
input::-moz-focus-inner {
border: 0;
padding: 0
}
select,input {
vertical-align: middle
}
select,input,textarea {
margin: 0
}
input[type="text"],input[type="password"],textarea {
outline-style: none;
-webkit-appearance: none
}
button{
cursor: pointer;
border: none;
outline: none;
}
textarea {
resize: none
}
table {
border-collapse: collapse
}
em ,i{
font-style: normal;
}
a,button,input{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none;
}
a,input[type='button'],input[type='submit']{
cursor:pointer;
}
::-webkit-scrollbar-track-piece {
background: #fff1d9;
border-radius: 2px;
}
::-webkit-scrollbar {
width: 4px;
height: 4px;
}
::-webkit-scrollbar-thumb {
min-height: 30px;
background: #ffb73f;
border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #e59f29;
}
select {
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
}
select::-ms-expand { display: none; }
textarea{
overflow: hidden;
}
src/assets/css/main.scss
// @import "./_reset.scss";
@import "./_reset.scss";
@import "./_style.scss"; @import "./_style.scss";
@import "./_icon.scss"; @import "./_icon.scss";
@import "./_mixin.scss"; @import "./_mixin.scss";
......
src/components/layout/header/mock.js
...@@ -112,30 +112,55 @@ export const nav = [ ...@@ -112,30 +112,55 @@ export const nav = [
name: "GLN查询", name: "GLN查询",
index: 1, index: 1,
link: "/search/gln", link: "/search/gln",
breadcrumb: [
{ name: "服务中心", path: "/service" },
{ name: "查询服务", path: "/search/tool" },
{ name: "GLN查询" },
],
}, },
{ {
id: uuid("gs_nav"), id: uuid("gs_nav"),
name: "自行车企业代码公告查询", name: "自行车企业代码公告查询",
index: 2, index: 2,
link: "/search/bike", link: "/search/bike",
breadcrumb: [
{ name: "服务中心", path: "/service" },
{ name: "查询服务", path: "/search/tool" },
{ name: "自行车企业代码公告查询" },
],
}, },
{ {
id: uuid("gs_nav"), id: uuid("gs_nav"),
name: "条码术语查询", name: "条码术语查询",
index: 3, index: 3,
link: "/search/glossary", link: "/search/glossary",
breadcrumb: [
{ name: "服务中心", path: "/service" },
{ name: "查询服务", path: "/search/tool" },
{ name: "条码术语查询" },
],
}, },
{ {
id: uuid("gs_nav"), id: uuid("gs_nav"),
name: "校验码计算工具", name: "校验码计算工具",
index: 4, index: 4,
link: "/search/check", link: "/search/check",
breadcrumb: [
{ name: "服务中心", path: "/service" },
{ name: "查询服务", path: "/search/tool" },
{ name: "校验码计算工具" },
],
}, },
{ {
id: uuid("gs_nav"), id: uuid("gs_nav"),
name: "国家及地区前缀码查询", name: "国家及地区前缀码查询",
index: 5, index: 5,
link: "/search/country", link: "/search/country",
breadcrumb: [
{ name: "服务中心", path: "/service" },
{ name: "查询服务", path: "/search/tool" },
{ name: "国家及地区前缀码查询" },
],
}, },
], ],
}, },
......
src/main.js
import Vue from 'vue' import Vue from "vue";
import App from './App.vue' import App from "./App.vue";
import router from './router/index' import router from "./router/index";
import store from './vuex/store' import store from "./vuex/store";
import $ from 'jquery' import $ from "jquery";
import 'bootstrap/dist/css/bootstrap.min.css' import "./assets/css/_reset.css";
import 'bootstrap/dist/js/bootstrap.min.js' import "bootstrap/dist/css/bootstrap.min.css";
import './plugins/element.js' import "./assets/css/main.scss";
import './plugins/qrcode.js' import "./assets/css/layout.scss";
import "./assets/css/main.scss" import "bootstrap/dist/js/bootstrap.min.js";
import "./assets/css/layout.scss" import "./plugins/element.js";
import "./assets/css/element-variables.scss" import "./plugins/qrcode.js";
import "./assets/css/element-variables.scss";
// 公共样式、布局样式 // 公共样式、布局样式
// 主题色调修改在assets/_style.scss 修改里面的变量即可 // 主题色调修改在assets/_style.scss 修改里面的变量即可
...@@ -20,70 +21,75 @@ import "./assets/css/element-variables.scss" ...@@ -20,70 +21,75 @@ import "./assets/css/element-variables.scss"
// 不属于这两块内容的另起类名 // 不属于这两块内容的另起类名
// 封装axios // 封装axios
import api from "./axios/index" import api from "./axios/index";
Vue.use(api) Vue.use(api);
// 过滤器封装 // 过滤器封装
import filters from "./filters/index" import filters from "./filters/index";
Object.keys(filters).forEach(key => { Object.keys(filters).forEach((key) => {
Vue.filter(key,filters[key]) Vue.filter(key, filters[key]);
}) });
// 全局注册 二次封装loading等待框、以及确认框函数 // 全局注册 二次封装loading等待框、以及确认框函数
import ElPack from "./utils/interaction.js" import ElPack from "./utils/interaction.js";
Vue.prototype.$ElPack = ElPack Vue.prototype.$ElPack = ElPack;
// 自定义指令 // 自定义指令
import "./directives" import "./directives";
// Clipboard // Clipboard
import Clipboard from "v-clipboard" import Clipboard from "v-clipboard";
Vue.use(Clipboard) Vue.use(Clipboard);
// Vuex // Vuex
import storage from "./utils/storage.js" import storage from "./utils/storage.js";
Vue.prototype.$storage = storage Vue.prototype.$storage = storage;
// ngprogress // ngprogress
import NProgress from "nprogress"; import NProgress from "nprogress";
import 'nprogress/nprogress.css' import "nprogress/nprogress.css";
NProgress.inc(0.3); NProgress.inc(0.3);
NProgress.configure({ easing: "ease", speed: 500, showSpinner: false }); NProgress.configure({ easing: "ease", speed: 500, showSpinner: false });
Vue.config.productionTip = false Vue.config.productionTip = false;
router.beforeEach((to,from,next) => { router.beforeEach((to, from, next) => {
NProgress.start() NProgress.start();
const whiteList = ["/404"] const whiteList = ["/404"];
if (whiteList.some(path => { return path === to.path })) { if (
next() whiteList.some((path) => {
return path === to.path;
})
) {
next();
} else { } else {
const {user} = store.state const { user } = store.state;
// 检测是否已登录 // 检测是否已登录
if (user.token) { if (user.token) {
const authList = user.userMenus const authList = user.userMenus;
const redirectPathList = ["/login"] const redirectPathList = ["/login"];
const shouldRedirectToDefault = redirectPathList.some(path => { return path === to.path }) const shouldRedirectToDefault = redirectPathList.some((path) => {
return path === to.path;
});
if (!to.path || shouldRedirectToDefault) { if (!to.path || shouldRedirectToDefault) {
const defaultAuth = authList[0] const defaultAuth = authList[0];
// 加载第一个菜单栏项 // 加载第一个菜单栏项
if (defaultAuth && defaultAuth.path) { if (defaultAuth && defaultAuth.path) {
next({ path: defaultAuth.path, replace: true }) next({ path: defaultAuth.path, replace: true });
} else { } else {
next({ path: "/404", replace: true }) next({ path: "/404", replace: true });
} }
} else { } else {
const isAuthed = authList.some(authItem => { const isAuthed = authList.some((authItem) => {
const result = to.path === authItem.path const result =
|| to.path.startsWith(authItem.path) to.path === authItem.path || to.path.startsWith(authItem.path);
return result return result;
}) });
isAuthed ? next() : next({ path: "/404", replace: true }) isAuthed ? next() : next({ path: "/404", replace: true });
} }
} else { } else {
next() next();
// 进入登录页面 // 进入登录页面
// if (to.path === "/login") { // if (to.path === "/login") {
// next() // next()
...@@ -92,15 +98,15 @@ router.beforeEach((to,from,next) => { ...@@ -92,15 +98,15 @@ router.beforeEach((to,from,next) => {
// } // }
} }
} }
}) });
router.afterEach(() => { router.afterEach(() => {
NProgress.done() NProgress.done();
}) });
window.vm = new Vue({ window.vm = new Vue({
router, router,
store, store,
$, $,
render: h => h(App) render: (h) => h(App),
}).$mount('#app') }).$mount("#app");
src/router/index.js
...@@ -114,6 +114,26 @@ const routes = [ ...@@ -114,6 +114,26 @@ const routes = [
path: "shortcode", path: "shortcode",
component: () => import("@/views/Search/shortcode"), component: () => import("@/views/Search/shortcode"),
}, },
{
path: "gln",
component: () => import("@/views/Search/gln"),
},
{
path: "bike",
component: () => import("@/views/Search/bike"),
},
{
path: "glossary",
component: () => import("@/views/Search/glossary"),
},
{
path: "check",
component: () => import("@/views/Search/check"),
},
{
path: "country",
component: () => import("@/views/Search/country"),
},
], ],
}, },
], ],
......
src/views/Search/external.vue
<template> <template>
<div class="search-content"> <div class="search-content">
<div class="title">境内条码信息公告查询</div> <div class="title">境外条码信息查询</div>
<div class="body"> <div class="body">
<el-tabs v-model="activeName" class="tab-no-bottom">
<el-tab-pane label="查询厂商信息" name="first">
<div style="padding-top:20px"> <div style="padding-top:20px">
<el-radio-group v-model="company"> <el-form label-position="left" label-width="180px" :model="search">
<el-radio :label="CODE">根据厂商识别代码查询</el-radio> <el-form-item label="境外商品条码信息查询：">
<el-radio :label="NAME">根据厂商名称查询</el-radio> <el-input
<el-radio :label="ADDRESS">根据厂商名称查询</el-radio> v-model="search.code"
</el-radio-group> placeholder="请输入正确的境外商品条码！"
class="w240"
></el-input>
</el-form-item>
<el-form> </el-form> <el-form-item label="验证码：">
<div class="y-center">
<el-input
v-model="search.validate"
placeholder="请输入验证码"
class="w160"
></el-input>
<div class="validate-code">
<img src="../../assets/image/validate.jpg" alt="" />
</div>
<el-button
style="margin-left:40px"
type="primary"
@click="handleSearch"
>查询</el-button
>
</div> </div>
</el-tab-pane> </el-form-item>
</el-form>
<el-tab-pane label="查询产品信息" name="second"> </el-tab-pane> <div class="result-box" v-if="showResult">
</el-tabs> <div class="result-box-title">查询 {{ searchCodeShow }} 结果</div>
<div class="result-box-body">
<template v-if="result">
<div class="title">商品信息</div>
<div class="product-info"></div>
<div class="title">企业信息</div>
<div class="company-info"></div>
</template>
<span v-else>您输入的商品条码格式不正确，请确认后重试。</span>
</div>
</div>
</div>
</div> </div>
<div class="notice"> <div class="notice">
<div class="title">友情提示</div> <div class="title">友情提示</div>
<div class="content-wrapper"> <div class="content-wrapper">
<img src="./img/pic_ex_jl.png" align="right" alt="" /> <img src="./img/query-external-barcode.png" align="right" alt="" />
<p> <p>
1、商品条码 1、目前，国际物品编码组织（GS1）已将690至697之间的前缀码分配给中国物品编码中心使用，通常以这些前缀码开始的厂商识别代码都是由中国物品编码中心负责分配和管理的；以其他前缀码开始的则由境外GS1成员组织负责，一般称为"境外条码"，以下为您提供了境外商品条码信息的查询工具，请根据提示进行相关查询。欲了解GS1分配的前缀码，请点击：了解更多
（又称全球贸易项目代码GTIN）是指包含厂商识别代码在内的对零售商品、非零售商品、物流单元、位置、资产及服务进行全球惟一标识的一种代码（或称数据结构）。对贸易项目进行编码和符号表示（前缀码为690-699是境内条码），能够实现商品零售（POS）、进货、存货管理、自动补货、销售分析及其它业务运作的自动化。 >>
了解更多 >>
</p> </p>
<p> <p>
2、厂商信息查询结果说明：自中国物品编码中心为企业颁发《系统成员证书》当日起计，7天后，在线公布该企业的名称、厂商识别代码及证书颁发日期等信息；15天后，将公布该企业的具体注册信息。 2、本查询仅适用于中华人民共和国境外注册的商品条码信息。
</p>
<p>
3、本查询仅适用于中华人民共和国境内注册的商品条码信息。
</p> </p>
</div> </div>
</div> </div>
...@@ -39,20 +65,46 @@ ...@@ -39,20 +65,46 @@
</template> </template>
<script> <script>
const CODE = 0;
const NAME = 1;
const ADDRESS = 2;
export default { export default {
data() { data() {
return { return {
CODE, search: { code: "", validate: "" },
NAME, searchCodeShow: "",
ADDRESS, showResult: false,
activeName: "first", result: null,
company: CODE,
}; };
}, },
methods: {
handleSearch() {
this.searchCodeShow = this.search.code;
this.showResult = true;
if (this.search.code === "1") {
this.result = {};
}
},
},
}; };
</script> </script>
<style lang="scss" scoped></style> <style lang="scss">
.search-content {
.validate-code {
display: inline-block;
width: 70px;
height: 40px;
margin-left: 11px;
> img {
width: 100%;
height: 100%;
}
}
.w160 {
width: 160px;
}
.w240 {
width: 240px;
}
}
</style>
src/views/Search/internal.vue
...@@ -11,11 +11,76 @@ ...@@ -11,11 +11,76 @@
<el-radio :label="ADDRESS">根据厂商名称查询</el-radio> <el-radio :label="ADDRESS">根据厂商名称查询</el-radio>
</el-radio-group> </el-radio-group>
<el-form> </el-form> <el-form
label-position="left"
label-width="180px"
style="margin-top:50px"
:model="companySearch"
>
<el-form-item label="境内商品条码信息查询：">
<el-input
v-show="company === CODE"
v-model="companySearch.code"
placeholder="请输入正确的厂商识别代码！"
class="w240"
></el-input>
<el-input
v-show="company === NAME"
v-model="companySearch.name"
placeholder="请输入正确的商品条码！"
class="w240"
></el-input>
<el-input
v-show="company === ADDRESS"
v-model="companySearch.address"
placeholder="请输入正确的商品条码！"
class="w240"
></el-input>
</el-form-item>
<el-form-item label="验证码：">
<el-button type="primary" class="w240">
<div style="diplay:flex;align-item:center">
<img style="height:14px" src="./img/guard.png" alt="" />
点击此处进行验证
</div>
</el-button>
<el-button style="margin-left:40px" type="primary"
>查询</el-button
>
</el-form-item>
</el-form>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="查询产品信息" name="second"> </el-tab-pane> <el-tab-pane label="查询产品信息" name="second">
<el-form
label-position="left"
label-width="180px"
style="margin-top:50px"
:model="productSearch"
>
<el-form-item label="境内商品条码信息查询：">
<el-input
v-model="productSearch.code"
placeholder="请输入13位或14位的商品条码"
class="w240"
></el-input>
</el-form-item>
<el-form-item label="验证码：">
<el-button type="primary" class="w240">
<div style="diplay:flex;align-item:center">
<img style="height:14px" src="./img/guard.png" alt="" />
点击此处进行验证
</div>
</el-button>
<el-button style="margin-left:40px" type="primary"
>查询</el-button
>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
<div class="notice"> <div class="notice">
...@@ -50,9 +115,21 @@ export default { ...@@ -50,9 +115,21 @@ export default {
ADDRESS, ADDRESS,
activeName: "first", activeName: "first",
company: CODE, company: CODE,
companySearch: {
name: "",
code: "",
address: "",
},
productSearch: {
code: "",
},
}; };
}, },
}; };
</script> </script>
<style lang="scss" scoped></style> <style lang="scss">
.w240 {
width: 240px;
}
</style>
src/views/Search/shortcode.vue
<template> <template>
<div class="search-content"> <div class="search-content">
<div class="title">境内条码信息公告查询</div> <div class="title">缩短码查询</div>
<div class="body"> <div class="body">
<el-tabs v-model="activeName" class="tab-no-bottom">
<el-tab-pane label="查询厂商信息" name="first">
<div style="padding-top:20px"> <div style="padding-top:20px">
<el-radio-group v-model="company"> <el-form label-position="left" label-width="180px" :model="search">
<el-radio :label="CODE">根据厂商识别代码查询</el-radio> <el-form-item label="境外商品条码信息查询：">
<el-radio :label="NAME">根据厂商名称查询</el-radio> <el-input
<el-radio :label="ADDRESS">根据厂商名称查询</el-radio> v-model="search.code"
</el-radio-group> placeholder="请输入正确的境外商品条码！"
class="w240"
></el-input>
</el-form-item>
<el-form> </el-form> <el-form-item label="验证码：">
<div class="y-center">
<el-input
v-model="search.validate"
placeholder="请输入验证码"
class="w160"
></el-input>
<div class="validate-code">
<img src="../../assets/image/validate.jpg" alt="" />
</div>
<el-button
style="margin-left:40px"
type="primary"
@click="handleSearch"
>查询</el-button
>
</div> </div>
</el-tab-pane> </el-form-item>
</el-form>
<el-tab-pane label="查询产品信息" name="second"> </el-tab-pane> <div class="result-box" v-if="showResult">
</el-tabs> <div class="result-box-title">查询 {{ searchCodeShow }} 结果</div>
<div class="result-box-body">
<template v-if="result">
<div class="title">商品信息</div>
<div class="product-info"></div>
<div class="title">企业信息</div>
<div class="company-info"></div>
</template>
<span v-else>您输入的商品条码格式不正确，请确认后重试。</span>
</div>
</div>
</div>
</div> </div>
<div class="notice"> <div class="notice">
<div class="title">友情提示</div> <div class="title">友情提示</div>
<div class="content-wrapper"> <div class="content-wrapper">
<img src="./img/pic_ex_jl.png" align="right" alt="" /> <img src="./img/query-external-barcode.png" align="right" alt="" />
<p> <p>
1、商品条码 1、目前，国际物品编码组织（GS1）已将690至697之间的前缀码分配给中国物品编码中心使用，通常以这些前缀码开始的厂商识别代码都是由中国物品编码中心负责分配和管理的；以其他前缀码开始的则由境外GS1成员组织负责，一般称为"境外条码"，以下为您提供了境外商品条码信息的查询工具，请根据提示进行相关查询。欲了解GS1分配的前缀码，请点击：了解更多
（又称全球贸易项目代码GTIN）是指包含厂商识别代码在内的对零售商品、非零售商品、物流单元、位置、资产及服务进行全球惟一标识的一种代码（或称数据结构）。对贸易项目进行编码和符号表示（前缀码为690-699是境内条码），能够实现商品零售（POS）、进货、存货管理、自动补货、销售分析及其它业务运作的自动化。 >>
了解更多 >>
</p> </p>
<p> <p>
2、厂商信息查询结果说明：自中国物品编码中心为企业颁发《系统成员证书》当日起计，7天后，在线公布该企业的名称、厂商识别代码及证书颁发日期等信息；15天后，将公布该企业的具体注册信息。 2、本查询仅适用于中华人民共和国境外注册的商品条码信息。
</p>
<p>
3、本查询仅适用于中华人民共和国境内注册的商品条码信息。
</p> </p>
</div> </div>
</div> </div>
...@@ -39,20 +65,46 @@ ...@@ -39,20 +65,46 @@
</template> </template>
<script> <script>
const CODE = 0;
const NAME = 1;
const ADDRESS = 2;
export default { export default {
data() { data() {
return { return {
CODE, search: { code: "", validate: "" },
NAME, searchCodeShow: "",
ADDRESS, showResult: false,
activeName: "first", result: null,
company: CODE,
}; };
}, },
methods: {
handleSearch() {
this.searchCodeShow = this.search.code;
this.showResult = true;
if (this.search.code === "1") {
this.result = {};
}
},
},
}; };
</script> </script>
<style lang="scss" scoped></style> <style lang="scss">
.search-content {
.validate-code {
display: inline-block;
width: 70px;
height: 40px;
margin-left: 11px;
> img {
width: 100%;
height: 100%;
}
}
.w160 {
width: 160px;
}
.w240 {
width: 240px;
}
}
</style>
src/views/Search/style/common.scss
.search-content { .search-content {
color: #414345;
background: #ffffff; background: #ffffff;
border-radius: 4px; border-radius: 4px;
border: 1px solid #c5d8ee; border: 1px solid #c5d8ee;
...@@ -10,6 +11,13 @@ ...@@ -10,6 +11,13 @@
line-height: 25px; line-height: 25px;
border-bottom: 1px solid #f3f3f3; border-bottom: 1px solid #f3f3f3;
} }
.el-tabs__item {
color: #454545;
}
.el-form-item__label {
color: #414345;
}
.body { .body {
padding: 20px 30px; padding: 20px 30px;
} }
...@@ -25,7 +33,6 @@ ...@@ -25,7 +33,6 @@
} }
.content-wrapper { .content-wrapper {
margin-top: 29px; margin-top: 29px;
color: #414345;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
p + p { p + p {
...@@ -37,4 +44,47 @@ ...@@ -37,4 +44,47 @@
} }
} }
} }
// 查询结果
.result-box {
font-size: 14px;
font-weight: 400;
color: #414345;
line-height: 28px;
}
.result-box-title {
height: 40px;
padding: 0 20px;
line-height: 40px;
font-size: 14px;
font-weight: 600;
color: #f26335;
background: #fef1ec;
}
.result-box-body {
border: 1px solid #ebebeb;
border-top: none;
background-color: white;
padding: 20px;
> .title {
position: relative;
height: 28px;
font-size: 16px;
font-weight: 500;
color: #f26335;
line-height: 28px;
padding-left: 14px;
&::before {
content: "";
position: absolute;
left: 0;
top: 7px;
width: 4px;
height: 16px;
background: #04408d;
}
}
}
} }
src/views/comps/SubNav.vue
...@@ -16,10 +16,7 @@ ...@@ -16,10 +16,7 @@
</template> </template>
<template v-for="item in submenu.children"> <template v-for="item in submenu.children">
<template v-if="item.children && item.children.length > 0"> <template v-if="item.children && item.children.length > 0">
<el-submenu <el-submenu :index="item.name" :key="item.id">
:index="item.name"
:key="item.id"
>
<template slot="title"> <template slot="title">
<span style="margin-left: 6px">{{ item.name }}</span> <span style="margin-left: 6px">{{ item.name }}</span>
</template> </template>
...@@ -58,21 +55,47 @@ ...@@ -58,21 +55,47 @@
</el-menu> </el-menu>
</template> </template>
<script> <script>
import {mapState} from "vuex"; import { mapState } from "vuex";
export default { export default {
data() { data() {
return { return {
activeMenu: '', activeMenu: "",
}; };
}, },
computed: { computed: {
...mapState("system", ["subNav"]), ...mapState("system", ["subNav"]),
}, },
created() { created() {
console.log(this.subNav); // console.log(this.subNav);
},
watch: {
subNav: {
handler(val) {
console.log("watch------ subNav", val);
const result = this.treeFind(
val,
(item) => item.link === this.$route.path
);
if (result) {
console.log(result);
this.activeMenu = result.id;
}
},
immediate: true,
},
}, },
methods: { methods: {
treeFind(tree, func) {
for (const data of tree) {
if (func(data)) return data;
if (data.children) {
const res = this.treeFind(data.children, func);
if (res) return res;
}
}
return null;
},
handleSelect(index, indexP) { handleSelect(index, indexP) {
console.log(index, indexP); console.log(index, indexP);
const temp = JSON.parse(JSON.stringify(indexP)); const temp = JSON.parse(JSON.stringify(indexP));
...@@ -82,12 +105,10 @@ export default { ...@@ -82,12 +105,10 @@ export default {
if (temp.length > 1) { if (temp.length > 1) {
this.checkChildren(index, temp, item.children); this.checkChildren(index, temp, item.children);
} else if (temp.length === 0) { } else if (temp.length === 0) {
this.activeMenu = item.name;
this.showApp(item); this.showApp(item);
} else { } else {
item.children.forEach((_item) => { item.children.forEach((_item) => {
if (_item.name === index) { if (_item.name === index) {
this.activeMenu = _item.name;
this.showApp(_item); this.showApp(_item);
} }
}); });
...@@ -116,14 +137,14 @@ export default { ...@@ -116,14 +137,14 @@ export default {
}, },
showApp(item) { showApp(item) {
console.log(item) this.activeMenu = item.id;
if(item.link.startsWith('http')){ if (item.link.startsWith("http")) {
window.open(item.link) window.open(item.link);
}else{ } else {
if (item.breadcrumb) { if (item.breadcrumb) {
this.$store.commit('system/SET_BREADCRUMB', item.breadcrumb) this.$store.commit("system/SET_BREADCRUMB", item.breadcrumb);
} }
this.$router.push({path: item.link}) this.$router.push({ path: item.link });
} }
}, },
......
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