<template><page-meta :page-style="cssVar"></page-meta><view class="container"><u-navbartitle="优惠券兑换"placeholderbgColor="#fff":autoBack="true":titleStyle="{fontFamily: 'SourceHanSansCN-Medium',}"></u-navbar><view class="main"><view class="image-container"><image class="img-item" src="@/assets/images/meituan.png" /><image class="img-item" src="@/assets/images/douyin.png" /><image class="img-item" src="@/assets/images/dazhongdianping.png" /></view><view class="form-container"><view class="input-container"><u-inputtype="number":modelValue="codeValue"placeholder="输入美团/抖音/大众点评券码"@change="valueChange"clearable/></view><u-button:disable="!codeValue"@click="handleConfirm"class="form-btn"text="确认修改":customStyle="btnStyle"></u-button></view></view></view>
</template><script setup>
import { computed, ref } from 'vue';
const codeValue = ref('');const handleConfirm = async () => {if (!codeValue.value) return;uni.showLoading({ title: '兑换中', mask: true });const value = codeValue.value.replace(/\s/g, '');const params = {code: value,};const { code } = await couponUserCoinCertificate(params); // 你的兑换接口if (code === '0') {uni.showToast({ title: '兑换成功' });}
};const btnStyle = computed(() => {return { background: !codeValue.value ? '#CCCCCC' : 'var(--main-color)' };
});// 实现空格的关键
function valueChange(e) {// 先移除所有空格var noSpacesValue = e.replace(/\s/g, '');// 然后每四个字符添加一个空格var formattedValue = noSpacesValue.replace(/(.{4})/g, '$1 ').trim();// 移除最后一个空格（如果存在）formattedValue = formattedValue.replace(/\s+$/, '');codeValue.value = formattedValue;
}
</script>