LocalLivingServicesUniapp/components/refund.vue

<template>
	<view class="popup-mask" @click.stop="closeRefund">
		<view class="popup-content" @tap.stop>
			<view class="popup-header">
				<text>退款规则</text>
			</view>
			<view class="popup-body">
				<view class="refund-rule">
					<text class="label">退款标签</text>
					<view class="">
						随时退
					</view>
					<view class="">
						过期自动退
					</view>
					<!-- <radio-group @change="onRefundLabelChange">
            <label class="radio-item">
              <radio value="随时退" :checked="refundLabel === '随时退'" /> 随时退
            </label>
            <label class="radio-item">
              <radio value="过期自动退" :checked="refundLabel === '过期自动退'" /> 过期自动退
            </label>
          </radio-group> -->
				</view>

				<view class="refund-confirm">
					<text class="label">退款是否商家确认</text>
					<view class="">
						需要确认
					</view>
					<view class="">
						无需确认
					</view>
					<!-- <radio-group @change="onRefundConfirmChange">
            <label class="radio-item">
              <radio value="需要确认" :checked="refundConfirm === '需要确认'" /> 需要确认
            </label>
            <label class="radio-item">
              <radio value="无需确认" :checked="refundConfirm === '无需确认'" /> 无需确认
            </label>
          </radio-group> -->
				</view>
			</view>
			<view class="popup-footer">
				<!-- <button @tap="closePopup">取消</button> -->
				<button @tap.stop="save">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'refund',
		data() {
			return {
				refundLabel: '随时退', // 默认选择的退款标签
				refundConfirm: '需要确认' // 默认选择的退款确认方式
			};
		},
		methods: {
			closeRefund() {
				this.$emit('closeRule');
			},
			save() {
				console.log('444')
				// 触发 confirm 事件，并传递选择的退款规则
				this.$emit('saveRule', {
					refundLabel: this.refundLabel,
					refundConfirm: this.refundConfirm
				});
			},
		}
	};
</script>

<style>
	.popup-mask {
		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: 99;
	}

	.popup-content {
		background-color: #fff;
		width: 80%;
		border-radius: 10px;
		overflow: hidden;
	}

	.popup-header {
		padding: 20px;
		border-bottom: 1px solid #eee;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
	}

	.popup-body {
		padding: 20px;
	}

	.refund-rule,
	.refund-confirm {
		margin-bottom: 20px;
	}

	.label {
		display: block;
		margin-bottom: 10px;
		font-size: 16px;
		font-weight: bold;
	}

	.radio-item {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.popup-footer {
		display: flex;
		justify-content: space-between;
		padding: 10px;
		border-top: 1px solid #eee;
	}

	.popup-footer button {
		flex: 1;
		margin: 0 5px;
	}
</style>