商品添加预约 收藏 完善预约列表收藏列表 完善商品跳转

src/api/business.js

@@ -54,3 +54,30 @@ export function maintainCategories(id){
     }
   })
 }
+
+/**
+ * 预约接口 - 新增预约
+ * @param {*} data
+ * @returns
+ */
+export function addReservation(merchantId,data) {
+  return request({
+    url: `/maintain/merchant/${merchantId}/reservation`,
+    method: 'post',
+    data: data,
+    header: {
+      'Content-Type': 'application/json',
+    },
+  });
+}
+
+// 收藏商家接口
+export function addFavorite(id) {
+  return request({
+    url: `/maintain/merchant/${id}/favorite`,
+    method: 'post',
+    header: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+  });
+}

src/components/service/index.vue

@@ -1,13 +1,14 @@
 <template>
   <view>
     <view class="sort" >
-      <view class="list" v-for="(item,index) of item">
+      <!-- <view class="list" v-for="(item,index) of item" @click="$Router.push(`/pages/business/detail?id=${item.id}`)"> -->
+      <view class="list" v-for="(item,index) of item" @click="handlerRouterSkip(item,index)">
         <!-- <Image src="../../static/logo.png" @tap="$Router.push('/pages/business/service/index')" /> -->
         <image class="img" :src="
             error || !loaded
               ? 'https://cdn.uviewui.com/uview/album/10.jpg'
               : item.logo
-          " mode="scaleToFill" @click="$Router.push(`/pages/business/detail?id=${item.id}`)"></image>
+          " mode="scaleToFill" ></image>
         <view>
           <view class="item-text">{{ item.address }}</view>
           <view class="item-flex">
@@ -68,7 +69,7 @@
         value:10
       };
     },
-    props:['item'],
+    props:['item','skipType'],
 
     methods: {
       click(item) {
@@ -81,6 +82,19 @@
         this.show = false;
         // console.log('close');
       },
+
+      // 点击跳转
+      handlerRouterSkip(item){
+        if(this.skipType == 0){
+          uni.navigateTo({
+            url:`/pages/business/detail?id=${item.id}`
+          })
+        }else if(this.skipType == 1){
+          uni.navigateTo({
+            url:`/pages/business/service/detail?id=${item.id}`
+          })
+        }
+      }
     },
   };
 </script>

src/pages/business/detail.vue

@@ -71,27 +71,35 @@
     <u-empty v-if="goods.length == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"> </u-empty>
 
     <u-popup :show="reserve_show" @close="reserve_show = false" @open="open" round='20' mode='center'>
-      <view class="draw-box">
-        <view class="draw-title"> 预约服务  </view>
-        <view class="draw-item">
-          <view class="item-text">时间</view>
-          <u--input placeholder="请输入内容"  border="surround" v-model="value"></u--input>
-        </view>
-        <view class="draw-item">
-          <view class="item-text">联系方式</view>
-          <u--input placeholder="请输入联系方式"  border="surround" v-model="value" ></u--input>
-        </view>
-
+      <view class="draw-box">
+        <view class="draw-title"> 预约服务 </view>
+        <view class="draw-item">
+          <view class="item-text">时间</view>
+          <view class="time-box" @click="handlerSelectTime" :class=" template_time == '' ? 'time-text' : ''">
+            {{ template_time == '' ? '请选择时间' : template_time }}
+          </view>
+        </view>
+        <view class="draw-item">
+          <view class="item-text">联系方式</view>
+          <u--input placeholder="请输入联系方式" border="surround" type='number' v-model="addParams.mobile"></u--input>
+        </view>
+
         <button class="draw-btn" @click="handlerDrawConfirmBtn">确定</button>
       </view>
     </u-popup>
 
