商家服务详情页修改

src/api/home.js

@@ -1,12 +1,12 @@
 import { request } from '@/utils/request';
 
 /**
- * 获取首页
+ * 获取当前位置
  * @returns
  */
-export function getHomePage(data) {
+export function getCurrentLocation(data) {
   return request({
-    url: '/maintain/customer/index',
+    url: '/maintain/location',
     method: 'get',
     data: data,
     header: {
@@ -14,14 +14,14 @@ export function getHomePage(data) {
     },
   });
 }
-
+
 /**
- * 获取当前位置
+ * 获取首页
  * @returns
  */
-export function getCurrentLocation(data) {
+export function getHomePageApi(data) {
   return request({
-    url: '/maintain/location',
+    url: '/maintain/customer/index',
     method: 'get',
     data: data,
     header: {
@@ -30,3 +30,16 @@ export function getCurrentLocation(data) {
   });
 }
 
+/**
+ *@description 获取首页分类的数据
+ */
+
+export function getCategoriesApi() {
+  return request({
+    url: '/maintain/categories',
+    methods: get,
+    header: {
+      'content-type': 'application/x-www-form-urlencoded',
+    },
+  });
+}

src/api/tabbar/home.js

@@ -1,30 +0,0 @@
-import { request } from '@/utils/request';
-
-/**
- * 获取首页
- * @returns
- */
-export function getHomePageApi(data) {
-  return request({
-    url: '/maintain/customer/index',
-    method: 'get',
-    data: data,
-    header: {
-      'content-type': 'application/x-www-form-urlencoded',
-    },
-  });
-}
-
-/**
- *@description 获取首页分类的数据
- */
-
-export function getCategoriesApi() {
-  return request({
-    url: '/maintain/categories',
-    methods: get,
-    header: {
-      'content-type': 'application/x-www-form-urlencoded',
-    },
-  });
-}

src/components/service/index.vue

@@ -50,14 +50,12 @@
           <text class="popupItem">预约服务</text>
           <view class="server">
             <view class="popup-title">时间</view>
-            <!-- <view @click="showDate = true">请选择时间</view> -->
-            <u--input placeholder="请选择时间" border="bottom" clearable />
             <!-- 点击时间的弹框 -->
-            <!-- <u-datetime-picker :showDate="showDate" v-model="value1" mode="datetime" /> -->
+			<u-picker mode="time" v-model="show"></u-picker>
             <view class="popup-title">联系方式</view>
-            <u--input placeholder="请输入联系方式" border="bottom" clearable />
+            <u-input placeholder="请输入联系方式" border="bottom" clearable />
           </view>
-          <u-button type="primary" shape="circle" size="small" text="确定" />
+          <u-button type="primary" shape="circle" size="small" text="确定"/>
         </view>
       </u-popup>
     </view>
@@ -148,6 +146,17 @@
         }
         .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;
         }
       }
 
@@ -229,4 +238,5 @@
       margin: 20rpx 0 20rpx 30rpx;
     }
   }
+}
 </style>

src/pages/business/detail.vue

@@ -1,171 +1,170 @@
-<template>
-  <view class="detail">
-    <!-- 轮播图 -->
-    <view class="carousel-map">
-      <u-swiper :list="list3" 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="25"></u-icon>
-            <view>导航</view>
-          </view>
-          <view class="info-map">
-            <u-icon name="phone" size="25"></u-icon>
-            <view>电话</view>
-          </view>
-        </view>
-      </view>
-    </view>
-
-    <service ></service>
-  </view>
-</template>
-
-<script>
-import service from '@/components/service'
-import { getSellerDetails } from '@/api/business.js'
-
-export default {
-  onLoad(option) {
-	getSellerDetails(option.id).then(res => {
-		this.merchant = res.data.merchant
-		this.goods = res.data.goods,
-		this.list3 = res.data.merchant.banners.map(h => h.url)
-	})
-  },
-  components: {
-    service,
-  },
-  data() {
-    return {
-	  merchant:{},
-	  goods:[],
-      count: 5,
-      value: 3,
-      list3: [],
-    };
-  },
-  
-  methods: {
-  },
-};
-</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: 40rpx;
-    font-weight: bold;
-
-    .info-mark {
-      font-size: 12px;
-      font-weight: normal;
-      color: #999;
-      margin: 20rpx 0 20rpx 30rpx;
-    }
-  }
-
-  .info-tag {
-    width: 160rpx;
-    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: 30rpx;
-      line-height: 58rpx;
-      color: #212020;
-      font-weight: 600;
-
-      .distance {
-        font-size: 26rpx;
-        color: #555252;
-        font-weight: normal;
-      }
-    }
-
-    .info-icon {
-      display: flex;
-    }
-
-    .info-map {
-      padding: 10rpx;
-      font-size: 28rpx;
-      margin-top: 120rpx;
-    }
-  }
-}
-</style>
+<template>
+	<view class="detail">
+		<!-- 轮播图 -->
+		<view class="carousel-map">
+			<u-swiper :list="list3" 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="25"></u-icon>
+						<view>导航</view>
+					</view>
+					<view class="info-map">
+						<u-icon name="phone" size="25"></u-icon>
+						<view>电话</view>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<service></service>
+	</view>
+</template>
+
+<script>
+	import service from '@/components/service'
+	import {
+		getSellerDetails
+	} from '@/api/business.js'
+
+	export default {
+		onLoad(option) {
+			getSellerDetails(option.id).then(res => {
+				this.merchant = res.data.merchant
+				this.goods = res.data.goods,
+				this.list3 = res.data.merchant.banners.map(h => h.url)
+			})
+		},
+		components: {
+			service,
+		},
+		data() {
+			return {
+				merchant: {},
+				goods: [],
+				count: 5,
+				value: 3,
+				list3: [],
+			};
+		},
+	};
+</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: 40rpx;
+			font-weight: bold;
+
+			.info-mark {
+				font-size: 12px;
+				font-weight: normal;
+				color: #999;
+				margin: 20rpx 0 20rpx 30rpx;
+			}
+		}
+
+		.info-tag {
+			width: 160rpx;
+			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: 30rpx;
+				line-height: 58rpx;
+				color: #212020;
+				font-weight: 600;
+
+				.distance {
+					font-size: 26rpx;
+					color: #555252;
+					font-weight: normal;
+				}
+			}
+
+			.info-icon {
+				display: flex;
+			}
+
+			.info-map {
+				padding: 10rpx;
+				font-size: 28rpx;
+				margin-top: 120rpx;
+			}
+		}
+	}
+</style>

