115 lines
4.5 KiB
Vue
115 lines
4.5 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<view v-if="orderType=='feed'" class="feed">
|
||
|
|
<wd-cell title="请选择宠物数量"></wd-cell>
|
||
|
|
<view class="tags w-full grid grid-cols-5"
|
||
|
|
style="height: 100rpx; gap: 20rpx;padding: 20rpx;box-sizing: border-box">
|
||
|
|
<wd-tag
|
||
|
|
class="flex flex-center"
|
||
|
|
style="border-radius: 20rpx;font-size: 30rpx;outline: 2rpx #f0f0f0 solid "
|
||
|
|
v-for="item in 5"
|
||
|
|
:bg-color="selectedPetNum == item ? '#FCCB30' : '#fff'"
|
||
|
|
color="black"
|
||
|
|
:key="item"
|
||
|
|
@click="selectedPetNum = item"
|
||
|
|
>{{ item }}只
|
||
|
|
</wd-tag>
|
||
|
|
</view>
|
||
|
|
<wd-cell title="喂宠时间"></wd-cell>
|
||
|
|
<view class="tags w-full grid grid-cols-5"
|
||
|
|
style="height: 100rpx; gap: 20rpx;padding: 20rpx;box-sizing: border-box">
|
||
|
|
<wd-tag
|
||
|
|
class="flex flex-center"
|
||
|
|
style="border-radius: 20rpx;font-size: 30rpx;outline: 2rpx #f0f0f0 solid "
|
||
|
|
v-for="item in [30,60]"
|
||
|
|
:bg-color="selectedFeedTime == item ? '#FCCB30' : '#fff'"
|
||
|
|
color="black"
|
||
|
|
:key="item"
|
||
|
|
@click="selectedFeedTime = item"
|
||
|
|
>{{ item }}分钟
|
||
|
|
</wd-tag>
|
||
|
|
</view>
|
||
|
|
<wd-cell title="请选择服务时间"></wd-cell>
|
||
|
|
<wd-datetime-picker style="border: 2rpx #f0f0f0 solid;margin: 20rpx;" v-model="serviceTime"/>
|
||
|
|
</view>
|
||
|
|
<!-- <view v-if="orderType=='boarding'">-->
|
||
|
|
<view>
|
||
|
|
|
||
|
|
<wd-cell title="请选择宠物"></wd-cell>
|
||
|
|
<view class="flex gap-4" style="padding: 20rpx;">
|
||
|
|
<view class="add flex-center"
|
||
|
|
style="width: 120rpx;aspect-ratio: 1/1;background-color:#FCCB30;border-radius: 20rpx;">
|
||
|
|
<uni-icons type="plusempty" size="30" color="#777"></uni-icons>
|
||
|
|
</view>
|
||
|
|
<view class="pet-card flex-center gap-2"
|
||
|
|
style="border: 2rpx solid #e5e5e5;max-width: 300rpx;max-height: 120rpx;font-size: 25rpx;border-radius: 20rpx;padding: 25rpx"
|
||
|
|
v-for="item in 2">
|
||
|
|
<view class="avatar" style="height: 80rpx;width: 80rpx;">
|
||
|
|
<image
|
||
|
|
src="http://116.204.119.171:9000/linghe/static/home/cwpb.png"
|
||
|
|
style="width: 100%;height: 100%;border-radius: 50%;" mode="scaleToFill"></image>
|
||
|
|
</view>
|
||
|
|
<view class="info flex-column flex">
|
||
|
|
<text style="font-size: 28rpx;font-weight: bold;">宠物名称</text>
|
||
|
|
<text style="font-size: 25rpx;color: #d1d1d1;">宠物品种</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<wd-cell title="选择寄养时间" value="共五天" is-link></wd-cell>
|
||
|
|
<view class="flex justify-around">
|
||
|
|
<view :style="{borderLeft:index == 1 ? '2rpx solid #e5e5e5':'',width:'50%'}"
|
||
|
|
v-for="(i,index) in [['2021-5-28','9:00'],['2021-6-2','9:00']]">
|
||
|
|
<view style="text-align:center;">{{ i[0] }}</view>
|
||
|
|
<view style="text-align:center;">{{ i[1] }}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<wd-cell title="联系人"></wd-cell>
|
||
|
|
<view style="margin: 20rpx;padding: 20rpx;border: 2rpx solid #f0f0f0;">
|
||
|
|
<wd-input v-model="hostNickName" no-border placeholder="请输入联系人姓名"/>
|
||
|
|
</view>
|
||
|
|
<wd-cell title="联系电话"></wd-cell>
|
||
|
|
<view style="margin: 20rpx;padding: 20rpx;border: 2rpx solid #f0f0f0;">
|
||
|
|
<wd-input v-model="phoneNumber" no-border placeholder="请输入联系电话"/>
|
||
|
|
</view>
|
||
|
|
<wd-cell title="备注"></wd-cell>
|
||
|
|
<view style="margin: 20rpx;padding: 20rpx;border: 2rpx solid #f0f0f0;">
|
||
|
|
<wd-input v-model="remarks" no-border placeholder="请输入备注信息"/>
|
||
|
|
</view>
|
||
|
|
<view class="w-full flex justify-between" style="border-top: 2rpx solid #f0f0f0;padding: 20rpx">
|
||
|
|
<view class="left">
|
||
|
|
<text color="red" style="font-size: 20rpx">￥</text>
|
||
|
|
<text color="red" style="font-size: 50rpx">
|
||
|
|
{{ orderType == 'feed' ? 30 : 50 }}
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
<view class="right"
|
||
|
|
style="background-color:#FCCB30;padding: 20rpx 30rpx;border-radius: 30rpx;font-size: 20rpx;font-weight: bold;">
|
||
|
|
<text>立即下单</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import {imgUrl} from "@/utils/commUtils";
|
||
|
|
|
||
|
|
const orderType = ref("")
|
||
|
|
onLoad((options) => {
|
||
|
|
orderType.value = options.type
|
||
|
|
})
|
||
|
|
const selectedPetNum = ref(1)
|
||
|
|
const selectedFeedTime = ref(30)
|
||
|
|
const serviceTime = ref("")
|
||
|
|
const hostNickName = ref("")
|
||
|
|
const phoneNumber = ref("")
|
||
|
|
const remarks = ref("")
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
view {
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
</style>
|