+    <u-datetime-picker :show="time_show" :minDate="Number(new Date())" :formatter="formatter"
+      v-model="addParams.appointTime" @change="handlerTimeChange" @confirm='time_show = false'
+      @cancel='time_show = false' mode="datetime">
+    </u-datetime-picker>
+
   </view>
 </template>
 
 <script>
   import {
-    getSellsDetail
+    getSellsDetail,
+    addReservation
   } from '@/api/business.js'
   import {
     getCurrentLocation
@@ -110,16 +118,34 @@
           region: null, //地区编码
           longitude: null, //经度
           latitude: null, //纬度
-        },
-
-        reserve_show:false,
-        value:''
+        },
+
+        template_value: '',
+        time_show: false,
+        reserve_show: false,
+        value: '',
+
+        addParams: {
+          merchantId: '',
+          mobile: '',
+          appointTime: ''
+        },
+        template_time: ''
       };
     },
     onLoad(option) {
       this.queryParams.id = option.id
       this.handlerInitLocation()
     },
+    watch: {
+      reserve_show(newValue) {
+        if (!newValue) {
+          this.addParams.mobile = ''
+          this.addParams.appointTime = ''
+          this.template_time = ''
+        }
+      }
+    },
     methods: {
       // 获取当前经纬度
       handlerInitLocation() {
@@ -167,7 +193,7 @@
       },
       // 预约
       handlerService(item, index) {
-        console.log('点击预约');
+        this.addParams.merchantId = item.id
         this.reserve_show = true
       },
       // 购买
@@ -175,17 +201,65 @@
         uni.navigateTo({
           url: '/pages/order/order'
         })
-      },
-
-      open(){},
-      // 点击选择时间
-      handlerSelectTime(){
-        console.log('e',e);
-      },
-      // 点击预约确定按钮
-      handlerDrawConfirmBtn(){
-        this.reserve_show = false
-      }
+      },
+
+      open() {},
+      // 点击选择时间
+      handlerSelectTime() {
+        this.time_show = true
+      },
+      // 点击预约确定按钮
+      handlerDrawConfirmBtn() {
+        if (this.addParams.appointTime == '') {
+          uni.showToast({
+            title: '请选择时间',
+            icon: 'none'
+          })
+          return
+        } else if (this.addParams.mobile == '') {
+          uni.showToast({
+            title: '请填写手机号',
+            icon: 'none'
+          })
+          return
+        } else if (!(/^1[34578]\d{9}$/.test(this.addParams.mobile))) {
+          uni.showToast({
+            title: '请填写正确的手机号',
+            icon: 'none'
+          })
+          return false;
+        } else {
+          addReservation(this.addParams.merchantId, this.addParams).then(res => {
+            if (res.code == 200) {
+              this.handlerInitList()
+              this.reserve_show = false
+              uni.showToast({
+                title: '预约成功',
+                icon: 'success',
+              })
+            } else {
+              uni.showToast({
+                title: res.msg,
+                icon: 'none'
+              })
+              return
+            }
+          })
+        }
+      },
+      formatter(type, value) {
+        if (type === 'minute') {
+          return `00`
+        }
+        return value
+      },
+      // 选择时间
+      handlerTimeChange(e) {
+        if (e) {
+          this.addParams.appointTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
+          this.template_time = this.addParams.appointTime
+        }
+      },
     }
   };
 </script>
@@ -382,31 +456,43 @@
       }
 
     }
-  }
-
-  .draw-box{
-    width: 560rpx;
-    padding: 20rpx;
-    .draw-title{
-      font-size: 30rpx;
-      font-weight: bold;
-      color: #000;
-      margin-bottom: 30rpx;
-    }
-    .draw-item{
-      margin-bottom: 20rpx;
-      .item-text{
-        font-size:28rpx;
-        color: #000;
-        padding-left: 20rpx;
-      }
-    }
-    .draw-btn{
-      width: 90%;
-      background-color: #5992BB !important;
-      color: #fff;
-      font-size:28rpx;
-      border-radius: 20rpx;
-    }
   }
-</style>
+
+  .draw-box {
+    width: 560rpx;
+    padding: 20rpx;
+
+    .draw-title {
+      font-size: 30rpx;
+      font-weight: bold;
+      color: #000;
+      margin-bottom: 30rpx;
+    }
+
+    .draw-item {
+      margin-bottom: 20rpx;
+
+      .item-text {
+        font-size: 28rpx;
+        color: #000;
+        padding-left: 20rpx;
+      }
+
+      .time-box {
+        margin: 10rpx 20rpx;
+      }
+    }
+
+    .draw-btn {
+      width: 90%;
+      background-color: #5992BB !important;
+      color: #fff;
+      font-size: 28rpx;
+      border-radius: 20rpx;
+    }
+  }
+
+  .time-text {
+    color: #D4D6DC;
+  }
+</style>

