Skip to content

G
gs1
Commit 3442ed21 by Jianli Ou
Options

Merge branch 'master' of https://gitee.com/gs1-office-web-sit/gs1

parents 2948d05e f470ca25
Showing with 831 additions and 1225 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/News/Retail.vue
......@@ -3,9 +3,6 @@
<breadcrumb />
<div class="composite">
<img src="../../assets/image/news/ls1.png" alt="" />
<!-- <p>商品条码作为商品流通“身份证”，已在上亿种商品、100多万家商超、95%以上的消费品上面广泛使用，拥有条码“身份证”的“中国制造”产品已经遍及世界的各个角落。</p>
<p>商品条码在零售领域的普及，使收款员仅需扫描条码就实现了商品的结算，大大提升了结算效率，减少了顾客的等待时间，避免了人为的差错造成的经济损失和管理上的混乱。</p>
<p>商品条码作为商品流通“身份证”，已在上亿种商品、100多万家商超、95%以上的消费品上面广泛使用，拥有条码“身份证”的“中国制造”产品已经遍及世界的各个角落。商品条码在零售领域的普及，使收款员仅需扫描条码就实现了商品的结算，大大提升了结算效率，减少了顾客的等待时间，避免了人为的差错造成的经济损失和管理上的混乱。</p> -->
<p>
零售作为商品条码应用最为广泛的领域之一，一直备受政府、企业和消费者关注。商品条码作为商品流通“身份证”，已在数亿种商品、数百万家商超、95%以上的消费品上面广泛使用，拥有条码“身份证”的“中国制造”产品已经遍及世界的各个角落。
</p>
......@@ -52,8 +49,8 @@
<span class="more" @click="lookMore(item.title)">更多>></span>
</p>
<ul>
<li v-for="(value, index) in item.list" :key="index">
{{ value.name }}
<li v-for="(value, index) in item.list" :key="index" @click="lookDetail(value.id, item.title)">
{{ value.title }}
</li>
</ul>
</div>
......@@ -66,17 +63,12 @@
<div class="list-style">
<p class="div4-title">
<span>商品二维码在零售领域的应用</span>
<span class="more">更多>></span>
<span class="more" @click="lookMore('商品二维码在零售领域的应用')">更多>></span>
</p>
<ul>
<li>
如何在非零售商品上使用商品条码——非零售商品如何在非零售商品上使用商品条码——非零售商品…
<li v-for="(item, index) in qrCodeList" :key="'qrCodeList' + index" @click="lookDetail(item.id, '商品二维码在零售领域的应用')">
{{item.title}}
</li>
<li>山东德州市场约两成零售商品的条码为假冒伪造</li>
<li>如何在非零售商品上使用商品条码——非零售商品…</li>
<li>如何在非零售商品上使用商品条码——非零售商品…</li>
<li>如何在非零售商品上使用商品条码——非零售商品…</li>
<li>如何在非零售商品上使用商品条码——非零售商品…</li>
</ul>
<img
src="../../assets/image/news/ls3.png"
......@@ -88,8 +80,8 @@
<div class="col-lg-6 lunbo">
<div class="lunbo-cnt">
<p class="lunbo-title">
<span>商品二维码在零售领域的应用</span>
<span class="more">更多>></span>
<span>图片集</span>
<span class="more" @click="lookMore('图片集')">更多>></span>
</p>
<div
id="carouselExampleCaptions"
......@@ -119,39 +111,15 @@
></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">
<div class="carousel-item" v-for="(item, index) in pictureList" :key="'pictureList' + index" :class="index === 0? 'active' : ''" @click="lookPictureDetail(item)">
<img
src="../../assets/image/news/ls4.png"
:src="item.picFile"
class="d-block w-100"
alt="..."
alt=""
/>
<div class="carousel-caption d-none d-md-block">
<p>
国家市场监督管理总局赴中国物品编码中心进行追溯工作调研
{{item.title}}
</p>
</div>
</div>
......@@ -274,6 +242,10 @@ export default {
],
},
],
qrCodeList: [],
qrCodeImg: '',
pictureList: [],
};
},
mounted() {
......@@ -282,17 +254,114 @@ export default {
{ name: "应用领域", path: "/News/index" },
{ name: "零售" },
]);
this.getHomeLatestNews();
this.getHomeGuideList();
this.getQRCodeList();
this.getPictureList();
},
methods: {
goDetail() {
this.$router.push('/News/RetailBusiness');
},
lookMore(type) {
// if(type === '商品条码在零售领域应用指南') {
// this.$router.push('/Sell/sellApplicationGuide');
// } else if (type === '最新动态') {
// this.$router.push('/Sell/latestNews');
// }
if(type === '商品条码在零售领域应用指南') {
this.$router.push('/Sell/sellApplicationGuide');
} else if (type === '最新动态') {
this.$router.push('/Sell/latestNews');
} else if (type === '商品二维码在零售领域的应用') {
this.$router.push('/Sell/qrApplication');
} else if (type === '图片集') {
this.$router.push('/Sell/pictureList');
}
},
lookDetail(id, preTitle) {
console.log(id, preTitle, 'lookDetail----')
this.$router.push({
path: '/Sell/detail',
query: {
id,
preTitle,
}
});
},
// 获取首页最新动态
async getHomeLatestNews() {
const params = {
page: "1",
limit: '7',
};
const listRes = await this.$api.sell.getHomeLatestNews(params);
const { returnCode, data } = listRes;
if (returnCode === "0") {
this.typeList.map(item => {
if(item.title === '最新动态') {
item.list = data;
}
return item;
});
} else {
this.$message.error("获取首页最新动态失败，请稍后重试~");
}
},
// 获取首页应用指南
async getHomeGuideList() {
const params = {
page: "1",
limit: '7',
};
const listRes = await this.$api.sell.getHomeGuideList(params);
const { returnCode, data } = listRes;
if (returnCode === "0") {
this.typeList.map(item => {
if(item.title === '商品条码在零售领域应用指南') {
item.list = data.list;
}
return item;
});
} else {
this.$message.error("获取首页商品条码在零售领域应用指南失败，请稍后重试~");
}
},
// 获取首页商品二维码在零售领域的应用
async getQRCodeList() {
const params = {
page: "1",
size: '6',
};
const listRes = await this.$api.sell.getQRCodeList(params);
const { returnCode, data } = listRes;
if (returnCode === "0") {
this.qrCodeList = data.list;
} else {
this.$message.error("获取首页商品二维码在零售领域的应用失败，请稍后重试~");
}
},
// 获取首页图片集列表
async getPictureList() {
const params = {
page: "1",
size: '3',
};
const listRes = await this.$api.sell.getPictureList(params);
const { returnCode, data } = listRes;
if (returnCode === "0") {
this.pictureList = data.list;
} else {
this.$message.error("获取首页商品二维码在零售领域的应用失败，请稍后重试~");
}
},
lookPictureDetail(item) {
if (item.jumppath) {
window.open(item.jumppath,'_blank');
} else {
this.$router.push({
path: '/Sell/detail',
query: {
id: item.pictureid,
preTitle: '图片集',
}
});
}
}
},
};
......@@ -412,6 +481,7 @@ li{
.more {
font-size: 12px;
float: right;
cursor: pointer;
}
}
ul {
......@@ -423,6 +493,7 @@ li{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
li::before {
content: "●";
......@@ -444,10 +515,12 @@ li{
li {
display: inline-block;
width: 60%;
cursor: pointer;
}
img {
position: absolute;
width: 28%;
width: 33%;
height: 240px;
top: 70px;
right: 20px;
}
......@@ -467,6 +540,7 @@ li{
.more {
font-size: 12px;
float: right;
cursor: pointer;
}
}
.carousel-control-prev-icon,
......@@ -492,6 +566,9 @@ li{
background: #f05587;
}
}
.carousel-item{
cursor: pointer;
}
.lunbo-bottom {
width: 100%;
height: 10%;
......@@ -499,6 +576,10 @@ li{
position: absolute;
bottom: 0;
}
img{
height: 411px;
background: url('../../assets/image/news/ls4.png') 100% 100%;
}
}
/deep/.carousel-caption {
font-size: 10px !important;
......
src/views/Search/check.vue
......@@ -28,7 +28,7 @@
v-model="search.result"
class="w40"
></el-input>
<a href="/Knowledge" style="margin-left: 20px"
<a href="/Knowledge/article?id=301" style="margin-left: 20px"
target="_blank" class="hover">检验码计算方法</a>
</div>
</el-form-item>
......
src/views/Search/internal.vue
......@@ -47,14 +47,15 @@
></el-input>
<div class="validate-code">
<img :src="captchaPath" @click="getCaptcha()" alt="" />
<img :src="captchaPath" @click="getCaptcha()" alt=""/>
</div>
<el-button
style="margin-left: 40px"
type="primary"
@click="handleSearchCompany"
>查询</el-button>
>查询
</el-button>
</div>
</el-form-item>
</el-form>
......@@ -79,7 +80,7 @@
<el-form-item label="验证码：">
<el-button type="primary" class="w240" @click="handleVerification">
<div style="diplay: flex; align-item: center">
<img style="height: 14px" src="./img/guard.png" alt="" />
<img style="height: 14px" src="./img/guard.png" alt=""/>
点击此处进行验证
</div>
</el-button>
......@@ -106,32 +107,32 @@
style="width: 100%"
>
<el-table-column prop="_source.code" label="厂商识别代码" width="180">
<template slot-scope="scope">
<span type="text" class="hover" size="small">{{
scope.row.id
}}</span>
</template>
</el-table-column>
<el-table-column prop="_source.firm_name" label="厂商名称" width="180">
</el-table-column>
<el-table-column prop="status" label="状态"></el-table-column>
<el-table-column label="详细">
<template>
<el-table-column label="状态">
<template slot-scope="scope">
<el-tag size="medium" effect="dark" v-if="scope.row._source.logout_flag==='0'">有效</el-tag>
<el-tag size="medium" effect="dark" v-else type="info">已注销</el-tag>
</template>
</el-table-column>
<el-table-column label="详情">
<template slot-scope="scope">
<span
type="text"
class="hover pointer"
@click="handleCheck()"
@click="handleCheckDetail(scope.row._source)"
size="small"
>详情</span
>
</template>
</el-table-column>
<el-table-column label="查看">
<template>
<el-table-column label="变更记录">
<template slot-scope="scope">
<span
type="text"
class="hover pointer"
@click="handleCheck()"
@click="handleCheckChange(scope.row._source)"
size="small"
>查看</span
>
......@@ -152,38 +153,16 @@
header-cell-class-name="search-table-hc"
style="width: 100%"
>
<el-table-column prop="_source.code" label="厂商识别代码" width="180">
<el-table-column prop="_source.code" label="商品条码" width="180">
<template slot-scope="scope">
<span type="text" class="hover" size="small">{{
scope.row.id
}}</span>
</template>
</el-table-column>
<el-table-column prop="_source.firm_name" label="厂商名称" width="180">
<el-table-column prop="_source.firm_name" label="商品名称" width="180">
</el-table-column>
<el-table-column prop="status" label="状态"></el-table-column>
<el-table-column label="详细">
<template>
<span
type="text"
class="hover pointer"
@click="handleCheck()"
size="small"
>详情</span
>
</template>
</el-table-column>
<el-table-column label="查看">
<template>
<span
type="text"
class="hover pointer"
@click="handleCheck()"
size="small"
>查看</span
>
</template>
</el-table-column>
</el-table>
</template>
<span style="color: rgb(255, 59, 48)" v-else>{{ errorMsg }}</span>
......@@ -220,19 +199,77 @@
</div>
<Vcode :show="isShowVcode" @success="onSuccess" @close="onClose"/>
<el-dialog
title="企业信息"
:visible.sync="detailDialogVisible"
top="25vh"
width="60%">
<div class="i_company_detail">
<div class="company_name">{{ companyDetail.firm_name }}</div>
<div class="c_content-wrapper">
<div class="company_detail-row">
<span class="cdr-label">厂商识别代码</span>
<span class="cdr-value">
{{ companyDetail.code }}
</span>
</div>
<div class="company_detail-row">
<span class="cdr-label">厂商名称</span>
<span class="cdr-value">
{{ companyDetail.firm_name }}
</span>
</div>
<div class="company_detail-row">
<span class="cdr-label">状态</span>
<span class="cdr-value">
{{ companyDetail.logout_flag === '0' ? '有效' : '已注销' }}
</span>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="detailDialogVisible = false">关闭</el-button>
</span>
</el-dialog>
<el-dialog
title="变更记录"
:visible.sync="changeDialogVisible"
top="25vh"
width="60%">
<div class="i_company_detail">
<div class="company_name">厂商变更信息</div>
<div class="c_content-wrapper">
<div class="company_detail-row">
<span class="cdr-th w33">变更日期</span>
<span class="cdr-th w33">变更前</span>
<span class="cdr-th w33">变更后</span>
</div>
<div class="company_detail-row" v-for="(item,i) in changeDetail" :key="i">
<span class="cdr-value w33">{{ item.changeDate }}</span>
<span class="cdr-value w33">{{ item.before }}</span>
<span class="cdr-value w33">{{ item.after }}</span>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="changeDialogVisible = false">关闭</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import Vcode from "vue-puzzle-vcode";
import validation from "@/views/Search/validation";
import moment from "moment";
const CODE = '1';
const NAME = '2';
const ADDRESS = '3';
export default {
mixins:[validation],
mixins: [validation],
data() {
return {
CODE,
......@@ -251,21 +288,37 @@ export default {
code: "",
},
result: null,
resultType:'company',
resultType: 'company',
searchCodeShow: "",
errorMsg: "",
showResult: false,
companyDetail: {
code: '12312514124',
firm_name: '水电费昂肥肥安抚',
logout_flag: '0',
},
detailDialogVisible: false,
changeDetail: [
{
changeDate: '2021-12-11',
before: '公司名称AAAAA',
after: '公司名称BBBBB',
}
],
changeDialogVisible: false,
};
},
components: {
Vcode,
},
created() {
if(this.$route.query.infoType){
if(this.$route.query.infoType === 'product'){
// console.log(moment('2021-12-26T14:00:00.000Z').format('YYYY-MM-DD HH:mm:ss'))
console.log(moment('2021-12-26T14:00:00.000Z'))
if (this.$route.query.infoType) {
if (this.$route.query.infoType === 'product') {
this.activeName = 'second'
this.productSearch.code = this.$route.query.keyword
}else if(this.$route.query.infoType === 'company'){
} else if (this.$route.query.infoType === 'company') {
this.activeName = 'first'
this.company = this.$route.query.type
this.companySearch.name = this.$route.query.keyword
......@@ -289,16 +342,26 @@ export default {
this.isVerificationPass = true;
},
// 查看按钮
handleCheck(row) {
handleCheckDetail(row) {
console.log(row);
const localeTime = new Date(moment(row.login_date).format('YYYY-MM-DD HH:mm:ss')).getTime()
const endTime = Math.floor(new Date().getTime() / 1000) - localeTime / 1000;
const day = endTime / 60 / 60 / 24;
if (day < 15) {
alert('该企业的详细信息将在注册15日后公布！')
} else {
this.companyDetail = row
this.detailDialogVisible = true
}
},
// 详情按钮
handleDetail(row) {
// 查看变更详情
handleCheckChange(row) {
console.log(row);
this.changeDialogVisible = true
},
async handleSearchCompany() {
this.showResult = true;
this.resultType= 'company'
this.resultType = 'company'
if (this.company === CODE) {
this.searchCodeShow = this.companySearch.code;
} else if (this.company === NAME) {
......@@ -309,7 +372,7 @@ export default {
const params = {type: this.company, uuid: this.uuid, code: this.searchCodeShow, captcha: this.captcha,};
const searchGlnRes = await this.$api.search.searchInternal(params);
const {returnCode, data} = searchGlnRes;
if (returnCode === "0"||returnCode === 0) {
if (returnCode === "0" || returnCode === 0) {
this.result = data.hits.hits;
} else {
this.errorMsg =
......@@ -321,19 +384,22 @@ export default {
},
async handleSearchProduct() {
this.showResult = true;
this.resultType= 'product'
const params = {uuid: this.uuid, keyword: this.productSearch.code, captcha: this.captcha,};
const searchGlnRes = await this.$api.search.searchInternalProduct(params);
if (returnCode === "0") {
this.result = [data.hits.hits];
} else {
this.errorMsg =
searchGlnRes.returnMsg ||
"没有符合条件的记录！";
this.result = null;
window.open(`http://search.anccnet.com/searchResult2.aspx?keyword=${this.productSearch.code}`, '_blank')
}
},
// this.showResult = true;
// this.resultType = 'product'
// const params = {uuid: this.uuid, keyword: this.productSearch.code, captcha: this.captcha,};
// const searchGlnRes = await this.$api.search.searchInternalProduct(params);
// if (returnCode === "0") {
// this.result = [data.hits.hits];
// } else {
// this.errorMsg =
// searchGlnRes.returnMsg ||
// "没有符合条件的记录！";
// this.result = null;
// }
// },
},
};
</script>
......@@ -347,4 +413,67 @@ export default {
background: url("./img/guard.png") center no-repeat;
background-size: 14px 14px;
}
.i_company_detail {
width: 100%;
background-color: rgba(13, 110, 253, 0.1);
border: 1px solid rgba(13, 110, 253, 0.8);
padding: 0 14px 24px;
.company_name {
font-size: 22px;
font-weight: bold;
text-align: center;
line-height: 46px;
color: #F26335;
}
.c_content-wrapper {
border: 1px solid rgba(13, 110, 253, 0.4);
border-radius: 3px;
}
.company_detail-row {
height: 30px;
line-height: 30px;
& + .company_detail-row {
border-top: 1px solid white;
}
> span {
display: inline-block;
padding-left: 6px;
}
.cdr-th.w33 {
width: 33.33%;
font-weight: bold;
text-align: center;
& + .cdr-th.w33 {
border-left: 1px solid white;
}
}
.cdr-label {
width: 24%;
border-right: 1px solid white;
}
.cdr-value {
width: 76%;
}
.cdr-value.w33 {
width: 33.33%;
text-align: center;
& + .cdr-value.w33 {
border-left: 1px solid white;
}
}
}
}
</style>
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/SSCC.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="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 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