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