src/pages/business/hot/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="container">
-    <serviceItem :item='init_list'></serviceItem>
+    <serviceItem :item='init_list' :skipType='0'></serviceItem>
     <u-empty v-if="init_list.length == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" > </u-empty>
   </view>
 </template>

src/pages/business/nearby/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="container">
-    <serviceItem :item='init_list'></serviceItem>
+    <serviceItem :item='init_list' :skipType='0'></serviceItem>
     <u-empty v-if="init_list.length == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" > </u-empty>
   </view>
 </template>

src/pages/business/service/detail.vue

@@ -1,409 +1,450 @@
 <template>
-	<view class="service">
-		<view class="service-top">
-			<view class="item-flex">
-				<view class="title">{{ goods.name }}</view>
-				<u-icon name="share-square" size="24" @click="handlerShare" />
-			</view>
-			<Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
-		</view>
-		<view class="service-center">
-			<view class="price">
-				<view>
-					<view class="price-item">
-						<text class="price-text">￥</text>{{ goods.originalPrice }}
-					</view>
-					<view class="bottom-text">门市价 ￥{{ goods.specialPrice }}</view>
-				</view>
-				<view>
-					<view class="favorable">优惠推荐</view>
-					<view class="bottom-text">还剩 49 天 02 时</view>
-				</view>
-			</view>
-			<!-- 优惠券 -->
-			<view class="coupon flex" v-for="(item,index) in coupons" :key="index">
-				<view class="coupon-left flex">
-					<span class="coupon-left-mark">￥</span>
-					<span class="coupon-left-price">5</span>
-				</view>
-				<view class="coupon-middle flex">
-					<view class="coupon-middle-user over-hide">{{ item.name }}</view>
-					<view class="coupon-middle-type over-hide">{{ item.description }}</view>
-				</view>
-				<view class="coupon-right flex">
-					<view v-if="false" class="coupon-right-time flex">
-						<view class="tip">有效期仅剩</view>
-						<view class="time">{{item.expiration}}</view>
-					</view>
-					<view v-else class="coupon-right-get" @click="handlerGetCoupon(item,index)">可领取</view>
-				</view>
-			</view>
-		</view>
-
-		<!-- 服务详情 -->
-		<view class="detail">
-			<view class="detail-text">服务详情</view>
-			<view class="detail-des">
-				{{ goods.description }}
-			</view>
-		</view>
-
-		<!-- 评价内容 -->
-		<view class="Evaluate-content">
-			<view v-for="(item,index) in comments" :key="index">
-				<view class="commnet-user flex">
-					<image :src="item.user.avatar" style="width: 40px; height: 40px; border-radius: 50%" />
-					<view class="commnet-user-middle flex">
-						<view class="name flex">{{item.user.nickname}}</view>
-						<u-rate class="rate" :value="item.score" readonly :size="12" gutter="1"
-							active-color="#ffa500" />
-					</view>
-					<view class="time">{{item.createTime}}</view>
-				</view>
-				<view class="commnet-text">{{item.content}}</view>
-				<view class="commnet-img">
-					<image class="img" v-for="(img,index) in item.attachments" :key="index" :src="url" mode="widthFix" />
-				</view>
-			</view>
-
-      <u-empty v-if="comments.length == 0" mode="message" icon="http://cdn.uviewui.com/uview/empty/message.png"></u-empty>
-
-		</view>
-
-		<!-- 底部 -->
-		<view class="service-footer">
-			<view class="user-operate" v-for="(item,index) in userOperate" :key="index" @tap="collect(index)">
-				<u-icon class="user-operate-icon" :name="hascollect?item.fill?item.fill:item.icon:item.icon"
-					size="24" />
-				<text class="user-operate-text">{{item.name}}</text>
-			</view>
-			<view class="buyNow" @click="handlerImmediateBy">立即购买</view>
-		</view>
-	</view>
+  <view class="service">
+    <view class="service-top">
+      <view class="item-flex">
+        <view class="title">{{ goods.name }}</view>
+        <u-icon name="share-square" size="24" @click="handlerShare" />
+      </view>
+      <Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
+    </view>
+    <view class="service-center">
+      <view class="price">
+        <view>
+          <view class="price-item">
+            <text class="price-text">￥</text>{{ goods.originalPrice }}
+          </view>
+          <view class="bottom-text">门市价 ￥{{ goods.specialPrice }}</view>
+        </view>
+        <view>
+          <view class="favorable">优惠推荐</view>
+          <view class="bottom-text">还剩 49 天 02 时</view>
+        </view>
+      </view>
+      <!-- 优惠券 -->
+      <view class="coupon flex" v-for="(item,index) in coupons" :key="index">
+        <view class="coupon-left flex">
+          <span class="coupon-left-mark">￥</span>
+          <span class="coupon-left-price">5</span>
+        </view>
+        <view class="coupon-middle flex">
+          <view class="coupon-middle-user over-hide">{{ item.name }}</view>
+          <view class="coupon-middle-type over-hide">{{ item.description }}</view>
+        </view>
+        <view class="coupon-right flex">
+          <view v-if="false" class="coupon-right-time flex">
+            <view class="tip">有效期仅剩</view>
+            <view class="time">{{item.expiration}}</view>
+          </view>
+          <view v-else class="coupon-right-get" @click="handlerGetCoupon(item,index)">可领取</view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 服务详情 -->
+    <view class="detail">
+      <view class="detail-text">服务详情</view>
+      <view class="detail-des">
+        {{ goods.description }}
+      </view>
+    </view>
+
+    <!-- 评价内容 -->
+    <view class="Evaluate-content">
+      <view v-for="(item,index) in comments" :key="index">
+        <view class="commnet-user flex">
+          <image :src="item.user.avatar" style="width: 40px; height: 40px; border-radius: 50%" />
+          <view class="commnet-user-middle flex">
+            <view class="name flex">{{item.user.nickname}}</view>
+            <u-rate class="rate" :value="item.score" readonly :size="12" gutter="1" active-color="#ffa500" />
+          </view>
+          <view class="time">{{item.createTime}}</view>
+        </view>
+        <view class="commnet-text">{{item.content}}</view>
+        <view class="commnet-img">
+          <image class="img" v-for="(img,index) in item.attachments" :key="index" :src="url" mode="widthFix" />
+        </view>
+      </view>
+
+      <u-empty v-if="comments.length == 0" mode="message"
+        icon="http://cdn.uviewui.com/uview/empty/message.png"></u-empty>
+
+    </view>
+
+    <!-- 底部 -->
+    <view class="service-footer">
+      <view class="user-operate" v-for="(item,index) in userOperate" :key="index" @tap="collect(item,index)">
+        <u-icon class="user-operate-icon" :name="hascollect?item.fill?item.fill:item.icon:item.icon" size="24" />
+        <text class="user-operate-text">{{item.name}}</text>
+      </view>
+      <view class="buyNow" @click="handlerImmediateBy">立即购买</view>
+    </view>
+  </view>
 </template>
 
