pet-front/otherPages/authentication/serve/upload.vue

<template>
	<view class="tips color-ffb size-22">
		注意:这段内容将会在您的喂养员个人主页，做为"服务案例”展示，并开放给其他铲屎官查看，请认真编辑哟！
	</view>
	<view class="li bg-fff">
		<view class="title">
			服务类型
			<text class="size-22 color-999 ml10">可多选</text>
		</view>
		<up-checkbox-group v-model="state.checkboxValue" placement="column" @change="checkboxChange">
			<view class="flex-rowl mt40">
				<up-checkbox shape="circle" class="mr10" :customStyle="{marginBottom: '8px'}"
					v-for="(item, index) in checkboxList1" :key="index" :label="item.name" :name="item.name">
				</up-checkbox>
			</view>
		</up-checkbox-group>
	</view>

	<view class="li bg-fff">
		<view class="title">
			服务时间
		</view>
		<view class="flex-between mt16">
			<text class="size-28 color-999">选择服务时间</text>
			<view class="flex-rowr">
				<input disabled type="text" placeholder="请选择" class="t-r size-28 mr10" />
				<image src="@/static/images/ydd/bottom.png" mode="widthFix" style="width: 30rpx;"></image>
			</view>
		</view>
	</view>

	<view class="li bg-fff">
		<view class="title">
			服务地点
		</view>
		<view class="flex-between mt16">
			<text class="size-28 color-999">选择服务地点</text>
			<view class="flex-rowr">
				<input disabled type="text" placeholder="请选择" class="t-r size-28 mr10" />
				<image src="@/static/images/ydd/bottom.png" mode="widthFix" style="width: 30rpx;"></image>
			</view>
		</view>
	</view>

	<view class="li bg-fff">
		<view class="title">
			文字记录
		</view>
		<textarea class="text" placeholder="请输入文字记录，可简单描述服务过程中发生的趣事，或夸奖一下服务宠物吧，10-100字"></textarea>
	</view>

	<view class="li bg-fff">
		<view class="title">
			图片记录
		</view>
		<view class="size-28 color-999 mt16">
			请选择具有代表性的2-3张服务宠物图片，服务过程图片或视频截图，让铲屎官感受到您对毛孩子的爱吧
		</view>
	</view>

	<view class="footer-box">
		<view class="btn">
			立即上传
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';


	const state = reactive({
		checkboxValue: []
	})
	const checkboxList1 = [{
			name: '猫咪喂养',
		},
		{
			name: '狗狗喂养',
		},
		{
			name: '异宠喂养',
		},
	]

	const checkboxChange = () => {}
</script>

<style lang="scss" scoped>
	.text {
		padding: 16rpx;
		background-color: #F3F3F3;
		font-size: 28rpx;
		margin-top: 16rpx;
		border-radius: 20rpx;
	}

	.tips {
		padding: 8rpx 16rpx;
		background-color: rgb(255, 250, 242);
	}

	.li {
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 24rpx 36rpx;
	}

	.title {
		font-size: 30rpx;
		font-weight: 700;
		display: flex;
		align-items: center;

		&:before {
			display: block;
			content: "";
			width: 10rpx;
			border-radius: 10rpx;
			height: 34rpx;
			background-color: #FFBF60;
			margin-right: 15rpx;
		}
	}
</style>