修改页面样式

src/api/client/order.js

@@ -35,10 +35,11 @@ export function getUserOrderList(data) {
  * @returns
  */
 
-export function successfulPayment(id) {
+export function successfulPayment(id, data) {
   return request({
     url: `/maintain/paySuccess/${id}`,
     method: 'get',
+    data: data,
     headers: {
       'content-type': 'application/x-www-form-urlencoded',
     },
@@ -66,14 +67,13 @@ export function orderDetailGoodApi(id, data) {
  * @returns
  */
 
-export function cancelOrder(id,data) {
+export function cancelOrder(id, data) {
   return request({
     url: `/maintain/cancelOrder/${id}`,
     method: 'get',
-    data:data,
+    data: data,
     headers: {
       'content-type': 'application/x-www-form-urlencoded',
     },
   });
 }
-

src/components/service/goodsItem.vue

@@ -1,195 +1,193 @@
 <template>
-	<view class="sort">
-		<u-swipe-action>
-			<u-swipe-action-item :options="options1" :key="index" v-for="(itm, index) of item"
-				@click="handlerClearItem(itm,index)">
-				<view class="list" @click='handlerRouterSkip(itm)'>
-					<view class="list-img">
-						<image class="img" :src=" itm.logo" mode="scaleToFill"></image>
-					</view>
-
-					<view class="list-main">
-						<view class="item-text">{{ itm.name }}</view>
-						<view class="item-flex">
-							<view class="star">
-								<u-rate :count="itm.score" disabled v-model="itm.score" :size="14" />
-								<text class="line">|</text>
-								<text class="points">{{ itm.score }}分</text>
-							</view>
-							<!-- <view>{{ itm.specialPrice }}单</view> -->
-							<view></view>
-						</view>
-						<view class="list-item">
-							<view class="item-l">{{ itm.description }}</view>
-							<view class="item-r"></view>
-						</view>
-					</view>
-				</view>
-			</u-swipe-action-item>
-		</u-swipe-action>
-	</view>
+  <view class="sort">
+    <u-swipe-action>
+      <u-swipe-action-item :options="options1" :key="index" v-for="(itm, index) of item"
+        @click="handlerClearItem(itm,index)">
+        <view class="list" @click='handlerRouterSkip(itm)'>
+          <view class="list-img">
+            <image class="img" :src=" itm.logo" mode="scaleToFill"></image>
+          </view>
+
+          <view class="list-main">
+            <view class="item-text">{{ itm.name }}</view>
+            <view class="item-flex">
+              <view class="star">
+                <u-rate :count="itm.score" disabled v-model="itm.score" :size="14" />
+                <text class="line">|</text>
+                <text class="points">{{ itm.score }}分</text>
+              </view>
+              <!-- <view>{{ itm.specialPrice }}单</view> -->
+              <view></view>
+            </view>
+            <view class="list-item">
+              <view class="item-l">{{ itm.description }}</view>
+              <view class="item-r"></view>
+            </view>
+          </view>
+        </view>
+      </u-swipe-action-item>
+    </u-swipe-action>
+  </view>
 </template>
 
 <script>
-	import {
-		cancelFavorite
-	} from '@/api/client/business.js';
-	export default {
-		data() {
-			return {
-				show: false,
-				showDate: false,
-				value1: Number(new Date()),
-				count: 2,
-				value: 10,
-				options1: [{
-					text: '删除'
-				}]
-			};
-		},
-		props: ['item'],
-		mounted() {
-			console.log('@@@@item', this.item);
-		},
-		methods: {
-			click(item) {},
-			open() {},
-			close() {
-				this.show = false;
-			},
-			// 点击跳转1
-			handlerRouterSkip(item) {
-				uni.navigateTo({
-					url: `/pages/client/clientPackage/serviceDetail/index?id=${item.id}`,
-				});
-			},
-			// 点击取消
-			handlerClearItem(item, index) {
-				cancelFavorite(item.id).then(res => {
-					if (res.code == 'OK') {
-						uni.showToast({
-							title: '取消成功',
-							icon: 'none'
-						})
-						this.$emit('uploadIniList', 1)
-					} else {
-						uni.showToast({
-							title: res.message,
-							icon: 'none'
-						})
-						return
-					}
-				})
-			}
-		},
-	};
+  import {
+    cancelFavorite
+  } from '@/api/client/business.js';
+  export default {
+    data() {
+      return {
+        show: false,
+        showDate: false,
+        value1: Number(new Date()),
+        count: 2,
+        value: 10,
+        options1: [{
+          text: '删除'
+        }]
+      };
+    },
+    props: ['item'],
+    mounted() {},
+    methods: {
+      click(item) {},
+      open() {},
+      close() {
+        this.show = false;
+      },
+      // 点击跳转1
+      handlerRouterSkip(item) {
+        uni.navigateTo({
+          url: `/pages/client/clientPackage/serviceDetail/index?id=${item.id}&shopId=${item.merchantId}`,
+        });
+      },
+      // 点击取消
+      handlerClearItem(item, index) {
+        cancelFavorite(item.id).then(res => {
+          if (res.code == 'OK') {
+            uni.showToast({
+              title: '取消成功',
+              icon: 'none'
+            })
+            this.$emit('uploadIniList', 1)
+          } else {
+            uni.showToast({
+              title: res.message,
+              icon: 'none'
+            })
+            return
+          }
+        })
+      }
+    },
+  };
 </script>
 
 <style lang="scss" scoped>
-	/*商家服务分类的是实现 */
-
-	.sort {
-		min-height: 100vh;
-
-		.list {
-			height: 250rpx;
-			background-color: #fff;
-			padding: 20rpx;
-			margin-bottom: 20rpx;
-			display: flex;
-
-			.list-img {
-				width: 260rpx;
-				height: 100%;
-				background-color: #ec5729;
-				margin-right: 20rpx;
-
-				image {
-					width: 100%;
-					height: 100%;
-				}
-			}
-
-			.list-main {
-				width: calc(100% - 280rpx);
-			}
-
-			.item-text {
-				font-weight: bold;
-				margin: 10rpx 0 10rpx;
-				color: #333;
-			}
-
-			.item-flex {
-				display: flex;
-				justify-content: space-between;
-				font-size: 28rpx;
-				margin: 0 20rpx 10rpx 0;
-				color: #0d0d0d66;
-
-				.star {
-					display: flex;
-
-					.line {
-						margin-left: 16rpx;
-						margin-top: 5rpx;
-						font-size: 22rpx;
-					}
-
-					.points {
-						color: #ff4b04;
-						font-size: 22rpx;
-						margin-top: 6rpx;
-						margin-left: 10rpx;
-					}
-				}
-			}
-
-			.list-item {
-				display: flex;
-				justify-content: space-between;
-				margin-top: 40rpx;
-
-				.item-l {
-					width: 80%;
-					color: #cfcfcf;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					display: -webkit-box; //将对象作为弹性伸缩盒子模型显示。
-					-webkit-box-orient: vertical; // 从上到下垂直排列子元素
-					-webkit-line-clamp: 2; //显示的行数
-				}
-
-				.item-r {
-					color: #252525;
-
-					.Buy {
-						width: 40px;
-						height: 32px;
-						color: #fff;
-						line-height: 32px;
-						text-align: center;
-						display: inline-block;
-						border-radius: 0 16px 16px 0;
-						background-color: #ec5729;
-						padding-bottom: 20rpx;
-					}
-				}
-			}
-		}
-	}
-
-
-	.swipe-action {
-		background-color: #EFEFEF;
-		box-sizing: border-box;
-
-		&__content {
-
-			&__text {
-				font-size: 15px;
-				color: $u-main-color;
-			}
-		}
-	}
-</style>
+  /*商家服务分类的是实现 */
+
+  .sort {
+    min-height: 100vh;
+
+    .list {
+      height: 250rpx;
+      background-color: #fff;
+      padding: 20rpx;
+      margin-bottom: 20rpx;
+      display: flex;
+
+      .list-img {
+        width: 260rpx;
+        height: 100%;
+        background-color: #ec5729;
+        margin-right: 20rpx;
+
+        image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .list-main {
+        width: calc(100% - 280rpx);
+      }
+
+      .item-text {
+        font-weight: bold;
+        margin: 10rpx 0 10rpx;
+        color: #333;
+      }
+
+      .item-flex {
+        display: flex;
+        justify-content: space-between;
+        font-size: 28rpx;
+        margin: 0 20rpx 10rpx 0;
+        color: #0d0d0d66;
+
+        .star {
+          display: flex;
+
+          .line {
+            margin-left: 16rpx;
+            margin-top: 5rpx;
+            font-size: 22rpx;
+          }
+
+          .points {
+            color: #ff4b04;
+            font-size: 22rpx;
+            margin-top: 6rpx;
+            margin-left: 10rpx;
+          }
+        }
+      }
+
+      .list-item {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 40rpx;
+
+        .item-l {
+          width: 80%;
+          color: #cfcfcf;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box; //将对象作为弹性伸缩盒子模型显示。
+          -webkit-box-orient: vertical; // 从上到下垂直排列子元素
+          -webkit-line-clamp: 2; //显示的行数
+        }
+
+        .item-r {
+          color: #252525;
+
+          .Buy {
+            width: 40px;
+            height: 32px;
+            color: #fff;
+            line-height: 32px;
+            text-align: center;
+            display: inline-block;
+            border-radius: 0 16px 16px 0;
+            background-color: #ec5729;
+            padding-bottom: 20rpx;
+          }
+        }
+      }
+    }
+  }
+
+
+  .swipe-action {
+    background-color: #EFEFEF;
+    box-sizing: border-box;
+
+    &__content {
+
+      &__text {
+        font-size: 15px;
+        color: $u-main-color;
+      }
+    }
+  }
+</style>

src/pages/client/clientPackage/serviceDetail/index.vue

@@ -13,14 +13,7 @@
       <!-- 标题和轮播图 -->
       <view>
         <view class="service-title">{{ goods.name }}</view>
-        <u-swiper
-          :list="banners"
-          previousMargin="30"
-          nextMargin="30"
-          circular
-          bgColor="#ffffff"
-          height="190"
-        />
+        <u-swiper :list="banners" previousMargin="30" nextMargin="30" circular bgColor="#ffffff" height="190" />
       </view>
 
       <!-- 价格 -->
@@ -76,24 +69,17 @@
     <!-- 服务详情 -->
     <view class="detail">
       <view>
-        <u-tabs
-          :list="detailList"
-          lineWidth="50"
-          lineColor="#fdbf05"
-          :activeStyle="{
+        <u-tabs :list="detailList" lineWidth="50" lineColor="#fdbf05" :activeStyle="{
             color: '#303133',
             fontWeight: 'bold',
             transform: 'scale(1.05)',
-          }"
-          :inactiveStyle="{
+          }" :inactiveStyle="{
             color: '#606266',
             transform: 'scale(1)',
-          }"
-          itemStyle="padding-left: 15px; padding-right: 15px; height: 40px;"
-        />
+          }" itemStyle="padding-left: 15px; padding-right: 15px; height: 40px;" @change='handlerChange' />
       </view>
 
-      <view>
+      <view v-show="current == 0">
         {{ goods.description }}
       </view>
     </view>
@@ -105,21 +91,12 @@
 
     <!-- 底部 -->
     <view class="service-footer">
-      <view
-        class="user-operate"
-        v-for="(item, index) in userOperate"
-        :key="index"
-        @tap="collect(item, index)"
-      >
+      <view class="user-operate" v-for="(item, index) in userOperate" :key="index" @tap="collect(item, index)">
         <u-icon class="user-operate-icon" :name="item.icon" size="24" />
         <text class="user-operate-text">{{ item.name }}</text>
       </view>
       <view class="user-operate" @tap="handlerFavorite">
-        <u-icon
-          class="user-operate-icon"
-          :name="goods.favorites ? favorite_list.fill : favorite_list.icon"
-          size="24"
-        />
+        <u-icon class="user-operate-icon" :name="goods.favorites ? favorite_list.fill : favorite_list.icon" size="24" />
         <text class="user-operate-text">{{ favorite_list.name }}</text>
       </view>
       <view class="buyNow">
@@ -131,206 +108,211 @@
 </template>
 
 <script>
-import {
-  getGoodsDetailApi,
-  addFavorite,
-  addShoppingCart,
-  addGoodsFavorite,
-  cancelFavorite,
-  // getGoodsConcentList,
-  accountToOrderGetComment,
-} from '@/api/client/business.js';
-import { accountTotIdGetConponList } from '@/api/client/mine.js';
-import GainCoupon from './GainCoupon.vue';
-import EvaluateContent from './EvaluateContent.vue';
-export default {
-  components: {
-    GainCoupon,
-    EvaluateContent,
-  },
-  data() {
-    return {
-      userOperate: [
-        {
-          name: '店铺',
-          icon: 'file-text',
-        },
-        // ,
-        //       {
-        //         name: '立即咨询',
-        //         icon: 'chat',
-        //       },
-      ],
-      favorite_list: {
-        name: '收藏',
-        icon: 'heart',
-        fill: 'heart-fill',
-      },
-      goods: [], //商品详情
-      banners: [],
-      coupons: [], //优惠券
-      comments: [], // 评论
-      id: '', //商品id
-      shoopId: null, //店铺id
-      show: false,
-      detailList: [
-        {
-          id: '1',
-          name: '服务详情',
-        },
-        {
-          id: '2',
-          name: '购买须知',
-        },
-        {
-          id: '3',
-          name: '网友评价',
+  import {
+    getGoodsDetailApi,
+    addFavorite,
+    addShoppingCart,
+    addGoodsFavorite,
+    cancelFavorite,
+    // getGoodsConcentList,
+    accountToOrderGetComment,
+  } from '@/api/client/business.js';
+  import {
+    accountTotIdGetConponList
+  } from '@/api/client/mine.js';
+  import GainCoupon from './GainCoupon.vue';
+  import EvaluateContent from './EvaluateContent.vue';
+  export default {
+    components: {
+      GainCoupon,
+      EvaluateContent,
+    },
+    data() {
+      return {
+        userOperate: [{
+            name: '店铺',
+            icon: 'file-text',
+          },
+          // ,
+          //       {
+          //         name: '立即咨询',
+          //         icon: 'chat',
+          //       },
+        ],
+        favorite_list: {
+          name: '收藏',
+          icon: 'heart',
+          fill: 'heart-fill',
         },
-      ],
-    };
-  },
-  onLoad(option) {
-    // 获取商品详情接口
-    this.shoopId = option.shopId;
-    this.id = option.id;
-  },
-  methods: {
-    openPopup() {
-      this.show = true;
+        goods: [], //商品详情
+        banners: [],
+        coupons: [], //优惠券
+        comments: [], // 评论
+        id: '', //商品id
+        shoopId: null, //店铺id
+        show: false,
+        detailList: [{
+            id: '1',
+            name: '服务详情',
+          },
+          {
+            id: '2',
+            name: '购买须知',
+          },
+          {
+            id: '3',
+            name: '网友评价',
+          },
+        ],
+        current: 0
+      };
     },
-    // closeCoupon(data) {
-    //   this.show = data;
-    //   this.handlerGetGoodsConcentList()
-    // },
-    handlerInitList(id) {
-      getGoodsDetailApi(id).then(res => {
-        this.goods = res.data.goods;
-        this.comments = res.data.comments;
-        res.data.goods.banners.map(rs => {
-          this.banners.push(rs.url);
-        });
-        this.handlerGetGoodsConcentList();
-      });
+    onLoad(option) {
+      // 获取商品详情接口
+      this.shoopId = option.shopId;
+      this.id = option.id;
+      this.handlerInitList(this.id)
     },
-    handlerGetGoodsConcentList() {
-      // 获取商品评价列表
-      let params = {
-        // merchantId:this.shoopId,
-        goodsId: this.goods.id,
-      };
-      accountToOrderGetComment(params).then(res => {
-        console.log('@@@@res', res);
-      });
+    methods: {
+      handlerChange(e) {
+        this.current = e.index
+      },
+      openPopup() {
+        this.show = true;
+      },
+      // closeCoupon(data) {
+      //   this.show = data;
+      //   this.handlerGetGoodsConcentList()
+      // },
+      handlerInitList(id) {
+        getGoodsDetailApi(id).then(res => {
+          this.goods = res.data.goods;
+          this.comments = res.data.comments;
+          res.data.goods.banners.map(rs => {
+            this.banners.push(rs.url);
+          });
+          this.handlerGetGoodsConcentList();
+        });
+      },
+      handlerGetGoodsConcentList() {
+        // 获取商品评价列表
+        let params = {
+          // merchantId:this.shoopId,
+          goodsId: this.goods.id,
+        };
+        accountToOrderGetComment(params).then(res => {
+          console.log('@@@@res', res);
+        });
 
-      // 根据id获取优惠券列表
-      // accountTotIdGetConponList(this.shoopId,{ paging:'1,10' }).then(res=>{
-      //   this.coupons = res.data.records
-      // })
-    },
+        // 根据id获取优惠券列表
+        // accountTotIdGetConponList(this.shoopId,{ paging:'1,10' }).then(res=>{
+        //   this.coupons = res.data.records
+        // })
+      },
 
-    // 点击分享
-    handlerShare() {
-      uni.share({
-        provider: 'weixin',
-        scene: 'WXSceneSession',
-        type: 1,
-        summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
-        success: function (res) {},
-        fail: function (err) {},
-      });
-    },
+      // 点击分享
+      handlerShare() {
+        uni.share({
+          provider: 'weixin',
+          scene: 'WXSceneSession',
+          type: 1,
+          summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
+          success: function(res) {},
+          fail: function(err) {},
+        });
+      },
 
-    // 选择底部tab店铺收藏咨询
-    collect(item, index) {
-      switch (index) {
-        case 0:
-          uni.redirectTo({
-            url: `/pages/client/clientPackage/storeDetail?id=${this.shoopId}`,
-          });
-          break;
-        case 1:
-          uni.showToast({
-            title: '暂无',
-            icon: 'none',
-          });
-          break;
-      }
-    },
-    // 点击收藏1
-    handlerFavorite() {
-      if (this.goods.favorites) {
-        cancelFavorite(this.id).then(res => {
-          if (res.code === 'OK') {
-            this.handlerInitList(this.id);
-            uni.showToast({
-              title: '取消收藏',
-              icon: 'none',
+      // 选择底部tab店铺收藏咨询
+      collect(item, index) {
+        switch (index) {
+          case 0:
+            uni.redirectTo({
+              url: `/pages/client/clientPackage/storeDetail?id=${this.shoopId}`,
             });
-          } else {
+            break;
+          case 1:
             uni.showToast({
-              title: res.msg,
+              title: '暂无',
               icon: 'none',
             });
-            return;
-          }
-        });
-      } else {
-        addGoodsFavorite(this.id).then(res => {
+            break;
+        }
+      },
+      // 点击收藏1
+      handlerFavorite() {
+        if (this.goods.favorites) {
+          cancelFavorite(this.id).then(res => {
+            if (res.code === 'OK') {
+              this.handlerInitList(this.id);
+              uni.showToast({
+                title: '取消收藏',
+                icon: 'none',
+              });
+            } else {
+              uni.showToast({
+                title: res.msg,
+                icon: 'none',
+              });
+              return;
+            }
+          });
+        } else {
+          addGoodsFavorite(this.id).then(res => {
+            if (res.code === 'OK') {
+              this.handlerInitList(this.id);
+              uni.showToast({
+                title: '收藏成功',
+                icon: 'none',
+              });
+            } else {
+              uni.showToast({
+                title: res.msg,
+                icon: 'none',
+              });
+              return;
+            }
+          });
+        }
+      },
+
+      // 点击购买按钮
+      // handlerImmediateBy() {
+      //   this.$store.commit('order/GET_ORDER_LIST', this.goods);
+      //   uni.navigateTo({
+      //     url: `/pages/client/clientPackage/uptickOrder?id=${this.id}`,
+      //   });
+      // },
+
+      // 加入购物车
+      handlerAddCart() {
+        let params = {
+          merchantId: this.shoopId,
+          goodsId: this.goods.id,
+          quantity: 1,
+          price: this.goods.specialPrice,
+          goodsName: this.goods.name,
+          goodsPic: this.goods.logo,
+          originalPrice: this.goods.originalPrice,
+        };
+        addShoppingCart(params).then(res => {
           if (res.code === 'OK') {
-            this.handlerInitList(this.id);
             uni.showToast({
-              title: '收藏成功',
+              title: '购物车添加成功',
               icon: 'none',
             });
           } else {
             uni.showToast({
-              title: res.msg,
+              title: res.message,
               icon: 'none',
             });
             return;
           }
         });
-      }
-    },
-
-    // 点击购买按钮
-    // handlerImmediateBy() {
-    //   this.$store.commit('order/GET_ORDER_LIST', this.goods);
-    //   uni.navigateTo({
-    //     url: `/pages/client/clientPackage/uptickOrder?id=${this.id}`,
-    //   });
-    // },
-
-    // 加入购物车
-    handlerAddCart() {
-      let params = {
-        merchantId: this.shoopId,
-        goodsId: this.goods.id,
-        quantity: 1,
-        price: this.goods.specialPrice,
-        goodsName: this.goods.name,
-        goodsPic: this.goods.logo,
-        originalPrice: this.goods.originalPrice,
-      };
-      addShoppingCart(params).then(res => {
-        if (res.code === 'OK') {
-          uni.showToast({
-            title: '购物车添加成功',
-            icon: 'none',
-          });
-        } else {
-          uni.showToast({
-            title: res.message,
-            icon: 'none',
-          });
-          return;
-        }
-      });
+      },
     },
-  },
-};
+  };
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+  @import './index.scss';
 </style>

src/pages/client/clientPackage/uptickOrder.vue

@@ -1,8 +1,8 @@
 <template>
-	<view class="container">
+  <view class="container">
 
-		<view class="content-box">
-			<!-- <view class="message-box">
+    <view class="content-box">
+      <!-- <view class="message-box">
 				<view class="message-item">
 					<view class="item-left"> 订购人电话 </view>
 					<view class="item-right">
@@ -20,38 +20,38 @@
 			</view> -->
 
 
-			<view class="message-box">
-				<view class="message-item">
-					<view class="item-left"> 支付方式 </view>
-					<view class="item-right flex-end">
-						<span>在线支付</span>
-						<image class="right-img" src="@/static/order/ic_order_weixin.png"></image>
-					</view>
-				</view>
-			</view>
-
-			<view class="message-box">
-				<view class="goods-title"> {{ init_list.merchantDTO.name }} </view>
-				<u-line margin='20rpx 0'></u-line>
-				<view class="goods-item" v-for="(item,index) of init_list.cartItems" :key='item.goodsId'>
-					<view class="item-left">
-						<image class="left-img" src="@/static/QR57a.jpg"></image>
-						<view class="left-text">
-							<view class="text-name">{{ item.goodsName }}</view>
-							<view class="text-number">×{{ item.quantity }}</view>
-							<view class="price-box">
-								<p class="price red-color"> <span style="font-size: 24rpx;">￥</span>{{ item.price }}</p>
-								<span class="false-price">￥{{ item.originalPrice ? item.originalPrice : 0}}</span>
-							</view>
-						</view>
-					</view>
-					<view class="item-right">
-						<u-number-box v-model="item.quantity" @change="valChange(item,$event)"></u-number-box>
-					</view>
-				</view>
-			</view>
+      <view class="message-box">
+        <view class="message-item">
+          <view class="item-left"> 支付方式 </view>
+          <view class="item-right flex-end">
+            <span>在线支付</span>
+            <image class="right-img" src="@/static/order/ic_order_weixin.png"></image>
+          </view>
+        </view>
+      </view>
+
+      <view class="message-box">
+        <view class="goods-title"> {{ init_list.merchantDTO.name }} </view>
+        <u-line margin='20rpx 0'></u-line>
+        <view class="goods-item" v-for="(item,index) of init_list.cartItems" :key='item.goodsId'>
+          <view class="item-left">
+            <image class="left-img" src="@/static/QR57a.jpg"></image>
+            <view class="left-text">
+              <view class="text-name">{{ item.goodsName }}</view>
+              <view class="text-number">×{{ item.quantity }}</view>
+              <view class="price-box">
+                <p class="price red-color"> <span style="font-size: 24rpx;">￥</span>{{ item.price }}</p>
+                <span class="false-price">￥{{ item.originalPrice ? item.originalPrice : 0}}</span>
+              </view>
+            </view>
+          </view>
+          <view class="item-right">
+            <u-number-box v-model="item.quantity" @change="valChange(item,$event)"></u-number-box>
+          </view>
+        </view>
+      </view>
 
-			<!-- <view class="message-box">
+      <!-- <view class="message-box">
 				<view class="couon-box">
 					<view class="coupon-left">
 						<image class="img" src='@/static/images/coupon.png'></image>
@@ -72,29 +72,29 @@
 				</view>
 			</view> -->
 
-			<view class="message-box">
-				<view class="message-item">
-					<view class="item-left"> 订单总价 </view>
-					<view class=" flex-end red-color" style="align-items: center;">
-						<p style="margin-right: 20rpx; font-size: 36rpx; font-weight: bold;">
-							￥{{ orderParams.price.toFixed(2) }}</p>
-						<p style="text-decoration: line-through;font-style: italic;">(
-							已优惠￥{{ orderParams.discountPrice.toFixed(2) }} )</p>
-					</view>
-				</view>
-			</view>
-
-			<view class="message-box">
-				<view class="message-name"> 购买须知 </view>
-				<view class="message-text" style="text-indent:32.4px;">
-					洗车机常见的类型有高压洗车机和无水洗车机两种，高压洗车机可以配有不同的喷嘴，可实现不同场景下的清洗需求。
-					无水洗车机则是一种更为环保的洗车方式，它可以用高科技的化学技术在不用水的情况下清洗车辆。因此，
-					在购买洗车机时需要根据自己的实际需求进行选择
-				</view>
-			</view>
-		</view>
+      <view class="message-box">
+        <view class="message-item">
+          <view class="item-left"> 订单总价 </view>
+          <view class=" flex-end red-color" style="align-items: center;">
+            <p style="margin-right: 20rpx; font-size: 36rpx; font-weight: bold;">
+              ￥{{ orderParams.price.toFixed(2) }}</p>
+            <p style="text-decoration: line-through;font-style: italic;">(
+              已优惠￥{{ orderParams.discountPrice.toFixed(2) }} )</p>
+          </view>
+        </view>
+      </view>
+
+      <view class="message-box">
+        <view class="message-name"> 购买须知 </view>
+        <view class="message-text" style="text-indent:32.4px;">
+          洗车机常见的类型有高压洗车机和无水洗车机两种，高压洗车机可以配有不同的喷嘴，可实现不同场景下的清洗需求。
+          无水洗车机则是一种更为环保的洗车方式，它可以用高科技的化学技术在不用水的情况下清洗车辆。因此，
+          在购买洗车机时需要根据自己的实际需求进行选择
+        </view>
+      </view>
+    </view>
 
-		<!-- <u-popup :show="coupon_show" @close="close" mode='bottom' round='20' bgColor='#F4F4F4'>
+    <!-- <u-popup :show="coupon_show" @close="close" mode='bottom' round='20' bgColor='#F4F4F4'>
 			<view class="pop-box">
 				<view class="pop-title"> 商家优惠券 </view>
 				<u-line margin='20rpx 0'></u-line>
@@ -130,426 +130,430 @@
 			</view>
 		</u-popup> -->
 
-		<view class="btn-box">
-			<view class="btn" @click="handlerSettleBtn">
-				结算
-			</view>
-		</view>
-	</view>
+    <view class="btn-box">
+      <view class="btn" @click="handlerSettleBtn">
+        结算
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
-	import {
-		generateOrder,
-		getCartList,
-		generateConfirmOrder,
-		editGoodsNumb
-	} from "@/api/client/business.js"
-  import { successfulPayment } from "@/api/client/order.js"
-	//   import { maintainCouponPaging } from "@/api/client/mine.js"
-	import {
-		changeTime
-	} from "@/utils/date"
-	export default {
-		data() {
-			return {
-				coupon_show: false,
-				coupon_list: [],
-				init_list: {
-					cartItems: [],
-					merchantDTO: []
-				},
-				phoneNumber: null, // 订购电话
-				goodsRemark: '', // 备注
-				merchantId: null
-			}
-		},
-		mounted() {
-			this.handlerInitList()
-		},
-		onLoad(option) {
-			this.merchantId = option.ids
-		},
-		computed: {
-			orderParams() {
-				let price = 0
-				let originalPrice = 0
-				let discountPrice = 0
-				if (this.init_list.cartItems) {
-					this.init_list.cartItems.map(rs => {
-						price += Number((rs.price).toFixed(2) * rs.quantity)
-						originalPrice += Number((rs.originalPrice).toFixed(2) * rs.quantity)
-					})
-					discountPrice = originalPrice - price
-				}
-				return {
-					price,
-					discountPrice
-				}
-			}
-		},
-		methods: {
-			// 初始化列表接口
-			handlerInitList() {
-				getCartList(this.merchantId).then(res => {
-					this.init_list.cartItems = res.data.cartItems
-					this.init_list.merchantDTO = res.data.merchantDTO
-					// this.handlerInitCouponList(res.data.cartItems)
-				})
-			},
-			// 初始化优惠券列表
-			// handlerInitCouponList(cartItems){
-			//   let params = {
-			//     cartIds:[],
-			//     merchantId:this.merchantId
-			//   }
-			//   cartItems.map(rs=>{
-			//     params.cartIds.push(rs.id)
-			//   })
-			//   // 订单接口 - 根据购物车信息生成确认单信息
-			//   generateConfirmOrder(params).then(res=>{
-			//     this.coupon_list = res.data
-			//     this.coupon_list.couponHistoryDetailList.map(rs=>{
-			//       rs.couponDTO.endTime = changeTime(rs.couponDTO.createTime)
-			//     })
-			//   })
-			// },
-			// 结算按钮
-			handlerSettleBtn() {
-				let params = {
-					payType: '2',
-					cartIds: [],
-					merchantId: this.init_list.merchantDTO.id
-				}
-				this.init_list.cartItems.map(rs => {
-					params.cartIds.push(rs.goodsId)
-				})
-				generateOrder(params).then(res => {
-					if (res.code === 'OK') {
+  import {
+    generateOrder,
+    getCartList,
+    generateConfirmOrder,
+    editGoodsNumb
+  } from "@/api/client/business.js"
+  import {
+    successfulPayment
+  } from "@/api/client/order.js"
+  //   import { maintainCouponPaging } from "@/api/client/mine.js"
+  import {
+    changeTime
+  } from "@/utils/date"
+  export default {
+    data() {
+      return {
+        coupon_show: false,
+        coupon_list: [],
+        init_list: {
+          cartItems: [],
+          merchantDTO: []
+        },
+        phoneNumber: null, // 订购电话
+        goodsRemark: '', // 备注
+        merchantId: null
+      }
+    },
+    mounted() {
+      this.handlerInitList()
+    },
+    onLoad(option) {
+      this.merchantId = option.ids
+    },
+    computed: {
+      orderParams() {
+        let price = 0
+        let originalPrice = 0
+        let discountPrice = 0
+        if (this.init_list.cartItems) {
+          this.init_list.cartItems.map(rs => {
+            price += Number((rs.price).toFixed(2) * rs.quantity)
+            originalPrice += Number((rs.originalPrice).toFixed(2) * rs.quantity)
+          })
+          discountPrice = originalPrice - price
+        }
+        return {
+          price,
+          discountPrice
+        }
+      }
+    },
+    methods: {
+      // 初始化列表接口
+      handlerInitList() {
+        getCartList(this.merchantId).then(res => {
+          this.init_list.cartItems = res.data.cartItems
+          this.init_list.merchantDTO = res.data.merchantDTO
+          // this.handlerInitCouponList(res.data.cartItems)
+        })
+      },
+      // 初始化优惠券列表
+      // handlerInitCouponList(cartItems){
+      //   let params = {
+      //     cartIds:[],
+      //     merchantId:this.merchantId
+      //   }
+      //   cartItems.map(rs=>{
+      //     params.cartIds.push(rs.id)
+      //   })
+      //   // 订单接口 - 根据购物车信息生成确认单信息
+      //   generateConfirmOrder(params).then(res=>{
+      //     this.coupon_list = res.data
+      //     this.coupon_list.couponHistoryDetailList.map(rs=>{
+      //       rs.couponDTO.endTime = changeTime(rs.couponDTO.createTime)
+      //     })
+      //   })
+      // },
+      // 结算按钮
+      handlerSettleBtn() {
+        let params = {
+          payType: '2',
+          cartIds: [],
+          merchantId: this.init_list.merchantDTO.id
+        }
+        this.init_list.cartItems.map(rs => {
+          params.cartIds.push(rs.goodsId)
+        })
+        generateOrder(params).then(res => {
+          if (res.code === 'OK') {
             this.handlerCallOrderBack(res.data.order.id)
-					} else {
-						uni.showToast({
-							title: res.msg,
-						})
-						return
-					}
-				})
-			},
+          } else {
+            uni.showToast({
+              title: res.msg,
+            })
+            return
+          }
+        })
+      },
       // 支付回调
-      handlerCallOrderBack(id){
-        successfulPayment(id).then(res=>{
-          if(res.code == 'OK'){
+      handlerCallOrderBack(id) {
+        successfulPayment(id, {
+          payType: 2
+        }).then(res => {
+          if (res.code == 'OK') {
             uni.navigateTo({
-            	url: '/pages/client/clientPackage/settleStatusPage'
+              url: '/pages/client/clientPackage/settleStatusPage'
             })
-          }else{
+          } else {
             uni.showToast({
-              title:res.message,
-              icon:'none'
+              title: res.message,
+              icon: 'none'
             })
             return
           }
         })
       },
 
-			close() {
-				this.coupon_show = false
-			},
-			// 点击展示优惠券pop
-			openCouponshow() {
-				this.coupon_show = true
-			},
-			// 选择优惠券 点击确定按钮
-			handlerSelectCoupon() {
-				this.coupon_show = false
-			},
-			valChange(item, e) {
-			  editGoodsNumb(item.id, {
-			    quantity: e.value
-			  }).then(res => {
-			    console.log('@@@2res', res)
-			  })
-			},
-		}
-	}
+      close() {
+        this.coupon_show = false
+      },
+      // 点击展示优惠券pop
+      openCouponshow() {
+        this.coupon_show = true
+      },
+      // 选择优惠券 点击确定按钮
+      handlerSelectCoupon() {
+        this.coupon_show = false
+      },
+      valChange(item, e) {
+        editGoodsNumb(item.id, {
+          quantity: e.value
+        }).then(res => {
+          console.log('@@@2res', res)
+        })
+      },
+    }
+  }
 </script>
 
 <style lang="scss" scoped>
-	.container {
-		min-height: calc(100vh - 40rpx);
-		background: linear-gradient(to bottom, #bacff5, #F2F4FA, #fff);
-		padding: 20rpx;
-
-		.content-box {
-			padding: 20rpx 20rpx 120rpx;
-			max-height: calc(100vh - 180rpx);
-			overflow-y: auto;
-
-			.message-box {
-				padding: 20rpx;
-				border-radius: 20rpx;
-				background-color: #fff;
-				margin-bottom: 20rpx;
-				box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.1);
-
-				.message-item {
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-
-					.item-left {
-						font-size: 32rpx;
-						font-weight: bold;
-
-					}
-
-					.item-right {
-						width: 60%;
-						align-items: center;
-
-						.right-img {
-							width: 50rpx;
-							height: 50rpx;
-							margin-left: 20rpx;
-						}
-					}
-				}
-
-				.couon-box {
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-
-					.coupon-left {
-						display: flex;
-						align-items: center;
-						font-size: 30rpx;
-
-						.img {
-							width: 50rpx;
-							height: 50rpx;
-							margin-right: 20rpx;
-						}
-					}
-
-					.coupon-right {
-						display: flex;
-						align-items: center;
-					}
-				}
-
-				.goods-title {
-					font-size: 32rpx;
-				}
-
-				.goods-item {
-					margin-bottom: 30rpx;
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-
-					.item-left {
-						display: flex;
-
-						.left-img {
-							width: 130rpx;
-							height: 130rpx;
-							border-radius: 10rpx;
-						}
-
-						.left-text {
-							display: flex;
-							flex-direction: column;
-							justify-content: space-around;
-							margin-left: 20rpx;
-
-							.text-name {
-								font-weight: bold;
-								font-size: 30rpx;
-								width: 260rpx;
-								white-space: nowrap;
-								overflow: hidden;
-								text-overflow: ellipsis;
-							}
-
-							.price-box {
-								display: flex;
-								font-style: italic;
-								align-items: center;
-
-								.price {
-									font-size: 34rpx;
-									font-weight: bold;
-									margin-right: 20rpx;
-								}
-
-								.false-price {
-									color: #CACDD4;
-									text-decoration: line-through;
-								}
-							}
-						}
-					}
-				}
-
-				.message-name {
-					font-size: 32rpx;
-					font-weight: bold;
-				}
-
-				.message-text {
-					margin-top: 20rpx;
-					color: #bcbfc3;
-				}
-			}
-		}
-	}
-
-	.flex-end {
-		display: flex;
-		justify-content: flex-end;
-	}
-
-	.red-color {
-		color: #FF4B10;
-	}
-
-	::v-deep .u-border {
-		border-style: none !important;
-	}
-
-
-
-	.pop-box {
-		height: 850rpx;
-		background-color: #F4F4F4;
-		position: relative;
-
-		.pop-title {
-			font-weight: bold;
-			font-size: 36rpx;
-			text-align: center;
-			padding: 20rpx;
-			background: linear-gradient(to bottom, #fff, #fff, #F4F4F4);
-		}
-
-		.pop-coupon-box {
-			max-height: 650rpx;
-			overflow-y: scroll;
-		}
-
-		.pop-item {
-			padding: 20rpx;
-			margin-bottom: 10rpx;
-
-			.item-box {
-				padding: 20rpx;
-				border-radius: 20rpx 20rpx 0 0;
-				background-color: #fff;
-				display: flex;
-				align-items: center;
-				box-shadow: 0rpx 7rpx 20rpx 10rpx rgba(0, 0, 0, 0.1);
-				background-image: radial-gradient(circle at left bottom, #F4F4F4, #F4F4F4 40rpx, transparent 16rpx), radial-gradient(circle at right bottom, #F4F4F4, #F4F4F4 55rpx, transparent 16rpx), radial-gradient(circle at right top, #F4F4F4, #F4F4F4 35rpx, transparent 16rpx);
-
-				.item-left {
-					display: flex;
-					width: 70%;
-
-					.img-box,
-					.left-img {
-						width: 160rpx;
-						height: 160rpx;
-						border-radius: 20rpx;
-					}
-
-					.left-text {
-						margin-left: 20rpx;
-
-						.text-title {
-							font-size: 34rpx;
-							width: 350rpx;
-							white-space: nowrap;
-							overflow: hidden;
-							text-overflow: ellipsis;
-							color: #000;
-						}
-
-						.text {
-							font-size: 26rpx;
-							color: #666666;
-							margin-top: 10rpx;
-						}
-					}
-
-				}
-
-				.item-right {
-					text-align: center;
-					width: 30%;
-
-					.price {
-						font-size: 56rpx;
-
-						.price-symbol {
-							font-size: 24rpx;
-						}
-					}
-
-					.text {
-						color: #656565;
-						margin-top: 20rpx;
-					}
-				}
-			}
-
-			.item-bottom {
-				padding: 20rpx 50rpx 20rpx 30rpx;
-				background-color: #fff;
-				border-radius: 0 0 20rpx 20rpx;
-				box-shadow: 0rpx 10rpx 15rpx 0rpx rgba(0, 0, 0, 0.1);
-				background-image: radial-gradient(circle at left top, #F4F4F4, #F4F4F4 40rpx, transparent 16rpx), radial-gradient(circle at right top, #F4F4F4, #F4F4F4 55rpx, transparent 16rpx);
-				border-top: 1px dashed #F4F4F4;
-				color: #b1b4b9;
-				font-size: 26rpx;
-				font-style: oblique;
-				text-indent: 32.4px;
-			}
-		}
-
-		.pop-bottom {
-			position: absolute;
-			bottom: 0;
-			width: 100%;
-			display: flex;
-			justify-content: center;
-
-			.coupon-btn {
-				width: 100%;
-				background-color: #FFDE21 !important;
-				color: #000;
-				font-size: 28rpx;
-				// height:80rpx;
-				// line-height: 80rpx;
-				border-radius: 20rpx;
-			}
-		}
-	}
-
-
-
-	.btn-box {
-		width: 100%;
-		position: fixed;
-		bottom: 5%;
-
-		.btn {
-			width: 90%;
-			background: linear-gradient(to right, #1d4350, #a43931);
-			color: #fff;
-			border-radius: 40rpx;
-			text-align: center;
-			font-size: 32rpx;
-			padding: 20rpx;
-		}
-	}
+  .container {
+    min-height: calc(100vh - 40rpx);
+    background: linear-gradient(to bottom, #bacff5, #F2F4FA, #fff);
+    padding: 20rpx;
+
+    .content-box {
+      padding: 20rpx 20rpx 120rpx;
+      max-height: calc(100vh - 180rpx);
+      overflow-y: auto;
+
+      .message-box {
+        padding: 20rpx;
+        border-radius: 20rpx;
+        background-color: #fff;
+        margin-bottom: 20rpx;
+        box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.1);
+
+        .message-item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .item-left {
+            font-size: 32rpx;
+            font-weight: bold;
+
+          }
+
+          .item-right {
+            width: 60%;
+            align-items: center;
+
+            .right-img {
+              width: 50rpx;
+              height: 50rpx;
+              margin-left: 20rpx;
+            }
+          }
+        }
+
+        .couon-box {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .coupon-left {
+            display: flex;
+            align-items: center;
+            font-size: 30rpx;
+
+            .img {
+              width: 50rpx;
+              height: 50rpx;
+              margin-right: 20rpx;
+            }
+          }
+
+          .coupon-right {
+            display: flex;
+            align-items: center;
+          }
+        }
+
+        .goods-title {
+          font-size: 32rpx;
+        }
+
+        .goods-item {
+          margin-bottom: 30rpx;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .item-left {
+            display: flex;
+
+            .left-img {
+              width: 130rpx;
+              height: 130rpx;
+              border-radius: 10rpx;
+            }
+
+            .left-text {
+              display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+              margin-left: 20rpx;
+
+              .text-name {
+                font-weight: bold;
+                font-size: 30rpx;
+                width: 260rpx;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              }
+
+              .price-box {
+                display: flex;
+                font-style: italic;
+                align-items: center;
+
+                .price {
+                  font-size: 34rpx;
+                  font-weight: bold;
+                  margin-right: 20rpx;
+                }
+
+                .false-price {
+                  color: #CACDD4;
+                  text-decoration: line-through;
+                }
+              }
+            }
+          }
+        }
+
+        .message-name {
+          font-size: 32rpx;
+          font-weight: bold;
+        }
+
+        .message-text {
+          margin-top: 20rpx;
+          color: #bcbfc3;
+        }
+      }
+    }
+  }
+
+  .flex-end {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .red-color {
+    color: #FF4B10;
+  }
+
+  ::v-deep .u-border {
+    border-style: none !important;
+  }
+
+
+
+  .pop-box {
+    height: 850rpx;
+    background-color: #F4F4F4;
+    position: relative;
+
+    .pop-title {
+      font-weight: bold;
+      font-size: 36rpx;
+      text-align: center;
+      padding: 20rpx;
+      background: linear-gradient(to bottom, #fff, #fff, #F4F4F4);
+    }
+
+    .pop-coupon-box {
+      max-height: 650rpx;
+      overflow-y: scroll;
+    }
+
+    .pop-item {
+      padding: 20rpx;
+      margin-bottom: 10rpx;
+
+      .item-box {
+        padding: 20rpx;
+        border-radius: 20rpx 20rpx 0 0;
+        background-color: #fff;
+        display: flex;
+        align-items: center;
+        box-shadow: 0rpx 7rpx 20rpx 10rpx rgba(0, 0, 0, 0.1);
+        background-image: radial-gradient(circle at left bottom, #F4F4F4, #F4F4F4 40rpx, transparent 16rpx), radial-gradient(circle at right bottom, #F4F4F4, #F4F4F4 55rpx, transparent 16rpx), radial-gradient(circle at right top, #F4F4F4, #F4F4F4 35rpx, transparent 16rpx);
+
+        .item-left {
+          display: flex;
+          width: 70%;
+
+          .img-box,
+          .left-img {
+            width: 160rpx;
+            height: 160rpx;
+            border-radius: 20rpx;
+          }
+
+          .left-text {
+            margin-left: 20rpx;
+
+            .text-title {
+              font-size: 34rpx;
+              width: 350rpx;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              color: #000;
+            }
+
+            .text {
+              font-size: 26rpx;
+              color: #666666;
+              margin-top: 10rpx;
+            }
+          }
+
+        }
+
+        .item-right {
+          text-align: center;
+          width: 30%;
+
+          .price {
+            font-size: 56rpx;
+
+            .price-symbol {
+              font-size: 24rpx;
+            }
+          }
+
+          .text {
+            color: #656565;
+            margin-top: 20rpx;
+          }
+        }
+      }
+
+      .item-bottom {
+        padding: 20rpx 50rpx 20rpx 30rpx;
+        background-color: #fff;
+        border-radius: 0 0 20rpx 20rpx;
+        box-shadow: 0rpx 10rpx 15rpx 0rpx rgba(0, 0, 0, 0.1);
+        background-image: radial-gradient(circle at left top, #F4F4F4, #F4F4F4 40rpx, transparent 16rpx), radial-gradient(circle at right top, #F4F4F4, #F4F4F4 55rpx, transparent 16rpx);
+        border-top: 1px dashed #F4F4F4;
+        color: #b1b4b9;
+        font-size: 26rpx;
+        font-style: oblique;
+        text-indent: 32.4px;
+      }
+    }
+
+    .pop-bottom {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+
+      .coupon-btn {
+        width: 100%;
+        background-color: #FFDE21 !important;
+        color: #000;
+        font-size: 28rpx;
+        // height:80rpx;
+        // line-height: 80rpx;
+        border-radius: 20rpx;
+      }
+    }
+  }
+
+
+
+  .btn-box {
+    width: 100%;
+    position: fixed;
+    bottom: 5%;
+
+    .btn {
+      width: 90%;
+      background: linear-gradient(to right, #1d4350, #a43931);
+      color: #fff;
+      border-radius: 40rpx;
+      text-align: center;
+      font-size: 32rpx;
+      padding: 20rpx;
+    }
+  }
 </style>

src/pages/client/clientUser/mine/appoint/appoint.vue

@@ -2,164 +2,153 @@
   <view class="container">
     <view class="appoint" :key="index" v-for="(item, index) of init_list">
       <view class="appoint-list">
-        <view class="appoint-title">{{ item.simpleMerchantVO.name }}</view>
-        <view class="appoint-address">{{ item.simpleMerchantVO.address }}</view>
+        <view class="appoint-title">{{ item.goodsName }}</view>
+        <view class="appoint-address"></view>
         <view class="appoint-flex">
-          <image
-            class="img"
-            :src="
-              error || !loaded
-                ? 'https://cdn.uviewui.com/uview/album/10.jpg'
-                : item.simpleMerchantVO.logo
-            "
-            mode="scaleToFill"
-          ></image>
+          <image class="img" :src=" item.simpleMerchantVO.logo" mode="scaleToFill"></image>
           <view class="appoint-text">
-            <view>{{ item.goodsName }}</view>
+            <view>{{ item.simpleMerchantVO.name }}</view>
             <view>时间：{{ $u.timeFormat(item.appointTime) }}</view>
             <view>联系方式：{{ item.mobile }}</view>
           </view>
         </view>
         <view class="appoint-goto">
-          <u-button
-            class="detail"
-            text="详情"
-            @click="handlerSkipGoodsDetail(item, index)"
-          ></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>
-    <u-empty
-      v-if="init_list.length == 0"
-      mode="data"
-      icon="http://cdn.uviewui.com/uview/empty/data.png"
-    >
+    <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 { maintainReservations } from '@/api/client/mine.js';
-import { cancelReservation } from '@/api/client/business.js';
-export default {
-  data() {
-    return {
-      queryParams: {
-        size: 10,
-      },
-      init_list: [], //初始化列表
-    };
-  },
-  mounted() {
-    this.handlerInitList();
-  },
-  methods: {
-    // 初始化列表
-    handlerInitList() {
-      maintainReservations(this.queryParams).then(res => {
-        this.init_list = res.data;
-      });
+  import {
+    maintainReservations
+  } from '@/api/client/mine.js';
+  import {
+    cancelReservation
+  } from '@/api/client/business.js';
+  export default {
+    data() {
+      return {
+        queryParams: {
+          size: 10,
+        },
+        init_list: [], //初始化列表
+      };
     },
-    // 点击取消商品
-    handlerClearItem(item) {
-      cancelReservation(item.id).then(res => {
-        if (res.code === 'OK') {
-          uni.showToast({
-            title: '取消成功',
-            icon: 'none',
-          });
-          this.handlerInitList();
-        } else {
-          uni.showToast({
-            title: res.msg,
-            icon: 'none',
-          });
-          return;
-        }
-      });
+    mounted() {
+      this.handlerInitList();
     },
-    // 点击跳转到商品详情
-    handlerSkipGoodsDetail(item, index) {
-      uni.navigateTo({
-        url: `/pages/client/clientPackage/serviceDetail/index?id=${item.simpleMerchantVO.id}`,
-      });
+    methods: {
+      // 初始化列表
+      handlerInitList() {
+        maintainReservations(this.queryParams).then(res => {
+          this.init_list = res.data;
+        });
+      },
+      // 点击取消商品
+      handlerClearItem(item) {
+        cancelReservation(item.id).then(res => {
+          if (res.code === 'OK') {
+            uni.showToast({
+              title: '取消成功',
+              icon: 'none',
+            });
+            this.handlerInitList();
+          } else {
+            uni.showToast({
+              title: res.msg,
+              icon: 'none',
+            });
+            return;
+          }
+        });
+      },
+      // 点击跳转到商品详情
+      handlerSkipGoodsDetail(item, index) {
+        uni.navigateTo({
+          // url: `/pages/client/clientPackage/serviceDetail/index?id=${item.merchantId}`,
+          url: `/pages/client/clientPackage/serviceDetail/index?id=${item.goodsId}&shopId=${item.merchantId}`,
+        });
+      },
     },
-  },
-};
+  };
 </script>
 
 <style lang="scss" scoped>
-page {
-  background-color: #efefef;
-}
-
-.container {
-  padding: 20rpx;
-}
-
-.appoint {
-  .history {
-    font-size: 38rpx;
-    margin: 20rpx 10rpx;
-    font-weight: bold;
+  page {
+    background-color: #efefef;
   }
-}
-
-.appoint-list {
-  padding: 20rpx;
-  background-color: #fff;
-  margin-bottom: 20rpx;
-  box-sizing: border-box;
-  border-radius: 20rpx;
 
-  .appoint-title {
-    font-size: 38rpx;
-    font-weight: bold;
-    margin-bottom: 10rpx;
-    color: #090909;
+  .container {
+    padding: 20rpx;
   }
 
-  .appoint-address {
-    font-size: 32rpx;
-    margin: 20rpx;
-    padding-bottom: 20rpx;
-    color: #000000;
-    border-bottom: 2rpx solid #e5e5e5;
+  .appoint {
+    .history {
+      font-size: 38rpx;
+      margin: 20rpx 10rpx;
+      font-weight: bold;
+    }
   }
 
-  .appoint-flex {
-    display: flex;
+  .appoint-list {
+    padding: 20rpx;
+    background-color: #fff;
+    margin-bottom: 20rpx;
+    box-sizing: border-box;
+    border-radius: 20rpx;
 
-    .img {
-      width: 210rpx;
-      height: 160rpx;
-      display: block;
-      margin-right: 15rpx;
+    .appoint-title {
+      font-size: 38rpx;
+      font-weight: bold;
+      margin-bottom: 10rpx;
+      color: #090909;
     }
 
-    .appoint-text {
-      font-size: 28rpx;
+    .appoint-address {
+      font-size: 32rpx;
+      margin: 20rpx;
+      padding-bottom: 20rpx;
+      color: #000000;
+      border-bottom: 2rpx solid #e5e5e5;
+    }
 
-      > view {
-        margin-bottom: 26rpx;
+    .appoint-flex {
+      display: flex;
+
+      .img {
+        width: 210rpx;
+        height: 160rpx;
+        display: block;
+        margin-right: 15rpx;
       }
-    }
-  }
 
-  .appoint-goto {
-    display: flex;
+      .appoint-text {
+        font-size: 28rpx;
 
-    .detail,
-    .cancel {
-      width: 45%;
-      border-radius: 20rpx;
+        >view {
+          margin-bottom: 26rpx;
+        }
+      }
     }
 
-    .detail {
-      background-color: #6c9fc3;
-      color: #fff;
+    .appoint-goto {
+      display: flex;
+
+      .detail,
+      .cancel {
+        width: 45%;
+        border-radius: 20rpx;
+      }
+
+      .detail {
+        background-color: #6c9fc3;
+        color: #fff;
+      }
     }
   }
-}
 </style>