94 lines
2.2 KiB
Vue
94 lines
2.2 KiB
Vue
|
<template>
|
|||
|
|
<div class="pay-success-warp">
|
|||
|
|
<userHeader :title="'支付成功'"></userHeader>
|
|||
|
|
|
|||
|
|
<div class="pay-success-content">
|
|||
|
|
<div class="icon-img">
|
|||
|
|
<el-icon><CircleCheckFilled /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
<div class="success-txt">
|
|||
|
|
<div class="title">恭喜，支付成功！</div>
|
|||
|
|
<div class="tips">查看订单详情，请前往“个人中心”的“我的订单”</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="success-do">
|
|||
|
|
<div class="success-do-pos">
|
|||
|
|
<div class="do-item">
|
|||
|
|
<el-button @click="toLink('/sub-operation-service/userCenter-userOrders')">查看订单</el-button>
|
|||
|
|
</div>
|
|||
|
|
<div class="do-item">
|
|||
|
|
<el-button type="primary" @click="toLink('/sub-operation-service/home')">返回首页</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, reactive } from 'vue';
|
|||
|
|
import { isEmpty, getAssetsFile } from '@/utils';
|
|||
|
|
import { useRoute, useRouter } from 'vue-router';
|
|||
|
|
import userHeader from './components/userHeader.vue';
|
|||
|
|
const route = useRoute();
|
|||
|
|
const router = useRouter();
|
|||
|
|
|
|||
|
|
const toLink = (path) => {
|
|||
|
|
if (path && path != '') {
|
|||
|
|
router.push(path);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.pay-success-warp {
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
.pay-success-content {
|
|||
|
|
width: 100%;
|
|||
|
|
height: calc(100vh - 136px);
|
|||
|
|
background: $color-fff;
|
|||
|
|
border-radius: 16px;
|
|||
|
|
padding: 16px;
|
|||
|
|
text-align: center;
|
|||
|
|
padding-top: 64px;
|
|||
|
|
margin-top: 16px;
|
|||
|
|
.icon-img {
|
|||
|
|
.el-icon {
|
|||
|
|
font-size: 80px;
|
|||
|
|
color: $color-main;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.success-txt {
|
|||
|
|
.title {
|
|||
|
|
font-size: 38px;
|
|||
|
|
color: $color-main;
|
|||
|
|
}
|
|||
|
|
.tips {
|
|||
|
|
font-size: 24px;
|
|||
|
|
color: $color-999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.success-do {
|
|||
|
|
width: 100%;
|
|||
|
|
display: inline-flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin: 64px 0;
|
|||
|
|
.success-do-pos {
|
|||
|
|
display: inline-flex;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
gap: 64px;
|
|||
|
|
.do-item {
|
|||
|
|
display: inline-block;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
.el-button {
|
|||
|
|
font-size: 20px;
|
|||
|
|
padding: 20px 48px !important;
|
|||
|
|
border-radius: 8px !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|