You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
2.9 KiB
127 lines
2.9 KiB
<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>
|