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
					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 params = [
		{
			value: 1,
			name: '消息'
		},
		{
			value: 2,
			name: '浏览历史'
		},
		{
			value: 3,
			name: '收藏'
		},
		{
			value: 4,
			name: '评论'
		},
		{
			value: 5,
			name: '点赞'
		},
		{
			value: 6,
			name: '订单（关闭）'
		},
	]
	
	const checkOption = ref([
		// {
		// 	name: '浏览记录',
		// 	checked: false,
		// 	disabled: false
		// },
		{
			name: '收藏',
			checked: false,
			disabled: false
		},
		{
			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 selectOption = checkOption.value.filter(item => item.checked)
				const selectType = params.filter(item => selectOption.find(s =>  s.name === item.name)).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 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;
			
			.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>