🐞 fix:优化商家详情

src/App.vue

@@ -11,7 +11,7 @@ export default {
 
 <style lang="scss" scoped>
 @import 'uview-ui/index.scss';
-@import './design/index.scss';
+@import 'design/flex.css';
 
 page {
   background-color: #efefef;

src/api/client/mine.js

@@ -30,6 +30,36 @@ export function maintainUserInfo(data) {
   });
 }
 
+/**
+ * 用户接口 - 修改用户信息
+ * @returns
+ */
+export function editUserInfo(data) {
+  return request({
+    url: '/maintain/user/info',
+    method: 'PUT',
+    data: data,
+    header: {
+      'content-type': 'application/x-www-form-urlencoded',
+    },
+  });
+}
+
+/**
+ * 用户接口 - 注销当前用户
+ * @returns
+ */
+export function deleteUserInfo(data) {
+  return request({
+    url: '/maintain/user/info',
+    method: 'DELETE',
+    data: data,
+    header: {
+      'content-type': 'application/x-www-form-urlencoded',
+    },
+  });
+}
+
 /**
  * 优惠券接口 - 查询优惠券分页
  * @returns

src/components/service/index.vue

@@ -61,7 +61,7 @@ export default {
         });
       } else if (this.skipType == 1) {
         uni.navigateTo({
-          url: `/pages/client/clientPackage/serviceDetail?id=${item.id}`,
+          url: `/pages/client/clientPackage/serviceDetail/index?id=${item.id}`,
         });
       }
     },

src/design/flex.scss → src/design/flex.css

@@ -2,102 +2,102 @@
      flex弹性布局
  ==================== */
 
