|
|
@@ -4,23 +4,36 @@
|
|
|
<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>
|
|
|
+ <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">
|
|
|
+ <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}}
|
|
|
+ {{ item.label }}
|
|
|
+ <view class="badge" v-if="item.value === 2">
|
|
|
+ 4
|
|
|
+ </view>
|
|
|
</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="{ item: true, sapce: item.topSpace }" v-for="(item, index) in navList" :key="index">
|
|
|
+ <view class="icon">
|
|
|
+ <image :class="'icon-img icon-img-'+item.value" :src="`../../static/svg/user_nav_${item.value}.svg`"></image>
|
|
|
+ </view>
|
|
|
<view class="label">
|
|
|
- {{item.label}}
|
|
|
+ {{ item.label }}
|
|
|
+ </view>
|
|
|
+ <!-- 我的分销 -->
|
|
|
+ <view class="tag" v-if="item.value === 4">
|
|
|
+ 累计收益 0.00
|
|
|
+ </view>
|
|
|
+ <!-- 我的优惠券 -->
|
|
|
+ <view class="sub active" v-if="item.value === 5">
|
|
|
+ 3张可用
|
|
|
</view>
|
|
|
<image class="arrow" src="../../static/svg/arrow.svg"></image>
|
|
|
</view>
|
|
|
@@ -29,283 +42,123 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import md5 from "@/common/md5.js";
|
|
|
- import avatar from '@/static/taxation/poster.jpg';
|
|
|
- export default {
|
|
|
- components: {},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- userInfo: '',
|
|
|
- manuList: [{
|
|
|
+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;
|
|
|
+ ],
|
|
|
+ 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
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
+ ],
|
|
|
+ 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
|
|
|
+ };
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+@import 'index.scss';
|
|
|
+</style>
|
sinea17