<route lang="jsonc" type="page">{
	"layout": "default",
	"style": {
		"navigationStyle": "custom",
		"navigationBarBackgroundColor": "#F6F7F9"
	}
}</route>

<template>
	<view class="mx-30rpx">
        <view>
			<navbar :title="storeName" custom-class='!bg-[#F6F7F8]' :leftArrow="false"></navbar>
		</view> 

        <view class="mt-76rpx">
            <view class="font-bold text-44rpx text-[#303133] leading-60rpx text-center">输入验券</view>
        </view>

        <wd-form ref="form" :model="model">
            <view>
                <view class="mt-20rpx">
                    <wd-input 
                        v-model="model.code" 
                        type="text" 
                        placeholder="请输入券码"
                        inputmode="numeric"
                        no-border 
                        custom-class="!bg-[#fff] !rounded-16rpx" 
                        custom-input-class="!px-32rpx !h-104rpx"
                    />
                </view>
            </view>
        </wd-form>

        <view class="w-630rpx h-90rpx text-center leading-90rpx mx-auto rounded-8rpx bg-[#4C9F44] text-[#fff] mt-112rpx" @click="VerifyCode.handleVerifyCode">
            验券
        </view>
	</view>
</template>


<script lang="ts" setup>
    import { toast } from '@/utils/toast'

    const storeName = ref<string>('')

    // 表单相关
    const model = reactive<{
        code: string
    }>({
        code: ''
    })

	onLoad((args) => {
        storeName.value = args.storeName || ''
	})

    const VerifyCode = {
        // 验券
        handleVerifyCode() {
            if (!model.code) {
                return
            }
        }
    }   
</script>
	
<style lang="scss" scoped>
    page {
        background-color: $cz-page-background;
    }

</style>
