349 lines
7.1 KiB
Vue
349 lines
7.1 KiB
Vue
<template>
|
|
<view class="my-container">
|
|
<scroll-view scroll-y="true" style="height: 100%;">
|
|
<view v-if="user!=null">
|
|
<view class="header">
|
|
<view class="header-user">
|
|
<view class="header-avatar">
|
|
<u-avatar :src="getImageUrl(user.avatar)"></u-avatar>
|
|
</view>
|
|
<view class="header-username u-m-l-20">
|
|
{{user.real_name}}
|
|
<view>
|
|
<u-tag class="u-m-r-20 u-m-t-10" :text="Math.abs(user.balance)" type="warning"></u-tag>
|
|
<u-tag :text="user.points"></u-tag>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="header-setting">
|
|
<image src="/static/icon/Settings.png" style="width: 100%;height: 100%;" mode=""></image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="statistics">
|
|
<view class="item">
|
|
<view class="count">
|
|
111
|
|
</view>
|
|
<view class="title">
|
|
积分
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="count">
|
|
5
|
|
</view>
|
|
<view class="title">
|
|
优惠券
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="count">
|
|
10
|
|
</view>
|
|
<view class="title">
|
|
我的兑换
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="count">
|
|
283
|
|
</view>
|
|
<view class="title">
|
|
我的收藏
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="open-vip">
|
|
<view class="text-vip">
|
|
<view class="title">
|
|
vip专享
|
|
</view>
|
|
<view class="sub-title">
|
|
立享价值1000元权益
|
|
</view>
|
|
</view>
|
|
<u-button class="btn-vip" hover-class="none" :hair-line="false">298元开通</u-button>
|
|
</view>
|
|
|
|
<view class="white-block">
|
|
<view class="item">
|
|
<view class="title">
|
|
会员权益
|
|
</view>
|
|
<view class="sub-title">
|
|
领取升级福利
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="title">
|
|
积分商城
|
|
</view>
|
|
<view class="sub-title">
|
|
赚积分享福利
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="menu-list">
|
|
<view class="menu-item">
|
|
<u-image src="/static/my/01.png" width="40%" mode="widthFix"></u-image>
|
|
<view class="menu-text">
|
|
领券中心
|
|
</view>
|
|
</view>
|
|
<view class="menu-item">
|
|
<u-image src="/static/my/02.png" width="40%" mode="widthFix"></u-image>
|
|
<view class="menu-text">
|
|
积分兑换
|
|
</view>
|
|
</view>
|
|
<view class="menu-item">
|
|
<u-image src="/static/my/03.png" width="40%" mode="widthFix"></u-image>
|
|
<view class="menu-text">
|
|
我的客户
|
|
</view>
|
|
</view>
|
|
<view class="menu-item">
|
|
<u-image src="/static/my/04.png" width="40%" mode="widthFix"></u-image>
|
|
<view class="menu-text">
|
|
常见问题
|
|
</view>
|
|
</view>
|
|
<view class="menu-item">
|
|
<u-image src="/static/my/05.png" width="40%" mode="widthFix"></u-image>
|
|
<view class="menu-text">
|
|
充值中心
|
|
</view>
|
|
</view>
|
|
<view class="menu-item" @click="handleShippingAddress">
|
|
<u-image src="/static/my/06.png" width="40%" mode="widthFix"></u-image>
|
|
<view class="menu-text">
|
|
收货地址
|
|
</view>
|
|
</view>
|
|
<view class="menu-item">
|
|
<u-image src="/static/my/07.png" width="40%" mode="widthFix"></u-image>
|
|
<view class="menu-text">
|
|
我的订单
|
|
</view>
|
|
</view>
|
|
<view class="menu-item">
|
|
<u-image src="/static/my/08.png" width="40%" mode="widthFix"></u-image>
|
|
<view class="menu-text">
|
|
成为代理
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<u-button class="u-m-t-20" @click="loginOut">退出登录</u-button>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<Tabbar></Tabbar>
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue';
|
|
import { getImageUrl } from '../../util/common';
|
|
import {
|
|
authAPI
|
|
} from '../../api/auth.js';
|
|
import {
|
|
onShow
|
|
} from '@dcloudio/uni-app'
|
|
|
|
const user = ref()
|
|
|
|
const handleShippingAddress = () => {
|
|
uni.navigateTo({
|
|
url: '/pages/my/shippingAddress'
|
|
})
|
|
}
|
|
|
|
const loadData = () => {
|
|
authAPI.me().then(res => {
|
|
user.value = res.user
|
|
})
|
|
}
|
|
|
|
onShow(() => {
|
|
loadData()
|
|
})
|
|
|
|
onMounted(() => {
|
|
})
|
|
|
|
const loginOut = () => {
|
|
uni.removeStorageSync("token")
|
|
uni.redirectTo({
|
|
url: '/pages/login/login'
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.my-container {
|
|
width: 100%;
|
|
height: 100vh;
|
|
background: linear-gradient(180deg, #E3E8FF 0%, #E8EAF4 100%);
|
|
background-blend-mode: lighten;
|
|
padding: 60rpx 20rpx;
|
|
|
|
.header {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: flex-end;
|
|
|
|
.header-user {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 170rpx;
|
|
padding-left: 60rpx;
|
|
}
|
|
|
|
.header-setting {
|
|
width: 52rpx;
|
|
height: 52rpx;
|
|
}
|
|
}
|
|
|
|
.statistics {
|
|
display: flex;
|
|
|
|
font-family: SF Pro;
|
|
font-weight: 510;
|
|
font-style: Medium;
|
|
font-size: 32rpx;
|
|
leading-trim: NONE;
|
|
line-height: 48rpx;
|
|
letter-spacing: 0%;
|
|
|
|
margin: 40rpx 0 20rpx;
|
|
|
|
.item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 25%;
|
|
|
|
}
|
|
}
|
|
|
|
.open-vip {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background: #2B2B2B;
|
|
align-items: center;
|
|
padding: 24rpx 0;
|
|
border-top-left-radius: 24rpx;
|
|
border-top-right-radius: 24rpx;
|
|
|
|
.text-vip {
|
|
margin-left: 32rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: #FFDD9E;
|
|
justify-content: flex-start;
|
|
|
|
.title {
|
|
font-family: SF Pro;
|
|
font-weight: 700;
|
|
font-style: Bold;
|
|
font-size: 32rpx;
|
|
leading-trim: NONE;
|
|
line-height: 48rpx;
|
|
letter-spacing: 0%;
|
|
}
|
|
|
|
.sub-title {
|
|
font-family: SF Pro;
|
|
font-weight: 274;
|
|
font-style: Light;
|
|
font-size: 32rpx;
|
|
leading-trim: NONE;
|
|
line-height: 48rpx;
|
|
letter-spacing: 0%;
|
|
|
|
}
|
|
}
|
|
|
|
.btn-vip {
|
|
margin-right: 42rpx;
|
|
width: 180rpx;
|
|
height: 56rpx;
|
|
border: none;
|
|
border-radius: 198rpx;
|
|
background: linear-gradient(90deg, #FFCC5E 0%, #FFE9BA 47.27%, #FFCC5E 100%);
|
|
}
|
|
}
|
|
|
|
.white-block {
|
|
margin-top: 44rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.item {
|
|
width: 48%;
|
|
background: #F5F8FF;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 30rpx 32rpx;
|
|
border-radius: 24rpx;
|
|
|
|
.title {
|
|
font-family: SF Pro;
|
|
font-weight: 700;
|
|
font-style: Bold;
|
|
font-size: 32rpx;
|
|
leading-trim: NONE;
|
|
line-height: 48rpx;
|
|
letter-spacing: 0%;
|
|
}
|
|
|
|
.sub-title {
|
|
margin-top: 14rpx;
|
|
font-family: Work Sans;
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
leading-trim: NONE;
|
|
line-height: 100%;
|
|
letter-spacing: -2%;
|
|
color: #8C8C8C;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.menu-list {
|
|
background: #F5F8FF;
|
|
margin-top: 20rpx;
|
|
padding: 20rpx 0 0 0;
|
|
border-radius: 24rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.menu-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 25%;
|
|
margin-bottom: 20rpx;
|
|
|
|
.menu-text {
|
|
font-family: Work Sans;
|
|
font-weight: 400;
|
|
font-style: Regular;
|
|
font-size: 20rpx;
|
|
leading-trim: NONE;
|
|
line-height: 100%;
|
|
letter-spacing: -2%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |