94 lines
1.8 KiB
Vue
94 lines
1.8 KiB
Vue
<template>
|
|
<view>
|
|
<view class="card">
|
|
<view class="icon">
|
|
<Check font-class-name="nutui-iconfont check" size="70" color="#fff" />
|
|
<!-- <CloseLittle font-class-name="nutui-iconfont check" size="70" color="#fff" /> -->
|
|
</view>
|
|
<view class="text-box">
|
|
<view class="title">支付成功</view>
|
|
<nut-button block type="primary" @click="toOrderPage"
|
|
>查看订单</nut-button
|
|
>
|
|
<nut-button
|
|
block
|
|
plain
|
|
style="margin-top: 10px"
|
|
type="primary"
|
|
@click="toHome"
|
|
>返回首页</nut-button
|
|
>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Check, CloseLittle } from "@nutui/icons-vue-taro";
|
|
import Taro from "@tarojs/taro";
|
|
|
|
const toHome = () => {
|
|
Taro.switchTab({
|
|
url: "/pages/index/index",
|
|
});
|
|
};
|
|
|
|
const toOrderPage = () => {
|
|
Taro.redirectTo({
|
|
url: "/pages/users/order_list/index?type=0",
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #f5f5f5;
|
|
}
|
|
.card {
|
|
width: 90%;
|
|
height: 600px;
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
margin: 200px auto;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
flex-direction: column;
|
|
|
|
.icon {
|
|
width: 200px;
|
|
height: 200px;
|
|
background-color: red;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: -100px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border: #f5f5f5 10px solid;
|
|
text-align: center;
|
|
|
|
.check {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
|
|
.text-box {
|
|
text-align: center;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 100px;
|
|
|
|
.title {
|
|
font-size: 60px;
|
|
color: #333;
|
|
margin: 100px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|