168 lines
3.0 KiB
Vue
168 lines
3.0 KiB
Vue
<template>
|
|
<view class="growth-package-result-page">
|
|
<custom-navbar
|
|
title="支付结果"
|
|
:showBack="true"
|
|
backgroundColor="#F7F7F7"
|
|
borderBottom="none"
|
|
></custom-navbar>
|
|
|
|
<view class="result-main">
|
|
<view class="result-icon" :class="isFail ? 'is-fail' : 'is-success'">
|
|
<block v-if="isFail">
|
|
<view class="fail-line"></view>
|
|
<view class="fail-dot"></view>
|
|
</block>
|
|
<view v-else class="success-check"></view>
|
|
</view>
|
|
<view class="result-title">{{ resultInfo.title }}</view>
|
|
<view class="result-desc">{{ resultInfo.desc }}</view>
|
|
<view class="primary-btn" @tap="handlePrimaryTap">{{ isFail ? "重新支付" : "返回首页" }}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import CustomNavbar from "@/components/custom-navbar/custom-navbar.vue";
|
|
|
|
export default {
|
|
components: {
|
|
CustomNavbar,
|
|
},
|
|
data() {
|
|
return {
|
|
status: "success",
|
|
};
|
|
},
|
|
computed: {
|
|
isFail() {
|
|
return this.status === "fail";
|
|
},
|
|
resultInfo() {
|
|
if (this.isFail) {
|
|
return {
|
|
title: "报名失败",
|
|
desc: "最后一步出了点问题 请重新支付",
|
|
};
|
|
}
|
|
return {
|
|
title: "报名成功",
|
|
desc: "您已完成支付 感谢你对美融融的支持",
|
|
};
|
|
},
|
|
},
|
|
onLoad(options) {
|
|
this.status = options.status === "fail" ? "fail" : "success";
|
|
},
|
|
methods: {
|
|
handlePrimaryTap() {
|
|
if (this.isFail) {
|
|
uni.redirectTo({
|
|
url: "/pages/home/growth-package",
|
|
});
|
|
return;
|
|
}
|
|
uni.switchTab({
|
|
url: "/pages/home/home",
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background: #ffffff;
|
|
}
|
|
|
|
.growth-package-result-page {
|
|
min-height: 100vh;
|
|
background: #ffffff;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
.result-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 246rpx 40rpx 0;
|
|
}
|
|
|
|
.result-icon {
|
|
width: 104rpx;
|
|
height: 104rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.result-icon.is-success {
|
|
background: #12c76b;
|
|
}
|
|
|
|
.result-icon.is-fail {
|
|
background: #ff4652;
|
|
}
|
|
|
|
.success-check {
|
|
width: 44rpx;
|
|
height: 24rpx;
|
|
border-left: 8rpx solid #ffffff;
|
|
border-bottom: 8rpx solid #ffffff;
|
|
transform: rotate(-45deg);
|
|
margin-top: -8rpx;
|
|
}
|
|
|
|
.fail-line {
|
|
width: 8rpx;
|
|
height: 46rpx;
|
|
border-radius: 8rpx;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.fail-dot {
|
|
width: 8rpx;
|
|
height: 8rpx;
|
|
margin-left: -8rpx;
|
|
margin-top: 58rpx;
|
|
border-radius: 50%;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.result-title {
|
|
margin-top: 34rpx;
|
|
font-weight: 600;
|
|
font-size: 40rpx;
|
|
color: #333333;
|
|
line-height: 56rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.result-desc {
|
|
margin-top: 8rpx;
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #b9b9b9;
|
|
line-height: 38rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.primary-btn {
|
|
width: 350rpx;
|
|
height: 80rpx;
|
|
margin-top: 144rpx;
|
|
border: 1rpx solid #ff4b67;
|
|
border-radius: 40rpx;
|
|
box-sizing: border-box;
|
|
background: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 400;
|
|
font-size: 30rpx;
|
|
color: #ff4767;
|
|
line-height: 42rpx;
|
|
}
|
|
</style>
|