From d2f8c63d705d45405f4366507f5714e1f1227db5 Mon Sep 17 00:00:00 2001
From: 396316021 <396316021@qq.com>
Date: Wed, 13 Sep 2023 18:03:34 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=A0=E7=89=A9=E6=96=B0=E5=A2=9E&=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9&=E9=80=89=E6=8B=A9=20=E8=AE=A2=E5=8D=95=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E7=BB=84=E4=BB=B6,=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/PetPage/components/index.scss | 213 +++++++
 components/PetPage/index.vue             | 684 +++++++++++++++++++++--
 pages/OrderPage/index.vue                | 120 +++-
 pages/Pet/create.vue                     |   3 +-
 pages/PetDetail/index.vue                |  18 +-
 utils/functions.js                       |   2 +-
 6 files changed, 975 insertions(+), 65 deletions(-)

diff --git a/components/PetPage/components/index.scss b/components/PetPage/components/index.scss
index 3e79535..9559b3e 100644
--- a/components/PetPage/components/index.scss
+++ b/components/PetPage/components/index.scss
@@ -29,4 +29,217 @@
 			}
 		}
 	}
+}
+.order-screen-container{
+	.order-screen{
+		padding:40rpx 0 20rpx 0;
+		padding-right: 66rpx;
+		font-size: 28rpx;
+		line-height: 53rpx;
+		color:#646464;
+		font-weight: 400;
+		&.active{
+			color:#000000;
+			font-size: 32rpx;
+			font-weight: 500;
+			.order-screen-active{
+				display:flex;
+			}
+		}
+		.order-screen-active{
+			display: none;
+			align-items: center;
+			justify-content: center;
+			.img{
+				width:37rpx;
+			}
+		}
+
+	}
+	.order-screen-time-container{
+		flex:1;
+		margin-left:auto;
+		justify-content: flex-end;
+		.order-screen{
+			// padding-right:0;
+		}
+	}
+	.order-screen-time-title{
+		color:#B5B5B5;
+		font-size:26rpx;
+		font-weight: 400;
+		line-height:53rpx;
+		padding-right: 16rpx;
+	}
+	.order-screen-time-buttton-container{
+		padding-right: 0;
+	}
+	.order-screen-time-buttton{
+		padding:8rpx 19rpx;
+		color:#4EC2B7;
+		font-size: 28rpx;
+		font-weight: 400;
+		background-color:#ffffff;
+		border:1px solid #4EC2B7;
+		border-radius: 10rpx;
+		line-height: 28rpx;
+		box-shadow: 0rpx 4rpx 5rpx 0rpx rgba(82,84,84,0.1), 2rpx -4rpx 0rpx 0rpx rgba(78,194,183,0.2);
+	}
+}
+.order-list-container{
+	width:100%;
+	//max-height: 1000rpx;
+	height: 100%;
+	overflow: auto;
+	box-sizing: border-box;
+
+	.order-list-item{
+		position: relative;
+		.pet-gun{
+			background:{
+				size: 80% 100%;
+				repeat: no-repeat;
+				position: center center;
+			}
+			height:90rpx;
+			width:100%;
+			position: absolute;
+			top:-60rpx;
+			z-index: 1;
+		}
+		margin-bottom:30rpx;
+		width:100%;
+		box-sizing: border-box;
+		.order-card-container{
+			width:100%;
+			box-sizing: border-box;
+			padding:10rpx 10rpx;
+			position: relative;
+			box-sizing: border-box;
+			.order-card-container-background{
+
+				width:100%;
+				height:90%;
+				position: absolute;
+				left:0rpx;
+				z-index: -1;
+				bottom:0rpx;
+				border: 3rpx solid #262626;
+				box-shadow: 2rpx 6rpx 11rpx 0rpx rgba(159,167,185,0.3);
+				border-radius: 26rpx;
+				background: {
+					color:#EED9AD;
+				};
+			}
+			.order-card-container-background-main{
+
+				width:100%;
+				background:{
+					color:#FFFFFF;
+				}
+				border-radius: 26rpx;
+				border: 3rpx solid #262626;
+				padding:7rpx;
+				box-sizing:border-box;
+				.order-card-col{
+					width:100%;
+					box-sizing: border-box;
+					padding:20rpx;
+					background:{
+						size:100% 100%;
+						position: center center;
+						repeat:no-repeat;
+					}
+				}
+			}
+
+
+			.order-card-left{
+				align-items: center;
+				.left-background{
+					box-sizing: border-box;
+					width:135rpx;
+					height:135rpx;
+					border-radius: 50%;
+					align-items: center;
+					justify-content: center;
+					display: flex;
+					background:{
+						color:#EED9AD;
+					}
+				}
+
+				//height:auto;
+				margin-right: 25rpx;
+				.img{
+					width:110rpx;
+					height:110rpx;
+					border-radius: 50%;
+				}
+			}
+			.order-card-right{
+				border-radius: 30rpx;
+				align-items: center;
+				justify-content: center;
+				background:{
+					color:#FBF5E7;
+				}
+				text-align: center;
+				padding:30rpx;
+				padding-left:20rpx;
+				.order-card-title{
+					padding-top:5px;
+					font-size:32rpx;
+					font-weight: 500;
+					line-height: 30rpx;
+					color:#131313;
+				}
+				.order-card-tag-container{
+					padding-top:18rpx;
+					.order-card-tag{
+						padding:9rpx 20rpx;
+						background:{
+							color:#E9FBF7;
+						}
+						color:#4DC3B8;
+						font-size:26rpx;
+						font-weight:400;
+						line-height:1;
+						border-radius:6rpx;
+						&+.order-card-tag{
+							margin-left:9rpx;
+						}
+					}
+				}
+				.order-card-day{
+
+				}
+				.order-card-pay-time{
+
+				}
+				.order-card-day,.order-card-pay-time{
+					padding-top:20rpx;
+					font-size:28rpx;
+					font-weight:400;
+					line-height:30rpx;
+					color:#767676;
+					.card-label{
+						color:#1B1B1B;
+					}
+				}
+			}
+			.order-card-bottom{
+				padding-top:30rpx;
+				justify-content: center;
+			}
+			.card-button{
+				&:nth-child(1){
+					padding-right:23rpx;
+				}
+				&:nth-child(2){
+					padding-left:23rpx;
+				}
+			}
+		}
+	}
 }
