<template>
	<view class="order">
		<view class="order-icon">
			<up-icon name="checkmark-circle-fill" :color="Color" size="25" />
			<text>已取消</text>
		</view>
		<view class="order-text">订单已取消，看看其他的吧</view>
		<view class="order-btn">
			<text class="btn1" @click="toHome">返回首页</text>
			<text class="btn2" @click="toOrder">查看订单</text>
		</view>
	</view>
</template>

<script>
import { ref, reactive, toRefs } from 'vue'
export default {
	setup() {
		const data = reactive({
			Color: uni.getStorageSync('theme_color')
		})
		
		function toHome() {
			uni.switchTab({
				url: '/pages/index/index'
			})
		}
		
		function toOrder() {
			uni.navigateBack()
		}
		
		return {
			...toRefs(data),
			toHome,
			toOrder
		}
	}
}
</script>

<style lang="scss" scoped>
.order {
  text-align: center;
  padding: 50rpx 0;
  &-icon {
    display: flex;
    justify-content: center;
    font-size: 34rpx;
    text {
      margin-left: 10rpx;
    }
  }
  &-text {
    color: #666666;
    font-size: 26rpx;
    margin-top: 20rpx;
  }
  &-btn {
    display: flex;
    justify-content: center;
    margin-top: 40rpx;
    .btn1,
    .btn2 {
      font-size: 30rpx;
      width: 38%;
      height: 77rpx;
      line-height: 77rpx;
      border-radius: 49rpx;
    }
    .btn1 {
      border: 1px solid #98989f;
      margin-right: 40rpx;
    }
    .btn2 {
      color: #fff;
      background: $Color3;
    }
  }
}
</style>
