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

<template>
  <FlexCol :padding="[40,30,50,30]" gap="gap.md">
    <HomeLargeTitle title="我的" />
    <Touchable 
      direction="row"
      align="center"
      justify="space-between"
      touchable 
      :gap="25"
      :padding="[0,30]"
      @click="goUserProfile"
    >
      <FlexRow align="center" :gap="25">
        <Image 
          :src="userInfo?.avatar || UserHead"
          :defaultImage="UserHead"
          :failedImage="UserHead"
          mode="aspectFill" 
          class="avatar" 
          width="75rpx"
          height="75rpx" 
          :showFailed="false"
          round
        />
        <H4 v-if="userInfo" :text="userInfo.nickname" />
        <H4 v-else>欢迎登录</H4>
      </FlexRow>
      <Icon icon="arrow-right" size="30" />
    </Touchable>
    <ProvideVar :vars="{
      GridItemIconSize: 90,
      GridItemBackgroundColor: 'transparent',
      GridItemPaddingHorizontal: 0,
    }">
      <Grid :borderGrid="false" :mainAxisCount="4">
        <GridItem title="我的关注" icon="https://xy.wenlvti.net/app_static/images/mine/IconLevel.png" touchable @click="requireLogin(() => navTo('/pages/home/village/follow/my-follows'), '登录后查看我的关注哦')" />
        <GridItem title="我的订单" icon="https://xy.wenlvti.net/app_static/images/mine/IconArchive.png" touchable @click="requireLogin(() => navTo('/pages/home/village/orders'), '登录后查看我的订单哦')" />
        <GridItem title="任务中心" icon="https://xy.wenlvti.net/app_static/images/mine/IconTask.png" touchable @click="navTo('/pages/home/village/task/index')" />
        <GridItem title="兑换商城" icon="https://xy.wenlvti.net/app_static/images/mine/IconShop.png" touchable @click="goStore" />
      </Grid>
    </ProvideVar>
    
    <BoxMid 
      v-if="authStore.isLogged" 
      :padding="[40,20]"
      direction="row"
    >
      <FlexCol :flex="1" center>
        <FlexRow :gap="10" center>
          <Image src="https://xy.wenlvti.net/app_static/images/village/IconFruit.png" width="30rpx" height="30rpx" mode="aspectFill" />
          <Text fontConfig="lightGoldTitle">{{ userInfo?.fruit || 0 }}</Text>
          <Width :size="12" />
          <FrameButton size="small" text="充值" @click="navTo('/pages/home/village/bless/recharge')" />
        </FlexRow>
        <Text fontConfig="subText">我的乡源果</Text>
      </FlexCol>
        <FlexCol :flex="1" center>
        <FlexRow :gap="10" center>
          <Touchable direction="row" align="center" :gap="10" @click="navTo('/pages/dig/about/point')">
            <Icon icon="help-filling" color="primary" :size="40" />
          </Touchable>
          <Text fontConfig="lightGoldTitle">{{ volunteerInfo?.points || 0 }}</Text>
        </FlexRow>
        <Text fontConfig="subText">文化积分</Text>
      </FlexCol>
    </BoxMid>

    <ImageSwiper
      :images="appConfig.banners.userAd?.images || []"
      :height="appConfig.banners.userAd?.height || 0"
      :width="690"
      mode="aspectFill"
      radius="radius.md"
    />

    <ProvideVar :vars="{
      CellBackground: 'background.tertiary',
      CellBottomBorder: false,
    }">
      <CellGroup round>
        <Cell v-if="userInfo" icon="https://xy.wenlvti.net/app_static/images/mine/IconMyArticle.png" title="我的投稿" showArrow touchable @click="navTo('/pages/dig/forms/submits', { 
          villageVolunteerId: volunteerInfo?.id || 0 
        })" />
        <Cell v-if="userInfo" icon="https://xy.wenlvti.net/app_static/images/mine/IconMyRecord.png" title="赐福记录" showArrow touchable @click="requireLogin(() => navTo('/pages/home/village/bless/my-orders'), '登录后查看我的福泽记录哦')" />
        <Cell v-if="userInfo" icon="share" :iconProps="{ color: '#833e27' }" title="邀请记录" showArrow touchable @click="navTo('/pages/home/village/task/share-reward')" />
        <Cell v-if="userInfo" icon="https://xy.wenlvti.net/app_static/images/mine/IconMyReward.png" title="兑换记录" showArrow touchable @click="goStoreList" />
        <Cell icon="https://xy.wenlvti.net/app_static/images/mine/IconAbout.png" title="关于我们" showArrow touchable @click="navTo('/pages/home/about/about')" />
        <button open-type="contact" class="remove-button-style">
          <Cell icon="https://xy.wenlvti.net/app_static/images/mine/IconContract.png" title="联系客服" showArrow touchable />
        </button>
        <Cell v-if="userInfo" icon="https://xy.wenlvti.net/app_static/images/mine/IconQuit.png" title="退出登录" showArrow touchable @click="doLogout" />
      </CellGroup>
    </ProvideVar>
    <DebugButton />
    <Height :height="140" />
  </FlexCol>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue';
