shoot-miniprograms/src/pages/user.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",
  });
};

const toFristTryPage = () => {
  uni.navigateTo({
    url: "/pages/first-try",
  });
};
const toBeVipPage = () => {
  uni.navigateTo({
    url: "/pages/be-vip",
  });
};
const toMyGrowthPage = () => {
  uni.navigateTo({
    url: "/pages/my-growth",
  });
};
const toGradeIntroPage = () => {
  uni.navigateTo({
    url: "/pages/grade-intro",
  });
};
const toRankIntroPage = () => {
  uni.navigateTo({
    url: "/pages/rank-intro",
  });
};
</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="新手试炼场"
        :onClick="user.trio > 1 ? null : toFristTryPage"
      >
        <text v-if="user.trio > 1" :style="{ color: '#259249' }">已完成</text>
        <text v-else :style="{ color: '#CC311F' }">未完成</text>
      </UserItem>
      <UserItem title="会员" :onClick="toBeVipPage"> 已赠送6个月会员 </UserItem>
      <UserItem title="等级介绍" :onClick="toGradeIntroPage" />
      <UserItem
        title="段位介绍"
        :customStyle="{
          marginBottom: '10px',
        }"
        :onClick="toRankIntroPage"
      />
      <view class="my-grow" @click="toMyGrowthPage">
        <image src="../static/my-grow.png" mode="widthFix" />
      </view>
    </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>