120 lines
2.3 KiB
Vue
120 lines
2.3 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-10">
|
|
{{user.real_name}}
|
|
</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>
|
|
|
|
<u-button @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';
|
|
|
|
const user = ref()
|
|
|
|
onMounted(() => {
|
|
user.value = uni.getStorageSync("user")
|
|
console.log(user.value);
|
|
})
|
|
|
|
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 {
|
|
padding: 20rpx 10rpx;
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.header-setting {
|
|
width: 52rpx;
|
|
height: 52rpx;
|
|
}
|
|
}
|
|
|
|
.statistics{
|
|
display: flex;
|
|
|
|
.item{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 25%;
|
|
border: 1rpx solid #000;
|
|
}
|
|
}
|
|
}
|
|
</style> |