|
|
@@ -1,73 +1,311 @@
|
|
|
<template>
|
|
|
- <view class="content">
|
|
|
- 我的
|
|
|
- </view>
|
|
|
+ <view class="content">
|
|
|
+ <view class="header-panel">
|
|
|
+ <image v-if="userInfo && userInfo.avatar" class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
|
|
|
+ <image v-else class="avatar" src="../../static/img_avatar.png" mode="aspectFill"></image>
|
|
|
+ <view v-if="userInfo" class="info">
|
|
|
+ <view class="name">{{userInfo.name}}</view>
|
|
|
+ <view class="company">{{userInfo.company}}</view>
|
|
|
+ <image class="arrow" src="../../static/icon_arrow.png"></image>
|
|
|
+ </view>
|
|
|
+ <button v-else class="btn" @click="handleOpenLogin">登录</button>
|
|
|
+ </view>
|
|
|
+ <view class="menu-panel">
|
|
|
+ <view class="item" v-for="(item,index) in manuList" :key="index">
|
|
|
+ <image class="icon" :src="`../../static/svg/user_menu_${item.value}.svg`"></image>
|
|
|
+ {{item.label}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="nav-panel">
|
|
|
+ <view :class="{item: true, sapce: item.topSpace}" v-for="(item,index) in navList" :key="'nav'+index">
|
|
|
+ <image class="icon" :src="`../../static/svg/user_nav_${item.value}.svg`"></image>
|
|
|
+ <view class="label">
|
|
|
+ {{item.label}}
|
|
|
+ </view>
|
|
|
+ <image class="arrow" src="../../static/svg/arrow.svg"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import md5 from "@/common/md5.js";
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- list: [
|
|
|
- {
|
|
|
- icon: "/static/scan.png",
|
|
|
- name: "企业资料" ,
|
|
|
- // url: "/pages/index/scanCode/index",
|
|
|
- isShow:true,
|
|
|
- },
|
|
|
- {
|
|
|
- icon: "/static/self-icon.png",
|
|
|
- name: "企业团队" ,
|
|
|
- url: "/pages/index/self_info",
|
|
|
- isShow:true,
|
|
|
- },
|
|
|
- {
|
|
|
- icon: "/static/org-icon.png",
|
|
|
- name: "认证信息" ,
|
|
|
- url: "/pages/index/org_member",
|
|
|
- isShow:true,
|
|
|
- },
|
|
|
- {
|
|
|
- icon: "/static/explain-icon.png",
|
|
|
- name: "我的分销" ,
|
|
|
- url: "/pages/index/back_login",
|
|
|
- isShow:true,
|
|
|
- },
|
|
|
- {
|
|
|
- icon: "/static/back.png",
|
|
|
- name: "我的优惠券" ,
|
|
|
- // url: "/pages/index/scanCode/index",
|
|
|
- isShow:true,
|
|
|
- },
|
|
|
- {
|
|
|
- icon: "/static/explain-icon.png",
|
|
|
- name: "常见问题" ,
|
|
|
- url: "/pages/index/back_login",
|
|
|
- isShow:true,
|
|
|
- },
|
|
|
- {
|
|
|
- icon: "/static/back.png",
|
|
|
- name: "关于我们" ,
|
|
|
- // url: "/pages/index/scanCode/index",
|
|
|
- isShow:true,
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
-
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- },
|
|
|
- methods: {
|
|
|
-
|
|
|
- },
|
|
|
-};
|
|
|
+ import md5 from "@/common/md5.js";
|
|
|
+ import avatar from '@/static/taxation/poster.jpg';
|
|
|
+ export default {
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ userInfo: '',
|
|
|
+ manuList: [{
|
|
|
+ label: '我的订单',
|
|
|
+ value: 1
|
|
|
+ }, {
|
|
|
+ label: '我的账单',
|
|
|
+ value: 2
|
|
|
+ }, {
|
|
|
+ label: '我的发票',
|
|
|
+ value: 3
|
|
|
+ }, {
|
|
|
+ label: '企业钱包',
|
|
|
+ value: 4
|
|
|
+ }],
|
|
|
+ navList: [{
|
|
|
+ label: '企业资料',
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '企业团队',
|
|
|
+ value: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '认证信息',
|
|
|
+ value: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '我的分销',
|
|
|
+ value: 4,
|
|
|
+ topSpace: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '我的优惠券',
|
|
|
+ value: 5,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '常见问题',
|
|
|
+ value: 6,
|
|
|
+ topSpace: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '关于我们',
|
|
|
+ value: 7,
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ list: [{
|
|
|
+ icon: "/static/scan.png",
|
|
|
+ name: "企业资料",
|
|
|
+ // url: "/pages/index/scanCode/index",
|
|
|
+ isShow: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: "/static/self-icon.png",
|
|
|
+ name: "企业团队",
|
|
|
+ url: "/pages/index/self_info",
|
|
|
+ isShow: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: "/static/org-icon.png",
|
|
|
+ name: "认证信息",
|
|
|
+ url: "/pages/index/org_member",
|
|
|
+ isShow: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: "/static/explain-icon.png",
|
|
|
+ name: "我的分销",
|
|
|
+ url: "/pages/index/back_login",
|
|
|
+ isShow: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: "/static/back.png",
|
|
|
+ name: "我的优惠券",
|
|
|
+ // url: "/pages/index/scanCode/index",
|
|
|
+ isShow: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: "/static/explain-icon.png",
|
|
|
+ name: "常见问题",
|
|
|
+ url: "/pages/index/back_login",
|
|
|
+ isShow: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: "/static/back.png",
|
|
|
+ name: "关于我们",
|
|
|
+ // url: "/pages/index/scanCode/index",
|
|
|
+ isShow: true,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+
|
|
|
+ },
|
|
|
+ onShow() {},
|
|
|
+ methods: {
|
|
|
+ handleOpenLogin() {
|
|
|
+ this.userInfo = {
|
|
|
+ name: 'Caocao',
|
|
|
+ company: '天津超易达胜科技',
|
|
|
+ avatar: avatar
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+ .content {
|
|
|
+ height: 100%;
|
|
|
+ background: #f3f3f3;
|
|
|
+ padding-bottom: 41.21rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-panel {
|
|
|
+ height: 274.73rpx;
|
|
|
+ background: rgba(0, 210, 195, 1);
|
|
|
+ font-size: 27.47rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ .avatar {
|
|
|
+ width: 123.63rpx;
|
|
|
+ height: 123.63rpx;
|
|
|
+ margin: 0 39.84rpx 0 53.57rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ width: 151.1rpx;
|
|
|
+ height: 54.95rpx;
|
|
|
+ line-height: 52.2rpx;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ border-radius: 2.75rpx;
|
|
|
+ font-size: 27.47rpx;
|
|
|
+ background: transparent;
|
|
|
+ color: #fff;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ flex: 1;
|
|
|
+ line-height: 1;
|
|
|
+ position: relative;
|
|
|
+ padding-right: 82.42rpx;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 38.46rpx;
|
|
|
+ margin-bottom: 16.48rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .company {
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .arrow {
|
|
|
+ width: 23.35rpx;
|
|
|
+ height: 43.96rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: 53.57rpx;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-panel {
|
|
|
+ display: flex;
|
|
|
+ background: #fff;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 0%;
|
|
|
+ bottom: 0%;
|
|
|
+ right: 0;
|
|
|
+ height: 1rpx;
|
|
|
+ background: #e0e0e0;
|
|
|
+ transform: scaleY(.5);
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ flex: 1;
|
|
|
+ height: 151.1rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &:before {
|
|
|
+ content: '';
|
|
|
+ width: 1rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 0%;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0%;
|
|
|
+ background: #e0e0e0;
|
|
|
+ transform: scaleX(.5);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:first-child::before {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 54.95rpx;
|
|
|
+ height: 54.95rpx;
|
|
|
+ margin-bottom: 13.74rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-panel {
|
|
|
+ margin-top: 13.74rpx;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ background: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 96.15rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &:before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 0%;
|
|
|
+ right: 0%;
|
|
|
+ top: 0;
|
|
|
+ height: 1rpx;
|
|
|
+ background: #e0e0e0;
|
|
|
+ transform: scaleY(.5);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:first-child::before {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.sapce {
|
|
|
+ margin-top: 13.74rpx;
|
|
|
+
|
|
|
+ &:before {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
+ .icon {
|
|
|
+ width: 43.96rpx;
|
|
|
+ height: 43.96rpx;
|
|
|
+ margin: 0 20.6rpx 0 31.59rpx;
|
|
|
+ }
|
|
|
+ .label{
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .arrow{
|
|
|
+ width: 27.47rpx;
|
|
|
+ height: 27.47rpx;
|
|
|
+ margin-right: 27.47rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
Sinea
