Skip to content

G
gs1
Commit b9f718d5 by Lyan
Options

个人中心首页切图

parent 593b7840
Showing with 326 additions and 4 deletions
src/router/index.js
...@@ -850,6 +850,25 @@ const routes = [ ...@@ -850,6 +850,25 @@ const routes = [
name: "djwhlist", name: "djwhlist",
component: () => import("@/views/Djwh/djwhlist"), component: () => import("@/views/Djwh/djwhlist"),
}, },
//个人中心
{
path: "/MyManage",
name: "MyManage",
component: () => import("@/views/MyManage/index"),
children:[
{
path: "/MyManage/UnVerify/index",
name: "UnVerify",
meta: {
name: "首页",
},
component: () => import("@/views/MyManage/UnVerify/index.vue"),
},
]
},
], ],
}, },
...@@ -948,6 +967,8 @@ const routes = [ ...@@ -948,6 +967,8 @@ const routes = [
path: "*", path: "*",
redirect: "/404", redirect: "/404",
}, },
]; ];
......
src/views/MyManage/UnVerify/index.vue
<template> <template>
<div class="container">
<div class="header">
<p>网站最新推出<a href="#">在线注册</a> &nbsp;&nbsp;<a href="#">在线续展</a>&nbsp;&nbsp;<a href="#"> 产品信息通报</a>等业务</p>
</div>
<div class="content">
<div class="title">业务提醒专区</div>
<div class="content-list">
<ul>
<li>
<p class="content-title">商品条码相关业务</p>
<p>请直接登录<a href="#">网上业务大厅</a>办理商品条码在</p>
</li>
<!-- 厂商实名认证已认证 -->
<li>
<p class="content-title">厂商实名认证（办理“进口商品信息通报、GLN”等业务需先完成此认证）</p>
<p><i class="bi bi-check-circle-fill"></i>您已成为中国物品编码中心实名认证企业！</p>
<p style="padding-left:24px">您可以——前往<a href="#">中国商品信息服务平台</a> 办理<a href="#">“通报进口商品信息” “开通条码微站” “使用数据总资产服务”！</a></p>
<p style="padding-left:24px">您可以——前往<a href="#">购买GLN</a></p>
</li>
<!-- 厂商实名认证未认证 -->
<li>
<p class="content-title">厂商实名认证（办理“进口商品信息通报、GLN”等业务需先完成此认证）</p>
<p>1、进口商品数据服务</p>
<p class="list-cnt">通报进口商品数据，生成进口商品“身份证”，提供条码国际校验、数据全网分享等服务，实现进口商品扫码查询，助力进口产品入市、进场。</p>
<p>2、GLN申请</p>
<p class="list-cnt">快速申请、维护GLN信息，并对外提供GLN信息查询验证。帮助企业在EDI、GDSN、海关、追溯等应用场景中，有效识别企业主体与地理位置等信息。</p>
<div class='list-img row'>
<div class="img-p col-lg-4">
<img src="../../../assets/image/mymanage/tx.png" alt="">
<p>填写实名信息</p>
</div>
<div class="img-p col-lg-4">
<img src="../../../assets/image/mymanage/tj.png" alt="">
<p>提交书面材料</p>
</div>
<div class="img-p col-lg-4">
<img src="../../../assets/image/mymanage/sh.png" alt="">
<p>审核状态</p>
</div>
</div>
</li>
<!-- 校准未认证 -->
<li>
<p class="content-title">检测校准申请（办理“条码印制品检测”、“条码检测仪校准”等业务需先完成此申请）</p>
<p>1、条码印制品检测</p>
<p class="list-cnt">对商品条码、商品二维码、GS1通用规范（GS1 General Specifications）、医疗UDI、汽车零部件标识、追溯码、服装条码、名片二维码、物流编码等提供检验检测服务，出具检验检测报告。</p>
<p>2、条码检测仪校准</p>
<p class="list-cnt">对条码检测仪的最高反射率、最低反射率、可译码度、缺陷度、轴向不一致性、网格不一致性、反差一致性等测量参数进行校准，出具校准证书。</p>
<div class='list-img row'>
<div class="img-p col-lg-4">
<img src="../../../assets/image/mymanage/tx.png" alt="">
<p>填写实名信息</p>
</div>
<div class="img-p col-lg-4">
<img src="../../../assets/image/mymanage/tj.png" alt="">
<p>提交书面材料</p>
</div>
<div class="img-p col-lg-4">
<img src="../../../assets/image/mymanage/sh.png" alt="">
<p>审核状态</p>
</div>
</div>
</li>
<!-- 校准已认证 -->
<li>
<p class="content-title">检测校准申请（办理“条码印制品检测”、“条码检测仪校准”等业务需先完成此申请）</p>
<p><i class="bi bi-check-circle-fill"></i>您已成为中国物品编码中心检验检测/校准客户！</p>
<p style="padding-left:24px">您已成为中国物品编码中心检验检测/校准客户！</p>
<p style="padding-left:24px">您可以——办理条码检测仪校准</p>
<p style="padding-left:24px">若想申请办理上述业务，请您联系：</p>
<p style="padding-left:24px">王工：<i class="bi bi-telephone-fill color-grey"></i>010-84295493 <i class="bi bi-envelope-fill color-grey"></i>wanghy@ancc.org.cn <span class="qe"></span>2308350380</p>
<p style="padding-left:24px">胡工：<i class="bi bi-telephone-fill color-grey"></i>010-84295499 <i class="bi bi-envelope-fill color-grey"></i>hum@ancc.org.cn <span class="qe"></span>1246978728</p>
</li>
</ul>
</div>
</div>
</div>
</template> </template>
...@@ -8,6 +85,97 @@ export default { ...@@ -8,6 +85,97 @@ export default {
} }
</script> </script>
<style scoped> <style lang="scss" scoped>
.container{
.header{
height: 50px;
background: #FEF1EC;
text-align: center;
color: #F26335;
font-size: 16px;
p{
margin: 0;
line-height: 50px;
font-weight: 500;
a{
text-decoration: none;
color: #00799E;
}
}
}
.content{
@include module-box;
margin-top: 14px;
.title{
color: #F26335;
font-size: 16px;
padding: 20px 40px;
border: 1px solid #F3F3F3;
}
.content-list{
font-size: 14px;
line-height: 20px;
ul{
li{
margin-top: 19px;
border-bottom: 1px dashed #B4CDEB;
padding-bottom: 6px;
p:first-child{
color: #414345;
font-weight:600;
}
p:first-child::before{
content: "●";
color: #F26335;
margin-right: 5px;
}
p{
margin-bottom: 14px;
i{
color: #50C96B;
margin-right: 10px;
}
.color-grey{
color: #666666;
margin-left: 5px;
}
.qe{
display: inline-block;
width: 13px;
height: 13px;
background: url("../../../assets/image/mymanage/qe.png") no-repeat 100% 100%;
}
}
.list-cnt{
font-size: 13px;
color: #666666
}
.list-img{
margin-top: 31px;
text-align: center;
img{
width: 46px;
height: 46px;
margin-bottom: 16px;
}
}
}
li:last-child{
border:none;
margin-bottom: 40px;
}
}
a{
text-decoration: none;
color: #00799E;
margin: 0 5px;
}
}
}
}
</style> </style>
src/views/MyManage/comps/userInfo.vue 0 → 100644
<template>
<div class="userInfo">
<div class="cnt">
<img src="../../../assets/image/mymanage/headImg.png" alt="">
<p>{{userNamr}}/{{phone}}/{{cardNo}}</p>
<p>{{userType}} | {{nocardNo}}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
userNamr:'用户名',
phone:'手机号',
cardNo:'条码卡号',
userType:'用户类别',
nocardNo:'未申请条码卡'
};
},
created() {
},
};
</script>
<style lang="scss" scoped>
.userInfo{
background: #fff;
min-height: 224px;
margin-bottom: 14px;
.cnt{
text-align: center;
img{
width: 80px;
height: 80px;
margin-top: 40px;
margin-bottom: 20px;
}
p{
margin-bottom: 0!important;
}
p:first-child{
font-size: 16px;
line-height: 24px;
color: #414345;
}
p:last-child{
font-size: 13px;
line-height: 18px;
color: #999999;
}
}
}
</style>
\ No newline at end of file
src/views/MyManage/index.vue
...@@ -2,10 +2,11 @@ ...@@ -2,10 +2,11 @@
<div class="nav-me container marginTop20 mb-5" style="position: relative"> <div class="nav-me container marginTop20 mb-5" style="position: relative">
<div class="row"> <div class="row">
<div class="col-lg-3"> <div class="col-lg-3">
<UserInfo/>
<SubNav/> <SubNav/>
</div> </div>
<div class="col-lg-9"> <div class="col-lg-9">
<router-view></router-view> <router-view ></router-view>
</div> </div>
</div> </div>
</div> </div>
...@@ -13,7 +14,9 @@ ...@@ -13,7 +14,9 @@
<script> <script>
import SubNav from "../comps/SubNav.vue"; import SubNav from "../comps/SubNav.vue";
import "./style/common.scss"; import UserInfo from "./comps/userInfo.vue";
const UN_VERIFY = 0; const UN_VERIFY = 0;
const SYSTEM_MEMBER = 1; const SYSTEM_MEMBER = 1;
...@@ -22,6 +25,7 @@ const ADMIN = 2; ...@@ -22,6 +25,7 @@ const ADMIN = 2;
export default { export default {
components: { components: {
SubNav, SubNav,
UserInfo
}, },
created() { created() {
// TODO 判断用户状态 处理一下左侧的 sub_nav 和用户panel // TODO 判断用户状态 处理一下左侧的 sub_nav 和用户panel
...@@ -31,7 +35,73 @@ export default { ...@@ -31,7 +35,73 @@ export default {
this.userType = ADMIN; this.userType = ADMIN;
}, },
data() { data() {
return {}; return {
routerList:[
{
name: "首页",
index: 0,
link: "/MyManage/UnVerify/index",
},
{
name: "业务管理",
index: 1,
link: "",
children: [
{
name: "商品条码在线注册",
index: 0,
link: "",
},
{
name: "厂商实名认证",
index: 1,
link: "",
},
{
name: "检测校准申请",
index: 2,
link: "",
},
],
},
{
name: "用户信息管理",
index: 2,
link: "",
children: [
{
name: "个人资料",
index: 0,
link: "",
},
{
name: "修改密码",
index: 1,
link: "",
},
{
name: "修改手机号码",
index: 2,
link: "",
},
],
},
],
};
},
created() {
this.$store.commit("system/SET_SUB_NAV",this.routerList);
},
methods: {
}, },
}; };
</script> </script>
......
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