\ No newline at end of file
diff --git a/components/PetPage/index.vue b/components/PetPage/index.vue
index a1d834e..de59b86 100644
--- a/components/PetPage/index.vue
+++ b/components/PetPage/index.vue
@@ -1,20 +1,20 @@
 <template>
-	<view class="pet-page-container" :style="{width:buttonWidth}">
+	<view class="pet-page-container" :style="{width:buttonWidth}"  v-if="type === 'create'">
     <view class="pet-page-capsule-container row">
       <view class="pet-page-capsule col-4" v-for="(item,index) in petTypeList"
-            :class="{active:(index === petTypeChecked)}" @click="selectPetType(index)">
+            :class="{active:(item.value === data.type)}" @click="selectPetType(item.value)">
         {{item.label}}
       </view>
     </view>
 	</view>
-  <view class="pet-page-group row">
+  <view class="pet-page-group row" v-if="type === 'create'">
     <view class="order-item row">
       <view class="item-title">
         宝贝姓名
       </view>
       <view class="item-content row col">
         <view class="item-content-text">
-          <u-input inputAlign="right" placeholder="请输入"></u-input>
+          <u-input v-model="data.name" inputAlign="right" placeholder="请输入"></u-input>
         </view>
       </view>
     </view>
@@ -25,7 +25,7 @@
       </view>
       <view class="item-content row col">
         <view class="item-content-text">
-          <u-input inputAlign="right" placeholder="请输入"></u-input>
+          <u-input v-model="data.type_name" inputAlign="right" placeholder="请输入"></u-input>
         </view>
       </view>
     </view>
@@ -35,7 +35,7 @@
       </view>
       <view class="item-content row col">
         <view class="item-content-text">
-          <u-number-box :min="1" :max="1000" button-size="36" inputWidth="50" buttonSize="50"></u-number-box>
+          <u-number-box  v-model="data.weight" :min="1" :max="1000" button-size="36" inputWidth="50" buttonSize="50"></u-number-box>
         </view>
       </view>
     </view>
@@ -45,7 +45,15 @@
       </view>
       <view class="item-content row col">
         <view class="item-content-text">
-          <u-text suffix-icon="arrow-right" text="请选择" size="28" color="#636363" icon-style="font-size:30" line-height="30"></u-text>
+          <u-text
+              suffix-icon="arrow-right"
+              :text="data.birthday || '请选择'"
+              size="28"
+              color="#636363"
+              icon-style="font-size:30"
+              line-height="30"
+              @click="$refs.birthdayPicker.open()"
+          ></u-text>
         </view>
       </view>
     </view>
@@ -55,7 +63,15 @@
       </view>
       <view class="item-content row col">
         <view class="item-content-text">
-          <u-text suffix-icon="arrow-right" text="请选择" size="28" color="#636363" icon-style="font-size:30" line-height="30"></u-text>
+          <u-text
+              suffix-icon="arrow-right"
+              :text="data.sex_name || '请选择'"
+              size="28"
+              color="#636363"
+              icon-style="font-size:30"
+              line-height="30"
+              @click="$refs.pickerSex.open()"
+          ></u-text>
         </view>
       </view>
     </view>
@@ -65,7 +81,15 @@
       </view>
       <view class="item-content row col">
         <view class="item-content-text">
-          <u-text suffix-icon="arrow-right" text="请选择" size="28" color="#636363" icon-style="font-size:30" line-height="30"></u-text>
+          <u-text
+              suffix-icon="arrow-right"
+              :text="data.last_vaccine_time || '请选择'"
+              size="28"
+              color="#636363"
+              icon-style="font-size:30"
+              line-height="30"
+              @click="$refs.vaccinePicker.open()"
+          ></u-text>
         </view>
       </view>
     </view>
@@ -75,7 +99,15 @@
       </view>
       <view class="item-content row col">
         <view class="item-content-text">
-          <u-text suffix-icon="arrow-right" text="请选择" size="28" color="#636363" icon-style="font-size:30" line-height="30"></u-text>
+          <u-text
+              suffix-icon="arrow-right"
+              :text="data.last_insect_repellent_time || '请选择'"
+              size="28"
+              color="#636363"
+              icon-style="font-size:30"
+              line-height="30"
+              @click="$refs.insectRepellentPicker.open()"
+          ></u-text>
         </view>
       </view>
     </view>
