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

修改

Browse Source
master
lion 4 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-item" @click="toAddress">
<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>
</view>
<view class="menu-item" @click="torecord">
@ -41,12 +41,18 @@
</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-header">
<text class="address-title">收货地址</text>
<u-icon name="close" @click="showAddress = false" size="40rpx" color="#999"></u-icon>
<text class="address-title">奖品快递地址</text>
<u-icon
v-if="!forcePrizeAddress"
name="close"
@click="showAddress = false"
size="40rpx"
color="#999"
></u-icon>
</view>
<view class="address-form">
<view class="form-item">
@ -81,10 +87,10 @@
></u-input>
</view>
<view class="form-item">
<text class="form-label">地址</text>
<text class="form-label">奖品快递地址</text>
<textarea
v-model="addressForm.address"
placeholder="请输入详细地址"
placeholder="请输入详细的奖品快递地址"
class="address-textarea"
maxlength="200"
></textarea>
@ -202,7 +208,7 @@
<!-- 已中奖 -->
<template v-if="hasWon">
<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">
<u-button
size="mini"
@ -247,6 +253,11 @@
</template>
</view>
</view>
<!-- 底部悬浮继续答题按钮 -->
<view class="float-answer-btn" @click="continueAnswer">
继续答题
</view>
</view>
</template>
@ -269,6 +280,8 @@
joinContent: "",
rulesContent: "",
showAddress: false,
fromPrize: false, // 是否从抽奖页跳转
forcePrizeAddress: false, // 是否为从抽奖页跳转过来的奖品地址，必须填写后才能关闭
addressForm: {
name: "",
mobile: "",
@ -300,8 +313,9 @@
})
},
async toAddress() {
// 显示收货地址表单弹窗
// 普通入口，允许关闭
this.forcePrizeAddress = false;
// 显示奖品快递地址表单弹窗
this.showAddress = true;
// 从用户信息中预填充表单
this.addressForm = {
@ -347,7 +361,8 @@
this.userInfo = res;
toast('保存成功');
this.showAddress = false;
// 清空表单
this.forcePrizeAddress = false;
// 重新获取用户信息
this.getUserInfo()
}).catch((error) => {
console.error('保存失败:', error);
@ -367,7 +382,7 @@
url: '/pages/answer/index'
})
},
async getUserInfo() {
async getUserInfo(option) {
const res = await this.$u.api.user()
this.$u.vuex('vuex_user', res);
this.userInfo = res;
@ -375,6 +390,26 @@
uni.redirectTo({
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() {
@ -404,9 +439,9 @@
if (item.key === "rules") {
this.rulesContent = item.value;
}
if (item.key == 'open_win') {
this.open_win = item.value == 1 ? true : false
}
if (item.key == 'open_win') {
this.open_win = item.value == 1 ? true : false
}
});
}
} catch (error) {
@ -433,10 +468,10 @@
},
},
onLoad() {
onLoad(option) {
this.getConfig()
// 先获取用户信息
this.getUserInfo();
this.getUserInfo(option);
// 获取奖品信息
this.getPrize();
},
@ -783,7 +818,7 @@
::v-deep .rule-text {
color: #496690;
flex: 1;
flex: 1;
}
}
}
@ -824,7 +859,7 @@
background: #f5f5f5;
border-radius: 10rpx;
padding: 20rpx 30rpx;
font-size: 28rpx;
font-size: 28rpx;
color: #333;
box-sizing: border-box;
}
@ -870,6 +905,9 @@
font-weight: bold;
text-align: center;
white-space: nowrap;
.prize-text {
color: #fd9d0c;
}
}
.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>
<!-- 非 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 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-header">
<view class="win-title">
@ -45,53 +44,16 @@
<text class="prize-text">科普图书</text>
<text>一本！</text>
</view>
<text class="address-tip">请填写收货地址</text>
</view>
<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">
<u-button
type="primary"
@click="submitWinAddress"
:custom-style="submitBtnStyle"
:loading="submitting"
>提交</u-button>
>填写奖品快递地址</u-button>
</view>
</view>
</view>
@ -233,56 +195,11 @@
}
}
},
isOnlyChinese(str) {
const chineseRegex = /^[\u4e00-\u9fa5]+$/;
return chineseRegex.test(str);
},
submitWinAddress() {
// 表单验证
if (!this.winAddressForm.name || !this.winAddressForm.name.trim()) {
toast('请输入姓名');
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('提交失败，请重试');
});
// 不再在本页提交表单，跳转到“我的”页面，由“我的”页面弹出奖品快递地址弹窗
uni.redirectTo({
url: '/pages/me/me?fromPrize=1'
})
},
continueAnswer() {
this.showNoWin = false
@ -438,7 +355,7 @@
display: flex;
flex-direction: column;
align-items: center;
padding: 200rpx 30rpx 30rpx; // 增加顶部padding，避免文字被图片遮挡
padding: 80rpx 30rpx 30rpx; // 增加顶部padding，避免文字被图片遮挡
.win-title {
font-size: 32rpx;
@ -461,7 +378,7 @@
.win-form-content {
background: #f3f8ff;
padding: 0 40rpx 40rpx;
padding-bottom: 100rpx;
.form-item {
margin-bottom: 30rpx;

Write Preview
Loading…
Cancel
Save