my.vue
2.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<template>
<view class="my_pages">
<!-- 头部模块 -->
<MyHeader :userInfo="userInfo" />
<!-- 用户菜单 -->
<view class="user_menu">
<view class="user_money">
<view class="dis-flex flex-y-center flex-x-between">
<view class="dis-flex flex-y-center mb-20">
<text class="f-28 l-h-38 f-w-500 m-r-10">账户总览</text>
<u-icon :name="showMoney ? 'eye' : 'eye-off'" size="12" color="#fff" @click="showMoney = !showMoney"></u-icon>
</view>
<view class="dis-flex flex-y-center" @click="goRouter('/pages_my/myWallet/myWallet')">
<u-icon name="rmb-circle" size="14" color="#fff"></u-icon>
<text class="f-24 l-h-32 m-l-10 m-r-10">我的钱包</text>
<u-icon name="arrow-right" size="10" color="#fff"></u-icon>
</view>
</view>
<view style="color: #ddd;" class="dis-flex flex-dir-column">
<text class="mb-10 f-24 l-h-32">余额</text>
<text class="col-f f-36 l-h-48">{{ showMoney ? '￥2000' : hideDigits('2000') }}</text>
</view>
</view>
<!-- 菜单列表 -->
<FunctionList />
</view>
<!-- 门店管理 -->
<StoreControl />
<!-- 功能中心 -->
<UserList />
</view>
</template>
<script>
import FunctionList from '@/components/my/functionList.vue'
import UserList from '@/components/my/userList.vue'
import MyHeader from '@/components/my/myHeader.vue'
import StoreControl from '@/components/my/StoreControl.vue'
import { getUserAmout, getUserInfo } from '@/api/user.js'
import { pro_http } from '@/utils/baseUrl.js'
export default {
components: { FunctionList, UserList, MyHeader, StoreControl },
data() {
return{
pro_http,
showMoney: true, // 是否显示余额
userAmout: 0, // 用户余额
userInfo: {}
}
},
computed: {
hideDigits() {
return (amount) => {
// 使用正则表达式替换数字为星号
return amount.replace(/\d/g, '*');
}
}
},
// async onLoad() {
// const { money } = await getUserAmout()
// this.userAmout = money
// },
// async onShow() {
// this.userInfo = await getUserInfo()
// this.userInfo.avatar = uni.$u.test.url(this.userInfo.avatar) ? this.userInfo.avatar : pro_http + this.userInfo.avatar
// },
methods: {
goRouter(path){
uni.navigateTo({
url: path
})
}
}
}
</script>
<style lang="scss" scoped>
.my_pages{
min-height: 100vh;
padding-bottom: 40rpx;
background: linear-gradient(to left bottom, #DEF2FF, #F4F5F9, #FFDDC2);
}
// 用户菜单
.user_menu{
position: relative;
height: 340rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.1);
border-radius: 12rpx;
margin: 0 30rpx;
z-index: 20;
overflow: hidden;
.user_money{
height: 200rpx;
box-sizing: border-box;
padding: 20rpx 30rpx;
background: linear-gradient( 45deg, #676D93 0%, #9DACC7 100%);
color: #fff;
}
}
</style>