Skip to content

G
gs1
Commit b5dbba72 by Tang
Options

feat: 条码查询相关页面

parent 7437e984
Showing with 447 additions and 0 deletions
src/views/Search/external.vue 0 → 100644
<template>
<div class="search-content">
<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> </el-form>
</div>
</el-tab-pane>
<el-tab-pane label="查询产品信息" name="second"> </el-tab-pane>
</el-tabs>
</div>
<div class="notice">
<div class="title">友情提示</div>
<div class="content-wrapper">
<img src="./img/pic_ex_jl.png" align="right" alt="" />
<p>
1、商品条码
（又称全球贸易项目代码GTIN）是指包含厂商识别代码在内的对零售商品、非零售商品、物流单元、位置、资产及服务进行全球惟一标识的一种代码（或称数据结构）。对贸易项目进行编码和符号表示（前缀码为690-699是境内条码），能够实现商品零售（POS）、进货、存货管理、自动补货、销售分析及其它业务运作的自动化。
了解更多 >>
</p>
<p>
2、厂商信息查询结果说明：自中国物品编码中心为企业颁发《系统成员证书》当日起计，7天后，在线公布该企业的名称、厂商识别代码及证书颁发日期等信息；15天后，将公布该企业的具体注册信息。
</p>
<p>
3、本查询仅适用于中华人民共和国境内注册的商品条码信息。
</p>
</div>
</div>
</div>
</template>
<script>
const CODE = 0;
const NAME = 1;
const ADDRESS = 2;
export default {
data() {
return {
CODE,
NAME,
ADDRESS,
activeName: "first",
company: CODE,
};
},
};
</script>
<style lang="scss" scoped></style>
src/views/Search/internal.vue 0 → 100644
<template>
<div class="search-content">
<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> </el-form>
</div>
</el-tab-pane>
<el-tab-pane label="查询产品信息" name="second"> </el-tab-pane>
</el-tabs>
</div>
<div class="notice">
<div class="title">友情提示</div>
<div class="content-wrapper">
<img src="./img/pic_ex_jl.png" align="right" alt="" />
<p>
1、商品条码
（又称全球贸易项目代码GTIN）是指包含厂商识别代码在内的对零售商品、非零售商品、物流单元、位置、资产及服务进行全球惟一标识的一种代码（或称数据结构）。对贸易项目进行编码和符号表示（前缀码为690-699是境内条码），能够实现商品零售（POS）、进货、存货管理、自动补货、销售分析及其它业务运作的自动化。
了解更多 >>
</p>
<p>
2、厂商信息查询结果说明：自中国物品编码中心为企业颁发《系统成员证书》当日起计，7天后，在线公布该企业的名称、厂商识别代码及证书颁发日期等信息；15天后，将公布该企业的具体注册信息。
</p>
<p>
3、本查询仅适用于中华人民共和国境内注册的商品条码信息。
</p>
</div>
</div>
</div>
</template>
<script>
const CODE = 0;
const NAME = 1;
const ADDRESS = 2;
export default {
data() {
return {
CODE,
NAME,
ADDRESS,
activeName: "first",
company: CODE,
};
},
};
</script>
<style lang="scss" scoped></style>
src/views/Search/shortcode.vue 0 → 100644
<template>
<div class="search-content">
<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> </el-form>
</div>
</el-tab-pane>
<el-tab-pane label="查询产品信息" name="second"> </el-tab-pane>
</el-tabs>
</div>
<div class="notice">
<div class="title">友情提示</div>
<div class="content-wrapper">
<img src="./img/pic_ex_jl.png" align="right" alt="" />
<p>
1、商品条码
（又称全球贸易项目代码GTIN）是指包含厂商识别代码在内的对零售商品、非零售商品、物流单元、位置、资产及服务进行全球惟一标识的一种代码（或称数据结构）。对贸易项目进行编码和符号表示（前缀码为690-699是境内条码），能够实现商品零售（POS）、进货、存货管理、自动补货、销售分析及其它业务运作的自动化。
了解更多 >>
</p>
<p>
2、厂商信息查询结果说明：自中国物品编码中心为企业颁发《系统成员证书》当日起计，7天后，在线公布该企业的名称、厂商识别代码及证书颁发日期等信息；15天后，将公布该企业的具体注册信息。
</p>
<p>
3、本查询仅适用于中华人民共和国境内注册的商品条码信息。
</p>
</div>
</div>
</div>
</template>
<script>
const CODE = 0;
const NAME = 1;
const ADDRESS = 2;
export default {
data() {
return {
CODE,
NAME,
ADDRESS,
activeName: "first",
company: CODE,
};
},
};
</script>
<style lang="scss" scoped></style>
src/views/Search/style/common.scss 0 → 100644
.search-content {
background: #ffffff;
border-radius: 4px;
border: 1px solid #c5d8ee;
> .title {
padding: 20px 30px;
font-size: 18px;
font-weight: 500;
color: #454545;
line-height: 25px;
border-bottom: 1px solid #f3f3f3;
}
.body {
padding: 20px 30px;
}
.notice {
padding: 20px 30px;
background: rgba(242, 99, 53, 0.03);
border-radius: 0px 0px 2px 2px;
> .title {
font-size: 16px;
font-weight: 500;
color: #f26335;
line-height: 22px;
}
.content-wrapper {
margin-top: 29px;
color: #414345;
font-size: 14px;
font-weight: 400;
p + p {
margin-top: 30px;
}
img {
width: 113px;
margin-left: 30px;
}
}
}
}
src/views/Search/tools.vue 0 → 100644
<template>
<div class="search-tools">
<div class="title">条码信息查询</div>
<div class="tools-wrapper">
<div class="tool-card" v-for="item in tool" :key="item.name">
<div class="tool-img">
<img :src="item.img" alt="" />
</div>
<div class="tool-name">
{{ item.name }}
</div>
</div>
<div class="tool-card">
<div class="tool-img">
<img src="./img/pic_tiaomashuisu.png" alt="" />
</div>
<div class="tool-name">
<img src="./img/icon_android.png" alt="" />Android
<img src="./img/icon_iphone.png" alt="" />Iphone
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tool: [
{
name: "境内商品条码信息查询",
img: require("./img/pic_guoneitiaoma.png"),
},
{ name: "缩短码查询", img: require("./img/pic_suoduanma.png") },
{
name: "境外商品条码信息查询",
img: require("./img/pic_jingwaishangpin.png"),
},
// {name:'',img:require('./img/pic_tiaomazhuisu.png')}
],
};
},
};
</script>
<style lang="scss" scoped>
.title {
height: 25px;
font-size: 18px;
font-weight: 500;
color: #454545;
line-height: 25px;
margin-bottom: 30px;
}
.tools-wrapper {
min-height: 100%;
.tool-card {
width: 194px;
height: 210px;
background-color: white;
border-radius: 4px;
border: 1px solid rgba(197, 216, 238, 0.5);
float: left;
margin-right: 30px;
margin-bottom: 30px;
.tool-img {
height: 145px;
> img {
width: 100%;
height: 100%;
}
}
.tool-name {
height: 65px;
line-height: 65px;
font-size: 14px;
font-weight: 500;
color: #0d2c6c;
text-align: center;
> img {
margin-right: 9px;
}
}
}
}
</style>
src/views/comps/SubNav.vue 0 → 100644
<template>
<el-menu
:default-active="activeMenu"
class="el-menu-vertical gs-subnav"
:collapse="false"
@select="handleSelect"
>
<template v-for="submenu in subNav">
<el-submenu
v-if="submenu.children && submenu.children.length > 0"
:key="submenu.id"
:index="submenu.name"
>
<template slot="title">
<span style="margin-left: 6px">{{ submenu.name }}</span>
</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"
:background-color="theme.subMenuBg"
:text-color="theme.menuText"
:active-text-color="theme.menuActiveText"
>
<template slot="title">
<i
v-show="item.icon_name"
:style="{ color: theme.menuText }"
style="font-size: 13px"
:class="['qycloud', `${item.icon_name}`]"
/>
<span style="margin-left: 6px">{{ item.name }}</span>
</template>
<template v-for="third in item.children">
<el-menu-item
:key="third.id"
:index="third.name"
:class="{ 'is-active': activeMenu === third.id }"
>
{{ third.name }}
</el-menu-item>
</template>
</el-submenu>
</template>
<template v-else>
<el-menu-item
:key="item.id"
:index="item.name"
:class="{ 'is-active': activeMenu === item.id }"
>
{{ item.name }}
</el-menu-item>
</template>
</template>
</el-submenu>
<template v-else>
<el-menu-item
:key="submenu.id"
:index="submenu.name"
:class="{ 'is-active': activeMenu === submenu.id }"
>
{{ submenu.name }}
<i
v-show="submenu.icon_name"
:style="{ color: theme.menuText }"
style="font-size: 13px;margin-right: 6px"
:class="['qycloud', `${submenu.icon_name}`]"
/>
<span>{{ submenu.name }}</span>
</el-menu-item>
</template>
</template>
</el-menu>
</template>
<script>
import { mapState } from "vuex";
export default {
data() {
return {
defaultOpeneds: ["1", "2"],
};
},
computed: {
...mapState("system", ["subNav"]),
},
created() {
console.log(this.subNav);
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
},
};
</script>
<style lang="scss">
.el-menu.gs-subnav {
border-right: none;
background: $side-bg-color;
.el-submenu__title {
background: $side-bg-color;
height: 44px;
line-height: 44px;
}
.menu-title {
margin-top: 25px;
margin-bottom: 10px;
padding-left: 28px;
font-size: 14px;
color: #b7b6b6;
}
.el-menu-item {
height: 44px;
line-height: 44px;
color: #6b6a6a;
background: transparent;
font-size: 14px;
i {
color: $side-bg-color;
font-size: 25px;
position: absolute;
top: 15px;
right: 15px;
}
&:hover,
&:focus,
&.is-active {
color: #f26335;
background: $side-menu-active-color;
border-right: 3px solid #f26335;
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment