153 lines
3.2 KiB
Vue
153 lines
3.2 KiB
Vue
<template>
|
|
<view class="manual-verify">
|
|
<CustomNavbar title="" backgroundColor="#FFFFFF"></CustomNavbar>
|
|
|
|
<view class="content">
|
|
<view class="tip">请输入6位核销码</view>
|
|
|
|
<view class="code-inputs" @tap="focusInput">
|
|
<view
|
|
class="input-box"
|
|
:class="{ filled: code[i-1] }"
|
|
v-for="i in 6"
|
|
:key="i"
|
|
>
|
|
{{ code[i-1] || '' }}
|
|
</view>
|
|
</view>
|
|
|
|
<input
|
|
class="hidden-input"
|
|
type="number"
|
|
maxlength="6"
|
|
:value="code"
|
|
:focus="inputFocus"
|
|
@input="onInput"
|
|
@blur="resetFocus"
|
|
confirm-type="done"
|
|
/>
|
|
|
|
<button class="confirm-btn" :class="{ active: code.length === 6 }" @tap="submitCode">
|
|
确认
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import CustomNavbar from "@/components/custom-navbar/custom-navbar.vue";
|
|
import request from "@/utils/request";
|
|
|
|
export default {
|
|
components: { CustomNavbar },
|
|
data() {
|
|
return {
|
|
code: '',
|
|
inputFocus: false
|
|
};
|
|
},
|
|
methods: {
|
|
focusInput() {
|
|
this.inputFocus = false;
|
|
this.$nextTick(() => {
|
|
this.inputFocus = true;
|
|
});
|
|
},
|
|
resetFocus() {
|
|
this.inputFocus = false;
|
|
},
|
|
onInput(e) {
|
|
let value = e.detail.value;
|
|
value = value.replace(/\D/g, '');
|
|
if (value.length > 6) value = value.slice(0, 6);
|
|
this.code = value;
|
|
},
|
|
submitCode() {
|
|
if (this.code.length !== 6) {
|
|
uni.showToast({ title: '请输入6位核销码', icon: 'none' });
|
|
return;
|
|
}
|
|
request.post('/sj/poster/useOrderServerCode', {
|
|
server_code: this.code,
|
|
id: this.orderId,
|
|
order_type: this.orderType
|
|
}).then(res => {
|
|
if (res.code === 200) {
|
|
uni.showToast({ title: '核销成功' });
|
|
setTimeout(() => uni.navigateBack(), 1500);
|
|
} else {
|
|
uni.showToast({ title: res.msg || '核销失败', icon: 'none' });
|
|
}
|
|
}).catch(() => {
|
|
uni.showToast({ title: '网络异常', icon: 'none' });
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.manual-verify {
|
|
padding-top: 150rpx;
|
|
background-color: #fff;
|
|
min-height: 100vh;
|
|
|
|
.tip {
|
|
font-weight: 500;
|
|
font-size: 46rpx;
|
|
color: #333333;
|
|
line-height: 65rpx;
|
|
text-align: left;
|
|
margin-bottom: 80rpx;
|
|
margin-left: 48rpx;
|
|
}
|
|
|
|
.code-inputs {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 24rpx;
|
|
margin-bottom: 80rpx;
|
|
padding: 0 30rpx;
|
|
|
|
.input-box {
|
|
width: 88rpx;
|
|
height: 88rpx;
|
|
border-radius: 12rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 48rpx;
|
|
font-weight: 500;
|
|
color: #333;
|
|
background-color: #F3F3F3;
|
|
}
|
|
}
|
|
|
|
.confirm-btn {
|
|
margin: 0 49rpx;
|
|
background: #ff476685;
|
|
color: #fff;
|
|
border-radius: 88rpx;
|
|
height: 96rpx;
|
|
line-height: 96rpx;
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
box-shadow: 0 8rpx 20rpx rgba(255, 71, 103, 0.2);
|
|
transition: all 0.2s;
|
|
|
|
&.active {
|
|
background: #FF4767;
|
|
}
|
|
}
|
|
|
|
.hidden-input {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 2px;
|
|
height: 2px;
|
|
opacity: 0;
|
|
background: transparent;
|
|
}
|
|
}
|
|
</style> |