105 lines
2.1 KiB
Vue
105 lines
2.1 KiB
Vue
<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> |