祈福成功页面以及随喜弹窗1.0
This commit is contained in:
minimaxagent1
parent
d8a9d75580
commit
2d70a7ca4e
|
|
@ -88,11 +88,16 @@ export default {
|
|||
|
||||
// 次要按钮样式
|
||||
&--secondary {
|
||||
background-color: #6C757D;
|
||||
box-shadow: 0 8rpx 20rpx rgba(108, 117, 125, 0.3);
|
||||
background-color: #F5F0E7;
|
||||
border: 2rpx solid #8B2E2E;
|
||||
box-shadow: 0 4rpx 12rpx rgba(139, 46, 46, 0.1);
|
||||
|
||||
.button-text {
|
||||
color: #8B2E2E;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: #5A6268;
|
||||
background-color: #F0EBE0;
|
||||
transform: translateX(-50%) scale(0.98);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
248
components/donate-modal/donate-modal.vue
Normal file
248
components/donate-modal/donate-modal.vue
Normal file
|
|
@ -0,0 +1,248 @@
|
|||
<template>
|
||||
<view class="donate-modal" v-if="visible" @click="handleClose">
|
||||
<view class="modal-content" @click.stop>
|
||||
<!-- 弹窗标题 -->
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">{{ title }}</text>
|
||||
<image class="modal-icon" :src="CommonEnum.LotusMeditation" mode="aspectFit" />
|
||||
</view>
|
||||
|
||||
<!-- 输入区域 -->
|
||||
<view class="input-section">
|
||||
<input
|
||||
class="amount-input"
|
||||
:placeholder="placeholder"
|
||||
v-model="localAmount"
|
||||
type="number"
|
||||
:disabled="isRandomAmount"
|
||||
/>
|
||||
<view class="random-option" @click="toggleRandomAmount">
|
||||
<view class="radio-button" :class="{ 'checked': isRandomAmount }">
|
||||
<image v-if="isRandomAmount" class="radio-icon" :src="CommonEnum.Refresh" mode="aspectFit" />
|
||||
</view>
|
||||
<text class="option-text">{{ randomText }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 确认按钮 -->
|
||||
<view class="confirm-button" @click="handleConfirm">
|
||||
<text class="button-text">{{ confirmText }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CommonEnum from "../../enum/common";
|
||||
|
||||
export default {
|
||||
name: 'DonateModal',
|
||||
props: {
|
||||
// 是否显示弹窗
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 弹窗标题
|
||||
title: {
|
||||
type: String,
|
||||
default: '随喜'
|
||||
},
|
||||
// 输入框占位符
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请输入金额'
|
||||
},
|
||||
// 随缘选项文字
|
||||
randomText: {
|
||||
type: String,
|
||||
default: '随缘'
|
||||
},
|
||||
// 确认按钮文字
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: '确认行善'
|
||||
},
|
||||
// 默认金额
|
||||
defaultAmount: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
CommonEnum,
|
||||
localAmount: '',
|
||||
isRandomAmount: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible(newVal) {
|
||||
if (newVal) {
|
||||
this.localAmount = this.defaultAmount;
|
||||
this.isRandomAmount = false;
|
||||
}
|
||||
},
|
||||
defaultAmount(newVal) {
|
||||
if (this.visible) {
|
||||
this.localAmount = newVal;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.$emit('close');
|
||||
},
|
||||
|
||||
// 切换随机金额选项
|
||||
toggleRandomAmount() {
|
||||
this.isRandomAmount = !this.isRandomAmount;
|
||||
if (this.isRandomAmount) {
|
||||
this.localAmount = '';
|
||||
}
|
||||
},
|
||||
|
||||
// 确认操作
|
||||
handleConfirm() {
|
||||
if (!this.localAmount && !this.isRandomAmount) {
|
||||
uni.showToast({
|
||||
title: '请输入金额或选择随缘',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 触发确认事件
|
||||
this.$emit('confirm', {
|
||||
amount: this.localAmount,
|
||||
isRandom: this.isRandomAmount
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.donate-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
padding: 40rpx;
|
||||
width: 80%;
|
||||
max-width: 600rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-bottom: 30rpx;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 2rpx solid #F0EBE0;
|
||||
|
||||
.modal-title {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #695347;
|
||||
}
|
||||
|
||||
.modal-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.input-section {
|
||||
width: 100%;
|
||||
margin-bottom: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
|
||||
.amount-input {
|
||||
flex: 1;
|
||||
height: 100rpx;
|
||||
background-color: #F5F0E7;
|
||||
border: 2rpx solid #E0D7C9;
|
||||
border-radius: 10rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 36rpx;
|
||||
color: #695347;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.random-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
cursor: pointer;
|
||||
|
||||
.radio-button {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border: 2rpx solid #E0D7C9;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #F5F0E7;
|
||||
|
||||
&.checked {
|
||||
border-color: #8B2E2E;
|
||||
background-color: #8B2E2E;
|
||||
}
|
||||
|
||||
.radio-icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.option-text {
|
||||
font-size: 32rpx;
|
||||
color: #695347;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-button {
|
||||
width: 100%;
|
||||
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);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
background-color: #7A2A2A;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.button-text {
|
||||
color: #FFFFFF;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -13,6 +13,9 @@ export const CommonEnum = {
|
|||
ADDRESS:"https://api.ccttiot.com/image-1754292905805.png",//地址图标
|
||||
BUDDHA_BACKGROUND:"https://api.ccttiot.com/image-1754297645655.png",//佛像背景
|
||||
CENSER:"https://api.ccttiot.com/image-1754297886734.png",//香炉
|
||||
KongmingLantern:'https://api.ccttiot.com/image-1754376453672.png',//孔明灯
|
||||
Refresh:'https://api.ccttiot.com/image-1754377032112.png',//刷新
|
||||
LotusMeditation:'https://api.ccttiot.com/image-1754377169541.png',//莲坐禅心
|
||||
|
||||
};
|
||||
export default CommonEnum;
|
||||
|
|
@ -145,6 +145,15 @@
|
|||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/pray/praySuccess",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
|
|
|
|||
|
|
@ -198,6 +198,13 @@ export default {
|
|||
if (response.code === 200) {
|
||||
uni.showToast({ title: '祈福成功！', icon: 'success' });
|
||||
this.resetForm();
|
||||
|
||||
// 跳转到祈福成功页面
|
||||
setTimeout(() => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/pray/praySuccess'
|
||||
});
|
||||
}, 1500);
|
||||
} else {
|
||||
uni.showToast({ title: response.msg || '祈福失败，请重试', icon: 'none' });
|
||||
}
|
||||
|
|
|
|||
233
pages/pray/praySuccess.vue
Normal file
233
pages/pray/praySuccess.vue
Normal file
|
|
@ -0,0 +1,233 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<custom-navbar title="祈福成功" />
|
||||
<view class="header" :style="{ backgroundColor: CommonEnum.BASE_COLOR }">
|
||||
<!-- 孔明灯图标 -->
|
||||
<view class="lantern-container">
|
||||
<image class="lantern-image" :src="CommonEnum.KongmingLantern" mode="aspectFit" />
|
||||
</view>
|
||||
|
||||
<!-- 确认信息 -->
|
||||
<view class="confirmation-message">
|
||||
<text class="message-title">已为您登记祈福!</text>
|
||||
<text class="message-title">将纳入寺院法会回向</text>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="action-buttons">
|
||||
<view class="donate-button" @click="showDonateModal">
|
||||
<text class="button-text">捐赠香火钱</text>
|
||||
</view>
|
||||
<view class="return-button" @click="handleReturnHome">
|
||||
<text class="button-text">返回首页</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 捐赠弹窗 -->
|
||||
<donate-modal
|
||||
:visible="showDonate"
|
||||
@close="closeDonateModal"
|
||||
@confirm="handleConfirmDonate"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CommonEnum from "../../enum/common";
|
||||
import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
|
||||
import DonateModal from "../../components/donate-modal/donate-modal.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CustomNavbar,
|
||||
DonateModal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
CommonEnum,
|
||||
loading: false,
|
||||
showDonate: false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 页面加载时获取数据
|
||||
this.loadPageData()
|
||||
},
|
||||
methods: {
|
||||
// 加载页面数据
|
||||
async loadPageData() {
|
||||
this.loading = true
|
||||
try {
|
||||
// TODO: 调用页面数据API
|
||||
// const response = await getPageData()
|
||||
// 模拟加载
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, 1000)
|
||||
} catch (error) {
|
||||
console.error('获取页面数据失败:', error)
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
// 处理捐赠香火钱
|
||||
handleDonate() {
|
||||
uni.showToast({
|
||||
title: '捐赠功能开发中',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
|
||||
// 返回首页
|
||||
handleReturnHome() {
|
||||
uni.reLaunch({
|
||||
url: '/pages/nearbystores/index'
|
||||
})
|
||||
},
|
||||
|
||||
// 显示捐赠弹窗
|
||||
showDonateModal() {
|
||||
this.showDonate = true;
|
||||
},
|
||||
|
||||
// 关闭捐赠弹窗
|
||||
closeDonateModal() {
|
||||
this.showDonate = false;
|
||||
},
|
||||
|
||||
// 确认捐赠
|
||||
handleConfirmDonate(data) {
|
||||
const amount = data.isRandom ? '随缘' : data.amount;
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: `您确定要捐赠 ${amount} 元吗？`,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showToast({
|
||||
title: '捐赠成功！',
|
||||
icon: 'success'
|
||||
});
|
||||
this.closeDonateModal();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background: #F5F0E7;
|
||||
}
|
||||
|
||||
.page {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding: 0 15rpx;
|
||||
padding-top: 120rpx;
|
||||
padding-bottom: 200rpx;
|
||||
}
|
||||
|
||||
.lantern-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-bottom: 60rpx;
|
||||
|
||||
.lantern-image {
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.confirmation-message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 80rpx;
|
||||
|
||||
.message-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #695347;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.message-subtitle {
|
||||
font-size: 28rpx;
|
||||
color: #695347;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
gap: 30rpx;
|
||||
|
||||
.donate-button {
|
||||
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);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
background-color: #7A2A2A;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.button-text {
|
||||
color: #FFFFFF;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.return-button {
|
||||
width: 600rpx;
|
||||
height: 100rpx;
|
||||
background-color: #F5F0E7;
|
||||
border: 2rpx solid #8B2E2E;
|
||||
border-radius: 50rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 4rpx 12rpx rgba(139, 46, 46, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
background-color: #F0EBE0;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.button-text {
|
||||
color: #8B2E2E;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user