wgh/coreshoppro
1
0
Fork 0
mirror of http://git.coreshop.cn/jianweie/coreshoppro.git synced 2025-12-06 18:43:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

【优化】调整支付结果界面样式效果，仿微信支付结果界面。更加清晰明朗。

Browse Source
This commit is contained in:
大灰灰
2022-08-12 23:52:55 +08:00
parent fa351430de
commit f56e5f2761
2 changed files with 30 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
CoreCms.Net.Uni-App/CoreShop/pages/payment/result/result.scss
View File

@@ -5,7 +5,7 @@ page { background-color: #EFF5F8; }
.icon { font-size: 16px; }
}
}
.coreshop-padding { position: relative; padding: 25px 32px; line-height: 2; }
.coreshop-padding { position: relative; padding: 25px 40px; line-height: 2; }
.coreshop-btn-view { position: relative; display: flex; align-items: center; justify-content: center;
.cu-btn { background: #FFFFFF; }
}
@@ -15,4 +15,4 @@ page { background-color: #EFF5F8; }
}
}
.chsop-pay-result-price { margin-top: 15px; color: #FF7159 !important; }
.chsop-pay-result-price { margin-top: 15px; color: #FF7159 !important; }

47
CoreCms.Net.Uni-App/CoreShop/pages/payment/result/result.vue
View File

@@ -10,28 +10,37 @@
<view slot="right">
</view>
</u-navbar>
<!--状态图标-->
<view class="coreshop-status-view">
<image class="status-img" src="/static/images/payments/pay.png" mode="widthFix" />
<view class="coreshop-bg-red status-bg-view">
<u-icon name="checkmark" color="white" v-if="status && paymentInfo.status === 2"></u-icon>
<u-icon name="close" color="white" v-else-if="status && paymentInfo.status === 1"></u-icon>
<view v-if="status && paymentInfo.status === 2">
<!--状态图标-->
<view class="coreshop-flex coreshop-flex-wrap coreshop-flex-direction-row coreshop-align-center coreshop-justify-center coreshop-padding-40">
<u-icon name="checkmark-circle-fill" color="#5ac725" size="90"></u-icon>
</view>
<view class="coreshop-text-bold coreshop-text-black coreshop-font-xl coreshop-text-center">支付成功</view>
<!--支付金额-->
<view class="coreshop-text-bold coreshop-text-black coreshop-font-20 coreshop-text-center chsop-pay-result-price">￥{{ paymentInfo.money || '' }}</view>
<!--状态说明-->
<view class="coreshop-text-gray coreshop-font-sm coreshop-text-center coreshop-padding"> 平台已收到您的钱款，已通知卖家发货。平台会及时通知您的交易状态，请您关注。 </view>
<!--按钮-->
<view class="coreshop-btn-view coreshop-padding">
<u-button type="success" size="normal" @click="orderDetail()">查看详情</u-button>
</view>
</view>
<!--状态标题-->
<view class="coreshop-text-bold coreshop-text-black coreshop-font-xl coreshop-text-center" v-if="status && paymentInfo.status === 2">支付成功</view>
<view class="coreshop-text-bold coreshop-text-black coreshop-font-xl coreshop-text-center" v-else-if="status && paymentInfo.status === 1">支付失败</view>
<!--支付金额-->
<view class="coreshop-text-bold coreshop-text-black coreshop-font-xl coreshop-text-center chsop-pay-result-price">￥{{ paymentInfo.money || '' }}</view>
<!--状态说明-->
<view class="coreshop-text-gray coreshop-font-sm coreshop-text-center coreshop-padding" v-if="status && paymentInfo.status === 2"> 平台已收到您的钱款，已通知卖家发货。平台会及时通知您的交易状态，请您关注。 </view>
<view class="coreshop-text-gray coreshop-font-sm coreshop-text-center coreshop-padding" v-else-if="status && paymentInfo.status === 1"> 因为某些问题导致支付失败，请查看详情了解具体问题 </view>
<!--按钮-->
<view class="coreshop-btn-view coreshop-padding">
<u-button type="primary" size="normal" @click="orderDetail()">查看详情</u-button>
<view v-else-if="status && paymentInfo.status === 1">
<!--状态图标-->
<view class="coreshop-flex coreshop-flex-wrap coreshop-flex-direction-row coreshop-align-center coreshop-justify-center coreshop-padding-40">
<u-icon name="error-circle-fill" color="#fa5151" size="90"></u-icon>
</view>
<view class="coreshop-text-bold coreshop-text-black coreshop-font-xl coreshop-text-center">支付失败</view>
<!--支付金额-->
<!--<view class="coreshop-text-bold coreshop-text-black coreshop-font-30 coreshop-text-center chsop-pay-result-price">￥{{ paymentInfo.money || '' }}</view>-->
<!--状态说明-->
<view class="coreshop-text-gray coreshop-font-sm coreshop-text-center coreshop-padding"> 因为某些问题导致支付失败，请查看详情了解具体问题 </view>
<!--按钮-->
<view class="coreshop-btn-view coreshop-padding">
<u-button type="success" size="normal" @click="orderDetail()">查看详情</u-button>
</view>
</view>
<!-- 登录提示 -->