Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
60c74ea9d4 |
@ -24,7 +24,7 @@ onLaunch(() => {
|
||||
})
|
||||
|
||||
// 当应用进入前台时继续轮询服务
|
||||
onShow(() => {
|
||||
onShow((options) => {
|
||||
console.log('应用显示出来了...')
|
||||
notificationService.startPollingUnreadMessages()
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view @click="toServiceDetail" class="pet-sitter-card bg-white p-4 rounded-lg shadow flex">
|
||||
<!-- 左侧头像和认证标识 -->
|
||||
<!-- {{ petSitter}}-->
|
||||
<view class="flex-shrink-0 mr-4 relative">
|
||||
<image :src="imgUrl(petSitter.url)" class="w-16 h-16 object-cover rounded-full"></image>
|
||||
<view class="absolute top-0 left-0 bg-[#ffc107] text-white rounded-full text-xs px-2 py-1">
|
||||
|
||||
BIN
src/components/icon/Housekeeping.png
Normal file
BIN
src/components/icon/Housekeeping.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 946 B |
BIN
src/components/icon/x_快递员.png
Normal file
BIN
src/components/icon/x_快递员.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
src/components/icon/上门回收管理.png
Normal file
BIN
src/components/icon/上门回收管理.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
src/components/icon/健康指标 (1).png
Normal file
BIN
src/components/icon/健康指标 (1).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 967 B |
BIN
src/components/icon/宠物.png
Normal file
BIN
src/components/icon/宠物.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/components/icon/清除.png
Normal file
BIN
src/components/icon/清除.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/components/icon/环境应急救援队 (1).png
Normal file
BIN
src/components/icon/环境应急救援队 (1).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 982 B |
BIN
src/components/icon/饮用水.png
Normal file
BIN
src/components/icon/饮用水.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 861 B |
@ -163,7 +163,7 @@
|
||||
},
|
||||
"quickapp": {},
|
||||
"mp-weixin": {
|
||||
"appid": "wxf2c6d4b7361366b4",
|
||||
"appid": "wxfcaf84cb7965fcae",
|
||||
"setting": {
|
||||
"urlCheck": false,
|
||||
"minified": true
|
||||
|
||||
114
src/modules/pet/createOrder/createOrder.vue
Normal file
114
src/modules/pet/createOrder/createOrder.vue
Normal file
@ -0,0 +1,114 @@
|
||||
<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>
|
||||
@ -36,6 +36,7 @@ import { imgUrl } from '@/utils/commUtils'
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<route lang="json5">
|
||||
{
|
||||
style: {
|
||||
navigationBarTitleText: "手机号登录",
|
||||
navigationStyle: "custom",
|
||||
navigationBarTitleText: '手机号登录',
|
||||
navigationStyle: 'custom',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
@ -10,20 +10,11 @@
|
||||
<template>
|
||||
<TopBar />
|
||||
<view class="login-phone">
|
||||
<image
|
||||
class="background"
|
||||
:src="imgUrl('@/static/login/login.png')"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<image class="background" :src="imgUrl('@/static/login/login.png')" mode="aspectFill"></image>
|
||||
<view class="content">
|
||||
<view class="input-container">
|
||||
<view class="">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
placeholder="请输入手机号"
|
||||
v-model="phoneNumber"
|
||||
/>
|
||||
<input class="input" type="text" placeholder="请输入手机号" v-model="phoneNumber" />
|
||||
</view>
|
||||
<view class="verification-container mt-[20px]">
|
||||
<input
|
||||
@ -33,7 +24,7 @@
|
||||
v-model="code"
|
||||
/>
|
||||
<button class="get-code-button" @click="sendCode" :disabled="countdown > 0">
|
||||
{{ countdown > 0 ? `${countdown}s后重新获取` : "获取验证码" }}
|
||||
{{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
@ -43,95 +34,91 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import { httpGet, httpPost } from "@/utils/http";
|
||||
import { useUserStore } from "@/store/user";
|
||||
import TopBar from "@/components/TopBar.vue";
|
||||
import { imgUrl, toast, toPath } from "@/utils/commUtils";
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { httpGet, httpPost } from '@/utils/http'
|
||||
import { useUserStore } from '@/store/user'
|
||||
import TopBar from '@/components/TopBar.vue'
|
||||
import { imgUrl, toast, toPath } from '@/utils/commUtils'
|
||||
|
||||
const userStore = useUserStore();
|
||||
const userStore = useUserStore()
|
||||
|
||||
const phoneNumber = ref("");
|
||||
const code = ref("");
|
||||
const countdown = ref(0);
|
||||
let timer = null;
|
||||
const phoneNumber = ref('')
|
||||
const code = ref('')
|
||||
const countdown = ref(0)
|
||||
let timer = null
|
||||
|
||||
const sendCode = async () => {
|
||||
if (countdown.value === 0) {
|
||||
if (!phoneNumber.value) {
|
||||
toast("请输入手机号");
|
||||
return;
|
||||
toast('请输入手机号')
|
||||
return
|
||||
}
|
||||
const res = await httpGet("/public/getCode", { phone: phoneNumber.value });
|
||||
countdown.value = 60;
|
||||
const res = await httpGet('/public/getCode', { phone: phoneNumber.value })
|
||||
countdown.value = 60
|
||||
if (res.code === 200) {
|
||||
toast(res.message);
|
||||
toast(res.message)
|
||||
} else {
|
||||
toast(res.message);
|
||||
toast(res.message)
|
||||
}
|
||||
timer = setInterval(() => {
|
||||
countdown.value -= 1;
|
||||
countdown.value -= 1
|
||||
if (countdown.value === 0) {
|
||||
clearInterval(timer);
|
||||
clearInterval(timer)
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
};
|
||||
|
||||
const login = async () => {
|
||||
if (!phoneNumber.value) {
|
||||
uni.showToast({
|
||||
title: "请输入手机号",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
title: '请输入手机号',
|
||||
icon: 'none',
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!code.value) {
|
||||
uni.showToast({
|
||||
title: "请输入验证码",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
title: '请输入验证码',
|
||||
icon: 'none',
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
const res = await httpPost(
|
||||
"/public/login",
|
||||
{},
|
||||
{ phone: phoneNumber.value, code: code.value }
|
||||
);
|
||||
const res = await httpPost('/public/login', {}, { phone: phoneNumber.value, code: code.value })
|
||||
if (res.code === 200) {
|
||||
toast(res.message);
|
||||
const data = res.data;
|
||||
toast(res.message)
|
||||
const data = res.data
|
||||
userStore.setUserInfo({
|
||||
id: data.userId,
|
||||
token: data.accessToken,
|
||||
expiresTime: data.expiresTime,
|
||||
refreshToken: data.refreshToken,
|
||||
});
|
||||
})
|
||||
|
||||
const userRes = await httpGet("/user/userinfo");
|
||||
const userRes = await httpGet('/user/userinfo')
|
||||
if (userRes.code === 200) {
|
||||
userStore.setUserInfo(userRes.data);
|
||||
toPath("/");
|
||||
userStore.setUserInfo(userRes.data)
|
||||
toPath('/')
|
||||
} else {
|
||||
toast(userRes.message || "登录失败请重新登录！");
|
||||
toast(userRes.message || '登录失败请重新登录！')
|
||||
}
|
||||
} else {
|
||||
toast(res.message || "登录失败请重新登录！");
|
||||
toast(res.message || '登录失败请重新登录！')
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
clearInterval(timer)
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
clearInterval(timer)
|
||||
}
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -63,6 +63,7 @@ const toPath = (path) => {
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
box-sizing: border-box;
|
||||
height: 100vh;
|
||||
padding: 16px;
|
||||
background-color: #f8f8f8;
|
||||
|
||||
@ -86,6 +86,7 @@ const toPath = (path) => {
|
||||
/* 在这里添加任何自定义的样式 */
|
||||
.container {
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
button {
|
||||
|
||||
@ -1,296 +1,228 @@
|
||||
<route lang="json5" type="page">
|
||||
<route lang="json5">
|
||||
{
|
||||
layout: 'default',
|
||||
style: {
|
||||
navigationBarTitleText: '宠物陪伴',
|
||||
navigationBarTitleText: '选择服务',
|
||||
navigationBarBackgroundColor: '#ffff',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="hot">
|
||||
<view>
|
||||
<view class="container">
|
||||
<view style="position: fixed; top: 0; z-index: 19">
|
||||
<view style="position: relative">
|
||||
<view
|
||||
style="
|
||||
background: #761ee9;
|
||||
width: 100vw;
|
||||
height: 230rpx;
|
||||
border-radius: 0 0 28rpx 28rpx;
|
||||
padding-top: 280px;
|
||||
"
|
||||
></view>
|
||||
<view style="background: #f6f7f9; width: 250vw; height: 60rpx"></view>
|
||||
<view class="swiperImg" style="position: absolute; top: 180px; width: 100vw">
|
||||
<view style="padding: 0 30rpx">
|
||||
<swiper
|
||||
:autoplay="autoplay"
|
||||
:duration="duration"
|
||||
:indicator-dots="indicatorDots"
|
||||
:interval="interval"
|
||||
circular
|
||||
class="swiper"
|
||||
indicator-active-color="rgba(0, 0, 0, 0.3)"
|
||||
indicator-color="rgba(255, 255, 255, 0.5)"
|
||||
style="height: 300rpx"
|
||||
>
|
||||
<swiper-item v-for="(item, index) in swiperList" :key="index">
|
||||
<image
|
||||
:src="item.url"
|
||||
style="height: 100%; width: 100%; border-radius: 30rpx"
|
||||
></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="bg-[#F5F5F5] min-h-screen p-4">
|
||||
<!-- 过滤栏 -->
|
||||
<view class="flex justify-around bg-white p-2 rounded-lg shadow mb-4">
|
||||
<view class="flex items-center" @click="sortByDistance">
|
||||
<text class="text-gray-600">离我最近</text>
|
||||
</view>
|
||||
<view class="flex items-center" @click="sortByPrice">
|
||||
<text class="text-gray-600">价格</text>
|
||||
<wd-icon :name="priceSortIcon" size="20" class="ml-2 text-gray-400"></wd-icon>
|
||||
</view>
|
||||
<view class="flex items-center" @click="sortByLatest">
|
||||
<text class="text-gray-600">新发布</text>
|
||||
</view>
|
||||
<view class="flex items-center">
|
||||
<text class="text-gray-600">区域</text>
|
||||
<wd-icon name="arrow-down" size="20" class="ml-2 text-gray-400"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="p-5 bg-gray-100 h-screen" style="margin-top: 480rpx">
|
||||
<!-- 表单区域 -->
|
||||
<view class="mt-5 bg-white p-5 rounded-lg shadow" style="padding: 0">
|
||||
<!-- 导航栏 -->
|
||||
<view class="mb-4 navigation">
|
||||
<text class="text-gray-800 card_font">
|
||||
<image
|
||||
:src="imgUrl('@/static/service/1726299427263.png')"
|
||||
mode="scaleToFill"
|
||||
class="card_accompany"
|
||||
/>
|
||||
先行赔付
|
||||
</text>
|
||||
<text class="text-gray-800 card_font">
|
||||
<image
|
||||
:src="imgUrl('@/static/service/1726299704300.png')"
|
||||
mode="scaleToFill"
|
||||
class="card_accompany"
|
||||
/>
|
||||
喂水喂食
|
||||
</text>
|
||||
<text class="text-gray-800 card_font">
|
||||
<image
|
||||
:src="imgUrl('@/static/service/1726299755235.png')"
|
||||
mode="scaleToFill"
|
||||
class="card_accompany"
|
||||
/>
|
||||
全程监管
|
||||
</text>
|
||||
<text class="text-gray-800 card_font">
|
||||
<image
|
||||
:src="imgUrl('@/static/service/1726299776227.png')"
|
||||
mode="scaleToFill"
|
||||
class="card_accompany"
|
||||
/>
|
||||
安全保障
|
||||
</text>
|
||||
</view>
|
||||
<view class="position">
|
||||
<div class="specific_position">点击此处定位具体位置</div>
|
||||
<image
|
||||
:src="imgUrl('@/static/service/1726370894136.png')"
|
||||
mode="scaleToFill"
|
||||
class="specific_img"
|
||||
/>
|
||||
<div class="get_address">
|
||||
<div
|
||||
style="
|
||||
background-color: #9093ff;
|
||||
border-radius: 10px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-left: 10px;
|
||||
"
|
||||
></div>
|
||||
<input placeholder="请输入上车地址" v-model="petName" class="address_input" />
|
||||
<image
|
||||
:src="imgUrl('@/static/service/1726383571208.png')"
|
||||
mode="scaleToFill"
|
||||
style="width: 20px; height: 20px"
|
||||
/>
|
||||
</div>
|
||||
<div class="get_address">
|
||||
<div
|
||||
style="
|
||||
background-color: #ffd27d;
|
||||
border-radius: 10px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-left: 10px;
|
||||
"
|
||||
></div>
|
||||
<input placeholder="请输入宠物到达地址" v-model="petName" class="address_input" />
|
||||
<image
|
||||
:src="imgUrl('@/static/service/1726383534059.png')"
|
||||
mode="scaleToFill"
|
||||
style="width: 20px; height: 20px"
|
||||
/>
|
||||
</div>
|
||||
<div class="get_phone">
|
||||
<image
|
||||
:src="imgUrl('@/static/service/1726383956983.png')"
|
||||
mode="scaleToFill"
|
||||
style="width: 20px; height: 20px"
|
||||
/>
|
||||
<input placeholder="请输入下单人电话" v-model="petName" class="address_input" />
|
||||
<image
|
||||
:src="imgUrl('@/static/service/1726383571208.png')"
|
||||
mode="scaleToFill"
|
||||
style="width: 20px; height: 20px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button class="get_quote">免费获取报价</button>
|
||||
<!-- 服务选择 -->
|
||||
<view class="mt-4">
|
||||
<view class="flex mt-2 space-x-4 overflow-x-auto">
|
||||
<view
|
||||
v-for="serviceType in serviceTypes"
|
||||
:key="serviceType.name"
|
||||
class="flex flex-col items-center"
|
||||
@click="filterByService(serviceType.label)"
|
||||
>
|
||||
<view
|
||||
:class="[
|
||||
'w-16 h-16 rounded-full flex items-center justify-center',
|
||||
selectedService === serviceType.name ? 'bg-[#ffc107]' : 'bg-gray-200',
|
||||
]"
|
||||
>
|
||||
<wd-icon
|
||||
style="width: 36px; height: 36px"
|
||||
:name="imgUrl(serviceType.icon)"
|
||||
:size="48"
|
||||
:class="selectedService === serviceType.label ? 'text-white' : 'text-gray-500'"
|
||||
></wd-icon>
|
||||
</view>
|
||||
<text :class="selectedService === serviceType.label ? 'text-[#ffc107]' : 'text-gray-500'">
|
||||
{{ serviceType.label }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-5 bg-white p-5 rounded-lg shadow" style="padding: 0">
|
||||
<div style="display: flex; align-items: center; flex-direction: column; padding: 20px">
|
||||
<image
|
||||
:src="imgUrl('@/static/service/1726389632384.png')"
|
||||
mode="scaleToFill"
|
||||
style="height: 80rpx; padding-bottom: 10px; width: 70%"
|
||||
/>
|
||||
<image
|
||||
:src="imgUrl('@/static/service/1726389664958.png')"
|
||||
mode="scaleToFill"
|
||||
style="height: 100rpx"
|
||||
/>
|
||||
</div>
|
||||
</view>
|
||||
<view class="mt-5 bg-white p-5 rounded-lg shadow" style="padding: 0">
|
||||
<div style="display: flex; align-items: center; flex-direction: column; padding: 20px">
|
||||
<image
|
||||
:src="imgUrl('@/static/service/1726403986495.png')"
|
||||
mode="scaleToFill"
|
||||
style="height: 80rpx; padding-bottom: 10px; width: 70%"
|
||||
/>
|
||||
<image
|
||||
:src="imgUrl('@/static/service/1726404642077.png')"
|
||||
mode="scaleToFill"
|
||||
style="height: 550rpx"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 推荐的宠物托管师 -->
|
||||
<view v-if="petSitters.length > 0" class="mt-4">
|
||||
<text class="text-lg font-bold">选择宠托师</text>
|
||||
<view v-for="(petSitter, index) in petSitters" :key="index" class="mt-4">
|
||||
<PetSitterCard :petSitter="petSitter"/>
|
||||
</view>
|
||||
<view class="mt-5 bg-white p-5 rounded-lg shadow" style="padding: 0">
|
||||
<div style="display: flex; align-items: center; flex-direction: column; padding: 20px">
|
||||
<image
|
||||
:src="imgUrl('@/static/service/1726405469570.png')"
|
||||
mode="scaleToFill"
|
||||
style="height: 80rpx; padding-bottom: 10px; width: 70%"
|
||||
/>
|
||||
</div>
|
||||
<wd-loadmore
|
||||
:loading="loading"
|
||||
:finished="noMoreData"
|
||||
@load="loadMore"
|
||||
finished-text="没有更多数据了"
|
||||
></wd-loadmore>
|
||||
</view>
|
||||
<view class="pt-[80px]" v-else>
|
||||
<EmptyState type="search" message="暂无相关服务"/>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="js" setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { imgUrl, toPath } from '@/utils/commUtils'
|
||||
// 轮播图
|
||||
const swiperList = [
|
||||
{
|
||||
url: 'C:/Users/Administrator/Desktop/picture(2)/100-1.png',
|
||||
},
|
||||
{
|
||||
url: 'C:/Users/Administrator/Desktop/picture(2)/100-1.png',
|
||||
},
|
||||
]
|
||||
const status = 'loadmore'
|
||||
const indicatorDots = true
|
||||
const autoplay = true
|
||||
const interval = 5000
|
||||
const duration = 500
|
||||
const screenInfoList = []
|
||||
const locationInfo = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
lat: 39.908868,
|
||||
lon: 116.404424,
|
||||
labelList: [1, 2, 3],
|
||||
}
|
||||
const total = 0
|
||||
const scrollTop = 0
|
||||
<script setup>
|
||||
import {ref} from 'vue'
|
||||
import PetSitterCard from '@/components/PetSitterCard.vue'
|
||||
import {httpPost} from '@/utils/http'
|
||||
import {imgUrl} from '@/utils/commUtils'
|
||||
import EmptyState from '@/components/EmptyState.vue'
|
||||
|
||||
const props = defineProps({
|
||||
tabbar: {
|
||||
type: [String, Boolean],
|
||||
default: '',
|
||||
const searchTerm = ref('')
|
||||
const priceSortAsc = ref(true)
|
||||
const petSitters = ref([])
|
||||
const page = ref(1)
|
||||
const loading = ref(false)
|
||||
const noMoreData = ref(false)
|
||||
const disabled = ref(true)
|
||||
const type = ref('danger')
|
||||
const serviceTypes = ref([
|
||||
{name: 'training', label: '宠物托运', icon: '@/static/home/mr.png'},
|
||||
{name: 'canteen', label: '接送洗护', icon: '@/static/home/yl.png'},
|
||||
{name: 'cleaning', label: '医疗陪护', icon: '@/static/home/yl.png'}
|
||||
])
|
||||
//医疗陪护 接送洗护 宠物托运
|
||||
|
||||
const selectedService = ref(serviceTypes.value[0].label)
|
||||
|
||||
// 排序字段和顺序
|
||||
const sortField = ref('')
|
||||
const sortOrder = ref('')
|
||||
|
||||
// 获取宠托师数据
|
||||
const fetchPetSitters = async () => {
|
||||
if (loading.value) return
|
||||
loading.value = true
|
||||
|
||||
try {
|
||||
const response = await httpPost(
|
||||
'/personal-service/list',
|
||||
{
|
||||
current: page.value,
|
||||
size: 10,
|
||||
data: {
|
||||
serviceName: searchTerm.value,
|
||||
type: selectedService.value,
|
||||
},
|
||||
},
|
||||
{
|
||||
sortField: sortField.value,
|
||||
sortOrder: sortOrder.value,
|
||||
},
|
||||
)
|
||||
if (response.code === 200) {
|
||||
if (page.value === 1) {
|
||||
petSitters.value = response.records
|
||||
} else {
|
||||
petSitters.value = [...petSitters.value, ...response.records]
|
||||
}
|
||||
|
||||
if (response.records.length < 10) {
|
||||
noMoreData.value = true
|
||||
}
|
||||
} else {
|
||||
console.error('获取宠托师数据失败', response.message)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取宠托师数据失败', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const loadMore = async () => {
|
||||
if (!noMoreData.value) {
|
||||
page.value += 1
|
||||
fetchPetSitters()
|
||||
}
|
||||
}
|
||||
|
||||
const sortByPrice = async () => {
|
||||
priceSortAsc.value = !priceSortAsc.value
|
||||
sortField.value = 'price'
|
||||
sortOrder.value = priceSortAsc.value ? 'asc' : 'desc'
|
||||
page.value = 1
|
||||
noMoreData.value = false
|
||||
await fetchPetSitters()
|
||||
}
|
||||
|
||||
const sortByLatest = async () => {
|
||||
sortField.value = 'createTime'
|
||||
sortOrder.value = 'desc'
|
||||
page.value = 1
|
||||
noMoreData.value = false
|
||||
await fetchPetSitters()
|
||||
}
|
||||
|
||||
const sortByDistance = () => {
|
||||
// 按距离排序的逻辑
|
||||
}
|
||||
|
||||
const filterByService = async (serviceName) => {
|
||||
selectedService.value = serviceName
|
||||
page.value = 1
|
||||
noMoreData.value = false
|
||||
fetchPetSitters()
|
||||
}
|
||||
|
||||
const onSearch = () => {
|
||||
page.value = 1
|
||||
noMoreData.value = false
|
||||
fetchPetSitters()
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
fetchPetSitters()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.navigation {
|
||||
border-radius: 10px 10px 0 0;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #ffefeb;
|
||||
<style scoped>
|
||||
page {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.card_accompany {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-left: 18rpx;
|
||||
.bg-gray-100 {
|
||||
@apply bg-gray-100;
|
||||
}
|
||||
|
||||
.card_font {
|
||||
font-size: 13px;
|
||||
color: #ff9a81;
|
||||
.bg-gray-200 {
|
||||
@apply bg-gray-200;
|
||||
}
|
||||
|
||||
.position {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fa3534;
|
||||
.text-gray-400 {
|
||||
@apply text-gray-400;
|
||||
}
|
||||
|
||||
.specific_img {
|
||||
margin: 7px 0;
|
||||
height: 20px;
|
||||
width: 30px;
|
||||
.text-gray-500 {
|
||||
@apply text-gray-500;
|
||||
}
|
||||
|
||||
.specific_position {
|
||||
font-weight: bold;
|
||||
|
||||
.rounded-full {
|
||||
@apply rounded-full;
|
||||
}
|
||||
|
||||
.get_address {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #9093ff;
|
||||
margin-bottom: 40rpx;
|
||||
width: 90%;
|
||||
height: 130rpx;
|
||||
// padding: 15px 80px 15px 80px;
|
||||
border-radius: 10px;
|
||||
.shadow {
|
||||
@apply shadow;
|
||||
}
|
||||
|
||||
.reach_address {
|
||||
border: 1px solid #9093ff;
|
||||
}
|
||||
|
||||
.address_input {
|
||||
margin-left: 15px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.get_phone {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 90%;
|
||||
height: 100rpx;
|
||||
border-bottom: 1px solid #f4f6f8;
|
||||
}
|
||||
|
||||
.get_quote {
|
||||
margin: 25px 0 20px 0;
|
||||
background-color: #9093ff;
|
||||
color: #f4f6f8;
|
||||
width: 90%;
|
||||
.space-x-4 {
|
||||
@apply space-x-4;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,113 +1,212 @@
|
||||
<route lang="json5">
|
||||
{
|
||||
style: {
|
||||
navigationBarTitleText: '宠托师服务详情',
|
||||
navigationStyle: 'custom',
|
||||
navigationBarTitleText: '服务详情',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<TopBar />
|
||||
<view class="bg-[#F5F5F5] h-[135vh]">
|
||||
<!-- 顶部背景和头像 -->
|
||||
<view class="relative">
|
||||
<image :src="serviceData.bgUrl" class="w-full h-40 object-cover" mode="widthFix"></image>
|
||||
<view class="absolute left-4 bottom-[-20px]">
|
||||
<!-- <TopBar />-->
|
||||
<view class="service-image-container">
|
||||
<image :src="serviceData.userAvatar" class="service-image" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<!-- 宠托师信息 -->
|
||||
<view class="info">
|
||||
<view class="info-name">{{ serviceData.serviceName }}</view>
|
||||
<view class="tags">
|
||||
<text class="tag">认证{{ serviceData.certificationTime }}</text>
|
||||
<text class="tag">服务过{{ serviceData.serviceNumber }}次</text>
|
||||
</view>
|
||||
|
||||
<view class="address">
|
||||
<wd-icon name="location" size="20" class="text-[#ffc107]"></wd-icon>
|
||||
<view class="left">
|
||||
|
||||
<text class="ml-2 text-gray-600">{{ serviceData.address }}</text>
|
||||
</view>
|
||||
<view class="right">
|
||||
<text>距离{{ distance }}km</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="description">
|
||||
<text class="description-text">
|
||||
从事宠物行业四年多，因为热爱而选择，我会不懈努力提升自己，为自己喜爱的宠物行业风险热血青春，为可爱的毛孩子们提供更加专业，更加安全的服务。
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<wd-cell title="喂猫服务费" value="服务详情" is-link replace></wd-cell>
|
||||
<view class="service shadow-radius">
|
||||
<view style="display: flex;justify-content: center;gap: 10rpx" v-for="(serviceInfo,index) in serviceInfos"
|
||||
:key="index">
|
||||
<view style="width: 33rpx;height: 33rpx">
|
||||
<image class="w-full h-full" mode="scaleToFill" :src="serviceInfo[1]"></image>
|
||||
</view>
|
||||
<view>{{ serviceInfo[0] }}</view>
|
||||
</view>
|
||||
<view class="font-bold" style="margin-left: 30rpx;color:red;">￥{{ serviceData.price }}/次</view>
|
||||
</view>
|
||||
<wd-cell title="其他费用" value="服务详情" is-link replace></wd-cell>
|
||||
<view class="other-cost-container" style="display: grid;grid-template-columns: 1fr 1fr;gap: 20rpx;">
|
||||
<view class="other-cost">
|
||||
<view style="width: 100rpx;height: 100rpx;">
|
||||
<image class="w-full h-full" mode="scaleToFill" :src="huishou"></image>
|
||||
</view>
|
||||
<view class="other-description">
|
||||
<view>基础上门费</view>
|
||||
<view>1km以内
|
||||
<text class="price text-bold" color="red">15</text>
|
||||
元
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="other-cost">
|
||||
<view style="width: 100rpx;height: 100rpx;">
|
||||
<image class="w-full h-full" mode="scaleToFill" :src="kd"></image>
|
||||
</view>
|
||||
<view class="other-description">
|
||||
<view>每公里加价</view>
|
||||
<view>每多1km加
|
||||
<text class="price text-bold" color="red">10</text>
|
||||
元
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<wd-cell title="用户评价" value="查看全部" is-link replace></wd-cell>
|
||||
<view class="evaluation d-card">
|
||||
<view class="evaluation-list">
|
||||
<view class="evaluation-item">
|
||||
<view class="e-info flex gap-2">
|
||||
<view class="e-info-avatar" style="width: 100rpx;aspect-ratio: 1/1">
|
||||
<image
|
||||
:src="serviceData.userAvatar"
|
||||
mode="aspectFill"
|
||||
class="w-20 h-20 object-cover rounded-full border-4 border-white"
|
||||
class="w-full h-full object-cover rounded-full border-4 border-white"
|
||||
></image>
|
||||
</view>
|
||||
<view class="e-right w-full">
|
||||
<view class="e-right-1" style="display: flex;justify-content: space-between;width: 100%">
|
||||
<view class="name">{{ serviceData.userName }}</view>
|
||||
<view class="date">3天前</view>
|
||||
</view>
|
||||
<view class="e-right-2">
|
||||
<wd-rate v-model="rate"></wd-rate>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="e-content">
|
||||
从事宠物行业四年多，因为热爱而选择，我会不懈努力提升自己，为自己喜爱的宠物行业风险热血青春，为可爱的毛孩子们提供更加专业，更加安全的服务。
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="goods-carts" style="bottom: 0;">-->
|
||||
<!-- <uni-goods-nav />-->
|
||||
<!-- </view>-->
|
||||
|
||||
<view class="bg-[#F5F5F5] h-[135vh]">
|
||||
<!-- 顶部背景和头像 -->
|
||||
<!-- <view class="relative">-->
|
||||
<!-- <image :src="serviceData.bgUrl" class="w-full h-40 object-cover" mode="widthFix"></image>-->
|
||||
<!-- <view class="absolute left-4 bottom-[-20px]">-->
|
||||
<!-- <image-->
|
||||
<!-- :src="serviceData.userAvatar"-->
|
||||
<!-- mode="aspectFill"-->
|
||||
<!-- class="w-20 h-20 object-cover rounded-full border-4 border-white"-->
|
||||
<!-- ></image>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
|
||||
<!-- 宠托师信息 -->
|
||||
<view class="bg-white p-4">
|
||||
<text class="text-2xl font-bold">{{ serviceData.userName }}</text>
|
||||
<view class="flex items-center mt-2">
|
||||
<text class="text-sm text-gray-500 mr-2">认证{{ serviceData.certificationTime }}</text>
|
||||
<text class="text-sm text-gray-500">服务过 {{ serviceData.serviceNumber }} 次</text>
|
||||
</view>
|
||||
<view class="flex items-center mt-2">
|
||||
<wd-icon name="location" size="20" class="text-[#ffc107]"></wd-icon>
|
||||
<text class="ml-2 text-gray-600">{{ serviceData.address }}</text>
|
||||
</view>
|
||||
<text class="mt-4 text-gray-600">{{ serviceData.description }}</text>
|
||||
</view>
|
||||
<!-- <view class="bg-white p-4">-->
|
||||
<!-- <text class="text-2xl font-bold">{{ serviceData.userName }}</text>-->
|
||||
<!-- <view class="flex items-center mt-2">-->
|
||||
<!-- <text class="text-sm text-gray-500 mr-2">认证{{ serviceData.certificationTime }}</text>-->
|
||||
<!-- <text class="text-sm text-gray-500">服务过 {{ serviceData.serviceNumber }} 次</text>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="flex items-center mt-2">-->
|
||||
<!-- <wd-icon name="location" size="20" class="text-[#ffc107]"></wd-icon>-->
|
||||
<!-- <text class="ml-2 text-gray-600">{{ serviceData.address }}</text>-->
|
||||
<!-- </view>-->
|
||||
<!-- <text class="mt-4 text-gray-600">{{ serviceData.description }}</text>-->
|
||||
<!-- </view>-->
|
||||
|
||||
<!-- 服务和费用 -->
|
||||
<view class="bg-white p-4">
|
||||
<text class="text-lg font-bold mb-2">{{ serviceData.serviceName }}服务费</text>
|
||||
<view class="flex justify-between items-center mb-4">
|
||||
<view class="flex items-center space-x-4">
|
||||
<view class="flex flex-col items-center">
|
||||
<wd-icon name="bowl" size="24" class="text-pink-500"></wd-icon>
|
||||
<text class="text-pink-500 text-sm">食具清洁</text>
|
||||
</view>
|
||||
<view class="flex flex-col items-center">
|
||||
<wd-icon name="water" size="24" class="text-pink-500"></wd-icon>
|
||||
<text class="text-pink-500 text-sm">添粮换水</text>
|
||||
</view>
|
||||
<view class="flex flex-col items-center">
|
||||
<wd-icon name="litter" size="24" class="text-pink-500"></wd-icon>
|
||||
<text class="text-pink-500 text-sm">铲屎添砂</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="text-lg text-red-500">¥{{ serviceData.price }}/次</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="bg-white p-4">-->
|
||||
<!-- <text class="text-lg font-bold mb-2">{{ serviceData.serviceName }}服务费</text>-->
|
||||
<!-- <view class="flex justify-between items-center mb-4">-->
|
||||
<!-- <view class="flex items-center space-x-4">-->
|
||||
<!-- <view class="flex flex-col items-center">-->
|
||||
<!-- <wd-icon name="bowl" size="24" class="text-pink-500"></wd-icon>-->
|
||||
<!-- <text class="text-pink-500 text-sm">食具清洁</text>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="flex flex-col items-center">-->
|
||||
<!-- <wd-icon name="water" size="24" class="text-pink-500"></wd-icon>-->
|
||||
<!-- <text class="text-pink-500 text-sm">添粮换水</text>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="flex flex-col items-center">-->
|
||||
<!-- <wd-icon name="litter" size="24" class="text-pink-500"></wd-icon>-->
|
||||
<!-- <text class="text-pink-500 text-sm">铲屎添砂</text>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- <text class="text-lg text-red-500">¥{{ serviceData.price }}/次</text>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
|
||||
<!-- 其他费用 -->
|
||||
<view class="bg-white p-4">
|
||||
<text class="text-lg font-bold mb-2">其他费用</text>
|
||||
<view class="flex justify-between items-center mb-4">
|
||||
<view class="flex flex-col items-center">
|
||||
<wd-icon name="home" size="24" class="text-gray-500"></wd-icon>
|
||||
<text class="text-gray-500 text-sm">基础上门费</text>
|
||||
<text class="text-gray-500 text-sm">1km以内23元</text>
|
||||
</view>
|
||||
<view class="flex flex-col items-center">
|
||||
<wd-icon name="scooter" size="24" class="text-gray-500"></wd-icon>
|
||||
<text class="text-gray-500 text-sm">每公里加价</text>
|
||||
<text class="text-gray-500 text-sm">每多1km加10元</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="bg-white p-4">-->
|
||||
<!-- <text class="text-lg font-bold mb-2">其他费用</text>-->
|
||||
<!-- <view class="flex justify-between items-center mb-4">-->
|
||||
<!-- <view class="flex flex-col items-center">-->
|
||||
<!-- <wd-icon name="home" size="24" class="text-gray-500"></wd-icon>-->
|
||||
<!-- <text class="text-gray-500 text-sm">基础上门费</text>-->
|
||||
<!-- <text class="text-gray-500 text-sm">1km以内23元</text>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="flex flex-col items-center">-->
|
||||
<!-- <wd-icon name="scooter" size="24" class="text-gray-500"></wd-icon>-->
|
||||
<!-- <text class="text-gray-500 text-sm">每公里加价</text>-->
|
||||
<!-- <text class="text-gray-500 text-sm">每多1km加10元</text>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
|
||||
<!-- 用户评价 -->
|
||||
<view class="bg-white p-4">
|
||||
<text class="text-lg font-bold mb-2">用户评价</text>
|
||||
<view class="mb-4" v-if="serviceData.comment">
|
||||
<view class="flex items-center mb-2">
|
||||
<text class="text-pink-500 text-lg">{{ serviceData.comment.star }}</text>
|
||||
<view class="flex items-center ml-2">
|
||||
<wd-icon
|
||||
v-for="num in serviceData.comment.star"
|
||||
name="star-on"
|
||||
size="20"
|
||||
class="text-[#ffc107]"
|
||||
></wd-icon>
|
||||
</view>
|
||||
<text class="text-gray-500 ml-2">({{ serviceData.comment.commentNum }}条评论)</text>
|
||||
</view>
|
||||
<text class="text-gray-600">{{ serviceData.comment.comment }}</text>
|
||||
</view>
|
||||
<view class="text-gray-500 pt-2 w-full text-center" v-else>暂无评论</view>
|
||||
</view>
|
||||
<!-- <view class="bg-white p-4">-->
|
||||
<!-- <text class="text-lg font-bold mb-2">用户评价</text>-->
|
||||
<!-- <view class="mb-4" v-if="serviceData.comment">-->
|
||||
<!-- <view class="flex items-center mb-2">-->
|
||||
<!-- <text class="text-pink-500 text-lg">{{ serviceData.comment.star }}</text>-->
|
||||
<!-- <view class="flex items-center ml-2">-->
|
||||
<!-- <wd-icon-->
|
||||
<!-- v-for="num in serviceData.comment.star"-->
|
||||
<!-- name="star-on"-->
|
||||
<!-- size="20"-->
|
||||
<!-- class="text-[#ffc107]"-->
|
||||
<!-- ></wd-icon>-->
|
||||
<!-- </view>-->
|
||||
<!-- <text class="text-gray-500 ml-2">({{ serviceData.comment.commentNum }}条评论)</text>-->
|
||||
<!-- </view>-->
|
||||
<!-- <text class="text-gray-600">{{ serviceData.comment.comment }}</text>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="text-gray-500 pt-2 w-full text-center" v-else>暂无评论</view>-->
|
||||
<!-- </view>-->
|
||||
|
||||
<!-- 底部地图展示 -->
|
||||
<view class="flex flex-col justify-center items-center bg-[#ffff] pb-[50px]">
|
||||
<text class="text-lg font-bold mb-2 w-full pl-[20px]" style="text-align: left">服务位置</text>
|
||||
<view class="w-full h-[20vh]">
|
||||
<Map
|
||||
v-show="mapShow"
|
||||
:locationName="'服务位置'"
|
||||
:initialLatitude="serviceData.latitude"
|
||||
:initialLongitude="serviceData.longitude"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="flex flex-col justify-center items-center bg-[#ffff] pb-[50px]">-->
|
||||
<!-- <text class="text-lg font-bold mb-2 w-full pl-[20px]" style="text-align: left">服务位置</text>-->
|
||||
<!-- <view class="w-full h-[20vh]">-->
|
||||
<!-- <Map-->
|
||||
<!-- v-show="mapShow"-->
|
||||
<!-- :locationName="'服务位置'"-->
|
||||
<!-- :initialLatitude="serviceData.latitude"-->
|
||||
<!-- :initialLongitude="serviceData.longitude"-->
|
||||
<!-- />-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<view class="fixed bottom-0 w-full bg-white flex justify-between items-center mt-4 z-10 py-3">
|
||||
@ -116,100 +215,118 @@
|
||||
<button @click="message" class="bg-gray-200 text-gray-600 rounded-full w-100px">
|
||||
消息
|
||||
</button>
|
||||
<button class="bg-[#ffc107] text-white rounded-full" @click="openReservationModal">
|
||||
预约宠托师
|
||||
<button class="bg-[#ffc107] text-white rounded-full" @click="()=>toPath('/modules/pet/createOrder/createOrder?type=' + 'feed')">
|
||||
预约
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 预约弹窗 -->
|
||||
<wd-overlay :show="showReservationModal">
|
||||
<view class="bg-white rounded-lg p-4 w-full pos-absolute top-[40%] flex flex-col gap-5px">
|
||||
<view class="text-lg font-bold mb-4">选择预约信息</view>
|
||||
<!-- <wd-overlay :show="showReservationModal">-->
|
||||
<!-- <view class="bg-white rounded-lg p-4 w-full pos-absolute top-[40%] flex flex-col gap-5px">-->
|
||||
<!-- <view class="text-lg font-bold mb-4">选择预约信息</view>-->
|
||||
|
||||
<!-- 服务宠物选择 -->
|
||||
<text class="text-sm text-gray-500 mb-2">服务宠物</text>
|
||||
<view v-if="pets.length > 0" class="flex space-x-4 mb-4 scroll-x overflow-x-auto" scroll-x>
|
||||
<view
|
||||
v-for="pet in pets"
|
||||
:key="pet.id"
|
||||
class="flex flex-col items-center"
|
||||
@click="selectPet(pet.id)"
|
||||
:class="selectedPetId == pet.id ? 'border-4 border-[#ffc107] color-[#ffc107]' : ''"
|
||||
>
|
||||
<image :src="imgUrl(pet.profileUrl)" class="w-20 h-20 rounded-full object-cover"></image>
|
||||
<text class="text-sm">{{ pet.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="pet-item add-pet" @click="toPath('/modules/pet/pet/pet-add-page')">
|
||||
<w-avatar :size="80" class="pet-avatar add-avatar">
|
||||
<view class="add-icon">+</view>
|
||||
</w-avatar>
|
||||
</view>
|
||||
<!-- <!– 服务宠物选择 –>-->
|
||||
<!-- <text class="text-sm text-gray-500 mb-2">服务宠物</text>-->
|
||||
<!-- <view v-if="pets.length > 0" class="flex space-x-4 mb-4 scroll-x overflow-x-auto" scroll-x>-->
|
||||
<!-- <view-->
|
||||
<!-- v-for="pet in pets"-->
|
||||
<!-- :key="pet.id"-->
|
||||
<!-- class="flex flex-col items-center"-->
|
||||
<!-- @click="selectPet(pet.id)"-->
|
||||
<!-- :class="selectedPetId == pet.id ? 'border-4 border-[#ffc107] color-[#ffc107]' : ''"-->
|
||||
<!-- >-->
|
||||
<!-- <image :src="imgUrl(pet.profileUrl)" class="w-20 h-20 rounded-full object-cover"></image>-->
|
||||
<!-- <text class="text-sm">{{ pet.name }}</text>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view v-else class="pet-item add-pet" @click="toPath('/modules/pet/pet/pet-add-page')">-->
|
||||
<!-- <w-avatar :size="80" class="pet-avatar add-avatar">-->
|
||||
<!-- <view class="add-icon">+</view>-->
|
||||
<!-- </w-avatar>-->
|
||||
<!-- </view>-->
|
||||
|
||||
<!-- 预约时间 -->
|
||||
<text class="text-sm text-gray-500 mb-2">预约时间</text>
|
||||
<picker mode="date" :start="today" :end="weekFromToday" @change="handleDateChange">
|
||||
<view class="bg-gray-100 p-2 rounded mb-4">{{ reservationDate || '选择日期' }}</view>
|
||||
</picker>
|
||||
<!-- <!– 预约时间 –>-->
|
||||
<!-- <text class="text-sm text-gray-500 mb-2">预约时间</text>-->
|
||||
<!-- <picker mode="date" :start="today" :end="weekFromToday" @change="handleDateChange">-->
|
||||
<!-- <view class="bg-gray-100 p-2 rounded mb-4">{{ reservationDate || '选择日期' }}</view>-->
|
||||
<!-- </picker>-->
|
||||
|
||||
<!-- 选择预约小时 -->
|
||||
<text class="text-sm text-gray-500 mb-2">选择服务时长</text>
|
||||
<view>
|
||||
<wd-input-number v-model="hours" @change="hoursHandleChange" :min="1" :max="12" />
|
||||
</view>
|
||||
<!-- <!– 选择预约小时 –>-->
|
||||
<!-- <text class="text-sm text-gray-500 mb-2">选择服务时长</text>-->
|
||||
<!-- <view>-->
|
||||
<!-- <wd-input-number v-model="hours" @change="hoursHandleChange" :min="1" :max="12"/>-->
|
||||
<!-- </view>-->
|
||||
|
||||
<!-- 服务地址选择 -->
|
||||
<text class="text-sm text-gray-500 mb-2">选择地址</text>
|
||||
<picker
|
||||
v-if="addressList.length > 0"
|
||||
mode="selector"
|
||||
range-key="display"
|
||||
:range="addressList"
|
||||
@change="handleAddressChange"
|
||||
>
|
||||
<view class="bg-gray-100 p-2 rounded mb-4">
|
||||
{{ selectedAddress.display || '请选择地址' }}
|
||||
</view>
|
||||
</picker>
|
||||
<view v-else class="pet-item add-pet" @click="toPath('/modules/pet/address/index')">
|
||||
<w-avatar :size="80" class="pet-avatar add-avatar">
|
||||
<view class="add-icon">+</view>
|
||||
</w-avatar>
|
||||
</view>
|
||||
<!-- <!– 服务地址选择 –>-->
|
||||
<!-- <text class="text-sm text-gray-500 mb-2">选择地址</text>-->
|
||||
<!-- <picker-->
|
||||
<!-- v-if="addressList.length > 0"-->
|
||||
<!-- mode="selector"-->
|
||||
<!-- range-key="display"-->
|
||||
<!-- :range="addressList"-->
|
||||
<!-- @change="handleAddressChange"-->
|
||||
<!-- >-->
|
||||
<!-- <view class="bg-gray-100 p-2 rounded mb-4">-->
|
||||
<!-- {{ selectedAddress.display || '请选择地址' }}-->
|
||||
<!-- </view>-->
|
||||
<!-- </picker>-->
|
||||
<!-- <view v-else class="pet-item add-pet" @click="toPath('/modules/pet/address/index')">-->
|
||||
<!-- <w-avatar :size="80" class="pet-avatar add-avatar">-->
|
||||
<!-- <view class="add-icon">+</view>-->
|
||||
<!-- </w-avatar>-->
|
||||
<!-- </view>-->
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="fixed bottom-0 left-0 w-full bg-white shadow-up py-[10px]">
|
||||
<view class="flex justify-between">
|
||||
<button
|
||||
class="flex-1 mx-2 py-2 px-6 bg-gray-200 text-gray-600 rounded-full"
|
||||
@click="closeReservationModal"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
class="flex-1 mx-2 py-2 px-6 bg-[#ffc107] text-white rounded-full"
|
||||
@click="confirmReservation"
|
||||
>
|
||||
确认预约
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</wd-overlay>
|
||||
<!-- <!– 操作按钮 –>-->
|
||||
<!-- <view class="fixed bottom-0 left-0 w-full bg-white shadow-up py-[10px]">-->
|
||||
<!-- <view class="flex justify-between">-->
|
||||
<!-- <button-->
|
||||
<!-- class="flex-1 mx-2 py-2 px-6 bg-gray-200 text-gray-600 rounded-full"-->
|
||||
<!-- @click="closeReservationModal"-->
|
||||
<!-- >-->
|
||||
<!-- 取消-->
|
||||
<!-- </button>-->
|
||||
<!-- <button-->
|
||||
<!-- class="flex-1 mx-2 py-2 px-6 bg-[#ffc107] text-white rounded-full"-->
|
||||
<!-- @click="confirmReservation"-->
|
||||
<!-- >-->
|
||||
<!-- 确认预约-->
|
||||
<!-- </button>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </wd-overlay>-->
|
||||
|
||||
<LoadingAnimation v-model="loading"/>
|
||||
</template>
|
||||
|
||||
<script lang="js" setup>
|
||||
|
||||
import {ref} from 'vue'
|
||||
import {httpGet, httpPost} from "@/utils/http";
|
||||
import {baseUrl, imgUrl, toast, toPath} from '@/utils/commUtils'
|
||||
import { pay } from '@/logic/pay'
|
||||
import TopBar from '@/components/TopBar.vue'
|
||||
import Map from '@/components/Map.vue'
|
||||
import LoadingAnimation from '@/components/LoadingAnimation.vue'
|
||||
import kd from '@/components/icon/x_快递员.png'
|
||||
import huishou from '@/components/icon/上门回收管理.png'
|
||||
import qc from '@/components/icon/清除.png'
|
||||
import cw from '@/components/icon/宠物.png'
|
||||
import yys from '@/components/icon/饮用水.png'
|
||||
import jkzb from '@/components/icon/健康指标 (1).png'
|
||||
import hj from '@/components/icon/环境应急救援队 (1).png'
|
||||
import house from '@/components/icon/Housekeeping.png'
|
||||
|
||||
|
||||
const serviceInfos = [
|
||||
["食具清洁", qc],
|
||||
["添粮换水", yys],
|
||||
["铲屎添砂", house],
|
||||
["互动陪玩", cw],
|
||||
["健康监测", jkzb],
|
||||
["健康监测", hj],
|
||||
]
|
||||
|
||||
|
||||
// 获取当前日期
|
||||
const nowday = new Date()
|
||||
@ -225,10 +342,12 @@ const showReservationModal = ref(false)
|
||||
const selectedPetId = ref('')
|
||||
const today = ref('')
|
||||
const weekFromToday = ref('')
|
||||
const selectedAddress = ref({})
|
||||
const personalServiceId = ref('')
|
||||
const hours = ref(1)
|
||||
const selectedAddress = ref({})
|
||||
const mapShow = ref(true)
|
||||
const distance = ref(10)
|
||||
const rate = ref(5)
|
||||
|
||||
const hoursHandleChange = ({value}) => {
|
||||
if (value >= 1 && value <= 12) {
|
||||
@ -238,7 +357,8 @@ const hoursHandleChange = ({ value }) => {
|
||||
}
|
||||
}
|
||||
|
||||
const message = () => {}
|
||||
const message = () => {
|
||||
}
|
||||
|
||||
const detailPay = async () => {
|
||||
console.log(reservationDate.value);
|
||||
@ -373,7 +493,129 @@ onLoad(async (options) => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
.service-image-container {
|
||||
width: 100%;
|
||||
height: 560rpx;
|
||||
|
||||
.service-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 35rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
|
||||
&-name {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.address {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 28rpx;
|
||||
.left{
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
.tags {
|
||||
width: 100%;
|
||||
padding: 10rpx 0;
|
||||
display: flex;
|
||||
gap: 17rpx;
|
||||
|
||||
.tag {
|
||||
padding: 5rpx 10rpx;
|
||||
color: #1b1b1b;
|
||||
font-size: 24rpx;
|
||||
background-color: #fccb30;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.description {
|
||||
box-sizing: border-box;
|
||||
background-color: #f8f8f8;
|
||||
color: #999999;
|
||||
border-radius: 20rpx;
|
||||
width: 100%;
|
||||
padding: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.service {
|
||||
@extend .d-card;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 50rpx 20rpx;
|
||||
|
||||
}
|
||||
|
||||
.d-card {
|
||||
@extend .shadow-radius;
|
||||
margin: 20rpx;
|
||||
padding: 50rpx 20rpx;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.shadow-radius {
|
||||
@extend .shadow;
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
|
||||
.other-cost {
|
||||
@extend .d-card;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20rpx;
|
||||
margin: 10rpx;
|
||||
font-size: 25rpx;
|
||||
align-items: center;
|
||||
|
||||
.other-description {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.e-content{
|
||||
box-sizing: border-box;
|
||||
color: #999999;
|
||||
border-radius: 20rpx;
|
||||
width: 100%;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.goods-carts {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
/* #ifdef H5 */
|
||||
left: var(--window-left);
|
||||
right: var(--window-right);
|
||||
/* #endif */
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.pet-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -409,6 +651,7 @@ onLoad(async (options) => {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.mapContainer {
|
||||
width: 100%;
|
||||
height: 20vh;
|
||||
@ -438,9 +681,6 @@ onLoad(async (options) => {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.text-red-500 {
|
||||
color: #f56565;
|
||||
|
||||
@ -87,6 +87,17 @@
|
||||
<view class="pt-[80px]" v-else>
|
||||
<EmptyState type="search" message="暂无相关服务"/>
|
||||
</view>
|
||||
<wd-fab direction="left" type="error" position="right-bottom" :disabled="disabled">
|
||||
<view class="w-full flex justify-around gap-2">
|
||||
<wd-button style="box-sizing:border-box;" type="warning">
|
||||
我是宠托师
|
||||
</wd-button>
|
||||
<wd-button type="primary">
|
||||
发布需求
|
||||
</wd-button>
|
||||
</view>
|
||||
|
||||
</wd-fab>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -97,6 +108,7 @@ import { httpPost } from '@/utils/http'
|
||||
import {imgUrl} from '@/utils/commUtils'
|
||||
import EmptyState from '@/components/EmptyState.vue'
|
||||
|
||||
const disabled = ref(false)
|
||||
const searchTerm = ref('')
|
||||
const priceSortAsc = ref(true)
|
||||
const petSitters = ref([])
|
||||
@ -224,11 +236,17 @@ page {
|
||||
@apply text-gray-500;
|
||||
}
|
||||
|
||||
.bg-[#ffc107] {
|
||||
.bg-[#ffc107
|
||||
|
||||
]
|
||||
{
|
||||
@apply bg-[#ffc107];
|
||||
}
|
||||
|
||||
.text-[#ffc107] {
|
||||
.text-[#ffc107
|
||||
|
||||
]
|
||||
{
|
||||
@apply text-[#ffc107];
|
||||
}
|
||||
|
||||
|
||||
@ -149,7 +149,7 @@ const getPosts = async () => {
|
||||
if (res.code == 200) {
|
||||
postsList.value = res.data
|
||||
} else {
|
||||
console.error(res);
|
||||
console.error(res)
|
||||
toast(res.message || '数据获取失败')
|
||||
}
|
||||
} catch (error) {
|
||||
|
||||
@ -55,6 +55,10 @@
|
||||
"navigationBarBackgroundColor": "#ffffff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "createOrder/createOrder",
|
||||
"type": "page"
|
||||
},
|
||||
{
|
||||
"path": "extended/index",
|
||||
"type": "page",
|
||||
@ -241,17 +245,16 @@
|
||||
{
|
||||
"path": "service/accompany",
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationBarTitleText": "宠物陪伴"
|
||||
"navigationBarTitleText": "选择服务",
|
||||
"navigationBarBackgroundColor": "#ffff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "service/detail",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationBarTitleText": "宠托师服务详情",
|
||||
"navigationStyle": "custom"
|
||||
"navigationBarTitleText": "服务详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@ -4,7 +4,11 @@
|
||||
<swiper-item>
|
||||
<view class="quick-services">
|
||||
<view class="quick-service-card">
|
||||
<image :src="imgUrl('@/static/home/book.png')" class="quick-service-image" @click="toPath('/modules/pet/service/knowledge')" />
|
||||
<image
|
||||
:src="imgUrl('@/static/home/book.png')"
|
||||
class="quick-service-image"
|
||||
@click="toPath('/modules/pet/service/knowledge')"
|
||||
/>
|
||||
<text class="quick-service-text">宠物宝典</text>
|
||||
</view>
|
||||
<view class="quick-service-card">
|
||||
@ -44,7 +48,7 @@
|
||||
</swiper>
|
||||
<view class="custom-indicators">
|
||||
<view
|
||||
v-for="(item, index) in 2"
|
||||
v-for="(item, index) in 1"
|
||||
:key="index"
|
||||
:class="['indicator', { active: currentIndex === index }]"
|
||||
></view>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<route lang="json5">
|
||||
{
|
||||
style: {
|
||||
navigationBarTitleText: "首页",
|
||||
navigationStyle: "custom",
|
||||
navigationBarTitleText: '首页',
|
||||
navigationStyle: 'custom',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
@ -38,41 +38,22 @@
|
||||
</view>
|
||||
<view class="h-1xl"></view>
|
||||
<hurry name="萌萌哒" :distance="25" :time="45"/>
|
||||
|
||||
<view class="flex flex-col w-full">
|
||||
<view class="services">
|
||||
<view
|
||||
class="service-card large-card"
|
||||
@click="toPath('/modules/pet/service/accompany')"
|
||||
>
|
||||
<image
|
||||
:src="imgUrl('@/static/home/cwpb.png')"
|
||||
class="service-image"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="service-card large-card" @click="toPath('/modules/pet/service/accompany')">
|
||||
<image :src="imgUrl('@/static/home/cwpb.png')" class="service-image" mode="widthFix"/>
|
||||
</view>
|
||||
<view class="right-column">
|
||||
<view
|
||||
class="service-card small-card"
|
||||
@click="toPath('/modules/pet/service/slippery')"
|
||||
>
|
||||
<image
|
||||
:src="imgUrl('@/static/home/cwpl.png')"
|
||||
class="service-image"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="service-card small-card" @click="toPath('/modules/pet/service/slippery')">
|
||||
<image :src="imgUrl('@/static/home/cwpl.png')" class="service-image" mode="widthFix"/>
|
||||
</view>
|
||||
<view class="service-card small-card" @click="toPath('/modules/pet/service/search')">
|
||||
<image :src="imgUrl('@/static/home/smfw.png')" class="service-image" mode="widthFix"/>
|
||||
</view>
|
||||
<view
|
||||
class="service-card small-card"
|
||||
@click="toPath('/modules/pet/service/search')"
|
||||
>
|
||||
<image
|
||||
:src="imgUrl('@/static/home/smfw.png')"
|
||||
class="service-image"
|
||||
mode="widthFix"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="quick">
|
||||
<view class="head">
|
||||
<view class="quick-title">
|
||||
@ -83,7 +64,6 @@
|
||||
<wd-icon name="arrow-right"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<QuickServiceCarousel/>
|
||||
</view>
|
||||
|
||||
@ -96,55 +76,55 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ProfileInfo from "./components/profileInfo.vue";
|
||||
import hurry from "./components/hurry.vue";
|
||||
import QuickServiceCarousel from "./components/quickServiceCarousel.vue";
|
||||
import RecommendedServices from "./components/recommendedServices.vue";
|
||||
import Banner from "./components/banner.vue";
|
||||
import LoadingAnimation from "@/components/LoadingAnimation.vue";
|
||||
import { imgUrl, toast } from "@/utils/commUtils";
|
||||
import { httpGet } from "@/utils/http";
|
||||
import Tabbar from "@/components/Tabbar.vue";
|
||||
import AddressCell from "@/components/AddressCell.vue";
|
||||
import Search from "@/components/Search.vue";
|
||||
import { isH5 } from "@/utils/platform";
|
||||
import ProfileInfo from './components/profileInfo.vue'
|
||||
import hurry from './components/hurry.vue'
|
||||
import QuickServiceCarousel from './components/quickServiceCarousel.vue'
|
||||
import RecommendedServices from './components/recommendedServices.vue'
|
||||
import Banner from './components/banner.vue'
|
||||
import LoadingAnimation from '@/components/LoadingAnimation.vue'
|
||||
import {imgUrl, toast} from '@/utils/commUtils'
|
||||
import {httpGet} from '@/utils/http'
|
||||
import Tabbar from '@/components/Tabbar.vue'
|
||||
import AddressCell from '@/components/AddressCell.vue'
|
||||
import Search from '@/components/Search.vue'
|
||||
import {isH5} from '@/utils/platform'
|
||||
|
||||
const isLoading = ref(false);
|
||||
const petInfo = ref({});
|
||||
const isLoading = ref(false)
|
||||
const petInfo = ref({})
|
||||
|
||||
// 获取当前页面的宠物信息
|
||||
const getPetInfo = async () => {
|
||||
try {
|
||||
const res = await httpGet("/petInfo/index");
|
||||
const res = await httpGet('/petInfo/index')
|
||||
if (res.code === 200) {
|
||||
petInfo.value = res.data;
|
||||
petInfo.value = res.data
|
||||
} else {
|
||||
toast(res.message);
|
||||
toast(res.message)
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const toExtended = () => {
|
||||
// 跳转到extended 页面
|
||||
uni.navigateTo({
|
||||
url: "/modules/pet/extended/index",
|
||||
});
|
||||
};
|
||||
url: '/modules/pet/extended/index',
|
||||
})
|
||||
}
|
||||
|
||||
const toPath = (path) => {
|
||||
uni.navigateTo({
|
||||
url: path,
|
||||
});
|
||||
};
|
||||
})
|
||||
}
|
||||
|
||||
onLoad(async () => {
|
||||
await uni.hideTabBar();
|
||||
isLoading.value = true;
|
||||
await getPetInfo();
|
||||
isLoading.value = false;
|
||||
});
|
||||
await uni.hideTabBar()
|
||||
isLoading.value = true
|
||||
await getPetInfo()
|
||||
isLoading.value = false
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
body {
|
||||
color: var(--text-a);
|
||||
background-color: var(--ui-BG-1) !important;
|
||||
font-family:
|
||||
system-ui,
|
||||
font-family: system-ui,
|
||||
-apple-system,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
@ -22,9 +21,11 @@ body {
|
||||
.ui-link {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
navigator {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
navigator.navigator-hover {
|
||||
background-color: inherit;
|
||||
transform: translate(1rpx, 1rpx);
|
||||
@ -37,51 +38,66 @@ navigator.navigator-hover {
|
||||
.none {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline !important;
|
||||
}
|
||||
|
||||
.inline-block {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.touch-none {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.touch-all {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.inline-flex {
|
||||
display: inline-flex !important;
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* -- 浮动 -- */
|
||||
.cf::after,
|
||||
.cf::before {
|
||||
content: '';
|
||||
display: table;
|
||||
}
|
||||
|
||||
.cf::after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.fl {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.fr {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.position-center {
|
||||
@include position-center;
|
||||
}
|
||||
|
||||
.position-relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* -- 工具类 -- */
|
||||
@function negativify-map($map) {
|
||||
$result: ();
|
||||
|
||||
@ -19,12 +19,12 @@ export const useRoutersStore = defineStore(
|
||||
pagePath: '/modules/pet/space/index',
|
||||
text: '互动空间',
|
||||
},
|
||||
{
|
||||
iconPath: '/static/tabbar/24gl-paperPlane.png',
|
||||
selectedIconPath: '/static/tabbar/24gl-paperPlaneL.png',
|
||||
pagePath: '/modules/pet/push/index',
|
||||
text: '发布',
|
||||
},
|
||||
// {
|
||||
// iconPath: '/static/tabbar/24gl-paperPlane.png',
|
||||
// selectedIconPath: '/static/tabbar/24gl-paperPlaneL.png',
|
||||
// pagePath: '/modules/pet/push/index',
|
||||
// text: '发布',
|
||||
// },
|
||||
{
|
||||
iconPath: '/static/tabbar/message.png',
|
||||
selectedIconPath: '/static/tabbar/messageL.png',
|
||||
|
||||
1
src/types/uni-pages.d.ts
vendored
1
src/types/uni-pages.d.ts
vendored
@ -10,6 +10,7 @@ interface NavigateToOptions {
|
||||
"/modules/pet/ai/ai-interactive-space" |
|
||||
"/modules/pet/certification/index" |
|
||||
"/modules/pet/certification/pet-sitter" |
|
||||
"/modules/pet/createOrder/createOrder" |
|
||||
"/modules/pet/extended/index" |
|
||||
"/modules/pet/h5mall/index" |
|
||||
"/modules/pet/login/index" |
|
||||
|
||||
@ -115,8 +115,5 @@ export const isCancelOrder = (state) => {
|
||||
return state === "待支付" || state === "已支付"
|
||||
}
|
||||
|
||||
|
||||
// 判断是否能取消订单【宠托师】
|
||||
export const isTakeCancelOrder = (state) => {
|
||||
return state === "待接单"
|
||||
}
|
||||
export const isTakeCancelOrder = (state) => state === "待接单"
|
||||
Loading…
Reference in New Issue
Block a user