src/pages/business/list.vue

@@ -48,7 +48,7 @@
 						<view @tap="sellerListFillter(1)">离我最近</view>
 						<view @tap="sellerListFillter(2)">好评优先</view>
 						<view @tap="sellerListFillter(3)">销量优先</view>
-					</view>s
+					</view>
 				</view>
 			</view>
 		</view>

src/pages/business/service/detail.vue

@@ -1,324 +1,422 @@
-<template>
-  <view class="service">
-    <view class="service-top">
-      <view class="item-flex">
-        <view class="title"
-          >【养车】标题标题标标题标题标题标题标题标题标题标题……</view
-        >
-        <u-icon name="share-square" size="24" />
-      </view>
-      <Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
-    </view>
-    <view class="service-center">
-      <view class="price">
-        <view>
-          <view class="price-item">
-            <text class="price-text">￥</text>199
-          </view>
-          <view>门市价 ￥489</view>
-        </view>
-        <view>
-          <view class="favorable">优惠推荐</view>
-          <view>还剩 49 天 02 时</view>
-        </view>
-      </view>
-      <!-- 优惠券 -->
-      <view class="coupon">
-        <view class="coupon-flex">
-          <view class="coupon-item"> <text class="text">￥</text>5 </view>
-          <view class="keep">
-            <view>养车/用车品类新用户专享</view>
-            <view>养车用车服务通用</view>
-          </view>
-        </view>
-        <view>
-          <view>有效期仅剩</view>
-          <view>23：59：53</view>
-        </view>
-      </view>
-      <view class="coupon">
-        <view class="coupon-flex">
-          <view class="coupon-item"> <text class="text">￥</text>5 </view>
-          <view class="keep">
-            <view>养车/用车品类新用户专享</view>
-            <view>养车用车服务通用</view>
-          </view>
-        </view>
-        <view>
-          <view class="claimable">可领取</view>
-        </view>
-      </view>
-    </view>
-
-    <!-- 服务详情 -->
-    <view class="detail">
-      <text class="detail-text">服务详情</text>
-    </view>
-
-    <!-- 评价内容 -->
-    <view class="Evaluate-content">
-      <view class="album__avatar">
-        <view class="album-img">
-          <image
-            src="https://cdn.uviewui.com/uview/album/1.jpg"
-            mode=""
-            style="width: 40px; height: 40px"
-          />
-          <view>
-            <view class="album-text">王***青</view>
-            <u-rate :value="3.7" readonly :size="14" />
-          </view>
-        </view>
-        <view>2023.06.18</view>
-      </view>
-      <view class="album__content">
-        <u--text
-          margin="0 0 8px 0"
-          text="全面的组件和便捷的工具会让您信手拈来面的组件和便捷的工具会让您信手拈来面的组件和便捷的工具会让您信手拈来，如鱼得水"
-        />
-        <u-album :urls="urls2"></u-album>
-      </view>
-      <view class="album__avatar">
-        <view class="album-img">
-          <image
-            src="https://cdn.uviewui.com/uview/album/1.jpg"
-            mode=""
-            style="width: 40px; height: 40px"
-          />
-          <view>
-            <view class="album-text">王***青</view>
-            <u-rate :value="3.7" readonly :size="14" />
-          </view>
-        </view>
-        <view>2023.06.18</view>
-      </view>
-      <view class="album__content">
-        <u--text
-          margin="0 0 8px 0"
-          text="全面的组件和便捷的工具会让您信手拈来面的组件和便捷的工具会让您信手拈来面的组件和便捷的工具会让您信手拈来，如鱼得水"
-        />
-        <u-album :urls="urls2"></u-album>
-      </view>
-      <view class="album__avatar">
-        <view class="album-img">
-          <image
-            src="https://cdn.uviewui.com/uview/album/1.jpg"
-            mode=""
-            style="width: 40px; height: 40px"
-          />
-          <view>
-            <view class="album-text">王***青</view>
-            <u-rate :value="3.7" readonly :size="14" />
-          </view>
-        </view>
-        <view>2023.06.18</view>
-      </view>
-      <view class="album__content">
-        <u--text
-          margin="0 0 8px 0"
-          text="全面的组件和便捷的工具会让您信手拈来面的组件和便捷的工具会让您信手拈来面的组件和便捷的工具会让您信手拈来，如鱼得水"
-        />
-        <u-album :urls="urls2"></u-album>
-      </view>
-    </view>
-
-    <!-- 底部 -->
-    <view class="service-footer">
-      <view class="service-item">
-        <view class="service-text">
-          <u-icon name="file-text" size="24" />
-          <text>店铺</text>
-        </view>
-        <view class="service-text">
-          <u-icon name="chat" size="24" class="chat" />
-          <text>立即咨询</text>
-        </view>
-        <view class="service-text">
-          <u-icon name="heart-fill" size="24" />
-          <text>收藏</text>
-        </view>
-      </view>
-      <view class="buyNow">立即购买</view>
-    </view>
-  </view>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      albumWidth: 0,
-      urls2: [
-        'https://cdn.uviewui.com/uview/album/1.jpg',
-        'https://cdn.uviewui.com/uview/album/2.jpg',
-        'https://cdn.uviewui.com/uview/album/3.jpg',
-        'https://cdn.uviewui.com/uview/album/4.jpg',
-        'https://cdn.uviewui.com/uview/album/5.jpg',
-        'https://cdn.uviewui.com/uview/album/6.jpg',
-        'https://cdn.uviewui.com/uview/album/7.jpg',
-        'https://cdn.uviewui.com/uview/album/8.jpg',
-        'https://cdn.uviewui.com/uview/album/9.jpg',
-        'https://cdn.uviewui.com/uview/album/10.jpg',
-      ],
-    };
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.service {
-  min-height: 100vh;
-}
-
-.service-top {
-  margin: 20rpx;
-
-  .item-flex {
-    display: flex;
-
-    .title {
-      font-size: 18px;
-      font-weight: bold;
-      margin: 20rpx;
-    }
-  }
-
-  Image {
-    width: 100%;
-    height: 200px;
-  }
-}
-
-.service-center {
-  margin: 20rpx;
-
-  .price {
-    height: 120rpx;
-    padding: 15rpx 30rpx;
-    display: flex;
-    margin: 20rpx 0;
-    color: #fff;
-    font-size: 24rpx;
-    font-weight: normal;
-    box-sizing: border-box;
-    border-radius: 20rpx 20rpx 0 0;
-    background-color: #6c9fc3;
-    justify-content: space-between;
-
-    .price-item {
-      font-size: 44rpx;
-      margin-bottom: 6rpx;
-
-      .price-text {
-        font-size: 24rpx;
-      }
-    }
-
-    .favorable {
-      font-size: 22px;
-      margin-bottom: 6rpx;
-    }
-  }
-}
-
-// 优惠券
-.coupon {
-  height: 140rpx;
-  display: flex;
-  font-size: 32rpx;
-  color: #f2110d;
-  line-height: 1.5;
-  border-radius: 10rpx;
-  margin: 30rpx 0 20rpx 0;
-  padding: 20rpx 10rpx;
-  box-sizing: border-box;
-  background-color: #faeaea;
-  border: 2rpx solid #eb8b8b;
-  justify-content: space-between;
-
-  .coupon-flex {
-    display: flex;
-    .coupon-item {
-      font-size: 36px;
-      margin-right: 20rpx;
-      .text {
-        font-size: 36rpx;
-      }
-    }
-  }
-  .claimable {
-    width: 160rpx;
-    height: 70rpx;
-    color: #fff;
-    text-align: center;
-    line-height: 70rpx;
-    margin-top: 15rpx;
-    border-radius: 70rpx;
-    background-color: #eda180;
-  }
-}
-// 服务详情
-.detail {
-  margin: 20rpx;
-  .detail-text {
-    font-size: 16px;
-    font-weight: bold;
-  }
-}
-
-// 评价内容
-.Evaluate-content {
-  margin: 20rpx;
-  .album__avatar {
-    margin: 40rpx 0;
-    display: flex;
-    font-size: 28rpx;
-    color: rgb(127, 129, 130);
-    margin-bottom: 20rpx;
-    justify-content: space-between;
-    .album-img {
-      display: flex;
-      .album-text {
-        color: #333;
-        margin-bottom: 12rpx;
-      }
-    }
-  }
-}
-// 底部
-.service-footer {
-  height: 60px;
-  padding: 10rpx;
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  display: flex;
-  justify-content: space-between;
-  background-color: #fff;
-  border-top: 1px solid #eb8b8b;
-  box-sizing: border-box;
-  .service-item {
-    display: flex;
-    margin-top: 10rpx;
-    margin-left: 20rpx;
-    font-size: 14px;
-    .service-text {
-      margin-right: 30rpx;
-      .chat {
-        margin-left: 70rpx;
-      }
-    }
-  }
-  .buyNow {
-    width: 200px;
-    height: 40px;
-    text-align: center;
-    line-height: 40px;
-    border-radius: 40px;
-    margin-top: 12rpx;
-    margin-right: 16rpx;
-    background-color: #f0d318;
-  }
-}
-</style>
+<template>
+	<view class="service">
+		<view class="service-top">
+			<view class="item-flex">
+				<view class="title">【养车】标题标题标标题标题标题标题标题标题标题标题……</view>
+				<u-icon name="share-square" size="24" />
+			</view>
+			<Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
+		</view>
+		<view class="service-center">
+			<view class="price">
+				<view>
+					<view class="price-item">
+						<text class="price-text">￥</text>199
+					</view>
+					<view class="bottom-text">门市价 ￥489</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 couponList" :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">养车/用车品类新用户专享</view>
+					<view class="coupon-middle-type over-hide">养车用车服务通用</view>
+				</view>
+				<view class="coupon-right flex">
+					<view v-if="false" class="coupon-right-time flex">
+						<view class="tip">有效期仅剩</view>
+						<view class="time">{{resetTime}}</view>
+					</view>
+					<view v-else class="coupon-right-get">可领取</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 服务详情 -->
+		<view class="detail">
+			<view class="detail-text">服务详情</view>
+			<view class="detail-des">
+				为您提供汽车基本保养服务，包括机油更换、滤芯 更换、轮胎气压检查等.
+			</view>
+		</view>
+
+		<!-- 评价内容 -->
+		<view class="Evaluate-content">
+			<view v-for="(item,index) in userCommentList" :key="index">
+				<view class="commnet-user flex">
+					<image :src="item.user.pic" style="width: 40px; height: 40px; border-radius: 50%" />
+					<view class="commnet-user-middle flex">
+						<view class="name flex">{{item.user.userName}}</view>
+						<u-rate class="rate" :value="item.user.rate" readonly :size="12" gutter="1"
+							active-color="#ffa500" />
+					</view>
+					<view class="time">{{item.user.time}}</view>
+				</view>
+				<view class="commnet-text">{{item.comment}}</view>
+				<view class="commnet-img">
+					<image class="img" v-for="(img,index) in item.imgList" :key="index" :src="img" mode="widthFix" />
+				</view>
+			</view>
+		</view>
+
+		<!-- 底部 -->
+		<view class="service-footer">
+			<view class="user-operate" v-for="(item,index) in userOperate" :key="index" @tap="collect(index)">
+				<u-icon class="user-operate-icon" :name="hascollect?item.fill?item.fill:item.icon:item.icon"
+					size="24" />
+				<text class="user-operate-text">{{item.name}}</text>
+			</view>
+			<view class="buyNow">立即购买</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				albumWidth: 0,
+				urls2: [
+					'https://cdn.uviewui.com/uview/album/1.jpg',
+					'https://cdn.uviewui.com/uview/album/2.jpg',
+					'https://cdn.uviewui.com/uview/album/3.jpg',
+					'https://cdn.uviewui.com/uview/album/4.jpg',
+					'https://cdn.uviewui.com/uview/album/5.jpg',
+					'https://cdn.uviewui.com/uview/album/6.jpg',
+					'https://cdn.uviewui.com/uview/album/7.jpg',
+					'https://cdn.uviewui.com/uview/album/8.jpg',
+					'https://cdn.uviewui.com/uview/album/9.jpg',
+					'https://cdn.uviewui.com/uview/album/10.jpg',
+				],
+				couponList: [{}, {}],
+				resetTime: '23:59:59',
+				userOperate: [{
+						name: '店铺',
+						icon: "file-text"
+					},
+					{
+						name: '立即咨询',
+						icon: 'chat'
+					},
+					{
+						name: '收藏',
+						icon: 'heart',
+						fill: 'heart-fill'
+					}
+				],
+				hascollect: false, // 当前店铺是否被收藏
+				userCommentList: [{
+						user: {
+							userName: '李****阳',
+							pic: 'https://cdn.uviewui.com/uview/album/1.jpg',
+							rate: 3.8,
+							time: '2023.06.18'
+						},
+						comment: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容',
+						imgList: [
+							'https://cdn.uviewui.com/uview/album/1.jpg',
+							'https://cdn.uviewui.com/uview/album/1.jpg',
+							'https://cdn.uviewui.com/uview/album/1.jpg',
+							'https://cdn.uviewui.com/uview/album/1.jpg',
+						],
+					},
+					{
+						user: {
+							userName: '李****阳',
+							pic: 'https://cdn.uviewui.com/uview/album/1.jpg',
+							rate: 3.8,
+							time: '2023.06.18'
+						},
+						comment: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容',
+						imgList: [
+							'https://cdn.uviewui.com/uview/album/1.jpg',
+							'https://cdn.uviewui.com/uview/album/1.jpg',
+							'https://cdn.uviewui.com/uview/album/1.jpg',
+						],
+					},
+					{
+						user: {
+							userName: '李****阳',
+							pic: 'https://cdn.uviewui.com/uview/album/1.jpg',
+							rate: 3.8,
+							time: '2023.06.18'
+						},
+						comment: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容',
+						imgList: [
+							'https://cdn.uviewui.com/uview/album/1.jpg',
+							'https://cdn.uviewui.com/uview/album/1.jpg',
+							'https://cdn.uviewui.com/uview/album/1.jpg',
+						],
+					},
+				]
+			};
+		},
+		methods: {
+			collect(index) {
+				if (index === 2) {
+					this.hascollect = !this.hascollect
+				}
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.service {
+		min-height: 100vh;
+	}
+
+	.service-top {
+		margin: 20rpx;
+
+		.item-flex {
+			display: flex;
+
+			.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: 1.5;
+				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 {
+			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/login/index.vue

@@ -59,7 +59,7 @@ export default {
 
   methods: {
     //点击微信用户一键登录
-    async login() {
+    async login() {
       this.loading = true;
       this.form.token = await getWxLoginCode();
       this.$store
@@ -79,7 +79,7 @@ export default {
         .catch(() => {
           this.loading = false;
           uni.$u.toast('登录失败');
-        });
+        });
     },
 
     //点击用户协议

src/pages/tabbar/home/index.vue

@@ -1,356 +1,326 @@
-<template>
-  <view class="home">
-    <!-- 顶部导航 -->
-    <view class="nav-bar" v-if="opacity == 1">
-      <u-navbar :bgColor="'#ffffff'">
-        <view slot="left">
-          <text>地址</text>
-          <text class="iconfont icon-chevron-down"></text>
-        </view>
-        <view slot="center">
-          <u-search
-            placeholder="请输入搜索内容"
-            :showAction="false"
-            v-model="keyword"
-            @focus="$Router.push('/pages/common/search/index')"
-          />
-        </view>
-      </u-navbar>
-    </view>
-
-    <view
-      class="home-header"
-      :style="{ paddingTop: totalHeight + 'px', opacity: 1 - opacity }"
-    >
-      <view class="goto-address" @click="manualGetLocation">
-        <text>地址</text>
-        <text class="iconfont icon-chevron-down"></text>
-      </view>
-      <view
-        class="search-item"
-        @click="$Router.push('/pages/client/search/index')"
-      >
-        <u-search
-          placeholder="请输入搜索内容"
-          :showAction="false"
-          v-model="keyword"
-        />
-      </view>
-    </view>
-
-    <!-- 轮播图 -->
-    <view class="home-swiper">
-      <u-swiper :list="swiperList" indicator @change="change" @click="click" />
-    </view>
-
-    <!-- 商品分类 -->
-    <view class="home-list">
-      <u-grid :border="false" col="5">
-        <u-grid-item
-          v-for="item in categories"
-          :key="item.id"
-          @tap="handleMenuClick(item)"
-        >
-          <u-icon
-            :customStyle="{ paddingTop: 20 + 'rpx' }"
-            :name="item.icon"
-            :size="25"
-          ></u-icon>
-          <text class="grid-text">{{ item.name }}</text>
-        </u-grid-item>
-      </u-grid>
-      <u-toast ref="uToast" />
-    </view>
-
-    <!-- 热门推荐 -->
-    <view class="hot">
-      <u-cell
-        :border="false"
-        value="查看更多"
-        isLink
-        @click="$Router.push('/pages/business/hot/index')"
-      >
-        <view slot="title" class="hot-title"> 热门推荐 </view>
-      </u-cell>
-      <block v-if="homeData.recommends && homeData.recommends.length > 0">
-        <view>
-          <u-grid :border="false" col="2">
-            <u-grid-item
-              @click="$Router.push(`/pages/business/detail?id=${item.id}`)"
-              v-for="item in homeData.recommends"
-              :key="item.id"
-            >
-              <recommend-item :item="item"></recommend-item>
-            </u-grid-item>
-          </u-grid>
-        </view>
-      </block>
-      <block v-else>
-        <u-empty
-          icon="/static/default-graph/no-business.png"
-          text="暂无推荐商家"
-        ></u-empty>
-      </block>
-    </view>
-
-    <!-- 附近商家 -->
-    <view class="near">
-      <u-cell
-        :border="false"
-        value="查看更多"
-        isLink
-        @click="$Router.push('/pages/business/nearby/index')"
-      >
-        <view slot="title" class="near-title"> 附近商家 </view>
-      </u-cell>
-      <block v-if="homeData.nears && homeData.nears.length > 0">
-        <view>
-          <u-grid :border="false" col="2">
-            <u-grid-item
-              @click="$Router.push(`/pages/business/detail?id=${item.id}`)"
-              v-for="item in homeData.nears"
-              :key="item.id"
-            >
-              <hot-item :item="item"></hot-item>
-            </u-grid-item>
-          </u-grid>
-        </view>
-      </block>
-      <block v-else>
-        <u-empty
-          icon="/static/default-graph/no-business.png"
-          text="暂无附近商家"
-        ></u-empty>
-      </block>
-    </view>
-  </view>
-</template>
-
-<script>
-import { getHomePage, getCurrentLocation } from '@/api/home';
-import { mapGetters } from 'vuex';
-import RecommendItem from '@/components/merchant/RecommendItem.vue';
-import HotItem from '@/components/merchant/HotItem.vue';
-import { getHomePageApi, getCategoriesApi } from '@/api/tabbar/home';
-export default {
-  components: {
-    RecommendItem,
-    HotItem,
-  },
-  data() {
-    return {
-      list: [],
-      keyword: '',
-      swiperList: [
-        //轮播图
-        'https://cdn.uviewui.com/uview/swiper/swiper1.png',
-        'https://cdn.uviewui.com/uview/swiper/swiper2.png',
-        'https://cdn.uviewui.com/uview/swiper/swiper3.png',
-      ],
-      homeData: {
-        categories: [],
-        nears: [],
-        recommends: [],
-      },
-      scrollTop: 0,
-    };
-  },
-
-  computed: {
-    ...mapGetters(['location']),
-    totalHeight() {
-      return;
-      return uni.getSystemInfoSync().statusBarHeight +
-        uni.getMenuButtonBoundingClientRect().height
-        ? height
-        : '';
-    },
-
-    opacity() {
-      if (this.scrollTop < this.totalHeight) {
-        return (this.scrollTop / this.totalHeight).toFixed(2);
-      }
-      return 1;
-    },
-
-    categories() {
-      let initData = this.homeData.categories.map(item => {
-        if (!item.icon) {
-          item.icon = 'level';
-        }
-        return item;
-      });
-      let result =
-        initData.length > 14
-          ? initData.splice(0, 14).concat([
-              {
-                id: 'all',
-                icon: 'grid-fill',
-                name: '全部',
-                type: { code: 'ALL', description: '全部' },
-              },
-            ])
-          : initData.push({ id: 'all', icon: 'grid-fill', name: '全部' });
-      return result;
-    },
-  },
-
-  watch: {
-    location: {
-      handler: async function (newVal, oldVal) {
-        const result = await getCurrentLocation(newVal);
-        const param = Object.assign({}, { region: result.data.id }, newVal);
-        this.getHomeData(param);
-      },
-    },
-  },
-
-  //滚动页面触发
-  onPageScroll(e) {
-    this.scrollTop = e.scrollTop;
-  },
-
-  //页面加载
-  async onLoad() {
-    const result = await getHomePage();
-    setTimeout(() => {
-      this.list = new Array(10000).fill(1);
-    }, 5000);
-    uni.getLocation({
-      type: 'gcj02',
-      success: res => {
-        this.location.longitude = res.longitude;
-        this.location.latitude = res.latitude;
-        this.$store.commit('SET_LOCATION', {
-          longitude: res.longitude,
-          latitude: res.latitude,
-        });
-      },
-      fail: () => {
-        this.manualGetLocation();
-      },
-    });
-  },
-
-  methods: {
-    //轮播图切换
-    change() {},
-
-    //轮播图点击
-    click(name) {
-      this.$refs.uToast.success(`点击了第${name}个`);
-    },
-
-    // 获取首页数据
-    getHomeData(location) {
-      getHomePageApi(location)
-        .then(res => {
-          this.homeData = res.data;
-          // 将分类数据做缓存处理
-          this.$store.commit('SET_CATEGORIES', this.homeData.categories);
-        })
-        .catch(err => {
-          console.log(err);
-        });
-    },
-
-    // 手动选择城市
-    manualGetLocation() {
-      console.log(111);
-      uni.chooseLocation({
-        success: res => {
-          this.$store.commit('SET_LOCATION', {
-            longitude: res.longitude,
-            latitude: res.latitude,
-          });
-        },
-      });
-    },
-
-    // 点击菜单
-    handleMenuClick(item) {
-      if (item.id === 'all') {
-        this.$Router.push('/pages/business/category');
-      } else {
-        this.$Router.push('/pages/business/list');
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.home {
-  background-color: #f0efef;
-  .nav-bar {
-    ::v-deep .u-navbar__content {
-      background-color: #ffffff;
-    }
-  }
-}
-
-/* 头部搜索栏 */
-.home-header {
-  display: flex;
-  align-items: center;
-  height: 90rpx;
-  line-height: 90rpx;
-  padding: 0 20rpx;
-  background-color: #ffffff;
-
-  .goto-address {
-    display: flex;
-    align-items: center;
-
-    .icon-sanjiaoxing1 {
-      font-size: 24rpx;
-      margin: 17rpx 10rpx 0 6rpx;
-    }
-  }
-  .search-item {
-    flex: 1;
-  }
-}
-
-/* 轮播图 */
-.home-swiper {
-  padding: 20rpx;
-  margin-bottom: 10rpx;
-}
-
-/* 商品分类 */
-.home-list {
-  background-color: #ffffff;
-  height: 360rpx;
-  margin: 0 20rpx 20rpx 20rpx;
-  padding: 20rpx 0;
-  border-radius: 10rpx;
-
-  .grid-text {
-    font-size: 12px;
-    color: #909399;
-    padding: 10rpx 0 20rpx 0rpx;
-    box-sizing: border-box;
-  }
-}
-
-/* 热门推荐 */
-.hot {
-  ::v-deep .u-cell__body {
-    padding: 10rpx 20rpx;
-    .hot-title {
-      border-left: 4px solid $uni-color-primary;
-      padding-left: 20rpx;
-    }
-  }
-}
-.near {
-  ::v-deep .u-cell__body {
-    padding: 10rpx 20rpx;
-    .near-title {
-      border-left: 4px solid $uni-color-primary;
-      padding-left: 20rpx;
-    }
-  }
-}
-</style>
+<template>
+	<view class="home">
+		<!-- 顶部导航 -->
+		<view class="nav-bar" v-if="opacity == 1">
+			<u-navbar :bgColor="'#ffffff'">
+				<view slot="left">
+					<text>地址</text>
+					<text class="iconfont icon-chevron-down"></text>
+				</view>
+				<view slot="center">
+					<u-search placeholder="请输入搜索内容" :showAction="false" v-model="keyword"
+						@focus="$Router.push('/pages/common/search/index')" />
+				</view>
+			</u-navbar>
+		</view>
+
+		<view class="home-header" :style="{ paddingTop: totalHeight + 'px', opacity: 1 - opacity }">
+			<view class="goto-address" @click="manualGetLocation">
+				<text>地址</text>
+				<text class="iconfont icon-chevron-down"></text>
+			</view>
+			<view class="search-item" @click="$Router.push('/pages/client/search/index')">
+				<u-search placeholder="请输入搜索内容" :showAction="false" v-model="keyword" />
+			</view>
+		</view>
+
+		<!-- 轮播图 -->
+		<view class="home-swiper">
+			<u-swiper :list="swiperList" indicator @change="change" @click="click" />
+		</view>
+
+		<!-- 商品分类 -->
+		<view class="home-list">
+			<u-grid :border="false" col="5">
+				<u-grid-item v-for="(item,index) in categories" :key="item.id"  @tap="handleMenuClick(item)">
+					<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="item.icon" :size="25"></u-icon>
+					<text class="grid-text">{{ item.name }}</text>
+				</u-grid-item>
+
+			</u-grid>
+			<u-toast ref="uToast" />
+		</view>
+
+		<!-- 热门推荐 -->
+		<view class="hot">
+			<u-cell :border="false" value="查看更多" isLink @click="$Router.push('/pages/business/hot/index')">
+				<view slot="title" class="hot-title"> 热门推荐 </view>
+			</u-cell>
+			<block v-if="homeData.recommends && homeData.recommends.length > 0">
+				<view>
+					<u-grid :border="false" col="2">
+						<u-grid-item @click="$Router.push(`/pages/business/detail?id=${item.id}`)"
+							v-for="item in homeData.recommends" :key="item.id">
+							<recommend-item :item="item"></recommend-item>
+						</u-grid-item>
+					</u-grid>
+				</view>
+			</block>
+			<block v-else>
+				<u-empty icon="/static/default-graph/no-business.png" text="暂无推荐商家"></u-empty>
+			</block>
+		</view>
+
+		<!-- 附近商家 -->
+		<view class="near">
+			<u-cell :border="false" value="查看更多" isLink @click="$Router.push('/pages/business/nearby/index')">
+				<view slot="title" class="near-title"> 附近商家 </view>
+			</u-cell>
+			<block v-if="homeData.nears && homeData.nears.length > 0">
+				<view>
+					<u-grid :border="false" col="2">
+						<u-grid-item @click="$Router.push(`/pages/business/detail?id=${item.id}`)"
+							v-for="item in homeData.nears" :key="item.id">
+							<hot-item :item="item"></hot-item>
+						</u-grid-item>
+					</u-grid>
+				</view>
+			</block>
+			<block v-else>
+				<u-empty icon="/static/default-graph/no-business.png" text="暂无附近商家"></u-empty>
+			</block>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		getCurrentLocation,
+		getHomePageApi,
+		getCategoriesApi
+	} from '@/api/home';
+	import {
+		mapGetters
+	} from 'vuex';
+	import RecommendItem from '@/components/merchant/RecommendItem.vue';
+	import HotItem from '@/components/merchant/HotItem.vue';
+	export default {
+		components: {
+			RecommendItem,
+			HotItem,
+		},
+		data() {
+			return {
+				list: [],
+				keyword: '',
+				swiperList: [
+					//轮播图
+					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
+					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
+					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
+				],
+				homeData: {
+					categories: [],
+					nears: [],
+					recommends: [],
+				},
+				scrollTop: 0,
+			};
+		},
+
+		computed: {
+			...mapGetters(['location']),
+			totalHeight() {
+				return;
+				return uni.getSystemInfoSync().statusBarHeight +
+					uni.getMenuButtonBoundingClientRect().height ?
+					height :
+					'';
+			},
+			opacity() {
+				if (this.scrollTop < this.totalHeight) {
+					return (this.scrollTop / this.totalHeight).toFixed(2);
+				}
+				return 1;
+			},
+			categories() {
+				let initData = this.homeData.categories.map(item => {
+					if (!item.icon) {
+						item.icon = 'level';
+					}
+					return item;
+				});
+				let result =
+					initData.length > 14 ?
+					initData.splice(0, 14).concat([{
+						id: 'all',
+						icon: 'grid-fill',
+						name: '全部',
+						type: {
+							code: 'ALL',
+							description: '全部'
+						},
+					}, ]) :
+					initData.push({
+						id: 'all',
+						icon: 'grid-fill',
+						name: '全部'
+					});
+				return result;
+			},
+		},
+
+		watch: {
+			location: {
+				handler: async function(newVal, oldVal) {
+					const result = await getCurrentLocation(newVal);
+					const param = Object.assign({}, {
+						region: result.data.id
+					}, newVal);
+					this.getHomeData(param);
+				},
+			},
+		},
+
+		//滚动页面触发
+		onPageScroll(e) {
+			this.scrollTop = e.scrollTop;
+		},
+
+		//页面加载
+		async onLoad() {
+			setTimeout(() => {
+				this.list = new Array(10000).fill(1);
+			}, 5000);
+			uni.getLocation({
+				type: 'gcj02',
+				success: res => {
+					this.location.longitude = res.longitude;
+					this.location.latitude = res.latitude;
+					this.$store.commit('SET_LOCATION', {
+						longitude: res.longitude,
+						latitude: res.latitude,
+					});
+				},
+				fail: () => {
+					this.manualGetLocation();
+				},
+			});
+		},
+
+		methods: {
+			//轮播图切换
+			change() {},
+
+			//轮播图点击
+			click(name) {
+				this.$refs.uToast.success(`点击了第${name}个`);
+			},
+
+			// 获取首页数据
+			getHomeData(location) {
+				getHomePageApi(location)
+					.then(res => {
+						this.homeData = res.data;
+						// 将分类数据做缓存处理
+						this.$store.commit('SET_CATEGORIES', this.homeData.categories);
+					})
+					.catch(err => {
+						console.log(err);
+					});
+			},
+
+			// 手动选择城市
+			manualGetLocation() {
+				uni.chooseLocation({
+					success: res => {
+						this.$store.commit('SET_LOCATION', {
+							longitude: res.longitude,
+							latitude: res.latitude,
+						});
+					},
+				});
+			},
+
+			// 点击菜单
+			handleMenuClick(item) {
+				if (item.id === 'all') {
+					this.$Router.push('/pages/business/category');
+				} else {
+					this.$Router.push('/pages/business/list');
+				}
+			},
+		},
+	};
+</script>
+
+<style lang="scss" scoped>
+	.home {
+		background-color: #f0efef;
+
+		.nav-bar {
+			::v-deep .u-navbar__content {
+				background-color: #ffffff;
+			}
+		}
+	}
+
+	/* 头部搜索栏 */
+	.home-header {
+		display: flex;
+		align-items: center;
+		height: 90rpx;
+		line-height: 90rpx;
+		padding: 0 20rpx;
+		background-color: #ffffff;
+
+		.goto-address {
+			display: flex;
+			align-items: center;
+
+			.icon-sanjiaoxing1 {
+				font-size: 24rpx;
+				margin: 17rpx 10rpx 0 6rpx;
+			}
+		}
+
+		.search-item {
+			flex: 1;
+		}
+	}
+
+	/* 轮播图 */
+	.home-swiper {
+		padding: 20rpx;
+		margin-bottom: 10rpx;
+	}
+
+	/* 商品分类 */
+	.home-list {
+		background-color: #ffffff;
+		height: 360rpx;
+		margin: 0 20rpx 20rpx 20rpx;
+		padding: 20rpx 0;
+		border-radius: 10rpx;
+
+		.grid-text {
+			font-size: 12px;
+			color: #909399;
+			padding: 10rpx 0 20rpx 0rpx;
+			box-sizing: border-box;
+		}
+	}
+
+	/* 热门推荐 */
+	.hot {
+		::v-deep .u-cell__body {
+			padding: 10rpx 20rpx;
+
+			.hot-title {
+				border-left: 4px solid $uni-color-primary;
+				padding-left: 20rpx;
+			}
+		}
+	}
+
+	.near {
+		::v-deep .u-cell__body {
+			padding: 10rpx 20rpx;
+
+			.near-title {
+				border-left: 4px solid $uni-color-primary;
+				padding-left: 20rpx;
+			}
+		}
+	}
+</style>