改ui

src/App.vue

@@ -24,7 +24,7 @@ onLaunch(() => {
 })
 
 // 当应用进入前台时继续轮询服务
-onShow(() => {
+onShow((options) => {
   console.log('应用显示出来了...')
   notificationService.startPollingUnreadMessages()
 

src/components/PetSitterCard.vue

@@ -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">

src/manifest.json

@@ -163,7 +163,7 @@
   },
   "quickapp": {},
   "mp-weixin": {
-    "appid": "wxf2c6d4b7361366b4",
+    "appid": "wxfcaf84cb7965fcae",
     "setting": {
       "urlCheck": false,
       "minified": true

src/modules/pet/createOrder/createOrder.vue

@@ -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>

src/modules/pet/extended/index.vue

@@ -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;

src/modules/pet/login/phone.vue

@@ -1,8 +1,8 @@
 <route lang="json5">
 {
   style: {
-    navigationBarTitleText: "手机号登录",
+    navigationBarTitleText: '手机号登录',
-    navigationStyle: "custom",
+    navigationStyle: 'custom',
   },
 }
 </route>
@@ -10,20 +10,11 @@
 <template>
   <TopBar />
   <view class="login-phone">
-    <image
+    <image class="background" :src="imgUrl('@/static/login/login.png')" mode="aspectFill"></image>
-      class="background"
-      :src="imgUrl('@/static/login/login.png')"
-      mode="aspectFill"
-    ></image>
     <view class="content">
       <view class="input-container">
         <view class="">
-          <input
+          <input class="input" type="text" placeholder="请输入手机号" v-model="phoneNumber" />
-            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 { ref, onMounted, onUnmounted } from 'vue'
-import { httpGet, httpPost } from "@/utils/http";
+import { httpGet, httpPost } from '@/utils/http'
-import { useUserStore } from "@/store/user";
+import { useUserStore } from '@/store/user'
-import TopBar from "@/components/TopBar.vue";
+import TopBar from '@/components/TopBar.vue'
-import { imgUrl, toast, toPath } from "@/utils/commUtils";
+import { imgUrl, toast, toPath } from '@/utils/commUtils'
 
-const userStore = useUserStore();
+const userStore = useUserStore()
 
-const phoneNumber = ref("");
+const phoneNumber = ref('')
-const code = ref("");
+const code = ref('')
-const countdown = ref(0);
+const countdown = ref(0)
-let timer = null;
+let timer = null
 
 const sendCode = async () => {
   if (countdown.value === 0) {
     if (!phoneNumber.value) {
-      toast("请输入手机号");
+      toast('请输入手机号')
-      return;
+      return
     }
-    const res = await httpGet("/public/getCode", { phone: phoneNumber.value });
+    const res = await httpGet('/public/getCode', { phone: phoneNumber.value })
-    countdown.value = 60;
+    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: "请输入手机号",
+      title: '请输入手机号',
-      icon: "none",
+      icon: 'none',
-    });
+    })
-    return;
+    return
   }
   if (!code.value) {
     uni.showToast({
-      title: "请输入验证码",
+      title: '请输入验证码',
-      icon: "none",
+      icon: 'none',
-    });
+    })
-    return;
+    return
   }
 
-  const res = await httpPost(
+  const res = await httpPost('/public/login', {}, { phone: phoneNumber.value, code: code.value })
-    "/public/login",
-    {},
-    { phone: phoneNumber.value, code: code.value }
-  );
   if (res.code === 200) {
-    toast(res.message);
+    toast(res.message)
-    const data = res.data;
+    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);
+      userStore.setUserInfo(userRes.data)
-      toPath("/");
+      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>

src/modules/pet/message/index.vue

