feat: UI

wupengfei

6 天以前 14368e8a09c4b5793d0975f85e36a4c1d410ca36

feat: UI

 apps/taro/src/assets/mine/icon-mine-customer-service.png

 apps/taro/src/assets/mine/icon-mine-data-board.png

 apps/taro/src/assets/mine/icon-mine-order.png

 apps/taro/src/assets/mine/icon-mine-promotion.png

 apps/taro/src/assets/mine/icon-mine-userId.png

 apps/taro/src/components/List/ListItemV2.vue

New file
@@ -0,0 +1,63 @@
<template>
  <div class="pro-list-itemV2">
    <div class="pro-list-itemV2-inner">
      <img v-if="icon" :src="icon" class="pro-list-itemV2-icon" />
      <div class="pro-list-itemV2-title">{{ title }}</div>
      <slot name="extra"></slot>
      <img v-if="showArrow" :src="IconArrow" class="pro-list-itemV2-arrow" />
    </div>
  </div>
</template>

<script setup lang="ts">
import IconArrow from '@/assets/setting/icon-arrow.png';

defineOptions({
  name: 'ListItemV2',
});

type Props = {
  icon?: string;
  title?: string;
  showArrow?: boolean;
};

const props = withDefaults(defineProps<Props>(), {
  showArrow: true,
});
</script>

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

.pro-list-itemV2 {
  padding: 0 boleGetCssVar('size', 'body-padding-h');

  .pro-list-itemV2-inner {
    height: 112px;
    display: flex;
    align-items: center;

    .pro-list-itemV2-icon {
      width: 48px;
      height: 48px;
      margin-right: 16px;
    }

    .pro-list-itemV2-title {
      font-weight: 400;
      font-size: 32px;
      color: boleGetCssVar('text-color', 'primary');
      line-height: 44px;
      flex: 1;
      min-width: 0;
      @include ellipsis;
    }

    .pro-list-itemV2-arrow {
      width: 32px;
      height: 32px;
    }
  }
}
</style>

 apps/taro/src/components/index.ts

@@ -2,6 +2,7 @@
export { default as TransparentNavigationBar } from './NavigationBar/TransparentNavigationBar.vue';
export { default as List } from './List/List.vue';
export { default as ListItem } from './List/ListItem.vue';
export { default as ListItemV2 } from './List/ListItemV2.vue';
export { default as LargeTitleNavigationBar } from './NavigationBar/LargeTitleNavigationBar.vue';
export { default as PageLayout } from './Layout/PageLayout.vue';
export { default as PageLayoutWithBg } from './Layout/PageLayoutWithBg.vue';

 apps/taro/src/constants/img.ts

