shoot-miniprograms/src/pages/user.vue

<script setup>
import { ref, onMounted } from "vue";
import Container from "@/components/Container.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, device } = storeToRefs(store);
const { updateUser } = store;

const toOrderPage = () => {
  uni.navigateTo({
    url: "/pages/orders",
  });
};

const toFristTryPage = () => {
  if (!device.value.deviceId) {
    return uni.showToast({
      title: "请先绑定设备",
      icon: "none",
    });
  }
  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",
  });
};
const toAboutUsPage = () => {
  uni.navigateTo({
    url: "/pages/about-us",
  });
};
const toAudioTestPage = () => {
  uni.navigateTo({
    url: "/pages/audio-test",
  });
};

const showLogout = ref(false);
const logout = () => {
  uni.removeStorageSync(
    `${uni.getAccountInfoSync().miniProgram.envVersion}_token`
  );
  uni.navigateBack();
  updateUser();
};
onMounted(() => {
  const accountInfo = uni.getAccountInfoSync();
  const envVersion = accountInfo.miniProgram.envVersion;
  if (envVersion !== "release") showLogout.value = true;
});
</script>

<template>
  <Container title="用户信息">
    <scroll-view :style="{ width: '100%' }">
      <UserHeader />
      <view class="container">
        <UserItem title="用户名">{{ user.nickName }}</UserItem>
        <UserItem title="头像">
          <Avatar :src="user.avatar" :size="35" />
        </UserItem>
        <UserItem
          title="订单"
          :customStyle="{
            marginTop: '10px',
          }"
          :onClick="toOrderPage"
        />
        <UserItem
          title="新手试炼场"
          :onClick="user.trio > 0 ? null : toFristTryPage"
        >
          <text v-if="user.trio > 0" :style="{ color: '#259249' }">已完成</text>
          <text v-else :style="{ color: '#CC311F' }">未完成</text>
        </UserItem>
        <UserItem title="会员" :onClick="toBeVipPage">
          已赠送6个月会员
        </UserItem>
        <UserItem title="等级介绍" :onClick="toGradeIntroPage">
          <text :style="{ color: '#4C76FF' }">Lv{{ user.lvl }}</text>
          <text
            :style="{
              color: '#FF7900',
              marginLeft: '5px',
            }"
            >{{ user.lvlPoints }}</text
          >
          <text>点</text>
        </UserItem>
        <UserItem
          title="段位介绍"
          :customStyle="{
            marginBottom: '10px',
          }"
          :onClick="toRankIntroPage"
        >
          <text :style="{ color: '#8E53EA' }">{{ user.lvlName }}</text>
          <text
            :style="{
              color: '#FF7900',
              marginLeft: '5px',
            }"
            >{{ user.scores }}</text
          >
          <text>点</text>
        </UserItem>
        <view class="my-grow" @click="toMyGrowthPage">
          <image src="../static/my-grow.png" mode="widthFix" />
        </view>
        <UserItem title="关于我们" :onClick="toAboutUsPage" />
        <UserItem
          title="音频测试"
          :onClick="toAudioTestPage"
          v-if="showLogout"
        />
        <UserItem
          title="退出登录(仅用于测试)"
          :onClick="logout"
          v-if="showLogout"
        />
      </view>
    </scroll-view>
  </Container>
</template>

<style scoped>
.container {
  background-color: #f5f5f5;
  height: calc(100vh - 161px);
  margin-top: 20px;
  padding-top: 10px;
}
.my-grow {
  width: 100%;
}
.my-grow > image {
  width: 100%;
}
</style>