Skip to content

G
gs1
Commit 96c8b0d9 by FangYuan
Options

物流 部分零售

parent 983cc2d9
Showing with 2109 additions and 353 deletions
src/axios/api.js
......@@ -24,6 +24,7 @@ import knowledge from "./module/knowledge.js"
import news from "./module/news.js"
import user from "./module/user.js"
import myManage from "./module/myManage";
import barcode from "./module/barcode";
const api = {
home,
......@@ -36,6 +37,7 @@ const api = {
myManage,
getCaptcha,
user,
barcode,
}
export default api
src/axios/module/barcode.js 0 → 100644
import {
GET,
POST
} from "../fetch.js"
const Prefix = process.env.NODE_ENV === 'development' ? '/gs1' : '';
const Prefix2 = process.env.NODE_ENV === 'development' ? '/chinatm' : '';
// 查询SSCC AI标识符列表
const querySSCCAIList = (params = {}) => {
return POST(`${Prefix}/office/barcodegeneration/api/getGS1CodeListSSCC`, params)
}
// 查询GRAI AI标识符列表
const queryGRAIAIList = (params = {}) => {
return POST(`${Prefix}/office/barcodegeneration/api/getGS1CodeListGRAI`, params)
}
// 生成条形码
const generateBarcode = (params = {}) => {
return POST(`${Prefix}/office/barcodegeneration/api/createQRcode`, params)
}
// 查询校验码
const queryCheckCode = (params = {}) => {
return POST(`${Prefix}/office/barcodegeneration/api/checkGS1Code`, params)
}
export default {
querySSCCAIList,
queryGRAIAIList,
generateBarcode,
queryCheckCode,
}
src/config/constant.js
......@@ -3,3 +3,7 @@ export const QUERY_PAGE_SIZE = 10
export const QUERY_PAGE_SIZE_10 = 10
export const QUERY_PAGE_SIZE_20 = 20
export const QUERY_PAGE_SIZE_All = 999999
export const FILE_PREFIX = "http://81.68.189.225:9091/office/uploadFileResource"
export const FILE_PREFIX1 = "http://www.gov.cn"
export const FILE_PREFIX2 = "http://ltfzs.mofcom.gov.cn"
export const FILE_PREFIX3 = "https://xxgk.mot.gov.cn"
src/router/index.js
......@@ -448,6 +448,57 @@ const routes = [
],
},
{
path: "/BarCode",
name: "BarCode",
meta: {
name: "条码",
},
component: () => import("@/views/BarCode/index"),
redirect: '/BarCode/SSCC',
children: [
{
path: "/BarCode/SSCC",
name: "SSCC",
meta: {
name: "SSCC条码生成",
},
component: () => import("@/views/BarCode/SSCC.vue"),
},
{
path: "/BarCode/GRAI",
name: "GRAI",
meta: {
name: "GRAI条码生成",
},
component: () => import("@/views/BarCode/GRAI.vue"),
},
{
path: "/BarCode/standardList",
name: "standardList",
meta: {
name: "标准",
},
component: () => import("@/views/BarCode/standardList.vue"),
},
{
path: "/BarCode/guideAndCase",
name: "guideAndCase",
meta: {
name: "指南&案例",
},
component: () => import("@/views/BarCode/guideAndCase.vue"),
},
{
path: "/BarCode/lawsAndNews",
name: "lawsAndNews",
meta: {
name: "政策法规&行业资讯",
},
component: () => import("@/views/BarCode/lawsAndNews.vue"),
},
],
},
{
path: "/Service/Training",
name: "Training",
meta: {
......@@ -618,7 +669,7 @@ const routes = [
},
component: () => import("@/views/News/NoticeArticle.vue"),
},
{
path: "/News/Health",
name: "Health",
......@@ -644,6 +695,14 @@ const routes = [
component: () => import("@/views/News/StatuteDes.vue"),
},
{
path: "/News/RetailBusiness",
name: "RetailBusiness",
meta: {
name: "零售业务",
},
component: () => import("@/views/News/RetailBusiness.vue"),
},
{
path: "/News/Retail",
name: "Retail",
meta: {
......@@ -651,7 +710,7 @@ const routes = [
},
component: () => import("@/views/News/Retail.vue"),
},
{
path: "/News/Logistics",
name: "Logistics",
......@@ -1039,8 +1098,7 @@ const routes = [
name: "修改企业信息",
},
component: () => import("@/views/MyManage/UnVerify/vendorModify.vue"),
},
// 系统成员
}, // 系统成员
{
path: "/MyManage/SystemMember/index",
name: "SystemMember",
......
src/views/BarCode/GRAI.vue 0 → 100644
<template>
<div class="corppay">
<cate :father="sfmlqdCate"></cate>
<!-- 条码生成区域start -->
<div class="generate_area">
<div class="enter_box">
<div class="enter_name">AI标识符：</div>
<div class="tag_num">{{ inputInfo.codeValue }}</div>
<div class="input_box">
<el-input
:placeholder="inputInfo.prompt"
v-model="identifier"
:minlength="inputInfo.minLength"
:maxlength="inputInfo.maxLength"
clearable
>
</el-input>
</div>
</div>
<div class="operate_button" @click="handleGenerate">生成条码</div>
</div>
<!-- 条码生成区域end -->
<!-- 条码生成成功区域start -->
<generate-success :codePicture="codePicture" v-if="showSuccess"></generate-success>
<!-- 条码生成成功区域end -->
<!-- 友情提示 -->
<code-footer></code-footer>
</div>
</template>
<script>
import cate from "../comps/cate.vue";
import generateSuccess from "./generateSuccess.vue";
import codeFooter from "./codeFooter.vue";
export default {
components: {
cate,
generateSuccess,
codeFooter,
},
data() {
return {
sfmlqdCate: {
name: "GRAI条码生成",
ico: "",
},
identifier: "",
inputInfo: {},
showSuccess: false,
codePicture: '',
};
},
watch: {
$route: {
handler(val) {
this.$nextTick(() => {
Object.keys(this.$refs).forEach((key) => {
this.$refs[key].setAttribute("class", "msg-title");
});
});
},
immediate: true,
},
},
created() {
this.queryGRAIAIList();
},
mounted() {
// 面包屑单独处理
this.$store.commit("system/SET_BREADCRUMB", [
{ name: "应用领域", path: "/News/index" },
{ name: "物流", path: "/News/Logistics" },
{ name: "GRAI条码生成" },
]);
},
methods: {
async handleGenerate() {
if (this.identifier.length < 15 || this.identifier.length > 30) {
this.$message.error(this.inputInfo.prompt);
return;
}
const params = {
param: [`${this.inputInfo.codeValue},${this.identifier}`],
};
const listRes = await this.$api.barcode.generateBarcode(params);
const { returnCode, data } = listRes;
if (returnCode === "0") {
this.$message.success("生成成功");
this.showSuccess = true;
this.codePicture = data;
console.log(this.codePicture)
} else {
this.showSuccess = false;
this.$message.error("生成失败，请稍后重试~");
}
},
async queryGRAIAIList() {
const params = {};
const listRes = await this.$api.barcode.queryGRAIAIList(params);
const { returnCode, data } = listRes;
if (returnCode === "0") {
this.inputInfo = data;
} else {
this.inputInfo = {};
this.$message.error("获取AI标识符列表失败，请稍后重试~");
}
},
},
};
</script>
<style>
.enter_box .input_box .el-input,
.enter_box .input_box .el-input .el-input__inner {
width: 242px;
height: 40px;
}
.enter_box .input_box .el-input {
border-radius: 2px;
position: relative;
}
.enter_box .input_box .el-input .el-input__inner {
height: 40px;
border-radius: 2px;
border: 1px solid #cccccc;
font-size: 13px;
font-family: MicrosoftYaHei;
color: #999999;
margin: 0;
padding: 0 25px 0 10px;
/* padding-left: 10px; */
position: absolute;
top: 0;
left: 0;
}
</style>
<style lang="scss" scoped>
.corppay {
@include module-box;
.generate_area {
height: 100px;
// background: orchid;
padding: 0 30px;
.enter_box {
display: flex;
height: 40px;
line-height: 40px;
margin-top: 29px;
box-sizing: border-box;
.enter_name {
width: 100px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #414345;
}
.tag_num {
width: 72px;
border-radius: 2px;
border: 1px solid #cccccc;
font-size: 13px;
font-family: MicrosoftYaHei;
color: #454545;
padding-left: 10px;
padding-left: 10px;
}
.input_box {
width: 242px;
height: 40px;
margin-left: 10px;
}
}
.operate_button {
width: 240px;
height: 38px;
line-height: 38px;
background: #f26335;
border-radius: 4px;
font-size: 13px;
font-family: MicrosoftYaHei;
color: #ffffff;
text-align: center;
margin-top: 20px;
margin-left: 182px;
cursor: pointer;
}
}
.success_area {
padding: 40px 30px;
height: 440px;
.suc_area_title {
height: 40px;
background: #fef1ec;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #f26335;
padding-left: 20px;
line-height: 40px;
}
.show_area {
height: 320px;
background: url("../../assets/image/barcode/success_bg.png") no-repeat;
background-size: 100% 100%;
.font_title {
font-size: 16px;
height: 49px;
font-family: MicrosoftYaHei;
color: #f26335;
padding-top: 21px;
span {
display: inline-block;
width: 4px;
font-size: 20px;
color: #04408d;
margin-right: 10px;
font-weight: bolder;
padding-left: 20px;
}
}
.code_pic {
width: 250px;
height: 131px;
margin: 0 auto;
margin-top: 40px;
img {
width: 250px;
height: 131px;
}
}
.down_button {
width: 120px;
height: 40px;
margin: 0 auto;
margin-top: 30px;
border-radius: 4px;
border: 1px solid #f26335;
font-size: 13px;
color: #f26335;
font-family: MicrosoftYaHei;
text-align: center;
line-height: 38px;
cursor: pointer;
}
}
}
}
</style>
src/views/BarCode/SSCC.vue 0 → 100644
<template>
<div class="corppay">
<cate :father="sfmlqdCate"></cate>
<!-- 条码生成区域start -->
<div class="generate_area">
<div class="enter_box">
<div class="enter_name">AI标识符：</div>
<div class="input_list">
<el-form
:inline="true"
class="code-form-inline"
v-for="(info, i) in writeCodeList"
:key="'writeCodeList' + i"
:model="info"
:rules="info.rules"
>
<template>
<el-form-item>
<el-select
v-model="info.flag"
placeholder="请选择AI标识符"
class="AI_form_inline"
@change="changeFlag($event, i)"
clearable
>
<el-option
v-for="(item, index) in identifierList"
:key="'identifierList' + index"
:label="item.codeName"
:value="item.codeValue"
></el-option>
</el-select>
</el-form-item>
<template v-if="info.isCheck === 1">
<el-form-item>
<el-input
v-model="info.cValue"
:placeholder="info.prompt"
:minlength="info.minLength"
:maxlength="info.maxLength"
class="CT2_form_inline"
:type="info.inputType"
@input="changeCValue($event, info.maxLength, info.flag, i)"
clearable
></el-input>
</el-form-item>
<el-form-item>
<div class="check_code">
{{ info.checkCode ? info.checkCode : "校验码" }}
</div>
</el-form-item>
</template>
<template v-else-if="info.isDate === 1">
<el-form-item>
<el-date-picker
type="date"
v-model="info.cValue"
:placeholder="info.prompt"
format="yyMMdd"
value-format="yyMMdd"
clearable
>
</el-date-picker>
</el-form-item>
</template>
<template v-else>
<el-form-item>
<el-input
v-model="info.cValue"
:placeholder="info.prompt"
:minlength="info.minLength"
:maxlength="info.maxLength"
class="CT1_form_inline"
:type="info.inputType"
clearable
></el-input>
</el-form-item>
</template>
<el-form-item v-if="i === 0">
<img
@click="addRow"
src="../../assets/image/barcode/add.png"
alt=""
/>
</el-form-item>
<el-form-item v-else>
<img
@click="deleteRow(i)"
src="../../assets/image/barcode/delete.png"
alt=""
/>
</el-form-item>
</template>
</el-form>
</div>
</div>
<div class="operate_button" @click="handleGenerate">生成条码</div>
</div>
<!-- 条码生成区域end -->
<!-- 条码生成成功区域start -->
<generate-success
:codePicture="codePicture"
v-if="showSuccess"
></generate-success>
<!-- 条码生成成功区域end -->
<!-- 友情提示 -->
<code-footer></code-footer>
</div>
</template>
<script>
import cate from "../comps/cate.vue";
import generateSuccess from "./generateSuccess.vue";
import codeFooter from "./codeFooter.vue";
export default {
components: {
cate,
generateSuccess,
codeFooter,
},
data() {
return {
sfmlqdCate: {
name: "SSCC条码生成",
ico: "",
},
identifier: "",
identifierList: [],
writeCodeList: [],
showSuccess: false,
codePicture: "",
};
},
watch: {
$route: {
handler(val) {
this.$nextTick(() => {
Object.keys(this.$refs).forEach((key) => {
this.$refs[key].setAttribute("class", "msg-title");
});
});
},
immediate: true,
},
},
created() {
this.querySSCCAIList();
},
mounted() {
// 面包屑单独处理
this.$store.commit("system/SET_BREADCRUMB", [
{ name: "应用领域", path: "/News/index" },
{ name: "物流", path: "/News/Logistics" },
{ name: "SSCC条码生成" },
]);
},
methods: {
async querySSCCAIList() {
const params = {};
const listRes = await this.$api.barcode.querySSCCAIList(params);
const { returnCode, data } = listRes;
if (returnCode === "0") {
this.identifierList = data;
console.log(this.identifierList, "this.identifierList");
this.writeCodeList.push({
flag: "",
cValue: "",
checkCode: "",
});
console.log(this.writeCodeList, "-----------------");
} else {
this.identifierList = [];
this.$message.error("获取AI标识符列表失败，请稍后重试~");
}
},
changeFlag(event, i) {
console.log(event, i, "000000");
// this.writeCodeList[i].minLength = event.length;
// this.writeCodeList[i].maxLength = event.maxLength;
// this.writeCodeList[i].prompt = event.prompt;
// this.writeCodeList[i].flag = event.codeValue;
let obj = {};
obj = this.identifierList.find((item) => {
// 这里的provincelist就是上面省的数据
return item.codeValue === event; // 筛选出匹配数据，这里的id是接口数据中的每一项的id
});
this.writeCodeList[i].cValue = "";
this.writeCodeList[i].format = obj.format;
this.writeCodeList[i].isCheck = obj.isCheck;
this.writeCodeList[i].isDate = obj.isDate;
this.writeCodeList[i].isDecimal = obj.isDecimal;
this.writeCodeList[i].isNum = obj.isNum;
this.writeCodeList[i].maxLength = obj.maxLength;
this.writeCodeList[i].minLength = obj.minLength;
this.writeCodeList[i].prompt = obj.prompt;
if (obj.isDate === 0 && obj.isNum === 1) {
this.writeCodeList[i].inputType = "number";
} else if (obj.isDate === 0 && obj.isNum === 0) {
this.writeCodeList[i].inputType = "text";
}
console.log(this.writeCodeList[i], "============9999");
// this.writeCodeList[i] = {
// ...obj,
// flag: obj.codeValue,
// cValue: '',
// checkCode: '',
// };
// this.jobObj = obj;
// this.writeCodeList[i] = Object.assign(obj,this.writeCodeList[i]);
console.log("obj", this.writeCodeList); // 这个obj里面就是你想要的select中对应的数据
},
addRow() {
this.writeCodeList.push({
flag: "",
cValue: "",
checkCode: "",
});
},
deleteRow(i) {
this.writeCodeList.splice(0, i);
},
changeCValue(val, length, code, i) {
console.log(val, length, "------7777----");
if (val.length === length) {
this.queryCheckCode(code, val, i);
} else if (val.length > length) {
this.writeCodeList[i].cValue = val.slice(0, length);
}
},
async queryCheckCode(code, content, i) {
const params = {
code,
content,
};
const listRes = await this.$api.barcode.queryCheckCode(params);
const { returnCode, data } = listRes;
if (returnCode === "0") {
console.log(data, "-----------------");
this.writeCodeList[i].checkCode = data;
} else {
// this.identifierList = [];
this.$message.error("获取校验码失败，请稍后重试~");
}
},
async handleGenerate() {
console.log(this.writeCodeList, "=============");
// if (this.identifier.length < 15 || this.identifier.length > 30) {
// this.$message.error(this.inputInfo.prompt);
// return;
// }
let param = [];
this.writeCodeList.map((item) => {
if (item.cValue) {
param.push(`${item.flag},${item.cValue}`);
}
return item;
});
const params = {
param,
};
const listRes = await this.$api.barcode.generateBarcode(params);
const { returnCode, data } = listRes;
if (returnCode === "0") {
this.$message.success("生成成功");
this.showSuccess = true;
this.codePicture = data;
console.log(this.codePicture);
} else {
this.showSuccess = false;
this.$message.error("生成失败，请稍后重试~");
}
},
},
};
</script>
<style>
/* 去掉number类型自带的加减按钮 */
.classname::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.classname[type="number"] {
-moz-appearance: textfield;
}
.code-form-inline {
height: 55px;
}
.AI_form_inline.el-select,
.AI_form_inline.el-select .el-input,
.AI_form_inline.el-select .el-input .el-input__inner {
width: 159px;
height: 40px;
}
.AI_form_inline.el-select .el-input {
border-radius: 2px;
position: relative;
}
.AI_form_inline.el-select .el-input .el-input__inner {
height: 40px;
border-radius: 2px;
border: 1px solid #cccccc;
font-size: 13px;
font-family: MicrosoftYaHei;
color: #999999;
margin: 0;
padding: 0 25px 0 10px;
/* padding-left: 10px; */
position: absolute;
top: 0;
left: 0;
}
.AI_form_inline.el-select .el-input .el-icon-arrow-up:before {
content: "";
}
.el-scrollbar__view {
width: 159px;
}
.CT1_form_inline.el-input,
.CT1_form_inline.el-input .el-input__inner {
width: 320px;
height: 40px;
}
.CT2_form_inline.el-input,
.CT2_form_inline.el-input .el-input__inner {
width: 240px;
height: 40px;
}
.CT1_form_inline.el-input,
.CT2_form_inline.el-input {
border-radius: 2px;
position: relative;
}
.CT1_form_inline.el-input .el-input__inner,
.CT2_form_inline.el-input .el-input__inner {
height: 40px;
border-radius: 2px;
border: 1px solid #cccccc;
font-size: 13px;
font-family: MicrosoftYaHei;
color: #999999;
margin: 0;
padding: 0 25px 0 10px;
/* padding-left: 10px; */
position: absolute;
top: 0;
left: 0;
}
</style>
<style lang="scss" scoped>
.corppay {
@include module-box;
.generate_area {
// height: 100px;
// background: orchid;
padding: 0 30px;
.enter_box {
display: flex;
// height: 40px;
// line-height: 40px;
margin-top: 29px;
box-sizing: border-box;
.enter_name {
width: 100px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #414345;
}
.input_list {
// height: 40px;
.check_code {
width: 70px;
border-radius: 2px;
border: 1px solid #cccccc;
height: 40px;
font-size: 13px;
font-family: MicrosoftYaHei;
color: #999999;
text-align: center;
}
}
.tag_num {
width: 72px;
border-radius: 2px;
border: 1px solid #cccccc;
font-size: 13px;
font-family: MicrosoftYaHei;
color: #454545;
padding-left: 10px;
padding-left: 10px;
}
.input_box {
width: 242px;
height: 40px;
margin-left: 10px;
}
}
.operate_button {
width: 240px;
height: 38px;
line-height: 38px;
background: #f26335;
border-radius: 4px;
font-size: 13px;
font-family: MicrosoftYaHei;
color: #ffffff;
text-align: center;
margin-top: 20px;
margin-left: 271px;
cursor: pointer;
margin-bottom: 40px;
}
}
.success_area {
padding: 40px 30px;
height: 440px;
.suc_area_title {
height: 40px;
background: #fef1ec;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #f26335;
padding-left: 20px;
line-height: 40px;
}
.show_area {
height: 320px;
background: url("../../assets/image/barcode/success_bg.png") no-repeat;
background-size: 100% 100%;
.font_title {
font-size: 16px;
height: 49px;
font-family: MicrosoftYaHei;
color: #f26335;
padding-top: 21px;
span {
display: inline-block;
width: 4px;
font-size: 20px;
color: #04408d;
margin-right: 10px;
font-weight: bolder;
padding-left: 20px;
}
}
.code_pic {
width: 250px;
height: 131px;
margin: 0 auto;
margin-top: 40px;
img {
width: 250px;
height: 131px;
}
}
.down_button {
width: 120px;
height: 40px;
margin: 0 auto;
margin-top: 30px;
border-radius: 4px;
border: 1px solid #f26335;
font-size: 13px;
color: #f26335;
font-family: MicrosoftYaHei;
text-align: center;
line-height: 38px;
cursor: pointer;
}
}
}
}
</style>
src/views/BarCode/codeFooter.vue 0 → 100644
<template>
<div class="code_footer">
<div class="code_title">友情提示：</div>
<div class="code_content">
<div class="content_desc">
GS1-128条码符号是ANCC系统中使用的一种条码符号，也是一种商品条码符号。GS1-128
条码是Code128的子集。
</div>
<div class="img_box">
<img src="../../assets/image/barcode/barcode.png" alt="" />
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.code_footer {
height: 214px;
background: rgba(242, 99, 53, 0.03);
padding: 20px 30px;
.code_title {
font-size: 16px;
font-family: MicrosoftYaHei;
color: #f26335;
}
.code_content {
display: flex;
padding-top: 30px;
.content_desc {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #414345;
line-height: 24px;
}
.img_box {
padding-left: 30px;
img {
width: 204px;
height: 107px;
}
}
}
}
</style>
\ No newline at end of file
src/views/BarCode/copms/list.vue 0 → 100644
<template>
<div class="list">
<div v-for="(tmp, i) in list" :key="i" class="row" @click="handelClick(tmp)">
<div class="col-lg-6 list-left">
<span></span>
<span>{{tmp.name}}</span>
</div>
<!-- <div class="col-lg-2 list-right">{{tmp.time}}</div> -->
</div>
</div>
</template>
<script>
export default {
props: ['list'],
methods: {
// 跳转至详情页
handelClick(item) {
this.$emit('getInfo', item);
},
},
}
</script>
<style lang="scss" scoped>
.list {
margin: 0;
padding: 0;
.row {
display: flex;
justify-content: space-between;
border-bottom: 1px dashed #c5d8ee;
padding: 20px 0;
margin: 0;
font-size: 14px;
color: #454545;
cursor: pointer;
.list-left {
flex: 1;
display: flex;
align-items: center;
@include ellipsis;
span {
display: inline-block;
&:nth-child(1) {
width: 4px;
height: 4px;
background: #f26335;
border-radius: 50%;
margin-right: 10px;
}
&:nth-child(2) {
flex: 1;
@include ellipsis;
}
}
}
.list-right{
text-align: right;
}
}
}
</style>
\ No newline at end of file
src/views/BarCode/generateSuccess.vue 0 → 100644
<template>
<!-- 条码生成成功区域start -->
<div class="success_area">
<div class="suc_area_title">生成条码结果</div>
<div class="show_area">
<div class="font_title"><span>|</span>条码图片</div>
<div class="code_pic">
<img :src="codePicture" alt="" />
</div>
<div class="down_button" @click="downPicture">下载图片</div>
</div>
</div>
<!-- 条码生成成功区域end -->
</template>
<script>
import cate from "../comps/cate.vue";
import codeFooter from "./codeFooter.vue";
export default {
components: {
cate,
codeFooter,
},
props: {
codePicture: {
type: String,
default: '',
}
},
data() {
return {};
},
created() {},
mounted() {},
methods: {
downPicture() {
window.location.href = this.codePicture;
}
}
};
</script>
<style lang="scss" scoped>
.success_area {
padding: 40px 30px;
height: 440px;
.suc_area_title {
height: 40px;
background: #fef1ec;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #f26335;
padding-left: 20px;
line-height: 40px;
}
.show_area {
height: 320px;
background: url("../../assets/image/barcode/success_bg.png") no-repeat;
background-size: 100% 100%;
.font_title {
font-size: 16px;
height: 49px;
font-family: MicrosoftYaHei;
color: #f26335;
padding-top: 21px;
span {
display: inline-block;
width: 4px;
font-size: 20px;
color: #04408d;
margin-right: 10px;
font-weight: bolder;
padding-left: 20px;
}
}
.code_pic {
width: 250px;
height: 131px;
margin: 0 auto;
margin-top: 40px;
img {
width: 250px;
height: 131px;
}
}
.down_button {
width: 120px;
height: 40px;
margin: 0 auto;
margin-top: 30px;
border-radius: 4px;
border: 1px solid #f26335;
font-size: 13px;
color: #f26335;
font-family: MicrosoftYaHei;
text-align: center;
line-height: 38px;
cursor: pointer;
}
}
}
</style>
src/views/BarCode/guideAndCase.vue 0 → 100644
<template>
<div class="composite">
<cate :father="bzkydtCate"></cate>
<div class="container">
<list :list="tableResult.list" @getInfo="getInfo" />
</div>
</div>
</template>
<script>
import { mapMutations } from "vuex";
import cate from "../comps/cate.vue";
import list from "./copms/list.vue";
import { FILE_PREFIX } from "@/config/constant";
export default {
components: {
cate,
list,
},
data() {
return {
bzkydtCate: {
name: "指南&案例",
ico: "",
},
tableResult: {
list: [
{
name: "中国零售业箱码实施应用指南",
url: "/2021-12-18/1472207864411062279-中国零售业箱码实施应用指南.pdf",
flag: 1,
},
{
name: "ECR中国快速消费品储运包装指南",
url: "/2021-12-18/1472207864411062282-ECR中国快速消费品储运包装指南.pdf",
flag: 1,
},
{
name: "带托运输应用指南",
url: "/2021-12-18/1472212648354512897-带托运输应用指南.pdf",
flag: 1,
},
],
},
};
},
mounted() {
// 面包屑单独处理
this.$store.commit("system/SET_BREADCRUMB", [
{ name: "应用领域", path: "/News/index" },
{ name: "物流", path: "/News/Logistics" },
{ name: "指南&案例" },
]);
},
created() {},
methods: {
// 详情
getInfo(item) {
if (item.flag === 1) {
window.open(FILE_PREFIX + item.url, "_blank");
}
},
},
};
</script>
<style lang="scss" scoped>
.composite {
@include module-box;
ul {
padding: 0;
margin: 0;
}
}
</style>
\ No newline at end of file
src/views/BarCode/index.vue 0 → 100644
<template>
<div class="business container">
<breadcrumb />
<div class="row">
<div class="col-lg-3">
<left2 :list="routes" ref="left" />
</div>
<div class="col-lg-9">
<router-view class="marginTopLg20"></router-view>
</div>
</div>
</div>
</template>
<script>
import left2 from "../comps/left2.vue";
import breadcrumb from "../comps/breadcrumb.vue";
export default {
components: {
left2,
breadcrumb,
},
data() {
return {
routeList: [
{
name: "物流",
path: "",
active: "",
children: [
{
name: "SSCC条码生成",
path: "/BarCode/SSCC",
active: "SSCC",
},
{
name: "GRAI条码生成",
path: "/BarCode/GRAI",
active: "GRAI",
},
{
name: "快消品GS1探索之旅",
path: "https://discover.gs1.org/cpg/?locale=zh-CN--China_Chinese",
active: "",
type: "link",
},
{
name: "标准",
path: "/BarCode/standardList",
active: "standardList",
},
{
name: "指南&案例",
path: "/BarCode/guideAndCase",
active: "guideAndCase",
},
{
name: "政策法规&行业资讯",
path: "/BarCode/lawsAndNews",
active: "lawsAndNews",
},
],
},
],
};
},
computed: {
routes() {
let newRouteList = [];
let originPath;
if (this.$route.meta.fatherPath) {
originPath = this.$route.meta.fatherPath;
} else {
originPath = this.$route.path;
}
const currentRoute = this.deepFindCurrentRoute(
this.routeList,
originPath
);
// console.log(currentRoute, "currentRoute");
if (currentRoute.children && currentRoute.children.length > 0) {
newRouteList = currentRoute.children;
} else if (currentRoute.noneChild) {
const oldRouteList = JSON.parse(localStorage.getItem("newRouteList"));
newRouteList = oldRouteList;
} else {
newRouteList = this.routeList;
}
localStorage.setItem("newRouteList", JSON.stringify(newRouteList));
// newRouteList = this.deepFindRouteList(this.routeList, currentPath);
console.log(newRouteList, "newRouteListnewRouteList2");
return newRouteList;
},
},
created() {},
methods: {
deepFindCurrentRoute(menuList, activePath) {
let current = [];
const deep = (arr, activePath) => {
for (let i = 0; i < arr.length; i += 1) {
if (
arr[i].path !== activePath &&
arr[i].children &&
arr[i].children.length > 0
) {
deep(arr[i].children, activePath);
} else if (arr[i].path === activePath) {
current = arr[i];
break;
}
if (current.length > 0) {
break;
}
}
};
deep(menuList, activePath);
return current;
},
deepFindRouteList(menuList, activePath) {
let current = [];
const deep = (arr, activePath) => {
for (let i = 0; i < arr.length; i += 1) {
if (
arr[i].link !== activePath &&
arr[i].children &&
arr[i].children.length > 0
) {
deep(arr[i].children, activePath);
} else if (arr[i].path === activePath) {
current = arr;
break;
}
if (current.length > 0) {
break;
}
}
};
deep(menuList, activePath);
return current;
},
},
};
</script>
<style lang="scss" scoped>
.business {
padding-bottom: 20px;
}
</style>
src/views/BarCode/lawsAndNews.vue 0 → 100644
<template>
<div class="composite">
<cate :father="bzkydtCate"></cate>
<div class="container">
<list :list="tableResult.list" @getInfo="getInfo" />
</div>
</div>
</template>
<script>
import { mapMutations } from "vuex";
import cate from "../comps/cate.vue";
import list from "./copms/list.vue";
import {
FILE_PREFIX,
FILE_PREFIX1,
FILE_PREFIX2,
FILE_PREFIX3,
} from "@/config/constant";
export default {
components: {
cate,
list,
},
data() {
return {
bzkydtCate: {
name: "标准",
ico: "",
},
tableResult: {
list: [
{
name: "国务院办公厅关于印发“十四五”冷链物流发展规划的通知",
url: "/zhengce/content/2021-12/12/content_5660244.htm",
flag: 2,
},
{
name: "商务部等9部门关于印发《商贸物流高质量发展专项行动计划（2021-2025年）》的通知",
url: "/article/ag/agzc/202108/20210803185463.shtml",
flag: 3,
},
{
name: "商务部办公厅关于复制推广物流标准化建设好经验好做法和典型模式的函",
url: "/article/smzx/202107/20210703175959.shtml",
flag: 3,
},
{
name: "交通运输部等8部门关于做好标准化物流周转箱推广应用有关工作的通知",
url: "/2020/jigou/ysfws/202104/t20210425_3581141.html",
flag: 4,
},
{
name: "关于开展2018年流通领域现代供应链体系建设的通知",
url: "/article/smzx/201805/20180502749043.shtml",
flag: 3,
},
{
name: "商务部等10部门关于推广标准托盘发展单元化物流的意见",
url: "/article/ae/201801/20180102700400.shtml",
flag: 3,
},
{
name: "商务部办公厅 财政部办公厅关于开展供应链体系建设工作的通知",
url: "/article/ag/agzc/201708/20170802627302.shtml",
flag: 3,
},
],
},
};
},
mounted() {
// 面包屑单独处理
this.$store.commit("system/SET_BREADCRUMB", [
{ name: "应用领域", path: "/News/index" },
{ name: "物流", path: "/News/Logistics" },
{ name: "政策法规&行业资讯" },
]);
},
created() {},
methods: {
// 详情
getInfo(item) {
if (item.flag === 1) {
window.open(FILE_PREFIX + item.url, "_blank");
} else if (item.flag === 2) {
window.open(FILE_PREFIX1 + item.url, "_blank");
} else if (item.flag === 3) {
window.open(FILE_PREFIX2 + item.url, "_blank");
} else if (item.flag === 4) {
window.open(FILE_PREFIX3 + item.url, "_blank");
}
},
},
};
</script>
<style lang="scss" scoped>
.composite {
@include module-box;
ul {
padding: 0;
margin: 0;
}
}
</style>
\ No newline at end of file
src/views/BarCode/standardList.vue 0 → 100644
<template>
<div class="composite">
<cate :father="bzkydtCate"></cate>
<div class="container">
<list :list="tableResult.list" @getInfo="getInfo" />
</div>
</div>
</template>
<script>
import { mapMutations } from "vuex";
import cate from "../comps/cate.vue";
import list from "./copms/list.vue";
import { FILE_PREFIX } from "@/config/constant";
export default {
components: {
cate,
list,
},
data() {
return {
bzkydtCate: {
name: "标准",
ico: "",
},
tableResult: {
list: [
{
name: "GBT 16830-2008 商品条码 储运包装商品编码与条码表示",
url: "/2021-12-18/1472207864411062272-GBT 16830-2008 商品条码 储运包装商品编码与条码表示.pdf",
flag: 1,
},
{
name: "GBT 18127-2009 商品条码 物流单元编码与条码表示",
url: "/2021-12-18/1472207864411062273-GBT 18127-2009 商品条码 物流单元编码与条码表示.pdf",
flag: 1,
},
{
name: "GBT 31005-2014 托盘编码及条码表示",
url: "/2021-12-18/1472207864411062274-GBT 31005-2014 托盘编码及条码表示.PDF",
flag: 1,
},
{
name: "GBT 23833-2009 商品条码 资产编码与条码表示",
url: "/2021-12-18/1472207864411062275-GBT 23833-2009 商品条码 资产编码与条码表示.pdf",
flag: 1,
},
{
name: "GBT 16828-2007 商品条码 参与方位置编码与条码表示",
url: "/2021-12-18/1472207864411062276-GBT 16828-2007 商品条码 参与方位置编码与条码表示.pdf",
flag: 1,
},
{
name: "GBT 15425-2014 商品条码 128条码",
url: "/2021-12-18/1472207864411062276-GBT 16828-2007 商品条码 参与方位置编码与条码表示.pdf",
flag: 1,
},
{
name: "GBT 16986-2009 商品条码 应用标识符",
url: "/2021-12-18/1472207864411062278-GBT 16986-2009 商品条码 应用标识符.pdf",
flag: 1,
},
],
},
};
},
mounted() {
// 面包屑单独处理
this.$store.commit("system/SET_BREADCRUMB", [
{ name: "应用领域", path: "/News/index" },
{ name: "物流", path: "/News/Logistics" },
{ name: "标准" },
]);
},
created() {},
methods: {
// 详情
getInfo(item) {
if (item.flag === 1) {
window.open(FILE_PREFIX + item.url, "_blank");
}
},
},
};
</script>
<style lang="scss" scoped>
.composite {
@include module-box;
ul {
padding: 0;
margin: 0;
}
}
</style>
\ No newline at end of file
src/views/News/Logistics.vue
......@@ -13,10 +13,18 @@
</div>
<div class="row wltp">
<div class="col-lg-6">
<img src="../../assets/image/news/wl2.png" alt="" />
<img
src="../../assets/image/news/wl2.png"
@click="lookDetail('SSCC')"
alt=""
/>
</div>
<div class="col-lg-6">
<img src="../../assets/image/news/wl3.png" alt="" />
<img
src="../../assets/image/news/wl3.png"
@click="lookDetail('GRAI')"
alt=""
/>
</div>
</div>
<div class="div3">
......@@ -29,6 +37,7 @@
<button
type="button"
class="el-button el-button--primary el-button--small"
@click="getPage"
>
快消品GS1探索之旅
</button>
......@@ -44,7 +53,11 @@
<span>{{ item.title }}</span>
</p>
<ul>
<li v-for="(value, index) in item.list" :key="index">
<li
v-for="(value, index) in item.list"
:key="index"
@click="queryDetail(value)"
>
{{ value.name }}
</li>
</ul>
......@@ -57,6 +70,12 @@
<script>
import breadcrumb from "../comps/breadcrumb.vue";
import cate from "../comps/cate.vue";
import {
FILE_PREFIX,
FILE_PREFIX1,
FILE_PREFIX2,
FILE_PREFIX3,
} from "@/config/constant";
export default {
components: {
breadcrumb,
......@@ -69,13 +88,39 @@ export default {
title: "标准",
list: [
{
name: "标准标准标准标准标准标准标准标准标准标准标准标准标准标准标准标准",
name: "GBT 16830-2008 商品条码 储运包装商品编码与条码表示",
url: "/2021-12-18/1472207864411062272-GBT 16830-2008 商品条码 储运包装商品编码与条码表示.pdf",
flag: 1,
},
{
name: "标准标准标准标准标准标准标准标准",
name: "GBT 18127-2009 商品条码 物流单元编码与条码表示",
url: "/2021-12-18/1472207864411062273-GBT 18127-2009 商品条码 物流单元编码与条码表示.pdf",
flag: 1,
},
{
name: "标准标准标准标准标准标准标准标准",
name: "GBT 31005-2014 托盘编码及条码表示",
url: "/2021-12-18/1472207864411062274-GBT 31005-2014 托盘编码及条码表示.PDF",
flag: 1,
},
{
name: "GBT 23833-2009 商品条码 资产编码与条码表示",
url: "/2021-12-18/1472207864411062275-GBT 23833-2009 商品条码 资产编码与条码表示.pdf",
flag: 1,
},
{
name: "GBT 16828-2007 商品条码 参与方位置编码与条码表示",
url: "/2021-12-18/1472207864411062276-GBT 16828-2007 商品条码 参与方位置编码与条码表示.pdf",
flag: 1,
},
{
name: "GBT 15425-2014 商品条码 128条码",
url: "/2021-12-18/1472207864411062276-GBT 16828-2007 商品条码 参与方位置编码与条码表示.pdf",
flag: 1,
},
{
name: "GBT 16986-2009 商品条码 应用标识符",
url: "/2021-12-18/1472207864411062278-GBT 16986-2009 商品条码 应用标识符.pdf",
flag: 1,
},
],
},
......@@ -84,13 +129,19 @@ export default {
title: "指南&案例",
list: [
{
name: "指南指南指南指南指南指南指南指南",
name: "中国零售业箱码实施应用指南",
url: "/2021-12-18/1472207864411062279-中国零售业箱码实施应用指南.pdf",
flag: 1,
},
{
name: "指南指南指南指南指南指南指南指南",
name: "ECR中国快速消费品储运包装指南",
url: "/2021-12-18/1472207864411062282-ECR中国快速消费品储运包装指南.pdf",
flag: 1,
},
{
name: "指南指南指南指南指南指南指南指南",
name: "带托运输应用指南",
url: "/2021-12-18/1472212648354512897-带托运输应用指南.pdf",
flag: 1,
},
],
},
......@@ -99,31 +150,57 @@ export default {
title: "政策法规&行业资讯",
list: [
{
name: "政策法规政策法规政策法规政策法规",
name: "国务院办公厅关于印发“十四五”冷链物流发展规划的通知",
url: "/zhengce/content/2021-12/12/content_5660244.htm",
flag: 2,
},
{
name: "政策法规政策法规政策法规政策法规",
name: "商务部等9部门关于印发《商贸物流高质量发展专项行动计划（2021-2025年）》的通知",
url: "/article/ag/agzc/202108/20210803185463.shtml",
flag: 3,
},
{
name: "政策法规政策法规政策法规政策法规",
name: "商务部办公厅关于复制推广物流标准化建设好经验好做法和典型模式的函",
url: "/article/smzx/202107/20210703175959.shtml",
flag: 3,
},
{
name: "交通运输部等8部门关于做好标准化物流周转箱推广应用有关工作的通知",
url: "/2020/jigou/ysfws/202104/t20210425_3581141.html",
flag: 4,
},
],
},
{
icon: require("../../assets/image/news/icon_changjianwenti.png"),
title: "常见问题",
list: [
{
name: "常见问题常见问题常见问题常见问题",
name: "关于开展2018年流通领域现代供应链体系建设的通知",
url: "/article/smzx/201805/20180502749043.shtml",
flag: 3,
},
{
name: "常见问题常见问题常见问题常见问题",
name: "商务部等10部门关于推广标准托盘发展单元化物流的意见",
url: "/article/ae/201801/20180102700400.shtml",
flag: 3,
},
{
name: "常见问题常见问题常见问题常见问题",
name: "商务部办公厅 财政部办公厅关于开展供应链体系建设工作的通知",
url: "/article/ag/agzc/201708/20170802627302.shtml",
flag: 3,
},
],
},
{
icon: require("../../assets/image/news/icon_changjianwenti.png"),
title: "常见问题",
list: [
// {
// name: "常见问题常见问题常见问题常见问题",
// },
// {
// name: "常见问题常见问题常见问题常见问题",
// },
// {
// name: "常见问题常见问题常见问题常见问题",
// },
],
},
],
};
},
......@@ -134,7 +211,36 @@ export default {
{ name: "物流" },
]);
},
methods: {},
methods: {
getPage() {
window.open(
"https://discover.gs1.org/cpg/?locale=zh-CN--China_Chinese",
"_blank"
);
},
lookDetail(type) {
if (type === "SSCC") {
this.$router.push({
path: "/BarCode/SSCC",
});
} else if (type === "GRAI") {
this.$router.push({
path: "/BarCode/GRAI",
});
}
},
queryDetail(item) {
if (item.flag === 1) {
window.open(FILE_PREFIX + item.url, "_blank");
} else if (item.flag === 2) {
window.open(FILE_PREFIX1 + item.url, "_blank");
} else if (item.flag === 3) {
window.open(FILE_PREFIX2 + item.url, "_blank");
} else if (item.flag === 4) {
window.open(FILE_PREFIX3 + item.url, "_blank");
}
},
},
};
</script>
<style lang="scss" scoped>
......@@ -226,6 +332,7 @@ export default {
.list-style {
background: #fff;
border-top: 5px solid #22bcb9;
height: 355px;
.div4-title {
height: 50px;
color: #22bcb9;
......@@ -251,6 +358,7 @@ export default {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
li::before {
content: "●";
......
src/views/News/Retail.vue
<template>
<div class="container" >
<div class="container">
<breadcrumb />
<div class="composite">
<img src="../../assets/image/news/ls1.png" alt="">
<p>商品条码作为商品流通“身份证”，已在上亿种商品、100多万家商超、95%以上的消费品上面广泛使用，拥有条码“身份证”的“中国制造”产品已经遍及世界的各个角落。</p>
<img src="../../assets/image/news/ls1.png" alt="" />
<!-- <p>商品条码作为商品流通“身份证”，已在上亿种商品、100多万家商超、95%以上的消费品上面广泛使用，拥有条码“身份证”的“中国制造”产品已经遍及世界的各个角落。</p>
<p>商品条码在零售领域的普及，使收款员仅需扫描条码就实现了商品的结算，大大提升了结算效率，减少了顾客的等待时间，避免了人为的差错造成的经济损失和管理上的混乱。</p>
<p>商品条码作为商品流通“身份证”，已在上亿种商品、100多万家商超、95%以上的消费品上面广泛使用，拥有条码“身份证”的“中国制造”产品已经遍及世界的各个角落。商品条码在零售领域的普及，使收款员仅需扫描条码就实现了商品的结算，大大提升了结算效率，减少了顾客的等待时间，避免了人为的差错造成的经济损失和管理上的混乱。</p>
<p>商品条码作为商品流通“身份证”，已在上亿种商品、100多万家商超、95%以上的消费品上面广泛使用，拥有条码“身份证”的“中国制造”产品已经遍及世界的各个角落。商品条码在零售领域的普及，使收款员仅需扫描条码就实现了商品的结算，大大提升了结算效率，减少了顾客的等待时间，避免了人为的差错造成的经济损失和管理上的混乱。</p> -->
<p>
零售作为商品条码应用最为广泛的领域之一，一直备受政府、企业和消费者关注。商品条码作为商品流通“身份证”，已在数亿种商品、数百万家商超、95%以上的消费品上面广泛使用，拥有条码“身份证”的“中国制造”产品已经遍及世界的各个角落。
</p>
<ul class="link_font">
<li v-for="(item, index) in linkFontList" :key="'linkFontList' + index" @click="goDetail">
<span class="list_icon">·</span>{{ item }}
</li>
</ul>
</div>
<div class="div2">
<p class="div-title">商品二维码推广工作组</p>
<div class="row">
<div class="col-lg-5">
<img src="../../assets/image/news/ls2.png" alt="" >
</div>
<div class="col-lg-7 ">
<div class="div2-text">
<div class="div2-text-box"></div>
<div class="div2-text-des">
<p>商品二维码推广工作组计划组织各地编码分支机构及有意愿、有条件的品牌商、生产商、零售商和系统服务商等相关企业共同参加。</p>
<p>联系人：</p>
<p style="font-size:12px;">支俊凯<i class="bi bi-telephone-fill"></i>010-84295518<i class="bi bi-envelope-fill"></i>zhijk@ancc.org.cn&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;李弘凯<i class="bi bi-telephone-fill"></i>010-84295522<i class="bi bi-envelope-fill"></i>lihk@ancc.org.cn
</p>
</div>
</div>
<p class="div-title">商品二维码推广工作组</p>
<div class="row">
<div class="col-lg-5">
<img src="../../assets/image/news/ls2.png" alt="" />
</div>
<div class="col-lg-7">
<div class="div2-text">
<div class="div2-text-box"></div>
<div class="div2-text-des">
<p>
商品二维码推广工作组计划组织各地编码分支机构及有意愿、有条件的品牌商、生产商、零售商和系统服务商等相关企业共同参加。
</p>
<p>联系人：</p>
<p style="font-size: 12px">
支俊凯<i class="bi bi-telephone-fill"></i>010-84295518<i
class="bi bi-envelope-fill"
></i
>zhijk@ancc.org.cn&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;李弘凯<i class="bi bi-telephone-fill"></i
>010-84295522<i class="bi bi-envelope-fill"></i>lihk@ancc.org.cn
</p>
</div>
</div>
</div>
</div>
</div>
<div class="div4">
<div class="row">
<div class="col-lg-6 " v-for="(item,i) in typeList" :key="i">
<div class="col-lg-6" v-for="(item, i) in typeList" :key="i">
<div class="list-style">
<p class="div4-title">
<span>{{item.title}}</span>
<span>{{ item.title }}</span>
<span class="more">更多>></span>
</p>
<ul >
<li v-for="(value,index) in item.list" :key="index">{{value.name}}</li>
<ul>
<li v-for="(value, index) in item.list" :key="index">
{{ value.name }}
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="div4 div4-list">
<div class="row">
<div class="col-lg-6 ">
<div class="col-lg-6">
<div class="list-style">
<p class="div4-title">
<span>商品二维码在零售领域的应用</span>
<span class="more">更多>></span>
</p>
<ul >
<li >如何在非零售商品上使用商品条码——非零售商品如何在非零售商品上使用商品条码——非零售商品…</li>
<li >山东德州市场约两成零售商品的条码为假冒伪造</li>
<li >如何在非零售商品上使用商品条码——非零售商品…</li>
<li >如何在非零售商品上使用商品条码——非零售商品…</li>
<li >如何在非零售商品上使用商品条码——非零售商品…</li>
<li >如何在非零售商品上使用商品条码——非零售商品…</li>
<ul>
<li>
如何在非零售商品上使用商品条码——非零售商品如何在非零售商品上使用商品条码——非零售商品…
</li>
<li>山东德州市场约两成零售商品的条码为假冒伪造</li>
<li>如何在非零售商品上使用商品条码——非零售商品…</li>
<li>如何在非零售商品上使用商品条码——非零售商品…</li>
<li>如何在非零售商品上使用商品条码——非零售商品…</li>
<li>如何在非零售商品上使用商品条码——非零售商品…</li>
</ul>
<img src="../../assets/image/news/ls3.png" class="div4-img" alt="" />
<img
src="../../assets/image/news/ls3.png"
class="div4-img"
alt=""
/>
</div>
</div>
<div class="col-lg-6 lunbo ">
<div class="lunbo-cnt">
<p class="lunbo-title">
<span>商品二维码在零售领域的应用</span>
<span class="more">更多>></span>
</p>
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../../assets/image/news/ls4.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<p>国家市场监督管理总局赴中国物品编码中心进行追溯工作调研</p>
</div>
</div>
<div class="carousel-item">
<img src="../../assets/image/news/ls4.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<p>国家市场监督管理总局赴中国物品编码中心进行追溯工作调研</p>
</div>
</div>
<div class="carousel-item">
<img src="../../assets/image/news/ls4.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<p>国家市场监督管理总局赴中国物品编码中心进行追溯工作调研</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</button>
</div>
<div class="col-lg-6 lunbo">
<div class="lunbo-cnt">
<p class="lunbo-title">
<span>商品二维码在零售领域的应用</span>
<span class="more">更多>></span>
</p>
<div
id="carouselExampleCaptions"
class="carousel slide"
data-bs-ride="carousel"
>
<div class="carousel-indicators">
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="0"
class="active"
aria-current="true"
aria-label="Slide 1"
></button>
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="1"
aria-label="Slide 2"
></button>
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="2"
aria-label="Slide 3"
></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img
src="../../assets/image/news/ls4.png"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<p>
国家市场监督管理总局赴中国物品编码中心进行追溯工作调研
</p>
</div>
</div>
<div class="carousel-item">
<img
src="../../assets/image/news/ls4.png"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<p>
国家市场监督管理总局赴中国物品编码中心进行追溯工作调研
</p>
</div>
</div>
<div class="carousel-item">
<img
src="../../assets/image/news/ls4.png"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<p>
国家市场监督管理总局赴中国物品编码中心进行追溯工作调研
</p>
</div>
</div>
</div>
<button
class="carousel-control-prev"
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide="prev"
>
<span
class="carousel-control-prev-icon"
aria-hidden="true"
></span>
</button>
<button
class="carousel-control-next"
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide="next"
>
<span
class="carousel-control-next-icon"
aria-hidden="true"
></span>
</button>
</div>
</div>
</div>
<div class="div5">
<!-- <img src="../../assets/image/news/ls5.png" alt=""> -->
<div class="div5-cnt">
<p>欢迎加入</p>
<p><img src="../../assets/image/news/icon.png" />中国ECR委员会 <img src="../../assets/image/news/icon.png" />全渠道零售工作委员会</p>
<p>支俊凯<i class="bi bi-telephone-fill"></i>010-84295518<i class="bi bi-envelope-fill"></i>zhijk@ancc.org.cn&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;李弘凯<i class="bi bi-telephone-fill"></i>010-84295522<i class="bi bi-envelope-fill"></i>lihk@ancc.org.cn</p>
</div>
<!-- <img src="../../assets/image/news/ls5.png" alt=""> -->
<div class="div5-cnt">
<p>欢迎加入</p>
<p>
<img src="../../assets/image/news/icon.png" />中国ECR委员会
<img src="../../assets/image/news/icon.png" />全渠道零售工作委员会
</p>
<p>
支俊凯<i class="bi bi-telephone-fill"></i>010-84295518<i
class="bi bi-envelope-fill"
></i
>zhijk@ancc.org.cn&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;李弘凯<i
class="bi bi-telephone-fill"
></i
>010-84295522<i class="bi bi-envelope-fill"></i>lihk@ancc.org.cn
</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import breadcrumb from "../comps/breadcrumb.vue";
import cate from "../comps/cate.vue";
export default {
components: {
breadcrumb,
breadcrumb,
},
data() {
return {
typeList:[
{
title:'商品条码在零售领域应用指南',
list:[
{
name:'如何在零售商品上使用商品条码——步骤一',
},
{
name:'如何在零售商品上使用商品条码——步骤二',
},
{
name:'如何在零售商品上使用商品条码——步骤三',
},
{
name:'如何在零售商品上使用商品条码——步骤四',
},
{
name:'如何在非零售商品上使用商品条码——非零售商品的标识…',
},
{
name:'如何在非零售商品上使用商品条码——非零售商品的条码…',
},
{
name:'如何在非零售商品上使用商品条码——应用标识符的使用',
},
]
},
{
title:'最新动态',
list:[
{
name:'如何在零售商品上使用商品条码——步骤一',
},
{
name:'如何在零售商品上使用商品条码——步骤二',
},
{
name:'如何在零售商品上使用商品条码——步骤三',
},
{
name:'如何在零售商品上使用商品条码——步骤四',
},
{
name:'如何在非零售商品上使用商品条码——非零售商品的标识…',
},
{
name:'如何在非零售商品上使用商品条码——非零售商品的条码…',
},
{
name:'如何在非零售商品上使用商品条码——应用标识符的使用',
},
]
},
]
linkFontList: [
"商品条码在传统零售领域的应用",
"商品条码在线上零售领域的应用",
"商品二维码在零售领域的应用",
],
typeList: [
{
title: "商品条码在零售领域应用指南",
list: [
{
name: "如何在零售商品上使用商品条码——步骤一",
},
{
name: "如何在零售商品上使用商品条码——步骤二",
},
{
name: "如何在零售商品上使用商品条码——步骤三",
},
{
name: "如何在零售商品上使用商品条码——步骤四",
},
{
name: "如何在非零售商品上使用商品条码——非零售商品的标识…",
},
{
name: "如何在非零售商品上使用商品条码——非零售商品的条码…",
},
{
name: "如何在非零售商品上使用商品条码——应用标识符的使用",
},
],
},
{
title: "最新动态",
list: [
{
name: "如何在零售商品上使用商品条码——步骤一",
},
{
name: "如何在零售商品上使用商品条码——步骤二",
},
{
name: "如何在零售商品上使用商品条码——步骤三",
},
{
name: "如何在零售商品上使用商品条码——步骤四",
},
{
name: "如何在非零售商品上使用商品条码——非零售商品的标识…",
},
{
name: "如何在非零售商品上使用商品条码——非零售商品的条码…",
},
{
name: "如何在非零售商品上使用商品条码——应用标识符的使用",
},
],
},
],
};
},
mounted() {
......@@ -209,22 +283,22 @@ export default {
{ name: "零售" },
]);
},
methods: {},
methods: {
goDetail() {
this.$router.push('/News/RetailBusiness');
}
},
};
</script>
<style lang="scss" scoped>
.container {
@media screen and (min-width: 992px) {
}
@media screen and (max-width: 992px) {
.div2-text-box{
display: none;
}
.div2-text-box {
display: none;
}
}
}
</style>
<style lang="scss" scoped>
......@@ -232,233 +306,244 @@ export default {
margin-bottom: 30px;
padding-top: 0;
padding-bottom: 20px;
background: #F5F5F5;
>p{
background: #f5f5f5;
> p {
margin: 0 56px;
font-size: 14px;
color: #414345;
line-height: 40px;
}
img{
img {
width: 100%;
margin-bottom: 20px;
}
.link_font{
display: flex;
justify-content: space-between;
padding: 0 56px;
padding-top: 20px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #F05587;
li{
cursor: pointer;
.list_icon{
padding-right: 7px;
font-size: 18px;
font-weight: bold;
}
}
.div-title{
color: #F05587;
font-size: 16px;
// font-family: PingFangSC-Semibold;
white-space: nowrap;
}
.div2{
}
.div-title {
color: #f05587;
font-size: 16px;
// font-family: PingFangSC-Semibold;
white-space: nowrap;
padding-bottom: 21px;
}
.div2 {
margin-bottom: 30px;
img{
img {
width: 100%;
}
.div2-text{
background: #F05587;
.div2-text {
background: #f05587;
color: #fff;
position: relative;
height: 100%;
.div2-text-box{
width: 74px;
height: 100%;
position: absolute;
left: -74px;
background: url('../../assets/image/news/ls6.png') no-repeat;
border-right: 24px solid #F05587;
.div2-text-box {
width: 74px;
height: 100%;
position: absolute;
left: -74px;
background: url("../../assets/image/news/ls6.png") no-repeat;
border-right: 24px solid #f05587;
}
.div2-text-des{
padding-left: 16px;
padding-top: 59px;
line-height: 26px;
font-size: 14px;
p:first-child{
padding-right: 5%;
margin-bottom: 34px;
}
i{
margin: 0 9px 0 20px;
}
.div2-text-des {
padding-left: 16px;
padding-top: 59px;
line-height: 26px;
font-size: 14px;
p:first-child {
padding-right: 5%;
margin-bottom: 34px;
}
i {
margin: 0 9px 0 20px;
}
}
}
}
.div4{
.div4 {
margin-bottom: 30px;
.list-style{
.list-style {
min-height: 100%;
background: #fff;
border-top: 5px solid #F05587;
border-top: 5px solid #f05587;
padding-bottom: 10px;
margin-bottom: 10px;
.div4-title{
.div4-title {
height: 50px;
color: #F05587;
color: #f05587;
font-size: 16px;
padding: 0 20px;
margin-bottom: 0;
margin-top: 10px;
img{
img {
width: 14px;
height: 16px;
margin-right: 10px;
}
span{
span {
line-height: 50px;
}
.more{
font-size: 12px;
float: right;
.more {
font-size: 12px;
float: right;
}
}
ul{
padding:0 20px 10px;
li{
ul {
padding: 0 20px 10px;
li {
color: #414345;
font-size: 14px;
line-height: 40px;
overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
white-space: nowrap;
}
li::before {
content: "●";
color: #f05587;
margin-right: 10px;
}
li::before{
content: "●";
color: #F05587;
margin-right: 10px;
}
}
}
}
.div4-list{
.list-style:first-child{
border-top: 5px solid #F05587;
}
.list-style{
position: relative;
border: none;
li{
display: inline-block;
width: 60%;
}
img{
position:absolute;
width: 28%;
top: 70px;
right: 20px;
.div4-list {
.list-style:first-child {
border-top: 5px solid #f05587;
}
}
.list-style {
position: relative;
border: none;
li {
display: inline-block;
width: 60%;
}
}
.lunbo{
.lunbo-cnt{
position: relative;
img {
position: absolute;
width: 28%;
top: 70px;
right: 20px;
}
.lunbo-title{
color: #F05587;
font-size: 16px;
margin-top: 10px;
span{
line-height: 50px;
}
.more{
font-size: 12px;
float: right;
}
}
}
.lunbo {
.lunbo-cnt {
position: relative;
}
.lunbo-title {
color: #f05587;
font-size: 16px;
margin-top: 10px;
span {
line-height: 50px;
}
.carousel-control-prev-icon,.carousel-control-next-icon{
border-radius: 50%;
background-color: #000000;
background-size: 60% 60%;
.more {
font-size: 12px;
float: right;
}
/deep/.carousel-indicators{
display: block;
position:absolute;
text-align: right;
button{
width: 6px;
height: 6px;
border-radius: 50%;
}
.active{
// width: 4px;
// height: 4px!important;
// background: #F05587;
border: 0;
background: #F05587;
}
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
border-radius: 50%;
background-color: #000000;
background-size: 60% 60%;
}
/deep/.carousel-indicators {
display: block;
position: absolute;
text-align: right;
button {
width: 6px;
height: 6px;
border-radius: 50%;
}
.lunbo-bottom{
width: 100%;
height: 10%;
background: rgba(0,0,0,0.4);
position:absolute;
bottom: 0;
.active {
// width: 4px;
// height: 4px!important;
// background: #F05587;
border: 0;
background: #f05587;
}
}
.lunbo-bottom {
width: 100%;
height: 10%;
background: rgba(0, 0, 0, 0.4);
position: absolute;
bottom: 0;
}
}
/deep/.carousel-caption{
font-size: 10px!important;
left: 4%!important;
bottom: 15px!important;
text-align: left;
/deep/.carousel-caption {
font-size: 10px !important;
left: 4% !important;
bottom: 15px !important;
text-align: left;
margin: 0;
padding: 0;
P {
margin: 0;
padding: 0;
P{
margin: 0;
}
}
}
.div5{
margin-top: 30px;
// position: relative;
background: #F05587;
img{
width: 17px;
height: 17px;
margin-right: 10px;
}
img:nth-child(2){
margin-left: 29px;
}
.div5-cnt{
.div5 {
margin-top: 30px;
// position: relative;
background: #f05587;
img {
width: 17px;
height: 17px;
margin-right: 10px;
}
img:nth-child(2) {
margin-left: 29px;
}
.div5-cnt {
width: 100%;
height: 160px;
background: url("../../assets/image/news/ls5.png") no-repeat 100% 100%;
// position: absolute;
// top: 20%;
text-align: center;
color: #fff;
padding-top: 30px;
p {
width: 100%;
height: 160px;
background: url('../../assets/image/news/ls5.png') no-repeat 100% 100%;
// position: absolute;
// top: 20%;
text-align: center;
color: #fff;
padding-top: 30px;
p{
width: 100%;
font-size: 14px;
line-height: 35px;
i{
margin: 0 9px 0 20px;
}
}
p:first-child{
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 26px;
// font-family: PangMenZhengDao;
white-space: nowrap;
}
p:nth-child(2){
font-size: 16px;
letter-spacing: 0.4000000059604645px;
font-size: 14px;
line-height: 35px;
i {
margin: 0 9px 0 20px;
}
}
p:first-child {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 26px;
// font-family: PangMenZhengDao;
white-space: nowrap;
}
p:nth-child(2) {
font-size: 16px;
letter-spacing: 0.4000000059604645px;
}
}
}
</style>
src/views/News/RetailBusiness.vue 0 → 100644
<template>
<div class="container">
<breadcrumb />
<div class="composite">
<img src="../../assets/image/news/ls1.png" alt="" />
<p>
零售作为商品条码应用最为广泛的领域之一，一直备受政府、企业和消费者关注。商品条码作为商品流通“身份证”，已在数亿种商品、数百万家商超、95%以上的消费品上面广泛使用，拥有条码“身份证”的“中国制造”产品已经遍及世界的各个角落。
</p>
<p class="title">商品条码在传统零售领域的应用</p>
<p>
商品条码在传统零售领域的普及，使收款员仅需扫描条码就实现了商品的结算，大大提升了结算效率，减少了顾客的等待时间，避免了人为的差错造成的经济损失和管理上的混乱。此外，通过使用商品条码，企业可以及时掌握各门店库存产品状态，从而制定相应的补货、配送、调货计划。同时，生产企业也可以通过相关信息制定相应的生产计划，实现供应商管理库存。
</p>
<p>
目前，全球超过250万家企业采用GS1国际标准，全球商超每天扫码的次数达60亿次，手机扫码达百亿次！
</p>
<p class="title">商品条码在线上零售领域的应用</p>
<p>
零售作为商品条码应用最为广泛的领域之一，一直备受政府、企业和消费者关注。商品条码作为商品流通“身份证”，已在数亿种商品、数百万家商超、95%以上的消费品上面广泛使用，拥有条码“身份证”的“中国制造”产品已经遍及世界的各个角落。近年来，随着网络信息技术和移动互联网科技的发展，中国物品编码中心不断与中国头部电商平台开展战略合作，为上百万家企业提供更加全面的商品数据服务，形成了商品条码、源数据、扫条码放心购、嵌入式发码服务等方面在网络及零售领域中的应用标杆，实现了商品条码及数据在线上线下全渠道零售领域的广泛应用。
</p>
<p class="title">商品二维码在零售领域的应用</p>
<p>
《商品二维码》 GB/T
33993-2017是我国首个用于标识商品及商品特征属性、商品相关网址等信息的二维码国家标准。商品二维码作为一维条码的发展和延续，可以兼容现有商品条码的全部信息，实现了对一品一码，一批一码，一物一码的唯一标识。
</p>
<p>
基于《商品二维码》国家标准建立的国家二维码综合服务平台（www.2dcode.org）已经上线提供服务，广大企业可通过综合服务平台在线办理商品二维码，并享受配置、生成、下载、查询、使用等相关服务。
</p>
<p>
目前，随着网络信息技术的发展，零售产业面临数字化升级再造的需求，整个消费市场正逐步形成更加高效的、线上线下无缝对接的新零售业态。二维码作为全渠道零售中不可或缺的数据载体，已成为众多数字化解决方案的关键核心。商品二维码应用领域涉及商品库存管理、防伪追溯、商品质量安全、扩展包装、消费者营销互动等多个方面。
</p>
</div>
</div>
</template>
<script>
import breadcrumb from "../comps/breadcrumb.vue";
import cate from "../comps/cate.vue";
export default {
components: {
breadcrumb,
},
data() {
return {
linkFontList: [
"商品条码在传统零售领域的应用",
"商品条码在线上零售领域的应用",
"商品二维码在零售领域的应用",
],
};
},
mounted() {
// 面包屑单独处理
this.$store.commit("system/SET_BREADCRUMB", [
{ name: "应用领域", path: "/News/index" },
{ name: "零售" },
]);
},
methods: {},
};
</script>
<style lang="scss" scoped>
.container {
@media screen and (min-width: 992px) {
}
@media screen and (max-width: 992px) {
.div2-text-box {
display: none;
}
}
}
</style>
<style lang="scss" scoped>
.composite {
margin-bottom: 30px;
padding-top: 0;
padding-bottom: 20px;
background: #f5f5f5;
> p {
margin: 0 56px;
font-size: 14px;
color: #414345;
line-height: 40px;
text-indent: 28px;
}
img {
width: 100%;
margin-bottom: 20px;
}
.title {
text-indent: 0;
color: #f05587;
padding-top: 20px;
}
}
// /deep/.carousel-caption {
// font-size: 10px !important;
// left: 4% !important;
// bottom: 15px !important;
// text-align: left;
// margin: 0;
// padding: 0;
// P {
// margin: 0;
// }
// }
</style>
yarn.lock 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
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