@@ -6,7 +6,8 @@
    HomePageBg: `${OssBasePath}/lifePayment/assets/common/icon-home-page-bg.png`,
  },
  mine: {
    Bg: `${OssBasePath}/matchMakingMini/assets/mine/icon-bg.png`,
    // Bg: `${OssBasePath}/matchMakingMini/assets/mine/icon-bg.png`,
    Bg: `${OssBasePath}/lifePayment/assets/common/icon-home-page-bg.png`,
    IdBg: `${OssBasePath}/matchMakingMini/assets/mine/icon-id-bg.png`,
  },
  setting: {

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

@@ -4,26 +4,27 @@
//   background-color: $body-background-color;
// }

.mine-page-bg {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 750px;
  height: 434px;
  object-fit: cover;
.index-page-wrapper {
  .home-page-bg {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.mine-page-top-view {
  display: flex;
  padding: 30px 20px;
  margin-top: 30px;
  padding: 36px 36px 64px;

  .mine-avatar {
    width: 120px;
    height: 120px;
    width: 176px;
    height: 176px;
    object-fit: cover;
    margin-right: 30px;
    margin-right: 36px;
  }

  .user-info {
@@ -44,5 +45,5 @@
}

.mine-list-wrapper {
  margin-top: 60px;
  border-radius: 20px;
}

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

@@ -1,5 +1,5 @@
<template>
  <PageLayoutWithBg class="mine-page-wrapper" title="我的" :need-auth="false">
  <!-- <PageLayoutWithBg class="mine-page-wrapper" title="我的" :need-auth="false">
    <template #navigationBar>
      <TransparentNavigationBar
        title="个人中心"
@@ -31,17 +31,60 @@
        <ListItem v-if="isLogin" title="退出登录" @click="goLogout"></ListItem>
      </List>
    </ContentScrollView>
  </PageLayoutWithBg>
  </PageLayoutWithBg> -->
  <PageLayout class="index-page-wrapper" :need-auth="false">
    <template #navigationBar>
      <TransparentNavigationBar :title="'个人中心'" :is-absolute="false">
      </TransparentNavigationBar>
    </template>
    <template #bg>
      <img :src="OssAssets.common.HomePageBg" class="home-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>
    <ContentView>
      <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>
        </template>
        <ListItemV2
          :icon="IconMineCustomerService"
          v-if="isWeb && !isInAlipay"
          title="在线客服"
          @click="handleChat"
        ></ListItemV2>
        <ListItemV2 v-if="isLogin" title="退出登录" @click="goLogout"></ListItemV2>
      </List>
    </ContentView>
  </PageLayout>
</template>

<script setup lang="ts">
import { TransparentNavigationBar, List, ListItem } from '@/components';
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 { 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';

 packages/components/src/components/Card/OrderCard.vue

@@ -1,42 +1,44 @@
<template>
  <div class="order-card">
    <div class="order-card-title">
      <div class="order-card-title-top">
      <div class="order-card-title-left">
        <div class="order-card-title-text">{{ title }}</div>
        <div class="order-card-title-status">
          {{ LifeRechargeConstants.LifePayOrderStatusEnumText[status] }}
        </div>
      </div>
      <div class="order-card-title-ordernum-wrapper">
        <div class="order-card-title-ordernum">
          {{ `订单编号：${orderNo}` }}
        </div>
        <slot name="actions">
          <div
            class="order-card-action"
            v-if="status === LifeRechargeConstants.LifePayOrderStatusEnum.充值中"
            @click="emit('goApplyRefund', id)"
          >
            申请退款
          </div>
          <div
            class="order-card-action"
            v-if="status === LifeRechargeConstants.LifePayOrderStatusEnum.退款失败"
            @click="emit('goRefundDetail', orderNo)"
          >
            详情
          </div>
        </slot>
      </div>
      <div class="order-card-title-status">
        <img :src="LifePayOrderStatusEnumImg[status]" alt="" />
      </div>
    </div>
    <div class="order-card-content">
      <slot></slot>
    </div>
    <slot name="actions">
      <div class="order-card-footer" v-if="shoeFooter">
        <div
          v-if="status === LifeRechargeConstants.LifePayOrderStatusEnum.充值中"
          class="order-card-action"
          @click="emit('goApplyRefund', id)"
        >
          申请退款
        </div>
        <div
          class="order-card-action"
          v-if="status === LifeRechargeConstants.LifePayOrderStatusEnum.退款失败"
          @click="emit('goRefundDetail', orderNo)"
        >
          详情
        </div>
      </div>
    </slot>
  </div>
</template>

<script setup lang="ts">
import { LifeRechargeConstants } from '@life-payment/core-vue';
import { OssAssets } from '../../constants';
import { computed } from 'vue';

defineOptions({
  name: 'OrderCard',
@@ -55,4 +57,21 @@
  (e: 'goApplyRefund', id: string): void;
  (e: 'goRefundDetail', orderNo: string): void;
}>();

const LifePayOrderStatusEnumImg = {
  [LifeRechargeConstants.LifePayOrderStatusEnum.充值中]: OssAssets.card.Recharge,
  [LifeRechargeConstants.LifePayOrderStatusEnum.已失败]: OssAssets.card.Failed,
  [LifeRechargeConstants.LifePayOrderStatusEnum.已完成]: OssAssets.card.Success,
  [LifeRechargeConstants.LifePayOrderStatusEnum.待退款]: OssAssets.card.WaitRefund,
  [LifeRechargeConstants.LifePayOrderStatusEnum.已退款]: OssAssets.card.Refunded,
  [LifeRechargeConstants.LifePayOrderStatusEnum.退款失败]: OssAssets.card.RefundFail,
  [LifeRechargeConstants.LifePayOrderStatusEnum.退款中]: OssAssets.card.Refund,
};

const shoeFooter = computed(() => {
  return (
    props.status === LifeRechargeConstants.LifePayOrderStatusEnum.充值中 ||
    props.status === LifeRechargeConstants.LifePayOrderStatusEnum.退款失败
  );
});
</script>

 packages/components/src/constants/img.ts

@@ -6,4 +6,14 @@
    FreeDian: `${OssBasePath}/lifePayment/assets/home/icon-free-dian.png`,
    FreeGas: `${OssBasePath}/lifePayment/assets/home/icon-free-gas.png`,
  },

  card: {
    Failed: `${OssBasePath}/lifePayment/assets/card/card-status-failed.png`,
    Recharge: `${OssBasePath}/lifePayment/assets/card/card-status-recharge.png`,
    RefundFail: `${OssBasePath}/lifePayment/assets/card/card-status-refund-fail.png`,
    Refund: `${OssBasePath}/lifePayment/assets/card/card-status-refund.png`,
    Refunded: `${OssBasePath}/lifePayment/assets/card/card-status-refunded.png`,
    Success: `${OssBasePath}/lifePayment/assets/card/card-status-success.png`,
    WaitRefund: `${OssBasePath}/lifePayment/assets/card/card-status-wait-refund.png`,
  },
};

 packages/components/src/styles/index.scss

@@ -52,5 +52,5 @@

.life-page-infinite-scroll-list {
  @include lifeListScrollView;
  padding-top: 16px;
  padding-top: 32px;
}

 packages/components/src/styles/orderCard.scss

@@ -1,10 +1,9 @@
@use './common.scss' as *;

.order-card {
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 24px;
  padding: 40px 28px;
  margin-bottom: 32px;
  background-color: #fff;

  &:last-child {
@@ -13,46 +12,73 @@

  .order-card-title {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #f3f3f3;
    padding-bottom: 32px;
    margin-bottom: 32px;

    .order-card-title-top {
    .order-card-title-left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: #333333;
      font-size: 28px;
      line-height: 40px;
      font-weight: 600;
      margin-bottom: 12px;
      flex: 1;
      min-width: 0;
      margin-right: 56px;

      .order-card-title-text {
        font-size: 30px;
        line-height: 42px;
        font-weight: 400;
      }
    }

    .order-card-title-ordernum {
      font-size: 24px;
      color: #999999;
      flex: 1;
      min-width: 0;
      font-size: 28px;
      line-height: 40px;
      color: #575b6c;
      @include ellipsis;
    }

    .order-card-title-ordernum-wrapper {
      display: flex;
      align-items: center;
    .order-card-title-status {
      width: 116px;
      height: 116px;

      .order-card-action {
        font-size: 24px;
        color: boleGetCssVar('color', 'primary');
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .order-card-content {
    padding-bottom: 26px;
  }

  .order-card-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 32px;
    border-top: solid 1px #f7f7f7;
  }

  .order-card-action {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 24px;
    color: boleGetCssVar('color', 'primary');
    font-size: 26px;
    line-height: 36px;
    border: 1px solid boleGetCssVar('color', 'primary');
    border-radius: 8px;
  }
}

.order-card-item {
  display: flex;
  font-size: 28px;
  line-height: 40px;
  margin-bottom: 15px;
  line-height: 48px;
  margin-bottom: 8px;

  .order-card-item-label {
    color: #333333;
@@ -69,4 +95,8 @@
      color: boleGetCssVar('color', 'danger');
    }
  }

  &:last-child {
    margin-bottom: 0;
  }
}