|
|
|
@ -1,65 +1,122 @@ |
|
|
|
<template> |
|
|
|
<view class="box bg-fff"> |
|
|
|
<view class="size-22 color-ffb tip"> |
|
|
|
❗完善服务信息和接单状态后，才可以开始接单哦！ |
|
|
|
<view class="page bg-fff"> |
|
|
|
<view class="size-22 color-ffb flex-rowl tip"> |
|
|
|
<up-icon class="icon" name="error-circle" color="#FFBF60" size="36rpx"></up-icon> |
|
|
|
<text>完善服务信息和接单状态后，才可以开始接单哦！</text> |
|
|
|
</view> |
|
|
|
<view class="title mt24"> |
|
|
|
基本资料 |
|
|
|
<view class="info"> |
|
|
|
<view class="title mt24"> |
|
|
|
基本资料 |
|
|
|
</view> |
|
|
|
<view class="flex-colc"> |
|
|
|
<button class="btn-avatar" :plain="true" :hairline="false" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"> |
|
|
|
<view class="flex-colc"> |
|
|
|
<image class="head" :src="form.headImage" mode="widthFix"></image> |
|
|
|
<text class="size-28 color-999 mt10">点击更换头像</text> |
|
|
|
</view> |
|
|
|
</button> |
|
|
|
</view> |
|
|
|
<view class="form"> |
|
|
|
<DForm ref="baseInfoRef" :list="state.baseInfoList" @input="handleSubmit"></DForm> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="flex-colc"> |
|
|
|
<image class="head" src="@/static/images/ydd/img.png" mode="widthFix"></image> |
|
|
|
<text class="size-28 color-999 mt10">点击更换头像</text> |
|
|
|
|
|
|
|
<view class="info"> |
|
|
|
<view class="title mt24 flex-rowl"> |
|
|
|
展示信息 |
|
|
|
<text class="size-22 color-ffb fw700">(重要)</text> |
|
|
|
</view> |
|
|
|
<view class="form"> |
|
|
|
<DForm ref="displayInfoRef" :list="state.displayInfoList" @input="handleSubmit"> |
|
|
|
<!-- 服务记录 --> |
|
|
|
<template v-slot:jilu> |
|
|
|
<view class="flex-rowr" @click="jumpToServeRecord"> |
|
|
|
<text>{{ `${0}条` }}</text> |
|
|
|
<up-icon name="arrow-right" color="#999999" size="32rpx"></up-icon> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
</DForm> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<DForm :list="state.list" @submit="handleSubmit"></DForm> |
|
|
|
|
|
|
|
<view class="title mt24 flex-rowl"> |
|
|
|
展示信息 |
|
|
|
<text class="size-22 color-ffb fw700">(重要)</text> |
|
|
|
<view class="info"> |
|
|
|
<view class="title mt24 flex-rowl"> |
|
|
|
服务资料 |
|
|
|
</view> |
|
|
|
<view class="form"> |
|
|
|
<DForm ref="serveInfoRef" :list="state.serveInfoList" @input="handleSubmit"> |
|
|
|
<!-- 服务宠物类型 --> |
|
|
|
<template v-slot:type> |
|
|
|
<view class="flex-rowr" @click="openTypeSelectPopup"> |
|
|
|
<text>{{ typeDesc }}</text> |
|
|
|
<up-icon name="arrow-right" color="#999999" size="32rpx"></up-icon> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
<!-- 增值服务 --> |
|
|
|
<template v-slot:zenz> |
|
|
|
<view class="flex-rowr" @click="openServeSelectPopup"> |
|
|
|
<text>{{ serveDesc }}</text> |
|
|
|
<up-icon name="arrow-right" color="#999999" size="32rpx"></up-icon> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
</DForm> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<DForm :list="state.list1" @submit="handleSubmit"></DForm> |
|
|
|
|
|
|
|
<view class="title mt24 flex-rowl"> |
|
|
|
服务资料 |
|
|
|
<view class="size-24 color-ffb flex-rowc mt32 pb28"> |
|
|
|
伴宠师查看服务酬劳、服务时长等规则 |
|
|
|
</view> |
|
|
|
<DForm :list="state.list2" @submit="handleSubmit"></DForm> |
|
|
|
</view> |
|
|
|
<view class="size-24 color-ffb flex-rowc mt32 pb28"> |
|
|
|
伴宠师查看服务酬劳、服务时长等规则 |
|
|
|
|
|
|
|
<popupTypeSelect ref="popupTypeSelectRef" v-model="form.type" ></popupTypeSelect> |
|
|
|
|
|
|
|
<popupServeSelect ref="popupServeSelectRef" v-model="form.serve" :options="serveOptions" ></popupServeSelect> |
|
|
|
|
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup> |
|
|
|
import { ref, reactive, computed } from "vue"; |
|
|
|
import { onShow } from '@dcloudio/uni-app' |
|
|
|
import { ossUpload } from '@/utils/oss-upload/oss/index.js' |
|
|
|
|
|
|
|
import DForm from "@/components/dForm/index.vue" |
|
|
|
import { |
|
|
|
reactive |
|
|
|
} from "vue"; |
|
|
|
import popupTypeSelect from "./popupTypeSelect.vue"; |
|
|
|
import popupServeSelect from "./popupServeSelect.vue"; |
|
|
|
|
|
|
|
const form = reactive({ |
|
|
|
headImage: null, |
|
|
|
type: [], |
|
|
|
serve: [], |
|
|
|
}) |
|
|
|
|
|
|
|
const onChooseAvatar = (res) => { |
|
|
|
ossUpload(res.target.avatarUrl) |
|
|
|
.then(url => { |
|
|
|
form.headImage = url |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
const baseInfoRef = ref() |
|
|
|
const displayInfoRef = ref() |
|
|
|
const serveInfoRef = ref() |
|
|
|
|
|
|
|
const state = reactive({ |
|
|
|
list2: [{ |
|
|
|
type: "select", |
|
|
|
label: "服务宠物类型", |
|
|
|
key: "type", |
|
|
|
placeholder: "请选择", |
|
|
|
options: [{ |
|
|
|
name: "大兴区" |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "小型犬" |
|
|
|
} |
|
|
|
] |
|
|
|
baseInfoList: [{ |
|
|
|
type: "input", |
|
|
|
label: "昵称", |
|
|
|
key: "name", |
|
|
|
placeholder: "请输入", |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "input", |
|
|
|
label: "基础服务", |
|
|
|
unit: "年", |
|
|
|
key: "base", |
|
|
|
placeholder: "宠物喂养上门遛狗", |
|
|
|
label: "手机号", |
|
|
|
key: "idCard", |
|
|
|
placeholder: "请输入", |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "select", |
|
|
|
label: "增值服务", |
|
|
|
key: "zenz", |
|
|
|
label: "性别", |
|
|
|
key: "sex", |
|
|
|
placeholder: "请选择", |
|
|
|
options: [{ |
|
|
|
name: "男" |
|
|
|
@ -70,7 +127,7 @@ |
|
|
|
] |
|
|
|
} |
|
|
|
], |
|
|
|
list1: [{ |
|
|
|
displayInfoList: [{ |
|
|
|
type: "input", |
|
|
|
label: "个人简介", |
|
|
|
key: "jianjie", |
|
|
|
@ -84,7 +141,7 @@ |
|
|
|
placeholder: "请输入", |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "select", |
|
|
|
type: "custom", |
|
|
|
label: "服务记录", |
|
|
|
key: "jilu", |
|
|
|
placeholder: "请选择", |
|
|
|
@ -97,65 +154,208 @@ |
|
|
|
] |
|
|
|
} |
|
|
|
], |
|
|
|
list: [{ |
|
|
|
type: "input", |
|
|
|
label: "昵称", |
|
|
|
key: "name", |
|
|
|
placeholder: "请输入", |
|
|
|
serveInfoList: [{ |
|
|
|
type: "custom", |
|
|
|
label: "服务宠物类型", |
|
|
|
key: "type", |
|
|
|
placeholder: "请选择", |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "input", |
|
|
|
label: "手机号", |
|
|
|
key: "idCard", |
|
|
|
placeholder: "请输入", |
|
|
|
label: "基础服务", |
|
|
|
unit: "年", |
|
|
|
key: "base", |
|
|
|
placeholder: "宠物喂养上门遛狗", |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "select", |
|
|
|
label: "性别", |
|
|
|
key: "sex", |
|
|
|
type: "custom", |
|
|
|
label: "增值服务", |
|
|
|
key: "zenz", |
|
|
|
placeholder: "请选择", |
|
|
|
options: [{ |
|
|
|
name: "男" |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "女" |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
] |
|
|
|
], |
|
|
|
}) |
|
|
|
const handleSubmit = () => {} |
|
|
|
|
|
|
|
onShow(() => { |
|
|
|
// todo: fetch data and init data |
|
|
|
}) |
|
|
|
|
|
|
|
const handleSubmit = () => { |
|
|
|
// todo |
|
|
|
} |
|
|
|
|
|
|
|
const jumpToServeRecord = () => { |
|
|
|
uni.navigateTo({ |
|
|
|
url: "/otherPages/authentication/serve/record" |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
const popupTypeSelectRef = ref() |
|
|
|
const openTypeSelectPopup = () => { |
|
|
|
popupTypeSelectRef.value.open() |
|
|
|
} |
|
|
|
const typeDesc = computed(() => { |
|
|
|
const typeCodes = form.type |
|
|
|
if (!typeCodes.length) { |
|
|
|
return '请选择' |
|
|
|
} |
|
|
|
|
|
|
|
let descArr = typeCodes.reduce((arr, item) => { |
|
|
|
switch(item) { |
|
|
|
case 'cat': |
|
|
|
arr.push('猫咪') |
|
|
|
break |
|
|
|
case 'dog': |
|
|
|
arr.push('狗狗') |
|
|
|
break |
|
|
|
case 'special-pet': |
|
|
|
arr.push('异宠') |
|
|
|
break |
|
|
|
default: |
|
|
|
break |
|
|
|
} |
|
|
|
|
|
|
|
return arr |
|
|
|
}, []) |
|
|
|
|
|
|
|
return descArr.join('、') |
|
|
|
}) |
|
|
|
|
|
|
|
const popupServeSelectRef = ref() |
|
|
|
const serveOptions = reactive([ |
|
|
|
{ |
|
|
|
title: '陪玩/遛狗', |
|
|
|
desc: '外出遛狗或者陪玩，10mins/次', |
|
|
|
value: 0, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '一天多次', |
|
|
|
desc: '每额外上门一次，收取基础服务费用的80%', |
|
|
|
value: 1, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '护理', |
|
|
|
desc: '清洁宠物耳道、眼部、鼻部以及梳毛，10mins/次', |
|
|
|
value: 2, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '提前熟悉', |
|
|
|
desc: '提前上门熟悉，购买此服务支持免费更换伴宠师1次', |
|
|
|
value: 3, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '清洁', |
|
|
|
desc: '清洗砂盆或其他区域卫生，15mins/次', |
|
|
|
value: 4, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '喂药', |
|
|
|
desc: '将药品喂入宠物口中', |
|
|
|
value: 5, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '上药', |
|
|
|
desc: '将药品放入宠物水粮、或者涂抹在皮肤外表', |
|
|
|
value: 6, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '打针', |
|
|
|
desc: '兽医上门打针，自备药品', |
|
|
|
value: 7, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '在线问诊', |
|
|
|
desc: '在线问诊在职兽医健康问题', |
|
|
|
value: 8, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '线下体察', |
|
|
|
desc: '上门外表体查，给予宠物健康咨询', |
|
|
|
value: 9, |
|
|
|
}, |
|
|
|
]) |
|
|
|
const openServeSelectPopup = () => { |
|
|
|
popupServeSelectRef.value.open() |
|
|
|
} |
|
|
|
const serveDesc = computed(() => { |
|
|
|
const serveCodes = form.serve |
|
|
|
if (!serveCodes.length) { |
|
|
|
return '请选择' |
|
|
|
} |
|
|
|
|
|
|
|
let descArr = serveCodes.reduce((arr, item) => { |
|
|
|
const desc = serveOptions.find(option => option.value === item)?.title |
|
|
|
|
|
|
|
arr.push(desc) |
|
|
|
|
|
|
|
return arr |
|
|
|
}, []) |
|
|
|
|
|
|
|
return descArr.join('、') |
|
|
|
}) |
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
|
|
|
.page { |
|
|
|
padding-top: 16rpx; |
|
|
|
|
|
|
|
.tip { |
|
|
|
background-color: rgba($color: #FFBF60, $alpha: 0.16); |
|
|
|
padding: 13rpx 22rpx; |
|
|
|
margin: 0 28rpx 37rpx 28rpx; |
|
|
|
|
|
|
|
.icon { |
|
|
|
margin-right: 15rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.info { |
|
|
|
|
|
|
|
& + & { |
|
|
|
margin-top: 50rpx; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.head { |
|
|
|
width: 165rpx; |
|
|
|
height: auto; |
|
|
|
margin-top: 28rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.btn-avatar { |
|
|
|
border: none; |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.title { |
|
|
|
font-size: 30rpx; |
|
|
|
font-weight: 700; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
padding: 0 40rpx; |
|
|
|
|
|
|
|
&:before { |
|
|
|
display: block; |
|
|
|
display: inline-block; |
|
|
|
content: ""; |
|
|
|
width: 10rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
height: 34rpx; |
|
|
|
border-radius: 5rpx; |
|
|
|
height: 33rpx; |
|
|
|
background-color: #FFBF60; |
|
|
|
margin-right: 15rpx; |
|
|
|
margin-right: 7rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.box { |
|
|
|
padding: 24rpx 36rpx; |
|
|
|
.form { |
|
|
|
padding: 0 22rpx; |
|
|
|
|
|
|
|
.tip { |
|
|
|
background-color: rgb(255, 245, 229); |
|
|
|
padding: 15rpx; |
|
|
|
:deep(.form-item){ |
|
|
|
padding-left: 24rpx; |
|
|
|
padding-right: 30rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
