立即供奉弹窗获取动态套餐数据
This commit is contained in:
WindowBird
parent
528bd0640f
commit
6d6ee3c2b5
|
|
@ -50,3 +50,11 @@ export function checkIsCollected(memorialId) {
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 获取套餐列表
|
||||||
|
export function getPackageList() {
|
||||||
|
return request({
|
||||||
|
url: "/app/thali/list",
|
||||||
|
method: "get",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="offering-modal" v-if="visible" @click="handleClose">
|
<view v-if="visible" class="offering-modal" @click="handleClose">
|
||||||
<view class="modal-overlay" @click="handleClose"></view>
|
<view class="modal-overlay" @click="handleClose"></view>
|
||||||
<view class="modal-content" @click.stop>
|
<view class="modal-content" @click.stop>
|
||||||
<!-- 关闭按钮 -->
|
<!-- 关闭按钮 -->
|
||||||
|
|
@ -15,13 +15,13 @@
|
||||||
<view class="duration-grid">
|
<view class="duration-grid">
|
||||||
<view
|
<view
|
||||||
v-for="option in durationOptions"
|
v-for="option in durationOptions"
|
||||||
:key="option.value"
|
:key="option.id"
|
||||||
|
:class="{ selected: selectedDuration === option.id }"
|
||||||
class="duration-option"
|
class="duration-option"
|
||||||
:class="{ selected: selectedDuration === option.value }"
|
@click="selectDuration(option.id)"
|
||||||
@click="selectDuration(option.value)"
|
|
||||||
>
|
>
|
||||||
<text class="duration-text">{{ option.label }}</text>
|
<text class="duration-text">{{ option.name }}</text>
|
||||||
<text class="duration-price">¥{{ option.price }}</text>
|
<text class="duration-price">¥{{ option.amount }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -30,10 +30,10 @@
|
||||||
<view class="offerer-section">
|
<view class="offerer-section">
|
||||||
<view class="section-label">供奉人</view>
|
<view class="section-label">供奉人</view>
|
||||||
<input
|
<input
|
||||||
class="offerer-input"
|
|
||||||
placeholder="请填写供奉人姓名"
|
|
||||||
v-model="offererName"
|
v-model="offererName"
|
||||||
|
class="offerer-input"
|
||||||
maxlength="20"
|
maxlength="20"
|
||||||
|
placeholder="请填写供奉人姓名"
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
<view class="input-tip">将在供奉名单上展现供奉人的姓名，此为必填</view>
|
<view class="input-tip">将在供奉名单上展现供奉人的姓名，此为必填</view>
|
||||||
|
|
@ -52,251 +52,252 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
import { object } from "../../../uni_modules/uv-ui-tools/libs/function/test";
|
||||||
name: 'OfferingModal',
|
|
||||||
props: {
|
export default {
|
||||||
visible: {
|
name: "OfferingModal",
|
||||||
type: Boolean,
|
props: {
|
||||||
default: false,
|
visible: {
|
||||||
},
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
},
|
},
|
||||||
data() {
|
durationOptions: {
|
||||||
return {
|
type: object(),
|
||||||
selectedDuration: '3', // 默认选择3天
|
default: {},
|
||||||
offererName: '',
|
},
|
||||||
durationOptions: [
|
},
|
||||||
{ label: '供奉3天', value: '3', price: '99.9' },
|
data() {
|
||||||
{ label: '供奉1周', value: '7', price: '129.9' },
|
return {
|
||||||
{ label: '供奉1月', value: '30', price: '299.9' },
|
selectedDuration: null, // 默认选择3天
|
||||||
{ label: '供奉1年', value: '365', price: '499.9' },
|
offererName: "",
|
||||||
],
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
totalPrice() {
|
||||||
|
// 未选择或options为空时返回0
|
||||||
|
if (!this.selectedDuration || !this.durationOptions.length) return 0;
|
||||||
|
|
||||||
|
const selectedOption = this.durationOptions.find(
|
||||||
|
(option) => option.id === this.selectedDuration,
|
||||||
|
);
|
||||||
|
|
||||||
|
// 当未找到选项时返回空值
|
||||||
|
return selectedOption?.amount ?? null;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 关闭弹窗
|
||||||
|
handleClose() {
|
||||||
|
this.$emit("close");
|
||||||
|
},
|
||||||
|
|
||||||
|
// 选择供奉时长
|
||||||
|
selectDuration(value) {
|
||||||
|
this.selectedDuration = value;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 确认供奉
|
||||||
|
handleConfirm() {
|
||||||
|
// 验证供奉人姓名
|
||||||
|
if (!this.offererName.trim()) {
|
||||||
|
uni.showToast({
|
||||||
|
title: "请填写供奉人姓名",
|
||||||
|
icon: "none",
|
||||||
|
});
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 获取选中的时长选项
|
||||||
|
const selectedOption = this.durationOptions.find(
|
||||||
|
(option) => option.value === this.selectedDuration,
|
||||||
|
);
|
||||||
|
|
||||||
|
// 触发确认事件
|
||||||
|
this.$emit("confirm", {
|
||||||
|
duration: this.selectedDuration,
|
||||||
|
durationLabel: selectedOption.label,
|
||||||
|
price: selectedOption.price,
|
||||||
|
offererName: this.offererName.trim(),
|
||||||
|
});
|
||||||
},
|
},
|
||||||
computed: {
|
},
|
||||||
totalPrice() {
|
};
|
||||||
const selectedOption = this.durationOptions.find(
|
|
||||||
option => option.value === this.selectedDuration
|
|
||||||
)
|
|
||||||
if (!selectedOption) return '99.9'
|
|
||||||
|
|
||||||
// 根据设计图，显示的价格可能需要调整
|
|
||||||
// 这里可以根据实际需求调整价格计算逻辑
|
|
||||||
return selectedOption.price
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 关闭弹窗
|
|
||||||
handleClose() {
|
|
||||||
this.$emit('close')
|
|
||||||
},
|
|
||||||
|
|
||||||
// 选择供奉时长
|
|
||||||
selectDuration(value) {
|
|
||||||
this.selectedDuration = value
|
|
||||||
},
|
|
||||||
|
|
||||||
// 确认供奉
|
|
||||||
handleConfirm() {
|
|
||||||
// 验证供奉人姓名
|
|
||||||
if (!this.offererName.trim()) {
|
|
||||||
uni.showToast({
|
|
||||||
title: '请填写供奉人姓名',
|
|
||||||
icon: 'none',
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取选中的时长选项
|
|
||||||
const selectedOption = this.durationOptions.find(
|
|
||||||
option => option.value === this.selectedDuration
|
|
||||||
)
|
|
||||||
|
|
||||||
// 触发确认事件
|
|
||||||
this.$emit('confirm', {
|
|
||||||
duration: this.selectedDuration,
|
|
||||||
durationLabel: selectedOption.label,
|
|
||||||
price: selectedOption.price,
|
|
||||||
offererName: this.offererName.trim(),
|
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.offering-modal {
|
.offering-modal {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-overlay {
|
.modal-overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-content {
|
.modal-content {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: #fffbf5;
|
background: #fffbf5;
|
||||||
border-radius: 24rpx 24rpx 0 0;
|
border-radius: 24rpx 24rpx 0 0;
|
||||||
padding: 40rpx 32rpx 60rpx 32rpx;
|
padding: 40rpx 32rpx 60rpx 32rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
max-height: 80vh;
|
max-height: 80vh;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.close-btn {
|
.close-btn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 20rpx;
|
top: 20rpx;
|
||||||
right: 20rpx;
|
right: 20rpx;
|
||||||
width: 60rpx;
|
width: 60rpx;
|
||||||
height: 60rpx;
|
height: 60rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
.close-icon {
|
.close-icon {
|
||||||
font-size: 40rpx;
|
font-size: 40rpx;
|
||||||
color: #999;
|
color: #999;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-title {
|
.modal-title {
|
||||||
color: #695347;
|
color: #695347;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin-bottom: 40rpx;
|
margin-bottom: 40rpx;
|
||||||
padding-top: 20rpx;
|
padding-top: 20rpx;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
line-height: 44rpx;
|
line-height: 44rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.duration-section {
|
.duration-section {
|
||||||
margin-bottom: 40rpx;
|
margin-bottom: 40rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.duration-grid {
|
.duration-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
gap: 20rpx;
|
gap: 20rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.duration-option {
|
.duration-option {
|
||||||
background: #fff1dd;
|
background: #fff1dd;
|
||||||
border-radius: 12rpx;
|
border-radius: 12rpx;
|
||||||
padding: 24rpx 20rpx;
|
padding: 24rpx 20rpx;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border: 2rpx solid transparent;
|
border: 2rpx solid transparent;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&.selected {
|
&.selected {
|
||||||
background: #a24242;
|
background: #a24242;
|
||||||
border-color: #a24242;
|
border-color: #a24242;
|
||||||
|
|
||||||
.duration-text,
|
.duration-text,
|
||||||
.duration-price {
|
.duration-price {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.duration-text {
|
.duration-text {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #c7a26d;
|
color: #c7a26d;
|
||||||
margin-bottom: 8rpx;
|
margin-bottom: 8rpx;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.duration-price {
|
.duration-price {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
color: #c7a26d;
|
color: #c7a26d;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.offerer-section {
|
.offerer-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-bottom: 40rpx;
|
margin-bottom: 40rpx;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 686rpx;
|
width: 686rpx;
|
||||||
height: 112rpx;
|
height: 112rpx;
|
||||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||||
border: 2rpx solid #a24242;
|
border: 2rpx solid #a24242;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-label {
|
.section-label {
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
color: #522510;
|
color: #522510;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin: 34rpx 70rpx 34rpx 54rpx;
|
margin: 34rpx 70rpx 34rpx 54rpx;
|
||||||
width: 196rpx;
|
width: 196rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.offerer-input {
|
.offerer-input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 80rpx;
|
height: 80rpx;
|
||||||
border-radius: 8rpx;
|
border-radius: 8rpx;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #acacac;
|
color: #acacac;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 34rpx 0 34rpx 0;
|
margin: 34rpx 0 34rpx 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-tip {
|
.input-tip {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #695347;
|
color: #695347;
|
||||||
line-height: 38rpx;
|
line-height: 38rpx;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 30rpx;
|
margin-bottom: 30rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.confirm-section {
|
.confirm-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 24rpx 51rpx;
|
padding: 24rpx 51rpx;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 90rpx;
|
height: 90rpx;
|
||||||
background: #a24242;
|
background: #a24242;
|
||||||
border-radius: 45rpx 45rpx 45rpx 45rpx;
|
border-radius: 45rpx 45rpx 45rpx 45rpx;
|
||||||
gap: 20rpx;
|
gap: 20rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.price-info {
|
.price-info {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.total-price {
|
.total-price {
|
||||||
font-size: 36rpx;
|
font-size: 36rpx;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.confirm-btn {
|
.confirm-btn {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-text {
|
.btn-text {
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user