feat: UI

wupengfei

20 小时以前 758d8056dc3dbc6bf92c298aa3627e66b933b5a0

 apps/taro/src/pages/mine/index.vue

@@ -1,29 +1,80 @@
<template>
  <PageLayoutWithBg class="mine-page-wrapper" title="我的" :need-auth="false">
  <PageLayoutWithBg class="mine-page-wrapper" :need-auth="false">
    <template #navigationBar>
      <TransparentNavigationBar
        title="个人中心"
        :is-absolute="false"
        mode="dark"
      ></TransparentNavigationBar>
      <TransparentNavigationBar :title="'个人中心'" :is-absolute="false">
      </TransparentNavigationBar>
    </template>
    <template #bg>
      <img :src="OssAssets.mine.Bg" class="mine-page-bg" :style="{ height: `${bgHeight}px` }" />
      <img :src="OssAssets.common.MinePageBg" class="mine-page-bg" />
    </template>
    <div class="mine-page-top-view" @click="goLogin">
      <img class="mine-avatar" :src="DefaultAvatar" alt="" />
      <div class="user-info">
        <div class="user-info-name" v-if="isLogin">
          {{ hiddenPhoneNumber(virtualPhoneNumber) }}
        </div>
        <div class="mine-go-login" v-else>登录</div>
      </div>
    </div>
    <ContentScrollView style="background-color: transparent">
      <List class="mine-list-wrapper">
        <ListItemV2 :icon="IconMineOrder" title="订单管理" @click="goOrderManage"></ListItemV2>
        <ListItemV2 :icon="IconMineUserId" title="户号管理" @click="goUserAccountList"></ListItemV2>
        <template v-if="isChannelAccount">
          <ListItemV2 :icon="IconMineDataBoard" title="数据看板" @click="goDashboard"></ListItemV2>
          <ListItemV2
            :icon="IconMinePromotion"
            title="渠道二维码"
            @click="goShareQrcode"
          ></ListItemV2>
          <ListItemV2
            :icon="IconMinePromotion"
            title="推广二维码"
            @click="goPromotionQrcode"
          ></ListItemV2>
        </template>
        <ListItemV2
          :icon="IconMineCustomerService"
          v-if="isWeb && !isInAlipay"
          title="在线客服"
          @click="handleChat"
        ></ListItemV2>
        <ListItemV2
          v-if="isLogin"
          title="退出登录"
          @click="goLogout"
          :icon="IconMineExist"
        ></ListItemV2>
      </List>
    </ContentScrollView>
  </PageLayoutWithBg>
</template>

<script setup lang="ts">
import { TransparentNavigationBar, ContentScrollView } from '@/components';
import { useUser, useIsLogin, useGoLogin } from '@/hooks';
import { TransparentNavigationBar, List, ListItemV2 } from '@/components';
import { useUser, useIsLogin, useGoLogin, useAccessLogin, useOnlineService } from '@/hooks';
import Taro from '@tarojs/taro';
import { RouterPath, OssAssets } from '@/constants';
import DefaultAvatar from '@/assets/components/icon-default-avatar.png';
import IconMineOrder from '@/assets/mine/icon-mine-order.png';
import IconMineUserId from '@/assets/mine/icon-mine-userId.png';
import IconMineDataBoard from '@/assets/mine/icon-mine-data-board.png';
import IconMinePromotion from '@/assets/mine/icon-mine-promotion.png';
import IconMineCustomerService from '@/assets/mine/icon-mine-customer-service.png';
import IconMineExist from '@/assets/mine/icon-mine-exist.png';
import { useSystemStore } from '@/stores/modules/system';
import PageLayoutWithBg from '@/components/Layout/PageLayoutWithBg.vue';
import { useUserStore } from '@/stores/modules/user';
import { Message } from '@/utils';
import { isWeb, isInAlipay } from '@/utils/env';
import { useLifeRechargeContext } from '@life-payment/core-vue';
import { hiddenPhoneNumber } from '@life-payment/utils';

const { userDetail, isCertified } = useUser();
const { userDetail, virtualPhoneNumber, isChannelAccount } = useUser();

const isLogin = useIsLogin();
const systemStore = useSystemStore();
const userStore = useUserStore();
const { blLifeRecharge } = useLifeRechargeContext();

const { goLoginFn } = useGoLogin();
const bgHeight = computed(() => 133 + systemStore.navHeight);
@@ -35,59 +86,52 @@
}

function goPage(routeName: string) {
  Taro.navigateTo({
  RouteHelper.navigateTo({
    url: routeName,
  });
}

function goSetting() {
  goPage(RouterPath.setting);
// Taro.showShareMenu({
//   showShareItems: ['shareAppMessage'],
// });
// Taro.useShareAppMessage((res) => {
//   return {
//     title: `${userDetail.value?.contacter}名片`,
//     // path: `${RouterPath.userHomePage}?userId=${userDetail.value?.userId}`,
//     imageUrl: userDetail.value?.avatarUrl,
//   };
// });

const goOrderManage = useAccessLogin(() => goPage(RouterPath.order));
const goUserAccountList = useAccessLogin(() => goPage(RouterPath.userAccountList));
const goShareQrcode = useAccessLogin(() => goPage(RouterPath.shareQrcode));
const goPromotionQrcode = useAccessLogin(() => goPage(RouterPath.promotionQrcode));
const goDashboard = useAccessLogin(() => goPage(RouterPath.dashboard));

async function goLogout() {
  try {
    await Message.confirm({
      message: '确定要退出登录吗？',
    });
    userStore.logout();
    blLifeRecharge.loginout();
  } catch (error) {}
}

Taro.showShareMenu({
  showShareItems: ['shareAppMessage'],
});
const { onlineServiceLink } = useOnlineService();

Taro.useShareAppMessage((res) => {
  return {
    title: `${userDetail.value?.contacter}名片`,
    // path: `${RouterPath.userHomePage}?userId=${userDetail.value?.userId}`,
    imageUrl: userDetail.value?.avatarUrl,
  };
});

function goAuthentication() {
  goPage(RouterPath.authenticationHome);
}
function goMineSign() {
  goPage(RouterPath.mineSign);
}
function goMineHire() {
  goPage(RouterPath.mineHire);
}
function goMineCancel() {
  goPage(RouterPath.mineCancel);
}
function goMineCollectTask() {
  goPage(RouterPath.mineCollectTask);
}
function goMineAgreementSign() {
  goPage(RouterPath.mineAgreementSign);
function handleChat() {
  if (isWeb && onlineServiceLink.value) {
    if (isInAlipay) {
      Message.warning('请在微信中打开使用该功能');
    } else {
      window.open(onlineServiceLink.value, '_blank');
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/common.scss';
@import './index.scss';

.mine-setting-badge {
  margin-right: 20px;
}

.mine-setting-list {
  .pro-list-item-icon {
    width: 48px;
    height: 48px;
  }
}
</style>