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

<template>
	<view class="container">
		<view class="desc-box">
			请您勾选需要删除的内容，本小程序将在15个工作日内处理完毕您的申请
		</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'
	
	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) {
		 	}
		})
	}
</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>