@@ -85,20 +117,66 @@
       </view>
       <view class="item-content row col">
         <view class="item-content-text">
-          <u-text suffix-icon="arrow-right" text="请选择" size="28" color="#636363" icon-style="font-size:30" line-height="30"></u-text>
+          <u-text
+              suffix-icon="arrow-right"
+              :text="data.is_home_name || '请选择'"
+              size="28"
+              color="#636363"
+              icon-style="font-size:30"
+              line-height="30"
+              @click="$refs.pickerHome.open()"
+          ></u-text>
         </view>
       </view>
     </view>
     <view class="order-item row">
-      <view class="item-title">
-        宝贝图片
+      <view class="item-title" style="padding-bottom:30rpx;">
+        过往病史
       </view>
-      <view class="item-content row col">
-        <view class="item-content-text">
+      <view class="item-content row">
+        <view class="item-content-text row">
+          <u-textarea
+              placeholder="请输入"
+              v-model="data.remarks"
+              size="28"
+              color="#636363"
+              line-height="30"
+              height="100"
+          ></u-textarea>
+        </view>
+      </view>
+    </view>
+    <view class="order-item row">
+      <view class="item-title" style="padding-bottom:30rpx;">
+        宝贝头像
+      </view>
+      <view class="item-content row">
+        <view class="item-content-text row">
           <u-upload
               width="160"
               height="160"
-              :fileList="imageList"
+              :fileList="avatarList"
+              name="img"
+              multiple
+              :maxCount="1"
+              :previewFullImage="true"
+              uploadIcon="plus"
+              @afterRead="afterAvatarRead"
+              @delete="deleteAvatar"
+          ></u-upload>
+        </view>
+      </view>
+    </view>
+    <view class="order-item row">
+      <view class="item-title" style="padding-bottom:30rpx;">
+        宝贝相册
+      </view>
+      <view class="item-content row">
+        <view class="item-content-text row">
+          <u-upload
+              width="160"
+              height="160"
+              :fileList="imagesList"
               name="img"
               multiple
               :maxCount="10"
@@ -111,29 +189,107 @@
       </view>
     </view>
     <view class="order-item row">
-      <view class="item-title">
+      <view class="item-title" style="padding-bottom:30rpx;">
+        宝贝背景图
+      </view>
+      <view class="item-content row">
+        <view class="item-content-text row">
+          <u-upload
+              width="160"
+              height="160"
+              :fileList="backgroundList"
+              name="img"
+              multiple
+              :maxCount="1"
+              :previewFullImage="true"
+              uploadIcon="plus"
+              @afterRead="afterBackgroundRead"
+              @delete="deleteBackground"
+          ></u-upload>
+        </view>
+      </view>
+    </view>
+
+    <view class="order-item row">
+      <view class="item-title" style="padding-bottom:30rpx;">
         宝贝视频
       </view>
-      <view class="item-content row col">
-        <view class="item-content-text">
+      <view class="item-content row">
+        <view class="item-content-text row">
           <u-upload
               width="160"
               height="160"
-              :fileList="imageList"
+              :fileList="videoList"
               name="img"
               multiple
-              :maxCount="10"
+              :maxCount="1"
               :previewFullImage="true"
               uploadIcon="plus"
-              @afterRead="afterImgRead"
-              @delete="deleteImg"
+              @afterRead="afterVideoRead"
+              @delete="deleteVideo"
           ></u-upload>
         </view>
       </view>
     </view>
   </view>
+
+  <view class="pet-list" v-if="type === 'lists'">
+    <view class="order-screen-container row">
+      <view class="order-list-container">
+        <view class="order-list-item" v-for="(item,index) in petCheckList">
+          <view
+              @click="delPetCheck(index)"
+              class="close-icon"
+              style="position:absolute;right:0rpx;top:0rpx;z-index:2;background-color:#fff;border-radius: 50%;"
+          >
+            <u-image :src="staticImage.closeIcon" mode="widthFix" width="40" height="40"></u-image>
+          </view>
+          <view v-if="index!==0" class="pet-gun" :style="{
+          backgroundImage:'url('+staticImage.petGun+')'
+          }"></view>
+          <view class="order-card-container row">
+            <view class="order-card-container-background col-12"></view>
+            <view class="order-card-container-background-main row">
+              <view class="order-card-col row">
+                <view class="order-card-left">
+                  <view class="left-background">
+                    <image class="img" :src="item.avatar" mode="aspectFill" />
+                  </view>
+                </view>
+                <view class="order-card-right col row">
+                  <view class="col">
+                    <view class="name ">{{ item.name }}</view>
+                    <view class="old">{{ item.age }}岁</view>
+                  </view>
+                  <view class="col">
+                    <view class="type">{{ item.type_name }}</view>
+                    <view class="weight">{{ item.weight }}kg</view>
+                  </view>
+                </view>
+
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+
   <view class="pet-page-button row">
-    <view class="col-12" style="justify-content: center;" v-if="type === 'lists'">
+    <view class="col-6" style="justify-content: center;" v-if="type === 'lists'">
+      <view class="" style="display: inline-block;">
+        <MzButton
+            title="选择萌宠"
+            button-color="#FFFFFF"
+            font-color="#262626"
+            button-width="300rpx"
+            class=""
+            @click="$refs.petPopup.open()"
+        >
+        </MzButton>
+      </view>
+    </view>
+    <view class="col-6" style="justify-content: center;" v-if="type === 'lists'">
       <view class="" style="display: inline-block;">
         <MzButton
             title="添加萌宠"
