Files
shoot-miniprograms/src/pages/user.vue
2025-05-28 15:00:31 +08:00

66 lines
1.5 KiB
Vue

<script setup>
import AppBackground from "@/components/AppBackground.vue";
import Header from "@/components/Header.vue";
import UserHeader from "@/components/UserHeader.vue";
import UserItem from "@/components/UserItem.vue";
import Avatar from "@/components/Avatar.vue";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const toOrderPage = () => {
uni.navigateTo({
url: "/pages/orders",
});
};
</script>
<template>
<view>
<AppBackground />
<Header title="用户信息" />
<UserHeader :user="user" />
<view class="container">
<UserItem title="用户名">{{ user.nickName }}</UserItem>
<UserItem title="头像">
<Avatar :src="user.avatarUrl" :size="35" />
</UserItem>
<UserItem
title="订单"
:customStyle="{
marginTop: '10px',
}"
:onClick="toOrderPage"
/>
<UserItem title="新手试炼场" />
<UserItem title="会员" />
<UserItem title="等级介绍" />
<UserItem
title="段位介绍"
:customStyle="{
marginBottom: '10px',
}"
/>
<button class="my-grow">
<image src="../static/my-grow.png" mode="widthFix" />
</button>
</view>
</view>
</template>
<style scoped>
.container {
background-color: #e4e4e4;
height: calc(100vh - 161px);
margin-top: 20px;
padding-top: 10px;
}
.my-grow {
width: 100%;
}
.my-grow > image {
width: 100%;
}
</style>