menber-center/pages/setting/removeInfo/removeInfo.vue

<template>
	<view class="container">
		<view class="desc-box">
			请您勾选需要删除的内容，删除后数据可能无法恢复，请您务必谨慎操作！
		</view>
		<view class="form-box">
			<u-checkbox-group @change="checkboxGroupChange" shape="circle" wrap>
				<u-checkbox
				icon-size="42"
				label-size="38"
				v-model="item.checked"
				v-for="(item, index) in checkOption" :key="index"
				:name="item.name"
				>{{item.name}}</u-checkbox>
			</u-checkbox-group>
		</view>
		<view class="bottom-box">
			<u-button type="primary" shape="circle" @click="onSubmit" :disabled="isSelect">提交</u-button>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, computed } from 'vue'
	import { onLoad, onReady } from '@dcloudio/uni-app'
	import { msgError, msgSuccess, showConfirm } from '@/utils/common'
	import { removeInfo } from '@/api/setting.js'

	const checkOption = ref([
		{
			value: 1,
			name: '消息',
			checked: false,
			disabled: false
		},
		{
			value: 2,
			name: '浏览历史',
			checked: false,
			disabled: false
		},
		{
			value: 3,
			name: '收藏',
			checked: false,
			disabled: false
		},
		{
			value: 4,
			name: '评论',
			checked: false,
			disabled: false
		},
		{
			value: 5,
			name: '点赞',
			checked: false,
			disabled: false
		},
		{
			value: 6,
			name: '订单（关闭）',
			checked: false,
			disabled: false
		},
	])

	const isSelect = computed(() => {
		return checkOption.value.filter(item => item.checked).length === 0
	})

	function checkboxGroupChange() {

	}

	function onSubmit() {
		showConfirm('是否确认删除').then(res => {
		 	if (res.confirm) {
				const selectType = checkOption.value.filter(item => item.checked).map(item => item.value)
				const form = {
					type: `${selectType}`
				}
				removeInfo(form).then(res => {
					if (res && res.code === 0) {
						msgSuccess('操作成功')
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					} else {
						msgError('操作失败')
					}
				})
		 	}
		})
	}
</script>
<style>
	.u-checkbox{
		line-height: 2.2 !important;
		padding: 0 20rpx;
	}
</style>
<style lang="scss" scoped>
	.container {
		height: 100vh;
		width: 100vw;
		background-color: $uni-bg-color;
		padding: 20rpx;

		.desc-box {
			text-indent: 2em;
			line-height: 60rpx;
			padding: 20rpx 0;
			margin-bottom: 20rpx;
		}

		.form-box {
			padding: 20rpx 0;
			line-height: 2.8;

			.input-code {
				display: flex;
				align-items: center;
				gap: 20rpx;
				.input {
					width: 70%;
				}
				.btn {
					width: 30%;
					text-align: center;
				}
			}
		}
		.bottom-box {
			margin-top: 50rpx;
			padding: 0 50rpx;
		}
	}
</style>