@@ -141,6 +297,7 @@
             font-color="#262626"
             button-width="300rpx"
             class=""
+            @click="type = 'create'"
         >
         </MzButton>
       </view>
@@ -152,6 +309,7 @@
           font-color="#262626"
           button-width="300rpx"
           class=""
+          @click="type = 'lists'"
       >
       </MzButton>
     </view>
@@ -167,13 +325,177 @@
       </MzButton>
     </view>
   </view>
+  <uv-datetime-picker
+      :value="data.birthday"
+      ref="birthdayPicker"
+      mode="date"
+      minDate="1970-01-01"
+      @confirm="birthdayConfirm"
+  ></uv-datetime-picker>
+  <uv-datetime-picker
+      :value="data.last_vaccine_time"
+      ref="vaccinePicker"
+      mode="date"
+      minDate="1970-01-01"
+      @confirm="vaccineConfirm"
+  ></uv-datetime-picker>
+  <uv-datetime-picker
+      :value="data.last_insect_repellent_time"
+      ref="insectRepellentPicker"
+      mode="date"
+      minDate="1970-01-01"
+      @confirm="insectRepellentConfirm"
+  ></uv-datetime-picker>
+  <uv-picker :columns="[homeList]" ref="pickerHome" key-name="name" title="是否有户口" round="20rpx" @confirm="homeSelect"></uv-picker>
+  <uv-picker :columns="[sexList]" ref="pickerSex" key-name="name" title="宝贝性别" round="20rpx" @confirm="sexSelect"></uv-picker>
+  <uv-popup ref="popup" style="position: relative;" :is-mask-click="false" round="20" mode="bottom" closeable safe-area-inset-bottom safe-area-inset-top>
+    <view class="pet-list" style="padding:30rpx;max-height:50vh;overflow: auto;">
+      <view class="order-screen-container row">
+        <view class="order-list-container">
+          <view class="order-list-item" v-for="(item,index) in petList" @click="">
+            <view v-show="index!==0" class="pet-gun" :style="{
+          backgroundImage:'url('+staticImage.petGun+')'
+          }"></view>
+            <view class="order-card-container row">
+              <view class="order-card-container-background col-12"></view>
+              <view class="order-card-container-background-main row">
+                <view class="order-card-col row">
+                  <view class="order-card-left">
+                    <view class="left-background">
+                      <image class="img" :src="item.avatar" mode="aspectFill" />
+                    </view>
+                  </view>
+                  <view class="order-card-right col row">
+                    <view class="col">
+                      <view class="name ">{{ item.name }}</view>
+                      <view class="old">{{ item.age }}岁</view>
+                    </view>
+                    <view class="col">
+                      <view class="type">{{ item.type_name }}</view>
+                      <view class="weight">{{ item.weight }}kg</view>
+                    </view>
+                  </view>
+
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <u-loadmore :status="status" fontSize="28"
+                  color="#ACB4B6"
+                  line
+                  line-color="#ACB4B6"
+                  marginBottom="30" marginTop="30" @loadmore="getMyPets()"/>
+
+    </view>
+    <view class="pop-service-container">
+      <u-cell-group custom-style="max-height:700rpx;overflow:auto;">
+        <u-cell
+            size="large"
+            :title="item.name"
+            isLink
+            right-icon=""
+            v-for="(item,index) in addServiceList"
+            @click="selectAddService(index)"
+        >
+          <template #value>
+            <view class="">
+              <view class="" style="display:flex;align-items: center">
+                <view class="">
+                  <u-text :text="parseFloat(item.price)+'元'" size="32" style="white-space: nowrap;" line-height="32"></u-text>
+                </view>
+                <view class="">
+                  <u-checkbox-group>
+                    <u-checkbox
+                        :customStyle="{marginBottom: '0',marginTop: '0',marginLeft:'15rpx'}"
+                        size="32"
+                        :checked="item.checked"
+                        activeColor="#4DC3B8"
+                        iconSize="30"
+                    >
+                    </u-checkbox>
+                  </u-checkbox-group>
+                </view>
+              </view>
+            </view>
+          </template>
+        </u-cell>
+      </u-cell-group>
+      <view class="row" style="padding-top:30rpx;">
+        <view class="col-6" style="padding:0 30rpx;">
+          <MzButton title="取消" @click="$refs.popup.close()"></MzButton>
+        </view>
+        <view class="col-6" style="padding:0 30rpx;">
+          <MzButton title="确认" @click="addServiceConfirm" button-color="#4DC3B8" font-color="#fff"></MzButton>
+        </view>
+      </view>
+    </view>
+  </uv-popup>
+
+  <uv-popup ref="petPopup" mode="bottom" round="20" closeable safeAreaInsetTop safeAreaInsetBottom custom-style="position:relative;">
+    <view class="title row" style="position:absolute;justify-content: center;width:100%;top:20rpx;left:0;">
+      <view class="value col" style="position: relative;text-align: center;">
+
+        <!--        <u-text text="协议内容" size="38" color="#191919"></u-text>-->
+        <view class="" style="position: relative;display:inline-block;">
+          <view style="color:#191919;font-size:38rpx;display:inline-block;position: relative;z-index: 2;">选择宠物</view>
+          <view class="background" style="width:100%;height:50%;position: absolute;bottom:0;left:0;background-color:rgba(227, 191, 119, 0.6);display:inline-block;z-index:1;"></view>
+        </view>
+      </view>
+    </view>
+    <view class="pop-service-container">
+      <u-cell-group custom-style="max-height:700rpx;overflow:auto;">
+        <u-cell
+            size="large"
+            :title="item.name"
+            :label="item.type_name"
+            isLink
+            right-icon=""
+            v-for="(item,index) in petList"
+            @click="selectPet(index)"
+        >
+          <template #value>
+            <view class="">
+              <view class="" style="display:flex;align-items: center">
+                <view class="">
+                  <u-text :text="parseFloat(item.weight)+'KG'" size="32" style="white-space: nowrap;" line-height="32"></u-text>
+                </view>
+                <view class="">
+                  <u-checkbox-group>
+                    <u-checkbox
+                        :customStyle="{marginBottom: '0',marginTop: '0',marginLeft:'15rpx'}"
+                        size="32"
+                        :checked="item.checked"
+                        activeColor="#4DC3B8"
+                        iconSize="30"
+                    >
+                    </u-checkbox>
+                  </u-checkbox-group>
+                </view>
+              </view>
+            </view>
+          </template>
+        </u-cell>
+      </u-cell-group>
+      <view class="row" style="padding-top:30rpx;">
+        <view class="col-6" style="padding:0 30rpx;">
+          <MzButton title="取消" @click="$refs.petPopup.close()"></MzButton>
+        </view>
+        <view class="col-6" style="padding:0 30rpx;">
+          <MzButton title="确认" @click="addServiceConfirm" button-color="#4DC3B8" font-color="#fff"></MzButton>
+        </view>
+      </view>
+    </view>
+  </uv-popup>
 </template>
 
 <script>
 	import { imghost } from '@/config/host.js';
   import MzButton from "@/components/MzButton/Index.vue";
