mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2026-08-06 19:07:23 +08:00
349ffa4f34
- 将多个组件转换为 `<script setup>` 语法，提升可读性和性能 - 优化状态管理和事件处理逻辑，简化代码结构 - 更新样式和布局以适应新组件结构 - 添加新功能和修复已知问题，提升用户体验
65 lines
1.3 KiB
Vue
65 lines
1.3 KiB
Vue
<template>
|
||
<div class="user-point">
|
||
<!-- <div class="point-rule">积分规则</div> -->
|
||
<div class="point-wrapper">
|
||
<u-image shape="circle" :lazy-load="true" width="100" height="100"
|
||
:src="userInfo.face || '/static/missing-face.png'"></u-image>
|
||
<div class="whether-point">
|
||
<div>你的可用积分：<span class="point">{{userInfo.point || 0}}</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { ref, onMounted } from 'vue'
|
||
import { getUserInfo } from '@/api/members'
|
||
|
||
const userInfo = ref<any>({})
|
||
|
||
onMounted(() => {
|
||
init()
|
||
})
|
||
|
||
async function init() {
|
||
const res = await getUserInfo()
|
||
if (res.data.success) {
|
||
userInfo.value = res.data.result
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.user-point {
|
||
padding: 0 20rpx;
|
||
height: 300rpx;
|
||
flex-shrink: 0;
|
||
background: url("/static/point-bg.png") no-repeat;
|
||
background-size: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.point {
|
||
font-size: 40rpx;
|
||
}
|
||
.point-rule {
|
||
color: #fff;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
padding: 20rpx 0;
|
||
}
|
||
.point-wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
}
|
||
.whether-point {
|
||
color: #fff;
|
||
margin-top: 20rpx;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
}
|
||
</style>
|