xiangyuan-app/src/pages/user/index.vue

<template>
  <FlexCol :padding="[40,30,50,30]">
    <Touchable 
      direction="column"
      justify="center" 
      align="center"  
      touchable 
      :gap="25"
      @click="goUserProfile"
    >
      <Image 
        :src="userInfo?.avatar || UserHead"
        :defaultImage="UserHead"
        :failedImage="UserHead"
        mode="aspectFill" 
        class="avatar" 
        width="100rpx"
        height="100rpx"
        :showFailed="false"
        round
      />
      <H4 v-if="userInfo">{{ userInfo.nickname }}</H4>
      <H4 v-else>欢迎登录</H4>
      <H4 v-if="userInfo">{{ userInfo.mobile }}</H4>
    </Touchable>
    <Height :height="50" />
    <CellGroup round>
      <Cell v-if="userInfo" icon="/static/images/user/icon-edit.png" title="我的投稿" showArrow touchable @click="navTo('/pages/dig/forms/submits', { 
        villageVolunteerId: volunteerInfoLoader.content.value?.id || 0 
      })" />
      <Cell v-if="userInfo" icon="/static/images/user/icon-profile.png" title="编辑资料" showArrow touchable @click="goUserProfile" />
      <Cell v-if="userInfo && !isBindWx" icon="wechat" title="绑定微信" showArrow touchable @click="navTo('/pages/dig/sharereg/bind-wx')" />
      <Cell icon="/static/images/user/icon-function.png" title="关于我们" showArrow touchable @click="navTo('/pages/home/about/about')" />
      <button open-type="contact" class="remove-button-style">
        <Cell icon="/static/images/user/icon-service.png" title="联系客服" showArrow touchable />
      </button>
      <Cell icon="/static/images/user/icon-chat.png" title="商务合作" showArrow touchable @click="navTo('/pages/home/about/contract')" />
      <Cell v-if="userInfo" icon="/static/images/user/icon-quit.png" title="退出登录" showArrow touchable @click="doLogout" />
    </CellGroup>
    <Touchable direction="column" center :padding="40" :gap="10" @click="showBuildInfo">
      <Text 
        color="text.second"
        :fontSize="22"
        :text="`软件版本 ${AppCofig.version}`"
      />
    </Touchable>
  </FlexCol>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { navTo } from '@/components/utils/PageAction';
import { alert, confirm } from '@/components/dialog/CommonRoot';
import { DateUtils } from '@imengyu/imengyu-utils';
import { useAuthStore } from '@/store/auth';
import UserHead from '@/static/images/user/avatar.png';
import CellGroup from '@/components/basic/CellGroup.vue';
import Cell from '@/components/basic/Cell.vue';
import Image from '@/components/basic/Image.vue';
import H4 from '@/components/typography/H4.vue';
import Height from '@/components/layout/space/Height.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import Text from '@/components/basic/Text.vue';
import AppCofig from '@/common/config/AppCofig';
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import VillageApi from '@/api/inhert/VillageApi';

const authStore = useAuthStore();
const userInfo = computed(() => authStore.isLogged ? authStore.userInfo : null);
const isBindWx = computed(() => Boolean(userInfo.value?.openId));
const volunteerInfoLoader = useSimpleDataLoader(async () => await VillageApi.getVolunteerInfo(), true);
const buildTime = `${__BUILD_TIMESTAMP__}`
const buildInfo = `${__BUILD_GUID__}`

function showBuildInfo() {
  alert({
    title: '关于程序',
    content: '版本: ' + AppCofig.version +
     '\n构建时间：' + DateUtils.formatDate(new Date(parseInt(buildTime)), 'yyyy-MM-dd HH:mm:ss') + 
        ' (' + buildTime + ')' + 
     '\n构建GUID：' + buildInfo,
     icon: 'prompt-filling',
     iconColor: 'primary',
     width: 560,
  })
}
function goUserProfile() {
  userInfo.value ? navTo('/pages/user/update/profile') : navTo('/pages/user/login');
}
function doLogout() {
  confirm({
    content: '您确定要退出登录吗？',
  }).then((res) => {
    if (res) {
      authStore.logout();
      uni.reLaunch({ url: '/pages/user/login' });
    }
  });
}
</script>