packages/components/src/assets/account/icon-account-delete.png
@@ -15,7 +15,7 @@ <slot></slot> </div> <slot name="actions"> <div class="order-card-footer" v-if="shoeFooter"> <!-- <div class="order-card-footer" v-if="showFooter"> <div v-if="status === LifeRechargeConstants.LifePayOrderStatusEnum.充值中" class="order-card-action" @@ -30,7 +30,15 @@ > 详情 </div> </div> --> <div v-if="status === LifeRechargeConstants.LifePayOrderStatusEnum.充值中" class="order-card-action" @click="emit('goApplyRefund', id)" > 申请退款 </div> <div class="order-card-action" @click="emit('goRefundDetail', orderNo)">详情</div> </slot> </div> </template> @@ -68,7 +76,7 @@ [LifeRechargeConstants.LifePayOrderStatusEnum.退款中]: OssAssets.card.Refund, }; const shoeFooter = computed(() => { const showFooter = computed(() => { return ( props.status === LifeRechargeConstants.LifePayOrderStatusEnum.充值中 || props.status === LifeRechargeConstants.LifePayOrderStatusEnum.退款失败 packages/components/src/components/Card/OrderCardItem.vue
@@ -1,6 +1,9 @@ <template> <div class="order-card-item" :class="{ danger }"> <div class="order-card-item-label" :style="{ width: labelWidth, textAlign: textAlign }"> <div class="order-card-item-label" :style="{ width: Taro.pxTransform(labelWidth), textAlign: textAlign }" > <slot name="label">{{ label }}</slot> </div> <div class="order-card-item-value"> @@ -10,6 +13,8 @@ </template> <script setup lang="ts"> import Taro from '@tarojs/taro'; defineOptions({ name: 'OrderCardItem', }); @@ -23,7 +28,7 @@ }; const props = withDefaults(defineProps<Props>(), { labelWidth: '80px', labelWidth: 140, textAlign: 'left', }); </script> packages/components/src/components/Card/UserAccountCard.vue
New file @@ -0,0 +1,28 @@ <template> <div class="user-account-card"> <div class="user-account-card-title"> <img class="user-account-card-icon" :src="icon" alt="" /> <span class="user-account-card-text">{{ title }}</span> </div> <div class="user-account-card-content">{{ content }}</div> <div class="user-account-card-remark">{{ remark }}</div> <div class="user-account-card-actions"> <slot name="action" /> </div> </div> </template> <script setup lang="ts"> defineOptions({ name: 'UserAccountCard', }); type Props = { title?: string; content?: string; icon?: string; remark?: string; }; const props = withDefaults(defineProps<Props>(), {}); </script> packages/components/src/components/Result/Result.vue
New file @@ -0,0 +1,29 @@ <template> <div class="recharge-result-view"> <div class="recharge-result-view-title">{{ title }}</div> <div class="recharge-result-view-subtitle">订单号：{{ orderNo }}</div> <div class="recharge-result-view-remark"> {{ refundCheckRemark }},如有疑问请联系客服 {{ servicePhone }}（周一到周五 9:00-17:30） </div> <div class="recharge-result-view-btn-wrapper"> <slot name="actions"> <div class="recharge-result-view-btn" @click="emit('goBackHome')">回首页</div> </slot> </div> </div> </template> <script setup lang="ts"> defineOptions({ name: 'Result', }); type Props = { title?: string; orderNo?: string; refundCheckRemark?: string; servicePhone?: string; }; const props = withDefaults(defineProps<Props>(), {}); </script> packages/components/src/constants/img.ts
@@ -16,4 +16,10 @@ Success: `${OssBasePath}/lifePayment/assets/card/card-status-success.png`, WaitRefund: `${OssBasePath}/lifePayment/assets/card/card-status-wait-refund.png`, }, accountCard: { Electric: `${OssBasePath}/lifePayment/assets/card/account-card-electric.png`, Gas: `${OssBasePath}/lifePayment/assets/card/account-card-gas.png`, Phone: `${OssBasePath}/lifePayment/assets/card/account-card-phone.png`, }, }; packages/components/src/styles/card.scss
@@ -176,3 +176,72 @@ @include ellipsis; } } .user-account-card { border-radius: 20px; padding: 32px; .user-account-card-title { display: flex; align-items: center; margin-bottom: 26px; color: boleGetCssVar('text-color', 'primary'); .user-account-card-icon { width: 88px; height: 88px; margin-right: 26px; } .user-account-card-title-text { font-size: 36px; line-height: 50px; font-weight: 500; } } .user-account-card-content { font-size: 34px; font-weight: 400; line-height: 48px; margin-bottom: 14px; color: boleGetCssVar('text-color', 'primary'); @include ellipsis; } .user-account-card-remark { font-size: 30px; line-height: 42px; font-weight: 400; margin-bottom: 20px; color: boleGetCssVar('text-color', 'secondary'); @include ellipsis; } .user-account-card-actions { display: flex; justify-content: flex-end; align-items: center; .user-account-card-action { display: flex; align-items: center; .user-account-card-action-icon { width: 40px; height: 40px; margin-right: 12px; } .user-account-card-action-text { font-size: 26px; line-height: 36px; color: boleGetCssVar('text-color', 'regular'); } } .user-account-card-action + .user-account-card-action { margin-left: 64px; } } } packages/components/src/styles/orderCard.scss
@@ -29,6 +29,18 @@ font-size: 30px; line-height: 42px; font-weight: 400; display: flex; align-items: center; &::before { content: ''; display: inline-block; width: 8px; height: 24px; background-color: #fa4640; border-radius: 24px; margin-right: 12px; } } }
@@ -52,7 +52,7 @@ item.frontStatus === BlLifeRecharge.constants.LifePayOrderFrontStatusEnum.退款失败 " label="退款发起时间:" labelWidth="110px" :labelWidth="200" :value=" item?.refundApplyTime && dayjs(item?.refundApplyTime).format('YYYY-MM-DD HH:mm:ss') " packages/components/src/views/Order/components/PhoneOrder.vue
@@ -52,7 +52,7 @@ item.frontStatus === BlLifeRecharge.constants.LifePayOrderFrontStatusEnum.退款失败 " label="退款发起时间:" labelWidth="110px" :labelWidth="200" :value=" item?.refundApplyTime && dayjs(item?.refundApplyTime).format('YYYY-MM-DD HH:mm:ss') " packages/components/src/views/userAccount/UserAccountListView.vue
@@ -4,24 +4,35 @@ v-bind="infiniteLoadingProps" > <template #renderItem="{ item }"> <AccountCard <UserAccountCard :title="TitleMap[item.lifePayType]" :icon="TitleIconMap[item.lifePayType]" :content=" item.lifePayType === LifeRechargeConstants.LifePayOrderTypeEnum.话费订单 ? item.content ? `${ BlLifeRecharge.constants.IspCodeText[ JSON.parse(item?.extraProperties)?.ispCode ?? '' ] }-${item.content}` : `${item.city}-${item.content}` " :remark="item.remark" :style="{ marginBottom: Taro.pxTransform(20), marginBottom: Taro.pxTransform(32), backgroundColor: '#ffffff', }" > <template #action> <div class="account-card-action" @click="handleEditUserAccount(item)">编辑</div> <div class="account-card-action" @click="handleDeleteUserAccount(item)">删除</div> <div class="user-account-card-action" @click="handleEditUserAccount(item)"> <img :src="IconAccountEdit" class="user-account-card-action-icon" /> <span class="user-account-card-action-text">编辑</span> </div> <div class="user-account-card-action" @click="handleDeleteUserAccount(item)"> <img :src="IconAccountDelete" class="user-account-card-action-icon" /> <span class="user-account-card-action-text">删除</span> </div> </template> </AccountCard> </UserAccountCard> </template> </InfiniteLoading> </template> @@ -37,7 +48,10 @@ } from '@life-payment/core-vue'; import { useInfiniteLoading } from '../../hooks/infiniteLoading'; import { OrderInputType } from '../../constants'; import AccountCard from '../../components/Card/AccountCard.vue'; import UserAccountCard from '../../components/Card/UserAccountCard.vue'; import IconAccountDelete from '../../assets/account/icon-account-delete.png'; import IconAccountEdit from '../../assets/account/icon-account-edit.png'; import { OssAssets } from '../../constants'; import Taro from '@tarojs/taro'; defineOptions({ @@ -51,9 +65,15 @@ const { blLifeRecharge } = useLifeRechargeContext(); const TitleMap = { [LifeRechargeConstants.LifePayOrderTypeEnum.话费订单]: '手机号', [LifeRechargeConstants.LifePayOrderTypeEnum.电费订单]: '电费户号', [LifeRechargeConstants.LifePayOrderTypeEnum.燃气订单]: '燃气户号', [LifeRechargeConstants.LifePayOrderTypeEnum.话费订单]: '话费', [LifeRechargeConstants.LifePayOrderTypeEnum.电费订单]: '电费', [LifeRechargeConstants.LifePayOrderTypeEnum.燃气订单]: '燃气费', }; const TitleIconMap = { [LifeRechargeConstants.LifePayOrderTypeEnum.话费订单]: OssAssets.accountCard.Phone, [LifeRechargeConstants.LifePayOrderTypeEnum.电费订单]: OssAssets.accountCard.Electric, [LifeRechargeConstants.LifePayOrderTypeEnum.燃气订单]: OssAssets.accountCard.Gas, }; const { infiniteLoadingProps, invalidateQueries } = useInfiniteLoading(
