182 lines
5.2 KiB
Vue
182 lines
5.2 KiB
Vue
|
<template>
|
||
|
<pb-layout navbar="inner" tabbar="/pages/index/my" :bgStyle="bgStyle">
|
||
|
<view :style="[{ paddingTop: peach.$platform.navBar + 'px' }]"></view>
|
||
|
<view class="my-module ss-p-x-30">
|
||
|
<view class="user-info flex align-center">
|
||
|
<image class="avatar" :src="state.userInfo.avatar" mode="aspectFill"></image>
|
||
|
|
||
|
<view class="detail flex flex-column justify-center gap-10">
|
||
|
<view class="name ss-font-26">{{ state.userInfo.name }}</view>
|
||
|
<view class="description ss-font-26">{{ state.userInfo.description }}</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
|
||
|
<view class="statistic ss-m-t-24">
|
||
|
<view class="title ss-font-24 ss-m-b-20"> 账户余额 </view>
|
||
|
<view class="remain flex justify-between align-center">
|
||
|
<view class="left flex align-center">
|
||
|
<view class="unit self-start">¥</view>
|
||
|
<view class="sremain ss-font-60">{{ state.statistic.remain }}</view>
|
||
|
</view>
|
||
|
<button class="right-btn ss-reset-button">查看详情</button>
|
||
|
</view>
|
||
|
<view class="cent ss-m-t-20"> 总获取积分{{ state.statistic.cent }} </view>
|
||
|
</view>
|
||
|
|
||
|
<view class="menu ss-m-t-70">
|
||
|
<view class="title ss-m-b-30">我的服务</view>
|
||
|
<view class="items">
|
||
|
<view class="item" v-for="item in state.menus">
|
||
|
<image class="icon" :src="item.icon" mode="aspectFill"></image>
|
||
|
<view class="label">{{ item.name }}</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
<view class="ss-p-x-30 bottom">
|
||
|
<button class="ss-reset-button login-btn-start" @tap="smsLoginSubmit">退出登录</button>
|
||
|
</view>
|
||
|
</pb-layout>
|
||
|
</template>
|
||
|
|
||
|
<script setup>
|
||
|
import { ref } from 'vue'
|
||
|
import peach from '@/peach'
|
||
|
|
||
|
const bgStyle = {
|
||
|
backgroundImage: '/static/bg-page.png',
|
||
|
imageType: 'local',
|
||
|
backgroundColor: '#fff',
|
||
|
description: '',
|
||
|
}
|
||
|
|
||
|
const state = ref({
|
||
|
userInfo: {
|
||
|
name: 'Ankkaya',
|
||
|
avatar: '/static/logo.png',
|
||
|
description: '测试商家描述',
|
||
|
},
|
||
|
statistic: {
|
||
|
remain: 2222222222,
|
||
|
cent: 10000,
|
||
|
},
|
||
|
menus: [
|
||
|
{
|
||
|
name: '余额提现',
|
||
|
icon: '/static/withdraw.png',
|
||
|
path: '',
|
||
|
},
|
||
|
{
|
||
|
name: '购买积分',
|
||
|
icon: '/static/buycent.png',
|
||
|
path: '',
|
||
|
},
|
||
|
{
|
||
|
name: '分发积分',
|
||
|
icon: '/static/dispensecent.png',
|
||
|
path: '',
|
||
|
},
|
||
|
{
|
||
|
name: '提现规则',
|
||
|
icon: '/static/rule.png',
|
||
|
path: '',
|
||
|
},
|
||
|
],
|
||
|
})
|
||
|
</script>
|
||
|
|
||
|
<style lang="scss" scoped>
|
||
|
.my-module {
|
||
|
.user-info {
|
||
|
.avatar {
|
||
|
width: 80rpx;
|
||
|
height: 80rpx;
|
||
|
margin-right: 20rpx;
|
||
|
}
|
||
|
.detail {
|
||
|
.name {
|
||
|
color: #fff;
|
||
|
}
|
||
|
.description {
|
||
|
color: #fff;
|
||
|
opacity: 0.4;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.statistic {
|
||
|
height: 200rpx;
|
||
|
background-color: #fffefe;
|
||
|
opacity: 0.9;
|
||
|
border-radius: 26rpx;
|
||
|
padding: 31rpx 40rpx;
|
||
|
.title {
|
||
|
font-weight: 500;
|
||
|
color: var(--ui-TC);
|
||
|
font-size: 24rpx;
|
||
|
}
|
||
|
.remain {
|
||
|
.left {
|
||
|
font-weight: 600;
|
||
|
flex: 1;
|
||
|
color: var(--ui-BG-Main);
|
||
|
.unit {
|
||
|
position: relative;
|
||
|
top: 4px;
|
||
|
}
|
||
|
}
|
||
|
.right-btn {
|
||
|
width: 161rpx;
|
||
|
height: 63rpx;
|
||
|
background-color: var(--ui-BG-Main);
|
||
|
color: #fff;
|
||
|
}
|
||
|
}
|
||
|
.cent {
|
||
|
color: var(--ui-TC-2);
|
||
|
font-size: 24rpx;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.menu {
|
||
|
.title {
|
||
|
font-weight: 600;
|
||
|
}
|
||
|
.items {
|
||
|
display: grid;
|
||
|
grid-template-columns: repeat(4, 1fr);
|
||
|
gap: 30rpx 30rpx;
|
||
|
.item {
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
justify-content: space-between;
|
||
|
align-items: center;
|
||
|
gap: 23rpx;
|
||
|
.icon {
|
||
|
width: 94rpx;
|
||
|
height: 94rpx;
|
||
|
}
|
||
|
.label {
|
||
|
font-size: 22rpx;
|
||
|
color: #0c0c0cff;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
.bottom {
|
||
|
position: absolute;
|
||
|
bottom: 70px;
|
||
|
width: calc(100% - 60rpx);
|
||
|
.login-btn-start {
|
||
|
height: 82rpx;
|
||
|
line-height: normal;
|
||
|
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||
|
border-radius: 28rpx;
|
||
|
font-size: 26rpx;
|
||
|
font-weight: 500;
|
||
|
color: #fff;
|
||
|
}
|
||
|
}
|
||
|
</style>
|