-  import {editPet} from "@/api/pet";
+  import {editPet, getDetail, getMyPets} from "@/api/pet";
   import {getSTS} from "@/api/other";
+  import api from "@/utils/functions";
 
   export default{
 		name:'PetPage',
@@ -222,60 +544,314 @@
 				type:Boolean,
 				default:false,
 			},
+      petId:{
+				type:Number,
+				default:0,
+			},
 		},
     components:{
       MzButton
     },
 		data() {
 			return {
+        petList:[],
+        petCheckList:[],
+        status:'loadmore',
 				loading: true,
 				buttonBackground:imghost+"/static/image/small-button-background.png",
 				staticImage:{
+          closeIcon:imghost + '/static/image/close-icon.png',
 					buttonBackground:imghost+'/static/image/small-button-background.png'
 				},
+        homeList:[
+          {name:'是',value:1},
+          {name:'否',value:0},
+        ],
+        sexList:[
+          {name:'未知',value:0},
+          {name:'男',value:1},
+          {name:'女',value:2},
+          {name:'其他',value:9},
+        ],
         petTypeList:[
           {
             label:'喵喵',
-            value:'1',
+            value:1,
           },{
             label:'汪汪',
-            value:'2',
+            value:2,
           },{
             label:'其他萌宠',
-            value:'3',
+            value:3,
           },
         ],
-        petTypeChecked:0,
+        data:{
+          type:1,
+          remarks :'',
+          weight:1,
+          sex_name:'未知',
+          sex:0,
+          is_home:0,
+          is_home_name:'否',
+          birthday:'',
+          last_vaccine_time:'',
+          last_insect_repellent_time:'',
+          avatar:'',
+          video:'',
+          images:'',
+          background_image:''
+        },
+        videoList:[],
+        imagesList:[],
+        backgroundList:[],
+        avatarList:[],
 			}
 		},
