179 lines
4.5 KiB
Vue
179 lines
4.5 KiB
Vue
<template>
|
|
<view class="my u-relative">
|
|
<view class="my-bg">
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<view class="u-text-center text-fff lg" :style="{paddingTop: statusBar + 'px'}">我的</view>
|
|
<!-- #endif -->
|
|
|
|
<view class="u-p-t-60 px32 text-fff">
|
|
<navigator class="row-between" :url="isLogin ? '/pages/my/profile' : '/pages/login/login'" hover-class="none">
|
|
<view>
|
|
<view v-if="isLogin" class="row u-col-top">
|
|
<view>
|
|
<u-avatar :src="userInfo.avatar ? userInfo.avatar : cloudPath + 'img/icon_avatar_empty2.png'" size="112"></u-avatar>
|
|
</view>
|
|
<view class="u-m-l-32 nr u-m-10">
|
|
<view>{{ userInfo.nickname }}</view>
|
|
<view class="u-m-t-16">{{userInfo.mobile || userInfo.sn}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="!isLogin" class="row u-col-top">
|
|
<view>
|
|
<u-avatar :src="cloudPath + 'img/icon_avatar_empty2.png'" size="112"></u-avatar>
|
|
</view>
|
|
<view class="u-m-l-32 nr u-m-10">
|
|
<view>点击登录</view>
|
|
<view class="u-m-t-16">登录体验更多功能</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<u-icon name="arrow-right" size="40" color="#fff"></u-icon>
|
|
</view>
|
|
</navigator>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="block px32">
|
|
<view class="bg-white u-m-t-34 balance row-between br16 u-p-l-22 u-p-r-22 box-shadown">
|
|
<view class="u-flex u-row-center" @click="toWallet">
|
|
<u-image :src="cloudPath + 'img/icon_balance.png'" width="52" height="52"></u-image>
|
|
<view class="u-m-l-60 u-text-center">
|
|
<view class="nr">{{userInfo.user_money || 0.00}}</view>
|
|
<view class="xs">余额</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<u-line class="u-line" direction="col" length="47"></u-line>
|
|
</view>
|
|
<view class="u-flex u-row-center">
|
|
<u-image :src="cloudPath + 'img/icon_points.png'" width="52" height="52"></u-image>
|
|
<view class="u-m-l-60 u-text-center">
|
|
<view class="nr">{{ userInfo.user_integral || 0}}</view>
|
|
<view class="xs">积分</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<u-line class="u-line" direction="col" length="47"></u-line>
|
|
</view>
|
|
<view class="u-flex u-row-center">
|
|
<u-image :src="cloudPath + 'img/icon_coupon.png'" width="52" height="52"></u-image>
|
|
<view class="u-m-l-60 u-text-center">
|
|
<view class="nr">{{ userInfo.coupon || 0}}</view>
|
|
<view class="xs u-text-center">券</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="bg-white u-m-t-32 service br16 u-p-t-32 u-p-l-22 u-p-r-22 box-shadown">
|
|
<view class="nr bold-600">服务功能</view>
|
|
<view>
|
|
<u-grid :col="4" :border="false">
|
|
<u-grid-item v-for="(item, index) in menuList" :key="index" @click="tapMenu(item)">
|
|
<u-image :src="item.image" width="64" height="64"></u-image>
|
|
<view class="grid-text mt10">{{item.name}}</view>
|
|
</u-grid-item>
|
|
</u-grid>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 活动图 -->
|
|
<view class="br16 u-m-t-32">
|
|
<u-image :src="cloudPath + 'img/activity.png'" height="264"></u-image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters, mapActions } from 'vuex'
|
|
import { getMenu } from '@/api/store'
|
|
import { menuJump } from '@/utils/tools'
|
|
import { toLogin, wxMnpLogin } from '@/utils/login'
|
|
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
menuList: [],
|
|
}
|
|
},
|
|
|
|
onShow() {
|
|
this.getUser()
|
|
},
|
|
|
|
onLoad() {
|
|
this.getMenuFun()
|
|
},
|
|
|
|
methods: {
|
|
...mapActions(['getUser']),
|
|
|
|
// 获取菜单
|
|
async getMenuFun() {
|
|
const { data, code } = await getMenu({
|
|
type: 2
|
|
})
|
|
if (code == 1) {
|
|
this.menuList = data
|
|
}
|
|
},
|
|
|
|
// 点击菜单跳转页面
|
|
tapMenu(item) {
|
|
if (!this.isLogin) return toLogin()
|
|
menuJump(item)
|
|
},
|
|
},
|
|
computed: {
|
|
...mapGetters(['cartNum', 'userInfo', 'inviteCode', 'appConfig']),
|
|
statusBar() {
|
|
return uni.getSystemInfoSync().statusBarHeight + 10
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #F6F6F6;
|
|
}
|
|
|
|
.my-bg {
|
|
background-image: url(#{$cloudPath}img/my_bg1.png);
|
|
height: 588rpx;
|
|
}
|
|
|
|
.block {
|
|
z-index: 1;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
|
|
/* #ifdef MP-WEIXIN*/
|
|
top: 410rpx;
|
|
/* #endif */
|
|
|
|
/* #ifndef MP-WEIXIN*/
|
|
top: 228rpx;
|
|
/* #endif */
|
|
|
|
background-color: #F6F6F6;
|
|
border-top-left-radius: 40rpx;
|
|
border-top-right-radius: 40rpx;
|
|
}
|
|
|
|
.balance {
|
|
height: 132rpx;
|
|
}
|
|
|
|
.service {
|
|
height: 249rpx;
|
|
}
|
|
|
|
.box-shadown {
|
|
box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
|
|
}
|
|
</style> |