fucai
/
fucai-claim
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: fucai:60d2ab6380ca03715f78851490083778dbc51fb1
Branches Tags
fucai:master
...
compare: fucai:1ec48ed0404322097b40ba39fde5c01d1d6f14d4
Branches Tags
fucai:master

2 Commits
60d2ab6380 ... 1ec48ed040

Author SHA1 Message Date
weichengwu 1ec48ed040 update card style 2025-11-22 10:47:03 +08:00
weichengwu 2bcf352c3e update 使用说明 2025-11-22 10:42:21 +08:00
1 changed files with 170 additions and 132 deletions
Show Stats Expand all files Collapse all files

262
src/pages/home/index.vue
View File

@ -17,137 +17,175 @@
<!-- 表单区域 --> <!-- 表单区域 -->
<div class="p-4 -mt-10 z-10 relative"> <div class="p-4 -mt-10 z-10 relative">
<div class="mx-auto bg-white rounded-xl shadow-sm p-6"> <div
<!-- 标题 --> class="relative overflow-hidden rounded-2xl border border-[#FFD7DF] bg-gradient-to-br from-[#FFF7F9] via-white to-[#FFE4EA] shadow-[0_12px_32px_rgba(232,66,77,0.08)] p-6 sm:p-7 backdrop-blur-sm">
<div class="flex items-center justify-center text-xl text-[#E8424D] mb-6"> <div class="absolute -right-10 -top-16 h-40 w-40 rounded-full bg-[#FFE3EA] blur-3xl opacity-70"></div>
<img src="/爱心点缀1.png" alt="" class="h-5"> <div class="absolute -left-14 -bottom-16 h-40 w-40 rounded-full bg-[#FFD6E2] blur-3xl opacity-60"></div>
<span class="px-2">领取专属喜礼</span>
<img src="/爱心点缀2.png" alt="" class="h-5">
</div>
<div> <div class="relative z-10">
<!-- 标题 -->
<div v-if="![2, 3].includes(activityInfo.status)"> <div class="flex items-center justify-center text-xl text-[#E8424D] mb-6">
<!-- 手机号输入 --> <img src="/爱心点缀1.png" alt="" class="h-5">
<div class="mb-5 flex items-center gap-3 border border-gray-200 rounded-lg px-4"> <span class="px-2">领取专属喜礼</span>
<input :disabled="formData.verifyCode" v-model="formData.phone" type="tel" placeholder="请输入手机号码" <img src="/爱心点缀2.png" alt="" class="h-5">
maxlength="11" class="outline-none focus:border-[#E8424D] transition-colors flex-1 h-14 w-full" />
<button @click="formData.verifyCode ? clearPhone() : sendVerificationCode()"
:disabled="countdown > 0 || formData.phone.length !== 11"
class="h-11 rounded-lg text-sm! text-[#E8424D]! transition-all disabled:text-[#8a8a8a]!">
{{ countdown > 0 ? `${countdown}秒后重发` : formData.verifyCode ? '清除' : '获取验证码' }}
</button>
</div>
<!-- 验证码输入 -->
<div class="mb-5 flex items-center gap-3 border border-gray-200 rounded-lg px-4">
<input :disabled="formData.verifyCode" v-model="formData.smsCode" type="text" placeholder="请输入验证码"
maxlength="6" class="outline-none focus:border-[#E8424D] transition-colors flex-1 h-14 w-full" />
<button v-if="!formData.verifyCode" @click="verifyCode" :disabled="formData.smsCode.length !== 6"
class="h-8 px-4 bg-[#E8424D]! text-white! rounded-lg text-sm! transition-all hover:opacity-90 active:scale-98 disabled:bg-[#8a8a8a]!">
验证
</button>
</div>
</div> </div>
<div v-if="formData.verifyCode && !formData.qrCode"> <div>
<!-- 结婚证信息 -->
<div class="mb-6"> <div v-if="![2, 3].includes(activityInfo.status)">
<div class="text-base text-gray-800 mb-3 font-medium flex items-center justify-between"> <!-- 手机号输入 -->
<span>结婚证信息:</span> <div class="mb-5 flex items-center gap-3 border border-gray-200 rounded-lg px-4 bg-white/85 shadow-[0_6px_14px_rgba(232,66,77,0.06)]">
<div v-if="formData.marriageNo" class="text-xs" @click="resetMarriageInfo">重新扫描</div> <input :disabled="formData.verifyCode" v-model="formData.phone" type="tel" placeholder="请输入手机号码"
maxlength="11" class="outline-none focus:border-[#E8424D] transition-colors flex-1 h-14 w-full" />
<button @click="formData.verifyCode ? clearPhone() : sendVerificationCode()"
:disabled="countdown > 0 || formData.phone.length !== 11"
class="h-11 rounded-lg text-sm! text-[#E8424D]! transition-all disabled:text-[#8a8a8a]!">
{{ countdown > 0 ? `${countdown}秒后重发` : formData.verifyCode ? '清除' : '获取验证码' }}
</button>
</div> </div>
<!-- 验证码输入 -->
<div class="mb-5 flex items-center gap-3 border border-gray-200 rounded-lg px-4 bg-white/85 shadow-[0_6px_14px_rgba(232,66,77,0.06)]">
<input :disabled="formData.verifyCode" v-model="formData.smsCode" type="text" placeholder="请输入验证码"
maxlength="6" class="outline-none focus:border-[#E8424D] transition-colors flex-1 h-14 w-full" />
<button v-if="!formData.verifyCode" @click="verifyCode" :disabled="formData.smsCode.length !== 6"
class="h-8 px-4 bg-[#E8424D]! text-white! rounded-lg text-sm! transition-all hover:opacity-90 active:scale-98 disabled:bg-[#8a8a8a]!">
验证
</button>
</div>
</div>
<div v-if="formData.verifyCode && !formData.qrCode">
<!-- 结婚证信息 -->
<div class="mb-6">
<div class="text-base text-gray-800 mb-3 font-medium flex items-center justify-between">
<span>结婚证信息:</span>
<div v-if="formData.marriageNo" class="text-xs" @click="resetMarriageInfo">重新扫描</div>
</div>
<div v-if="!formData.marriageNo" <div v-if="!formData.marriageNo"
class="border border-dashed border-gray-200 rounded-lg p-5 flex items-center justify-center"> class="border border-dashed border-gray-200 rounded-lg p-5 flex items-center justify-center bg-white/80">
<div class="relative inline-block" @click="handleScanClick"> <div class="relative inline-block" @click="handleScanClick">
<img src="/扫描.png" alt="" class="h-20"> <img src="/扫描.png" alt="" class="h-20">
</div>
</div> </div>
</div> <div v-if="formData.marriageNo"
<div v-if="formData.marriageNo" class="w-full flex flex-col items-start border border-gray-200 rounded-lg p-5 bg-white/85 shadow-[0_6px_14px_rgba(232,66,77,0.06)]">
class="w-full flex flex-col items-start border border-gray-200 rounded-lg p-5 bg-[#FAFAFA]"> <div>
<div> <span class="inline-block w-25 text-right">结婚证字号：</span>
<span class="inline-block w-25 text-right">结婚证字号：</span> <span class="pl-2">{{ formData.marriageNo }}</span>
<span class="pl-2">{{ formData.marriageNo }}</span> </div>
</div> <div class="mt-2">
<div class="mt-2"> <span class="inline-block w-25 text-right">男方姓名：</span>
<span class="inline-block w-25 text-right">男方姓名：</span> <span class="pl-2">{{ formData.husbandName }}</span>
<span class="pl-2">{{ formData.husbandName }}</span> </div>
</div> <div class="mt-2">
<div class="mt-2"> <span class="inline-block w-25 text-right">女方姓名：</span>
<span class="inline-block w-25 text-right">女方姓名：</span> <span class="pl-2">{{ formData.wifeName }}</span>
<span class="pl-2">{{ formData.wifeName }}</span> </div>
</div> </div>
</div> </div>
<!-- 提交按钮 -->
<button @click="submitForm" :disabled="!formData.marriageNo"
class="w-full h-14 bg-gradient-to-r from-[#E8424D]! to-[#FF7A7A]! text-white! rounded-full text-lg font-bold transition-all hover:opacity-90 active:scale-98 disabled:from-[#8a8a8a]! disabled:to-[#8a8a8a]!">
<div class="text-lg">提交领取喜礼</div>
</button>
</div> </div>
<!-- 提交按钮 --> <div v-if="formData.qrCode">
<button @click="submitForm" :disabled="!formData.marriageNo" <div>
class="w-full h-14 bg-gradient-to-r from-[#E8424D]! to-[#FF7A7A]! text-white! rounded-full text-lg font-bold transition-all hover:opacity-90 active:scale-98 disabled:from-[#8a8a8a]! disabled:to-[#8a8a8a]!"> <h3 class="text-base text-gray-800 mb-1 font-bold">您已成功领取喜礼</h3>
<div class="text-lg">提交领取喜礼</div> <span class="text-sm text-gray-600">下面是您的专属核销二维码，请在领取站点出示给工作人员扫码核销。</span>
</button>
</div>
<div v-if="formData.qrCode">
<div>
<h3 class="text-base text-gray-800 mb-1 font-bold">您已成功领取喜礼</h3>
<span class="text-sm text-gray-600">下面是您的专属核销二维码，请在领取站点出示给工作人员扫码核销。</span>
</div>
<div class="mt-4 flex justify-center items-center relative">
<div v-if="formData.status == 1"
class="h-[210px] w-[210px] bg-white/90 rounded-md flex justify-center items-center absolute">
<span class="text-[#E8424D] text-lg font-bold">二维码已核销</span>
</div> </div>
<qrcode-vue :value="formData.qrCode" :size="200" level="H" render-as="canvas" /> <div class="mt-4 flex justify-center items-center relative">
<div v-if="formData.status == 1"
class="h-[210px] w-[210px] bg-white/90 rounded-md flex justify-center items-center absolute">
<span class="text-[#E8424D] text-lg font-bold">二维码已核销</span>
</div>
<qrcode-vue :value="formData.qrCode" :size="200" level="H" render-as="canvas" />
</div>
</div>
</div>
<div v-if="activityInfo.status === 2">
<!-- 活动结束状态 -->
<div class="mt-6 p-4 border border-[#E8424D] bg-[#FFF5F5] rounded-lg text-center">
<div class="text-[#E8424D] text-lg font-semibold mb-2">活动已结束</div>
<div class="text-gray-600 text-sm">【{{ activityInfo.activityName }}】活动已结束，感谢您的参与，敬请期待下一次活动</div>
<div class="mt-4 text-xs text-gray-500">活动时间：{{ activityInfo.activityStartTime }} - {{
activityInfo.activityEndTime }}</div>
</div>
</div>
<div v-else-if="activityInfo.status === 3">
<!-- 活动失败状态 -->
<div class="mt-6 p-4 border border-[#FF7A7A] bg-[#FFF5F5] rounded-lg text-center">
<div class="text-[#FF7A7A] text-lg font-semibold mb-2">活动获取失败</div>
<div class="text-gray-600 text-sm">活动获取失败，请稍后重试</div>
<div class="mt-4 text-xs text-gray-500">活动时间：--</div>
</div> </div>
</div> </div>
</div> </div>
<div v-if="activityInfo.status === 2">
<!-- 活动结束状态 -->
<div class="mt-6 p-4 border border-[#E8424D] bg-[#FFF5F5] rounded-lg text-center">
<div class="text-[#E8424D] text-lg font-semibold mb-2">活动已结束</div>
<div class="text-gray-600 text-sm">【{{ activityInfo.activityName }}】活动已结束，感谢您的参与，敬请期待下一次活动</div>
<div class="mt-4 text-xs text-gray-500">活动时间：{{ activityInfo.activityStartTime }} - {{
activityInfo.activityEndTime }}</div>
</div>
</div>
<div v-else-if="activityInfo.status === 3">
<!-- 活动失败状态 -->
<div class="mt-6 p-4 border border-[#FF7A7A] bg-[#FFF5F5] rounded-lg text-center">
<div class="text-[#FF7A7A] text-lg font-semibold mb-2">活动获取失败</div>
<div class="text-gray-600 text-sm">活动获取失败，请稍后重试</div>
<div class="mt-4 text-xs text-gray-500">活动时间：--</div>
</div>
</div>
</div> </div>
</div> </div>
<!-- 使用说明 --> <!-- 使用说明 -->
<div class="p-4" v-if="![2, 3].includes(activityInfo.status)"> <div class="p-4" v-if="![2, 3].includes(activityInfo.status)">
<div class="w-full relative"> <div
<div class="h-full"> class="relative overflow-hidden rounded-2xl border border-[#FFD7DF] bg-gradient-to-br from-[#FFF7F9] via-white to-[#FFE4EA] shadow-[0_12px_32px_rgba(232,66,77,0.08)]">
<h3 class="h-9 text-lg text-[#E8424D] font-bold flex items-center justify-center pt-4" <div class="absolute -right-10 -top-16 h-40 w-40 rounded-full bg-[#FFE3EA] blur-3xl opacity-70"></div>
style="background: url('/并集.png') no-repeat center center / cover; background-size: 100% 100%;"> <div class="absolute -left-14 -bottom-16 h-40 w-40 rounded-full bg-[#FFD6E2] blur-3xl opacity-60"></div>
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <div class="relative px-5 pt-6 pb-3">
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path> <div
</svg> class="inline-flex items-center gap-2 px-4 h-11 rounded-full bg-white/90 border border-[#F7B9C2] text-[#E8424D] font-semibold shadow-[0_10px_22px_rgba(232,66,77,0.12)]">
使用说明 <span
</h3> class="inline-flex h-7 w-7 items-center justify-center rounded-full bg-gradient-to-br from-[#E8424D] via-[#F55F6E] to-[#FF9AAE] text-white shadow-md">
<div class="p-4 h-full bg-gradient-to-br from-[#FFFFFF] to-[#FFF2F2] rounded-xl"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
class="h-full p-4 text-sm text-gray-600 leading-relaxed bg-gradient-to-br from-[#FFDEEB] to-[#FCC2D7] rounded-xl"> d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
<ol class="list-decimal list-inside pl-2 text-sm text-[#AB8291]"> </svg>
<li>参与活动人员：{{ activityInfo.activityStartTime }}至{{ </span>
activityInfo.activityEndTime }}，在宁夏全区民政婚姻登记机构（含涉外机构）办理结婚登记的新人；</li> <span class="text-base tracking-wide">使用说明</span>
<li>凭结婚证可至全区指定福利彩票销售点兑换即开型福利彩票，赠票总额{{ activityInfo.totalMoney > 10000 ? (activityInfo.totalMoney / </div>
10000).toFixed(2) + '万' : activityInfo.totalMoney }}元，赠完即止；</li> </div>
<li>每对新人限使用一次线上二维码兑换券；</li>
<li>本活动最终解释权归宁夏福利彩票发行中心所有。</li> <div class="relative px-5 pb-5">
</ol> <div class="bg-white/90 backdrop-blur-sm rounded-xl p-4 shadow-[0_10px_24px_rgba(232,66,77,0.08)]">
<div class="space-y-4">
<div class="flex items-start gap-3">
<div class="h-9 w-9 shrink-0 rounded-full bg-gradient-to-br from-[#E8424D] to-[#FF7A7A] text-white flex items-center justify-center font-bold shadow-md">
1
</div>
<div class="text-sm text-[#7A5967] leading-6">
{{ activityInfo.activityStartTime }} 至 {{ activityInfo.activityEndTime }}，在宁夏全区民政婚姻登记机构（含涉外机构）办理结婚登记的新人可参与活动。
</div>
</div>
<div class="flex items-start gap-3">
<div class="h-9 w-9 shrink-0 rounded-full bg-gradient-to-br from-[#E8424D] to-[#FF7A7A] text-white flex items-center justify-center font-bold shadow-md">
2
</div>
<div class="text-sm text-[#7A5967] leading-6">
凭结婚证到全区指定福利彩票销售点兑换即开型福利彩票，赠票总额 {{ activityInfo.totalMoney > 10000 ? (activityInfo.totalMoney / 10000).toFixed(2) + '万' : activityInfo.totalMoney }} 元，赠完即止。
</div>
</div>
<div class="flex items-start gap-3">
<div class="h-9 w-9 shrink-0 rounded-full bg-gradient-to-br from-[#E8424D] to-[#FF7A7A] text-white flex items-center justify-center font-bold shadow-md">
3
</div>
<div class="text-sm text-[#7A5967] leading-6">
每对新人限使用一次线上二维码兑换券，请妥善保管二维码，核销后即失效。
</div>
</div>
<div class="flex items-start gap-3">
<div class="h-9 w-9 shrink-0 rounded-full bg-gradient-to-br from-[#E8424D] to-[#FF7A7A] text-white flex items-center justify-center font-bold shadow-md">
4
</div>
<div class="text-sm text-[#7A5967] leading-6">
本活动最终解释权归宁夏福利彩票发行中心所有，如有疑问请咨询现场工作人员。
</div>
</div>
</div> </div>
</div> </div>
</div> </div>