Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
G
gs1
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
吴迪
gs1
Commits
307434ab
Commit
307434ab
authored
Oct 04, 2021
by
Tang
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 境内境外查询页面【90%】,样式问题未解决,添加其他查询基础页面
parent
29c4b97d
Show whitespace changes
Inline
Side-by-side
Showing
11 changed files
with
469 additions
and
260 deletions
+469
-260
_base.scss
src/assets/css/_base.scss
+36
-34
_reset.scss
src/assets/css/_reset.scss
+0
-95
main.scss
src/assets/css/main.scss
+1
-2
mock.js
src/components/layout/header/mock.js
+25
-0
main.js
src/main.js
+58
-52
index.js
src/router/index.js
+20
-0
external.vue
src/views/Search/external.vue
+81
-29
internal.vue
src/views/Search/internal.vue
+80
-3
shortcode.vue
src/views/Search/shortcode.vue
+81
-29
common.scss
src/views/Search/style/common.scss
+51
-1
SubNav.vue
src/views/comps/SubNav.vue
+36
-15
No files found.
src/assets/css/_base.scss
View file @
307434ab
// 查询表单
.content-query
{
.el-form
{
@include
el-form
.
el-row
{
.el-col
{
.el-form-item
{
width
:
100%
;
.el-form-item__content
{
width
:calc
(
100
%
-
150px
)
.content-query
{
.el-form
{
@include
el-form
.
el-row
{
.el-col
{
.el-form-item
{
width
:
100%
;
.el-form-item__content
{
width
:
calc
(
100%
-
150px
);
}
}
}
}
}
}
.content-list
{
.el-form
{
@include
el-form
.content-list
{
.el-form
{
@include
el-form
;
}
}
.content-msg
{
padding
:
20px
20px
;
background
:
$bg-color
;
.content-msg
{
padding
:
20px
20px
;
background
:
$bg-color
;
border-radius
:
14px
;
}
...
...
@@ -77,7 +76,8 @@
}
/* ul ol 样式 */
ul
,
ol
{
ul
,
ol
{
margin
:
10px
0
10px
20px
;
}
}
...
...
@@ -153,54 +153,54 @@
&
:hover
,
&
:focus
{
background
:
transparent
background
:
transparent
;
}
}
// 分页
.el-pagination.is-background
{
margin-top
:
20px
;
text-align
:
center
;
.el-pager
li
:not
(
.disabled
)
.active
{
background
:
#
FFB73F
;
background
:
#
ffb73f
;
}
.el-pager
li
{
border-radius
:
5px
;
}
.btn-prev
,
.btn-next
{
.btn-prev
,
.btn-next
{
border-radius
:
5px
;
}
.el-input__inner
{
border-radius
:
5px
!
important
;
&
:hover
,
&
:focus
{
border-color
:
#FFB73F
!
important
;
&
:hover
,
&
:focus
{
border-color
:
#ffb73f
!
important
;
}
}
.el-input__inner.is-focus
{
border-color
:
#
FFB73F
!
important
;
border-color
:
#
ffb73f
!
important
;
}
}
.el-select-dropdown.el-popper
{
.el-scrollbar
{
li
.el-select-dropdown__item.selected
{
color
:
#
FFB73F
!
important
;
color
:
#
ffb73f
!
important
;
}
}
}
// 表格
.content-list
{
.el-table
{
@include
el-table
@include
el-table
;
}
}
...
...
@@ -245,7 +245,6 @@
color
:
#b94339
;
}
}
}
.el-form-item.full-item
{
...
...
@@ -262,7 +261,6 @@
}
}
// 弹窗
.el-dialog
{
width
:
600px
;
...
...
@@ -278,7 +276,7 @@
}
.el-form
{
@include
el-form
@include
el-form
;
}
}
...
...
@@ -292,7 +290,7 @@
color
:
#969696
;
&
.is-active
{
color
:
$system-color5
color
:
$system-color5
;
}
}
}
...
...
@@ -303,7 +301,7 @@
color
:
$system-color5
;
a
{
color
:
$system-color5
color
:
$system-color5
;
}
}
}
...
...
@@ -339,7 +337,7 @@
.el-form-item__label
{
// vertical-align:-52%;
&
:
:
before
{
content
:
'*'
;
content
:
"*"
;
font-size
:
20px
;
color
:
$side-menu-active-color
;
vertical-align
:
-16%
;
...
...
@@ -385,7 +383,7 @@
}
tr
td
{
color
:
#7
B7F
83
;
color
:
#7
b7f
83
;
font-size
:
11px
;
text-align
:
center
;
}
...
...
@@ -474,7 +472,6 @@
color
:
#ffb73f
;
}
}
}
}
}
...
...
@@ -493,6 +490,11 @@
color
:
$theme-color1
;
}
.y-center
{
display
:
flex
;
align-items
:
center
;
}
@media
screen
and
(
max-width
:
992px
)
{
.marginTopLg20
{
margin-top
:
20px
;
...
...
src/assets/css/_reset.scss
deleted
100644 → 0
View file @
29c4b97d
@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
View file @
307434ab
@import
"./_reset.scss"
;
// @import "./_reset.scss";
@import
"./_style.scss"
;
@import
"./_icon.scss"
;
@import
"./_mixin.scss"
;
...
...
src/components/layout/header/mock.js
View file @
307434ab
...
...
@@ -112,30 +112,55 @@ export const nav = [
name
:
"GLN查询"
,
index
:
1
,
link
:
"/search/gln"
,
breadcrumb
:
[
{
name
:
"服务中心"
,
path
:
"/service"
},
{
name
:
"查询服务"
,
path
:
"/search/tool"
},
{
name
:
"GLN查询"
},
],
},
{
id
:
uuid
(
"gs_nav"
),
name
:
"自行车企业代码公告查询"
,
index
:
2
,
link
:
"/search/bike"
,
breadcrumb
:
[
{
name
:
"服务中心"
,
path
:
"/service"
},
{
name
:
"查询服务"
,
path
:
"/search/tool"
},
{
name
:
"自行车企业代码公告查询"
},
],
},
{
id
:
uuid
(
"gs_nav"
),
name
:
"条码术语查询"
,
index
:
3
,
link
:
"/search/glossary"
,
breadcrumb
:
[
{
name
:
"服务中心"
,
path
:
"/service"
},
{
name
:
"查询服务"
,
path
:
"/search/tool"
},
{
name
:
"条码术语查询"
},
],
},
{
id
:
uuid
(
"gs_nav"
),
name
:
"校验码计算工具"
,
index
:
4
,
link
:
"/search/check"
,
breadcrumb
:
[
{
name
:
"服务中心"
,
path
:
"/service"
},
{
name
:
"查询服务"
,
path
:
"/search/tool"
},
{
name
:
"校验码计算工具"
},
],
},
{
id
:
uuid
(
"gs_nav"
),
name
:
"国家及地区前缀码查询"
,
index
:
5
,
link
:
"/search/country"
,
breadcrumb
:
[
{
name
:
"服务中心"
,
path
:
"/service"
},
{
name
:
"查询服务"
,
path
:
"/search/tool"
},
{
name
:
"国家及地区前缀码查询"
},
],
},
],
},
...
...
src/main.js
View file @
307434ab
import
Vue
from
'vue'
import
App
from
'./App.vue'
import
router
from
'./router/index'
import
store
from
'./vuex/store'
import
$
from
'jquery'
import
'bootstrap/dist/css/bootstrap.min.css'
import
'bootstrap/dist/js/bootstrap.min.js'
import
'./plugins/element.js'
import
'./plugins/qrcode.js'
import
"./assets/css/main.scss"
import
"./assets/css/layout.scss"
import
"./assets/css/element-variables.scss"
import
Vue
from
"vue"
;
import
App
from
"./App.vue"
;
import
router
from
"./router/index"
;
import
store
from
"./vuex/store"
;
import
$
from
"jquery"
;
import
"./assets/css/_reset.css"
;
import
"bootstrap/dist/css/bootstrap.min.css"
;
import
"./assets/css/main.scss"
;
import
"./assets/css/layout.scss"
;
import
"bootstrap/dist/js/bootstrap.min.js"
;
import
"./plugins/element.js"
;
import
"./plugins/qrcode.js"
;
import
"./assets/css/element-variables.scss"
;
// 公共样式、布局样式
// 主题色调修改在assets/_style.scss 修改里面的变量即可
...
...
@@ -20,70 +21,75 @@ import "./assets/css/element-variables.scss"
// 不属于这两块内容的另起类名
// 封装axios
import
api
from
"./axios/index"
Vue
.
use
(
api
)
import
api
from
"./axios/index"
;
Vue
.
use
(
api
)
;
// 过滤器封装
import
filters
from
"./filters/index"
Object
.
keys
(
filters
).
forEach
(
key
=>
{
Vue
.
filter
(
key
,
filters
[
key
])
})
import
filters
from
"./filters/index"
;
Object
.
keys
(
filters
).
forEach
(
(
key
)
=>
{
Vue
.
filter
(
key
,
filters
[
key
]);
})
;
// 全局注册 二次封装loading等待框、以及确认框函数
import
ElPack
from
"./utils/interaction.js"
Vue
.
prototype
.
$ElPack
=
ElPack
import
ElPack
from
"./utils/interaction.js"
;
Vue
.
prototype
.
$ElPack
=
ElPack
;
// 自定义指令
import
"./directives"
import
"./directives"
;
// Clipboard
import
Clipboard
from
"v-clipboard"
Vue
.
use
(
Clipboard
)
import
Clipboard
from
"v-clipboard"
;
Vue
.
use
(
Clipboard
)
;
// Vuex
import
storage
from
"./utils/storage.js"
Vue
.
prototype
.
$storage
=
storage
import
storage
from
"./utils/storage.js"
;
Vue
.
prototype
.
$storage
=
storage
;
// ngprogress
import
NProgress
from
"nprogress"
;
import
'nprogress/nprogress.css'
import
"nprogress/nprogress.css"
;
NProgress
.
inc
(
0.3
);
NProgress
.
configure
({
easing
:
"ease"
,
speed
:
500
,
showSpinner
:
false
});
Vue
.
config
.
productionTip
=
false
Vue
.
config
.
productionTip
=
false
;
router
.
beforeEach
((
to
,
from
,
next
)
=>
{
NProgress
.
start
()
const
whiteList
=
[
"/404"
]
if
(
whiteList
.
some
(
path
=>
{
return
path
===
to
.
path
}))
{
next
()
router
.
beforeEach
((
to
,
from
,
next
)
=>
{
NProgress
.
start
();
const
whiteList
=
[
"/404"
];
if
(
whiteList
.
some
((
path
)
=>
{
return
path
===
to
.
path
;
})
)
{
next
();
}
else
{
const
{
user
}
=
store
.
state
const
{
user
}
=
store
.
state
;
// 检测是否已登录
if
(
user
.
token
)
{
const
authList
=
user
.
userMenus
const
redirectPathList
=
[
"/login"
]
const
shouldRedirectToDefault
=
redirectPathList
.
some
(
path
=>
{
return
path
===
to
.
path
})
const
authList
=
user
.
userMenus
;
const
redirectPathList
=
[
"/login"
];
const
shouldRedirectToDefault
=
redirectPathList
.
some
((
path
)
=>
{
return
path
===
to
.
path
;
});
if
(
!
to
.
path
||
shouldRedirectToDefault
)
{
const
defaultAuth
=
authList
[
0
]
const
defaultAuth
=
authList
[
0
];
// 加载第一个菜单栏项
if
(
defaultAuth
&&
defaultAuth
.
path
)
{
next
({
path
:
defaultAuth
.
path
,
replace
:
true
})
next
({
path
:
defaultAuth
.
path
,
replace
:
true
});
}
else
{
next
({
path
:
"/404"
,
replace
:
true
})
next
({
path
:
"/404"
,
replace
:
true
});
}
}
else
{
const
isAuthed
=
authList
.
some
(
authItem
=>
{
const
result
=
to
.
path
===
authItem
.
path
||
to
.
path
.
startsWith
(
authItem
.
path
)
return
result
})
isAuthed
?
next
()
:
next
({
path
:
"/404"
,
replace
:
true
})
const
isAuthed
=
authList
.
some
((
authItem
)
=>
{
const
result
=
to
.
path
===
authItem
.
path
||
to
.
path
.
startsWith
(
authItem
.
path
);
return
result
;
});
isAuthed
?
next
()
:
next
({
path
:
"/404"
,
replace
:
true
});
}
}
else
{
next
()
next
();
// 进入登录页面
// if (to.path === "/login") {
// next()
...
...
@@ -92,15 +98,15 @@ router.beforeEach((to,from,next) => {
// }
}
}
})
})
;
router
.
afterEach
(()
=>
{
NProgress
.
done
()
})
NProgress
.
done
();
})
;
window
.
vm
=
new
Vue
({
router
,
store
,
$
,
render
:
h
=>
h
(
App
)
}).
$mount
(
'#app'
)
render
:
(
h
)
=>
h
(
App
),
}).
$mount
(
"#app"
);
src/router/index.js
View file @
307434ab
...
...
@@ -114,6 +114,26 @@ const routes = [
path
:
"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
View file @
307434ab
<
template
>
<div
class=
"search-content"
>
<div
class=
"title"
>
境
内条码信息公告
查询
</div>
<div
class=
"title"
>
境
外条码信息
查询
</div>
<div
class=
"body"
>
<el-tabs
v-model=
"activeName"
class=
"tab-no-bottom"
>
<el-tab-pane
label=
"查询厂商信息"
name=
"first"
>
<div
style=
"padding-top:20px"
>
<el-radio-group
v-model=
"company"
>
<el-radio
:label=
"CODE"
>
根据厂商识别代码查询
</el-radio>
<el-radio
:label=
"NAME"
>
根据厂商名称查询
</el-radio>
<el-radio
:label=
"ADDRESS"
>
根据厂商名称查询
</el-radio>
</el-radio-group>
<el-form
label-position=
"left"
label-width=
"180px"
:model=
"search"
>
<el-form-item
label=
"境外商品条码信息查询:"
>
<el-input
v-model=
"search.code"
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>
</el-tab-pane>
</el-form-item>
</el-form>
<el-tab-pane
label=
"查询产品信息"
name=
"second"
>
</el-tab-pane>
</el-tabs>
<div
class=
"result-box"
v-if=
"showResult"
>
<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
class=
"notice"
>
<div
class=
"title"
>
友情提示
</div>
<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>
1、商品条码
(又称全球贸易项目代码GTIN)是指包含厂商识别代码在内的对零售商品、非零售商品、物流单元、位置、资产及服务进行全球惟一标识的一种代码(或称数据结构)。对贸易项目进行编码和符号表示(前缀码为690-699是境内条码),能够实现商品零售(POS)、进货、存货管理、自动补货、销售分析及其它业务运作的自动化。
了解更多 >>
1、目前,国际物品编码组织(GS1)已将690至697之间的前缀码分配给中国物品编码中心使用,通常以这些前缀码开始的厂商识别代码都是由中国物品编码中心负责分配和管理的;以其他前缀码开始的则由境外GS1成员组织负责,一般称为"境外条码",以下为您提供了境外商品条码信息的查询工具,请根据提示进行相关查询。欲了解GS1分配的前缀码,请点击:了解更多
>>
</p>
<p>
2、厂商信息查询结果说明:自中国物品编码中心为企业颁发《系统成员证书》当日起计,7天后,在线公布该企业的名称、厂商识别代码及证书颁发日期等信息;15天后,将公布该企业的具体注册信息。
</p>
<p>
3、本查询仅适用于中华人民共和国境内注册的商品条码信息。
2、本查询仅适用于中华人民共和国境外注册的商品条码信息。
</p>
</div>
</div>
...
...
@@ -39,20 +65,46 @@
</template>
<
script
>
const
CODE
=
0
;
const
NAME
=
1
;
const
ADDRESS
=
2
;
export
default
{
data
()
{
return
{
CODE
,
NAME
,
ADDRESS
,
activeName
:
"first"
,
company
:
CODE
,
search
:
{
code
:
""
,
validate
:
""
},
searchCodeShow
:
""
,
showResult
:
false
,
result
:
null
,
};
},
methods
:
{
handleSearch
()
{
this
.
searchCodeShow
=
this
.
search
.
code
;
this
.
showResult
=
true
;
if
(
this
.
search
.
code
===
"1"
)
{
this
.
result
=
{};
}
},
},
};
</
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
View file @
307434ab
...
...
@@ -11,11 +11,76 @@
<el-radio
:label=
"ADDRESS"
>
根据厂商名称查询
</el-radio>
</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>
</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>
</div>
<div
class=
"notice"
>
...
...
@@ -50,9 +115,21 @@ export default {
ADDRESS
,
activeName
:
"first"
,
company
:
CODE
,
companySearch
:
{
name
:
""
,
code
:
""
,
address
:
""
,
},
productSearch
:
{
code
:
""
,
},
};
},
};
</
script
>
<
style
lang=
"scss"
scoped
></
style
>
<
style
lang=
"scss"
>
.w240
{
width
:
240px
;
}
</
style
>
src/views/Search/shortcode.vue
View file @
307434ab
<
template
>
<div
class=
"search-content"
>
<div
class=
"title"
>
境内条码信息公告
查询
</div>
<div
class=
"title"
>
缩短码
查询
</div>
<div
class=
"body"
>
<el-tabs
v-model=
"activeName"
class=
"tab-no-bottom"
>
<el-tab-pane
label=
"查询厂商信息"
name=
"first"
>
<div
style=
"padding-top:20px"
>
<el-radio-group
v-model=
"company"
>
<el-radio
:label=
"CODE"
>
根据厂商识别代码查询
</el-radio>
<el-radio
:label=
"NAME"
>
根据厂商名称查询
</el-radio>
<el-radio
:label=
"ADDRESS"
>
根据厂商名称查询
</el-radio>
</el-radio-group>
<el-form
label-position=
"left"
label-width=
"180px"
:model=
"search"
>
<el-form-item
label=
"境外商品条码信息查询:"
>
<el-input
v-model=
"search.code"
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>
</el-tab-pane>
</el-form-item>
</el-form>
<el-tab-pane
label=
"查询产品信息"
name=
"second"
>
</el-tab-pane>
</el-tabs>
<div
class=
"result-box"
v-if=
"showResult"
>
<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
class=
"notice"
>
<div
class=
"title"
>
友情提示
</div>
<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>
1、商品条码
(又称全球贸易项目代码GTIN)是指包含厂商识别代码在内的对零售商品、非零售商品、物流单元、位置、资产及服务进行全球惟一标识的一种代码(或称数据结构)。对贸易项目进行编码和符号表示(前缀码为690-699是境内条码),能够实现商品零售(POS)、进货、存货管理、自动补货、销售分析及其它业务运作的自动化。
了解更多 >>
1、目前,国际物品编码组织(GS1)已将690至697之间的前缀码分配给中国物品编码中心使用,通常以这些前缀码开始的厂商识别代码都是由中国物品编码中心负责分配和管理的;以其他前缀码开始的则由境外GS1成员组织负责,一般称为"境外条码",以下为您提供了境外商品条码信息的查询工具,请根据提示进行相关查询。欲了解GS1分配的前缀码,请点击:了解更多
>>
</p>
<p>
2、厂商信息查询结果说明:自中国物品编码中心为企业颁发《系统成员证书》当日起计,7天后,在线公布该企业的名称、厂商识别代码及证书颁发日期等信息;15天后,将公布该企业的具体注册信息。
</p>
<p>
3、本查询仅适用于中华人民共和国境内注册的商品条码信息。
2、本查询仅适用于中华人民共和国境外注册的商品条码信息。
</p>
</div>
</div>
...
...
@@ -39,20 +65,46 @@
</template>
<
script
>
const
CODE
=
0
;
const
NAME
=
1
;
const
ADDRESS
=
2
;
export
default
{
data
()
{
return
{
CODE
,
NAME
,
ADDRESS
,
activeName
:
"first"
,
company
:
CODE
,
search
:
{
code
:
""
,
validate
:
""
},
searchCodeShow
:
""
,
showResult
:
false
,
result
:
null
,
};
},
methods
:
{
handleSearch
()
{
this
.
searchCodeShow
=
this
.
search
.
code
;
this
.
showResult
=
true
;
if
(
this
.
search
.
code
===
"1"
)
{
this
.
result
=
{};
}
},
},
};
</
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
View file @
307434ab
.search-content
{
color
:
#414345
;
background
:
#ffffff
;
border-radius
:
4px
;
border
:
1px
solid
#c5d8ee
;
...
...
@@ -10,6 +11,13 @@
line-height
:
25px
;
border-bottom
:
1px
solid
#f3f3f3
;
}
.el-tabs__item
{
color
:
#454545
;
}
.el-form-item__label
{
color
:
#414345
;
}
.body
{
padding
:
20px
30px
;
}
...
...
@@ -25,7 +33,6 @@
}
.content-wrapper
{
margin-top
:
29px
;
color
:
#414345
;
font-size
:
14px
;
font-weight
:
400
;
p
+
p
{
...
...
@@ -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
View file @
307434ab
...
...
@@ -16,10 +16,7 @@
</
template
>
<
template
v-for=
"item in submenu.children"
>
<template
v-if=
"item.children && item.children.length > 0"
>
<el-submenu
:index=
"item.name"
:key=
"item.id"
>
<el-submenu
:index=
"item.name"
:key=
"item.id"
>
<template
slot=
"title"
>
<span
style=
"margin-left: 6px"
>
{{
item
.
name
}}
</span>
</
template
>
...
...
@@ -58,21 +55,47 @@
</el-menu>
</template>
<
script
>
import
{
mapState
}
from
"vuex"
;
import
{
mapState
}
from
"vuex"
;
export
default
{
data
()
{
return
{
activeMenu
:
''
,
activeMenu
:
""
,
};
},
computed
:
{
...
mapState
(
"system"
,
[
"subNav"
]),
},
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
:
{
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
)
{
console
.
log
(
index
,
indexP
);
const
temp
=
JSON
.
parse
(
JSON
.
stringify
(
indexP
));
...
...
@@ -82,12 +105,10 @@ export default {
if
(
temp
.
length
>
1
)
{
this
.
checkChildren
(
index
,
temp
,
item
.
children
);
}
else
if
(
temp
.
length
===
0
)
{
this
.
activeMenu
=
item
.
name
;
this
.
showApp
(
item
);
}
else
{
item
.
children
.
forEach
((
_item
)
=>
{
if
(
_item
.
name
===
index
)
{
this
.
activeMenu
=
_item
.
name
;
this
.
showApp
(
_item
);
}
});
...
...
@@ -116,14 +137,14 @@ export default {
},
showApp
(
item
)
{
console
.
log
(
item
)
if
(
item
.
link
.
startsWith
(
'http'
))
{
window
.
open
(
item
.
link
)
}
else
{
this
.
activeMenu
=
item
.
id
;
if
(
item
.
link
.
startsWith
(
"http"
))
{
window
.
open
(
item
.
link
)
;
}
else
{
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
});
}
},
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment