自定义选择人数模块封装-自定义button样式不渲染修正
This commit is contained in:
WindowBird
parent
23d876ee73
commit
bcfe992bdb
225
components/custom-number-modal/custom-number-modal.vue
Normal file
225
components/custom-number-modal/custom-number-modal.vue
Normal file
|
|
@ -0,0 +1,225 @@
|
|||
<template>
|
||||
<view v-if="visible" class="modal-overlay" @click="handleOverlayClick">
|
||||
<view class="modal-content" @click.stop>
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">{{ title }}</text>
|
||||
<view class="modal-close" @click="handleClose">×</view>
|
||||
</view>
|
||||
<view class="modal-body">
|
||||
<view class="input-group">
|
||||
<text class="input-label">{{ label }}</text>
|
||||
<input
|
||||
v-model="inputValue"
|
||||
type="number"
|
||||
:placeholder="placeholder"
|
||||
class="custom-input"
|
||||
@input="handleInput"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="modal-footer">
|
||||
<view class="modal-btn cancel-btn" @click="handleClose">{{ cancelText }}</view>
|
||||
<view class="modal-btn confirm-btn" @click="handleConfirm">{{ confirmText }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CustomNumberModal',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '自定义人数'
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: '请输入人数：'
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请输入人数'
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: '取消'
|
||||
},
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: '确定'
|
||||
},
|
||||
maxValue: {
|
||||
type: Number,
|
||||
default: 99
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
inputValue: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible(newVal) {
|
||||
if (newVal) {
|
||||
this.inputValue = ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleInput(e) {
|
||||
const value = e.detail.value
|
||||
// 只允许输入数字，且小于maxValue
|
||||
const numValue = value.replace(/[^\d]/g, "")
|
||||
if (numValue === "" || parseInt(numValue) < this.maxValue) {
|
||||
this.inputValue = numValue
|
||||
}
|
||||
},
|
||||
|
||||
handleConfirm() {
|
||||
if (this.inputValue === "") {
|
||||
uni.showToast({
|
||||
title: "请输入人数",
|
||||
icon: "none",
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
const numValue = parseInt(this.inputValue)
|
||||
if (numValue >= this.maxValue) {
|
||||
uni.showToast({
|
||||
title: `人数不能大于等于${this.maxValue}`,
|
||||
icon: "none",
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
this.$emit('confirm', this.inputValue)
|
||||
this.handleClose()
|
||||
},
|
||||
|
||||
handleClose() {
|
||||
this.$emit('close')
|
||||
},
|
||||
|
||||
handleOverlayClick() {
|
||||
this.handleClose()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 600rpx;
|
||||
background: #fffbf5;
|
||||
border-radius: 20rpx;
|
||||
border: 2rpx solid #c7a26d;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 40rpx 50rpx 20rpx 50rpx;
|
||||
border-bottom: 1rpx solid #e0e0e0;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-weight: 600;
|
||||
font-size: 36rpx;
|
||||
color: #695347;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 48rpx;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 40rpx 50rpx;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
font-size: 32rpx;
|
||||
color: #695347;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.custom-input {
|
||||
width: 460rpx;
|
||||
height: 80rpx;
|
||||
border: 2rpx solid #c7a26d;
|
||||
border-radius: 10rpx;
|
||||
padding-left: 30rpx;
|
||||
font-size: 32rpx;
|
||||
color: #695347;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
border-top: 1rpx solid #e0e0e0;
|
||||
}
|
||||
|
||||
.modal-btn {
|
||||
flex: 1;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
border-right: 1rpx solid #e0e0e0;
|
||||
}
|
||||
|
||||
.cancel-btn:active {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background: #a24242;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.confirm-btn:active {
|
||||
background: #8a3636;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,13 +1,62 @@
|
|||
<template>
|
||||
<view class="">
|
||||
|
||||
</view>
|
||||
<view class="page">
|
||||
<custom-navbar ref="customNavbar" title="基础页面" />
|
||||
<tile-grid />
|
||||
<view :style="{ backgroundColor: CommonEnum.BASE_COLOR }" class="header">
|
||||
<!-- 状态展示 -->
|
||||
<status-display v-if="loading" loading-text="加载中..." type="loading" />
|
||||
<!-- 页面内容将在这里添加 -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
<script>
|
||||
import CommonEnum from "../../enum/common";
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
CommonEnum,
|
||||
loading: 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;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.page {
|
||||
background: #f5f0e7;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
//min-height: 100vh;//可能导致页面留白
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
padding: 0 15rpx;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,12 @@
|
|||
<view
|
||||
v-for="(number, index) in numberOptions"
|
||||
:key="index"
|
||||
:class="{ selected: selectedNumber === number.value }"
|
||||
:class="{
|
||||
selected:
|
||||
selectedNumber === number.value ||
|
||||
(number.value === 'custom' &&
|
||||
!['1', '2'].includes(selectedNumber)),
|
||||
}"
|
||||
class="scroll-view-item_number"
|
||||
@click="selectNumber(number.value)"
|
||||
>
|
||||
|
|
@ -54,49 +59,29 @@
|
|||
</view>
|
||||
<view class="submit">
|
||||
<view class="submit-message"
|
||||
>{{ getSelectedDateLabel() }} {{ getSelectedNumberLabel() }}</view
|
||||
>
|
||||
>{{ getSelectedDateLabel() }} {{ getSelectedNumberLabel() }}
|
||||
</view>
|
||||
<view class="submit-button" @click="submitApplication">提交报名</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 自定义人数弹窗 -->
|
||||
<view v-if="showCustomNumberModal" class="modal-overlay" @click="closeCustomModal">
|
||||
<view class="modal-content" @click.stop>
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">自定义人数</text>
|
||||
<view class="modal-close" @click="closeCustomModal">×</view>
|
||||
</view>
|
||||
<view class="modal-body">
|
||||
<view class="input-group">
|
||||
<text class="input-label">请输入人数：</text>
|
||||
<input
|
||||
v-model="customNumber"
|
||||
type="number"
|
||||
placeholder="请输入人数"
|
||||
class="custom-input"
|
||||
@input="onCustomNumberInput"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="modal-footer">
|
||||
<view class="modal-btn cancel-btn" @click="closeCustomModal">取消</view>
|
||||
<view class="modal-btn confirm-btn" @click="confirmCustomNumber">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<custom-number-modal
|
||||
:visible="showCustomNumberModal"
|
||||
@close="closeCustomModal"
|
||||
@confirm="handleCustomNumberConfirm"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CommonEnum } from "@/enum/common.js";
|
||||
import { MonkEnum } from "@/enum/monk.js";
|
||||
import { getMonkList } from "@/api/monk/monk.js";
|
||||
|
||||
import SearchBox from "../../components/search-box/search-box.vue";
|
||||
import CustomNumberModal from "../../components/custom-number-modal/custom-number-modal.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MonkSearchBox: SearchBox,
|
||||
CustomNumberModal,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -104,8 +89,6 @@ export default {
|
|||
backgroundColor: "#F5F0E7",
|
||||
},
|
||||
CommonEnum,
|
||||
MonkEnum,
|
||||
monkList: [],
|
||||
searchName: "",
|
||||
|
||||
// 选择项数据
|
||||
|
|
@ -137,12 +120,9 @@ export default {
|
|||
|
||||
// 自定义人数弹窗相关
|
||||
showCustomNumberModal: false,
|
||||
customNumber: "",
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.fetchMonkList();
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
// 选择日期
|
||||
selectDate(value) {
|
||||
|
|
@ -205,7 +185,10 @@ export default {
|
|||
|
||||
// 获取选中的人数标签
|
||||
getSelectedNumberLabel() {
|
||||
if (this.selectedNumber === "custom" || (this.selectedNumber !== "1" && this.selectedNumber !== "2")) {
|
||||
if (
|
||||
this.selectedNumber === "custom" ||
|
||||
(this.selectedNumber !== "1" && this.selectedNumber !== "2")
|
||||
) {
|
||||
return this.selectedNumber + "人";
|
||||
}
|
||||
const selectedNumber = this.numberOptions.find(
|
||||
|
|
@ -214,25 +197,6 @@ export default {
|
|||
return selectedNumber ? selectedNumber.label : "";
|
||||
},
|
||||
|
||||
async fetchMonkList() {
|
||||
try {
|
||||
const res = await getMonkList({ name: this.searchName });
|
||||
if (res.code === 200 && Array.isArray(res.rows)) {
|
||||
this.monkList = res.rows;
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg || "获取失败",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
uni.showToast({
|
||||
title: "网络错误",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 去除 HTML 标签，返回纯文本
|
||||
stripHtmlTags(html) {
|
||||
if (!html) return ""; // 处理空值
|
||||
|
|
@ -241,7 +205,6 @@ export default {
|
|||
|
||||
// 自定义人数弹窗相关方法
|
||||
openCustomNumberModal() {
|
||||
this.customNumber = ""; // 清空输入框
|
||||
this.showCustomNumberModal = true;
|
||||
},
|
||||
|
||||
|
|
@ -249,35 +212,8 @@ export default {
|
|||
this.showCustomNumberModal = false;
|
||||
},
|
||||
|
||||
onCustomNumberInput(e) {
|
||||
const value = e.detail.value;
|
||||
// 只允许输入数字，且小于99
|
||||
const numValue = value.replace(/[^\d]/g, "");
|
||||
if (numValue === "" || parseInt(numValue) < 99) {
|
||||
this.customNumber = numValue;
|
||||
}
|
||||
},
|
||||
|
||||
confirmCustomNumber() {
|
||||
if (this.customNumber === "") {
|
||||
uni.showToast({
|
||||
title: "请输入人数",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const numValue = parseInt(this.customNumber);
|
||||
if (numValue >= 99) {
|
||||
uni.showToast({
|
||||
title: "人数不能大于等于99",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.selectedNumber = this.customNumber;
|
||||
this.showCustomNumberModal = false;
|
||||
handleCustomNumberConfirm(value) {
|
||||
this.selectedNumber = value;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -446,114 +382,4 @@ text {
|
|||
text-align: center;
|
||||
margin-bottom: 26rpx;
|
||||
}
|
||||
|
||||
/* 自定义人数弹窗样式 */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 600rpx;
|
||||
background: #fffbf5;
|
||||
border-radius: 20rpx;
|
||||
border: 2rpx solid #c7a26d;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 40rpx 50rpx 20rpx 50rpx;
|
||||
border-bottom: 1rpx solid #e0e0e0;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-weight: 600;
|
||||
font-size: 36rpx;
|
||||
color: #695347;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 48rpx;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 40rpx 50rpx;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
font-size: 32rpx;
|
||||
color: #695347;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.custom-input {
|
||||
width: 460rpx;
|
||||
height: 80rpx;
|
||||
border: 2rpx solid #c7a26d;
|
||||
border-radius: 10rpx;
|
||||
padding-left:30rpx;
|
||||
font-size: 32rpx;
|
||||
color: #695347;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
border-top: 1rpx solid #e0e0e0;
|
||||
}
|
||||
|
||||
.modal-btn {
|
||||
flex: 1;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
border-right: 1rpx solid #e0e0e0;
|
||||
}
|
||||
|
||||
.cancel-btn:active {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background: #a24242;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.confirm-btn:active {
|
||||
background: #8a3636;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,62 @@
|
|||
<template>
|
||||
<view class="">
|
||||
|
||||
</view>
|
||||
<view class="page">
|
||||
<custom-navbar ref="customNavbar" title="基础页面" />
|
||||
<tile-grid />
|
||||
<view :style="{ backgroundColor: CommonEnum.BASE_COLOR }" class="header">
|
||||
<!-- 状态展示 -->
|
||||
<status-display v-if="loading" loading-text="加载中..." type="loading" />
|
||||
<!-- 页面内容将在这里添加 -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
<script>
|
||||
import CommonEnum from "../../enum/common";
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
CommonEnum,
|
||||
loading: 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;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.page {
|
||||
background: #f5f0e7;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
//min-height: 100vh;//可能导致页面留白
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
padding: 0 15rpx;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user