import { navTo } from '@/components/utils/PageAction';
import { confirm } from '@/components/dialog/CommonRoot';
import { useAuthStore } from '@/store/auth';
import { useRequireLogin } from '@/common/composeabe/RequireLogin';
import { injectAppConfiguration } from '@/api/system/useAppConfiguration';
import { useWebPassToken } from '../article/web/webPassToken';
import { useVolunteerInfo } from '../home/village/composeabe/VolunteerInfo';
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 Text from '@/components/basic/Text.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import AppCofig from '@/common/config/AppCofig';
import VillageApi from '@/api/inhert/VillageApi';
import DebugButton from './debug/DebugButton.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Icon from '@/components/basic/Icon.vue';
import HomeLargeTitle from '@/common/components/parts/HomeLargeTitle.vue';
import ProvideVar from '@/components/theme/ProvideVar.vue';
import Grid from '@/components/layout/grid/Grid.vue';
import GridItem from '@/components/layout/grid/GridItem.vue';
import BoxMid from '@/common/components/box/BoxMid.vue';
import FrameButton from '@/common/components/FrameButton.vue';
import Width from '@/components/layout/space/Width.vue';
import Height from '@/components/layout/space/Height.vue';
import ImageSwiper from '@/common/components/parts/ImageSwiper.vue';

const UserHead = 'https://mncdn.wenlvti.net/app_static/xiangyuan/images/user/avatar.png';
const appConfig = injectAppConfiguration();

const authStore = useAuthStore();
const userInfo = computed(() => authStore.isLogged ? authStore.userInfo : null);
const { volunteerInfo } = useVolunteerInfo();
const { requireLogin } = useRequireLogin();
const { finalUrl: storeOrderFinalUrl } = useWebPassToken('https://xycdn.wenlvti.net/assets/addons/yunexamine/h5/', '/pages/gift/order');
const { finalUrl: storeFinalUrl } = useWebPassToken('https://xycdn.wenlvti.net/assets/addons/yunexamine/h5/', '/pages/gift/index');

function goUserProfile() {
  userInfo.value ? navTo('/pages/user/update/profile') : navTo('/pages/user/login');
}
function doLogout() {
  confirm({
    content: '您确定要退出登录吗？',
  }).then((res) => {
    if (res) {
      authStore.logout();
      if (AppCofig.requireLogin)
        uni.reLaunch({ url: '/pages/user/login' });
    }
  });
}
function goStoreList() {
  requireLogin(() => navTo('/pages/article/web/ewebview', {
    url: storeOrderFinalUrl.value
  }), '登录后查看我的哦');
}
function goStore() {
  requireLogin(() => navTo('/pages/article/web/ewebview', {
    url: storeFinalUrl.value
  }), '登录后查看我的哦');
}

onMounted(() => {
  if (authStore.isLogged)
    authStore.refreshUserInfo();
});
</script>