apps/taro/src/assets/mine/icon-mine-customer-service.png
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 { .index-page-wrapper { .home-page-bg { position: fixed; z-index: -1; top: 0; left: 0; width: 750px; height: 434px; 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,20 +1,24 @@ <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> </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 class="order-card-action" v-if="status === LifeRechargeConstants.LifePayOrderStatusEnum.充值中" class="order-card-action" @click="emit('goApplyRefund', id)" > 申请退款 @@ -26,17 +30,15 @@ > 详情 </div> </div> </slot> </div> </div> <div class="order-card-content"> <slot></slot> </div> </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 { .order-card-title-status { width: 116px; height: 116px; img { width: 100%; height: 100%; } } } .order-card-content { padding-bottom: 26px; } .order-card-footer { display: flex; align-items: center; justify-content: flex-end; padding-top: 32px; border-top: solid 1px #f7f7f7; } .order-card-action { font-size: 24px; 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; } }
