Skip to content

G
gs1
Commit fd1952e9 by 林家欣
Options

业务大厅下我要续展、我要编码切图完成

parent a52ade98
Showing with 1037 additions and 87 deletions
src/components/layout/header/mock.js
......@@ -256,6 +256,50 @@ export const nav = [
{ name: "我还不是系统成员", path: "/Business/Register" },
{ name: "条码注销公告" },
],
},
{
id: uuid("gs_nav"),
name: "我要续展",
index: 2,
link: "/Business/Renewal",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "我还不是系统成员", path: "/Business/Register" },
{ name: "我要续展" },
],
},
{
id: uuid("gs_nav"),
name: "零售商品",
index: 2,
link: "/Business/Code1",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "我还不是系统成员", path: "/Business/Register" },
{ name: "零售商品" },
],
},
{
id: uuid("gs_nav"),
name: "非零售商品",
index: 2,
link: "/Business/Code2",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "我还不是系统成员", path: "/Business/Register" },
{ name: "非零售商品" },
],
},
{
id: uuid("gs_nav"),
name: "物流单元",
index: 2,
link: "/Business/Code3",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "我还不是系统成员", path: "/Business/Register" },
{ name: "物流单元" },
],
}
],
}
......
src/router/index.js
......@@ -222,12 +222,36 @@ const routes = [
redirect: '/Service/Training',
},
{
path: "/Business/Code",
name: "Code",
path: "/Business/Renewal",
name: "Renewal",
meta: {
name: "我要编码",
name: "我要续展",
},
component: () => import("@/views/Business/Code.vue"),
component: () => import("@/views/Business/Renewal.vue"),
},
{
path: "/Business/Code1",
name: "Code1",
meta: {
name: "零售商品",
},
component: () => import("@/views/Business/Code1.vue"),
},
{
path: "/Business/Code2",
name: "Code2",
meta: {
name: "非零售商品",
},
component: () => import("@/views/Business/Code2.vue"),
},
{
path: "/Business/Code3",
name: "Code3",
meta: {
name: "物流单元",
},
component: () => import("@/views/Business/Code3.vue"),
},
{
path: "/Business/Fap",
......
src/views/Business/Code.vue deleted 100644 → 0
<template>
<div class="guide">
<cate :father="lsspCate"></cate>
<div class="guide-msg container">
<div class="msg-title">第一步：为不同的商品项目编制不同的商品标</div>
<div class="msg-cont">
在我国，零售商品的标识代码主要采用三种数据结构，即GTIN-13、GTIN-8和GTIN-12。通常情况下，选用13位的数字代码结构用EAN-13条码表示。只有当产品出口到北美地区并且客户指定时，才申请使用UCC-12代码（用UPC条码表示）。中国厂商如需申请UPC商品条码，须经中国物品编码中心统一办理。GTIN-13和GTIN-8的结构分别如图1、图2、图3所示。
1）GTIN-13的数据结构
（1）当前缀码为690、691时，EAN/UCC-13的代码结构如图1所示。
EAN/UCC-13代码结构一
（2）当前缀码为692、693时，EAN/UCC-13的代码结构如图2所示。
EAN/UCC-13代码结构二 A、厂商识别代码
厂商识别代码是由中国物品编码中心统一向申请厂商分配。厂商识别代码左起三位由国际物品编码协会分配给中国物品编码中心的前缀码。
B、商品项目代码 商品项目代码由厂商根据有关规定自行分配。 C、校验位
用来校验其他代码编码的正误。它有固定的计算方法，参见GB 12904附录。
2）EAN/UCC-8的代码结构如图3所示。 EAN/UCC-8代码结构
</div>
</div>
</div>
</template>
<script>
import cate from "../comps/cate.vue";
export default {
components: {
cate,
},
data() {
return {
lsspCate: {
name: "零售商品",
ico: "",
},
};
},
};
</script>
<style lang="scss">
.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/Code1.vue 0 → 100644
<template>
<div class="guide">
<cate :father="lsspCate"></cate>
<div class="guide-msg container">
<div class="msg-title" ref="1-1">第一步：为不同的商品项目编制不同的商品标</div>
<p class="paddingBottom10">
在我国，零售商品的标识代码主要采用三种数据结构，即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>
<div style="text-align: center">
<img
src="../../assets/image/business/bianmatu1.jpg"
alt="EAN/UCC-13代码结构一"
class="img-responsive"
/>
</div>
<p>（2）当前缀码为692、693时，EAN/UCC-13的代码结构如图2所示。</p>
<div style="text-align: center">
<img
src="../../assets/image/business/bianmatu2.jpg"
alt="EAN/UCC-13代码结构二"
class="img-responsive"
/>
</div>
<p>
A、<b>厂商识别代码</b>&nbsp;&nbsp;&nbsp;&nbsp;厂商识别代码是由中国物品编码中心统一向申请厂商分配。厂商识别代码左起三位由国际物品编码协会分配给中国物品编码中心的前缀码。
</p>
<p>
B、<b>商品项目代码</b>&nbsp;&nbsp;&nbsp;&nbsp;商品项目代码由厂商根据有关规定自行分配。
</p>
<p>
C、<b>校验位</b>&nbsp;&nbsp;&nbsp;&nbsp;用来校验其他代码编码的正误。它有固定的计算方法，参见GB
12904附录。
</p>
<p>2）EAN/UCC-8的代码结构如图3所示。</p>
<div style="text-align: center">
<img
src="../../assets/image/business/bianmatu3.jpg"
alt="EAN/UCC-8代码结构"
class="img-responsive"
/>
</div>
<p>
A、<b>商品项目识别代码</b>&nbsp;&nbsp;&nbsp;&nbsp;是EAN编码组织在EAN分配的前缀码（X8X7X6）的基础上分配给厂商特定商品项目的代码。为了保证代码的惟一性，商品项目识别代码须由中国物品编码中心统一分配。
</p>
<p>
B、<b>校验位</b>&nbsp;&nbsp;&nbsp;&nbsp;用来校验其他代码编码的正误。它有固定的计算方法，参见GB
12904附录。
</p>
<p>在编制贸易项目的商品标识代码时，应遵守以下基本原则：</p>
<p>
(1)<b>惟一性</b>&nbsp;&nbsp;&nbsp;&nbsp;惟一性原则是商品编码的基本原则。是指同一商品项目应分配相同的标识代码，不同的商品项目必须分配不同的标识代码。不同商品名称、商标、种类、规格、数量、包装类型的商品应视为不同的商品项目，必须编制不同的标识代码，以保证编码的惟一性。
</p>
<p>
(2)<b>稳定性</b>&nbsp;&nbsp;&nbsp;&nbsp;稳定性原则是指商品标识代码一旦分配，只要商品的基本特征没有发生变化，就应保持不变。同一商品项目，无论是长期连续生产、还是间断式生产，都必须采用相同的标识代码。即使该商品项目停止生产，其标识代码应至少在4年之内不能用于其他商品项目上。另外，即便商品已不在供应链中流通，由于要保存历史纪录，需要在数据库中较长期地保留他的标识代码，因此，在重新启用商品标识代码时，还需要考虑此因素。
</p>
<p>
(3)<b>无含义</b>&nbsp;&nbsp;&nbsp;&nbsp;无含义原则是指商品标识代码中的每一位数字不表示任何与商品有关的特定信息。有含义的编码，通常会导致编码容量的损失。厂商在编制商品项目代码时，最好使用无含义的流水号，即连续号。这样能够最大限度利用商品项目代码的编码容量。
</p>
<p>
假设分配给某企业的厂商识别代码为6901234，表1给出了其部分产品标识代码的编码方案。
</p>
<div style="text-align: center">
<img
src="../../assets/image/business/bianmabiao1.jpg"
alt="商品标识代码的编码示例"
class="img-responsive"
/>
</div>
<p>根据表1所示可知：</p>
<p>
(1)商品品种不同应编制不同的商品项目代码。如：清凉油与风油精是不同的商品品种，所以其商品项目代码不同。
</p>
<p>
(2)即使是同一企业生产的同一品种的商品，如果商标不同，也应编制不同的商品项目代码。如：天坛牌风油精与龙虎牌风油精，二者商标不同，所以应编制不同的商品项目代码。
</p>
<p>
(3)商标相同、品种相同，如果剂型不同，商品项目代码也应不同。如：天坛牌清凉油，搽剂与吸剂的商品项目代码不同。
</p>
<p>
(4)品种、商标、剂型都相同的商品，如果商品规格或包装规格不同，也应编制不同的商品项目代码。如：天坛牌清凉油棕色固体搽剂中，3.5g/盒与19g/盒、3.5g/盒与3.5g/袋，其商品项目代码各不相同；ROYAL
BALMTM清凉油，18.4g/瓶的运动型棕色强力装与原始型关节白色装的商品项目代码也不相同。
</p>
<p>
(5)
对于组合包装的商品，如龙虎牌家友组合，也应分配一个独立的商品项目代码。如果其包装内的风油精与清凉鼻舒也有单卖的产品，则风油精、清凉鼻舒以及二者组合包装后的产品应分别编制不同的商品项目代码。
</p>
<div class="msg-title" ref="1-2">第二步：选择相应的条码符号</div>
<p class="paddingBottom10">
在我国，零售商品选用EAN/UPC商品条码来表示。EAN/UPC商品条码包括EAN商品条码（EAN-13和EAN-8）和UPC商品条码（UPC-A和UPC-E）。EAN-13和EAN-8条码如图4所示。UPC商品条码是UCC-12标识代码的条码符号表示，具体见GB
12904-2003。
</p>
<div style="text-align: center">
<img
src="../../assets/image/business/bianmatu4.jpg"
alt="EAN条码"
class="img-responsive"
/>
</div>
<p>
EAN-13商品条码又称标准版商品条码，表示EAN/UCC-13代码。EAN-8商品条码也称缩短版商品条码，表示EAN/UCC-8代码。
</p>
<p>
在通常情况下，用户应尽量选用EAN商品条码，尤其是选用EAN-13条码。但在以下几种情况下，可采用EAN-8条码。
</p>
<p>
——EAN-13商品条码的印刷面积超过印刷标签最大面面积的四分之一或全部可印刷面积的八分之一时；
</p>
<p>——印刷标签的最大面面积小于40cm2或全部可印刷面积小于80cm2时；</p>
<p>——产品本身是直径小于3cm的圆柱体。</p>
<p>一个完整的EAN-13商品条码如图5所示。</p>
<div style="text-align: center">
<img
src="../../assets/image/business/bianmatu5.jpg"
alt="EAN-13商品条码示例"
class="img-responsive"
/>
</div>
<div class="msg-title" ref="1-3">第三步：条码符号的设计</div>
<p class="paddingBottom10">
EAN/UPC条码符号的放大系数一般在0.80～2.00的范围内选择。条码符号随放大系数的变化而放大或缩小。具体尺寸要求见GB
12904-2003。当放大系数为1.00时，EAN-13与EAN-8商品条码的主要尺寸如图6、图7所示。
</p>
<div style="text-align: center">
<img
src="../../assets/image/business/bianmatu6.jpg"
alt="EAN-13商品条码符号尺寸示意图（放大系数为1.00）"
class="img-responsive"
/>
</div>
<p>
条码左右侧空白区的宽度尺寸随放大系数的变化而变化。当放大系数为1.00时，EAN-13商品条码的左右侧空白区最小宽度尺寸分别为3.63mm和2.31mm；EAN-8商品条码的左右侧空白区最小宽度尺寸均为2.31mm；如图6、图7所示。左右侧空白区的宽度对条码的成功识读有着重要的意义，因此，其宽度尺寸要求是衡量条码符号质量的主要参数之一。
</p>
<p>
条空颜色搭配是指条码中条色与衬底空色的组合搭配。条码是使用专用识读设备依靠分辨条空的边界和宽窄来实现的，因此，要求条与空的颜色反差越大越好。一般来说，白色作底，黑色作条是最理想的颜色搭配。表2中所示的颜色组配方案仅供条码符号设计者参考使用。条空颜色搭配最终应满足GB
12904-2003的相关要求。
</p>
<div style="text-align: center">
<img
src="../../assets/image/business/bianmabiao2.jpg"
alt="条码符号条空颜色搭配参考表"
class="img-responsive"
/>
</div>
<p>
零售商品条码位置的选择应以符号位置相对统一、符号不易变形、便于扫描操作和识读为准则。首选的条码符号位置宜在商品包装背面的右侧下半区域内。
</p>
<div style="text-align: center">
<img
src="../../assets/image/business/bianmatu8.jpg"
alt="箱型包装示例"
class="img-responsive"
/>
</div>
<div style="text-align: center">
<img
src="../../assets/image/business/bianmatu9.jpg"
alt="瓶型和壶型包装示例"
class="img-responsive"
/>
</div>
<div style="text-align: center">
<img
src="../../assets/image/business/bianmatu10.jpg"
alt="通型和盆型包装示例"
class="img-responsive"
/>
</div>
<div style="text-align: center">
<img
src="../../assets/image/business/bianmatu11.jpg"
alt="袋型包装示例"
class="img-responsive"
/>
</div>
<div style="text-align: center">
<img
src="../../assets/image/business/bianmatu12.jpg"
alt="托盘式包装示例"
class="img-responsive"
/>
</div>
<p>
对一些无包装的商品，商品条码符号可以印在挂签上，如果商品有较平整的表面且允许粘贴或缝上标签，条码符号可以印在标签上，见图13。
</p>
<div style="text-align: center">
<img
src="../../assets/image/business/bianmatu13.jpg"
alt="挂签和标签示例"
class="img-responsive"
/>
</div>
<div class="msg-title" ref="1-4">第四步：条码符号的印制</div>
<p class="paddingBottom10">
EAN/UPC条码符号质量合格是POS商店实现商品准确、快速扫描结算的先决条件，条码符号质量的好坏直接关系到制造商、销售商和印刷企业等三方利益。为保证条码的印刷质量，中国物品编码中心及其分支机构开展了条码原版胶片制作服务和印刷企业商品条码的印刷资格认定工作。企业可以根据自己的实际情况到编码中心或其分支机构定制条码原版胶片，并到获得商品条码印刷资质的印刷企业印制条码。中国物品编码中心及其分支机构还为成员企业提供条码符号质量检验服务。以避免企业发生不必要的经济损失。
</p>
</div>
</div>
</template>
<script>
import cate from "../comps/cate.vue";
export default {
components: {
cate,
},
data() {
return {
lsspCate: {
name: "零售商品",
ico: "",
},
};
},
watch: {
$route: {
handler(val) {
this.$nextTick(() => {
const top = this.$refs[val.query.id].offsetTop;
window.scrollTo(0, top);
});
},
immediate: true,
},
},
mounted() {
setTimeout(() => {
const top = this.$refs[this.$route.query.id].offsetTop;
window.scrollTo(0, top);
}, 100);
},
};
</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;
}
.paddingBottom10 {
padding-bottom: 10px;
}
p {
text-indent: 25px;
font-size: 14px;
}
}
}
</style>
\ No newline at end of file
src/views/Business/Code2.vue 0 → 100644
<template>
<div class="guide">
<cate :father="flsspCate"></cate>
<div class="guide-msg container">
<div class="msg-title" ref="2-1">第一步：非零售商品的标识代码</div>
<p class="paddingBottom10">
非零售商品，主要是指不通过POS扫描结算的用于配送、仓储或批发等操作的商品。一个装有24条香烟的纸箱、一个装有40箱香烟的托盘都可以作为一个非零售商品进行批发、配送。
</p>
<p>
非零售商品的标识代码可以采用EAN/UCC-13或EAN/UCC-14结构，如图14所示。用户可以根据实际需要进行选择。
</p>
<div style="text-align: center">
<img
src="../../assets/image/business/bianmatu14.jpg"
alt="标识非零售商品的GTIN的两种结构"
class="img-responsive"
/>
</div>
<p>说明：</p>
<p>
（1）指示符只在EAN/UCC-14中使用，赋值区间为1-9，其中1-8用于定量贸易项目，9用于变量贸易项目。最简单的编码方法是随包装级别的依次增大而从小到大依次分配指示符的数值，即将1，2，3……，8依次分配给贸易单元的不同级别的包装组合。
</p>
<p>（2）厂商识别代码由中国物品编码中心分配。</p>
<p>（3）商品项目代码由企业分配。</p>
<p>（4）校验位由前12位数字计算而得。</p>
<p>不同包装类型的商品的代码选择方案如表3所示。</p>
<div style="text-align: center">
<img
src="../../assets/image/business/bianmabiao3.jpg"
alt="不同包装类型GTIN的分配方案"
class="img-responsive"
/>
</div>
<p>不同包装类型的商品标识代码的编码示例见图15：</p>
<div style="text-align: center">
<img
src="../../assets/image/business/bianmatu15.jpg"
alt="不同包装类型的商品标识代码的编码方法"
class="img-responsive"
/>
</div>
<div class="msg-title" ref="2-2">第二步：非零售商品的条码标识</div>
<p class="paddingBottom10">
非零售商品的条码标识有三种：如EAN/UPC条码、ITF-14条码和UCC/EAN-128条码。厂商可以根据实际情况选择不同的条码符号。以图15为例进行说明：
</p>
<p class="paddingBottom10">
1、当编码方案采用EAN/UCC-13代码时，条码标识可以选用EAN/UPC条码、ITF-14条码和UCC/EAN-128条码中的任意一种。
</p>
<p class="paddingBottom10">
（1）采用EAN/UPC条码表示。EAN/UPC条码既可以表示零售商品，也可以表示非零售商品。二者用法相同。
</p>
<div style="text-align: center">
<img
src="../../assets/image/business/bianma1.jpg"
alt=""
class="img-responsive"
/>
</div>
<p class="paddingBottom10">
（2）采用ITF-14条码表示。ITF-14条码只用于不经过POS扫描结算（可直接用于仓库）的非零售商品的包装上。该条码符号较适合直接印制于瓦楞纸或纤维板上。
</p>
<div style="text-align: center">
<img
src="../../assets/image/business/bianma2.jpg"
alt=""
class="img-responsive"
/>
</div>
<p class="paddingBottom10">
（3）采用UCC/EAN-128条码表示。UCC/EAN-128条码是ANCC全球统一标识系统中惟一可以用于表示附加信息的非定长条码符号，且应与应用标识符连用。
</p>
<div style="text-align: center">
<img
src="../../assets/image/business/bianma3.jpg"
alt=""
class="img-responsive"
/>
</div>
<p class="paddingBottom10">
2、当编码方案采用EAN/UCC-14代码时，条码标识可以选用ITF-14条码和UCC/EAN-128条码中的任意一种。
</p>
<p class="paddingBottom10">（1）采用EAN/UCC-14条码表示</p>
<div style="text-align: center">
<img
src="../../assets/image/business/bianma4.jpg"
alt=""
class="img-responsive"
/>
</div>
<p class="paddingBottom10">（2）采用UCC/EAN-128条码表示</p>
<div style="text-align: center">
<img
src="../../assets/image/business/bianma5.jpg"
alt=""
class="img-responsive"
/>
</div>
<div class="msg-title" ref="2-3">第三步：应用标识符的使用</div>
<p class="paddingBottom10">
当用户出于产品管理与跟踪的要求，需要对具体商品的附加信息，如生产日期、保质期、数量及批号等特征进行描述，应采用应用标识符。
</p>
<p class="paddingBottom10">
应用标识符（AI）是有2位或2位以上数字组成的字符，用于标识其后数据的含义和格式。如表4所示。
</p>
<div style="text-align: center">
<img
src="../../assets/image/business/bianmabiao4.jpg"
alt="应用标识符示例"
class="img-responsive"
/>
</div>
<p class="paddingBottom10">
附加信息代码的条码标识须采用UCC/EAN-128条码。图16表示了商品标识代码为169012360046，保质期至2005年1月1日，批号为ABC的非零售商品的条码符号示例。
</p>
<div style="text-align: center">
<img
src="../../assets/image/business/bianmatu16.jpg"
alt="应用标识符使用示例"
class="img-responsive"
/>
</div>
</div>
</div>
</template>
<script>
import cate from "../comps/cate.vue";
export default {
components: {
cate,
},
data() {
return {
flsspCate: {
name: "非零售商品",
ico: "",
},
};
},
watch: {
$route: {
handler(val) {
this.$nextTick(() => {
const top = this.$refs[val.query.id].offsetTop;
window.scrollTo(0, top);
});
},
immediate: true,
},
},
mounted() {
setTimeout(() => {
const top = this.$refs[this.$route.query.id].offsetTop;
window.scrollTo(0, top);
}, 100);
},
};
</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;
}
.paddingBottom10 {
padding-bottom: 10px;
}
p {
text-indent: 25px;
font-size: 14px;
}
}
}
</style>
\ No newline at end of file
src/views/Business/Code3.vue 0 → 100644
<template>
<div class="guide">
<cate :father="flsspCate"></cate>
<div class="guide-msg container">
<div class="msg-title" ref="3-1">第一步：物流单元的标识代码</div>
<p class="paddingBottom10">
物流单元是为了便于运输和仓储而建立的任何组合包装单元。在供应链中需要对其进行个体的跟踪与管理。一箱有不同颜色和和尺寸的12件裙子和20件夹克的组合包装，一个含有40箱饮料的托盘（每箱12盒装）都可以视为一个物流单元。
</p>
<p>1、物流单元的标识代码</p>
<p>
系列货运包装箱代码（SSCC）是物流单元的标识代码，用于表示物流单元的基本信息。SSCC对每一个特定的物流单元都是惟一的。结构如图17所示。
</p>
<div style="text-align: center">
<img
src="../../assets/image/business/bianmatu17.jpg"
alt="SSCC-18的代码结构"
class="img-responsive"
/>
</div>
<p>2、物流单元的附加信息码</p>
<p>
通常情况下，物流单元除了需要标明其标识代码SSCC外，还需要明示出一些其他的附加信息，如：运输目的地、物流包装重量、物流单元的长宽高尺寸等。在物流单元条码中，对这些属性信息的编码采用应用标识符AI+附加属性信息代码表示，并且属性数据与物流单元相关联，单独出现没有意义。部分常用应用标识符的数据格式见表5。
</p>
<div style="text-align: center">
<img
src="../../assets/image/business/bianmabiao5.jpg"
alt="应用标识符示例"
class="img-responsive"
/>
</div>
<p>注：</p>
<p>n表示数字。</p>
<p>a表示字母。</p>
<p>
例如：在批号或组号（10）的格式“n2+an…20”中“n2”表示该应用标识符（10）是2位的数字格式，“an…20”表示应用标识符（10）后跟数字或字母型代码，该代码是不定长格式，但最长不超过20位。
</p>
<p>
例如：在有效期（17）的格式“n2+n6”中，“n2”表示该应用标识符（17）是2位的数字格式，“n6”表示应用标识符（17）后跟定长的全数字型代码，代码长度为6位。
</p>
<div class="msg-title" ref="3-2">第二步：物流标签</div>
<p class="paddingBottom10">
物流标签是用于表示物流单元有关信息的条码符号标签。
</p>
<p class="paddingBottom10">1、标签内容</p>
<p class="paddingBottom10">
每个物流单元都要有自己惟一的SSCC。SSCC作为物流标签的惟一必要要素，由UCC/EAN-128条码符号表示，在物流单元形成时制作标签并贴在上面。
</p>
<p class="paddingBottom10">
在物流标签上物流单元的信息有两种基本的形式：由文本和图形组成的供人识读的信息以及为实现自动数据采集而设计的机读信息。
</p>
<p class="paddingBottom10">
一个完整的物流标签可划分为三个区段：供应商区段、客户区段和承运商区段如图18所示。
</p>
<div style="text-align: center">
<img
src="../../assets/image/business/bianmatu18.jpg"
alt="最基本的物流标签（含一个SSCC）"
class="img-responsive"
/>
</div>
<div style="text-align: center">
<img
src="../../assets/image/business/bianmatu19.jpg"
alt="包含供应商和承运商区段的标签"
class="img-responsive"
/>
</div>
<div style="text-align: center">
<img
src="../../assets/image/business/bianmatu20.jpg"
alt="包含链接数据的供应商区段的标签"
class="img-responsive"
/>
</div>
<div style="text-align: center">
<img
src="../../assets/image/business/bianmatu21.jpg"
alt="包含供应商、客户、承运商区段的标签"
class="img-responsive"
/>
</div>
<p class="paddingBottom10">2、方向与位置</p>
<p class="paddingBottom10">
物流单元标签条码的条与空应垂直与物流单元的底面。SSCC条码符号应位于标签的最下端。
</p>
<p class="paddingBottom10">
每个物流单元最少有一个标签。如果有两个标签，最好固定在相邻的两个侧面上，以方便扫描，如图22。
</p>
<div style="text-align: center">
<img
src="../../assets/image/business/bianmatu22.jpg"
alt="双标签放置"
class="img-responsive"
/>
</div>
<p class="paddingBottom10">3、符号的链接</p>
<p class="paddingBottom10">
在物流标签中，表示SSCC的UCC/EAN-128条码作为主符号，其后不能直接链接有关该物流信息单元的附加信息，这些附加信息应以另外的UCC/EAN-128条码来表示，见图20。
</p>
</div>
</div>
</template>
<script>
import cate from "../comps/cate.vue";
export default {
components: {
cate,
},
data() {
return {
flsspCate: {
name: "非零售商品",
ico: "",
},
};
},
watch: {
$route: {
handler(val) {
this.$nextTick(() => {
const top = this.$refs[val.query.id].offsetTop;
window.scrollTo(0, top);
});
},
immediate: true,
},
},
mounted() {
setTimeout(() => {
const top = this.$refs[this.$route.query.id].offsetTop;
window.scrollTo(0, top);
}, 100);
},
};
</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;
}
.paddingBottom10 {
padding-bottom: 10px;
}
p {
text-indent: 25px;
font-size: 14px;
}
}
}
</style>
\ No newline at end of file
src/views/Business/Corppay.vue
......@@ -191,6 +191,12 @@ export default {
created() {
// console.log(this.$route.query.id)
},
mounted() {
setTimeout(() => {
const top = this.$refs[this.$route.query.id].offsetTop;
window.scrollTo(0, top);
}, 100);
},
};
</script>
<style lang="scss" scoped>
......
src/views/Business/Renewal.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">
<div class="zxzc-btn" @click="zxxzJump">在线续展</div>
<img
src="../../assets/image/business/barcode-renewal.jpg"
class="barcode-register"
alt=""
/>
</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 cate from "../comps/cate.vue";
export default {
components: {
cate,
tmgg,
dffzjg,
bgxz,
zcfg,
},
data() {
return {
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')
}
};
},
methods: {
zxxzJump() {
window.open('http://wsdt.ancc.org.cn/anccoh/', "_blank");
}
},
};
</script>
<style lang="scss" scoped>
.register {
.register-cont {
@include module-box;
}
.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;
cursor: pointer;
}
.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/Training.vue
<template>
<div class="training container">
<div class="row">
<div class="col-lg-8">
<div class="pxjh">
<div class="col-lg-8" >
<div class="training-bj pxjh">
<cate :father="pxjhCate"></cate>
<div class="container">
<p>
......@@ -54,7 +54,42 @@
</div>
</div>
</div>
<div class="col-lg-4">2</div>
<div class="col-lg-4">
<div class="training-bj">
<div class="pxspkc">
<cate :father="pxspkcCate"></cate>
<div class="container">
<p>
系统成员可登录中国商品信息服务平台的成员专区选择在线学习服务培训视频教程，即可简单、有效、快速的学习到实用的商品条码知识，了解GS1系统并按标准使用商品条码，如需了解请按下方提示点击进入。
</p>
<p class="pxspkc-btn">
<button>点击进入</button>
</p>
<p>
<img
src="../../assets/image/business/woyaopeixun2.jpg"
alt=""
/>
</p>
<p>
<img
src="../../assets/image/business/woyaopeixun3.jpg"
alt=""
/>
</p>
</div>
</div>
<div class="xspxgg">
<cate :father="xspxggCate"></cate>
<div class="container">
<p>尊敬的中国商品条码系统成员：</p>
<p class="xspxgg-note">
当前，新冠病毒肺炎疫情已进入关键阶段，为进一步做好疫情防控，有序推进我们的技术服务工作，中国物品编码中心全国分支机构暂停现场培训，同时为系统成员提供免费的线上培训课程和相关学习资料，请点击<a href="http://www.gs1cn.org/news/article_admin.aspx?Id=9766">http://www.gs1cn.org/news/article_admin.aspx?Id=9766</a>进行查看。
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
......@@ -73,6 +108,14 @@ export default {
ico: "",
name: "培训计划",
},
pxspkcCate: {
ico: "",
name: "培训视频课程",
},
xspxggCate: {
ico: "",
name: "线上培训公告",
},
tabs: [
{
id: "one",
......@@ -255,8 +298,10 @@ export default {
<style lang="scss" scoped>
.training {
padding: 20px 0;
.pxjh {
.training-bj {
@include module-box;
}
.pxjh {
padding-bottom: 20px;
p {
text-indent: 28px;
......@@ -301,6 +346,36 @@ export default {
margin-top: 20px;
}
}
.pxspkc {
.pxspkc-btn {
text-align: center;
button {
background-color: #f26334;
padding: 10px;
padding-left: 10px;
padding-right: 10px;
font-size: 14px;
color: #ffffff;
border: 0;
}
}
img {
width: 100%;
}
}
.xspxgg {
font-size: 15px;
.xspxgg-note {
text-indent: 2em;
a{
word-break: break-all;
color: #008dbd;
text-decoration: none;
}
}
}
p {
font-size: 14px;
line-height: 24px;
......
src/views/Business/copms/fzzx.vue
<template>
<div class="fzzx">
<div class="fzzx fzzx2">
<div class="fzzx-list">
<div class="row" v-for="(tmpA, i) in newList" :key="i">
<div class="col-4" v-for="(tmpB, ii) in tmpA" :key="ii">
<div class="col-lg-4" v-for="(tmpB, ii) in tmpA" :key="ii">
<span
><a :href="tmpB.fileUrl">{{ tmpB.name }}</a></span
>
......@@ -26,6 +26,31 @@ export default {
},
};
</script>
<style lang="scss">
.fzzx2 {
@media screen and(min-width: 992px) {
.row {
&:nth-child(odd) {
background: rgba(242, 99, 53, 0.04);
}
}
}
@media screen and(max-width: 992px) {
.row {
&:nth-child(odd) {
div:nth-child(odd) {
background: rgba(242, 99, 53, 0.04);
}
}
&:nth-child(even) {
div:nth-child(even) {
background: rgba(242, 99, 53, 0.04);
}
}
}
}
}
</style>
<style lang="scss" scoped>
.fzzx {
width: 100%;
......@@ -46,9 +71,6 @@ export default {
text-decoration: none;
}
}
&:nth-child(odd) {
background: rgba(242, 99, 53, 0.04);
}
}
}
}
......
src/views/Business/index.vue
......@@ -61,19 +61,22 @@ export default {
{
name: "一次性加入费",
path: "/Business/Corppay",
active: "1",
active: "",
id: "1",
noneChild: true,
},
{
name: "胶片制作费",
path: "/Business/Corppay",
active: "2",
active: "",
id: "2",
noneChild: true,
},
{
name: "系统维护",
path: "/Business/Corppay",
active: "3",
active: "",
id: "3",
noneChild: true,
},
{
......@@ -92,7 +95,8 @@ export default {
{
name: "服务项目与服务内容",
path: "/Business/Corppay",
active: "4",
active: "",
id: "4",
noneChild: true,
},
],
......@@ -102,12 +106,14 @@ export default {
{
name: "条码注册公告",
path: "/Business/Notice",
active: "zhuce",
active: "",
id: "zhuce",
},
{
name: "条码注销公告",
path: "/Business/Notice",
active: "zhuxiao",
active: "",
id: "zhuxiao",
},
],
},
......@@ -123,13 +129,100 @@ export default {
},
{
name: "我要续展",
path: "",
active: "",
path: "/Business/Renewal",
active: "Renewal",
},
{
name: "我要编码",
path: "",
path: "/Business/Code1",
active: "",
id: "1-1",
children: [
{
name: "零售商品",
path: "",
active: "",
children: [
{
name: "为不同的商品项目编制不同的商品标识代码",
path: "/Business/Code1",
active: "",
id: "1-1",
noneChild: true,
},
{
name: "选择相应的条码符号",
path: "/Business/Code1",
active: "",
id: "1-2",
noneChild: true,
},
{
name: "条码符号的设计",
path: "/Business/Code1",
active: "",
id: "1-3",
noneChild: true,
},
{
name: "条码符号的印制",
path: "/Business/Code1",
active: "",
id: "1-4",
noneChild: true,
},
],
},
{
name: "非零售商品",
path: "",
active: "",
children: [
{
name: "非零售商品的标识代码",
path: "/Business/Code2",
active: "",
id: "2-1",
noneChild: true,
},
{
name: "非零售商品的条码标识",
path: "/Business/Code2",
active: "",
id: "2-2",
noneChild: true,
},
{
name: "应用标识符的使用",
path: "/Business/Code2",
active: "",
id: "2-3",
noneChild: true,
},
],
},
{
name: "物流单元",
path: "",
active: "",
children: [
{
name: "物流单元的标识代码",
path: "/Business/Code3",
active: "",
id: "3-1",
noneChild: true,
},
{
name: "物流标签",
path: "/Business/Code3",
active: "",
id: "3-2",
noneChild: true,
},
],
},
]
},
{
name: "我要通报编码信息",
......@@ -211,6 +304,7 @@ export default {
this.routeList,
currentPath
);
console.log(currentRoute, 'currentRoute')
if (currentRoute.children && currentRoute.children.length > 0) {
newRouteList = currentRoute.children;
} else if (currentRoute.noneChild) {
......@@ -221,7 +315,7 @@ export default {
}
localStorage.setItem('newRouteList', JSON.stringify(newRouteList));
// newRouteList = this.deepFindRouteList(this.routeList, currentPath);
// console.log(newRouteList, 'newRouteListnewRouteList2')
console.log(newRouteList, 'newRouteListnewRouteList2')
return newRouteList;
},
},
......
src/views/Org/comps/cywz.vue
......@@ -2,8 +2,8 @@
<div class="fzzx">
<div class="fzzx-list">
<div class="row" v-for="(tmp, i) in list" :key="i">
<div class="col-6">{{tmp.name}}</div>
<div class="col-6"><a :href="tmp.url" target="_blank">{{tmp.url}}</a></div>
<div class="col-lg-6">{{tmp.name}}</div>
<div class="col-lg-6"><a :href="tmp.url" target="_blank">{{tmp.url}}</a></div>
</div>
</div>
</div>
......
src/views/Org/comps/fzzx.vue
......@@ -33,7 +33,7 @@ export default {
},
};
</script>
<style lang="scss">
<style lang="scss" scoped>
.fzzx {
width: 90%;
margin: 0 auto;
......
src/views/comps/left2.vue
......@@ -16,7 +16,7 @@
<el-menu-item-group>
<el-menu-item
:index="i + 1 + '-' + (ii + 1)"
:class="{ active: tmpB.active === currentName || tmpB.active == $route.query.id }"
:class="{ active: tmpB.active === currentName || (tmpB.id && tmpB.id === $route.query.id) }"
v-for="(tmpB, ii) in tmpA.children"
:key="ii"
@click="jump(tmpB)"
......@@ -71,11 +71,11 @@ export default {
if (result && result.breadcrumb) {
this.$store.commit("system/SET_BREADCRUMB", result.breadcrumb);
}
if (el.active) {
if (el.id) {
this.$router.push({
path: el.path,
query: {
id: el.active,
id: el.id,
},
});
} else {
......@@ -131,9 +131,12 @@ export default {
}
.el-menu-item {
height: 50px;
line-height: 50px;
display: flex;
align-items: center;
line-height: 22px;
color: #6b6a6a;
background: transparent;
white-space: pre-wrap;
// font-size: 16px;
i {
color: $side-bg-color;
......@@ -143,7 +146,6 @@ export default {
right: 15px;
}
&:hover,
&:focus,
&.active {
color: #f26335;
background: $side-menu-active-color;
......
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