@@ -63,6 +63,7 @@ const toPath = (path) => {
 
 <style scoped>
 .container {
+  box-sizing: border-box;
   height: 100vh;
   padding: 16px;
   background-color: #f8f8f8;

src/modules/pet/push/index.vue

@@ -86,6 +86,7 @@ const toPath = (path) => {
 /* 在这里添加任何自定义的样式 */
 .container {
   padding: 16px;
+  box-sizing: border-box;
 }
 
 button {

src/modules/pet/service/accompany.vue

@@ -1,296 +1,228 @@
-<route lang="json5" type="page">
+<route lang="json5">
 {
-  layout: 'default',
+style: {
-  style: {
+navigationBarTitleText: '选择服务',
-    navigationBarTitleText: '宠物陪伴',
+navigationBarBackgroundColor: '#ffff',
-  },
+},
 }
 </route>
 
 <template>
-  <view class="hot">
+  <view class="bg-[#F5F5F5] min-h-screen p-4">
-    <view>
+    <!-- 过滤栏 -->
-      <view class="container">
+    <view class="flex justify-around bg-white p-2 rounded-lg shadow mb-4">
-        <view style="position: fixed; top: 0; z-index: 19">
+      <view class="flex items-center" @click="sortByDistance">
-          <view style="position: relative">
+        <text class="text-gray-600">离我最近</text>
-            <view
+      </view>
-              style="
+      <view class="flex items-center" @click="sortByPrice">
-                background: #761ee9;
+        <text class="text-gray-600">价格</text>
-                width: 100vw;
+        <wd-icon :name="priceSortIcon" size="20" class="ml-2 text-gray-400"></wd-icon>
-                height: 230rpx;
+      </view>
-                border-radius: 0 0 28rpx 28rpx;
+      <view class="flex items-center" @click="sortByLatest">
-                padding-top: 280px;
+        <text class="text-gray-600">新发布</text>
-              "
+      </view>
-            ></view>
+      <view class="flex items-center">
-            <view style="background: #f6f7f9; width: 250vw; height: 60rpx"></view>
+        <text class="text-gray-600">区域</text>
-            <view class="swiperImg" style="position: absolute; top: 180px; width: 100vw">
+        <wd-icon name="arrow-down" size="20" class="ml-2 text-gray-400"></wd-icon>
-              <view style="padding: 0 30rpx">
+      </view>
-                <swiper
+    </view>
-                  :autoplay="autoplay"
+
-                  :duration="duration"
+    <!-- 服务选择 -->
-                  :indicator-dots="indicatorDots"
+    <view class="mt-4">
-                  :interval="interval"
+      <view class="flex mt-2 space-x-4 overflow-x-auto">
-                  circular
+        <view
-                  class="swiper"
+          v-for="serviceType in serviceTypes"
-                  indicator-active-color="rgba(0, 0, 0, 0.3)"
+          :key="serviceType.name"
-                  indicator-color="rgba(255, 255, 255, 0.5)"
+          class="flex flex-col items-center"
-                  style="height: 300rpx"
+          @click="filterByService(serviceType.label)"
-                >
+        >
-                  <swiper-item v-for="(item, index) in swiperList" :key="index">
+          <view
-                    <image
+            :class="[
-                      :src="item.url"
+              'w-16 h-16 rounded-full flex items-center justify-center',
-                      style="height: 100%; width: 100%; border-radius: 30rpx"
+              selectedService === serviceType.name ? 'bg-[#ffc107]' : 'bg-gray-200',
-                    ></image>
+            ]"
-                  </swiper-item>
+          >
-                </swiper>
+            <wd-icon
-              </view>
+              style="width: 36px; height: 36px"
-            </view>
+              :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>
-  </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 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>
+      <wd-loadmore
+        :loading="loading"
+        :finished="noMoreData"
+        @load="loadMore"
+        finished-text="没有更多数据了"
+      ></wd-loadmore>
     </view>
-    <view class="mt-5 bg-white p-5 rounded-lg shadow" style="padding: 0">
+    <view class="pt-[80px]" v-else>
-      <div style="display: flex; align-items: center; flex-direction: column; padding: 20px">
+      <EmptyState type="search" message="暂无相关服务"/>
-        <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>
-    <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>
     </view>
+
   </view>
+
 </template>
 
-<script lang="js" setup>
+<script setup>
-import { ref, reactive } from 'vue'
+import {ref} from 'vue'
-import { imgUrl, toPath } from '@/utils/commUtils'
+import PetSitterCard from '@/components/PetSitterCard.vue'
-// 轮播图
+import {httpPost} from '@/utils/http'
-const swiperList = [
+import {imgUrl} from '@/utils/commUtils'
-  {
+import EmptyState from '@/components/EmptyState.vue'
-    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
 
-const props = defineProps({
+const searchTerm = ref('')
-  tabbar: {
+const priceSortAsc = ref(true)
-    type: [String, Boolean],
+const petSitters = ref([])
-    default: '',
+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>
+<style scoped>
-.navigation {
+page {
-  border-radius: 10px 10px 0 0;
+  background-color: #f5f5f5;
-  height: 80rpx;
-  display: flex;
-  align-items: center;
-  background-color: #ffefeb;
 }
 
-.card_accompany {
+.bg-gray-100 {
-  width: 40rpx;
+  @apply bg-gray-100;
-  height: 40rpx;
-  margin-left: 18rpx;
 }
 
-.card_font {
+.bg-gray-200 {
-  font-size: 13px;
+  @apply bg-gray-200;
-  color: #ff9a81;
 }
 
-.position {
+.text-gray-400 {
-  flex-direction: column;
+  @apply text-gray-400;
-  display: flex;
-  align-items: center;
-  color: #fa3534;
 }
 
-.specific_img {
+.text-gray-500 {
-  margin: 7px 0;
+  @apply text-gray-500;
-  height: 20px;
-  width: 30px;
 }
 
-.specific_position {
+
-  font-weight: bold;
+.rounded-full {
+  @apply rounded-full;
 }
 
-.get_address {
+.shadow {
-  display: flex;
+  @apply shadow;
-  align-items: center;
-  border: 1px solid #9093ff;
-  margin-bottom: 40rpx;
-  width: 90%;
-  height: 130rpx;
-  // padding: 15px 80px 15px 80px;
-  border-radius: 10px;
 }
 
-.reach_address {
+.space-x-4 {
-  border: 1px solid #9093ff;
+  @apply space-x-4;
-}
-
-.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%;
 }
 </style>

src/modules/pet/service/detail.vue

@@ -1,113 +1,212 @@
 <route lang="json5">
 {
-  style: {
+style: {
-    navigationBarTitleText: '宠托师服务详情',
+navigationBarTitleText: '服务详情',
-    navigationStyle: 'custom',
+},
-  },
 }
 </route>
 
 <template>
-  <TopBar />
+  <!--  <TopBar />-->
-  <view class="bg-[#F5F5F5] h-[135vh]">
+  <view class="service-image-container">
-    <!-- 顶部背景和头像 -->
+    <image :src="serviceData.userAvatar" class="service-image" mode="scaleToFill"></image>
-    <view class="relative">
+  </view>
-      <image :src="serviceData.bgUrl" class="w-full h-40 object-cover" mode="widthFix"></image>
+  <!-- 宠托师信息 -->
-      <view class="absolute left-4 bottom-[-20px]">
+  <view class="info">
-        <image
+    <view class="info-name">{{ serviceData.serviceName }}</view>
-          :src="serviceData.userAvatar"
+    <view class="tags">
-          mode="aspectFill"
+      <text class="tag">认证{{ serviceData.certificationTime }}</text>
-          class="w-20 h-20 object-cover rounded-full border-4 border-white"
+      <text class="tag">服务过{{ serviceData.serviceNumber }}次</text>
-        ></image>
-      </view>
     </view>
 
-    <!-- 宠托师信息 -->
+    <view class="address">
-    <view class="bg-white p-4">
+      <wd-icon name="location" size="20" class="text-[#ffc107]"></wd-icon>
-      <text class="text-2xl font-bold">{{ serviceData.userName }}</text>
+      <view class="left">
-      <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 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-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">
+<!--    <view class="bg-white p-4">-->
-      <text class="text-lg font-bold mb-2">{{ serviceData.serviceName }}服务费</text>
+<!--      <text class="text-lg font-bold mb-2">{{ serviceData.serviceName }}服务费</text>-->
-      <view class="flex justify-between items-center mb-4">
+<!--      <view class="flex justify-between items-center mb-4">-->
-        <view class="flex items-center space-x-4">
+<!--        <view class="flex items-center space-x-4">-->
-          <view class="flex flex-col items-center">
+<!--          <view class="flex flex-col items-center">-->
-            <wd-icon name="bowl" size="24" class="text-pink-500"></wd-icon>
+<!--            <wd-icon name="bowl" size="24" class="text-pink-500"></wd-icon>-->
-            <text class="text-pink-500 text-sm">食具清洁</text>
+<!--            <text class="text-pink-500 text-sm">食具清洁</text>-->
-          </view>
+<!--          </view>-->
-          <view class="flex flex-col items-center">
+<!--          <view class="flex flex-col items-center">-->
-            <wd-icon name="water" size="24" class="text-pink-500"></wd-icon>
+<!--            <wd-icon name="water" size="24" class="text-pink-500"></wd-icon>-->
-            <text class="text-pink-500 text-sm">添粮换水</text>
+<!--            <text class="text-pink-500 text-sm">添粮换水</text>-->
-          </view>
+<!--          </view>-->
-          <view class="flex flex-col items-center">
+<!--          <view class="flex flex-col items-center">-->
-            <wd-icon name="litter" size="24" class="text-pink-500"></wd-icon>
+<!--            <wd-icon name="litter" size="24" class="text-pink-500"></wd-icon>-->
-            <text class="text-pink-500 text-sm">铲屎添砂</text>
+<!--            <text class="text-pink-500 text-sm">铲屎添砂</text>-->
-          </view>
+<!--          </view>-->
-        </view>
+<!--        </view>-->
-        <text class="text-lg text-red-500">¥{{ serviceData.price }}/次</text>
+<!--        <text class="text-lg text-red-500">¥{{ serviceData.price }}/次</text>-->
-      </view>
+<!--      </view>-->
-    </view>
+<!--    </view>-->
 
     <!-- 其他费用 -->
-    <view class="bg-white p-4">
+<!--    <view class="bg-white p-4">-->
-      <text class="text-lg font-bold mb-2">其他费用</text>
+<!--      <text class="text-lg font-bold mb-2">其他费用</text>-->
-      <view class="flex justify-between items-center mb-4">
+<!--      <view class="flex justify-between items-center mb-4">-->
-        <view class="flex flex-col items-center">
+<!--        <view class="flex flex-col items-center">-->
-          <wd-icon name="home" size="24" class="text-gray-500"></wd-icon>
+<!--          <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">基础上门费</text>-->
-          <text class="text-gray-500 text-sm">1km以内23元</text>
+<!--          <text class="text-gray-500 text-sm">1km以内23元</text>-->
-        </view>
+<!--        </view>-->
-        <view class="flex flex-col items-center">
+<!--        <view class="flex flex-col items-center">-->
-          <wd-icon name="scooter" size="24" class="text-gray-500"></wd-icon>
+<!--          <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">每公里加价</text>-->
-          <text class="text-gray-500 text-sm">每多1km加10元</text>
+<!--          <text class="text-gray-500 text-sm">每多1km加10元</text>-->
-        </view>
+<!--        </view>-->
-      </view>
+<!--      </view>-->
-    </view>
+<!--    </view>-->
 
     <!-- 用户评价 -->
-    <view class="bg-white p-4">
+<!--    <view class="bg-white p-4">-->
-      <text class="text-lg font-bold mb-2">用户评价</text>
+<!--      <text class="text-lg font-bold mb-2">用户评价</text>-->
-      <view class="mb-4" v-if="serviceData.comment">
+<!--      <view class="mb-4" v-if="serviceData.comment">-->
-        <view class="flex items-center mb-2">
+<!--        <view class="flex items-center mb-2">-->
-          <text class="text-pink-500 text-lg">{{ serviceData.comment.star }}</text>
+<!--          <text class="text-pink-500 text-lg">{{ serviceData.comment.star }}</text>-->
-          <view class="flex items-center ml-2">
+<!--          <view class="flex items-center ml-2">-->
-            <wd-icon
+<!--            <wd-icon-->
-              v-for="num in serviceData.comment.star"
+<!--              v-for="num in serviceData.comment.star"-->
-              name="star-on"
+<!--              name="star-on"-->
-              size="20"
+<!--              size="20"-->
-              class="text-[#ffc107]"
+<!--              class="text-[#ffc107]"-->
-            ></wd-icon>
+<!--            ></wd-icon>-->
-          </view>
+<!--          </view>-->
-          <text class="text-gray-500 ml-2">({{ serviceData.comment.commentNum }}条评论)</text>
+<!--          <text class="text-gray-500 ml-2">({{ serviceData.comment.commentNum }}条评论)</text>-->
-        </view>
+<!--        </view>-->
-        <text class="text-gray-600">{{ serviceData.comment.comment }}</text>
+<!--        <text class="text-gray-600">{{ serviceData.comment.comment }}</text>-->
-      </view>
+<!--      </view>-->
-      <view class="text-gray-500 pt-2 w-full text-center" v-else>暂无评论</view>
+<!--      <view class="text-gray-500 pt-2 w-full text-center" v-else>暂无评论</view>-->
-    </view>
+<!--    </view>-->
 
     <!-- 底部地图展示 -->
-    <view class="flex flex-col justify-center items-center bg-[#ffff] pb-[50px]">
+<!--    <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>
+<!--      <text class="text-lg font-bold mb-2 w-full pl-[20px]" style="text-align: left">服务位置</text>-->
-      <view class="w-full h-[20vh]">
+<!--      <view class="w-full h-[20vh]">-->
-        <Map
+<!--        <Map-->
-          v-show="mapShow"
+<!--          v-show="mapShow"-->
-          :locationName="'服务位置'"
+<!--          :locationName="'服务位置'"-->
-          :initialLatitude="serviceData.latitude"
+<!--          :initialLatitude="serviceData.latitude"-->
-          :initialLongitude="serviceData.longitude"
+<!--          :initialLongitude="serviceData.longitude"-->
-        />
+<!--        />-->
-      </view>
+<!--      </view>-->
-    </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">
+<!--  <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="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>
+<!--      <view class="text-lg font-bold mb-4">选择预约信息</view>-->
 
-      <!-- 服务宠物选择 -->
+<!--      &lt;!&ndash; 服务宠物选择 &ndash;&gt;-->
-      <text class="text-sm text-gray-500 mb-2">服务宠物</text>
+<!--      <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-if="pets.length > 0" class="flex space-x-4 mb-4 scroll-x overflow-x-auto" scroll-x>-->
-        <view
+<!--        <view-->
-          v-for="pet in pets"
+<!--          v-for="pet in pets"-->
-          :key="pet.id"
+<!--          :key="pet.id"-->
-          class="flex flex-col items-center"
+<!--          class="flex flex-col items-center"-->
-          @click="selectPet(pet.id)"
+<!--          @click="selectPet(pet.id)"-->
-          :class="selectedPetId == pet.id ? 'border-4 border-[#ffc107] color-[#ffc107]' : ''"
+<!--          :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>
+<!--          <image :src="imgUrl(pet.profileUrl)" class="w-20 h-20 rounded-full object-cover"></image>-->
-          <text class="text-sm">{{ pet.name }}</text>
+<!--          <text class="text-sm">{{ pet.name }}</text>-->
-        </view>
+<!--        </view>-->
-      </view>
+<!--      </view>-->
-      <view v-else class="pet-item add-pet" @click="toPath('/modules/pet/pet/pet-add-page')">
+<!--      <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">
+<!--        <w-avatar :size="80" class="pet-avatar add-avatar">-->
-          <view class="add-icon">+</view>
+<!--          <view class="add-icon">+</view>-->
-        </w-avatar>
+<!--        </w-avatar>-->
-      </view>
+<!--      </view>-->
 
-      <!-- 预约时间 -->
+<!--      &lt;!&ndash; 预约时间 &ndash;&gt;-->
-      <text class="text-sm text-gray-500 mb-2">预约时间</text>
+<!--      <text class="text-sm text-gray-500 mb-2">预约时间</text>-->
-      <picker mode="date" :start="today" :end="weekFromToday" @change="handleDateChange">
+<!--      <picker mode="date" :start="today" :end="weekFromToday" @change="handleDateChange">-->
-        <view class="bg-gray-100 p-2 rounded mb-4">{{ reservationDate || '选择日期' }}</view>
+<!--        <view class="bg-gray-100 p-2 rounded mb-4">{{ reservationDate || '选择日期' }}</view>-->
-      </picker>
+<!--      </picker>-->
 
-      <!-- 选择预约小时 -->
+<!--      &lt;!&ndash; 选择预约小时 &ndash;&gt;-->
-      <text class="text-sm text-gray-500 mb-2">选择服务时长</text>
+<!--      <text class="text-sm text-gray-500 mb-2">选择服务时长</text>-->
-      <view>
+<!--      <view>-->
-        <wd-input-number v-model="hours" @change="hoursHandleChange" :min="1" :max="12" />
+<!--        <wd-input-number v-model="hours" @change="hoursHandleChange" :min="1" :max="12"/>-->
-      </view>
+<!--      </view>-->
 
-      <!-- 服务地址选择 -->
+<!--      &lt;!&ndash; 服务地址选择 &ndash;&gt;-->
-      <text class="text-sm text-gray-500 mb-2">选择地址</text>
+<!--      <text class="text-sm text-gray-500 mb-2">选择地址</text>-->
-      <picker
+<!--      <picker-->
-        v-if="addressList.length > 0"
+<!--        v-if="addressList.length > 0"-->
-        mode="selector"
+<!--        mode="selector"-->
-        range-key="display"
+<!--        range-key="display"-->
-        :range="addressList"
+<!--        :range="addressList"-->
-        @change="handleAddressChange"
+<!--        @change="handleAddressChange"-->
-      >
+<!--      >-->
-        <view class="bg-gray-100 p-2 rounded mb-4">
+<!--        <view class="bg-gray-100 p-2 rounded mb-4">-->
-          {{ selectedAddress.display || '请选择地址' }}
+<!--          {{ selectedAddress.display || '请选择地址' }}-->
-        </view>
+<!--        </view>-->
-      </picker>
+<!--      </picker>-->
-      <view v-else class="pet-item add-pet" @click="toPath('/modules/pet/address/index')">
+<!--      <view v-else class="pet-item add-pet" @click="toPath('/modules/pet/address/index')">-->
-        <w-avatar :size="80" class="pet-avatar add-avatar">
+<!--        <w-avatar :size="80" class="pet-avatar add-avatar">-->
-          <view class="add-icon">+</view>
+<!--          <view class="add-icon">+</view>-->
-        </w-avatar>
+<!--        </w-avatar>-->
-      </view>
+<!--      </view>-->
 
-      <!-- 操作按钮 -->
+<!--      &lt;!&ndash; 操作按钮 &ndash;&gt;-->
-      <view class="fixed bottom-0 left-0 w-full bg-white shadow-up py-[10px]">
+<!--      <view class="fixed bottom-0 left-0 w-full bg-white shadow-up py-[10px]">-->
-        <view class="flex justify-between">
+<!--        <view class="flex justify-between">-->
-          <button
+<!--          <button-->
-            class="flex-1 mx-2 py-2 px-6 bg-gray-200 text-gray-600 rounded-full"
+<!--            class="flex-1 mx-2 py-2 px-6 bg-gray-200 text-gray-600 rounded-full"-->
-            @click="closeReservationModal"
+<!--            @click="closeReservationModal"-->
-          >
+<!--          >-->
-            取消
+<!--            取消-->
-          </button>
+<!--          </button>-->
-          <button
+<!--          <button-->
-            class="flex-1 mx-2 py-2 px-6 bg-[#ffc107] text-white rounded-full"
+<!--            class="flex-1 mx-2 py-2 px-6 bg-[#ffc107] text-white rounded-full"-->
-            @click="confirmReservation"
+<!--            @click="confirmReservation"-->
-          >
+<!--          >-->
-            确认预约
+<!--            确认预约-->
-          </button>
+<!--          </button>-->
-        </view>
+<!--        </view>-->
-      </view>
+<!--      </view>-->
-    </view>
+<!--    </view>-->
-  </wd-overlay>
+<!--  </wd-overlay>-->
 
-  <LoadingAnimation v-model="loading" />
+  <LoadingAnimation v-model="loading"/>
 </template>
 
 <script lang="js" setup>
-import { ref } from 'vue'
+
-import { httpGet, httpPost } from "@/utils/http";
+import {ref} from 'vue'
-import { baseUrl, imgUrl, toast, toPath } from '@/utils/commUtils'
+import {httpGet, httpPost} from "@/utils/http";
-import { pay } from '@/logic/pay'
+import {baseUrl, imgUrl, toast, toPath} from '@/utils/commUtils'
-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,12 +342,14 @@ 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 }) => {
+const hoursHandleChange = ({value}) => {
   if (value >= 1 && value <= 12) {
     hours.value = value
   } else {
@@ -238,7 +357,8 @@ const hoursHandleChange = ({ value }) => {
   }
 }
 
-const message = () => {}
+const message = () => {
+}
 
 const detailPay = async () => {
   console.log(reservationDate.value);
@@ -257,7 +377,7 @@ const detailPay = async () => {
 
   // 调用支付宝支付
   const createOrder = await httpPost('/order/create', order)
-  if(createOrder.code === 200) {
+  if (createOrder.code === 200) {
 
   }
 
@@ -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;

src/modules/pet/service/search.vue

@@ -1,9 +1,9 @@
 <route lang="json5">
 {
-  style: {
+style: {
-    navigationBarTitleText: '选择服务',
+navigationBarTitleText: '选择服务',
-    navigationBarBackgroundColor: '#ffff',
+navigationBarBackgroundColor: '#ffff',
-  },
+},
 }
 </route>
 
@@ -75,7 +75,7 @@
     <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" />
+        <PetSitterCard :petSitter="petSitter"/>
       </view>
       <wd-loadmore
         :loading="loading"
@@ -85,18 +85,30 @@
       ></wd-loadmore>
     </view>
     <view class="pt-[80px]" v-else>
-      <EmptyState type="search" message="暂无相关服务" />
+      <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>
 
 <script setup>
-import { ref } from 'vue'
+import {ref} from 'vue'
 import PetSitterCard from '@/components/PetSitterCard.vue'
-import { httpPost } from '@/utils/http'
+import {httpPost} from '@/utils/http'
-import { imgUrl } from '@/utils/commUtils'
+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([])
@@ -104,11 +116,11 @@ const page = ref(1)
 const loading = ref(false)
 const noMoreData = ref(false)
 const serviceTypes = ref([
-  { name: 'interaction', label: '宠物互动', icon: '@/static/home/book.png' },
+  {name: 'interaction', label: '宠物互动', icon: '@/static/home/book.png'},
-  { name: 'nanny', label: '宠物月嫂', icon: '@/static/home/pb.png' },
+  {name: 'nanny', label: '宠物月嫂', icon: '@/static/home/pb.png'},
-  { name: 'canteen', label: '宠物美容', icon: '@/static/home/yl.png' },
+  {name: 'canteen', label: '宠物美容', icon: '@/static/home/yl.png'},
-  { name: 'training', label: '社交教培', icon: '@/static/home/mr.png' },
+  {name: 'training', label: '社交教培', icon: '@/static/home/mr.png'},
-  { name: 'cleaning', label: '宠物清洁', icon: '@/static/home/yl.png' },
+  {name: 'cleaning', label: '宠物清洁', icon: '@/static/home/yl.png'},
 ])
 const selectedService = ref(serviceTypes.value[0].label)
 
@@ -224,12 +236,18 @@ page {
   @apply text-gray-500;
 }
 
-.bg-[#ffc107] {
+.bg-[#ffc107
-  @apply bg-[#ffc107];
+
+]
+{
+@apply bg-[#ffc107];
 }
 
-.text-[#ffc107] {
+.text-[#ffc107
-  @apply text-[#ffc107];
+
+]
+{
+@apply text-[#ffc107];
 }
 
 .rounded-full {

src/modules/pet/space/index.vue

@@ -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) {

src/pages.json

@@ -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": "宠托师服务详情",
+            "navigationBarTitleText": "服务详情"
-            "navigationStyle": "custom"
           }
         },
         {

src/pages/index/components/quickServiceCarousel.vue

@@ -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>

src/pages/index/index.vue

@@ -1,21 +1,21 @@
 <route lang="json5">
 {
-  style: {
+style: {
-    navigationBarTitleText: "首页",
+navigationBarTitleText: '首页',
-    navigationStyle: "custom",
+navigationStyle: 'custom',
-  },
+},
 }
 </route>
 
 <template>
   <view class="container">
-    <Banner />
+    <Banner/>
-    <AddressCell />
+    <AddressCell/>
     <!-- 这里放搜索框 -->
     <!-- <view :class="['w-[70vw] pos-absolute right-0', isH5 ? 'top-[1vw]' : 'top-[8vw]']">
       <Search />
     </view> -->
-    <loading-animation v-model="isLoading" />
+    <loading-animation v-model="isLoading"/>
 
     <view class="index">
       <view
@@ -37,42 +37,23 @@
         />
       </view>
       <view class="h-1xl"></view>
-      <hurry name="萌萌哒" :distance="25" :time="45" />
+      <hurry name="萌萌哒" :distance="25" :time="45"/>
-      <view class="services">
+
-        <view
+      <view class="flex flex-col w-full">
-          class="service-card large-card"
+        <view class="services">
-          @click="toPath('/modules/pet/service/accompany')"
+          <view class="service-card large-card" @click="toPath('/modules/pet/service/accompany')">
-        >
+            <image :src="imgUrl('@/static/home/cwpb.png')" class="service-image" mode="widthFix"/>
-          <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>
-          <view
+          <view class="right-column">
-            class="service-card small-card"
+            <view class="service-card small-card" @click="toPath('/modules/pet/service/slippery')">
-            @click="toPath('/modules/pet/service/search')"
+              <image :src="imgUrl('@/static/home/cwpl.png')" class="service-image" mode="widthFix"/>
-          >
+            </view>
-            <image
+            <view class="service-card small-card" @click="toPath('/modules/pet/service/search')">
-              :src="imgUrl('@/static/home/smfw.png')"
+              <image :src="imgUrl('@/static/home/smfw.png')" class="service-image" mode="widthFix"/>
-              class="service-image"
+            </view>
-              mode="widthFix"
-            />
           </view>
         </view>
       </view>
-
       <view class="quick">
         <view class="head">
           <view class="quick-title">
@@ -83,68 +64,67 @@
             <wd-icon name="arrow-right"></wd-icon>
           </view>
         </view>
-
+        <QuickServiceCarousel/>
-        <QuickServiceCarousel />
       </view>
 
-      <RecommendedServices />
+      <RecommendedServices/>
     </view>
   </view>
 
   <!-- 引入tabBar -->
-  <Tabbar />
+  <Tabbar/>
 </template>
 
 <script setup>
-import ProfileInfo from "./components/profileInfo.vue";
+import ProfileInfo from './components/profileInfo.vue'
-import hurry from "./components/hurry.vue";
+import hurry from './components/hurry.vue'
-import QuickServiceCarousel from "./components/quickServiceCarousel.vue";
+import QuickServiceCarousel from './components/quickServiceCarousel.vue'
-import RecommendedServices from "./components/recommendedServices.vue";
+import RecommendedServices from './components/recommendedServices.vue'
-import Banner from "./components/banner.vue";
+import Banner from './components/banner.vue'
-import LoadingAnimation from "@/components/LoadingAnimation.vue";
+import LoadingAnimation from '@/components/LoadingAnimation.vue'
-import { imgUrl, toast } from "@/utils/commUtils";
+import {imgUrl, toast} from '@/utils/commUtils'
-import { httpGet } from "@/utils/http";
+import {httpGet} from '@/utils/http'
-import Tabbar from "@/components/Tabbar.vue";
+import Tabbar from '@/components/Tabbar.vue'
-import AddressCell from "@/components/AddressCell.vue";
+import AddressCell from '@/components/AddressCell.vue'
-import Search from "@/components/Search.vue";
+import Search from '@/components/Search.vue'
-import { isH5 } from "@/utils/platform";
+import {isH5} from '@/utils/platform'
 
-const isLoading = ref(false);
+const isLoading = ref(false)
-const petInfo = ref({});
+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();
+  await uni.hideTabBar()
-  isLoading.value = true;
+  isLoading.value = true
-  await getPetInfo();
+  await getPetInfo()
-  isLoading.value = false;
+  isLoading.value = false
-});
+})
 </script>
 
 <style lang="scss" scoped>

src/scss/_main.scss

@@ -1,19 +1,18 @@
 body {
   color: var(--text-a);
   background-color: var(--ui-BG-1) !important;
-  font-family:
+  font-family: system-ui,
-    system-ui,
+  -apple-system,
-    -apple-system,
+  'Segoe UI',
-    'Segoe UI',
+  Roboto,
-    Roboto,
+  'Helvetica Neue',
-    'Helvetica Neue',
+  Arial,
-    Arial,
+  'Noto Sans',
-    'Noto Sans',
+  sans-serif,
-    sans-serif,
+  'Apple Color Emoji',
-    'Apple Color Emoji',
+  'Segoe UI Emoji',
-    'Segoe UI Emoji',
+  'Segoe UI Symbol',
-    'Segoe UI Symbol',
+  'Noto Color Emoji';
-    'Noto Color Emoji';
 }
 
 /* ==================
@@ -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: ();
@@ -95,247 +111,247 @@ navigator.navigator-hover {
 
 $utilities: () !default;
 $utilities: map-merge(
-  (
+    (
-    'margin': (
+      'margin': (
-      responsive: true,
+        responsive: true,
-      property: margin,
+        property: margin,
-      class: m,
+        class: m,
-      values:
+        values:
         map-merge(
-          $spacers,
+            $spacers,
-          (
+            (
-            auto: auto,
+              auto: auto,
-          )
-        ),
-    ),
-    'margin-x': (
-      property: margin-right margin-left,
-      class: mx,
-      values:
-        map-merge(
-          $spacers,
-          (
-            auto: auto,
-          )
-        ),
-    ),
-    'margin-y': (
-      property: margin-top margin-bottom,
-      class: my,
-      values:
-        map-merge(
-          $spacers,
-          (
-            auto: auto,
-          )
-        ),
-    ),
-    'margin-top': (
-      property: margin-top,
-      class: mt,
-      values:
-        map-merge(
-          $spacers,
-          (
-            auto: auto,
-          )
-        ),
-    ),
-    'margin-right': (
-      property: margin-right,
-      class: mr,
-      values:
-        map-merge(
-          $spacers,
-          (
-            auto: auto,
-          )
-        ),
-    ),
-    'margin-bottom': (
-      property: margin-bottom,
-      class: mb,
-      values:
-        map-merge(
-          $spacers,
-          (
-            auto: auto,
-          )
-        ),
-    ),
-    'margin-left': (
-      property: margin-left,
-      class: ml,
-      values:
-        map-merge(
-          $spacers,
-          (
-            auto: auto,
-          )
-        ),
-    ),
-    'padding': (
-      responsive: true,
-      property: padding,
-      class: p,
-      values: $spacers,
-    ),
-    'padding-x': (
-      property: padding-right padding-left,
-      class: px,
-      values: $spacers,
-    ),
-    'padding-y': (
-      property: padding-top padding-bottom,
-      class: py,
-      values: $spacers,
-    ),
-    'padding-top': (
-      property: padding-top,
-      class: pt,
-      values: $spacers,
-    ),
-    'padding-right': (
-      property: padding-right,
-      class: pr,
-      values: $spacers,
-    ),
-    'padding-bottom': (
-      property: padding-bottom,
-      class: pb,
-      values: $spacers,
-    ),
-    'padding-left': (
-      property: padding-left,
-      class: pl,
-      values: $spacers,
-    ),
-    'font-weight': (
-      property: font-weight,
-      class: text,
-      values: (
-        light: $font-weight-light,
-        lighter: $font-weight-lighter,
-        normal: $font-weight-normal,
-        bold: $font-weight-bold,
-        bolder: $font-weight-bolder,
-      ),
-    ),
-    'text-align': (
-      property: text-align,
-      class: text,
-      values: left right center,
-    ),
-    'font-color': (
-      property: color,
-      class: text,
-      values:
-        map-merge(
-          $colors,
-          map-merge(
-            $grays,
-            map-merge(
-              $darks,
-              (
-                'reset': inherit,
-              )
             )
-          )
         ),
-    ),
+      ),
-    'line-height': (
+      'margin-x': (
-      property: line-height,
+        property: margin-right margin-left,
-      class: lh,
+        class: mx,
-      values: (
+        values:
-        1: 1,
+        map-merge(
-        sm: $line-height-sm,
+            $spacers,
-        base: $line-height-base,
+            (
-        lg: $line-height-lg,
+              auto: auto,
+            )
+        ),
+      ),
+      'margin-y': (
+        property: margin-top margin-bottom,
+        class: my,
+        values:
+        map-merge(
+            $spacers,
+            (
+              auto: auto,
+            )
+        ),
+      ),
+      'margin-top': (
+        property: margin-top,
+        class: mt,
+        values:
+        map-merge(
+            $spacers,
+            (
+              auto: auto,
+            )
+        ),
+      ),
+      'margin-right': (
+        property: margin-right,
+        class: mr,
+        values:
+        map-merge(
+            $spacers,
+            (
+              auto: auto,
+            )
+        ),
+      ),
+      'margin-bottom': (
+        property: margin-bottom,
+        class: mb,
+        values:
+        map-merge(
+            $spacers,
+            (
+              auto: auto,
+            )
+        ),
+      ),
+      'margin-left': (
+        property: margin-left,
+        class: ml,
+        values:
+        map-merge(
+            $spacers,
+            (
+              auto: auto,
+            )
+        ),
+      ),
+      'padding': (
+        responsive: true,
+        property: padding,
+        class: p,
+        values: $spacers,
+      ),
+      'padding-x': (
+        property: padding-right padding-left,
+        class: px,
+        values: $spacers,
+      ),
+      'padding-y': (
+        property: padding-top padding-bottom,
+        class: py,
+        values: $spacers,
+      ),
+      'padding-top': (
+        property: padding-top,
+        class: pt,
+        values: $spacers,
+      ),
+      'padding-right': (
+        property: padding-right,
+        class: pr,
+        values: $spacers,
+      ),
+      'padding-bottom': (
+        property: padding-bottom,
+        class: pb,
+        values: $spacers,
+      ),
+      'padding-left': (
+        property: padding-left,
+        class: pl,
+        values: $spacers,
+      ),
+      'font-weight': (
+        property: font-weight,
+        class: text,
+        values: (
+          light: $font-weight-light,
+          lighter: $font-weight-lighter,
+          normal: $font-weight-normal,
+          bold: $font-weight-bold,
+          bolder: $font-weight-bolder,
+        ),
+      ),
+      'text-align': (
+        property: text-align,
+        class: text,
+        values: left right center,
+      ),
+      'font-color': (
+        property: color,
+        class: text,
+        values:
+        map-merge(
+            $colors,
+            map-merge(
+                $grays,
+                map-merge(
+                    $darks,
+                    (
+                      'reset': inherit,
+                    )
+                )
+            )
+        ),
+      ),
+      'line-height': (
+        property: line-height,
+        class: lh,
+        values: (
+          1: 1,
+          sm: $line-height-sm,
+          base: $line-height-base,
+          lg: $line-height-lg,
+        ),
+      ),
+      'white-space': (
+        property: white-space,
+        class: text,
+        values: (
+          nowrap: nowrap,
+        ),
+      ),
+      'radius': (
+        property: border-radius,
+        class: radius,
+        values: (
+          null: $radius,
+          sm: $radius-sm,
+          lg: $radius-lg,
+          0: 0,
+        ),
+      ),
+      'round': (
+        property: border-radius,
+        class: round,
+        values: (
+          null: $round-pill,
+          circle: 50%,
+        ),
+      ),
+      'radius-top': (
+        property: border-top-left-radius border-top-right-radius,
+        class: radius-top,
+        values: (
+          null: $radius,
+        ),
+      ),
+      'radius-right': (
+        property: border-top-right-radius border-bottom-right-radius,
+        class: radius-right,
+        values: (
+          null: $radius,
+        ),
+      ),
+      'radius-bottom': (
+        property: border-bottom-right-radius border-bottom-left-radius,
+        class: radius-bottom,
+        values: (
+          null: $radius,
+        ),
+      ),
+      'radius-left': (
+        property: border-bottom-left-radius border-top-left-radius,
+        class: radius-left,
+        values: (
+          null: $radius,
+        ),
+      ),
+      'radius-lr': (
+        property: border-top-left-radius border-bottom-right-radius,
+        class: radius-lr,
+        values: (
+          null: $radius,
+        ),
+      ),
+      'radius-lrs': (
+        property: border-top-right-radius border-bottom-left-radius,
+        class: radius-lr,
+        values: (
+          null: 0,
+        ),
+      ),
+      'radius-rl': (
+        property: border-top-right-radius border-bottom-left-radius,
+        class: radius-rl,
+        values: (
+          null: $radius,
+        ),
+      ),
+      'radius-rls': (
+        property: border-top-left-radius border-bottom-right-radius,
+        class: radius-rl,
+        values: (
+          null: 0,
+        ),
       ),
     ),
-    'white-space': (
+    $utilities
-      property: white-space,
-      class: text,
-      values: (
-        nowrap: nowrap,
-      ),
-    ),
-    'radius': (
-      property: border-radius,
-      class: radius,
-      values: (
-        null: $radius,
-        sm: $radius-sm,
-        lg: $radius-lg,
-        0: 0,
-      ),
-    ),
-    'round': (
-      property: border-radius,
-      class: round,
-      values: (
-        null: $round-pill,
-        circle: 50%,
-      ),
-    ),
-    'radius-top': (
-      property: border-top-left-radius border-top-right-radius,
-      class: radius-top,
-      values: (
-        null: $radius,
-      ),
-    ),
-    'radius-right': (
-      property: border-top-right-radius border-bottom-right-radius,
-      class: radius-right,
-      values: (
-        null: $radius,
-      ),
-    ),
-    'radius-bottom': (
-      property: border-bottom-right-radius border-bottom-left-radius,
-      class: radius-bottom,
-      values: (
-        null: $radius,
-      ),
-    ),
-    'radius-left': (
-      property: border-bottom-left-radius border-top-left-radius,
-      class: radius-left,
-      values: (
-        null: $radius,
-      ),
-    ),
-    'radius-lr': (
-      property: border-top-left-radius border-bottom-right-radius,
-      class: radius-lr,
-      values: (
-        null: $radius,
-      ),
-    ),
-    'radius-lrs': (
-      property: border-top-right-radius border-bottom-left-radius,
-      class: radius-lr,
-      values: (
-        null: 0,
-      ),
-    ),
-    'radius-rl': (
-      property: border-top-right-radius border-bottom-left-radius,
-      class: radius-rl,
-      values: (
-        null: $radius,
-      ),
-    ),
-    'radius-rls': (
-      property: border-top-left-radius border-bottom-right-radius,
-      class: radius-rl,
-      values: (
-        null: 0,
-      ),
-    ),
-  ),
-  $utilities
 );
 @each $key, $utility in $utilities {
   @if type-of($utility) == 'map' {
@@ -349,9 +365,9 @@ $utilities: map-merge(
         $properties: append((), $properties);
       }
       $property-class: if(
-        map-has-key($utility, class),
+          map-has-key($utility, class),
-        map-get($utility, class),
+          map-get($utility, class),
-        nth($properties, 1)
+          nth($properties, 1)
       );
       $property-class: if($property-class == null, '', $property-class);
       $property-class-modifier: if($key, if($property-class == '', '', '-') + $key, '');

src/store/routers.js

@@ -19,12 +19,12 @@ export const useRoutersStore = defineStore(
         pagePath: '/modules/pet/space/index',
         text: '互动空间',
       },
-      {
+      // {
-        iconPath: '/static/tabbar/24gl-paperPlane.png',
+      //   iconPath: '/static/tabbar/24gl-paperPlane.png',
-        selectedIconPath: '/static/tabbar/24gl-paperPlaneL.png',
+      //   selectedIconPath: '/static/tabbar/24gl-paperPlaneL.png',
-        pagePath: '/modules/pet/push/index',
+      //   pagePath: '/modules/pet/push/index',
-        text: '发布',
+      //   text: '发布',
-      },
+      // },
       {
         iconPath: '/static/tabbar/message.png',
         selectedIconPath: '/static/tabbar/messageL.png',

src/types/uni-pages.d.ts

@@ -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" |

src/utils/commUtils.js

@@ -115,8 +115,5 @@ export const isCancelOrder = (state) => {
   return state === "待支付" || state === "已支付"
 }
 
-
 // 判断是否能取消订单【宠托师】
-export const isTakeCancelOrder = (state) => {
+export const isTakeCancelOrder = (state) => state === "待接单"
-  return state === "待接单"
-}