Merge branch 'dev-ui' of http://120.26.58.240:8888/r/LifePaymentFront into dev-ui
|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <ContentScrollView> | 
|---|
|  |  |  | <OrderRefundResultView | 
|---|
|  |  |  | style="margin-top: 40px" | 
|---|
|  |  |  | @go-back-home="goHome()" | 
|---|
|  |  |  | :orderNo="orderNo" | 
|---|
|  |  |  | ></OrderRefundResultView> | 
|---|
|  |  |  | <OrderRefundResultView @go-back-home="goHome()" :orderNo="orderNo"></OrderRefundResultView> | 
|---|
|  |  |  | </ContentScrollView> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | <PageLayout title="充值成功" class="rechargeElectricResult-page-wrapper" hasBorder> | 
|---|
|  |  |  | <ContentScrollView> | 
|---|
|  |  |  | <RechargeResultView | 
|---|
|  |  |  | style="margin-top: 40px" | 
|---|
|  |  |  | @go-back-home="goHome()" | 
|---|
|  |  |  | title="支付成功,充值款将在0-72小时内到账" | 
|---|
|  |  |  | title="支付成功" | 
|---|
|  |  |  | refund-check-remark="充值款将在0-72小时内到账" | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </ContentScrollView> | 
|---|
|  |  |  | </PageLayout> | 
|---|
|  |  |  | 
|---|
|  |  |  | <PageLayout title="充值成功" class="rechargeGasResult-page-wrapper" hasBorder> | 
|---|
|  |  |  | <ContentScrollView> | 
|---|
|  |  |  | <RechargeResultView | 
|---|
|  |  |  | style="margin-top: 40px" | 
|---|
|  |  |  | @go-back-home="goHome()" | 
|---|
|  |  |  | title="支付成功,充值款将在0-72小时内到账" | 
|---|
|  |  |  | title="支付成功" | 
|---|
|  |  |  | refund-check-remark="充值款将在0-72小时内到账" | 
|---|
|  |  |  | danger-tips="同一燃气费账户在充值期间,未到账前切勿在其他任何平台再次充值。因此造成的资金损失须用户自行承担!!!" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <template #tips> | 
|---|
|  |  |  | 同一燃气费账户在充值期间,未到账前切勿在其他任何平台再次充值。因此造成的资金损失须用户自行承担!!! | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </RechargeResultView> | 
|---|
|  |  |  | </ContentScrollView> | 
|---|
|  |  |  | </PageLayout> | 
|---|
|  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <slot name="actions"> | 
|---|
|  |  |  | <div class="order-card-footer" v-if="showFooter"> | 
|---|
|  |  |  | <!-- <div class="order-card-footer" v-if="showFooter"> | 
|---|
|  |  |  | <div | 
|---|
|  |  |  | v-if="status === LifeRechargeConstants.LifePayOrderStatusEnum.充值中" | 
|---|
|  |  |  | class="order-card-action" | 
|---|
|  |  |  | 
|---|
|  |  |  | @click="emit('goRefundDetail', orderNo)" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | 详情 | 
|---|
|  |  |  | </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> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </slot> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | 
|---|
|  |  |  | <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 class="result-wrapper" v-bind="$attrs"> | 
|---|
|  |  |  | <div class="result-content"> | 
|---|
|  |  |  | <img class="result-content-icon" :src="icon" /> | 
|---|
|  |  |  | <div class="result-content-title">{{ title }}</div> | 
|---|
|  |  |  | <div class="result-content-remark"> | 
|---|
|  |  |  | <slot name="remark"> | 
|---|
|  |  |  | <div class="result-content-remark-item">{{ refundCheckRemark }}</div> | 
|---|
|  |  |  | <div class="result-content-remark-item" v-if="servicePhone"> | 
|---|
|  |  |  | 如有疑问 请联系客服 {{ 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> | 
|---|
|  |  |  | <div class="result-order-number"> | 
|---|
|  |  |  | <div class="result-order-number-label">订单编号:</div> | 
|---|
|  |  |  | <div class="result-order-number-value">{{ orderNo }}</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="result-wrapper-tips"> | 
|---|
|  |  |  | <slot name="tips"> | 
|---|
|  |  |  | <div class="result-wrapper-tips-item title">充值须知</div> | 
|---|
|  |  |  | <div class="result-wrapper-tips-item danger">{{ dangerTips }}</div> | 
|---|
|  |  |  | <div class="result-wrapper-tips-item warning">{{ warningTips }}</div> | 
|---|
|  |  |  | <div class="result-wrapper-tips-item">{{ customerServiceTips }}</div> | 
|---|
|  |  |  | </slot> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="result-wrapper-actions"> | 
|---|
|  |  |  | <slot name="actions"> </slot> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | type Props = { | 
|---|
|  |  |  | title?: string; | 
|---|
|  |  |  | icon?: string; | 
|---|
|  |  |  | orderNo?: string; | 
|---|
|  |  |  | refundCheckRemark?: string; | 
|---|
|  |  |  | servicePhone?: string; | 
|---|
|  |  |  | dangerTips?: string; | 
|---|
|  |  |  | warningTips?: string; | 
|---|
|  |  |  | customerServiceTips?: string; | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const props = withDefaults(defineProps<Props>(), {}); | 
|---|
|  |  |  | 
|---|
|  |  |  | Gas: `${OssBasePath}/lifePayment/assets/card/account-card-gas.png`, | 
|---|
|  |  |  | Phone: `${OssBasePath}/lifePayment/assets/card/account-card-phone.png`, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  | result: { | 
|---|
|  |  |  | Success: `${OssBasePath}/lifePayment/assets/common/icon-result-success.png`, | 
|---|
|  |  |  | Fail: `${OssBasePath}/lifePayment/assets/common/icon-result-fail.png`, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .result-wrapper { | 
|---|
|  |  |  | margin-top: 32px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .result-content { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | justify-content: center; | 
|---|
|  |  |  | flex-direction: column; | 
|---|
|  |  |  | padding: 64px 0; | 
|---|
|  |  |  | background-color: #ffffff; | 
|---|
|  |  |  | border-radius: 20px; | 
|---|
|  |  |  | margin-bottom: 32px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .result-content-icon { | 
|---|
|  |  |  | width: 128px; | 
|---|
|  |  |  | height: 128px; | 
|---|
|  |  |  | margin-bottom: 50px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .result-content-title { | 
|---|
|  |  |  | font-size: 36px; | 
|---|
|  |  |  | color: boleGetCssVar('text-color', 'primary'); | 
|---|
|  |  |  | font-weight: 600; | 
|---|
|  |  |  | margin-bottom: 10px; | 
|---|
|  |  |  | line-height: 52px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .result-content-remark { | 
|---|
|  |  |  | font-size: 24px; | 
|---|
|  |  |  | line-height: 38px; | 
|---|
|  |  |  | color: boleGetCssVar('text-color', 'regular'); | 
|---|
|  |  |  | font-weight: 400; | 
|---|
|  |  |  | text-align: center; | 
|---|
|  |  |  | padding: 0 100px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .result-order-number { | 
|---|
|  |  |  | background-color: #ffffff; | 
|---|
|  |  |  | border-radius: 20px; | 
|---|
|  |  |  | padding: 24px 32px; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | margin-bottom: 32px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .result-order-number-label { | 
|---|
|  |  |  | font-size: 26px; | 
|---|
|  |  |  | color: boleGetCssVar('text-color', 'primary'); | 
|---|
|  |  |  | font-weight: 400; | 
|---|
|  |  |  | line-height: 42px; | 
|---|
|  |  |  | display: inline-flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | &::before { | 
|---|
|  |  |  | content: ''; | 
|---|
|  |  |  | display: inline-block; | 
|---|
|  |  |  | width: 8px; | 
|---|
|  |  |  | height: 22px; | 
|---|
|  |  |  | border-radius: 20px; | 
|---|
|  |  |  | background-color: boleGetCssVar('color', 'primary'); | 
|---|
|  |  |  | margin-right: 12px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .result-order-number-value { | 
|---|
|  |  |  | font-size: 26px; | 
|---|
|  |  |  | color: boleGetCssVar('text-color', 'primary'); | 
|---|
|  |  |  | font-weight: 400; | 
|---|
|  |  |  | line-height: 42px; | 
|---|
|  |  |  | text-align: right; | 
|---|
|  |  |  | flex: 1; | 
|---|
|  |  |  | min-width: 0; | 
|---|
|  |  |  | @include ellipsis(); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .result-wrapper-tips { | 
|---|
|  |  |  | .result-wrapper-tips-item { | 
|---|
|  |  |  | margin-bottom: 16px; | 
|---|
|  |  |  | font-size: 28px; | 
|---|
|  |  |  | color: boleGetCssVar('text-color', 'regular'); | 
|---|
|  |  |  | font-weight: 400; | 
|---|
|  |  |  | line-height: 44px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | &.title { | 
|---|
|  |  |  | margin-bottom: 12px; | 
|---|
|  |  |  | font-size: 30px; | 
|---|
|  |  |  | color: boleGetCssVar('text-color', 'primary'); | 
|---|
|  |  |  | font-weight: 400; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | &.danger { | 
|---|
|  |  |  | color: boleGetCssVar('color', 'danger'); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | &.warning { | 
|---|
|  |  |  | color: boleGetCssVar('color', 'warning'); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .result-wrapper-actions { | 
|---|
|  |  |  | .recharge-button-text { | 
|---|
|  |  |  | font-size: 32px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .order-card-content { | 
|---|
|  |  |  | padding-bottom: 26px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .order-card-footer { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | justify-content: flex-end; | 
|---|
|  |  |  | padding-top: 32px; | 
|---|
|  |  |  | margin-top: 26px; | 
|---|
|  |  |  | border-top: solid 1px #f7f7f7; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <LoadingLayout :loading="isLoading"> | 
|---|
|  |  |  | <div class="recharge-result-view" v-bind="$attrs"> | 
|---|
|  |  |  | <Result | 
|---|
|  |  |  | v-bind="$attrs" | 
|---|
|  |  |  | :title="title" | 
|---|
|  |  |  | :orderNo="orderNo" | 
|---|
|  |  |  | :icon="OssAssets.result.Fail" | 
|---|
|  |  |  | :refundCheckRemark="detail.refundCheckRemark" | 
|---|
|  |  |  | :servicePhone="CustomerServicePhone" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <template #actions> | 
|---|
|  |  |  | <div class="chunk-form-actions"> | 
|---|
|  |  |  | <nut-button class="recharge-button" type="primary" @click="emit('goBackHome')"> | 
|---|
|  |  |  | <div class="recharge-button-inner"> | 
|---|
|  |  |  | <div class="recharge-button-text">回首页</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </nut-button> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </Result> | 
|---|
|  |  |  | <!-- <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"> | 
|---|
|  |  |  | 
|---|
|  |  |  | <div class="recharge-result-view-btn-wrapper"> | 
|---|
|  |  |  | <div class="recharge-result-view-btn" @click="emit('goBackHome')">回首页</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> --> | 
|---|
|  |  |  | </LoadingLayout> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <script setup lang="ts"> | 
|---|
|  |  |  | import { LifeRechargeConstants, useLifeRechargeContext } from '@life-payment/core-vue'; | 
|---|
|  |  |  | import { CustomerServicePhone } from '../../constants'; | 
|---|
|  |  |  | import Result from '../../components/Result/Result.vue'; | 
|---|
|  |  |  | import { CustomerServicePhone, OssAssets } from '../../constants'; | 
|---|
|  |  |  | import { useQuery } from '@tanstack/vue-query'; | 
|---|
|  |  |  | import { computed } from 'vue'; | 
|---|
|  |  |  | import LoadingLayout from '../../components//Layout/LoadingLayout.vue'; | 
|---|
|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <div class="recharge-result-view"> | 
|---|
|  |  |  | <!-- <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-tips"> | 
|---|
|  |  |  | 
|---|
|  |  |  | <div class="recharge-result-view-btn-wrapper"> | 
|---|
|  |  |  | <div class="recharge-result-view-btn" @click="emit('goBackHome')">回首页</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> --> | 
|---|
|  |  |  | <Result | 
|---|
|  |  |  | v-bind="$attrs" | 
|---|
|  |  |  | :title="title" | 
|---|
|  |  |  | :refundCheckRemark="refundCheckRemark" | 
|---|
|  |  |  | :orderNo="orderNo" | 
|---|
|  |  |  | :icon="OssAssets.result.Success" | 
|---|
|  |  |  | :customerServiceTips="CustomerServiceTips" | 
|---|
|  |  |  | :dangerTips="dangerTips" | 
|---|
|  |  |  | warningTips="如接到陌生来电,对方以缴费或误操作等理由要求处理款项,务必立即拉黑,谨防诈骗!!!" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <template #actions> | 
|---|
|  |  |  | <div class="chunk-form-actions"> | 
|---|
|  |  |  | <nut-button class="recharge-button" type="primary" @click="emit('goBackHome')"> | 
|---|
|  |  |  | <div class="recharge-button-inner"> | 
|---|
|  |  |  | <div class="recharge-button-text">返回首页</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </nut-button> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </Result> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <script setup lang="ts"> | 
|---|
|  |  |  | import { LifeRechargeConstants } from '@life-payment/core-vue'; | 
|---|
|  |  |  | import { CustomerServiceTips } from '../../constants'; | 
|---|
|  |  |  | import { CustomerServiceTips, OssAssets } from '../../constants'; | 
|---|
|  |  |  | import Result from '../../components/Result/Result.vue'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | defineOptions({ | 
|---|
|  |  |  | name: 'RechargeResultView', | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | type Props = { | 
|---|
|  |  |  | title?: string; | 
|---|
|  |  |  | refundCheckRemark?: string; | 
|---|
|  |  |  | orderNo?: string; | 
|---|
|  |  |  | dangerTips?: string; | 
|---|
|  |  |  | lifePayOrderType?: LifeRechargeConstants.LifePayOrderTypeEnum; | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const props = withDefaults(defineProps<Props>(), { | 
|---|
|  |  |  | title: '支付成功,充值款将在0-24小时内到账', | 
|---|
|  |  |  | title: '支付成功', | 
|---|
|  |  |  | refundCheckRemark: '充值款将在0-24小时内到账', | 
|---|
|  |  |  | dangerTips: | 
|---|
|  |  |  | '同一号码充值期间,未到账前切勿在其他任何平台再次充值。因此造成的资金损失须用户自行承担!!!', | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const emit = defineEmits<{ | 
|---|