LocalLivingServicesUniapp/pages/merchantDish/dish/list.vue

<template>
	<view class="page">
		<u-navbar :placeholder="true" :border-bottom="false" :custom-back="goBack" title="菜品列表">
			<view slot="right" class="nav-right">
				<template v-if="!batchMode">
					<image class="nav-icon" src="/static/merchantDish/search.png" mode="aspectFit" @click="showSearch = !showSearch"></image>
					<image class="nav-icon" src="/static/merchantDish/batch.png" mode="aspectFit" @click="enterBatch"></image>
				</template>
				<text v-else class="cancel-btn" @click="exitBatch">取消</text>
			</view>
		</u-navbar>

		<view class="search-bar" v-if="showSearch && !batchMode">
			<u-search
				v-model="keyword"
				placeholder="请输入菜品/套餐名称"
				:show-action="true"
				action-text="搜索"
				@search="onSearch"
				@custom="onSearch"
			></u-search>
		</view>

		<view class="filter-wrap">
			<view class="filters">
				<view :class="['filter-item', pickerShow && pickerType === 'status' ? 'active' : '']" @click="openPicker('status')">
					<text class="filter-text">{{ statusLabel }}</text>
					<image
						:class="['filter-arrow', pickerShow && pickerType === 'status' ? 'up' : '']"
						src="/static/merchantDish/selete.png"
						mode="aspectFit"
					></image>
				</view>
				<view :class="['filter-item', pickerShow && pickerType === 'type' ? 'active' : '']" @click="openPicker('type')">
					<text class="filter-text">{{ typeLabel }}</text>
					<image
						:class="['filter-arrow', pickerShow && pickerType === 'type' ? 'up' : '']"
						src="/static/merchantDish/selete.png"
						mode="aspectFit"
					></image>
				</view>
				<view :class="['filter-item', pickerShow && pickerType === 'category' ? 'active' : '']" @click="openPicker('category')">
					<text class="filter-text">{{ categoryLabel }}</text>
					<image
						:class="['filter-arrow', pickerShow && pickerType === 'category' ? 'up' : '']"
						src="/static/merchantDish/selete.png"
						mode="aspectFit"
					></image>
				</view>
			</view>

			<!-- 筛选下拉：状态 / 菜品类型 / 品类 -->
			<view class="filter-dropdown" v-if="pickerShow">
				<view class="filter-panel">
					<view
						v-for="(opt, idx) in pickerList"
						:key="idx"
						:class="['filter-option', isOptionActive(opt) ? 'on' : '']"
						@click="onPick(opt)"
					>
						{{ opt.text }}
					</view>
				</view>
				<view class="filter-mask" @click="closePicker"></view>
			</view>
		</view>

		<!-- 团餐报名提示条 -->
		<view class="banner" v-if="bannerVisible" @click="onBannerClick">
			<rich-text :nodes="bannerNodes"></rich-text>
		</view>

		<view class="list-wrap" :style="{ paddingBottom: batchMode ? '140rpx' : '160rpx' }">
			<ListScrollView
				ref="listScroll"
				:api="api"
				:init="initParams"
				:pageSize="20"
				emptyText="暂无菜品"
				@afterFetch="afterFetch"
			>
				<template v-slot:list="{ data }">
					<view class="list">
						<view class="card" v-for="item in data" :key="item.id" @click="toggleSelect(item)">
							<image
								class="belong-tag"
								:src="item.belong === 'group' ? '/static/merchantDish/groupmeal.png' : '/static/merchantDish/store.png'"
								mode="heightFix"
							></image>
							<view class="check" v-if="batchMode">
								<view :class="['dot', selectedIds.includes(item.id) ? 'on' : '']">
									<u-icon v-if="selectedIds.includes(item.id)" name="checkmark" color="#fff" size="20"></u-icon>
								</view>
							</view>
							<view class="thumb-wrap">
								<image class="thumb" :src="item.image" mode="aspectFill"></image>
							</view>
							<view class="info">
								<view class="row-top">
									<text class="name">{{ item.name }}</text>
									<text :class="['status', item.status]">{{ statusText[item.status] || item.statusName }}</text>
								</view>
								<view class="desc">{{ item.desc }}</view>
								<view class="meta">
									每日库存: {{ item.stock != null ? item.stock : 0 }}
									<text class="meta-gap">合计销量: {{ formatSales(item.sales) }}</text>
								</view>
								<view class="price-line">
									<text class="price">¥{{ formatPrice(item.price) }}</text>
									<text class="origin" v-if="item.originPrice != null && item.originPrice !== ''">{{ formatPrice(item.originPrice) }}</text>
								</view>
								<view class="actions" v-if="!batchMode" @click.stop>
									<template v-if="item.status === 'selling' || item.status === 'soldout'">
										<view class="btn primary" @click="onOffShelf(item)">下架</view>
									</template>
									<template v-else-if="item.status === 'pending'">
										<text class="btn-link" @click="onDelete(item)">删除</text>
										<text class="btn-link" @click="goEdit(item)">编辑</text>
										<view class="btn primary" @click="onOnShelf(item)">上架</view>
									</template>
									<template v-else-if="item.status === 'rejected'">
										<text class="btn-link" @click="onDelete(item)">删除</text>
										<text class="btn-link" @click="goEdit(item)">编辑</text>
									</template>
								</view>
							</view>
						</view>
					</view>
				</template>
			</ListScrollView>
		</view>

		<!-- 底部：新建 / 批量操作 -->
		<view class="footer" v-if="!batchMode">
			<view class="primary-btn" @click="goCreate">新建菜品</view>
		</view>
		<view class="batch-footer" v-else>
			<view class="all" @click="toggleAll">
				<view :class="['dot', isAllSelected ? 'on' : '']">
					<u-icon v-if="isAllSelected" name="checkmark" color="#fff" size="20"></u-icon>
				</view>
				全选
			</view>
			<view class="batch-btns">
				<template v-if="filterStatus === '' || filterStatus === 'reviewing'">
					<view class="b-btn disabled">批量删除</view>
					<view class="b-btn disabled">批量下架</view>
					<view class="b-btn disabled">批量上架</view>
				</template>
				<template v-else-if="filterStatus === 'selling' || filterStatus === 'soldout'">
					<view class="b-btn danger" @click="batchOff">批量下架</view>
				</template>
				<template v-else-if="filterStatus === 'pending'">
					<view class="b-btn outline" @click="batchDelete">批量删除</view>
					<view class="b-btn danger" @click="batchOn">批量上架</view>
				</template>
				<template v-else-if="filterStatus === 'rejected'">
					<view class="b-btn danger" @click="batchDelete">批量删除</view>
				</template>
			</view>
		</view>

		<!-- 团餐下架确认 -->
		<view class="mask" v-if="offShelfShow" @click="closeOffShelf">
			<view class="confirm-dialog" @click.stop>
				<view class="confirm-title">提示</view>
				<view class="confirm-content">
					该菜品当前有未成团订单{{ (offShelfItem && offShelfItem.ungroupedOrderCount) || 0 }}份，已成团{{ (offShelfItem && offShelfItem.groupedOrderCount) || 0 }}份，是否要确定下架
				</view>
				<view class="confirm-footer">
					<view class="confirm-btn" @click="closeOffShelf">取消</view>
					<view class="confirm-btn" @click="confirmOffShelf">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import ListScrollView from '@/components/list-scroll-view/index.vue';
