Skip to content

G
gs1
Commit 0f18352d by 林家欣
Options

业务大厅下操作指南切图完成

parent 1c5204f6
Showing with 671 additions and 149 deletions
src/components/layout/header/mock.js
...@@ -215,6 +215,17 @@ export const nav = [ ...@@ -215,6 +215,17 @@ export const nav = [
}, },
{ {
id: uuid("gs_nav"), id: uuid("gs_nav"),
name: "我要编码",
index: 2,
link: "/Business/Guide2",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "操作指南", path: "/Business/Guide" },
{ name: "我要编码" },
],
},
{
id: uuid("gs_nav"),
name: "我要通报编码信息", name: "我要通报编码信息",
index: 2, index: 2,
link: "/Business/Guide3", link: "/Business/Guide3",
...@@ -226,6 +237,61 @@ export const nav = [ ...@@ -226,6 +237,61 @@ export const nav = [
}, },
{ {
id: uuid("gs_nav"), id: uuid("gs_nav"),
name: "微信共享",
index: 2,
link: "/Business/Guide4",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "操作指南", path: "/Business/Guide" },
{ name: "微信共享" },
],
},
{
id: uuid("gs_nav"),
name: "我要培训",
index: 2,
link: "/Business/Guide5",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "操作指南", path: "/Business/Guide" },
{ name: "我要培训" },
],
},
{
id: uuid("gs_nav"),
name: "我要续展",
index: 2,
link: "/Business/Guide6",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "操作指南", path: "/Business/Guide" },
{ name: "我要续展" },
],
},
{
id: uuid("gs_nav"),
name: "我要咨询",
index: 2,
link: "/Business/Guide7",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "操作指南", path: "/Business/Guide" },
{ name: "我要咨询" },
],
},
{
id: uuid("gs_nav"),
name: "常见问题",
index: 2,
link: "/Business/Guide8",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "操作指南", path: "/Business/Guide" },
{ name: "常见问题" },
],
},
{
id: uuid("gs_nav"),
name: "收费公示", name: "收费公示",
index: 2, index: 2,
link: "/Business/Corppaynew", link: "/Business/Corppaynew",
...@@ -292,6 +358,28 @@ export const nav = [ ...@@ -292,6 +358,28 @@ export const nav = [
}, },
{ {
id: uuid("gs_nav"), id: uuid("gs_nav"),
name: "我要追溯",
index: 2,
link: "/Business/FoodSafety",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "我还不是系统成员", path: "/Business/Register" },
{ name: "我要追溯" },
],
},
{
id: uuid("gs_nav"),
name: "条码微站",
index: 2,
link: "/Business/BarcodeV",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "我还不是系统成员", path: "/Business/Register" },
{ name: "条码微站" },
],
},
{
id: uuid("gs_nav"),
name: "零售商品", name: "零售商品",
index: 2, index: 2,
link: "/Business/Code1", link: "/Business/Code1",
......
src/router/index.js
...@@ -257,7 +257,7 @@ const routes = [ ...@@ -257,7 +257,7 @@ const routes = [
name: "常见问题", name: "常见问题",
fatherPath: '/Business/Guide', fatherPath: '/Business/Guide',
}, },
component: () => import("@/views/Business/Guide8.vue"), component: () => import("@/views/Business/Fap.vue"),
}, },
{ {
path: "/Business/Corppaynew", path: "/Business/Corppaynew",
...@@ -321,6 +321,22 @@ const routes = [ ...@@ -321,6 +321,22 @@ const routes = [
}, },
}, },
{ {
path: "/Business/FoodSafety",
name: "FoodSafety",
meta: {
name: "我要追溯",
},
component: () => import("@/views/Business/FoodSafety.vue"),
},
{
path: "/Business/BarcodeV",
name: "BarcodeV",
meta: {
name: "条码微站",
},
component: () => import("@/views/Business/BarcodeV.vue"),
},
{
path: "/Business/Code1", path: "/Business/Code1",
name: "Code1", name: "Code1",
meta: { meta: {
...@@ -347,14 +363,7 @@ const routes = [ ...@@ -347,14 +363,7 @@ const routes = [
}, },
component: () => import("@/views/Business/Code3.vue"), component: () => import("@/views/Business/Code3.vue"),
}, },
{
path: "/Business/Fap",
name: "Fap",
meta: {
name: "常见问题",
},
component: () => import("@/views/Business/Fap.vue"),
},
], ],
}, },
{ {
......
src/views/Business/BarcodeV.vue 0 → 100644
<template>
<div class="guide">
<div class="guide-msg container">
<Title :father="barcodeV.title1"></Title>
<p style="text-indent: 28px; font-size: 14px">
<a href="http://static.gds.org.cn/ws/index.html" target="_blank"
>条码微站</a
>是由中国物品编码中心基于国家标准打造的商品二维码综合服务平台，旨在为企业打通线上线下的沟通渠道，帮助企业轻松建立官方门户，及时发布商品资讯，令产品理念直达目标客户；通过线上生成商品二维码，在移动互联网环境展示产品、打造品牌、拓展市场，帮助企业在激烈的市场竞争中赢得先机。其核心优势在于为企业提供了权威的商品信息发布渠道，及商品二维码生成平台，通过扫描印制在包装上的二维码，企业可以实现现有资源的全面整合，打通线上线下销售渠道。
</p>
<p style="text-indent: 28px; font-size: 14px">
在移动互联的世界，条码微站可以帮助您快速建立起属于自己的移动门户。即使您是初入互联网营销的企业小白，也完全不用担心，无需投入专业网站建设运营人员，只需轻动手指录入商品信息，优质的企业微门户网站即可展现在手机等移动终端。热销展示、新品推介多级产品资讯动态一网打尽,企业新闻、宣传海报品牌宣传深入人心。帮助企业提升品牌形象，降低推广成本，提高经济效益，开拓市场资源。
</p>
<div
class="row"
style="
border: 1px solid #e8dbc1;
background-color: #fcf8f3;
margin-bottom: 30px;
margin-left: 0px;
margin-right: 0px;
"
>
<img
src="../../assets/image/business/tiaomavzhan1.jpg"
alt=""
class="img-responsive"
style="margin-top: 15px"
/>
<p
style="
text-indent: 28px;
font-size: 14px;
text-align: center;
padding-top: 10px;
"
></p>
</div>
<div
class="row"
style="
border: 1px solid #e8dbc1;
background-color: #fcf8f3;
margin-bottom: 30px;
margin-left: 0px;
margin-right: 0px;
"
>
<p
style="
text-indent: 28px;
font-size: 14px;
text-align: center;
padding-top: 10px;
"
>
<b>条码微站加入流程</b>
</p>
<img
src="../../assets/image/business/tiaomavzhan2.jpg"
alt=""
class="img-responsive"
style="margin-top: 15px; margin-bottom: 15px"
/>
</div>
</div>
</div>
</template>
<script>
import Title from "../comps/title.vue";
export default {
components: {
Title,
},
data() {
return {
barcodeV: {
title1: {
name: "条码微站",
},
},
};
},
};
</script>
<style lang="scss">
.guide {
@media screen and (max-width: 992px) {
img {
width: 100%;
}
}
}
</style>
<style lang="scss" scoped>
.guide {
@include module-box;
.guide-msg {
margin: 30px 0;
font-size: 14px;
.msg-title {
color: #008dbd;
margin-bottom: 20px;
&.actived {
color: #04408d;
}
}
.paddingBottom10 {
padding-bottom: 10px;
}
img {
max-width: 100%;
}
p {
text-indent: 25px;
font-size: 14px;
line-height: 24px;
}
a {
color: #008dbd;
text-decoration: none;
}
}
}
</style>
\ No newline at end of file
src/views/Business/Code1.vue
...@@ -2,7 +2,9 @@ ...@@ -2,7 +2,9 @@
<div class="guide"> <div class="guide">
<cate :father="lsspCate"></cate> <cate :father="lsspCate"></cate>
<div class="guide-msg container"> <div class="guide-msg container">
<div class="msg-title" ref="1-1">第一步：为不同的商品项目编制不同的商品标</div> <div class="msg-title" ref="1-1">
第一步：为不同的商品项目编制不同的商品标
</div>
<p class="paddingBottom10"> <p class="paddingBottom10">
在我国，零售商品的标识代码主要采用三种数据结构，即GTIN-13、GTIN-8和GTIN-12。通常情况下，选用13位的数字代码结构用EAN-13条码表示。只有当产品出口到北美地区并且客户指定时，才申请使用UCC-12代码（用UPC条码表示）。中国厂商如需申请UPC商品条码，须经中国物品编码中心统一办理。GTIN-13和GTIN-8的结构分别如图1、图2、图3所示。 在我国，零售商品的标识代码主要采用三种数据结构，即GTIN-13、GTIN-8和GTIN-12。通常情况下，选用13位的数字代码结构用EAN-13条码表示。只有当产品出口到北美地区并且客户指定时，才申请使用UCC-12代码（用UPC条码表示）。中国厂商如需申请UPC商品条码，须经中国物品编码中心统一办理。GTIN-13和GTIN-8的结构分别如图1、图2、图3所示。
</p> </p>
...@@ -224,8 +226,12 @@ export default { ...@@ -224,8 +226,12 @@ export default {
$route: { $route: {
handler(val) { handler(val) {
this.$nextTick(() => { this.$nextTick(() => {
Object.keys(this.$refs).forEach((key) => {
this.$refs[key].setAttribute("class", "msg-title");
});
const top = this.$refs[val.query.id].offsetTop; const top = this.$refs[val.query.id].offsetTop;
window.scrollTo(0, top); window.scrollTo(0, top);
this.$refs[val.query.id].setAttribute("class", "msg-title actived");
}); });
}, },
immediate: true, immediate: true,
...@@ -239,6 +245,15 @@ export default { ...@@ -239,6 +245,15 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss">
.guide {
@media screen and (max-width: 992px) {
img {
width: 100%;
}
}
}
</style>
<style lang="scss" scoped> <style lang="scss" scoped>
.guide { .guide {
@include module-box; @include module-box;
...@@ -246,13 +261,18 @@ export default { ...@@ -246,13 +261,18 @@ export default {
margin: 30px 0; margin: 30px 0;
font-size: 14px; font-size: 14px;
.msg-title { .msg-title {
color: rgba(0, 121, 158, 1); color: #008dbd;
margin-bottom: 20px; margin-bottom: 20px;
&.actived {
color: #04408d;
}
} }
.paddingBottom10 { .paddingBottom10 {
padding-bottom: 10px; padding-bottom: 10px;
} }
img {
max-width: 100%;
}
p { p {
text-indent: 25px; text-indent: 25px;
font-size: 14px; font-size: 14px;
......
src/views/Business/Code2.vue
...@@ -145,8 +145,12 @@ export default { ...@@ -145,8 +145,12 @@ export default {
$route: { $route: {
handler(val) { handler(val) {
this.$nextTick(() => { this.$nextTick(() => {
Object.keys(this.$refs).forEach((key) => {
this.$refs[key].setAttribute("class", "msg-title");
});
const top = this.$refs[val.query.id].offsetTop; const top = this.$refs[val.query.id].offsetTop;
window.scrollTo(0, top); window.scrollTo(0, top);
this.$refs[val.query.id].setAttribute("class", "msg-title actived");
}); });
}, },
immediate: true, immediate: true,
...@@ -160,6 +164,16 @@ export default { ...@@ -160,6 +164,16 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss">
.guide{
@media screen and (max-width: 992px){
img{
width: 100%;
}
}
}
</style>
<style lang="scss" scoped> <style lang="scss" scoped>
.guide { .guide {
@include module-box; @include module-box;
...@@ -167,13 +181,18 @@ export default { ...@@ -167,13 +181,18 @@ export default {
margin: 30px 0; margin: 30px 0;
font-size: 14px; font-size: 14px;
.msg-title { .msg-title {
color: rgba(0, 121, 158, 1); color: #008dbd;
margin-bottom: 20px; margin-bottom: 20px;
&.actived {
color: #04408d;
}
} }
.paddingBottom10 { .paddingBottom10 {
padding-bottom: 10px; padding-bottom: 10px;
} }
img {
max-width: 100%;
}
p { p {
text-indent: 25px; text-indent: 25px;
font-size: 14px; font-size: 14px;
......
src/views/Business/Code3.vue
...@@ -124,8 +124,12 @@ export default { ...@@ -124,8 +124,12 @@ export default {
$route: { $route: {
handler(val) { handler(val) {
this.$nextTick(() => { this.$nextTick(() => {
Object.keys(this.$refs).forEach((key) => {
this.$refs[key].setAttribute("class", "msg-title");
});
const top = this.$refs[val.query.id].offsetTop; const top = this.$refs[val.query.id].offsetTop;
window.scrollTo(0, top); window.scrollTo(0, top);
this.$refs[val.query.id].setAttribute("class", "msg-title actived");
}); });
}, },
immediate: true, immediate: true,
...@@ -139,6 +143,15 @@ export default { ...@@ -139,6 +143,15 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss">
.guide{
@media screen and (max-width: 992px){
img{
width: 100%;
}
}
}
</style>
<style lang="scss" scoped> <style lang="scss" scoped>
.guide { .guide {
@include module-box; @include module-box;
...@@ -146,13 +159,18 @@ export default { ...@@ -146,13 +159,18 @@ export default {
margin: 30px 0; margin: 30px 0;
font-size: 14px; font-size: 14px;
.msg-title { .msg-title {
color: rgba(0, 121, 158, 1); color: #008dbd;
margin-bottom: 20px; margin-bottom: 20px;
&.actived {
color: #04408d;
}
} }
.paddingBottom10 { .paddingBottom10 {
padding-bottom: 10px; padding-bottom: 10px;
} }
img {
max-width: 100%;
}
p { p {
text-indent: 25px; text-indent: 25px;
font-size: 14px; font-size: 14px;
......
src/views/Business/Corppay.vue
...@@ -8,9 +8,8 @@ ...@@ -8,9 +8,8 @@
为贯彻落实国家“放管服”改革精神，切实减轻企业负担，中国物品编码中心决定，自2019年4月1日起，下调条码服务费标准如下： 为贯彻落实国家“放管服”改革精神，切实减轻企业负担，中国物品编码中心决定，自2019年4月1日起，下调条码服务费标准如下：
</p> </p>
</div> </div>
<p>
<a href="javascript:void('0')" name="1" ref="1">一次性加入费</a> <div class="msg-title" ref="1">一次性加入费</div>
</p>
<table class="table table-striped table-hover"> <table class="table table-striped table-hover">
<thead> <thead>
<tr> <tr>
...@@ -31,9 +30,7 @@ ...@@ -31,9 +30,7 @@
</table> </table>
</div> </div>
<div class="article-body"> <div class="article-body">
<p> <div class="msg-title" ref="2">胶片制作费</div>
<a href="javascript:void('0')" name="2" ref="2">胶片制作费</a>
</p>
<table class="table table-striped table-hover"> <table class="table table-striped table-hover">
<tbody> <tbody>
<tr> <tr>
...@@ -44,9 +41,7 @@ ...@@ -44,9 +41,7 @@
</table> </table>
</div> </div>
<div class="article-body"> <div class="article-body">
<p> <div class="msg-title" ref="3">系统维护费</div>
<a href="javascript:void('0')" name="3" ref="3">系统维护费</a>
</p>
<table class="table table-striped table-hover"> <table class="table table-striped table-hover">
<thead> <thead>
<tr> <tr>
...@@ -93,9 +88,7 @@ ...@@ -93,9 +88,7 @@
<cate :father="fwxmqdCate"></cate> <cate :father="fwxmqdCate"></cate>
<div class="corppay-msg container"> <div class="corppay-msg container">
<div class="article-body"> <div class="article-body">
<p> <div class="msg-title" ref="4">服务项目与服务内容</div>
<a href="javascript:void('0')" name="4" ref="4">服务项目与服务内容</a>
</p>
<p style="text-align: center; font-size: 18px; font-family: 微软雅黑"> <p style="text-align: center; font-size: 18px; font-family: 微软雅黑">
<b>中国商品条码系统成员服务项目与服务内容</b> <b>中国商品条码系统成员服务项目与服务内容</b>
</p> </p>
...@@ -181,8 +174,12 @@ export default { ...@@ -181,8 +174,12 @@ export default {
$route: { $route: {
handler(val) { handler(val) {
this.$nextTick(() => { this.$nextTick(() => {
Object.keys(this.$refs).forEach((key) => {
this.$refs[key].setAttribute("class", "msg-title");
});
const top = this.$refs[val.query.id].offsetTop; const top = this.$refs[val.query.id].offsetTop;
window.scrollTo(0, top); window.scrollTo(0, top);
this.$refs[val.query.id].setAttribute("class", "msg-title actived");
}); });
}, },
immediate: true, immediate: true,
...@@ -205,6 +202,13 @@ export default { ...@@ -205,6 +202,13 @@ export default {
.corppay-msg { .corppay-msg {
margin: 30px 0; margin: 30px 0;
font-size: 14px; font-size: 14px;
.msg-title {
color: #008dbd;
margin-bottom: 20px;
&.actived {
color: #04408d;
}
}
a { a {
color: #008dbd; color: #008dbd;
text-decoration: none; text-decoration: none;
......
src/views/Business/Fap.vue
...@@ -3,32 +3,24 @@ ...@@ -3,32 +3,24 @@
<cate :father="faqCate"></cate> <cate :father="faqCate"></cate>
<div class="container"> <div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist"> <ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation"> <li
class="nav-item"
role="presentation"
v-for="(tmp, i) in list"
:key="i"
>
<button <button
class="nav-link active" :class="['nav-link', { active: $route.query.id === tmp.type }]"
id="home-tab" :id="tmp.type + '-tab'"
data-bs-toggle="tab" data-bs-toggle="tab"
data-bs-target="#home" :data-bs-target="'#' + tmp.type"
type="button" type="button"
role="tab" role="tab"
aria-controls="home" :aria-controls="tmp.type"
aria-selected="true" aria-selected="true"
@click="jump(i)"
> >
全部问题 {{ tmp.name }}
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="profile-tab"
data-bs-toggle="tab"
data-bs-target="#profile"
type="button"
role="tab"
aria-controls="profile"
aria-selected="false"
>
业务办理
</button> </button>
</li> </li>
</ul> </ul>
...@@ -39,21 +31,18 @@ ...@@ -39,21 +31,18 @@
</div> </div>
<div class="tab-content" id="myTabContent"> <div class="tab-content" id="myTabContent">
<div <div
class="tab-pane fade show active" v-for="(tmp, i) in list"
id="home" :key="i"
:class="[
'tab-pane',
'fade',
{ 'show active': $route.query.id === tmp.type },
]"
:id="tmp.type"
role="tabpanel" role="tabpanel"
aria-labelledby="home-tab" :aria-labelledby="tmp.type + '-tab'"
> >
<faqTable /> <faqTable :list="tmp.data" />
<pages />
</div>
<div
class="tab-pane fade"
id="profile"
role="tabpanel"
aria-labelledby="profile-tab"
>
<faqTable />
<pages /> <pages />
</div> </div>
</div> </div>
...@@ -80,8 +69,117 @@ export default { ...@@ -80,8 +69,117 @@ export default {
search: { search: {
keywords: "", keywords: "",
}, },
list: [
{
type: "qbwt",
name: "全部问题",
link: "/Business/Guide8",
active: "qbwt",
data: [
{
name: "企业申请注册厂商识别代码是否必须到中国物品编码中心总部办理?",
type: "业务办理",
},
],
},
{
type: "ywbl",
name: "业务办理",
link: "/Business/Guide8",
active: "ywbl",
data: [
{
name: "企业申请注册厂商识别代码是否必须到中国物品编码中心总部办理?",
type: "业务办理",
},
],
},
{
type: "cpxxtb",
name: "产品信息通报",
link: "/Business/Guide8",
active: "cpxxtb",
data: [
{
name: "企业申请注册厂商识别代码后，中国物品编码中心会发放哪些材料?",
type: "业务办理",
},
],
},
{
type: "bmjs",
name: "编码技术",
link: "/Business/Guide8",
active: "bmjs",
data: [
{
name: "编码技术?",
type: "业务办理",
},
],
},
{
type: "fgybz",
name: "法规与标准",
link: "/Business/Guide8",
active: "fgybz",
data: [
{
name: "法规与标准标题?",
type: "业务办理",
},
],
},
{
type: "tmzl",
name: "条码质量",
link: "/Business/Guide8",
active: "tmzl",
data: [
{
name: "条码质量标题?",
type: "业务办理",
},
],
},
{
type: "tmjsyy",
name: "条码技术应用",
link: "/Business/Guide8",
active: "tmjsyy",
data: [
{
name: "条码技术应用标题?",
type: "业务办理",
},
],
},
{
type: "other",
name: "其他",
link: "/Business/Guide8",
active: "other",
data: [
{
name: "其他标题?",
type: "业务办理",
},
],
},
],
}; };
}, },
methods: {
jump(i) {
// console.log(i);
this.$router.push({
path: this.list[i].link,
query: {
id: this.list[i].active,
},
});
},
},
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
......
src/views/Business/FoodSafety.vue 0 → 100644
<template>
<div class="row">
<div class="col-lg-8">
<div class="register marginTopLg20">
<div class="register-top register-cont">
<div class="container">
<Title :father="FoodSafety.title1"></Title>
<p>
<strong>一、为什么要追溯？</strong>
</p>
<p>
近年来国内外食品安全事件不断发生，引起政府、企业和消费者的共同关注。这不仅影响中国制造食品的形象，加重国际贸易中的不信任感，也使消费者成为最直接的受害者，引发食品质量信任危机，同时，对国家形象、行业和企业的发展也带来了严重影响。
</p>
<p>
<strong>二、怎么开展追溯？</strong>
</p>
<p>
自2000年开始，中国物品编码中心在国内外率先开展国内外的追溯政策、法规和标准的技术跟踪与研究，并把追溯概念引入中国，经过十几年的努力，在标准制定、项目建设、应用推广等方面都取得了一定的成绩，承担了《重要产品追溯
追溯码编码规范》等多个追溯国家标准和行业标准的制订工作，建成国家食品（产品）安全追溯平台，开展对外追溯合作，有效地推进了我国追溯体系建设的完善。
</p>
<p>
该平台可为企业提供企业资质信息管理、供应商信息管理、销售商信息管理、原辅料追溯管理、生产记录追溯管理、关键控制点管理、检验报告信息管理、订单追溯管理、预警召回管理等追溯功能。追溯平台基于全球统一标识系统（GS1）建设，因此追溯具有唯一性、通用性、成本低、便捷性、灵活性等特点。
</p>
<p>
国家食品（产品）安全追溯平台是国家发改委确定的重点食品质量安全追溯物联网应用示范工程，由原国家质量监督检验检疫总局（现国家市场监督管理总局）组织实施、中国物品编码中心建设。追溯平台采用模板技术对追溯单元、追溯事件进行自定义，实现对不同类别产品各个阶段的完整追溯，并依托“云”技术接收全国31个省级平台的追溯与监管数据，是我国产品追溯大数据系统。目前，已经实现了9500多万种产品的主体追溯，10000多家企业的产品过程追溯。
</p>
<p>
<strong>三、基于GS1标准（商品条码）的追溯技术</strong>
</p>
<p>
当前全球供应链长且复杂，全供应链追溯面临诸多挑战，为了实现端到端的全供应链追溯，不同追溯系统之间必须具有互操作性。GS1标准作为全球通用的商务语言，用于自动准确的标识，采集和共享信息，从而确保产品、服务和信息每天在世界各地的供应链中高效安全的移动，为互操作性提供了基础。目前GS1标准已在全球150多个国家和地区的200多万家企业成功应用40多年，全球有60多个国家和地区采用GS1标准进行追溯。
</p>
<p>
GS1
作为国际非营利的标准化组织，自2000年左右便开始研究如何采用全球统一的编码标识体系GS1标准来帮助企业建立有效的追溯体系，以满足政府合规的要求、商业需求和自身管理的需求等。截至目前，GS1
已经制订了《GS1全球追溯标准》和《GS1全球追溯关键控制点和一致性准则》等标准，制订了生鲜果蔬、肉禽和鱼类等行业追溯指南，为政府和企业建立追溯体系提供了借鉴。
</p>
<p>
基于GS1标准的追溯技术，是采用GS1标准对追溯对象、追溯参与方和位置等进行编码和标识，并通过GDSN（全球数据同步）、EDI（电子数据交换），EPCIS（产品电子代码信息服务）等实现主数据、交易数据和物理事件数据的交换。一旦出现食品安全问题，能够快速准确查出食品问题出现的环节，直至追溯到生产源头，从而确保食品撤回和召回的高效性和准确性。为政府产品质量监管提供有效手段，最大限度地降低企业的损失，保护消费者利益。
</p>
<p>
<strong>四、怎样开始追溯工作？</strong>
</p>
<p>第一步：用户持条码卡登录国家食品（产品）安全追溯平台</p>
<p>第二步：下载并阅读相关操作手册</p>
<p>第三步：开始记录产品原料使用、生产加工、销售流向等追溯数据</p>
<p>
<strong>五、跳转链接</strong>
</p>
<p>
国家食品（产品）安全追溯平台：<a
target="_blank"
href="http://www.chinatrace.org"
>http://www.chinatrace.org</a
>
</p>
</div>
</div>
<div class="register-bottom register-cont" v-if="false">
<cate :father="zxcxgjCate"></cate>
<div class="row zxcxgj-ul">
<div class="col-lg-4" v-for="(tmp, i) in zxcxgjList" :key="i">
<img :src="tmp.ico" alt="" class="zxcxgj-img" />
<div class="zxcxgj-bt">{{ tmp.name }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<tmgg class="marginTopLg20" />
<bgxz class="marginTop20" />
<dffzjg class="marginTop20" />
<zcfg class="marginTop20" />
</div>
</div>
</template>
<script>
import tmgg from "./copms/tmgg.vue";
import bgxz from "./copms/bgxz.vue";
import dffzjg from "./copms/dffzjg.vue";
import zcfg from "./copms/zcfg.vue";
import Title from "../comps/title.vue";
export default {
components: {
Title,
tmgg,
dffzjg,
bgxz,
zcfg,
},
data() {
return {
FoodSafety: {
title1: {
name: "我要追溯",
},
},
zxcxgjList: [
{
ico: require("../../assets/image/business/icon_tiaomaxinxichaxun.png"),
name: "条码信息查询",
},
{
ico: require("../../assets/image/business/icon_zixingche.png"),
name: "自行车企业代码公告查询",
},
{
ico: require("../../assets/image/business/icon_tiaomashuyuchaxun.png"),
name: "条码术语查询",
},
{
ico: require("../../assets/image/business/ico_xiaoyanma.png"),
name: "校验码计算工具",
},
{
ico: require("../../assets/image/business/icon_guojia.png"),
name: "国家及地区前缀码查询",
},
],
zxcxgjCate: {
name: "在线查询工具",
ico: require("../../assets/image/business/icon_gongju.png"),
},
};
},
};
</script>
<style lang="scss" scoped>
.register {
.register-cont {
@include module-box;
p {
text-indent: 28px;
font-size: 14px;
line-height: 24px;
}
a {
color: #008dbd;
text-decoration: none;
}
}
.register-top {
padding: 20px 0;
.zxzc-btn {
height: 44px;
line-height: 44px;
background: #f26335;
border-radius: 4px;
color: #ffffff;
font-size: 14px;
text-align: center;
}
.barcode-register {
width: 100%;
margin-top: 20px;
}
}
.register-bottom {
margin-top: 20px;
.zxcxgj-ul {
padding: 12.5px 0;
> div {
margin: 12.5px 0;
text-align: center;
.zxcxgj-img {
margin-bottom: 13px;
}
.zxcxgj-bt {
color: #0e2c6b;
font-size: 14px;
}
}
}
}
}
</style>
\ No newline at end of file
src/views/Business/Guide8.vue deleted 100644 → 0
<template>
<div class="guide">
<cate :father="czznCate"></cate>
<div class="guide-msg container">
<div class="msg-title">1第一步：为不同的商品项目编制不同的商品标</div>
<div class="msg-cont">
<p>
在我国，零售商品的标识代码主要采用三种数据结构，即GTIN-13、GTIN-8和GTIN-12。通常情况下，选用13位的数字代码结构用EAN-13条码表示。只有当产品出口到北美地区并且客户指定时，才申请使用UCC-12代码（用UPC条码表示）。中国厂商如需申请UPC商品条码，须经中国物品编码中心统一办理。GTIN-13和GTIN-8的结构分别如图1、图2、图3所示。
</p>
<p>1）GTIN-13的数据结构</p>
<p>（1）当前缀码为690、691时，EAN/UCC-13的代码结构如图1所示。</p>
<p>EAN/UCC-13代码结构一 </p>
<p>（2）当前缀码为692、693时，EAN/UCC-13的代码结构如图2所示。</p>
<p>EAN/UCC-13代码结构二</p>
<p>A、厂商识别代码 厂商识别代码是由中国物品编码中心统一向申请厂商分配。厂商识别代码左起三位由国际物品编码协会分配给中国物品编码中心的前缀码。</p>
<p>B、商品项目代码 商品项目代码由厂商根据有关规定自行分配。</p>
<p>C、校验位 用来校验其他代码编码的正误。它有固定的计算方法，参见GB 12904附录。</p>
<p>2）EAN/UCC-8的代码结构如图3所示。</p>
<p>EAN/UCC-8代码结构</p>
<p>A、商品项目识别代码&nbsp;&nbsp;是EAN编码组织在EAN分配的前缀码（X8X7X6）的基础上分配给厂商特定商品项目的代码。为了保证代码的惟一性，商品项目识别代码须由中国物品编码中心统一分配。</p>
<p>B、校验位&nbsp;&nbsp;用来校验其他代码编码的正误。它有固定的计算方法，参见GB 12904附录。</p>
<p>在编制贸易项目的商品标识代码时，应遵守以下基本原则：</p>
<p>(1)惟一性&nbsp;&nbsp;惟一性原则是商品编码的基本原则。是指同一商品项目应分配相同的标识代码，不同的商品项目必须分配不同的标识代码。不同商品名称、商标、种类、规格、数量、包装类型的商品应视为不同的商品项目，必须编制不同的标识代码，以保证编码的惟一性。</p>
<p>(2)稳定性&nbsp;&nbsp;稳定性原则是指商品标识代码一旦分配，只要商品的基本特征没有发生变化，就应保持不变。同一商品项目，无论是长期连续生产、还是间断式生产，都必须采用相同的标识代码。即使该商品项目停止生产，其标识代码应至少在4年之内不能用于其他商品项目上。另外，即便商品已不在供应链中流通，由于要保存历史纪录，需要在数据库中较长期地保留他的标识代码，因此，在重新启用商品标识代码时，还需要考虑此因素。</p>
<p>(3)无含义&nbsp;&nbsp;无含义原则是指商品标识代码中的每一位数字不表示任何与商品有关的特定信息。有含义的编码，通常会导致编码容量的损失。厂商在编制商品项目代码时，最好使用无含义的流水号，即连续号。这样能够最大限度利用商品项目代码的编码容量。 假设分配给某企业的厂商识别代码为6901234，表1给出了其部分产品标识代码的编码方案。 B、校验位 用来校验其他代码编码的正误。它有固定的计算方法，参见GB 12904附录。 在编制贸易项目的商品标识代码时，应遵守以下基本原则： (1)惟一性 惟一性原则是商品编码的基本原则。是指同一商品项目应分配相同的标识代码，不同的商品项目必须分配不同的标识代码。不同商品名称、商标、种类、规格、数量、包装类型的商品应视为不同的商品项目，必须编制不同的标识代码，以保证编码的惟一性。 (2)稳定性 稳定性原则是指商品标识代码一旦分配，只要商品的基本特征没有发生变化，就应保持不变。同一商品项目，无论是长期连续生产、还是间断式生产，都必须采用相同的标识代码。即使该商品项目停止生产，其标识代码应至少在4年之内不能用于其他商品项目上。另外，即便商品已不在供应链中流通，由于要保存历史纪录，需要在数据库中较长期地保留他的标识代码，因此，在重新启用商品标识代码时，还需要考虑此因素。 (3)无含义 无含义原则是指商品标识代码中的每一位数字不表示任何与商品有关的特定信息。有含义的编码，通常会导致编码容量的损失。厂商在编制商品项目代码时，最好使用无含义的流水号，即连续号。这样能够最大限度利用商品项目代码的编码容量。</p>
<p>假设分配给某企业的厂商识别代码为6901234，表1给出了其部分产品标识代码的编码方案。</p>
</div>
</div>
</div>
</template>
<script>
import cate from "../comps/cate.vue";
export default {
components: {
cate,
},
data() {
return {
czznCate: {
name: "操作指南",
ico: "",
},
};
},
};
</script>
<style lang="scss" scoped>
.guide {
@include module-box;
.guide-msg {
margin: 30px 0;
font-size: 14px;
.msg-title {
color: rgba(0, 121, 158, 1);
margin-bottom: 20px;
}
.msg-cont {
line-height: 23px;
color: rgba(102, 102, 102, 1);
}
}
}
</style>
\ No newline at end of file
src/views/Business/copms/table.vue
...@@ -6,14 +6,19 @@ ...@@ -6,14 +6,19 @@
<div class="col-lg-2">类型</div> <div class="col-lg-2">类型</div>
</div> </div>
<div class="fqtbody "> <div class="fqtbody ">
<div class="row" v-for="(tmp, i) in 10" :key="i"> <div class="row" v-for="(tmp, i) in list" :key="i">
<div class="col-lg-2">{{i+1}}</div> <div class="col-lg-2">{{i+1}}</div>
<div class="col-lg-8">企业申请注册厂商识别代码是否必须到中国物品编码中心总部办理?</div> <div class="col-lg-8">{{tmp.name}}</div>
<div class="col-lg-2">业务办理</div> <div class="col-lg-2">{{tmp.type}}</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script>
export default {
props: ['list']
}
</script>
<style lang="scss" scoped> <style lang="scss" scoped>
.fqtable { .fqtable {
.fqthead { .fqthead {
......
src/views/Business/index.vue
...@@ -306,49 +306,49 @@ export default { ...@@ -306,49 +306,49 @@ export default {
name: "1.业务办理", name: "1.业务办理",
path: "/Business/Guide8", path: "/Business/Guide8",
active: "", active: "",
id: "8-1", id: "ywbl",
noneChild: true, noneChild: true,
}, },
{ {
name: "2.产品信息通报", name: "2.产品信息通报",
path: "/Business/Guide8", path: "/Business/Guide8",
active: "", active: "",
id: "8-2", id: "cpxxtb",
noneChild: true, noneChild: true,
}, },
{ {
name: "3.编码技术", name: "3.编码技术",
path: "/Business/Guide8", path: "/Business/Guide8",
active: "", active: "",
id: "8-3", id: "bmjs",
noneChild: true, noneChild: true,
}, },
{ {
name: "4.法规与标准", name: "4.法规与标准",
path: "/Business/Guide8", path: "/Business/Guide8",
active: "", active: "",
id: "8-4", id: "fgybz",
noneChild: true, noneChild: true,
}, },
{ {
name: "5.条码质量", name: "5.条码质量",
path: "/Business/Guide8", path: "/Business/Guide8",
active: "", active: "",
id: "8-5", id: "tmzl",
noneChild: true, noneChild: true,
}, },
{ {
name: "6.条码技术应用", name: "6.条码技术应用",
path: "/Business/Guide8", path: "/Business/Guide8",
active: "", active: "",
id: "8-6", id: "tmjsyy",
noneChild: true, noneChild: true,
}, },
{ {
name: "7.其他", name: "7.其他",
path: "/Business/Guide8", path: "/Business/Guide8",
active: "", active: "",
id: "8-7", id: "other",
noneChild: true, noneChild: true,
}, },
], ],
...@@ -551,17 +551,18 @@ export default { ...@@ -551,17 +551,18 @@ export default {
}, },
{ {
name: "我要追溯", name: "我要追溯",
path: "", path: "/Business/FoodSafety",
active: "", active: "FoodSafety",
}, },
{ {
name: "条码微站", name: "条码微站",
path: "", path: "/Business/BarcodeV",
active: "", active: "BarcodeV",
}, },
{ {
name: "条码商桥", name: "条码商桥",
path: "", path: "http://so.anccnet.com/Home/Login",
type: 'link',
active: "", active: "",
}, },
], ],
......
src/views/comps/cate.vue
<template> <template>
<div class="zxcxgj-cate"> <div class="zxcxgj-cate">
<div class="container"><img :src="father.ico" v-if="father.ico" />{{ father.name }}</div> <div class="container">
<div class="cate-left">
<img :src="father.ico" v-if="father.ico" />{{ father.name }}
</div>
<div class="cate-right">
<slot v-solt="right"></slot>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
...@@ -14,9 +21,13 @@ export default { ...@@ -14,9 +21,13 @@ export default {
color: #04408d; color: #04408d;
border-bottom: 1px solid #c5d8ee; border-bottom: 1px solid #c5d8ee;
padding: 14px 0; padding: 14px 0;
div { >div {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
.cate-left{
flex: 1;
}
} }
img { img {
margin-right: 9px; margin-right: 9px;
......
src/views/comps/left2.vue
...@@ -56,11 +56,20 @@ export default { ...@@ -56,11 +56,20 @@ export default {
return this.$route.name; return this.$route.name;
}, },
}, },
watch: {
$route: {
handler() {
this.defaultOpeneds = [];
this.list.forEach((el, index) => {
this.defaultOpeneds.push(String(index + 1));
});
console.log(this.defaultOpeneds, "this.defaultOpeneds");
},
immediate: true,
},
},
created() { created() {
// console.log(this.$route.query.id, "获取当前路由地址"); // console.log(this.$route.query.id, "获取当前路由地址");
this.list.forEach((el, index) => {
this.defaultOpeneds.push(String(index + 1));
});
}, },
methods: { methods: {
// 路由跳转 // 路由跳转
...@@ -82,7 +91,7 @@ export default { ...@@ -82,7 +91,7 @@ export default {
} else { } else {
path = el.path; path = el.path;
} }
console.log(path, 'path'); console.log(path, "path");
this.$router.push({ this.$router.push({
path: path, path: path,
query: { query: {
......
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