Commit c5cd6912 by Lyan

电子商务页面

parent 012ca3e4
...@@ -567,6 +567,55 @@ const routes = [{ ...@@ -567,6 +567,55 @@ const routes = [{
], ],
}, },
{ {
path: "/News/Ecommerce/index",
name: "Ecommerce2",
meta: {
name: "电子商务",
},
component: () => import("@/views/News/Ecommerce/index"),
children: [{
path: "/News/Ecommerce/videoList",
name: "videoList",
meta: {
name: "在线视频",
},
component: () => import("@/views/News/Ecommerce/videoList.vue"),
},
{
path: "/News/Ecommerce/benefit",
name: "benefit",
meta: {
name: "采用GS1统一物品编码的好处",
},
component: () => import("@/views/News/Ecommerce/benefit.vue"),
},
{
path: "/News/Ecommerce/download",
name: "download",
meta: {
name: "资料下载",
},
component: () => import("@/views/News/Ecommerce/download.vue"),
},
{
path: "/News/Ecommerce/latestNews",
name: "latestNews2",
meta: {
name: "应用动态",
},
component: () => import("@/views/News/Ecommerce/latestNews.vue"),
},
{
path: "/News/Ecommerce/detail",
name: "detail",
meta: {
name: "详情页",
},
component: () => import("@/views/News/Ecommerce/detail.vue"),
},
],
},
{
path: "/Service/Training", path: "/Service/Training",
name: "Training", name: "Training",
meta: { meta: {
...@@ -744,6 +793,14 @@ const routes = [{ ...@@ -744,6 +793,14 @@ const routes = [{
}, },
component: () => import("@/views/News/NoticeArticle.vue"), component: () => import("@/views/News/NoticeArticle.vue"),
}, },
{
path: "/News/viewsub",
name: "viewsub",
meta: {
name: "深度资讯详情",
},
component: () => import("@/views/News/viewsub.vue"),
},
{ {
path: "/News/Health", path: "/News/Health",
......
...@@ -69,7 +69,7 @@ export default { ...@@ -69,7 +69,7 @@ export default {
]; ];
this.setMatche(matche); this.setMatche(matche);
let link = this.$router.resolve({ let link = this.$router.resolve({
path: `/News/msg?id=${id}`, path: `/News/viewsub?id=${id}`,
}); });
window.open(link.href,'_blank') window.open(link.href,'_blank')
} }
......
...@@ -15,19 +15,16 @@ ...@@ -15,19 +15,16 @@
<div class="lunbo-cnt"> <div class="lunbo-cnt">
<p class="lunbo-title"> <p class="lunbo-title">
<span>采用GS1统一物品编码的好处</span> <span>采用GS1统一物品编码的好处</span>
<span class="more" @click="goList">更多>></span> <span class="more" @click="goList('benefit')">更多>></span>
</p> </p>
<div class="list-style li-style"> <div class="list-style li-style">
<ul > <ul >
<li >对电商平台&卖家的好处 <li >对电商平台&卖家的好处
<p>有了全球统一的编码标识,就相当于给产品赋予了一个通行全球的合法“身份证”,让全球的买家更加信赖……</p> <p>有了全球统一的编码标识,就相当于给产品赋予了一个通行全球的合法“身份证”,让全球的买家更加信赖……</p>
</li> </li>
<li >对电商物流管理的好处 <li >对电商物流管理的好处
<p>有不论是产品、包装箱、仓库、订单还是贸易参与方,都可以通过商品条码、GLN(全球位置码)、箱码(SSCC)等统一物品编码标准来标识……</p> <p>有不论是产品、包装箱、仓库、订单还是贸易参与方,都可以通过商品条码、GLN(全球位置码)、箱码(SSCC)等统一物品编码标准来标识……</p>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -37,7 +34,7 @@ ...@@ -37,7 +34,7 @@
<div class="lunbo-cnt"> <div class="lunbo-cnt">
<p class="lunbo-title"> <p class="lunbo-title">
<span>应用动态 </span> <span>应用动态 </span>
<span class="more" @click="goList">更多>></span> <span class="more" @click="goList('latestNews')">更多>></span>
</p> </p>
<div class="list-style"> <div class="list-style">
<ul > <ul >
...@@ -51,7 +48,7 @@ ...@@ -51,7 +48,7 @@
<div class="lunbo-cnt"> <div class="lunbo-cnt">
<p class="lunbo-title"> <p class="lunbo-title">
<span>在线视频</span> <span>在线视频</span>
<!-- <span class="more">更多>></span> --> <span class="more" @click="goList('videoList')">更多>></span>
</p> </p>
<img src="../../assets/image/news/dzsw2.png" alt=""> <img src="../../assets/image/news/dzsw2.png" alt="">
...@@ -62,7 +59,7 @@ ...@@ -62,7 +59,7 @@
<div class="lunbo-cnt"> <div class="lunbo-cnt">
<p class="lunbo-title"> <p class="lunbo-title">
<span>资料下载</span> <span>资料下载</span>
<!-- <span class="more">更多>></span> --> <span class="more" @click="goList('download')">更多>></span>
</p> </p>
<div class="list-style"> <div class="list-style">
<ul > <ul >
...@@ -212,7 +209,7 @@ export default { ...@@ -212,7 +209,7 @@ export default {
getInfo(id,directpath){ getInfo(id,directpath){
const matche = [ const matche = [
{ {
name: "食品安全追溯", name: "电子商务",
path: "/News/ECommerce", path: "/News/ECommerce",
} }
]; ];
...@@ -227,9 +224,19 @@ export default { ...@@ -227,9 +224,19 @@ export default {
window.open(link.href,'_blank') window.open(link.href,'_blank')
} }
}, },
goList(){ goList(name){
let path=''
if(name=='benefit'){
path='/News/Ecommerce/benefit'
}else if(name=='download'){
path='/News/Ecommerce/download'
}else if(name=='latestNews'){
path='/News/Ecommerce/latestNews'
}else if(name=='videoList'){
path='/News/Ecommerce/videoList'
}
this.$router.push({ this.$router.push({
path: '/News/ECommerceList', path: path,
}); });
} }
}, },
......
<template>
<div class="composite">
<cate :father="bzkydtCate"></cate>
<div class="container">
<p class="title">对于电商平台&卖家来说,商品条码在电子商务中有利于促进交易</p>
<p class="cnt">对于电商企业来说,有了全球统一的编码标识,就相当于给产品赋予了一个通行全球的合法“身份证”,让全球的买家更加信赖,产品无论销往何处,都能有据可查,有源可循,促其实现商品信息的查验,不但可以提升商品品质的可信度,还能让消费者快速精准找到商品,减少搜索时间,提高店铺流,提升用户的购物体验。</p>
<p class="imgcenter"><img src="../../../assets/image/news/e1.png" alt="" width="50%"></p>
<div class="border1"></div>
<p class="cnt">对于卖家来说,商品条码管理体系可以帮助卖家实现订货、补货、结算、盘点等自动化管理,还可以对商品销售情况的数据采集分析,进而对运营进行合理布局,提高效率,降低成本。</p>
<p class="title">对于电商物流管理来说,商品条码助力电商物流降本增效</p>
<p class="cnt">不论是产品、包装箱、仓库、订单还是贸易参与方,都可以通过商品条码、GLN(全球位置码)、箱码等统一物品编码标准来标识,使供应链上下游两端的信息互动,仓储物流运输等各环节信息进行对接,效率大大提升,真正实现自动化、可视化管理,降低运营成本。</p>
<p class="imgcenter"><img src="../../../assets/image/news/e2.png" alt="" width="60%"></p>
</div>
</div>
</template>
<script>
import cate from "../../comps/cate.vue";
export default {
components: {
cate,
},
data() {
return {
bzkydtCate: {
name: "采用GS1统一物品编码的好处",
ico: "",
},
tableResult: {
list: [],
},
};
},
mounted() {
// 面包屑单独处理
this.$store.commit("system/SET_BREADCRUMB", [
{ name: "资讯中心", path: "/News" },
{ name: "应用领域", path: "/News/index" },
{ name: "电子商务", path: "/News/Ecommerce" },
{ name: "采用GS1统一物品编码的好处" },
]);
},
created() {},
methods: {
},
};
</script>
<style lang="scss" scoped>
.composite {
@include module-box;
padding-bottom: 10px;
.title{
color: #04408D;
font-size: 16px;
margin-top: 29px;
&::before{
content: '';
display: inline-block;
width: 4px;
height: 4px;
background-color: #F26335;
vertical-align: middle;
margin-right: 7px;
border-radius: 4px;
}
}
.cnt{
color: #454545;
font-size: 14px;
line-height: 26px;
text-indent: 28px;
margin-top: 14px;
}
.imgcenter{
text-align: center;
margin: 20px 0;
}
.border1{
border-top: 1px solid #F3F3F3;
}
}
</style>
\ No newline at end of file
<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.title}}</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;
}
}
.row:hover{
color: #f26335;
}
}
</style>
\ No newline at end of file
<template>
<div class="detail_page">
<div class="top_border"></div>
<div class="title_box">{{newsInfo && newsInfo.title ? newsInfo.title : ''}}</div>
<div class="writer_info">
<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="videoStyle" v-if="preTitle === '在线视频'">
<video class="video" controls width="100%" height="100%" >
<source :src="newsInfo.wavname" type="video/mp4">
</video>
</div>
<div class="source_box">{{newsInfo && newsInfo.source ? newsInfo.source : ''}}</div>
</div>
</template>
<script>
export default {
name: 'detail',
data() {
return {
newsInfo: {
},
preTitle:''
}
},
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 = '/News/Ecommerce/videoList';
} else if (this.preTitle === '应用动态') {
this.curPath = '/News/Ecommerce/latestNews';
}
this.geDetailById();
},
methods: {
// 列表
async geDetailById() {
const params = {
id: this.id,
};
let listRes = null;
if(this.preTitle === '在线视频') {
listRes = await this.$api.news.jcspiInfo(params);
} else {
listRes = await this.$api.news.newsInfo(params);
}
const { returnCode, data } = listRes;
if (returnCode === "0") {
this.newsInfo = data;
// 面包屑单独处理
this.$store.commit("system/SET_BREADCRUMB", [
{ name: "资讯中心", path: "/News/index" },
{ name: "电子商务", path: "/News/Ecommerce" },
{ 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: #C1D82F;
}
.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 26px 30px;
font-size: 12px;
font-family: MicrosoftYaHei;
color: #666666;
border-bottom: 1px dashed #7D9ABD;
}
.content_box{
margin-top: 21px;
padding: 26px 30px;
margin-top: 20px;
line-height: 28px;
font-size: 14px;
text-indent: 28px;
color: #454545;
/deep/p{
margin: 0 0 10px
}
}
.videoStyle{
padding: 26px 30px;
width: 449px;
height: 300px;
margin-top: 30px;
text-align: center;
margin:0 auto
}
.source_box{
border-top: 1px dashed #7D9ABD;
height: 60px;
text-align: right;
padding: 15px 30px;
color: #666666;
font-size: 12px;
font-family: MicrosoftYaHei;
}
}
</style>
\ No newline at end of file
<template>
<div class="composite">
<cate :father="bzkydtCate"></cate>
<div class="container">
<list :list="tableResult.list" @getInfo="getInfo" />
</div>
</div>
</template>
<script>
import { mapState, 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,
},
computed: {
...mapState(["urls"]),
},
data() {
return {
bzkydtCate: {
name: "资料下载",
ico: "",
},
tableResult: {
list: [],
},
};
},
mounted() {
// 面包屑单独处理
this.$store.commit("system/SET_BREADCRUMB", [
{ name: "资讯中心", path: "/News/index" },
{ name: "电子商务", path: "/News/Ecommerce" },
{ name: "资料下载" },
]);
this.tableResult.list= [
{
title: "《电子商务商品条码应用指南》",
url: `${this.urls.gs1cnTwo}Manage/down/201601Ecomm.pdf`,
flag: 1,
},
{
title: "《商品条码在电子商务领域的应用》",
url: `${this.urls.gs1cnTwo}Manage/down/2016Ecommerce.pdf`,
flag: 1,
},
{
title: "《ebXML标准技术规范——全球电子商务标准》",
url: "/News/viewsub?id=38",
flag: 1,
},
{
title: "GLN",
url:`${this.urls.gs1cnTwo}Manage/down/201204GLN.pdf`,
flag: 1,
},
]
},
created() {},
methods: {
// 详情
getInfo(item) {
window.open(item.url, "_blank");
},
},
};
</script>
<style lang="scss" scoped>
.composite {
@include module-box;
ul {
padding: 0;
margin: 0;
}
}
</style>
\ No newline at end of file
<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: "",
active: "",
},
{
name: "采用GS1统一物品编码的好处",
path: "/News/Ecommerce/benefit",
active: "benefit",
},
{
name: "应用动态",
path: "/News/Ecommerce/latestNews",
active: "latestNews2",
},
{
name: "在线视频",
path: "/News/Ecommerce/videoList",
active: "videoList",
},
{
name: "资料下载",
path: "/News/Ecommerce/download",
active: "download",
},
],
},
],
};
},
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>
<template>
<div class="composite">
<cate :father="bzkydtCate"></cate>
<div class="container">
<list :list="tableResult.list" @getInfo='getInfo' />
<pages :total="tableResult.totalCount" :currPage="tableResult.currPage" :pageSize="tableResult.pageSize" @getLimit='initListFn' />
</div>
</div>
</template>
<script>
import { mapMutations } from "vuex";
import cate from "../../comps/cate.vue";
import list from "./copms/list.vue";
import pages from "../../comps/pages2.vue";
export default {
components: {
cate,
list,
pages,
},
data() {
return {
bzkydtCate: {
name: "最新动态",
ico: "",
},
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/Ecommerce" },
{ name: "应用动态" },
]);
},
methods:{
...mapMutations({
setMatche: "setMatche",
}),
//应用动态
async initListFn(page) {
const params = {
page: page,
limit: this.tableResult.pageSize,
};
const listRes =
await this.$api.news.yydtList(params);
const { returnCode, data } = listRes;
if (returnCode === "0") {
this.tableResult = data
}else {
this.$message.error("获取最新动态失败,请稍后重试~");
}
},
// 详情
getInfo(item){
this.$router.push({
path: '/News/Ecommerce/detail',
query: {
id: item.id,
preTitle: '应用动态',
}
});
}
}
};
</script>
<style lang="scss" scoped>
.composite {
@include module-box;
ul {
padding: 0;
margin: 0;
}
}
</style>
\ No newline at end of file
<template>
<div class="composite">
<cate :father="bzkydtCate"></cate>
<div class="container">
<list :list="tableResult.list" @getInfo='getInfo' />
<pages :total="tableResult.totalCount" :currPage="tableResult.currPage" :pageSize="tableResult.pageSize" @getLimit='initListFn' />
</div>
</div>
</template>
<script>
import { mapMutations } from "vuex";
import cate from "../../comps/cate.vue";
import list from "./copms/list.vue";
import pages from "../../comps/pages2.vue";
export default {
components: {
cate,
list,
pages,
},
data() {
return {
bzkydtCate: {
name: "最新动态",
ico: "",
},
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/Retail" },
{ name: "在线视频" },
]);
},
methods:{
...mapMutations({
setMatche: "setMatche",
}),
//应用动态
async initListFn(page) {
const params = {
page: page,
limit: this.tableResult.pageSize,
};
const listRes =
await this.$api.news.spList(params);
const { returnCode, data } = listRes;
if (returnCode === "0") {
this.tableResult = data
}else {
this.$message.error("获取最新动态失败,请稍后重试~");
}
},
// 详情
getInfo(item){
this.$router.push({
path: '/News/Ecommerce/detail',
query: {
id: item.id,
preTitle: '在线视频',
}
});
}
}
};
</script>
<style lang="scss" scoped>
.composite {
@include module-box;
ul {
padding: 0;
margin: 0;
}
}
</style>
\ No newline at end of file
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div v-for="(tmp, i) in list" :key="i" class="row" @click="giveId(tmp.id,tmp.directpath)"> <div v-for="(tmp, i) in list" :key="i" class="row" @click="giveId(tmp.id,tmp.directpath)">
<div class="col-lg-6 list-left"> <div class="col-lg-6 list-left">
<span></span> <span></span>
<span>{{tmp.title}}</span> <span v-html="tmp.title">{{tmp.title}}</span>
</div> </div>
<div class="col-lg-2 list-right">{{tmp.showtime}}</div> <div class="col-lg-2 list-right">{{tmp.showtime}}</div>
</div> </div>
......
<template>
<div class="org container">
<breadcrumb />
<div class="row status-container">
<div class="showHtml" v-html="content"></div>
</div>
</div>
</template>
<script>
import breadcrumb from "../comps/breadcrumb.vue";
import pages from "../comps/pages2.vue";
export default {
components: {
pages,
breadcrumb,
},
data() {
return {
id:this.$route.query.id,
content:'',
title:'',
showtime:'',
author:''
};
},
computed: {
routes() {
},
},
created() {
this.InfoFn();
},
mounted() {
console.log(2)
// 面包屑单独处理
},
methods:{
// 详情
async InfoFn() {
const params = {
id:this.id,
};
const listRes =
await this.$api.news.newsTopicInfo(params);
const { returnCode, data } = listRes;
if (returnCode === "0") {
this.content=data.content;
this.title=data.title
this.showtime = data.showtime
this.author=data.author
this.$store.commit("system/SET_BREADCRUMB", [
{ name: "资讯中心", path: "/New/index" },
{ name: "深度资讯", path: "/News/DepthTopics" },
{ name: this.title },
]);
}
},
}
};
</script>
<style lang="scss" scoped>
@media screen and(min-width: 992px) {
}
@media screen and (max-width: 992px) {
}
</style>
<style lang="scss" scoped>
.org {
padding-bottom: 20px;
.title-style{
font-size: 24px;
text-align: center;
border-bottom: 1px solid #b2b2b8;
color: #002c6c;
margin-bottom: 10px;
P{
&:first-child{
padding: 30px;
font-size: 24px;
margin-bottom: 15px;
}
&:last-child{
color: #666666;
font-size: 12px;
}
}
}
.status-container{
border-top: 7px solid #002c6c;
background: #fff;
padding:0 20px;
padding-bottom: 20px;
>div{
font-size: 14px;
padding-bottom: 15px;
}
.showHtml{
border-bottom: 1px solid #b2b2b8;
padding-bottom: 30px;
margin-bottom: 25px;
margin-top: 20px;
line-height: 28px;
font-size: 14px;
text-indent: 28px;
color: #454545;
/deep/p{
margin: 0 0 10px
}
}
}
}
</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