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