-.flex {
+.chelvc-flex {
   display: flex;
 }
 
-.basis-xs {
+.chelvc-basis-xs {
   flex-basis: 20%;
 }
 
-.basis-sm {
+.chelvc-basis-sm {
   flex-basis: 40%;
 }
 
-.basis-df {
+.chelvc-basis-df {
   flex-basis: 50%;
 }
 
-.basis-lg {
+.chelvc-basis-lg {
   flex-basis: 60%;
 }
 
-.basis-xl {
+.chelvc-basis-xl {
   flex-basis: 80%;
 }
 
-.flex-sub {
+.chelvc-flex-sub {
   flex: 1;
 }
 
-.flex-twice {
+.chelvc-flex-twice {
   flex: 2;
 }
 
-.flex-treble {
+.chelvc-flex-treble {
   flex: 3;
 }
 
-.flex-direction {
+.chelvc-flex-direction {
   flex-direction: column;
 }
 
-.flex-wrap {
+.chelvc-flex-wrap {
   flex-wrap: wrap;
 }
 
-.align-start {
+.chelvc-align-start {
   align-items: flex-start;
 }
 
-.align-end {
+.chelvc-align-end {
   align-items: flex-end;
 }
 
-.align-center {
+.chelvc-chelvc-align-center {
   align-items: center;
 }
 
-.align-stretch {
+.chelvc-align-stretch {
   align-items: stretch;
 }
 
-.self-start {
+.chelvc-self-start {
   align-self: flex-start;
 }
 
-.self-center {
+.chelvc-self-center {
   align-self: flex-center;
 }
 
-.self-end {
+.chelvc-self-end {
   align-self: flex-end;
 }
 
-.self-stretch {
+.chelvc-self-stretch {
   align-self: stretch;
 }
 
-.align-stretch {
+.chelvc-align-stretch {
   align-items: stretch;
 }
 
-.justify-start {
+.chelvc-justify-start {
   justify-content: flex-start;
 }
 
-.justify-end {
+.chelvc-justify-end {
   justify-content: flex-end;
 }
 
-.justify-center {
+.chelvc-justify-center {
   justify-content: center;
 }
 
-.justify-between {
+.chelvc-justify-between {
   justify-content: space-between;
 }
 
-.justify-around {
+.chelvc-justify-around {
   justify-content: space-around;
-}
+}

src/pages.json

@@ -135,7 +135,7 @@
           }
         },
         {
-          "path": "serviceDetail",
+          "path": "serviceDetail/index",
           "style": {
             "navigationBarTitleText": "服务详情"
           }

src/pages/client/clientPackage/serviceDetail.vue

@@ -1,464 +0,0 @@
-<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>
-			<u-swiper :list="goods.banners" previousMargin="0" nextMargin="100" circular :autoplay="false"
-				bgColor="#ffffff" />
-			<!-- <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='item.icon' size="24" />
-				<text class="user-operate-text">{{ item.name }}</text>
-			</view>
-			<view class="user-operate" @tap="handlerFavourite">
-				<u-icon class="user-operate-icon" :name="goods.favorites ? favourite_list.fill : favourite_list.icon"
-					size="24" />
-				<text class="user-operate-text">{{ favourite_list.name }}</text>
-			</view>
-			<view class="buyNow" @click="handlerImmediateBy">立即购买</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	import {
-		getGoodsDetailApi,
-		addFavorite
-	} from '@/api/client/business.js';
-	export default {
-		data() {
-			return {
-				userOperate: [{
-						name: '店铺',
-						icon: 'file-text',
-					},
-					{
-						name: '立即咨询',
-						icon: 'chat',
-					}
-					
-				],
-				favourite_list: {
-					name: '收藏',
-					icon: 'heart',
-					fill: 'heart-fill',
-				},
-				// hascollect: false, // 当前店铺是否被收藏
-
-				goods: [], //商品详情
-				coupons: [], //优惠券
-				comments: [], // 评论
-				id: '',
-			};
-		},
-		onLoad(option) {
-			// 获取商品详情接口
-			this.id = option.id;
-			this.handlerInitList(option.id);
-		},
-		mounted() {
-		},
-		methods: {
-			handlerInitList(id) {
-				getGoodsDetailApi(id).then(res => {
-					this.goods = res.data.goods;
-					console.log("@@@@goods",this.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(item, index) {
-				switch (index) {
-					case 0:
-						uni.navigateTo({
-							url: `/pages/client/clientPackage/storeDetail?id=${this.goods.id}`,
-						});
-						break;
-					case 1:
-						uni.showToast({
-							title: '暂无',
-							icon: 'none',
-						});
-						break;
-				}
-			},
-			// 点击收藏
-			handlerFavourite(){
-				console.log('@@@id',this.id);
-				addFavorite(this.id).then(res => {
-					if (res.code == 200) {
-						this.handlerInitList(this.id);
-						// this.hascollect = !this.hascollect;
-						uni.showToast({
-							title: '收藏成功',
-							icon: 'none',
-						});
-					} else {
-						uni.showToast({
-							title: res.msg,
-							icon: 'none',
-						});
-						return;
-					}
-				});
-			},
-			// 点击领取优惠卷
-			handlerGetCoupon() {
-				uni.showToast({
-					title: '没有',
-					icon: 'none',
-				});
-			},
-
-			// 点击购买按钮
-			handlerImmediateBy() {
-				this.$store.commit('order/GET_ORDER_LIST',this.goods)
-				uni.navigateTo({
-					url: `/pages/client/clientPackage/uptickOrder?id=${this.id}`,
-				});
-			},
-		},
-	};
-</script>
-
-<style lang="scss" scoped>
-	.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;
-			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;
-		}
-	}
-</style>

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

@@ -0,0 +1,259 @@
+<template>
+  <view class="container">
+    <view class="detail chelvc-flex">
+      <text>优惠详情</text>
+      <view class="closeIcon" @click="close">
+        <u-icon name="close" color="#999" size="20" />
+      </view>
+    </view>
+
+    <view class="content">
+      <view v-for="item in list" :key="item.id" class="itemList">
+        <view class="title"> {{ item.title }}</view>
+        <view class="text">{{ item.text }} </view>
+      </view>
+    </view>
+
+    <view class="placeholder"></view>
+
+    <view>
+      <view style="padding: 20rpx">店铺优惠</view>
+      <view class="coupon" v-for="(item, index) in coupons" :key="index">
+        <view class="coupon-left">
+          <text class="coupon-text">￥</text>
+          <text class="coupon-price">5</text>
+        </view>
+        <view class="coupon-center">
+          <view class="coupon-center-user">{{ item.name }}</view>
+          <view class="coupon-center-type">{{ item.description }}</view>
+        </view>
+        <view class="coupon-right">
+          <view class="claimable" v-show="true" @click="handlerGetCoupon(item, index)">可领取</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    coupons: {
+      type: Array,
+      default: [],
+    },
+  },
+  data() {
+    return {
+      list: [
+        {
+          id: 0,
+          title: '30天低价',
+          text: '当前商品价格为30天低价，比平时低48%',
+        },
+        {
+          id: 1,
+          title: '店铺新客立减',
+          text: '店铺新客购买该商品立减10元%',
+        },
+        {
+          id: 2,
+          title: '多件优惠',
+          text: '该商品满2件享9.5折%',
+        },
+      ],
+    };
+  },
+  methods: {
+    close() {
+      this.$emit('close', false);
+    },
+
+    // 点击领取优惠卷
+    handlerGetCoupon() {
+      uni.showToast({
+        title: '没有',
+        icon: 'none',
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+  height: 900rpx;
+  box-sizing: border-box;
+  .chelvc-flex {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .detail {
+    height: 100rpx;
+    position: relative;
+    border-bottom: 1rpx solid #f4f4f4;
+    .closeIcon {
+      position: absolute;
+      top: 40rpx;
+      right: 30rpx;
+    }
+  }
+
+  .content {
+    padding: 10rpx 20rpx;
+    .itemList {
+      margin: 20rpx 0;
+      .title {
+        font-size: 30rpx;
+        color: #333;
+        margin-bottom: 8rpx;
+      }
+      .text {
+        font-size: 24rpx;
+        color: #999;
+      }
+    }
+  }
+  .placeholder {
+    height: 30rpx;
+    background-color: #f4f4f4;
+    margin: 0 20rpx;
+  }
+  .coupon {
+    height: 150rpx;
+    margin: 10rpx 20rpx;
+    background-color: #faeaea;
+    border: 2rpx solid #eb8f8f;
+    display: flex;
+    align-items: center;
+    .coupon-text {
+      color: #e53f3f;
+      font-size: 30rpx;
+    }
+    .coupon-left {
+      flex: 1;
+      text-align: center;
+      .coupon-price {
+        font-size: 60rpx;
+        color: #ee1310;
+      }
+    }
+    .coupon-center {
+      flex: 4;
+      color: #ee1310;
+      .coupon-center-user {
+        font-size: 30rpx;
+        font-weight: 600;
+      }
+      .coupon-center-type {
+        font-size: 28rpx;
+        margin-top: 10rpx;
+      }
+    }
+    .coupon-right {
+      flex: 1.5;
+      .claimable {
+        width: 110rpx;
+        height: 55rpx;
+        background: #f39818;
+        border-radius: 10rpx;
+        color: #fff;
+        font-size: 26rpx;
+        line-height: 55rpx;
+        text-align: center;
+      }
+      .claimable-content {
+        width: 160rpx;
+        height: 80rpx;
+        background-color: #de2d23;
+        font-size: 24rpx;
+        color: #fff;
+        border-radius: 10rpx;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        margin-right: 10rpx;
+      }
+    }
+  }
+}
+// .coupon {
+//   height: 300rpx;
+//   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;
+//     }
+//   }
+// }
+</style>

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

@@ -0,0 +1,382 @@
+<template>
+  <view class="service">
+    <view class="service-content">
+      <!-- 顶部 -->
+      <view class="flex" style="margin-top: 10rpx">
+        <view class="flex">
+          <u-icon name="share-square" size="24" />
+          <text style="font-size: 24rpx; color: #666">七仔美容</text>
+        </view>
+        <u-icon name="share-square" size="24" @click="handlerShare" />
+      </view>
+
+      <!-- 标题和轮播图 -->
+      <view>
+        <view class="service-title">{{ goods.name }}</view>
+        <u-swiper
+          :list="goods.banners"
+          previousMargin="30"
+          nextMargin="30"
+          circular
+          :autoplay="false"
+          bgColor="#ffffff"
+          height="190"
+        />
+      </view>
+
+      <!-- 价格 -->
+      <view class="flex price-content">
+        <view>
+          <view>
+            <text class="price">￥</text>
+            <text class="price-text">{{ goods.specialPrice }}</text>
+          </view>
+          <text class="price">券后￥{{ goods.originalPrice }}</text>
+        </view>
+        <view class="text_title">半售200+</view>
+      </view>
+
+      <!-- 评价 -->
+      <view>
+        <view class="flex evaluate">
+          <view class="flex">
+            <text style="margin-right: 30rpx">评价</text>
+            <u-rate :value="5" readonly activeColor="#f3b935" />
+            <text style="font-size: 24rpx; color: #f4b931">100%</text>
+          </view>
+          <view class="flex">
+            <text class="text_title" style="margin-right: 20rpx">共40个消费评价</text>
+            <u-icon name="arrow-right" size="16" color="#999" />
+          </view>
+        </view>
+        <view class="evaluate-context">
+          <view class="flex evaluate">
+            <view class="flex">
+              <text style="margin-right: 30rpx">优惠</text>
+              <view class="text_title"> 您有2张8元无门槛券待额 </view>
+            </view>
+            <view class="flex" @click="openPopup">
+              <text class="text_title" style="margin-right: 20rpx">去领取</text>
+              <u-icon name="arrow-right" size="16" color="#999" />
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- 弹窗 -->
+    <u-popup :show="show" mode="bottom" :safeAreaInsetBottom="true">
+      <view>
+        <GainCoupon @close="closeCoupon" :coupons="coupons"></GainCoupon>
+      </view>
+    </u-popup>
+    <view class="placeholder"></view>
+
+    <!-- 服务详情 -->
+    <view class="detail">
+      <view>
+        <u-tabs
+          :list="detailList"
+          lineWidth="50"
+          lineColor="#fdbf05"
+          :activeStyle="{
+            color: '#303133',
+            fontWeight: 'bold',
+            transform: 'scale(1.05)',
+          }"
+          :inactiveStyle="{
+            color: '#606266',
+            transform: 'scale(1)',
+          }"
+          itemStyle="padding-left: 15px; padding-right: 15px; height: 40px;"
+        />
+      </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="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"
+        />
+        <text class="user-operate-text">{{ favorite_list.name }}</text>
+      </view>
+      <view class="buyNow" @click="handlerImmediateBy">立即购买</view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { getGoodsDetailApi, addFavorite } from '@/api/client/business.js';
+import GainCoupon from './GainCoupon.vue';
+export default {
+  components: { GainCoupon },
+  data() {
+    return {
+      userOperate: [
+        {
+          name: '店铺',
+          icon: 'file-text',
+        },
+        {
+          name: '立即咨询',
+          icon: 'chat',
+        },
+      ],
+      favorite_list: {
+        name: '收藏',
+        icon: 'heart',
+        fill: 'heart-fill',
+      },
+      goods: [], //商品详情
+      coupons: [], //优惠券
+      comments: [], // 评论
+      id: '',
+      show: false,
+      detailList: [
+        {
+          id: '1',
+          name: '服务详情',
+        },
+        {
+          id: '2',
+          name: '购买须知',
+        },
+        {
+          id: '3',
+          name: '网友评价',
+        },
+      ],
+    };
+  },
+  onLoad(option) {
+    // 获取商品详情接口
+    this.id = option.id;
+    this.handlerInitList(option.id);
+  },
+  methods: {
+    openPopup() {
+      this.show = true;
+    },
+    closeCoupon(data) {
+      this.show = data;
+    },
+    handlerInitList(id) {
+      getGoodsDetailApi(id).then(res => {
+        this.goods = res.data.goods;
+        console.log('@@@@goods', this.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(item, index) {
+      switch (index) {
+        case 0:
+          uni.navigateTo({
+            url: `/pages/client/clientPackage/storeDetail?id=${this.goods.id}`,
+          });
+          break;
+        case 1:
+          uni.showToast({
+            title: '暂无',
+            icon: 'none',
+          });
+          break;
+      }
+    },
+    // 点击收藏
+    handlerFavorite() {
+      console.log('@@@id', this.id);
+      addFavorite(this.id).then(res => {
+        if (res.code == 200) {
+          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}`,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.service {
+  min-height: 100vh;
+  background-color: #fff;
+  padding: 0 20rpx;
+
+  .service-content {
+    .service-title {
+      font-size: 36rpx;
+      font-weight: bold;
+      margin: 20rpx;
+    }
+  }
+  .price-content {
+    margin: 20rpx;
+    .price {
+      font-size: 24rpx;
+      color: #e02e24;
+    }
+    .price-text {
+      font-size: 36rpx;
+      color: #e02e24;
+    }
+  }
+  .evaluate {
+    height: 30rpx;
+    margin: 30rpx 0 30rpx 20rpx;
+    padding-bottom: 30rpx;
+    border-bottom: 1rpx solid #f4f4f4;
+  }
+  .evaluate-context {
+    .evaluate {
+      border-bottom: none;
+      padding-bottom: 10rpx;
+    }
+  }
+
+  /* 占位 */
+  .placeholder {
+    height: 30rpx;
+    background-color: #f4f4f4;
+  }
+}
+.flex {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.text_title {
+  font-size: 24rpx;
+  color: #999;
+}
+
+.popup {
+  height: 400rpx;
+}
+
+// 底部
+.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;
+  }
+}
+</style>

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

@@ -0,0 +1,489 @@
+<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>
+      <u-swiper
+        :list="goods.banners"
+        previousMargin="0"
+        nextMargin="100"
+        circular
+        :autoplay="false"
+        bgColor="#ffffff"
+      />
+      <!-- <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="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"
+        />
+        <text class="user-operate-text">{{ favorite_list.name }}</text>
+      </view>
+      <view class="buyNow" @click="handlerImmediateBy">立即购买</view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { getGoodsDetailApi, addFavorite } from '@/api/client/business.js';
+export default {
+  data() {
+    return {
+      userOperate: [
+        {
+          name: '店铺',
+          icon: 'file-text',
+        },
+        {
+          name: '立即咨询',
+          icon: 'chat',
+        },
+      ],
+      favorite_list: {
+        name: '收藏',
+        icon: 'heart',
+        fill: 'heart-fill',
+      },
+      // hascollect: false, // 当前店铺是否被收藏
+
+      goods: [], //商品详情
+      coupons: [], //优惠券
+      comments: [], // 评论
+      id: '',
+    };
+  },
+  onLoad(option) {
+    // 获取商品详情接口
+    this.id = option.id;
+    this.handlerInitList(option.id);
+  },
+  mounted() {},
+  methods: {
+    handlerInitList(id) {
+      getGoodsDetailApi(id).then(res => {
+        this.goods = res.data.goods;
+        console.log('@@@@goods', this.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(item, index) {
+      switch (index) {
+        case 0:
+          uni.navigateTo({
+            url: `/pages/client/clientPackage/storeDetail?id=${this.goods.id}`,
+          });
+          break;
+        case 1:
+          uni.showToast({
+            title: '暂无',
+            icon: 'none',
+          });
+          break;
+      }
+    },
+    // 点击收藏
+    handlerFavorite() {
+      console.log('@@@id', this.id);
+      addFavorite(this.id).then(res => {
+        if (res.code == 200) {
+          this.handlerInitList(this.id);
+          // this.hascollect = !this.hascollect;
+          uni.showToast({
+            title: '收藏成功',
+            icon: 'none',
+          });
+        } else {
+          uni.showToast({
+            title: res.msg,
+            icon: 'none',
+          });
+          return;
+        }
+      });
+    },
+    // 点击领取优惠卷
+    handlerGetCoupon() {
+      uni.showToast({
+        title: '没有',
+        icon: 'none',
+      });
+    },
+
+    // 点击购买按钮
+    handlerImmediateBy() {
+      this.$store.commit('order/GET_ORDER_LIST', this.goods);
+      uni.navigateTo({
+        url: `/pages/client/clientPackage/uptickOrder?id=${this.id}`,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.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;
+    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;
+  }
+}
+</style>

src/pages/client/clientPackage/storeDetail.vue

@@ -1,552 +1,595 @@
 <template>
-	<view class="detail">
-		<!-- 轮播图 -->
-		<view class="carousel-map">
-			<u-swiper :list="swiperList" previousMargin="0" nextMargin="100" circular :autoplay="false"
-				bgColor="#ffffff" />
-			<view class="carousel-item">
-				<view class="mark">
-					<view class="mark-item">{{ merchant.score }}分</view>
-					<u-rate :count="count" v-model="value" active-color="#fff" inactive-color="#fff" :size="12" />
-				</view>
-				<view class="good-item">近期有6266个购买者给了给好评</view>
-			</view>
-		</view>
-
-		<!-- 商家信息 -->
-		<view class="merchant-info">
-			<view class="info-title">
-				<view>{{ merchant.name }}</view>
-				<text class="info-mark">{{ merchant.sale / 10000 }}w+单</text>
-			</view>
-			<view class="info-tag">商家信息</view>
-			<view class="info-item">
-				<view class="info-text">
-					<view>营业时间：{{ merchant.opening }}</view>
-					<view>电话号码：{{ merchant.mobile }}</view>
-					<view>{{ merchant.address }}</view>
-					<view class="distance">{{ (merchant.distance / 1000).toFixed(2) }}km</view>
-				</view>
-				<view class="info-icon">
-					<view class="info-map">
-						<u-icon name="map" size="20"></u-icon>
-						<view style="font-size: 20rpx; margin-top: 5rpx">导航</view>
-					</view>
-					<view class="info-map" @click="handlerMakeCall">
-						<u-icon name="phone" size="20"></u-icon>
-						<view style="font-size: 20rpx; margin-top: 5rpx">电话</view>
-					</view>
-				</view>
-			</view>
-		</view>
-
-		<!-- 商家分类 -->
-		<view class="categoryList">
-			<u-tabs :list="categoryList"></u-tabs>
-		</view>
-
-		<view>
-			<view class="list" :key="index" v-for="(item, index) of goods" @click="handlerSkipGoodsDetail(item, index)">
-				<!-- <image class="img" :src="
+  <view class="detail">
+    <!-- 轮播图 -->
+    <view class="carousel-map">
+      <u-swiper
+        :list="swiperList"
+        previousMargin="0"
+        nextMargin="100"
+        circular
+        :autoplay="false"
+        bgColor="#ffffff"
+      />
+      <view class="carousel-item">
+        <view class="mark">
+          <view class="mark-item">{{ merchant.score }}分</view>
+          <u-rate
+            :count="count"
+            v-model="value"
+            active-color="#fff"
+            inactive-color="#fff"
+            :size="12"
+          />
+        </view>
+        <view class="good-item">近期有6266个购买者给了给好评</view>
+      </view>
+    </view>
+
+    <!-- 商家信息 -->
+    <view class="merchant-info">
+      <view class="info-title">
+        <view>{{ merchant.name }}</view>
+        <text class="info-mark">{{ merchant.sale / 10000 }}w+单</text>
+      </view>
+      <view class="info-tag">商家信息</view>
+      <view class="info-item">
+        <view class="info-text">
+          <view>营业时间：{{ merchant.opening }}</view>
+          <view>电话号码：{{ merchant.mobile }}</view>
+          <view>{{ merchant.address }}</view>
+          <view class="distance">{{ (merchant.distance / 1000).toFixed(2) }}km</view>
+        </view>
+        <view class="info-icon">
+          <view class="info-map">
+            <u-icon name="map" size="20"></u-icon>
+            <view style="font-size: 20rpx; margin-top: 5rpx">导航</view>
+          </view>
+          <view class="info-map" @click="handlerMakeCall">
+            <u-icon name="phone" size="20"></u-icon>
+            <view style="font-size: 20rpx; margin-top: 5rpx">电话</view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 商家分类 -->
+    <view class="categoryList">
+      <u-tabs :list="categoryList"></u-tabs>
+    </view>
+
+    <view>
+      <view
+        class="list"
+        :key="index"
+        v-for="(item, index) of goods"
+        @click="handlerSkipGoodsDetail(item, index)"
+      >
+        <!-- <image class="img" :src="
 		      error || !loaded
 		        ? 'https://cdn.uviewui.com/uview/album/10.jpg'
 		        : goods.logo
 		    " mode="scaleToFill" @click="$Router.push(`/pages/client/clientPackage/storeDetail?id=${item.id}`)"></image> -->
-				<image class="img" src="@/static/logo.png"></image>
-				<view class="listDetail">
-					<view class="item-text">{{ item.name }}</view>
-					<view class="item-flex">
-						<view class="star">
-							<u-rate :count="item.score" :size="14" />
-							<text class="line">|</text>
-							<text class="points">{{ item.score }}分</text>
-						</view>
-						<view>{{ item.score }}单</view>
-					</view>
-					<view class="list-item">
-						<view class="list-price">
-							<view class="item-l">
-								券后价 <span>￥{{ item.originalPrice.toFixed(2) }}</span>
-							</view>
-							<view class="item-r">
-								门市价 <span>￥{{ item.specialPrice.toFixed(2) }}</span>
-							</view>
-						</view>
-						<view class="btn-box">
-							<button class="btn btn1" @click.stop="handlerService(item, index)">预约</button>
-							<button class="btn btn2" @click.stop="handlerSkipBuy(item, index)">购买</button>
-						</view>
-					</view>
-				</view>
-			</view>
-
-			<u-empty v-if="goods.length == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
-			</u-empty>
-		</view>
-
-		<!-- 弹窗 -->
-		<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>
-					<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>
+        <image class="img" src="@/static/logo.png"></image>
+        <view class="listDetail">
+          <view class="item-text">{{ item.name }}</view>
+          <view class="item-flex">
+            <view class="star">
+              <u-rate :count="item.score" :size="14" />
+              <text class="line">|</text>
+              <text class="points">{{ item.score }}分</text>
+            </view>
+            <view>{{ item.score }}单</view>
+          </view>
+          <view class="list-item">
+            <view class="list-price">
+              <view class="item-l">
+                券后价 <span>￥{{ item.originalPrice.toFixed(2) }}</span>
+              </view>
+              <view class="item-r">
+                门市价 <span>￥{{ item.specialPrice.toFixed(2) }}</span>
+              </view>
+            </view>
+            <view class="btn-box">
+              <button class="btn btn1" @click.stop="handlerService(item, index)">预约</button>
+              <button class="btn btn2" @click.stop="handlerSkipBuy(item, index)">购买</button>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <u-empty
+        v-if="goods.length == 0"
+        mode="data"
+        icon="http://cdn.uviewui.com/uview/empty/data.png"
+      >
+      </u-empty>
+    </view>
+
+    <!-- 弹窗 -->
+    <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>
+          <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, addReservation } from '@/api/client/business.js';
-	import { getCurrentLocation,hotMerchant } from '@/api/client/home';
-	export default {
-		data() {
-			return {
-				merchant: {},
-				goods: [],
-				count: 5,
-				value: 3,
-				swiperList: [],
-				categoryList: [{
-						id: 1,
-						name: '全部'
-					},
-					{
-						id: 2,
-						name: '养车'
-					},
-					{
-						id: 2,
-						name: '维修'
-					},
-					{
-						id: 2,
-						name: '改装'
-					},
-					{
-						id: 2,
-						name: '补胎'
-					},
-					{
-						id: 2,
-						name: '其他'
-					},
-				],
-				queryParams: {
-					//请求参数
-					id: null, //商家ID
-					region: null, //地区编码
-					longitude: null, //经度
-					latitude: null, //纬度
-				},
-				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() {
-				uni.getLocation({
-					type: 'gcj02',
-					success: res => {
-						this.queryParams.longitude = res.longitude;
-						this.queryParams.latitude = res.latitude;
-						let point = {
-							latitude: res.latitude,
-							longitude: res.longitude,
-						};
-						getCurrentLocation(point).then(rc => {
-							this.queryParams.region = rc.data.id;
-							this.handlerInitList();
-						});
-					},
-					fail: rs => {
-						uni.showToast({
-							title: rs,
-							icon: 'none',
-						});
-					},
-				});
-			},
-			// 初始化列表
-			handlerInitList() {
-				getSellsDetail(this.queryParams.id, this.queryParams).then(res => {
-					this.merchant = res.data.merchant;
-					this.goods = res.data.goods;
-					this.swiperList = res.data.merchant.banners.map(h => h.url);
-				});
-				// 获取锚点
-				hotMerchant(this.queryParams.id).then()
-			},
-			// 点击拨打电话
-			handlerMakeCall() {
-				uni.makePhoneCall({
-					phoneNumber: this.merchant.mobile,
-				});
-			},
-
-			// 点击跳转到商品详情
-			handlerSkipGoodsDetail(item, index) {
-				uni.navigateTo({
-					url: `/pages/client/clientPackage/serviceDetail?id=${item.id}`,
-				});
-			},
-
-			// 预约
-			handlerService(item, index) {
-				this.addParams.merchantId = item.id;
-				this.reserve_show = true;
-			},
-
-			// 购买
-			handlerSkipBuy(item, index) {
-				this.$store.commit('order/GET_ORDER_LIST',item)
-				uni.navigateTo({
-					url: `/pages/client/clientPackage/uptickOrder?id=${item.id}`,
-				});
-			},
-
-			// 点击选择时间
-			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;
-				}
-			},
-		},
-	};
+import { getSellsDetail, addReservation } from '@/api/client/business.js';
+import { getCurrentLocation, hotMerchant } from '@/api/client/home';
+export default {
+  data() {
+    return {
+      merchant: {},
+      goods: [],
+      count: 5,
+      value: 3,
+      swiperList: [],
+      categoryList: [
+        {
+          id: 1,
+          name: '全部',
+        },
+        {
+          id: 2,
+          name: '养车',
+        },
+        {
+          id: 2,
+          name: '维修',
+        },
+        {
+          id: 2,
+          name: '改装',
+        },
+        {
+          id: 2,
+          name: '补胎',
+        },
+        {
+          id: 2,
+          name: '其他',
+        },
+      ],
+      queryParams: {
+        //请求参数
+        id: null, //商家ID
+        region: null, //地区编码
+        longitude: null, //经度
+        latitude: null, //纬度
+      },
+      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() {
+      uni.getLocation({
+        type: 'gcj02',
+        success: res => {
+          this.queryParams.longitude = res.longitude;
+          this.queryParams.latitude = res.latitude;
+          let point = {
+            latitude: res.latitude,
+            longitude: res.longitude,
+          };
+          getCurrentLocation(point).then(rc => {
+            this.queryParams.region = rc.data.id;
+            this.handlerInitList();
+          });
+        },
+        fail: rs => {
+          uni.showToast({
+            title: rs,
+            icon: 'none',
+          });
+        },
+      });
+    },
+    // 初始化列表
+    handlerInitList() {
+      getSellsDetail(this.queryParams.id, this.queryParams).then(res => {
+        this.merchant = res.data.merchant;
+        this.goods = res.data.goods;
+        this.swiperList = res.data.merchant.banners.map(h => h.url);
+      });
+      // 获取锚点
+      hotMerchant(this.queryParams.id).then();
+    },
+    // 点击拨打电话
+    handlerMakeCall() {
+      uni.makePhoneCall({
+        phoneNumber: this.merchant.mobile,
+      });
+    },
+
+    // 点击跳转到商品详情
+    handlerSkipGoodsDetail(item, index) {
+      uni.navigateTo({
+        url: `/pages/client/clientPackage/serviceDetail/index?id=${item.id}`,
+      });
+    },
+
+    // 预约
+    handlerService(item, index) {
+      this.addParams.merchantId = item.id;
+      this.reserve_show = true;
+    },
+
+    // 购买
+    handlerSkipBuy(item, index) {
+      this.$store.commit('order/GET_ORDER_LIST', item);
+      uni.navigateTo({
+        url: `/pages/client/clientPackage/uptickOrder?id=${item.id}`,
+      });
+    },
+
+    // 点击选择时间
+    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>
 
 <style lang="scss" scoped>
-	.detail {
-		min-height: 100vh;
-		background-color: #efefef;
-	}
-
-	// 轮播图
-	.carousel-map {
-		background-color: #fff;
-		padding: 0 20rpx;
-
-		.carousel-item {
-			height: 90rpx;
-			display: flex;
-			background-color: #fff7e0;
-			border-radius: 0 0 10rpx 10rpx;
-
-			.mark {
-				background-color: #ff4b04;
-				color: #fff;
-				padding: 20rpx;
-				border-radius: 0 0 0 10rpx;
-				box-sizing: border-box;
-
-				.mark-item {
-					text-align: center;
-				}
-			}
-
-			.good-item {
-				font-size: 24rpx;
-				color: #a39c85;
-				line-height: 90rpx;
-				margin-left: 40rpx;
-			}
-		}
-	}
-
-	// 商家信息
-	.merchant-info {
-		padding: 20rpx;
-		background-color: #fff;
-		margin-bottom: 20rpx;
-
-		.info-title {
-			display: flex;
-			justify-content: center;
-			font-size: 36rpx;
-			font-weight: bold;
-			margin: 20rpx 0;
-
-			.info-mark {
-				font-size: 12px;
-				font-weight: normal;
-				color: #999;
-				margin: 20rpx 0 20rpx 30rpx;
-			}
-		}
-
-		.info-tag {
-			width: 140rpx;
-			padding: 10rpx;
-			text-align: center;
-			border: 1px solid #5992bb;
-			color: #5992bb;
-			margin-bottom: 10rpx;
-		}
-
-		.info-item {
-			display: flex;
-			justify-content: space-between;
-
-			.info-text {
-				font-size: 28rpx;
-				line-height: 58rpx;
-				color: #212020;
-				margin-left: 20rpx;
-
-				.distance {
-					font-size: 26rpx;
-					color: #555252;
-					font-weight: normal;
-				}
-			}
-
-			.info-icon {
-				display: flex;
-				align-items: center;
-			}
-
-			.info-map {
-				padding: 10rpx;
-				font-size: 28rpx;
-				margin-top: 120rpx;
-			}
-		}
-	}
-
-	.list {
-		height: 220rpx;
-		background-color: #fff;
-		padding: 20rpx;
-		margin-bottom: 20rpx;
-		display: flex;
-
-		.img {
-			width: 140px;
-			height: 100%;
-			display: block;
-			margin-right: 10rpx;
-		}
-
-		.listDetail {
-			width: calc(100% - 160rpx);
-		}
-
-		.item-text {
-			font-weight: bold;
-			margin: 10rpx 0 10rpx;
-			color: #333;
-		}
-
-		.item-flex {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			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 {
-			margin-top: 40rpx;
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-
-			.list-price {
-				.item-l {
-					color: #e35240;
-					font-weight: bold;
-					font-size: 32rpx;
-
-					span {
-						font-size: 40rpx;
-					}
-				}
-
-				.item-r {
-					color: #a8a8a8;
-					margin-top: 10rpx;
-
-					span {
-						text-decoration: line-through;
-					}
-				}
-			}
-
-			.btn-box {
-				display: flex;
-				margin-left: 30rpx;
-
-				.btn {
-					font-size: 28rpx;
-					height: 70rpx;
-				}
-
-				.btn1 {
-					border-radius: 40rpx 0 0 40rpx;
-					border: 2rpx solid #ec5729;
-					color: #ec5729;
-					background-color: #fff;
-				}
-
-				.btn2 {
-					color: #fff;
-					background-color: #ec5729;
-					border-radius: 0 40rpx 40rpx 0;
-				}
-			}
-		}
-	}
-
-	.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;
-	}
-
-	/* 分类 */
-
-	.categoryList {
-		background-color: #fff;
-	}
+.detail {
+  min-height: 100vh;
+  background-color: #efefef;
+}
+
+// 轮播图
+.carousel-map {
+  background-color: #fff;
+  padding: 0 20rpx;
+
+  .carousel-item {
+    height: 90rpx;
+    display: flex;
+    background-color: #fff7e0;
+    border-radius: 0 0 10rpx 10rpx;
+
+    .mark {
+      background-color: #ff4b04;
+      color: #fff;
+      padding: 20rpx;
+      border-radius: 0 0 0 10rpx;
+      box-sizing: border-box;
+
+      .mark-item {
+        text-align: center;
+      }
+    }
+
+    .good-item {
+      font-size: 24rpx;
+      color: #a39c85;
+      line-height: 90rpx;
+      margin-left: 40rpx;
+    }
+  }
+}
+
+// 商家信息
+.merchant-info {
+  padding: 20rpx;
+  background-color: #fff;
+  margin-bottom: 20rpx;
+
+  .info-title {
+    display: flex;
+    justify-content: center;
+    font-size: 36rpx;
+    font-weight: bold;
+    margin: 20rpx 0;
+
+    .info-mark {
+      font-size: 12px;
+      font-weight: normal;
+      color: #999;
+      margin: 20rpx 0 20rpx 30rpx;
+    }
+  }
+
+  .info-tag {
+    width: 140rpx;
+    padding: 10rpx;
+    text-align: center;
+    border: 1px solid #5992bb;
+    color: #5992bb;
+    margin-bottom: 10rpx;
+  }
+
+  .info-item {
+    display: flex;
+    justify-content: space-between;
+
+    .info-text {
+      font-size: 28rpx;
+      line-height: 58rpx;
+      color: #212020;
+      margin-left: 20rpx;
+
+      .distance {
+        font-size: 26rpx;
+        color: #555252;
+        font-weight: normal;
+      }
+    }
+
+    .info-icon {
+      display: flex;
+      align-items: center;
+    }
+
+    .info-map {
+      padding: 10rpx;
+      font-size: 28rpx;
+      margin-top: 120rpx;
+    }
+  }
+}
+
+.list {
+  height: 220rpx;
+  background-color: #fff;
+  padding: 20rpx;
+  margin-bottom: 20rpx;
+  display: flex;
+
+  .img {
+    width: 140px;
+    height: 100%;
+    display: block;
+    margin-right: 10rpx;
+  }
+
+  .listDetail {
+    width: calc(100% - 160rpx);
+  }
+
+  .item-text {
+    font-weight: bold;
+    margin: 10rpx 0 10rpx;
+    color: #333;
+  }
+
+  .item-flex {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    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 {
+    margin-top: 40rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .list-price {
+      .item-l {
+        color: #e35240;
+        font-weight: bold;
+        font-size: 32rpx;
+
+        span {
+          font-size: 40rpx;
+        }
+      }
+
+      .item-r {
+        color: #a8a8a8;
+        margin-top: 10rpx;
+
+        span {
+          text-decoration: line-through;
+        }
+      }
+    }
+
+    .btn-box {
+      display: flex;
+      margin-left: 30rpx;
+
+      .btn {
+        font-size: 28rpx;
+        height: 70rpx;
+      }
+
+      .btn1 {
+        border-radius: 40rpx 0 0 40rpx;
+        border: 2rpx solid #ec5729;
+        color: #ec5729;
+        background-color: #fff;
+      }
+
+      .btn2 {
+        color: #fff;
+        background-color: #ec5729;
+        border-radius: 0 40rpx 40rpx 0;
+      }
+    }
+  }
+}
+
+.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;
+}
+
+/* 分类 */
+
+.categoryList {
+  background-color: #fff;
+}
 </style>

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

@@ -71,7 +71,7 @@ export default {
     // 点击跳转到商品详情
     handlerSkipGoodsDetail(item, index) {
       uni.navigateTo({
-        url: `/pages/client/clientPackage/serviceDetail?id=${item.merchantId}`,
+        url: `/pages/client/clientPackage/serviceDetail/index?id=${item.merchantId}`,
       });
     },
   },

src/pages/client/tabBar/home/index.vue

@@ -101,7 +101,7 @@
 </template>
 
 <script>
-import { getCurrentLocation, getHomePageApi, getSwiperListApi } from '@/api/client/home';
+import { getCurrentLocation, getHomePageApi, getSwwiperListApi } from '@/api/client/home';
 import { mapGetters } from 'vuex';
 import RecommendItem from '@/components/merchant/RecommendItem.vue';
 import HotItem from '@/components/merchant/HotItem.vue';
@@ -209,9 +209,9 @@ export default {
   methods: {
     /* 轮播图 */
     getSwiperList() {
-      // getSwiperListApi().then(res => {
-      //   console.log(res);
-      // });
+      getSwiperListApi().then(res => {
+        console.log(res);
+      });
     },
 
     // 获取首页数据