Skip to content

G
gs1
Commit 8a687e3b by FangYuan
Options

物流优化

parent 3a2190b4
Showing with 1568 additions and 6 deletions
src/router/index.js
......@@ -500,6 +500,57 @@ const routes = [{
],
},
{
path: "/Sell",
name: "Sell",
meta: {
name: "零售",
},
component: () => import("@/views/Sell/index"),
redirect: '/Sell/SSCC',
children: [
{
path: "/Sell/SSCC",
name: "SSCC",
meta: {
name: "SSCC条码生成",
},
component: () => import("@/views/Sell/SSCC.vue"),
},
{
path: "/Sell/qrApplication",
name: "qrApplication",
meta: {
name: "商品二维码在零售领域的应用",
},
component: () => import("@/views/Sell/qrApplication.vue"),
},
{
path: "/Sell/codePromotion",
name: "codePromotion",
meta: {
name: "商品二维码推广工作组",
},
component: () => import("@/views/Sell/codePromotion.vue"),
},
{
path: "/Sell/latestNews",
name: "latestNews",
meta: {
name: "最新动态",
},
component: () => import("@/views/Sell/latestNews.vue"),
},
{
path: "/Sell/sellApplicationGuide",
name: "sellApplicationGuide",
meta: {
name: "商品条码在零售领域应用指南",
},
component: () => import("@/views/Sell/sellApplicationGuide.vue"),
},
],
},
{
path: "/Service/Training",
name: "Training",
meta: {
......@@ -669,7 +720,7 @@ const routes = [{
},
component: () => import("@/views/News/NoticeArticle.vue"),
},
{
path: "/News/Health",
name: "Health",
......@@ -710,7 +761,7 @@ const routes = [{
},
component: () => import("@/views/News/Retail.vue"),
},
{
path: "/News/Logistics",
name: "Logistics",
......
src/views/BarCode/generateSuccess.vue
......@@ -8,7 +8,6 @@
<img :src="codePicture" alt="" />
</div>
<div class="down_button" @click="downPicture">下载图片</div>
<!-- <a :download="codePicture">下载图片</a> -->
</div>
</div>
<!-- 条码生成成功区域end -->
......@@ -35,8 +34,6 @@ export default {
mounted() {},
methods: {
downPicture() {
// window.location.href = this.codePicture;
window.open(this.codePicture, "_blank");
this.getUrlBase64(this.codePicture).then((base64) => {
let link = document.createElement("a");
link.href = base64;
......
src/views/News/Retail.vue
......@@ -49,7 +49,7 @@
<div class="list-style">
<p class="div4-title">
<span>{{ item.title }}</span>
<span class="more">更多>></span>
<span class="more" @click="lookMore(item.title)">更多>></span>
</p>
<ul>
<li v-for="(value, index) in item.list" :key="index">
......@@ -286,6 +286,13 @@ export default {
methods: {
goDetail() {
this.$router.push('/News/RetailBusiness');
},
lookMore(type) {
// if(type === '商品条码在零售领域应用指南') {
// this.$router.push('/Sell/sellApplicationGuide');
// } else if (type === '最新动态') {
// this.$router.push('/Sell/latestNews');
// }
}
},
};
......
src/views/Sell/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/Sell/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)"
@blur="handleBlur($event, info, 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
class="DT_form_inline"
>
</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
@blur="handleBlur($event, info, i)"
></el-input>
</el-form-item>
</template>
<el-form-item v-if="i === 0">
<img
@click="addRow"
src="../../assets/image/barcode/add.png"
alt=""
class="button_sty"
/>
</el-form-item>
<el-form-item v-else>
<img
@click="deleteRow(i)"
src="../../assets/image/barcode/delete.png"
alt=""
class="button_sty"
/>
</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(i, 1);
},
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);
}
},
handleBlur(event, info, index) {
if (
event.target.value.length < info.minLength ||
event.target.value.length > info.maxLength
) {
this.$message.error(info.prompt);
}
},
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,
.DT_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,
.DT_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;
}
.DT_form_inline.el-date-editor,
.DT_form_inline.el-date-editor .el-input__inner {
width: 320px;
height: 40px;
}
.DT_form_inline.el-input .el-input__inner {
padding-left: 40px;
}
</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;
}
.button_sty {
cursor: pointer;
}
}
.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/Sell/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/Sell/codePromotion.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/Sell/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/Sell/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() {
this.getUrlBase64(this.codePicture).then((base64) => {
let link = document.createElement("a");
link.href = base64;
link.download = "qrCode.png";
link.click();
});
},
getUrlBase64(url) {
return new Promise((resolve) => {
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
let img = new Image();
img.crossOrigin = "Anonymous"; //允许跨域
img.src = url;
img.onload = function () {
canvas.height = 102;
canvas.width = 300;
ctx.drawImage(img, 0, 0, 300, 102);
let dataURL = canvas.toDataURL("image/png");
canvas = null;
resolve(dataURL);
};
});
},
},
};
</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/Sell/index.vue 0 → 100644
<template>
<div class="business container">
<breadcrumb />
<div class="row">
<div class="col-lg-4">
<left2 :list="routes" ref="left" />
</div>
<div class="col-lg-8">
<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: "商品二维码推广工作组",
path: "/Sell/codePromotion",
active: "codePromotion",
},
{
name: "商品条码在零售领域应用指南",
path: "/Sell/sellApplicationGuide",
active: "sellApplicationGuide",
},
{
name: "最新动态",
path: "/Sell/latestNews",
active: "latestNews",
},
{
name: "商品二维码在零售领域的应用",
path: "/Sell/qrApplication",
active: "qrApplication",
},
{
name: "图片集",
path: "/Sell/guideAndCase",
active: "guideAndCase",
},
],
},
],
};
},
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/Sell/latestNews.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/Sell/qrApplication.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/Sell/sellApplicationGuide.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
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