Skip to content

G
gs1
Commit 3cd465ea by 方圆
Options

零售部分页面

parent 259d7711
Showing with 640 additions and 655 deletions
.npmrc 0 → 100644
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
registry=https://registry.npm.taobao.org
\ No newline at end of file
package-lock.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/axios/api.js
......@@ -25,6 +25,7 @@ import news from "./module/news.js"
import user from "./module/user.js"
import myManage from "./module/myManage";
import barcode from "./module/barcode";
import sell from "./module/sell";
const api = {
home,
......@@ -38,6 +39,7 @@ const api = {
getCaptcha,
user,
barcode,
sell,
}
export default api
src/axios/module/sell.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' : '';
// 获取首页最新动态
const getHomeLatestNews = (params = {}) => {
return POST(`${Prefix}/office/news/api/retailTop7Info`, params)
}
// 获取首页应用指南
const getHomeGuideList = (params = {}) => {
return POST(`${Prefix}/office/retail/api/guideList`, params)
}
// 获取首页和更多页面商品二维码在零售领域的应用
const getQRCodeList = (params = {}) => {
return POST(`${Prefix}/office/news/api/retailCodeList`, params)
}
// 获取图片集列表
const getPictureList = (params = {}) => {
return POST(`${Prefix}/office/picture/api/retailPictureList`, params)
}
// 商品二维码在零售领域的应用、最新动态根据id获取详情
const geDetailById = (params = {}) => {
return GET(`${Prefix}/office/news/api/info/${params.id}`)
}
// 商品条码在零售领域应用指南根据id获取详情
const geGuideDetailById = (params = {}) => {
return GET(`${Prefix}/office/retail/api/getDetail/${params.id}`)
}
// 图片集根据id获取详情
const getPictureById = (params = {}) => {
return GET(`${Prefix}/office/picture/api/info/${params.id}`)
}
// 获取最新动态列表
const getLatestNews = (params = {}) => {
return POST(`${Prefix}/office/news/api/retailList`, params)
}
export default {
getHomeLatestNews,
getHomeGuideList,
getQRCodeList,
getPictureList,
geDetailById,
geGuideDetailById,
getPictureById,
getLatestNews,
}
\ No newline at end of file
src/router/index.js
......@@ -509,12 +509,12 @@ const routes = [{
component: () => import("@/views/Sell/index"),
redirect: '/Sell/SSCC',
children: [{
path: "/Sell/SSCC",
name: "SSCC",
path: "/Sell/pictureList",
name: "pictureList",
meta: {
name: "SSCC条码生成",
name: "图片集",
},
component: () => import("@/views/Sell/SSCC.vue"),
component: () => import("@/views/Sell/pictureList.vue"),
},
{
path: "/Sell/qrApplication",
......@@ -548,6 +548,14 @@ const routes = [{
},
component: () => import("@/views/Sell/sellApplicationGuide.vue"),
},
{
path: "/Sell/detail",
name: "detail",
meta: {
name: "详情页",
},
component: () => import("@/views/Sell/detail.vue"),
},
],
},
{
......
src/views/BarCode/SSCC.vue
......@@ -138,6 +138,7 @@ export default {
writeCodeList: [],
showSuccess: false,
codePicture: "",
isGenerate: true,
};
},
watch: {
......@@ -183,17 +184,10 @@ export default {
}
},
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
return item.codeValue === event;
});
this.writeCodeList[i].cValue = "";
this.writeCodeList[i].format = obj.format;
this.writeCodeList[i].isCheck = obj.isCheck;
......@@ -209,17 +203,6 @@ export default {
} 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({
......@@ -232,7 +215,6 @@ export default {
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) {
......@@ -244,7 +226,10 @@ export default {
event.target.value.length < info.minLength ||
event.target.value.length > info.maxLength
) {
this.isGenerate = false;
this.$message.error(info.prompt);
} else {
this.isGenerate = true;
}
},
async queryCheckCode(code, content, i) {
......@@ -255,19 +240,17 @@ export default {
const listRes = await this.$api.barcode.queryCheckCode(params);
const { returnCode, data } = listRes;
if (returnCode === "0") {
console.log(data, "-----------------");
this.writeCodeList[i].checkCode = data;
this.isGenerate = true;
} else {
// this.identifierList = [];
this.isGenerate = false;
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;
// }
if(!this.isGenerate) {
return;
}
let param = [];
this.writeCodeList.map((item) => {
if (item.cValue) {
......@@ -276,9 +259,7 @@ export default {
} else {
param.push(`${item.flag},${item.cValue}`);
}
}
return item;
});
const params = {
......
src/views/Sell/GRAI.vue deleted 100644 → 0
<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/codeFooter.vue deleted 100644 → 0
<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/copms/list.vue
......@@ -3,7 +3,7 @@
<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>
<span>{{tmp.title}}</span>
</div>
<!-- <div class="col-lg-2 list-right">{{tmp.time}}</div> -->
</div>
......
src/views/Sell/detail.vue 0 → 100644
<template>
<div class="detail_page">
<div class="top_border"></div>
<div class="title_box">{{newsInfo && newsInfo.title ? newsInfo.title : ''}}</div>
<div class="writer_info" v-if="preTitle === '图片集'">
<div>作者：{{newsInfo && newsInfo.auditor ? newsInfo.auditor : ''}}</div>
<div>日期：{{newsInfo && newsInfo.inputdate ? newsInfo.inputdate : ''}}</div>
</div>
<div class="writer_info" v-else>
<div>作者：{{newsInfo && newsInfo.author ? newsInfo.author : ''}}</div>
<div>日期：{{newsInfo && newsInfo.releasedate ? newsInfo.releasedate : ''}}</div>
</div>
<div class="content_box" v-html="newsInfo.content" v-if="newsInfo.content"></div>
<div class="source_box">{{newsInfo && newsInfo.source ? newsInfo.source : ''}}</div>
</div>
</template>
<script>
export default {
name: 'detail',
data() {
return {
newsInfo: {}
}
},
mounted() {
this.preTitle = this.$route.query && this.$route.query.preTitle ? this.$route.query.preTitle : '';
this.curPath = "";
this.id = this.$route.query && this.$route.query.id ? this.$route.query.id : '';
if (this.preTitle === '商品二维码在零售领域的应用') {
this.curPath = '/Sell/qrApplication';
} else if (this.preTitle === '商品条码在零售领域应用指南') {
this.curPath = '/Sell/sellApplicationGuide';
} else if (this.preTitle === '最新动态') {
this.curPath = '/Sell/latestNews';
} else if (this.preTitle === '图片集') {
this.curPath = '/Sell/pictureList';
}
this.geDetailById();
},
methods: {
// 列表
async geDetailById() {
const params = {
id: this.id,
};
let listRes = null;
if(this.preTitle === '商品条码在零售领域应用指南') {
console.log(111)
listRes = await this.$api.sell.geGuideDetailById(params);
} else if (this.preTitle === '图片集') {
console.log(333);
listRes = await this.$api.sell.getPictureById(params);
} else {
console.log(222);
listRes = await this.$api.sell.geDetailById(params);
}
const { returnCode, data } = listRes;
if (returnCode === "0") {
this.newsInfo = data;
// 面包屑单独处理
this.$store.commit("system/SET_BREADCRUMB", [
{ name: "应用领域", path: "/News/index" },
{ name: "零售", path: "/News/Retail" },
{ name: this.preTitle, path: this.curPath },
{ name: this.newsInfo.title },
]);
} else {
this.newsInfo = {};
this.$message.error("获取详情失败，请稍后重试~");
}
},
}
}
</script>
<style lang="scss" scoped>
.detail_page {
width: 100%;
// height: 400px;
background: #ffffff;
border-radius: 4px;
border: 1px solid #C5D8EE;
// @include module-box;
// ul {
// padding: 0;
// margin: 0;
// }
.top_border{
height: 5px;
background: #F05587;
}
.title_box{
// height: 80px;
color: #454545;
font-size: 26px;
font-family: MicrosoftYaHei;
text-align: center;
padding: 25px 30px 22px 30px;
}
.writer_info{
display: flex;
justify-content: space-between;
padding: 0 30px;
font-size: 12px;
font-family: MicrosoftYaHei;
color: #666666;
}
.content_box{
margin-top: 21px;
padding: 26px 30px;
border-top: 1px dashed #7D9ABD;
border-bottom: 1px dashed #7D9ABD;
}
.source_box{
height: 60px;
text-align: right;
padding: 15px 30px;
color: #666666;
font-size: 12px;
font-family: MicrosoftYaHei;
}
}
</style>
\ No newline at end of file
src/views/Sell/generateSuccess.vue deleted 100644 → 0
<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
......@@ -28,11 +28,11 @@ export default {
path: "",
active: "",
children: [
{
name: "商品二维码推广工作组",
path: "/Sell/codePromotion",
active: "codePromotion",
},
// {
// name: "商品二维码推广工作组",
// path: "/Sell/codePromotion",
// active: "codePromotion",
// },
{
name: "商品条码在零售领域应用指南",
path: "/Sell/sellApplicationGuide",
......@@ -50,8 +50,8 @@ export default {
},
{
name: "图片集",
path: "/Sell/guideAndCase",
active: "guideAndCase",
path: "/Sell/pictureList",
active: "pictureList",
},
],
},
......
src/views/Sell/latestNews.vue
......@@ -2,7 +2,8 @@
<div class="composite">
<cate :father="bzkydtCate"></cate>
<div class="container">
<list :list="tableResult.list" @getInfo="getInfo" />
<list :list="tableResult.list" @getInfo='getInfo' />
<pages :total="tableResult.totalCount" :currPage="tableResult.currPage" :pageSize="tableResult.pageSize" @getLimit='initListFn' />
</div>
</div>
</template>
......@@ -10,57 +11,69 @@
import { mapMutations } from "vuex";
import cate from "../comps/cate.vue";
import list from "./copms/list.vue";
import { FILE_PREFIX } from "@/config/constant";
import pages from "../comps/pages2.vue";
export default {
components: {
cate,
list,
pages,
},
data() {
return {
bzkydtCate: {
name: "指南&案例",
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,
},
],
tableResult:{
list:[],
currPage:1,
pageSize:15,
totalCount:0
},
};
},
created() {
this.initListFn(this.tableResult.currPage);
},
mounted() {
// 面包屑单独处理
this.$store.commit("system/SET_BREADCRUMB", [
{ name: "应用领域", path: "/News/index" },
{ name: "物流", path: "/News/Logistics" },
{ name: "指南&案例" },
{ name: "零售", path: "/News/Retail" },
{ name: "最新动态" },
]);
},
created() {},
methods: {
// 详情
getInfo(item) {
if (item.flag === 1) {
window.open(FILE_PREFIX + item.url, "_blank");
methods:{
...mapMutations({
setMatche: "setMatche",
}),
// 列表
async initListFn(page) {
const params = {
page: page,
size: this.tableResult.pageSize,
};
const listRes = await this.$api.sell.getLatestNews(params);
const { returnCode, data } = listRes;
if (returnCode === "0") {
this.tableResult = data;
} else {
this.$message.error("获取最新动态失败，请稍后重试~");
}
},
},
// 详情
getInfo(item){
this.$router.push({
path: '/Sell/detail',
query: {
id: item.id,
preTitle: '最新动态',
}
});
}
}
};
</script>
<style lang="scss" scoped>
......
src/views/Sell/pictureList.vue 0 → 100644
<template>
<div class="picNews">
<div class="picNews-top">
<div class="split_line"></div>
<cate :father="tpzxCate"></cate>
<div class="picNews-bottom">
<div class="container">
<ul class="picNews-ul">
<li v-for="(tmp, i) in tableResult.list" :key="i" @click="getInfo(tmp.pictureid,tmp.jumppath)">
<div class="picNews-li-tp">
<img :src="tmp.picFile" alt="" />
</div>
<div class="picNews-li-bt">
{{tmp.title}}
</div>
</li>
</ul>
<pages :total="tableResult.totalCount" :currPage="tableResult.currPage" :pageSize="tableResult.pageSize" @getLimit='initListFn' />
</div>
</div>
</div>
</div>
</template>
<script>
import { mapMutations } from "vuex";
import cate from "../comps/cate.vue";
import pages from "../comps/pages2.vue";
export default {
components: {
cate,
pages,
},
data() {
return {
tpzxCate: {
name: "图片集",
ico: "",
},
tableResult:{
list:[],
currPage:1,
pageSize:16,
totalCount:0
},
pictureListArr:[]
};
},
created(){
this.initListFn(this.tableResult.currPage);
},
mounted() {
// 面包屑单独处理
this.$store.commit("system/SET_BREADCRUMB", [
{ name: "应用领域", path: "/News/index" },
{ name: "零售", path: "/News/Retail" },
{ name: "图片集" },
]);
},
methods: {
...mapMutations({
setMatche: "setMatche",
}),
// 图片资讯列表
async initListFn(page,limit) {
const params = {
page: page,
size: this.tableResult.pageSize,
};
const listRes =
await this.$api.sell.getPictureList(params);
const { returnCode, data } = listRes;
if (returnCode === "0") {
this.tableResult = data
}
},
// 详情
getInfo(id,directpath){
if (directpath) {
window.open(directpath,'_blank');
} else {
this.$router.push({
path: '/Sell/detail',
query: {
id,
preTitle: '图片集',
}
});
}
}
},
};
</script>
<style lang="scss">
.picNews {
@media screen and (min-width: 992px) {
.picNews-ul {
justify-content: space-between;
}
}
@media screen and (max-width: 992px) {
.picNews-ul {
justify-content: space-around;
}
}
}
</style>
<style lang="scss" scoped>
.picNews {
.split_line{
height: 5px;
background: #F05587;
}
ul {
padding: 0;
margin: 0;
}
.picNews-ul {
display: flex;
flex-wrap: wrap;
margin-top: 30px;
li {
width: 187px;
background: #ffffff;
border-radius: 4px;
margin-bottom: 30px;
cursor: pointer;
&:hover{
box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
}
img {
width: 100%;
}
.picNews-li-bt {
width: 90%;
margin: 0 auto;
text-align: center;
color: #414345;
font-size: 14px;
padding: 14px 0;
}
}
}
.picNews-top {
@include module-box;
}
.picNews-bottom {
// @include module-box;
// margin-top: 30px;
}
.picNews-li-tp{
img{
height: 140px;
background: url('../../assets/image/news/tpzx-tp1.jpg') 100% 100%;
}
}
}
</style>
\ No newline at end of file
src/views/Sell/qrApplication.vue
......@@ -2,7 +2,8 @@
<div class="composite">
<cate :father="bzkydtCate"></cate>
<div class="container">
<list :list="tableResult.list" @getInfo="getInfo" />
<list :list="tableResult.list" @getInfo='getInfo' />
<pages :total="tableResult.totalCount" :currPage="tableResult.currPage" :pageSize="tableResult.pageSize" @getLimit='initListFn' />
</div>
</div>
</template>
......@@ -10,88 +11,69 @@
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";
import pages from "../comps/pages2.vue";
export default {
components: {
cate,
list,
pages,
},
data() {
return {
bzkydtCate: {
name: "标准",
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,
},
],
tableResult:{
list:[],
currPage:1,
pageSize:15,
totalCount:0
},
};
},
created() {
this.initListFn(this.tableResult.currPage);
},
mounted() {
// 面包屑单独处理
this.$store.commit("system/SET_BREADCRUMB", [
{ name: "应用领域", path: "/News/index" },
{ name: "物流", path: "/News/Logistics" },
{ name: "政策法规&行业资讯" },
{ name: "零售", path: "/News/Retail" },
{ 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");
methods:{
...mapMutations({
setMatche: "setMatche",
}),
// 列表
async initListFn(page) {
const params = {
page: page,
size: this.tableResult.pageSize,
};
const listRes = await this.$api.sell.getQRCodeList(params);
const { returnCode, data } = listRes;
if (returnCode === "0") {
this.tableResult = data;
} else {
this.$message.error("获取商品二维码在零售领域的应用失败，请稍后重试~");
}
},
},
// 详情
getInfo(item){
this.$router.push({
path: '/Sell/detail',
query: {
id: item.id,
preTitle: '商品二维码在零售领域的应用',
}
});
}
}
};
</script>
<style lang="scss" scoped>
......
src/views/Sell/sellApplicationGuide.vue
......@@ -2,7 +2,8 @@
<div class="composite">
<cate :father="bzkydtCate"></cate>
<div class="container">
<list :list="tableResult.list" @getInfo="getInfo" />
<list :list="tableResult.list" @getInfo='getInfo' />
<pages :total="tableResult.totalCount" :currPage="tableResult.currPage" :pageSize="tableResult.pageSize" @getLimit='initListFn' />
</div>
</div>
</template>
......@@ -10,88 +11,69 @@
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";
import pages from "../comps/pages2.vue";
export default {
components: {
cate,
list,
pages,
},
data() {
return {
bzkydtCate: {
name: "标准",
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,
},
],
tableResult:{
list:[],
currPage:1,
pageSize:15,
totalCount:0
},
};
},
created() {
this.initListFn(this.tableResult.currPage);
},
mounted() {
// 面包屑单独处理
this.$store.commit("system/SET_BREADCRUMB", [
{ name: "应用领域", path: "/News/index" },
{ name: "物流", path: "/News/Logistics" },
{ name: "政策法规&行业资讯" },
{ name: "零售", path: "/News/Retail" },
{ 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");
methods:{
...mapMutations({
setMatche: "setMatche",
}),
// 列表
async initListFn(page) {
const params = {
page: page,
size: this.tableResult.pageSize,
};
const listRes = await this.$api.sell.getHomeGuideList(params);
const { returnCode, data } = listRes;
if (returnCode === "0") {
this.tableResult = data;
} else {
this.$message.error("获取商品条码在零售领域应用指南失败，请稍后重试~");
}
},
},
// 详情
getInfo(item){
this.$router.push({
path: '/Sell/detail',
query: {
id: item.id,
preTitle: '商品条码在零售领域应用指南',
}
})
}
}
};
</script>
<style lang="scss" scoped>
......
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