pray页面制作1.0
This commit is contained in:
minimaxagent1
parent
9e8b3e9b88
commit
68a6431c48
|
|
@ -11,8 +11,66 @@
|
||||||
<view class="censer-container">
|
<view class="censer-container">
|
||||||
<image class="censer-icon" :src="CommonEnum.CENSER" mode="aspectFit" />
|
<image class="censer-icon" :src="CommonEnum.CENSER" mode="aspectFit" />
|
||||||
</view>
|
</view>
|
||||||
<!-- 页面内容将在这里添加 -->
|
|
||||||
|
|
||||||
|
<!-- 祈福信息表单 -->
|
||||||
|
<view class="prayer-form">
|
||||||
|
<view class="form-title">
|
||||||
|
<text class="title-text">祈福信息</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 祈福人姓名 -->
|
||||||
|
<view class="form-item">
|
||||||
|
<text class="label">祈福人姓名</text>
|
||||||
|
<input class="input-field" placeholder="请输入姓名" v-model="formData.name" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 祈福类型 -->
|
||||||
|
<view class="form-item">
|
||||||
|
<text class="label">祈福类型</text>
|
||||||
|
<view class="select-field" @click="showPrayerTypePicker">
|
||||||
|
<text class="select-text">{{ selectedPrayerType }}</text>
|
||||||
|
<text class="arrow">></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 为他人祈福 -->
|
||||||
|
<view class="form-item">
|
||||||
|
<text class="label">为他人祈福</text>
|
||||||
|
<view class="radio-group">
|
||||||
|
<view class="radio-item" @click="formData.forOthers = true">
|
||||||
|
<view class="radio-button" :class="{ 'checked': formData.forOthers }">
|
||||||
|
<text v-if="formData.forOthers" class="checkmark">✓</text>
|
||||||
|
</view>
|
||||||
|
<text class="radio-text">是</text>
|
||||||
|
</view>
|
||||||
|
<view class="radio-item" @click="formData.forOthers = false">
|
||||||
|
<view class="radio-button" :class="{ 'checked': !formData.forOthers }">
|
||||||
|
<text v-if="!formData.forOthers" class="checkmark">✓</text>
|
||||||
|
</view>
|
||||||
|
<text class="radio-text">否</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 心愿内容 -->
|
||||||
|
<view class="form-item">
|
||||||
|
<text class="label">心愿内容</text>
|
||||||
|
<view class="textarea-container">
|
||||||
|
<textarea
|
||||||
|
class="textarea-field"
|
||||||
|
placeholder="请填写心愿内容"
|
||||||
|
v-model="formData.wish"
|
||||||
|
maxlength="50"
|
||||||
|
:show-confirm-bar="false"
|
||||||
|
/>
|
||||||
|
<text class="char-counter">{{ formData.wish.length }}/50</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 敬香按钮 -->
|
||||||
|
<view class="incense-button" @click="submitPrayer">
|
||||||
|
<text class="button-text">敬香</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -29,7 +87,16 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
CommonEnum,
|
CommonEnum,
|
||||||
loading: false
|
loading: false,
|
||||||
|
formData: {
|
||||||
|
name: '',
|
||||||
|
prayerType: '个人祈福', // 默认祈福类型
|
||||||
|
forOthers: false, // 默认不为他人祈福
|
||||||
|
wish: ''
|
||||||
|
},
|
||||||
|
prayerTypes: ['个人祈福', '为他人祈福', '家庭祈福', '事业祈福', '学业祈福', '健康祈福', '财运祈福', '姻缘祈福', '其他祈福'],
|
||||||
|
selectedPrayerType: '个人祈福',
|
||||||
|
showPicker: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
|
|
@ -51,6 +118,93 @@ export default {
|
||||||
console.error('获取页面数据失败:', error)
|
console.error('获取页面数据失败:', error)
|
||||||
this.loading = false
|
this.loading = false
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 提交祈福
|
||||||
|
submitPrayer() {
|
||||||
|
// 表单验证
|
||||||
|
if (!this.formData.name.trim()) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请输入祈福人姓名',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.formData.wish.trim()) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请填写心愿内容',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显示确认信息
|
||||||
|
uni.showModal({
|
||||||
|
title: '确认祈福信息',
|
||||||
|
content: `祈福人：${this.formData.name}\n祈福类型：${this.selectedPrayerType}\n为他人祈福：${this.formData.forOthers ? '是' : '否'}\n心愿内容：${this.formData.wish}`,
|
||||||
|
confirmText: '确认敬香',
|
||||||
|
cancelText: '修改信息',
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
this.performPrayer()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 执行祈福
|
||||||
|
async performPrayer() {
|
||||||
|
uni.showLoading({
|
||||||
|
title: '正在敬香...'
|
||||||
|
})
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 模拟API调用
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 2000))
|
||||||
|
|
||||||
|
uni.hideLoading()
|
||||||
|
uni.showToast({
|
||||||
|
title: '祈福成功！',
|
||||||
|
icon: 'success',
|
||||||
|
duration: 2000
|
||||||
|
})
|
||||||
|
|
||||||
|
// 重置表单
|
||||||
|
this.resetForm()
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
uni.hideLoading()
|
||||||
|
uni.showToast({
|
||||||
|
title: '祈福失败，请重试',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 重置表单
|
||||||
|
resetForm() {
|
||||||
|
this.formData = {
|
||||||
|
name: '',
|
||||||
|
prayerType: '个人祈福',
|
||||||
|
forOthers: false,
|
||||||
|
wish: ''
|
||||||
|
}
|
||||||
|
this.selectedPrayerType = '个人祈福'
|
||||||
|
},
|
||||||
|
|
||||||
|
// 显示祈福类型选择器
|
||||||
|
showPrayerTypePicker() {
|
||||||
|
uni.showActionSheet({
|
||||||
|
itemList: this.prayerTypes,
|
||||||
|
success: (res) => {
|
||||||
|
this.selectedPrayerType = this.prayerTypes[res.index];
|
||||||
|
this.formData.prayerType = this.selectedPrayerType;
|
||||||
|
},
|
||||||
|
fail: (res) => {
|
||||||
|
console.error('用户取消选择');
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -102,7 +256,7 @@ page {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 0 15rpx;
|
padding: 0 15rpx;
|
||||||
padding-top: 120rpx; /* 为固定导航栏留出空间 */
|
padding-top: 120rpx; /* 为固定导航栏留出空间 */
|
||||||
padding-bottom: 40rpx;
|
padding-bottom: 160rpx; /* 为固定敬香按钮留出空间 */
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -120,4 +274,161 @@ page {
|
||||||
height: 648rpx;
|
height: 648rpx;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.prayer-form {
|
||||||
|
width: calc(100% - 40rpx);
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 40rpx 30rpx;
|
||||||
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
|
||||||
|
margin: 0 20rpx 60rpx 20rpx;
|
||||||
|
border: 2rpx solid #E8E8E8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-text {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-field,
|
||||||
|
.select-field {
|
||||||
|
width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
border: 1rpx solid #E0E0E0;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #FAFAFA;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-field {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 60rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-item:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-button {
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
border: 2rpx solid #DDD;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 12rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-button.checked {
|
||||||
|
border-color: #8B2E2E;
|
||||||
|
background-color: #8B2E2E;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkmark {
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textarea-container {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textarea-field {
|
||||||
|
width: 100%;
|
||||||
|
height: 120rpx;
|
||||||
|
border: 1rpx solid #E0E0E0;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #FAFAFA;
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.char-counter {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 15rpx;
|
||||||
|
right: 15rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.incense-button {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 40rpx;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 600rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
background-color: #8B2E2E; /* 深红色背景 */
|
||||||
|
border-radius: 50rpx; /* 圆角设计 */
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: 0 8rpx 20rpx rgba(139, 46, 46, 0.3);
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-text {
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user