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>
|