wangyifang
/
kpsz-answer-h5
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改

Browse Source
master
lion 6 months ago
parent 80a64072ff
commit 80c7f3e748
2 changed files with 82 additions and 110 deletions
Show Stats Download Patch File Download Diff File

93
pages/me/me.vue
Unescape View File

@ -20,7 +20,7 @@
<view class="menu-list"> <view class="menu-list">
<view class="menu-item" @click="toAddress"> <view class="menu-item" @click="toAddress">
<image class="menu-icon" src="@/static/me1.png" mode="aspectFit"></image> <image class="menu-icon" src="@/static/me1.png" mode="aspectFit"></image>
<text class="menu-text">收货地址</text> <text class="menu-text">奖品快递地址</text>
<u-icon name="arrow-right" color="#333" size="38rpx"></u-icon> <u-icon name="arrow-right" color="#333" size="38rpx"></u-icon>
</view> </view>
<view class="menu-item" @click="torecord"> <view class="menu-item" @click="torecord">
@ -41,12 +41,18 @@
</view> </view>
</view> </view>
<!-- 收货地址弹窗 --> <!-- 奖品快递地址弹窗 -->
<u-popup v-model="showAddress" mode="bottom" border-radius="20"> <u-popup v-model="showAddress" :mask-close-able="!forcePrizeAddress" mode="bottom" border-radius="20">
<view class="address-popup"> <view class="address-popup">
<view class="address-header"> <view class="address-header">
<text class="address-title">收货地址</text> <text class="address-title">奖品快递地址</text>
<u-icon name="close" @click="showAddress = false" size="40rpx" color="#999"></u-icon> <u-icon
v-if="!forcePrizeAddress"
name="close"
@click="showAddress = false"
size="40rpx"
color="#999"
></u-icon>
</view> </view>
<view class="address-form"> <view class="address-form">
<view class="form-item"> <view class="form-item">
@ -81,10 +87,10 @@
></u-input> ></u-input>
</view> </view>
<view class="form-item"> <view class="form-item">
<text class="form-label">地址</text> <text class="form-label">奖品快递地址</text>
<textarea <textarea
v-model="addressForm.address" v-model="addressForm.address"
placeholder="请输入详细地址" placeholder="请输入详细的奖品快递地址"
class="address-textarea" class="address-textarea"
maxlength="200" maxlength="200"
></textarea> ></textarea>
@ -202,7 +208,7 @@
<!-- 已中奖 --> <!-- 已中奖 -->
<template v-if="hasWon"> <template v-if="hasWon">
<image src="@/static/answer_right.png" class="win-record-image" mode="aspectFit"></image> <image src="@/static/answer_right.png" class="win-record-image" mode="aspectFit"></image>
<view class="win-record-text">恭喜您已中奖！</view> <view class="win-record-text">恭喜您已抽中 <text class="prize-text">科普图书</text> 一本！</view>
<view class="win-record-buttons"> <view class="win-record-buttons">
<u-button <u-button
size="mini" size="mini"
@ -247,6 +253,11 @@
</template> </template>
</view> </view>
</view> </view>
<!-- 底部悬浮继续答题按钮 -->
<view class="float-answer-btn" @click="continueAnswer">
继续答题
</view>
</view> </view>
</template> </template>
@ -269,6 +280,8 @@
joinContent: "", joinContent: "",
rulesContent: "", rulesContent: "",
showAddress: false, showAddress: false,
fromPrize: false, // 是否从抽奖页跳转
forcePrizeAddress: false, // 是否为从抽奖页跳转过来的奖品地址，必须填写后才能关闭
addressForm: { addressForm: {
name: "", name: "",
mobile: "", mobile: "",
@ -300,8 +313,9 @@
}) })
}, },
async toAddress() { async toAddress() {
// 普通入口，允许关闭
// 显示收货地址表单弹窗 this.forcePrizeAddress = false;
// 显示奖品快递地址表单弹窗
this.showAddress = true; this.showAddress = true;
// 从用户信息中预填充表单 // 从用户信息中预填充表单
this.addressForm = { this.addressForm = {
@ -347,7 +361,8 @@
this.userInfo = res; this.userInfo = res;
toast('保存成功'); toast('保存成功');
this.showAddress = false; this.showAddress = false;
// 清空表单 this.forcePrizeAddress = false;
// 重新获取用户信息
this.getUserInfo() this.getUserInfo()
}).catch((error) => { }).catch((error) => {
console.error('保存失败:', error); console.error('保存失败:', error);
@ -367,7 +382,7 @@
url: '/pages/answer/index' url: '/pages/answer/index'
}) })
}, },
async getUserInfo() { async getUserInfo(option) {
const res = await this.$u.api.user() const res = await this.$u.api.user()
this.$u.vuex('vuex_user', res); this.$u.vuex('vuex_user', res);
this.userInfo = res; this.userInfo = res;
@ -375,6 +390,26 @@
uni.redirectTo({ uni.redirectTo({
url: '/pages/login/index' url: '/pages/login/index'
}) })
return
}
// 如果是从抽奖页跳转过来，且当前用户还没有填写奖品快递地址，则在获取到用户信息后再预填地址并弹窗
if (option && option.fromPrize === '1') {
const hasAddress =
res.address &&
typeof res.address === 'string' &&
res.address.trim().length > 0
if (!hasAddress) {
this.fromPrize = true
this.forcePrizeAddress = true;
this.showAddress = true;
this.addressForm = {
name: this.userInfo.name || "",
mobile: this.userInfo.mobile || "",
address: this.userInfo.address || ""
};
}
} }
}, },
async getConfig() { async getConfig() {
@ -404,9 +439,9 @@
if (item.key === "rules") { if (item.key === "rules") {
this.rulesContent = item.value; this.rulesContent = item.value;
} }
if (item.key == 'open_win') { if (item.key == 'open_win') {
this.open_win = item.value == 1 ? true : false this.open_win = item.value == 1 ? true : false
} }
}); });
} }
} catch (error) { } catch (error) {
@ -433,10 +468,10 @@
}, },
}, },
onLoad() { onLoad(option) {
this.getConfig() this.getConfig()
// 先获取用户信息 // 先获取用户信息
this.getUserInfo(); this.getUserInfo(option);
// 获取奖品信息 // 获取奖品信息
this.getPrize(); this.getPrize();
}, },
@ -783,7 +818,7 @@
::v-deep .rule-text { ::v-deep .rule-text {
color: #496690; color: #496690;
flex: 1; flex: 1;
} }
} }
} }
@ -824,7 +859,7 @@
background: #f5f5f5; background: #f5f5f5;
border-radius: 10rpx; border-radius: 10rpx;
padding: 20rpx 30rpx; padding: 20rpx 30rpx;
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
box-sizing: border-box; box-sizing: border-box;
} }
@ -870,6 +905,9 @@
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
.prize-text {
color: #fd9d0c;
}
} }
.win-record-buttons { .win-record-buttons {
@ -892,6 +930,23 @@
} }
} }
} }
/* 底部悬浮继续答题按钮 */
.float-answer-btn {
position: fixed;
left: 50%;
bottom: 40rpx;
transform: translateX(-50%);
z-index: 1000;
min-width: 300rpx;
padding: 20rpx 60rpx;
text-align: center;
font-size: 32rpx;
color: #fff;
background: linear-gradient(to right, #57b0fe, #446efd);
border-radius: 999rpx;
box-shadow: 0 8rpx 20rpx rgba(68, 110, 253, 0.5);
}
</style> </style>
<!-- 非 scoped 样式，用于 v-html 渲染的内容 --> <!-- 非 scoped 样式，用于 v-html 渲染的内容 -->

99
pages/prize/index.vue
Unescape View File

@ -37,7 +37,6 @@
<!-- 中奖表单弹窗 --> <!-- 中奖表单弹窗 -->
<view v-show="showWinForm" class="win-form-popup-mask" @click.stop> <view v-show="showWinForm" class="win-form-popup-mask" @click.stop>
<view class="win-form-wrapper" @click.stop> <view class="win-form-wrapper" @click.stop>
<image src="@/static/prize_book.png" class="prize-book-image" mode="aspectFit"></image>
<view class="win-form-popup"> <view class="win-form-popup">
<view class="win-form-header"> <view class="win-form-header">
<view class="win-title"> <view class="win-title">
@ -45,53 +44,16 @@
<text class="prize-text">科普图书</text> <text class="prize-text">科普图书</text>
<text>一本！</text> <text>一本！</text>
</view> </view>
<text class="address-tip">请填写收货地址</text>
</view> </view>
<view class="win-form-content"> <view class="win-form-content">
<view class="form-item">
<u-input
v-model="winAddressForm.name"
placeholder="请输入姓名"
:border="false"
:custom-style="{
background: '#fff',
padding: '20rpx 30rpx',
'border-radius': '60rpx',
'font-size': '28rpx'
}"
:placeholder-style="'color:#999;font-size:28rpx'"
></u-input>
</view>
<view class="form-item">
<u-input
v-model="winAddressForm.mobile"
placeholder="请输入手机号"
type="number"
:border="false"
:custom-style="{
background: '#fff',
padding: '20rpx 30rpx',
'border-radius': '60rpx',
'font-size': '28rpx'
}"
:placeholder-style="'color:#999;font-size:28rpx'"
></u-input>
</view>
<view class="form-item">
<textarea
v-model="winAddressForm.address"
placeholder="请输入详细地址"
class="address-textarea"
maxlength="200"
></textarea>
</view>
<view class="form-submit"> <view class="form-submit">
<u-button <u-button
type="primary" type="primary"
@click="submitWinAddress" @click="submitWinAddress"
:custom-style="submitBtnStyle" :custom-style="submitBtnStyle"
:loading="submitting" :loading="submitting"
>提交</u-button> >填写奖品快递地址</u-button>
</view> </view>
</view> </view>
</view> </view>
@ -233,56 +195,11 @@
} }
} }
}, },
isOnlyChinese(str) {
const chineseRegex = /^[\u4e00-\u9fa5]+$/;
return chineseRegex.test(str);
},
submitWinAddress() { submitWinAddress() {
// 表单验证 // 不再在本页提交表单，跳转到“我的”页面，由“我的”页面弹出奖品快递地址弹窗
if (!this.winAddressForm.name || !this.winAddressForm.name.trim()) { uni.redirectTo({
toast('请输入姓名'); url: '/pages/me/me?fromPrize=1'
return; })
}
if (!this.isOnlyChinese(this.winAddressForm.name.trim())) {
toast('请输入中文姓名');
return;
}
if (!this.winAddressForm.mobile || !this.winAddressForm.mobile.trim()) {
toast('请输入手机号');
return;
}
if (!uni.$u.test.mobile(this.winAddressForm.mobile.trim())) {
toast('请输入正确的手机号');
return;
}
if (!this.winAddressForm.address || !this.winAddressForm.address.trim()) {
toast('请输入详细地址');
return;
}
this.submitting = true
// 提交到 saveUser 接口
this.$u.api.saveUser({
name: this.winAddressForm.name.trim(),
mobile: this.winAddressForm.mobile.trim(),
address: this.winAddressForm.address.trim()
}).then((res) => {
this.submitting = false
this.$u.vuex('vuex_user', res);
toast('提交成功');
this.showWinForm = false;
// 2秒后跳转到 pages/me/me
setTimeout(() => {
uni.redirectTo({
url: '/pages/me/me'
})
}, 2000)
}).catch((error) => {
this.submitting = false
console.error('提交失败:', error);
toast('提交失败，请重试');
});
}, },
continueAnswer() { continueAnswer() {
this.showNoWin = false this.showNoWin = false
@ -438,7 +355,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 200rpx 30rpx 30rpx; // 增加顶部padding，避免文字被图片遮挡 padding: 80rpx 30rpx 30rpx; // 增加顶部padding，避免文字被图片遮挡
.win-title { .win-title {
font-size: 32rpx; font-size: 32rpx;
@ -461,7 +378,7 @@
.win-form-content { .win-form-content {
background: #f3f8ff; background: #f3f8ff;
padding: 0 40rpx 40rpx; padding: 0 40rpx 40rpx;
padding-bottom: 100rpx;
.form-item { .form-item {
margin-bottom: 30rpx; margin-bottom: 30rpx;

Write Preview
Loading…
Cancel
Save