import merchantDishApi, {
	STATUS_KEY_TO_TYPE,
	STATUS_TEXT,
	mapPackageToListItem,
	belongingToApi,
	getMerchantId
} from '@/api/merchantDish.js';

const STATUS_OPTIONS = [
	{ label: '全部', value: '' },
	{ label: '销售中', value: 'selling' },
	{ label: '已售完', value: 'soldout' },
	{ label: '待上架', value: 'pending' },
	{ label: '审核中', value: 'reviewing' },
	{ label: '未通过', value: 'rejected' }
];

const TYPE_OPTIONS = [
	{ label: '全部菜品', value: '' },
	{ label: '团餐菜品', value: 'group' },
	{ label: '门店菜品', value: 'store' }
];

export default {
	components: {
		ListScrollView
	},
	data() {
		return {
			api: {
				url: '/groupmeal/gmMerchantPackage/pageListV2',
				method: 'POST'
			},
			keyword: '',
			showSearch: false,
			batchMode: false,
			selectedIds: [],
			filterStatus: '',
			filterType: '',
			filterCategory: '',
			categoryOptions: [{ label: '全部品类', value: '' }],
			pickerShow: false,
			pickerType: '',
			pickerList: [],
			statusText: STATUS_TEXT,
			applyStatus: 0,
			listVersion: 0,
			listReady: false,
			offShelfShow: false,
			offShelfItem: null
		};
	},
	computed: {
		statusLabel() {
			return (STATUS_OPTIONS.find((i) => i.value === this.filterStatus) || {}).label || '全部';
		},
		typeLabel() {
			return (TYPE_OPTIONS.find((i) => i.value === this.filterType) || {}).label || '全部菜品';
		},
		categoryLabel() {
			return (this.categoryOptions.find((i) => i.value === this.filterCategory) || {}).label || '全部品类';
		},
		initParams() {
			const params = {
				merchantId: getMerchantId(),
				statusType: this.filterStatus ? STATUS_KEY_TO_TYPE[this.filterStatus] : ''
			};
			if (this.keyword) params.name = this.keyword;
			if (this.filterType) params.productBelonging = belongingToApi(this.filterType);
			if (this.filterCategory) params.specialCategoryIds = [this.filterCategory];
			return params;
		},
		currentList() {
			void this.listVersion;
			const scroll = this.$refs.listScroll;
			return (scroll && scroll.dataList) || [];
		},
		isAllSelected() {
			const list = this.currentList;
			const ids = list.map((i) => i.id);
			return ids.length > 0 && ids.every((id) => this.selectedIds.includes(id));
		},
		bannerVisible() {
			return this.applyStatus !== 1;
		},
		bannerNodes() {
			const wrap = (html) => `<span style="color:#B8860B;font-size:14px;">${html}</span>`;
			const mark = (word) => `<span style="color:#F5A623;font-weight:600;">${word}</span>`;
			if (this.applyStatus == 0) {
				return wrap(`提示：平台现已增加团餐活动，如您需要，点击${mark('报名')}参与`);
			}
			if (this.applyStatus == 3) {
				return wrap('提示：团餐活动报名审核中，请耐心等待');
			}
			if (this.applyStatus == 2) {
				return wrap(`提示：团餐报名未通过，点击${mark('重新报名')}`);
			}
			return '';
		}
	},
	onLoad() {
		this.loadSpecialCategories();
	},
	onShow() {
		if (this.listReady) {
			this.reloadList();
		} else {
			this.listReady = true;
		}
		this.fetchApplyStatus();
	},
	methods: {
		formatPrice(price) {
			const n = Number(price);
			if (Number.isNaN(n)) return '0.00';
			return n.toFixed(2);
		},
		formatSales(sales) {
			const n = Number(sales);
			if (Number.isNaN(n)) return '0';
			return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
		},
		goBack() {
			uni.navigateBack({ delta: 1 });
		},
		fetchApplyStatus() {
			merchantDishApi.isApply().then((res) => {
				if (res.data.code !== 200) return;
				const result = res.data.result;
				let localStatus = 0;
				if (result) {
					const apiStatus = result.status;
					if (apiStatus == 0) localStatus = 3;
					else if (apiStatus == 1) localStatus = 1;
					else if (apiStatus == 2) localStatus = 2;
				}
				this.applyStatus = localStatus;
			});
		},
		loadSpecialCategories() {
			merchantDishApi.specialCategoryList().then((res) => {
				if (res.data.code !== 200) return;
				const rows = res.data.result || [];
				this.categoryOptions = [
					{ label: '全部品类', value: '' },
					...rows.map((i) => ({
						label: i.categoryName,
						value: String(i.id)
					}))
				];
			});
		},
		afterFetch(result) {
			const records = Array.isArray(result.records) ? result.records : [];
			records.forEach((item) => {
				Object.assign(item, mapPackageToListItem(item));
			});
			this.listVersion += 1;
		},
		reloadList() {
			this.$nextTick(() => {
				const scroll = this.$refs.listScroll;
				if (scroll && scroll.mescroll) {
					scroll.reloadList(this.initParams);
				}
			});
		},
		onSearch() {
			this.reloadList();
		},
		openPicker(type) {
			if (this.batchMode) return;
			if (this.pickerShow && this.pickerType === type) {
				this.closePicker();
				return;
			}
			this.pickerType = type;
			const map = {
				status: STATUS_OPTIONS,
				type: TYPE_OPTIONS,
				category: this.categoryOptions
			};
			this.pickerList = (map[type] || []).map((i) => ({ text: i.label, value: i.value }));
			this.pickerShow = true;
		},
		closePicker() {
			this.pickerShow = false;
			this.pickerType = '';
		},
		isOptionActive(opt) {
			const value = opt && opt.value !== undefined ? opt.value : '';
			if (this.pickerType === 'status') return this.filterStatus === value;
			if (this.pickerType === 'type') return this.filterType === value;
			if (this.pickerType === 'category') return this.filterCategory === value;
			return false;
		},
		onPick(opt) {
			const value = opt && opt.value !== undefined ? opt.value : '';
			if (this.pickerType === 'status') this.filterStatus = value;
			if (this.pickerType === 'type') this.filterType = value;
			if (this.pickerType === 'category') this.filterCategory = value;
			this.selectedIds = [];
			this.closePicker();
			this.reloadList();
		},
		enterBatch() {
			this.closePicker();
			this.batchMode = true;
			this.selectedIds = [];
		},
		exitBatch() {
			this.batchMode = false;
			this.selectedIds = [];
		},
		toggleSelect(item) {
			if (!this.batchMode) return;
			const i = this.selectedIds.indexOf(item.id);
			if (i >= 0) this.selectedIds.splice(i, 1);
			else this.selectedIds.push(item.id);
		},
		toggleAll() {
			if (this.isAllSelected) this.selectedIds = [];
			else this.selectedIds = this.currentList.map((i) => i.id);
		},
		goCreate() {
			uni.navigateTo({ url: '/pages/merchantDish/dish/form' });
		},
		goEdit(item) {
			uni.navigateTo({ url: `/pages/merchantDish/dish/form?id=${item.id}` });
		},
		onBannerClick() {
			if (this.applyStatus === 3) {
				uni.showToast({ title: '审核中，请耐心等待', icon: 'none' });
				return;
			}
			uni.navigateTo({ url: '/pages/merchantDish/apply/index' });
		},
		confirmModal(content) {
			return new Promise((resolve) => {
				uni.showModal({
					title: '提示',
					content,
					confirmColor: '#333333',
					success: (res) => resolve(!!res.confirm)
				});
			});
		},
		async onOffShelf(item) {
			// 团餐：展示未成团/已成团订单数确认弹窗
			if (item.belong === 'group') {
				this.offShelfItem = item;
				this.offShelfShow = true;
				return;
			}
			if (!(await this.confirmModal('确定下架当前商品'))) return;
			this.doOffShelf(item);
		},
		closeOffShelf() {
			this.offShelfShow = false;
			this.offShelfItem = null;
		},
		confirmOffShelf() {
			const item = this.offShelfItem;
			this.closeOffShelf();
			if (item) this.doOffShelf(item);
		},
		doOffShelf(item) {
			merchantDishApi.packageLaunch(item.id, 0).then((res) => {
				this.$tip.toast(res.data.message || (res.data.code === 200 ? '已下架' : '操作失败'));
				if (res.data.code === 200) this.reloadList();
			});
		},
		async onOnShelf(item) {
			if (!(await this.confirmModal('确定上架当前商品'))) return;
			merchantDishApi.packageLaunch(item.id, 1).then((res) => {
				this.$tip.toast(res.data.message || (res.data.code === 200 ? '已上架' : '操作失败'));
				if (res.data.code === 200) this.reloadList();
			});
		},
		async onDelete(item) {
			if (!(await this.confirmModal('确定删除当前商品'))) return;
			merchantDishApi.packageDelete(item.id).then((res) => {
				this.$tip.toast(res.data.message || (res.data.code === 200 ? '已删除' : '操作失败'));
				if (res.data.code === 200) this.reloadList();
			});
		},
		ensureSelected() {
			if (!this.selectedIds.length) {
				uni.showToast({ title: '请先选择菜品', icon: 'none' });
				return false;
			}
			return true;
		},
		async batchOff() {
			if (!this.ensureSelected()) return;
			if (!(await this.confirmModal('确定批量下架选中商品？'))) return;
			merchantDishApi.packageBatchLaunch(this.selectedIds, 0).then((res) => {
				this.$tip.toast(res.data.message || (res.data.code === 200 ? '批量下架成功' : '操作失败'));
				if (res.data.code === 200) {
					this.exitBatch();
					this.reloadList();
				}
			});
		},
		async batchOn() {
			if (!this.ensureSelected()) return;
			if (!(await this.confirmModal('确定批量上架选中商品？'))) return;
			merchantDishApi.packageBatchLaunch(this.selectedIds, 1).then((res) => {
				this.$tip.toast(res.data.message || (res.data.code === 200 ? '批量上架成功' : '操作失败'));
				if (res.data.code === 200) {
					this.exitBatch();
					this.reloadList();
				}
			});
		},
		async batchDelete() {
			if (!this.ensureSelected()) return;
			if (!(await this.confirmModal('确定批量删除选中商品？'))) return;
			merchantDishApi.packageDeleteBatch(this.selectedIds).then((res) => {
				this.$tip.toast(res.data.message || (res.data.code === 200 ? '批量删除成功' : '操作失败'));
				if (res.data.code === 200) {
					this.exitBatch();
					this.reloadList();
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	height: 100vh;
	background: #f7f8fa;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.nav-right {
	display: flex;
	align-items: center;
	padding-right: 24rpx;
	gap: 28rpx;
}
.nav-icon {
	width: 56rpx;
	height: 56rpx;
}
.cancel-btn {
	font-size: 28rpx;
	color: #333;
	padding-right: 8rpx;
}
.search-bar {
	padding: 12rpx 24rpx;
	background: #fff;
	flex-shrink: 0;
}

/* ========== 筛选栏 + 下拉面板 ========== */
.filter-wrap {
	position: relative;
	flex-shrink: 0;
	z-index: 30;
}
.filters {
	display: flex;
	align-items: center;
	background: #fff;
	padding: 24rpx 0;
	position: relative;
	z-index: 2;
	.filter-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #666;
		&.active {
			color: #449aff;
		}
		.filter-text {
			max-width: 180rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	.filter-arrow {
		width: 18rpx;
		height: 18rpx;
		margin-left: 8rpx;
		flex-shrink: 0;
		transition: transform 0.2s;
		&.up {
			transform: rotate(180deg);
		}
	}
}
.filter-dropdown {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 1;
}
.filter-panel {
	position: relative;
	z-index: 2;
	background: #fff;
	border-radius: 0 0 16rpx 16rpx;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
	padding: 8rpx 0 24rpx;
	max-height: 560rpx;
	overflow-y: auto;
}
.filter-option {
	padding: 22rpx 48rpx;
	font-size: 28rpx;
	color: #222;
	line-height: 1.4;
	&.on {
		color: #449aff;
	}
}
.filter-mask {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 100vh;
	z-index: 1;
	background: rgba(0, 0, 0, 0.4);
}

.banner {
	height: 80rpx;
	line-height: 80rpx;
	background: #fff8e6;
	font-size: 28rpx;
	text-align: center;
}
.list-wrap {
	flex: 1;
	min-height: 0;
	box-sizing: border-box;
}
.list {
	padding: 16rpx 24rpx;
	box-sizing: border-box;
}

/* ========== 菜品卡片 ========== */
.card {
	display: flex;
	background: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 16rpx;
	position: relative;
	overflow: hidden;
	.belong-tag {
		position: absolute;
		left: 0;
		top: 0;
		height: 36rpx;
		width: auto;
		z-index: 2;
	}
	.check {
		display: flex;
		align-items: flex-start;
		padding-top: 40rpx;
		margin-right: 16rpx;
	}
	.dot {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		border: 2rpx solid #ccc;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		&.on {
			background: #449aff;
			border-color: #449aff;
		}
	}
	.thumb-wrap {
		width: 160rpx;
		height: 160rpx;
		flex-shrink: 0;
		.thumb {
			width: 100%;
			height: 100%;
			border-radius: 12rpx;
			background: #eee;
		}
	}
	.info {
		flex: 1;
		margin-left: 20rpx;
		min-width: 0;
		display: flex;
		flex-direction: column;
	}
	.row-top {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		.name {
			flex: 1;
			font-size: 30rpx;
			font-weight: 600;
			color: #222;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			padding-right: 12rpx;
		}
		.status {
			font-size: 24rpx;
			flex-shrink: 0;
			&.selling {
				color: #19be6b;
			}
			&.soldout {
				color: #999;
			}
			&.pending {
				color: #ff9900;
			}
			&.reviewing {
				color: #f5a623;
			}
			&.rejected {
				color: #ff4d4f;
			}
		}
	}
	.desc {
		font-size: 22rpx;
		color: #999;
		margin-top: 8rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.meta {
		margin-top: 8rpx;
		font-size: 22rpx;
		color: #999;
		.meta-gap {
			margin-left: 20rpx;
		}
	}
	.price-line {
		margin-top: 10rpx;
		.price {
			color: #ff4d4f;
			font-size: 32rpx;
			font-weight: 600;
			margin-right: 12rpx;
		}
		.origin {
			font-size: 24rpx;
			color: #999;
			text-decoration: line-through;
		}
	}
	.actions {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 24rpx;
		margin-top: 16rpx;
	}
	.btn-link {
		font-size: 26rpx;
		color: #666;
		line-height: 52rpx;
		padding: 0 4rpx;
	}
	.btn {
		font-size: 26rpx;
		padding: 0 28rpx;
		height: 52rpx;
		line-height: 52rpx;
		border-radius: 26rpx;
		color: #666;
		background: #fff;
		&.primary {
			background: #449aff;
			color: #fff;
		}
	}
}

.footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	padding: 20rpx 40rpx calc(20rpx + env(safe-area-inset-bottom));
	background: #fff;
}
.primary-btn {
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	color: #fff;
	font-size: 32rpx;
	border-radius: 44rpx;
	background: linear-gradient( 89deg, #10ABFE 0%, #2260F6 100%);
}
.batch-footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	padding: 16rpx 24rpx calc(16rpx + env(safe-area-inset-bottom));
	background: #fff;
	box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.04);
	.all {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		margin-right: 20rpx;
		.dot {
			width: 36rpx;
			height: 36rpx;
			border-radius: 50%;
			border: 2rpx solid #ccc;
			margin-right: 10rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			&.on {
				background: #449aff;
				border-color: #449aff;
			}
		}
	}
	.batch-btns {
		flex: 1;
		display: flex;
		gap: 12rpx;
		justify-content: flex-end;
	}
	.b-btn {
		flex: 1;
		text-align: center;
		height: 72rpx;
		line-height: 72rpx;
		border-radius: 36rpx;
		font-size: 26rpx;
		&.danger {
			background: #ff4d4f;
			color: #fff;
		}
		&.outline {
			border: 1rpx solid #ff4d4f;
			color: #ff4d4f;
		}
		&.disabled {
			background: #f0f0f0;
			color: #bbb;
			pointer-events: none;
		}
	}
}
.mask {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.confirm-dialog {
	width: 560rpx;
	background: #fff;
	border-radius: 20rpx;
	overflow: hidden;
}
.confirm-title {
	padding: 40rpx 40rpx 0;
	text-align: center;
	font-size: 34rpx;
	font-weight: 600;
	color: #222;
	line-height: 1.4;
}
.confirm-content {
	padding: 24rpx 40rpx 48rpx;
	text-align: center;
	font-size: 28rpx;
	color: #333;
	line-height: 1.6;
}
.confirm-footer {
	display: flex;
	border-top: 1rpx solid #e5e5e5;
}
.confirm-btn {
	flex: 1;
	height: 96rpx;
	line-height: 96rpx;
	text-align: center;
	font-size: 32rpx;
	color: #333;
	&:first-child {
		border-right: 1rpx solid #e5e5e5;
	}
}
</style>