feat: 1.0
This commit is contained in:
@@ -1,17 +1,25 @@
|
||||
<template>
|
||||
<main class="success-page">
|
||||
<van-icon name="checked" color="#20bd58" size="68" />
|
||||
<h2>支付成功</h2>
|
||||
<b>¥ {{ amountText }}</b>
|
||||
<section>
|
||||
<p>订单编号 <span>{{ paymentInfo.orderNo || '-' }}</span></p>
|
||||
<p>支付方式 <span>{{ payTypeText }}</span></p>
|
||||
<p>支付时间 <span>{{ paidAt }}</span></p>
|
||||
<van-nav-bar title="支付成功" left-arrow @click-left="$router.back()" />
|
||||
|
||||
<section class="success-card">
|
||||
<div class="success-icon">
|
||||
<van-icon name="success" />
|
||||
</div>
|
||||
<h2>支付成功</h2>
|
||||
<b>¥ {{ amountText }}</b>
|
||||
|
||||
<div class="order-info">
|
||||
<p><span>订单编号</span><em>{{ paymentInfo.orderNo || '-' }}</em></p>
|
||||
<p><span>支付方式</span><em>{{ payTypeText }}</em></p>
|
||||
<p><span>支付时间</span><em>{{ paidAt }}</em></p>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<van-button round plain @click="$router.push('/joyful-selection/orders')">查看订单</van-button>
|
||||
<van-button round type="danger" @click="$router.push('/joyful-selection/home')">继续购物</van-button>
|
||||
</footer>
|
||||
</section>
|
||||
<div>
|
||||
<van-button round @click="$router.push('/joyful-selection/orders')">查看订单</van-button>
|
||||
<van-button round type="danger" @click="$router.push('/joyful-selection/home')">继续购物</van-button>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
@@ -52,6 +60,105 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.success-page{min-height:100vh;padding:80px 30px;text-align:center;background:#fff}.success-page h2{margin:15px 0 10px;font-size:17px}.success-page>b{font-size:22px}.success-page section{margin-top:42px;text-align:left;color:#888;font-size:12px}.success-page section p{display:flex;justify-content:space-between}.success-page section span{color:#333}.success-page>div{display:flex;gap:10px;margin-top:35px}.success-page .van-button{flex:1}.success-page .van-button--danger{background:#ff5b20;border-color:#ff5b20}
|
||||
<style scoped lang="less">
|
||||
.success-page {
|
||||
min-height: 100vh;
|
||||
padding: 46px 8px 24px;
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
.success-page ::v-deep .van-nav-bar {
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
|
||||
}
|
||||
|
||||
.success-card {
|
||||
min-height: calc(100vh - 70px);
|
||||
margin-top: 8px;
|
||||
padding: 34px 20px 24px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
display: flex;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
background: #22c55e;
|
||||
}
|
||||
|
||||
.success-icon .van-icon {
|
||||
font-size: 34px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.success-card h2 {
|
||||
margin: 14px 0 9px;
|
||||
color: #222;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.success-card > b {
|
||||
display: block;
|
||||
color: #222;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.order-info {
|
||||
margin-top: 34px;
|
||||
}
|
||||
|
||||
.order-info p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 0;
|
||||
color: #777;
|
||||
font-size: 12px;
|
||||
line-height: 31px;
|
||||
}
|
||||
|
||||
.order-info em {
|
||||
max-width: 68%;
|
||||
overflow: hidden;
|
||||
color: #333;
|
||||
font-style: normal;
|
||||
text-align: right;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.success-card footer {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.success-card footer .van-button {
|
||||
flex: 1;
|
||||
height: 38px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.success-card ::v-deep .van-button--plain {
|
||||
color: #333;
|
||||
border-color: #ddd;
|
||||
}
|
||||
|
||||
.success-card ::v-deep .van-button--danger {
|
||||
background: #ff5b20;
|
||||
border-color: #ff5b20;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -38,6 +38,27 @@
|
||||
</section>
|
||||
|
||||
<van-button class="pay-button" round block @click="onPay">立即支付 ¥{{ amountText }}</van-button>
|
||||
|
||||
<van-popup v-model="showConfirm" class="pay-popup" round position="bottom">
|
||||
<article class="pay-panel">
|
||||
<header>
|
||||
<van-icon name="cross" @click="showConfirm = false" />
|
||||
<h2>确认支付</h2>
|
||||
</header>
|
||||
<section class="pay-summary">
|
||||
<p>支付金额</p>
|
||||
<b>¥ {{ amountText }}</b>
|
||||
</section>
|
||||
<div class="pay-info">
|
||||
<p><span>支付方式</span><b>{{ payTypeText }}</b></p>
|
||||
<p><span>订单编号</span><b>{{ paymentInfo.orderNo || '-' }}</b></p>
|
||||
</div>
|
||||
<footer>
|
||||
<van-button round @click="showConfirm = false">取消</van-button>
|
||||
<van-button round type="danger" @click="confirmPay">确认支付</van-button>
|
||||
</footer>
|
||||
</article>
|
||||
</van-popup>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
@@ -48,6 +69,7 @@ export default {
|
||||
name: 'JoyfulSelectionPayment',
|
||||
data: () => ({
|
||||
payType: 'points',
|
||||
showConfirm: false,
|
||||
paymentInfo: {},
|
||||
pointsBalance: '32.00'
|
||||
}),
|
||||
@@ -61,6 +83,11 @@ export default {
|
||||
|
||||
return tel ? `${name} ${tel}` : name
|
||||
},
|
||||
payTypeText() {
|
||||
const method = this.payMethods.find(item => item.name === this.payType)
|
||||
|
||||
return method ? method.label.replace(/（.*$/, '') : '积分支付'
|
||||
},
|
||||
payMethods() {
|
||||
return [
|
||||
{ name: 'points', label: `积分支付（余额：¥${this.pointsBalance}）`, icon: 'gold-coin-o' },
|
||||
@@ -74,7 +101,10 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
onPay() {
|
||||
this.$router.push({ path: '/joyful-selection/payment-confirm', query: { payType: this.payType } })
|
||||
this.showConfirm = true
|
||||
},
|
||||
confirmPay() {
|
||||
this.$router.push({ path: '/joyful-selection/payment-success', query: { payType: this.payType } })
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -217,4 +247,94 @@ export default {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pay-popup {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pay-panel {
|
||||
padding: 0 18px 18px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.pay-panel header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 52px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pay-panel header h2 {
|
||||
margin: 0;
|
||||
color: #222;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pay-panel header .van-icon {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #999;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.pay-summary {
|
||||
padding: 18px 0 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pay-summary p {
|
||||
margin: 0 0 12px;
|
||||
color: #777;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.pay-summary b {
|
||||
color: #222;
|
||||
font-size: 30px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.pay-info {
|
||||
padding: 10px 0;
|
||||
border-top: 1px solid #f3f3f3;
|
||||
border-bottom: 1px solid #f3f3f3;
|
||||
}
|
||||
|
||||
.pay-info p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 0;
|
||||
color: #777;
|
||||
font-size: 13px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.pay-info b {
|
||||
max-width: 68%;
|
||||
overflow: hidden;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
text-align: right;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pay-panel footer {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.pay-panel footer .van-button {
|
||||
flex: 1;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.payment-page ::v-deep .van-button--danger {
|
||||
background: #ff5b20;
|
||||
border-color: #ff5b20;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user