281 lines
8.4 KiB
Vue
281 lines
8.4 KiB
Vue
<template>
|
||
<!-- <uni-nav-bar
|
||
left-icon="left"
|
||
title="兑换福利卡"
|
||
@clickLeft="goBack"
|
||
fixed
|
||
color="#8B2316"
|
||
height="180rpx"
|
||
:border="false"
|
||
backgroundColor="#eeeeee"
|
||
></uni-nav-bar> -->
|
||
<navBar :title="'兑换福利卡'" />
|
||
|
||
<view class="exchange-page">
|
||
<!-- 顶部红色横幅 -->
|
||
<view class="top-banner" @click="goWelfare">
|
||
<image :src="bgImg" mode="widthFix" class="bg-img"></image>
|
||
<view class="banner-text">
|
||
<view class="line1">已兑换{{ exchangedCount }}张</view>
|
||
<view class="line2" @click.stop="goWelfare">查看现有权益</view>
|
||
</view>
|
||
<view class="help-btn" @click.stop="showHelp">帮助说明</view>
|
||
</view>
|
||
|
||
<!-- 使用统一的自定义居中模态框 -->
|
||
<view v-if="centerVisible" class="center-modal" @click.self="closeCenter">
|
||
<view class="center-modal-content">
|
||
<view class="center-title">{{ centerHelp ? '帮助说明' : '提示' }}</view>
|
||
<view v-if="centerHelp" class="help-content center-help">
|
||
<text>1、点击“兑换福利卡”，输入密码即可兑换相应权益</text>
|
||
<text>2、每张福利卡仅限兑换一次，兑换后权益可在“我的福利-使用福利”中查看</text>
|
||
<text>3、福利卡长期有效，福利卡不能退换或者折现</text>
|
||
<text>4、查找文献权益不限文献类型，如指南共识、论文、电子书、课件或者视频</text>
|
||
</view>
|
||
<view v-else class="center-body">{{ centerText }}</view>
|
||
<view class="center-actions">
|
||
<button class="center-btn" @click="closeCenter">知道了</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 输入提示 -->
|
||
|
||
<view class="tips">请输入16位福利卡密码（不区分大小写）<text class="paste-action" @click="fillByText" v-if="hasPaste">粘贴</text> </view>
|
||
|
||
<!-- 四段输入框 -->
|
||
<view class="code-inputs">
|
||
<input :adjust-position="false" class="code-box" type="text" v-model="code1" maxlength="4" placeholder="" :focus="f1" @input="handleInput(1, $event)" @paste="handlePaste"/>
|
||
<input :adjust-position="false" class="code-box" type="text" v-model="code2" maxlength="4" placeholder="" :focus="f2" @input="handleInput(2, $event)" />
|
||
<input :adjust-position="false" class="code-box" type="text" v-model="code3" maxlength="4" placeholder="" :focus="f3" @input="handleInput(3, $event)"/>
|
||
<input :adjust-position="false" class="code-box" type="text" v-model="code4" maxlength="4" placeholder="" :focus="f4" @input="handleInput(4, $event)"/>
|
||
</view>
|
||
|
||
<!-- 按钮 -->
|
||
<view class="btn-wrapper">
|
||
<button class="submit-btn" @click="submit">立即兑换</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, nextTick } from 'vue'
|
||
import api from '@/api/api';
|
||
import navBar from '@/components/navBar/navBar.vue'
|
||
import bgImg from '@/static/fulicard_bg.png'
|
||
const exchangedCount = ref(0)
|
||
const hasPaste = ref(false)
|
||
const pasteText = ref('')
|
||
const code1 = ref('')
|
||
const code2 = ref('')
|
||
const code3 = ref('')
|
||
const code4 = ref('')
|
||
const f1 = ref(true)
|
||
const f2 = ref(false)
|
||
const f3 = ref(false)
|
||
const f4 = ref(false);
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
const helpVisible = ref(false)
|
||
const centerVisible = ref(false)
|
||
const centerText = ref('')
|
||
const centerHelp = ref(false);
|
||
const isabled = ref(true);
|
||
const isFull = computed(() => (code1.value+code2.value+code3.value+code4.value).length === 16)
|
||
onLoad((opts) => {
|
||
exchangedCount.value = opts.num
|
||
pasteFromClipboard()
|
||
})
|
||
const goWelfare = () => {
|
||
uni.setStorageSync('lookWelfare', 'useWelfare');
|
||
uni.redirectTo({
|
||
url:
|
||
'/pages_app/myWelfare/myWelfare?from=useWelfare'
|
||
})
|
||
}
|
||
const showHelp = () => {
|
||
centerHelp.value = true
|
||
centerVisible.value = true
|
||
}
|
||
|
||
// 通用模态框
|
||
const openCenter = (text) => {
|
||
centerText.value = text
|
||
centerHelp.value = false
|
||
centerVisible.value = true
|
||
}
|
||
const closeCenter = () => {
|
||
centerVisible.value = false
|
||
centerHelp.value = false
|
||
}
|
||
const setFocus = (idx) => {
|
||
f1.value = idx === 1
|
||
f2.value = idx === 2
|
||
f3.value = idx === 3
|
||
f4.value = idx === 4
|
||
}
|
||
const handleInput = (idx, e) => {
|
||
const raw = (e.detail && e.detail.value) || ''
|
||
const sanitized = raw.replace(/[^a-zA-Z0-9]/g, '')
|
||
if (idx === 1) code1.value = sanitized
|
||
if (idx === 2) code2.value = sanitized
|
||
if (idx === 3) code3.value = sanitized
|
||
if (idx === 4) code4.value = sanitized
|
||
if (sanitized.length === 4 && idx < 4) {
|
||
nextTick(() => setFocus(idx + 1))
|
||
}
|
||
if(code1.value.length+code2.value.length+code3.value.length+code4.value.length==16){
|
||
isFull.value = true
|
||
console.log(1111)
|
||
}else{
|
||
isFull.value = false
|
||
console.log(2222)
|
||
}
|
||
}
|
||
const submit = () => {
|
||
if(code1.value.length+code2.value.length+code3.value.length+code4.value.length!=16){
|
||
uni.showToast({ title: '请输入16位福利卡密码', icon: 'none' })
|
||
return
|
||
}
|
||
const code = (code1.value+code2.value+code3.value+code4.value).toUpperCase()
|
||
uni.showToast({ title: '兑换中: '+ code, icon: 'none' })
|
||
api.exchangeWelfareCard({password: code}).then(res => {
|
||
console.log(res)
|
||
if (res.code == 200) {
|
||
uni.showToast({ title: '兑换成功', icon: 'none' })
|
||
uni.navigateBack()
|
||
}
|
||
})
|
||
}
|
||
|
||
const goMyWelfare = () => {
|
||
uni.navigateTo({ url: '/pages_app/myWelfare/myWelfare' })
|
||
}
|
||
|
||
// 处理粘贴（H5等支持paste事件的平台）
|
||
const handlePaste = (e) => {
|
||
const text = (e.clipboardData && e.clipboardData.getData('text')) || ''
|
||
fillByText(text)
|
||
|
||
// 阻止默认粘贴到单个输入框
|
||
e && e.preventDefault && e.preventDefault()
|
||
}
|
||
|
||
// 从剪贴板读取（App、小程序）
|
||
const pasteFromClipboard = () => {
|
||
uni.getClipboardData({
|
||
success: (res) => {
|
||
if(res.data.length>0){
|
||
hasPaste.value = true
|
||
pasteText.value = res.data
|
||
}
|
||
|
||
}
|
||
})
|
||
}
|
||
|
||
const fillByText = (raw) => {
|
||
const v = pasteText.value.replace(/[^a-zA-Z0-9]/g, '').toUpperCase().slice(0, 16);
|
||
console.log(v)
|
||
code1.value = v.slice(0, 4)
|
||
code2.value = v.slice(4, 8)
|
||
code3.value = v.slice(8, 12)
|
||
code4.value = v.slice(12, 16)
|
||
nextTick(() => setFocus(v.length >= 16 ? 4 : Math.floor((v.length)/4) + 1))
|
||
if(code1.value.length+code2.value.length+code3.value.length+code4.value.length==16){
|
||
isFull.value = true
|
||
console.log(1111)
|
||
}else{
|
||
isFull.value = false
|
||
console.log(2222)
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
$nav-height: 140rpx;
|
||
.exchange-page{
|
||
min-height: 100vh;
|
||
background: #f5f6f7;
|
||
}
|
||
.top-banner{
|
||
position: relative;
|
||
height: 286rpx;
|
||
margin-top: calc(var(--status-bar-height) + 44px);
|
||
.bg-img{
|
||
position: absolute;
|
||
width: 100%;
|
||
z-index:0;
|
||
height: 286rpx;
|
||
}
|
||
.banner-text{
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
top: 80rpx;
|
||
z-index:1;
|
||
color: #fff;
|
||
.line1{font-size: 44rpx;}
|
||
.line2{font-size: 36rpx;margin-top: 12rpx;}
|
||
}
|
||
.help-btn{
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 20rpx;
|
||
background: rgba(255,255,255,.95);
|
||
color: #e04835;
|
||
border-radius: 999rpx;
|
||
padding: 10rpx 24rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
.tips{
|
||
margin: 48rpx;
|
||
color: #000;
|
||
font-size: 30rpx;
|
||
.paste-action{
|
||
color: #8B2316;
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
.code-inputs{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 48rpx;
|
||
.code-box{
|
||
flex: 1;
|
||
height: 96rpx;
|
||
max-width: 142rpx;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
text-align: center;
|
||
font-size: 36rpx;
|
||
}
|
||
}
|
||
.btn-wrapper{
|
||
padding: 80rpx 48rpx 0;
|
||
.submit-btn{
|
||
width: 100%;
|
||
height: 100rpx;
|
||
background: linear-gradient(90deg,#ff4d2e,#e93b2d);
|
||
border-radius: 60rpx;
|
||
color: #fff;
|
||
font-size: 36rpx;
|
||
}
|
||
.submit-btn[disabled]{
|
||
opacity: .6;
|
||
}
|
||
}
|
||
|
||
/* 帮助弹层样式 */
|
||
.center-help{padding: 0 32rpx;display:flex;flex-direction:column;align-items:center;gap: 16rpx;color:#333;font-size:28rpx;line-height:1.6;}
|
||
|
||
/* 自定义通用模态框 */
|
||
.center-modal{position: fixed;left:0;right:0;top:0;bottom:0;background: rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index: 9999;}
|
||
.center-modal-content{width: 640rpx;background:#fff;border-radius:24rpx;overflow:hidden;}
|
||
.center-title{font-size: 32rpx;color:#333;text-align:center;padding:28rpx 24rpx 12rpx;font-weight:600;}
|
||
.center-body{padding:0 32rpx 12rpx;color:#333;font-size:28rpx;line-height:1.7;text-align:center;}
|
||
.center-actions{padding: 24rpx 24rpx 28rpx;}
|
||
.center-btn{width:100%;height:88rpx;border-radius:999rpx;background:#e93b2d;color:#fff;font-size:30rpx;}
|
||
|
||
</style>
|