<template>
  <view class="verify-fail-page">
    <!-- 自定义导航栏 -->
    <custom-navbar title="" :showBack="true" backgroundColor="#FFFFFF" borderBottom="none"></custom-navbar>

    <view class="fail-content">
      <!-- 失败图标 -->
      <image class="fail-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/3d7aec4c-beae-4d82-83ca-1244e9af4af7.png" mode="aspectFit"></image>
      
      <!-- 失败文案 -->
      <view class="fail-title">核销未成功</view>
      <view class="fail-message">未找到订单信息，请核对二维码是否正确！</view>

      <!-- 重新扫码按钮 -->
      <view class="rescan-btn" @tap="rescan">
        重新扫码验券
      </view>
    </view>
  </view>
</template>

<script>
import CustomNavbar from "@/components/custom-navbar/custom-navbar.vue";

export default {
  components: { CustomNavbar },
  data() {
    return {};
  },
  methods: {
    rescan() {
      // 返回到扫码页面（verify-order）
      uni.navigateBack({
        delta: 1, // 退回上一页，即扫码页
      });
    }
  }
};
</script>

<style lang="scss" scoped>
page {
  background-color: #fff;
}
.verify-fail-page {
  min-height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.fail-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
//   padding: 0 60rpx;
  margin-top: -250rpx;
}

.fail-icon {
  width: 300rpx;
  height: 257rpx;
  margin-bottom: -10rpx;
}

.fail-title {
  font-weight: 500;
font-size: 36rpx;
color: #333333;
line-height: 50rpx;
  margin-bottom: 9rpx;
}

.fail-message {
  font-weight: 400;
    font-size: 26rpx;
    color: #999999;
    line-height: 37rpx;
  text-align: center;
  margin-bottom: 60rpx;
}

.rescan-btn {
  width: 329rpx;
height: 98rpx;
  border-radius: 49rpx;
    border: 1rpx solid #FF4767;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 32rpx;
  color: #FF4767;
  transition: all 0.2s;
  
  &:active {
    transform: scale(0.98);
    background: #e63e5b;
  }
}
</style>