-		onLoad() {
-		
-		},
+    mounted() {
+      let date = new Date();
+      let today = ''+date.getFullYear();
+      today += '-'+ (date.getMonth() + 1);
+      today += '-'+ date.getDate();
+      console.log(today)
+      console.log(date.getMonth())
+      this.data.birthday = this.data.last_vaccine_time = this.data.last_insect_repellent_time = today;
+      if(this.petId!==0){
+        this.getDetail(this.petId)
+      }
+      if(this.type === 'lists'){
+        this.getMyPets()
+      }
+    },
 		methods: {
-      selectPetType(index){
-        this.petTypeChecked = index;
+      delPetCheck(index){
+        this.petCheckList.splice(index,1);
+        this.$emit('del',index)
       },
-      submit(){
-        let data = {
-          "id": "",
-            "avatar": "",
-            "name": "124123",
-            "type_name": "12412",
-            "type": "1",
-            "weight": "12",
-            "birthday": "2020/01/04",
-            "sex": "1",
-            "last_vaccine_time": "",
-            "last_insect_repellent_time": "",
-            "remarks": "121122",
-            "is_home": "1",
-            "video": ""
+      selectPet(index){
+        this.petList[index].checked = !this.petList[index].checked;
+      },
+      addServiceConfirm(){
+        this.petList.map(item => {
+          if(item.checked){
+            this.petCheckList.push(item);
+          }
+        })
+        this.$refs.petPopup.close();
+        this.$emit('change',this.petCheckList)
+      },
+      getMyPets(page = 1){
+        if (this.status === 'nomore') {
+          return;
         }
-        // editPet(data).then(res => {
-        //   console.log(res)
-        // })
-        getSTS({}).then(res => {
-          console.log(res)
+        this.status = 'loading';
+        getMyPets(page).then(data => {
+          if (page === 1){
+            this.petList = data.data.map(item => {
+              item.checked = false;
+              return item;
+            });
+          }else{
+            this.petList.push.apply(this.petList,data.data);
+          }
+          if (data.data.length < 10) {
+            this.status = 'nomore';
+          }
+        });
+      },
+      getDetail(id){
+        getDetail(id).then(res => {
+          this.data = res.data;
+          this.data.birthday = this.data.birthday.substr(0, 10);
+          this.data.last_vaccine_time = this.data.last_vaccine_time.substr(0, 10);
+          this.data.last_insect_repellent_time = this.data.last_insect_repellent_time.substr(0, 10);
+          this.sexList.forEach(res=>{
+            if(res.value===this.data.sex){
+              this.data.sex_name = res.name;
+            }
+          });
+          this.homeList.forEach(res=>{
+            if(res.value===this.data.is_home){
+              this.data.is_home_name = res.name;
+            }
+          });
+          this.avatarList = res.data.avatar.split(',').map(item => {
+            return {url:item};
+          });
+          this.imagesList = res.data.images.map(item => {
+            return {url:item};
+          });
+          this.videoList = res.data.video.split(',').map(item => {
+            return {url:item};
+          });
+          this.backgroundList = res.data.background_image.split(',').map(item => {
+            return {url:item};
+          });
+        })
+      },
+      async afterImgRead  (event){
+        let lists = [].concat(event.file);
+
+        let fileListLen = this.imagesList.length;
+        lists.map((item) => {
+          this.imagesList.push({
+            ...item,
+            status: 'uploading',
+            message: '上传中',
+          });
+        });
+        for (let i = 0; i < lists.length; i++) {
+
+          api.uploadOssFile(lists[i].url).then(res => {
+            let item = this.imagesList[fileListLen];
+            this.imagesList.splice(fileListLen, 1, {
+              ...item,
+              status: 'success',
+              message: '',
+              url: res.show_path,
+              thumb: res.show_path,
+            });
+            fileListLen++;
+          })
+        }
+      },
+      async afterVideoRead  (event){
+        let lists = [].concat(event.file);
+
+        let fileListLen = this.videoList.length;
+        lists.map((item) => {
+          this.videoList.push({
+            ...item,
+            status: 'uploading',
+            message: '上传中',
+          });
+        });
+        for (let i = 0; i < lists.length; i++) {
+
+          api.uploadOssFile(lists[i].url).then(res => {
+            let item = this.videoList[fileListLen];
+            this.videoList.splice(fileListLen, 1, {
+              ...item,
+              status: 'success',
+              message: '',
+              url: res.show_path,
+              thumb: res.show_path,
+            });
+            fileListLen++;
+          })
+        }
+      },
+      async afterAvatarRead  (event){
+        let lists = [].concat(event.file);
+
+        let fileListLen = this.avatarList.length;
+        lists.map((item) => {
+          this.avatarList.push({
+            ...item,
+            status: 'uploading',
+            message: '上传中',
+          });
+        });
+        for (let i = 0; i < lists.length; i++) {
+
+          api.uploadOssFile(lists[i].url).then(res => {
+            let item = this.avatarList[fileListLen];
+            this.avatarList.splice(fileListLen, 1, {
+              ...item,
+              status: 'success',
+              message: '',
+              url: res.show_path,
+              thumb: res.show_path,
+            });
+            fileListLen++;
+          })
+        }
+      },
+      async afterBackgroundRead  (event){
+        let lists = [].concat(event.file);
+
+        let fileListLen = this.backgroundList.length;
+        lists.map((item) => {
+          this.backgroundList.push({
+            ...item,
+            status: 'uploading',
+            message: '上传中',
+          });
+        });
+        for (let i = 0; i < lists.length; i++) {
+
+          api.uploadOssFile(lists[i].url).then(res => {
+            let item = this.backgroundList[fileListLen];
+            this.backgroundList.splice(fileListLen, 1, {
+              ...item,
+              status: 'success',
+              message: '',
+              url: res.show_path,
+              thumb: res.show_path,
+            });
+            fileListLen++;
+          })
+        }
+      },
+      deleteImg(event){
+        this.imagesList.splice(event.index, 1);
+      },
+      deleteVideo(event){
+        this.videoList.splice(event.index, 1);
+      },
+      deleteAvatar(event){
+        this.avatarList.splice(event.index, 1);
+      },
+      deleteBackground(event){
+        this.backgroundList.splice(event.index, 1);
+      },
+      homeSelect(e){
+        this.data.is_home_name = e.value[0].name;
+        this.data.is_home = e.value[0].value;
+      },
+      sexSelect(e){
+        this.data.sex_name = e.value[0].name;
+        this.data.sex = e.value[0].value;
+      },
+      formatter(type, value) {
+        if (type === 'year') {
+          return `${value}年`
+        }
+        if (type === 'month') {
+          return `${value}月`
+        }
+        if (type === 'day') {
+          return `${value}日`
+        }
+        return value
+      },
+      birthdayConfirm(e){
+        this.data.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
+      },
+      vaccineConfirm(e){
+        this.data.last_vaccine_time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
+      },
+      insectRepellentConfirm(e){
+        this.data.last_insect_repellent_time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
+      },
+      selectPetType(value){
+        this.data.type = value;
+      },
+      submit(){
+        this.data.avatar = this.avatarList.map(item => {
+          return item.url;
+        }).join(',');
+        this.data.video = this.videoList.map(item => {
+          return item.url;
+        }).join(',');
+        this.data.background_image = this.backgroundList.map(item => {
+          return item.url;
+        }).join(',');
+        this.data.images = this.imagesList.map(item => {
+          return item.url;
+        }).join(',');
+        editPet(this.data).then(res => {
+          api.success('添加成功');
+          uni.navigateBack();
         })
       }
 		}
diff --git a/pages/OrderPage/index.vue b/pages/OrderPage/index.vue
index 46b2b05..b09c28c 100644
--- a/pages/OrderPage/index.vue
+++ b/pages/OrderPage/index.vue
@@ -48,7 +48,7 @@
               <view class="item-content row col">
                 <view class="item-content-tag" v-for="(item,index) in timeList" v-if="timeList.length !== 0">
                   <view class="tag-text">
-                    {{ item }}
+                    {{ item.date }} {{(item.time)?'/'+item.time:''}}
                   </view>
                   <view class="tag-close" @click="delTime(index)">
                     <image mode="heightFix" class="img" :src="staticImage.tagClose"/>
@@ -115,7 +115,7 @@
               <image mode="heightFix" class="img" :src="staticImage.selectPet"/>
             </view>
             <view class="order-item pet-page-item row">
-              <PetPage class="pet-page"></PetPage>
+              <PetPage class="pet-page" :showCancel="true" type="lists" @change="selectPet" @del="delPet"></PetPage>
             </view>
 
 
@@ -203,7 +203,7 @@
      </MzButton>
    </view>
   </view>
-  <uv-calendar ref="calendar" mode="multiple" title="选择服务日期" @confirm="timeSelect" color="#4DC3B8" round="40rpx">
+  <uv-calendar ref="calendar" mode="multiple" title="选择服务日期" color="#4DC3B8" round="40rpx">
     <template #footer>
         <MzButton button-color="#4DC3B8" button-width="90%" font-color="#fff" class="row" style="justify-content: center" @click="timeSelect">确定</MzButton>
     </template>
@@ -240,6 +240,7 @@
         <u-cell
             size="large"
             :title="item.name"
+            :label="item.info"
             isLink
             right-icon=""
             v-for="(item,index) in addServiceList"
@@ -277,6 +278,51 @@
         </view>
       </view>
     </view>
+  </uv-popup>
+  <uv-popup ref="doDatePopup" mode="bottom" round="20" closeable safeAreaInsetTop safeAreaInsetBottom custom-style="position:relative;">
+    <view class="title row" style="position:absolute;justify-content: center;width:100%;top:20rpx;left:0;">
+      <view class="value col" style="position: relative;text-align: center;">
+
+        <!--        <u-text text="协议内容" size="38" color="#191919"></u-text>-->
+        <view class="" style="position: relative;display:inline-block;">
+          <view style="color:#191919;font-size:38rpx;display:inline-block;position: relative;z-index: 2;">增值服务</view>
+          <view class="background" style="width:100%;height:50%;position: absolute;bottom:0;left:0;background-color:rgba(227, 191, 119, 0.6);display:inline-block;z-index:1;"></view>
+        </view>
+      </view>
+    </view>
+    <view class="pop-service-container">
+      <uv-vtabs
+          :chain="false"
+          :list="timeListTemp"
+          height="700rpx"
+          hdHeight="100rpx"
+          keyName="date"
+          :barScrollable="false"
+          barItemActiveLineStyle="background:#4DC3B8;color:#4DC3B8;"
+          barItemActiveStyle="color:#4DC3B8;"
+          @change="changeVTab"
+      >
+              <uv-vtabs-item >
+                <view class="item"
+                      v-for="(item,index) in doTimeList"
+                      :key="index">
+                  <view class="item-title" style="padding:30rpx;" @click="doTimeSelect(item.value)"
+                        :style="{color:(item.value === timeListTemp[vTabCurrent]?.time)?'#4DC3B8':'#636363'}">
+                    <text class="text">{{item.label}} ({{ item.value }})</text>
+                  </view>
+                </view>
+              </uv-vtabs-item>
+            <uv-gap bg-color="#fff" height="600"></uv-gap>
+      </uv-vtabs>
+      <view class="row" style="padding-top:30rpx;">
+        <view class="col-6" style="padding:0 30rpx;">
+          <MzButton title="取消" @click="$refs.doDatePopup.close()"></MzButton>
+        </view>
+        <view class="col-6" style="padding:0 30rpx;">
+          <MzButton title="确认" @click="doDatePopupConfirm" button-color="#4DC3B8" font-color="#fff"></MzButton>
+        </view>
+      </view>
+    </view>
   </uv-popup>
 	<!-- <RightNav></RightNav> -->
 </template>
@@ -295,6 +341,7 @@
   import {getAddressList} from "@/api/address";
   import image from "@/config/image";
   import {getStoreService} from "@/api/order";
+  import pet from "@/pages/Pet/index.vue";
 	export default {
 		components: {
 			HeaderNav,
@@ -312,6 +359,7 @@
 				title: 'Hello',
 				loading: true,
         timeList:[],
+        timeListTemp:[],
 				staticImage: image.OrderPage,
 				isTop: false,
 				pagePadding: 100,
@@ -346,16 +394,68 @@
         },
         addServiceChecked:[],
         coupons:{},
+        doTimeList:[
+          {
+            label:'上午',
+            value:'09:00-12:00'
+          },{
+            label:'下午',
+            value:'13:30-17:00'
+          },{
+            label:'晚上',
+            value:'07:00-19:30'
+          },
+        ],
+        vTabCurrent:0,
+        petChecked:[],
+        basicServiceChecked:'',
 			}
 		},
 		onLoad(options) {
       this.id = options.id;
 		},
+    updated() {
+      this.checkOrderData();
+    },
     onShow(){
       this.getDefaultAddress();
       this.getUserCoupons();
     },
 		methods: {
+      checkOrderData(){
+        if(
+            this.address
+            &&this.timeList.length>0
+            &&this.petChecked.length>0
+            &&this.basicServiceChecked!==''
+        ){
+          console.log('formDone')
+        }
+      },
+      selectPet(petList){
+        this.petChecked = petList;
+      },
+      delPet(index){
+        this.petChecked.splice(index,1);
+      },
+      doDatePopupConfirm(){
+        this.timeListTemp.forEach(item => {
+          if(item.time === ""){
+            api.error(item.date+'未指定上门时间')
+            return false;
+          }
+        });
+        this.timeList = this.timeListTemp;
+        this.$refs.doDatePopup.close()
+      },
+      doTimeSelect(value){
+        this.timeListTemp[this.vTabCurrent].time = value
+        console.log(this.timeListTemp)
+      },
+      changeVTab(index){
+        console.log(index)
+        this.vTabCurrent = index
+      },
       getUserCoupons(){
         let cacheCoupons = uni.getStorageSync('userCoupons');
         if (cacheCoupons) {
@@ -413,8 +513,17 @@
         this.timeList.splice(index,1);
       },
       timeSelect(e){
-        this.timeList = this.$refs.calendar.selected;
-        this.$refs.calendar.close();
+        let selected = this.$refs.calendar.selected;
+        this.timeList = selected.map(item => {
+          return {
+            date:item,
+            time:''
+          }
+        });
+        this.timeListTemp = this.timeList;
+
+        this.$refs.calendar.confirm();
+        this.$refs.doDatePopup.open();
       },
       showAgreement(){
         this.$refs.agreement.open();
@@ -428,6 +537,7 @@
         this.curNow = index;
       },
       radioChange(n) {
+        this.basicServiceChecked = n.id
         console.log('radioChange', n);
       },
       groupChange(n) {
diff --git a/pages/Pet/create.vue b/pages/Pet/create.vue
index b7dd93a..e79bd17 100644
--- a/pages/Pet/create.vue
+++ b/pages/Pet/create.vue
@@ -7,7 +7,7 @@
     <view class="detail-container">
       <view class="detail-content-container">
         <view class="detail-content">
-          <PetPage></PetPage>
+          <PetPage :pet-id="id"></PetPage>
         </view>
       </view>
       <view class="detail-background-container">
@@ -70,6 +70,7 @@
 				petList:[],
 				status:"loadmore",
         type:"create",
+        id:0,
 			}
 		},
 		onLoad(option) {
diff --git a/pages/PetDetail/index.vue b/pages/PetDetail/index.vue
index 70c0265..e3ef37b 100644
--- a/pages/PetDetail/index.vue
+++ b/pages/PetDetail/index.vue
@@ -181,17 +181,17 @@
           button-color="#ffffff"
           font-color="##262626"
           button-width="250rpx"
+          @click="delPet()"
       >
       </MzButton>
     </view>
-    <view class="footer-button col-6"
-          @click="navTo('/pages/AddrDetail/index')">
+    <view class="footer-button col-6">
       <MzButton
           title="修改"
           button-color="#4DC3B8"
           font-color="#FFFFFF"
           button-width="250rpx"
-
+          @click="navTo('/pages/Pet/create?id='+id)"
       >
       </MzButton>
     </view>
@@ -264,14 +264,24 @@
 						create_time:'2023/03/03 15:23:22',
 					},
 				],
-          pet:{}
+        pet:{},
+        id:0,
 			}
 		},
 		onLoad(option) {
         log(option);
+        this.id = option.id;
         this.getDetail(option.id);
 		},
 		methods: {
+      delPet(){
+
+      },
+      navTo(url){
+        uni.navigateTo({
+          url:url
+        })
+      },
       getDetail(id){
         getDetail(id).then(data => {
             this.pet = data.data;
diff --git a/utils/functions.js b/utils/functions.js
index db1eadc..74a044e 100644
--- a/utils/functions.js
+++ b/utils/functions.js
@@ -7,7 +7,7 @@ const QQMapWX=require('./qqmap-wx-jssdk.min.js')
 import * as QQMapwx from '@/utils/qqmap-wx-jssdk.min.js'
 import {getSTS} from "@/api/other";
 var qqmapsdk; 
-import { imghost,host } from '@/config/host.js'
+import { imghost,host,oss } from '@/config/host.js'
 const api = {
 	
 	loginModalState: true,