-<script>
-  import { getGoodsDetail } from "@/api/business.js"
-	export default {
-		data() {
-			return {
-				userOperate: [{
-						name: '店铺',
-						icon: "file-text"
-					},
-					{
-						name: '立即咨询',
-						icon: 'chat'
-					},
-					{
-						name: '收藏',
-						icon: 'heart',
-						fill: 'heart-fill'
-					}
-				],
-				hascollect: false, // 当前店铺是否被收藏
-
-        goods:[],//商品详情
-        coupons:[],//优惠券
-        comments:[],// 评论
-			};
-		},
-    onLoad(option){
-      // 获取商品详情接口
-      getGoodsDetail(option.id).then(res=>{
-        this.goods = res.data.goods
-        this.coupons = res.data.coupons
-        this.comments = res.data.comments
-      })
+<script>
+  import {
+    getGoodsDetail,
+    addFavorite
+  } from "@/api/business.js"
+  export default {
+    data() {
+      return {
+        userOperate: [{
+            name: '店铺',
+            icon: "file-text"
+          },
+          {
+            name: '立即咨询',
+            icon: 'chat'
+          },
+          {
+            name: '收藏',
+            icon: 'heart',
+            fill: 'heart-fill'
+          }
+        ],
+        hascollect: false, // 当前店铺是否被收藏
+
+        goods: [], //商品详情
+        coupons: [], //优惠券
+        comments: [], // 评论
+        id: ''
+      };
     },
-		methods: {
-      // 点击分享
-      handlerShare(){
-        uni.share({
-        	provider: "weixin",
-        	scene: "WXSceneSession",
-        	type: 1,
-        	summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
-        	success: function (res) {
-        		console.log("success:" + JSON.stringify(res));
-        	},
-        	fail: function (err) {
-        		console.log("fail:" + JSON.stringify(err));
-        	}
-        });
-      },
+    onLoad(option) {
+      // 获取商品详情接口
+      this.id = option.id
+    },
+    mounted() {
+      this.handlerInitList()
+    },
+    methods: {
+      handlerInitList() {
+        getGoodsDetail(this.id).then(res => {
+          this.goods = res.data.goods
+          this.coupons = res.data.coupons
+          this.comments = res.data.comments
+        })
+      },
+      // 点击分享
+      handlerShare() {
+        uni.share({
+          provider: "weixin",
+          scene: "WXSceneSession",
+          type: 1,
+          summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
+          success: function(res) {
+            console.log("success:" + JSON.stringify(res));
+          },
+          fail: function(err) {
+            console.log("fail:" + JSON.stringify(err));
+          }
+        });
+      },
       // 选择底部tab 店铺 收藏 咨询
-			collect(index) {
-				if (index === 2) {
-					this.hascollect = !this.hascollect
-				}
-			},
-      // 点击领取优惠卷
-      handlerGetCoupon(){
-        uni.showToast({
-          title:"没有",
-          icon:'none'
-        })
-      },
-      // 点击购买按钮
-      handlerImmediateBy(){
-        uni.navigateTo({
-          url:'/pages/order/order'
-        })
+      collect(item, index) {
+        switch (index) {
+          case 0:
+            uni.navigateTo({
+              url:`/pages/business/detail?id=${this.goods.id}`
+            })
+            break;
+          case 1:
+            uni.showToast({
+              title: '暂无',
+              icon: 'none'
+            })
+            break;
+          case 2:
+            addFavorite(this.id).then(res => {
+              if (res.code == 200) {
+                this.handlerInitList()
+                this.hascollect = !this.hascollect
+                uni.showToast({
+                  title: '收藏成功',
+                  icon: 'none'
+                })
+              } else {
+                uni.showToast({
+                  title: res.msg,
+                  icon: 'none'
+                })
+                return
+              }
+            })
+            break;
+        }
+      },
+      // 点击领取优惠卷
+      handlerGetCoupon() {
+        uni.showToast({
+          title: "没有",
+          icon: 'none'
+        })
       },
-		}
-	};
+      // 点击购买按钮
+      handlerImmediateBy() {
+        uni.navigateTo({
+          url: '/pages/order/order'
+        })
+      },
+    }
+  };
 </script>
 
 <style lang="scss" scoped>
-	.service {
-		min-height: 100vh;
-	}
-
-	.service-top {
-		margin: 20rpx;
-		.item-flex {
-			display: flex;
+  .service {
+    min-height: 100vh;
+  }
+
+  .service-top {
+    margin: 20rpx;
+
+    .item-flex {
+      display: flex;
+      justify-content: space-between;
+
+      .title {
+        font-size: 18px;
+        font-weight: bold;
+        margin: 20rpx;
+      }
+    }
+
+    Image {
+      width: 100%;
+      height: 200px;
+    }
+  }
+
+  .service-center {
+    margin: 20rpx;
+
+    .price {
+      height: 110rpx;
+      padding: 10rpx 30rpx;
+      display: flex;
+      margin: 30rpx 0;
+      color: #fff;
+      font-size: 24rpx;
+      font-weight: lighter;
+      font-weight: normal;
+      box-sizing: border-box;
+      border-radius: 20rpx 20rpx 0 0;
+      background-color: #6c9fc3;
+      justify-content: space-between;
+
+      .price-item {
+        font-size: 35rpx;
+        margin-bottom: 6rpx;
+        font-weight: 600;
+
+        .price-text {
+          font-size: 24rpx;
+        }
+      }
+
+      .favorable {
+        font-size: 34rpx;
+        font-weight: 600;
+        margin-bottom: 6rpx;
+        letter-spacing: 4rpx;
+        text-align: right;
+      }
+
+      .bottom-text {
+        font-size: 24rpx;
+        font-weight: 100;
+      }
+    }
+  }
+
+  // 优惠券
+  .flex {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .over-hide {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .coupon {
+    height: 130rpx;
+    display: flex;
+    font-size: 32rpx;
+    color: #f2110d;
+    border-radius: 10rpx;
+    margin-bottom: 25rpx;
+    padding: 20rpx 25rpx;
+    box-sizing: border-box;
+    background-color: #faeaea;
+    border: 2rpx solid #eb8b8b;
+
+    .coupon-left {
+      width: 10%;
+      height: 100%;
+
+      .coupon-left-price {
+        font-size: 65rpx;
+      }
+    }
+
+    .coupon-middle {
+      flex-direction: column;
       justify-content: space-between;
-			.title {
-				font-size: 18px;
-				font-weight: bold;
-				margin: 20rpx;
-			}
-		}
-
-		Image {
-			width: 100%;
-			height: 200px;
-		}
-	}
-
-	.service-center {
-		margin: 20rpx;
-
-		.price {
-			height: 110rpx;
-			padding: 10rpx 30rpx;
-			display: flex;
-			margin: 30rpx 0;
-			color: #fff;
-			font-size: 24rpx;
-			font-weight: lighter;
-			font-weight: normal;
-			box-sizing: border-box;
-			border-radius: 20rpx 20rpx 0 0;
-			background-color: #6c9fc3;
-			justify-content: space-between;
-
-			.price-item {
-				font-size: 35rpx;
-				margin-bottom: 6rpx;
-				font-weight: 600;
-
-				.price-text {
-					font-size: 24rpx;
-				}
-			}
-
-			.favorable {
-				font-size: 34rpx;
-				font-weight: 600;
-				margin-bottom: 6rpx;
-				letter-spacing: 4rpx;
-				text-align: right;
-			}
-
-			.bottom-text {
-				font-size: 24rpx;
-				font-weight: 100;
-			}
-		}
-	}
-
-	// 优惠券
-	.flex {
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		align-items: center;
-	}
-
-	.over-hide {
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		overflow: hidden;
-	}
-
-	.coupon {
-		height: 130rpx;
-		display: flex;
-		font-size: 32rpx;
-		color: #f2110d;
-		border-radius: 10rpx;
-		margin-bottom: 25rpx;
-		padding: 20rpx 25rpx;
-		box-sizing: border-box;
-		background-color: #faeaea;
-		border: 2rpx solid #eb8b8b;
-
-		.coupon-left {
-			width: 10%;
-			height: 100%;
-
-			.coupon-left-price {
-				font-size: 65rpx;
-			}
-		}
-
-		.coupon-middle {
-			flex-direction: column;
-			justify-content: space-between;
-			align-items: flex-start;
-			width: 60%;
-			height: 100%;
-
-			.coupon-middle-user {
-				width: 100%;
-				font-size: 30rpx;
-				font-weight: 600;
-			}
-
-			.coupon-middle-type {
-				width: 100%;
-				font-size: 24rpx;
-				font-weight: 600;
-				opacity: 0.8;
-			}
-		}
-
-		.coupon-right {
-			flex-direction: column;
-			justify-content: space-between;
-			align-items: flex-start;
-			width: 25%;
-			height: 100%;
-
-			.coupon-right-time {
-				height: 100%;
-				flex-direction: column;
-				justify-content: space-between;
-				align-items: center;
-
-				.tip {
-					font-size: 30rpx;
-					font-weight: 600;
-				}
-
-				.time {
-					font-size: 24rpx;
-					font-weight: 600;
-					opacity: 0.8;
-				}
-			}
-
-			.coupon-right-get {
-				width: 80%;
-				background-color: #E8A87C;
-				height: 55rpx;
-				text-align: center;
-				line-height: 55rpx;
-				margin-top: 15rpx;
-			}
-		}
-	}
-
-	// 服务详情
-	.detail {
-		margin: 40rpx 20rpx 20rpx 20rpx;
-
-		.detail-text {
-			font-size: 16px;
-			font-weight: bold;
-			margin-bottom: 10rpx;
-		}
-
-		.detail-des {
-			margin-left: 15rpx;
-			font-size: 25rpx;
-			font-weight: 600;
-		}
-	}
-
-	// 评价内容
-	.Evaluate-content {
-		margin: 20rpx;
-		padding-bottom: 120rpx;
-
-		.commnet-user {
-			height: 90rpx;
-
-			.commnet-user-middle {
-				height: 100%;
-				width: 60%;
-				flex-direction: column;
-				justify-content: space-evenly;
-				align-items: flex-start;
-
-				.name {
-					font-size: 28rpx;
-				}
-
-				.rate {
-					width: 30%;
-				}
-			}
-
-			.time {
-				align-self: flex-end;
-				font-size: 24rpx;
-			}
-		}
-
-		.commnet-text {
-			margin-bottom: 20rpx;
-			font-size: 24rpx;
-			font-weight: 600;
-		}
-
-		.commnet-img .img {
-			width: 225rpx;
-			margin-right: 10rpx;
-		}
-	}
-
-	// 底部
-	.service-footer {
-		height: 60px;
-		padding: 10rpx 20rpx;
-		position: fixed;
-		left: 0;
-		bottom: 0;
-		right: 0;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		background-color: #fff;
-		border-top: 1px solid #eb8b8b;
-		box-sizing: border-box;
-
-		.u-icon {
-			justify-content: center !important;
-		}
-    .user-operate{
-      text-align: center;
+      align-items: flex-start;
+      width: 60%;
+      height: 100%;
+
+      .coupon-middle-user {
+        width: 100%;
+        font-size: 30rpx;
+        font-weight: 600;
+      }
+
+      .coupon-middle-type {
+        width: 100%;
+        font-size: 24rpx;
+        font-weight: 600;
+        opacity: 0.8;
+      }
+    }
+
+    .coupon-right {
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: flex-start;
+      width: 25%;
+      height: 100%;
+
+      .coupon-right-time {
+        height: 100%;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+
+        .tip {
+          font-size: 30rpx;
+          font-weight: 600;
+        }
+
+        .time {
+          font-size: 24rpx;
+          font-weight: 600;
+          opacity: 0.8;
+        }
+      }
+
+      .coupon-right-get {
+        width: 80%;
+        background-color: #E8A87C;
+        height: 55rpx;
+        text-align: center;
+        line-height: 55rpx;
+        margin-top: 15rpx;
+      }
+    }
+  }
+
+  // 服务详情
+  .detail {
+    margin: 40rpx 20rpx 20rpx 20rpx;
+
+    .detail-text {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 10rpx;
+    }
+
+    .detail-des {
+      margin-left: 15rpx;
+      font-size: 25rpx;
+      font-weight: 600;
+    }
+  }
+
+  // 评价内容
+  .Evaluate-content {
+    margin: 20rpx;
+    padding-bottom: 120rpx;
+
+    .commnet-user {
+      height: 90rpx;
+
+      .commnet-user-middle {
+        height: 100%;
+        width: 60%;
+        flex-direction: column;
+        justify-content: space-evenly;
+        align-items: flex-start;
+
+        .name {
+          font-size: 28rpx;
+        }
+
+        .rate {
+          width: 30%;
+        }
+      }
+
+      .time {
+        align-self: flex-end;
+        font-size: 24rpx;
+      }
+    }
+
+    .commnet-text {
+      margin-bottom: 20rpx;
+      font-size: 24rpx;
+      font-weight: 600;
+    }
+
+    .commnet-img .img {
+      width: 225rpx;
+      margin-right: 10rpx;
+    }
+  }
+
+  // 底部
+  .service-footer {
+    height: 60px;
+    padding: 10rpx 20rpx;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #fff;
+    border-top: 1px solid #eb8b8b;
+    box-sizing: border-box;
+
+    .u-icon {
+      justify-content: center !important;
+    }
+
+    .user-operate {
+      text-align: center;
+    }
+
+    .user-operate-text {
+      font-size: 24rpx;
+      font-weight: 600;
+    }
+
+    .buyNow {
+      width: 200px;
+      height: 40px;
+      text-align: center;
+      line-height: 40px;
+      border-radius: 40px;
+      background-color: #f0d318;
     }
-		.user-operate-text {
-			font-size: 24rpx;
-			font-weight: 600;
-		}
-
-		.buyNow {
-			width: 200px;
-			height: 40px;
-			text-align: center;
-			line-height: 40px;
-			border-radius: 40px;
-			background-color: #f0d318;
-		}
-	}
-</style>
+  }
+</style>

src/pages/user/appoint/index.vue

@@ -1,25 +1,29 @@
 <template>
   <view class="container">
-    <view class="appoint" v-for="item of 3">
+    <view class="appoint" v-for="(item,index) of init_list">
       <view class="appoint-list">
-        <view class="appoint-title">【养车】标题标题标题标题标题标题标题标题标题标题……</view>
-        <view class="appoint-address">贵州省贵阳市榕江县栽麻乡小利村三组</view>
+        <view class="appoint-title">{{ item.simpleMerchantVO.name }}</view>
+        <view class="appoint-address">{{ item.simpleMerchantVO.address }}</view>
         <view class="appoint-flex">
           <!-- <Image src="https://cdn.uviewui.com/uview/album/1.jpg" /> -->
-          <img class="img" src="@/static/logo.png" alt="">
+          <image class="img" :src="
+              error || !loaded
+                ? 'https://cdn.uviewui.com/uview/album/10.jpg'
+                : item.simpleMerchantVO.logo
+            " mode="scaleToFill"></image>
           <view class="appoint-text">
             <view>业务：洗车……</view>
             <view>时间：2023年06月18日</view>
-            <view>联系方式：18285564342</view>
+            <view>联系方式：{{ item.mobile }}</view>
           </view>
         </view>
         <view class="appoint-goto">
-          <u-button class="detail" text="详情" @tap="$Router.push('/pages/business/service/detail')"></u-button>
+          <u-button class="detail" text="详情" @click="handlerSkipGoodsDetail(item,index)"></u-button>
           <u-button class="cancel" text="取消" @click="handlerClearItem(item,index)"></u-button>
         </view>
       </view>
     </view>
-  </view>
+    <u-empty v-if="init_list.length == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></view>
 </template>
 
 <script>
@@ -41,7 +45,8 @@
       // 初始化列表
       handlerInitList(){
         maintainReservations(this.queryParams).then(res=>{
-          console.log('res',res);
+          this.init_list = res.data
+          console.log('init_list',this.init_list);
         })
       },
       // 点击取消商品
@@ -51,6 +56,12 @@
           icon:'none'
         })
       },
+      // 点击跳转到商品详情
+      handlerSkipGoodsDetail(item, index) {
+        uni.navigateTo({
+          url: `/pages/business/service/detail?id=${item.id}`
+        })
+      },
     },
   };
 </script>

src/pages/user/collect/list.vue

@@ -3,18 +3,19 @@
     <view class="text">以下是您收藏的商品服务</view>
 
     <!-- 收藏的服务 -->
-    <service v-for="item in 2" :key="item" />
+   <serviceItem :item='init_list' :skipType='1'></serviceItem>
+   <u-empty v-if="init_list.length == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" > </u-empty>
   </view>
 </template>
 
 <script>
-  import service from '@/components/service'
+  import serviceItem from '@/components/service/index.vue';
   import { maintainFavoritePaging } from "@/api/mine.js"
   import { getCurrentLocation } from '@/api/home';
 
   export default {
     components: {
-      service,
+      serviceItem,
     },
     data() {
       return {
@@ -59,7 +60,10 @@
       // 初始化列表信息
       handlerInitList(){
         maintainFavoritePaging(this.queryParams).then(res=>{
-          console.log('getHomePageApi',res);
+          res.data.map(rs=>{
+            this.init_list.push(rs.simpleMerchantVO)
+          })
+          console.log('getHomePageApi',this.init_list);
         })
       }
     },