style(client): 优化服务详情的样式

src/components/base-img/base-img.vue

@@ -42,3 +42,9 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.image {
+  display: block;
+}
+</style>

src/components/base-tabs/base-tabs.vue

@@ -23,7 +23,7 @@ export default {
     },
     height: {
       type: String,
-      default: '44px',
+      default: '88rpx',
     },
     lineWidth: {
       type: Number,

src/components/dynamic-list/dynamic-list.vue

@@ -0,0 +1,110 @@
+<template>
+  <view class="dynamic-list">
+    <view v-for="(item, index) in 3" :key="index" class="u-m-b-60">
+      <view class="fl-flex-item u-m-b-16">
+        <view class="fl-flex">
+          <u-avatar src="/static/img.jpg" size="50" />
+          <view class="u-m-l-16">
+            <view class="f-s-30 text-primary text-bold u-m-b-6 u-m-t-8">易只烊</view>
+            <u-rate v-model="value" readonly gutter="0"></u-rate>
+          </view>
+        </view>
+        <view class="f-s-24 text-999">2024.05.23</view>
+      </view>
+      <view class="dynamic-content">
+        评价评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容内容
+      </view>
+      <u-album
+        :urls="urls2"
+        :multipleSize="multipleSize"
+        :space="space"
+        :singleSize="singleSize"
+        :maxCount="maxCount"
+        :rowCount="rowCount"
+      ></u-album>
+
+      <view class="fl-flex-item u-m-t-24">
+        <view class="f-s-24 text-999">预览 10</view>
+        <view class="fl-flex">
+          <view class="like-message u-m-r-24 fl-flex">
+            <!-- <u-icon name="thumb-up" color="#333" size="18"></u-icon> -->
+            <u-icon name="thumb-up-fill" color="red" size="18"></u-icon>
+            <text class="u-m-l-4">619</text>
+          </view>
+          <view class="like-message fl-flex">
+            <u-icon name="chat" color="#333" size="18"></u-icon>
+            <text class="u-m-l-4">619</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    maxCount: {
+      type: Number,
+      default: 3,
+    },
+    singleSize: {
+      type: Number,
+      default: 300,
+    },
+    space: {
+      type: Number,
+      default: 10,
+    },
+    multipleSize: {
+      type: Number,
+      default: 110,
+    },
+    rowCount: {
+      type: Number,
+      default: 3,
+    },
+    bottomShow: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      value: 4,
+      urls2: [
+        'https://cdn.uviewui.com/uview/album/1.jpg',
+        'https://cdn.uviewui.com/uview/album/2.jpg',
+        'https://cdn.uviewui.com/uview/album/2.jpg',
+        'https://cdn.uviewui.com/uview/album/2.jpg',
+      ],
+    };
+  },
+  methods: {
+    handleMore(item) {
+      this.$emit('more', item);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dynamic-list {
+  background-color: #fff;
+  .dynamic-content {
+    font-size: 28rpx;
+    line-height: 40rpx;
+    color: #0c1223;
+    margin-bottom: 24rpx;
+  }
+  .like-message {
+    height: 54rpx;
+    line-height: 54rpx;
+    padding: 0 24rpx;
+    font-size: 28rpx;
+    color: #0c1223;
+    border-radius: 54rpx;
+    background-color: #f5f6f8;
+  }
+}
+</style>

src/pages.json

@@ -71,6 +71,12 @@
             "navigationStyle": "custom"
           }
         },
+        {
+          "path": "evaluateList/index",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        },
         {
           "path": "popularNearby/index",
           "style": {

src/pagesHome/evaluateList/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <view>
+    <page-navbar bgColor="#fff" title="评价列表"></page-navbar>
+  </view>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/pagesHome/productDetail/index copy.vue

@@ -0,0 +1,610 @@
+<template>
+  <view class="service">
+    <page-navbar bgColor="#fff" title="服务详情"></page-navbar>
+
+    <view class="service-content">
+      <!-- 标题和轮播图 -->
+      <view class="swipper-box">
+        <!-- <u-swiper :list="banners" previousMargin="30" nextMargin="30" circular bgColor="#ffffff" height="190" /> -->
+        <image src="/static/icon_test.jpg" class="img"></image>
+      </view>
+      <view class="countdown-box">
+        <view class="down-left"> 优惠推荐 </view>
+        <view class="down-right">
+          <view class="right-t">距离结束还剩</view>
+          <view class="right-l">
+            <view class="l-box">12</view>
+            <span class="colon">:</span>
+            <view class="l-box">12</view>
+            <span class="colon">:</span>
+            <view class="l-box">12</view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 价格 -->
+      <view class="price-content">
+        <view class="price1"> ￥{{ goods.specialPrice }} </view>
+        <view class="price2"
+          >门市价:￥<span class="price2-text">{{ goods.originalPrice }}</span>
+        </view>
+      </view>
+      <view class="goods-title">
+        <view class="title-left">
+          {{ goods.name }}
+        </view>
+        <view class="title-right">
+          <u-icon @click="handlerShare" name="share" color="#000000" size="22"></u-icon>
+        </view>
+      </view>
+      <view class="explan-box">
+        <view class="explan-item"> 预约：可预约/也可直接到门店使用 </view>
+        <view class="explan-item"> 须知：周一至周日全天可用·购买后30天内有效 </view>
+        <view class="explan-item"> 保障：随时退，过期退 </view>
+      </view>
+    </view>
+
+    <u-gap height="8" bgColor="#F9F9F9"></u-gap>
+
+    <view class="service-box">
+      <view class="title">服务详情</view>
+      <view class="service-detail">{{ goods.description }}</view>
+    </view>
+
+    <u-gap height="8" bgColor="#F9F9F9"></u-gap>
+
+    <view class="goods-comment-box">
+      <view class="comment-top">
+        <view class="title">商品评价</view>
+        <view class="title-leftrow">
+          <u-icon name="arrow-right" color="#000" :bold="true" size="16"></u-icon>
+        </view>
+      </view>
+
+      <view class="comment-box">
+        <view class="comment-item" v-for="(item, index) of 3" :key="index">
+          <view class="item-top-box">
+            <view class="item-left">
+              <view class="img-box">
+                <image src="@/static/QR57a.jpg" class="img"></image>
+              </view>
+              <view class="comment-name">
+                <view class="name">测试名称</view>
+                <view class="star">
+                  <u-rate
+                    :readonly="true"
+                    :gutter="0"
+                    count="5"
+                    value="2"
+                    activeColor="#F0D267"
+                  ></u-rate>
+                </view>
+              </view>
+            </view>
+            <view class="item-right">2012.3.01</view>
+          </view>
+          <view class="item-content-box">
+            <view class="content">
+              这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价
+            </view>
+            <view class="img-content">
+              <image
+                v-for="(item, index) of 4"
+                :key="index"
+                src="@/static/QR57a.jpg"
+                class="content-img"
+              ></image>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 底部 -->
+    <view class="service-footer">
+      <view class="footer-left">
+        <view class="left-item" @click="collect(0)">
+          <view class="item-img">
+            <image src="@/static/home/icon_home_detail_shop.png" class="img"></image>
+          </view>
+          <view class="item-text">店铺</view>
+        </view>
+        <view class="left-item" @click="collect(1)">
+          <view class="item-img">
+            <image src="@/static/home/icon_home_detail_comment.png" class="img"></image>
+          </view>
+          <view class="item-text">咨询</view>
+        </view>
+      </view>
+      <view class="footer-right">
+        <view class="btn1" @click="handlerFavorite">
+          <image
+            :src="
+              goods.favorites
+                ? require('@/static/home/icon_home_detail_heart.png')
+                : require('@/static/home/icon_home_detail_heart2.png')
+            "
+            class="img"
+          ></image>
+          <view>收藏</view>
+        </view>
+        <view class="btn2" @click="handlerAddCart"> 添加购物车 </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import {
+  getGoodsDetailApi,
+  addShoppingCart,
+  addGoodsFavorite,
+  cancelFavorite,
+  accountToOrderGetComment,
+} from '@/api/client/business.js';
+
+import couponComponent from '../marketer/CouponStore.vue';
+import evaluateComponent from '../components/evaluateComponent.vue';
+
+export default {
+  components: {
+    couponComponent,
+    evaluateComponent,
+  },
+  data() {
+    return {
+      goods: [], //商品详情
+      banners: [],
+      coupons: [], //优惠券
+      comments: [], // 评论
+      id: '', //商品id
+      shoopId: null, //店铺id
+      show: false,
+    };
+  },
+  onLoad(option) {
+    // 获取商品详情接口
+    this.shoopId = option.shopId;
+    this.id = option.id;
+    this.handlerInitList(this.id);
+  },
+  methods: {
+    // closeCoupon(data) {
+    //   this.show = data;
+    //   this.handlerGetGoodsConcentList()
+    // },
+    handlerInitList(id) {
+      getGoodsDetailApi(id).then(res => {
+        this.goods = res.data.goods;
+        this.comments = res.data.comments;
+        res.data.goods.banners.map(rs => {
+          this.banners.push(rs.url);
+        });
+        this.handlerGetGoodsConcentList();
+      });
+    },
+    handlerGetGoodsConcentList() {
+      // 获取商品评价列表
+      let params = {
+        // merchantId:this.shoopId,
+        goodsId: this.goods.id,
+      };
+      accountToOrderGetComment(params).then(res => {
+        console.log('@@@@res', res);
+      });
+
+      // 根据id获取优惠券列表
+      // accountTotIdGetCouponList(this.shoopId,{ paging:'1,10' }).then(res=>{
+      //   this.coupons = res.data.records
+      // })
+    },
+
+    // 点击分享
+    handlerShare() {
+      uni.share({
+        provider: 'weixin',
+        scene: 'WXSceneSession',
+        type: 1,
+        summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
+        success: function (res) {},
+        fail: function (err) {},
+      });
+    },
+
+    // 选择底部tab店铺收藏咨询
+    collect(item, index) {
+      switch (index) {
+        case 0:
+          uni.navigateBack(-1);
+          break;
+        case 1:
+          uni.showToast({
+            title: '暂无',
+            icon: 'none',
+          });
+          break;
+      }
+    },
+    // 点击收藏1
+    handlerFavorite() {
+      if (this.goods.favorites) {
+        cancelFavorite(this.id).then(res => {
+          if (res.code === 'OK') {
+            this.handlerInitList(this.id);
+            uni.showToast({
+              title: '取消收藏',
+              icon: 'none',
+            });
+          } else {
+            uni.showToast({
+              title: res.msg,
+              icon: 'none',
+            });
+            return;
+          }
+        });
+      } else {
+        addGoodsFavorite(this.id).then(res => {
+          if (res.code === 'OK') {
+            this.handlerInitList(this.id);
+            uni.showToast({
+              title: '收藏成功',
+              icon: 'none',
+            });
+          } else {
+            uni.showToast({
+              title: res.msg,
+              icon: 'none',
+            });
+            return;
+          }
+        });
+      }
+    },
+
+    // 加入购物车
+    handlerAddCart() {
+      let params = {
+        merchantId: this.shoopId,
+        goodsId: this.goods.id,
+        quantity: 1,
+        price: this.goods.specialPrice,
+        goodsName: this.goods.name,
+        goodsPic: this.goods.logo,
+        originalPrice: this.goods.originalPrice,
+      };
+      addShoppingCart(params).then(res => {
+        if (res.code === 'OK') {
+          uni.showToast({
+            title: '购物车添加成功',
+            icon: 'none',
+          });
+        } else {
+          uni.showToast({
+            title: res.message,
+            icon: 'none',
+          });
+          return;
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.service {
+  background-color: #fff;
+  font-size: 24rpx;
+  padding-bottom: 160rpx;
+  .service-content {
+    padding: 16rpx 32rpx 24rpx;
+    .swipper-box {
+      .img {
+        width: 100%;
+        height: 400rpx;
+        border-radius: 16rpx;
+      }
+    }
+
+    .countdown-box {
+      height: 80rpx;
+      border-radius: 8rpx;
+      background-color: #fdebee;
+      margin-top: 20rpx;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-right: 20rpx;
+      .down-left {
+        width: 230rpx;
+        height: 80rpx;
+        background-image: url('@/static/home/icon_home_detail_countdownbg.png');
+        background-size: 100% 100%;
+        line-height: 80rpx;
+        padding-left: 24rpx;
+        color: #ffffff;
+        font-size: 36rpx;
+        margin-right: 16rpx;
+      }
+      .down-right {
+        color: #333333;
+        display: flex;
+        align-items: center;
+        .right-t {
+          margin-right: 16rpx;
+        }
+        .right-l {
+          display: flex;
+          .l-box {
+            background-color: #f43f5e;
+            border-radius: 4rpx;
+            padding: 6rpx 8rpx;
+            border-radius: 4rpx;
+            text-align: center;
+            align-items: center;
+            color: #fff;
+          }
+          .colon {
+            margin: 0 4rpx;
+            color: #f43f5e;
+            font-weight: bold;
+          }
+        }
+      }
+    }
+  }
+
+  .price-content {
+    display: flex;
+    align-items: center;
+    margin-top: 32rpx;
+    .price1 {
+      font-size: 48rpx;
+      color: #0c1223;
+      font-weight: bold;
+      margin-right: 16rpx;
+    }
+    .price2 {
+      font-size: 24rpx;
+      color: #616570;
+      .price2-text {
+        text-decoration: line-through;
+      }
+    }
+  }
+  .goods-title {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 24rpx;
+    .title-left {
+      width: 92%;
+      font-size: #0c1223;
+      font-weight: bold;
+      font-size: 32rpx;
+    }
+    .title-right {
+      width: 8%;
+    }
+  }
+  .explan-box {
+    margin-top: 24rpx;
+    .explan-item {
+      color: #616570;
+      font-size: 24rpx;
+      margin-bottom: 8rpx;
+    }
+    .explan-item:last-child {
+      margin: 0;
+    }
+  }
+  .service-box,
+  .goods-comment-box {
+    padding: 16rpx 32rpx 24rpx;
+    .title {
+      color: #0c1223;
+      font-size: 32rpx;
+      font-weight: bold;
+    }
+    .service-detail {
+      color: #616570;
+      font-weight: 28rpx;
+      margin-top: 24rpx;
+    }
+  }
+  .goods-comment-box {
+    .comment-top {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 32rpx;
+      .title-leftrow {
+      }
+    }
+    .comment-box {
+      .comment-item {
+        margin-bottom: 32rpx;
+        .item-top-box {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          .item-left {
+            display: flex;
+            .img-box {
+              .img {
+                width: 88rpx;
+                height: 88rpx;
+                border-radius: 50%;
+              }
+            }
+            .comment-name {
+              margin-left: 16rpx;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+              .name {
+                color: #0c1223;
+              }
+              .star {
+              }
+            }
+          }
+        }
+        .item-content-box {
+          .content {
+          }
+          .img-content {
+            display: grid;
+            grid-template-columns: repeat(3, 32%);
+            grid-gap: 16rpx;
+            .content-img {
+              width: 218rpx;
+              height: 218rpx;
+              border-radius: 16rpx;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .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;
+}
+
+// 底部
+// .service-footer {
+
+// 	padding: 20rpx 40rpx 80rpx 60rpx;
+// 	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;
+// 		display: flex;
+// 		justify-content: flex-end;
+// 		font-size: 26rpx;
+// 		color: #fff;
+// 		text-align: center;
+
+// 		.cart {
+// 			width: 150px;
+// 			line-height: 40px;
+// 			cursor: pointer;
+// 			background-color: #fe9f1e;
+// 			// border-radius: 40px 0px 0px 40px;
+// 			border-radius: 40px;
+// 		}
+
+// 		.buy {
+// 			width: 100px;
+// 			line-height: 40px;
+// 			cursor: pointer;
+// 			background-color: #fe7421;
+// 			border-radius: 0 40px 40px 0;
+// 		}
+// 	}
+// }
+
+.service-footer {
+  padding: 20rpx 20rpx 40rpx 40rpx;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  display: flex;
+  background-color: #fff;
+  .footer-left {
+    display: flex;
+    .left-item {
+      margin-right: 32rpx;
+      .item-img {
+        .img {
+          width: 44rpx;
+          height: 44rpx;
+        }
+      }
+      .item-text {
+        color: #0c1223;
+        font-size: 24rpx;
+      }
+    }
+  }
+  .footer-right {
+    display: flex;
+    justify-content: space-between;
+    font-size: 28rpx;
+    .btn1 {
+      padding: 20rpx 54rpx;
+      background-color: #0c1223;
+      color: #fff;
+      text-align: center;
+      align-items: center;
+      border-radius: 8rpx;
+      display: flex;
+      margin-right: 20rpx;
+      vertical-align: middle;
+      .img {
+        width: 32rpx;
+        height: 32rpx;
+        margin-right: 10rpx;
+      }
+    }
+    .btn2 {
+      border-radius: 8rpx;
+      padding: 20rpx 82rpx;
+      background-color: #215ebe;
+      color: #fff;
+    }
+  }
+}
+</style>

src/pagesHome/productDetail/index.vue

@@ -1,140 +1,118 @@
 <template>
-  <view class="service">
+  <view class="product-detail">
     <page-navbar bgColor="#fff" title="服务详情"></page-navbar>
-
-    <view class="service-content">
-      <!-- 标题和轮播图 -->
-      <view class="swipper-box">
-        <!-- <u-swiper :list="banners" previousMargin="30" nextMargin="30" circular bgColor="#ffffff" height="190" /> -->
-        <image src="@/static/icon_test.jpg" class="img"></image>
+    <view class="product-detail-main">
+      <view class="u-m-b-24">
+        <u-swiper
+          :list="swiperList"
+          height="440rpx"
+          indicatorActiveColor="#215ebe"
+          indicator
+          indicatorMode="dot"
+          bgColor="#215ebe"
+        ></u-swiper>
       </view>
-      <view class="countdown-box">
-        <view class="down-left"> 优惠推荐 </view>
-        <view class="down-right">
-          <view class="right-t">距离结束还剩</view>
-          <view class="right-l">
-            <view class="l-box">12</view>
-            <span class="colon">:</span>
-            <view class="l-box">12</view>
-            <span class="colon">:</span>
-            <view class="l-box">12</view>
+
+      <view class="u-m-b-32 prefer-status fl-flex-item">
+        <base-img
+          src="/static/pagesHome/preferential-status.png"
+          height="80rpx"
+          width="230rpx"
+        ></base-img>
+        <view class="prefer-recommend">优惠推荐</view>
+        <view class="fl-flex">
+          <view class="u-m-r-16 f-s-24 text-333">距离结束还剩</view>
+          <view class="fl-flex">
+            <base-text
+              text="12"
+              background="#f43f5e"
+              width="40rpx"
+              height="40rpx"
+              color="#fff"
+            />
+            <text class="recommend-dot">:</text>
+            <base-text
+              text="12"
+              background="#f43f5e"
+              width="40rpx"
+              height="40rpx"
+              color="#fff"
+            />
+            <text class="recommend-dot">:</text>
+            <base-text
+              text="12"
+              background="#f43f5e"
+              width="40rpx"
+              height="40rpx"
+              color="#fff"
+            />
           </view>
         </view>
       </view>
 
-      <!-- 价格 -->
-      <view class="price-content">
-        <view class="price1"> ￥{{ goods.specialPrice }} </view>
-        <view class="price2"
-          >门市价:￥<span class="price2-text">{{ goods.originalPrice }}</span>
+      <view class="fl-flex-item u-m-b-24">
+        <view class="fl-flex">
+          <view class="f-s-48 text-primary u-m-r-16">￥{{ goods.specialPrice }}</view>
+          <view class="f-s-24 text-999 text-through u-m-t-20">
+            门市价:￥{{ goods.originalPrice }}
+          </view>
         </view>
+        <view class="f-s-24 text-999">销量1100</view>
       </view>
-      <view class="goods-title">
-        <view class="title-left">
-          {{ goods.name }}
-        </view>
-        <view class="title-right">
-          <u-icon @click="handlerShare" name="share" color="#000000" size="22"></u-icon>
-        </view>
+
+      <view class="fl-flex fl-justify-between u-m-b-24">
+        <view class="f-s-32 text-primary text-bold"> {{ goods.name }}</view>
+        <u-icon name="share-square" color="#333" size="26"></u-icon>
       </view>
-      <view class="explan-box">
-        <view class="explan-item"> 预约：可预约/也可直接到门店使用 </view>
-        <view class="explan-item"> 须知：周一至周日全天可用·购买后30天内有效 </view>
-        <view class="explan-item"> 保障：随时退，过期退 </view>
+
+      <view class="f-s-24 u-p-b-24" style="color: #616570; line-height: 40rpx">
+        <view> 预约：可预约/也可直接到门店使用</view>
+        <view> 须知：周一至周日全天可用·购买后30天内有效</view>
+        <view> 保障：随时退，过期退</view>
       </view>
     </view>
 
-    <u-gap height="8" bgColor="#F9F9F9"></u-gap>
+    <base-tabs
+      :list="detailList"
+      paddingLeft="30rpx"
+      paddingRight="30rpx"
+      lineWidth="40"
+    ></base-tabs>
 
-    <view class="service-box">
-      <view class="title">服务详情</view>
-      <view class="service-detail">{{ goods.description }}</view>
+    <view class="server-detail">
+      <view class="fl-text-title u-m-b-24">服务详情</view>
+      <view class="detail">{{ goods.description }}</view>
     </view>
 
-    <u-gap height="8" bgColor="#F9F9F9"></u-gap>
+    <view class="u-m-b-24">
+      <purchase-notes></purchase-notes>
+    </view>
 
-    <view class="goods-comment-box">
-      <view class="comment-top">
-        <view class="title">商品评价</view>
-        <view class="title-leftrow">
-          <u-icon name="arrow-right" color="#000" :bold="true" size="16"></u-icon>
+    <div class="service-evaluation">
+      <view class="fl-flex-item">
+        <view class="fl-text-title">服务详情</view>
+        <view class="fl-flex" @click="$Router.push('/pagesHome/evaluateList/index')">
+          <text class="f-s-24 text-999">查看更多</text>
+          <u-icon name="arrow-right" color="#999" size="15"></u-icon>
         </view>
       </view>
-
-      <view class="comment-box">
-        <view class="comment-item" v-for="(item, index) of 3" :key="index">
-          <view class="item-top-box">
-            <view class="item-left">
-              <view class="img-box">
-                <image src="@/static/QR57a.jpg" class="img"></image>
-              </view>
-              <view class="comment-name">
-                <view class="name">测试名称</view>
-                <view class="star">
-                  <u-rate
-                    :readonly="true"
-                    :gutter="0"
-                    count="5"
-                    value="2"
-                    activeColor="#F0D267"
-                  ></u-rate>
-                </view>
-              </view>
-            </view>
-            <view class="item-right">2012.3.01</view>
-          </view>
-          <view class="item-content-box">
-            <view class="content">
-              这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价
-            </view>
-            <view class="img-content">
-              <image
-                v-for="(item, index) of 4"
-                :key="index"
-                src="@/static/QR57a.jpg"
-                class="content-img"
-              ></image>
-            </view>
-          </view>
+      <view class="u-m-t-24">
+        <dynamic-list></dynamic-list>
+        <view class="dynamic-more" @click="$Router.push('/pagesHome/evaluateList/index')">
+          <view>120评论 查看更多</view>
+          <u-icon name="arrow-right" color="#999" size="12"></u-icon>
         </view>
       </view>
-    </view>
+    </div>
 
-    <!-- 底部 -->
     <view class="service-footer">
-      <view class="footer-left">
-        <view class="left-item" @click="collect(0)">
-          <view class="item-img">
-            <image src="@/static/home/icon_home_detail_shop.png" class="img"></image>
-          </view>
-          <view class="item-text">店铺</view>
-        </view>
-        <view class="left-item" @click="collect(1)">
-          <view class="item-img">
-            <image src="@/static/home/icon_home_detail_comment.png" class="img"></image>
-          </view>
-          <view class="item-text">咨询</view>
-        </view>
-      </view>
-      <view class="footer-right">
-        <view class="btn1" @click="handlerFavorite">
-          <image
-            :src="
-              goods.favorites
-                ? require('@/static/home/icon_home_detail_heart.png')
-                : require('@/static/home/icon_home_detail_heart2.png')
-            "
-            class="img"
-          ></image>
-          <view>收藏</view>
-        </view>
-        <view class="btn2" @click="handlerAddCart"> 添加购物车 </view>
-      </view>
+      <ServiceFooter></ServiceFooter>
     </view>
   </view>
 </template>
 
 <script>
+import ServiceFooter from './serviceFooter.vue';
 import {
   getGoodsDetailApi,
   addShoppingCart,
@@ -143,14 +121,11 @@ import {
   accountToOrderGetComment,
 } from '@/api/client/business.js';
 
-import couponComponent from '../marketer/CouponStore.vue';
-import evaluateComponent from '../components/evaluateComponent.vue';
-
 export default {
   components: {
-    couponComponent,
-    evaluateComponent,
+    ServiceFooter,
   },
+  name: 'productDetail',
   data() {
     return {
       goods: [], //商品详情
@@ -160,6 +135,25 @@ export default {
       id: '', //商品id
       shoopId: null, //店铺id
       show: false,
+      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',
+      ],
+      detailList: [
+        {
+          id: '1',
+          name: '服务详情',
+        },
+        {
+          id: '2',
+          name: '购买须知',
+        },
+        {
+          id: '3',
+          name: '网友评价',
+        },
+      ],
     };
   },
   onLoad(option) {
@@ -293,318 +287,56 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.service {
-  background-color: #fff;
-  font-size: 24rpx;
-  padding-bottom: 160rpx;
-  .service-content {
-    padding: 16rpx 32rpx 24rpx;
-    .swipper-box {
-      .img {
-        width: 100%;
-        height: 400rpx;
-        border-radius: 16rpx;
-      }
+.product-detail {
+  .product-detail-main {
+    padding: 16rpx 32rpx 0;
+    background-color: #fff;
+    position: relative;
+    .prefer-recommend {
+      position: absolute;
+      left: 7%;
+      font-size: 36rpx;
+      color: #fff;
     }
-
-    .countdown-box {
+    .prefer-status {
       height: 80rpx;
-      border-radius: 8rpx;
       background-color: #fdebee;
-      margin-top: 20rpx;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
       padding-right: 20rpx;
-      .down-left {
-        width: 230rpx;
-        height: 80rpx;
-        background-image: url('@/static/home/icon_home_detail_countdownbg.png');
-        background-size: 100% 100%;
-        line-height: 80rpx;
-        padding-left: 24rpx;
-        color: #ffffff;
-        font-size: 36rpx;
-        margin-right: 16rpx;
-      }
-      .down-right {
-        color: #333333;
-        display: flex;
-        align-items: center;
-        .right-t {
-          margin-right: 16rpx;
-        }
-        .right-l {
-          display: flex;
-          .l-box {
-            background-color: #f43f5e;
-            border-radius: 4rpx;
-            padding: 6rpx 8rpx;
-            border-radius: 4rpx;
-            text-align: center;
-            align-items: center;
-            color: #fff;
-          }
-          .colon {
-            margin: 0 4rpx;
-            color: #f43f5e;
-            font-weight: bold;
-          }
-        }
-      }
-    }
-  }
-
-  .price-content {
-    display: flex;
-    align-items: center;
-    margin-top: 32rpx;
-    .price1 {
-      font-size: 48rpx;
-      color: #0c1223;
-      font-weight: bold;
-      margin-right: 16rpx;
-    }
-    .price2 {
-      font-size: 24rpx;
-      color: #616570;
-      .price2-text {
-        text-decoration: line-through;
-      }
-    }
-  }
-  .goods-title {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 24rpx;
-    .title-left {
-      width: 92%;
-      font-size: #0c1223;
-      font-weight: bold;
-      font-size: 32rpx;
-    }
-    .title-right {
-      width: 8%;
-    }
-  }
-  .explan-box {
-    margin-top: 24rpx;
-    .explan-item {
-      color: #616570;
-      font-size: 24rpx;
-      margin-bottom: 8rpx;
     }
-    .explan-item:last-child {
-      margin: 0;
+    .recommend-dot {
+      margin: 0 4rpx;
+      color: #f43f5e;
     }
   }
-  .service-box,
-  .goods-comment-box {
-    padding: 16rpx 32rpx 24rpx;
-    .title {
-      color: #0c1223;
-      font-size: 32rpx;
-      font-weight: bold;
-    }
-    .service-detail {
+  .server-detail {
+    padding: 32rpx;
+    margin: 24rpx 0;
+    background-color: #fff;
+    .detail {
+      font-size: 28rpx;
+      line-height: 44rpx;
       color: #616570;
-      font-weight: 28rpx;
-      margin-top: 24rpx;
     }
   }
-  .goods-comment-box {
-    .comment-top {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 32rpx;
-      .title-leftrow {
-      }
-    }
-    .comment-box {
-      .comment-item {
-        margin-bottom: 32rpx;
-        .item-top-box {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          .item-left {
-            display: flex;
-            .img-box {
-              .img {
-                width: 88rpx;
-                height: 88rpx;
-                border-radius: 50%;
-              }
-            }
-            .comment-name {
-              margin-left: 16rpx;
-              display: flex;
-              flex-direction: column;
-              justify-content: space-around;
-              .name {
-                color: #0c1223;
-              }
-              .star {
-              }
-            }
-          }
-        }
-        .item-content-box {
-          .content {
-          }
-          .img-content {
-            display: grid;
-            grid-template-columns: repeat(3, 32%);
-            grid-gap: 16rpx;
-            .content-img {
-              width: 218rpx;
-              height: 218rpx;
-              border-radius: 16rpx;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .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;
-    }
+  .service-evaluation {
+    padding: 32rpx;
+    background-color: #fff;
+    margin-bottom: 24rpx;
   }
 
-  /* 占位 */
-  .placeholder {
-    height: 30rpx;
-    background-color: #f4f4f4;
+  .service-footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    background-color: #fff;
   }
-}
 
-.flex {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.text_title {
-  font-size: 24rpx;
-  color: #999;
-}
-
-// 底部
-// .service-footer {
-
-// 	padding: 20rpx 40rpx 80rpx 60rpx;
-// 	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;
-// 		display: flex;
-// 		justify-content: flex-end;
-// 		font-size: 26rpx;
-// 		color: #fff;
-// 		text-align: center;
-
-// 		.cart {
-// 			width: 150px;
-// 			line-height: 40px;
-// 			cursor: pointer;
-// 			background-color: #fe9f1e;
-// 			// border-radius: 40px 0px 0px 40px;
-// 			border-radius: 40px;
-// 		}
-
-// 		.buy {
-// 			width: 100px;
-// 			line-height: 40px;
-// 			cursor: pointer;
-// 			background-color: #fe7421;
-// 			border-radius: 0 40px 40px 0;
-// 		}
-// 	}
-// }
-
-.service-footer {
-  padding: 20rpx 20rpx 40rpx 40rpx;
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  display: flex;
-  background-color: #fff;
-  .footer-left {
-    display: flex;
-    .left-item {
-      margin-right: 32rpx;
-      .item-img {
-        .img {
-          width: 44rpx;
-          height: 44rpx;
-        }
-      }
-      .item-text {
-        color: #0c1223;
-        font-size: 24rpx;
-      }
-    }
-  }
-  .footer-right {
+  .dynamic-more {
     display: flex;
-    justify-content: space-between;
-    font-size: 28rpx;
-    .btn1 {
-      padding: 20rpx 54rpx;
-      background-color: #0c1223;
-      color: #fff;
-      text-align: center;
-      align-items: center;
-      border-radius: 8rpx;
-      display: flex;
-      margin-right: 20rpx;
-      vertical-align: middle;
-      .img {
-        width: 32rpx;
-        height: 32rpx;
-        margin-right: 10rpx;
-      }
-    }
-    .btn2 {
-      border-radius: 8rpx;
-      padding: 20rpx 82rpx;
-      background-color: #215ebe;
-      color: #fff;
-    }
+    font-size: 24rpx;
+    color: #999;
+    justify-content: center;
+    padding-bottom: 160rpx;
   }
 }
 </style>

src/pagesHome/productDetail/serviceFooter.vue

@@ -0,0 +1,82 @@
+<template>
+  <view class="fl-flex-item" style="padding: 20rpx 20rpx 40rpx 40rpx">
+    <view class="footer-left">
+      <view class="left-item" @click="collect(0)">
+        <view class="item-img">
+          <image src="/static/home/icon_home_detail_shop.png" class="img"></image>
+        </view>
+        <view class="item-text">店铺</view>
+      </view>
+      <view class="left-item" @click="collect(1)">
+        <view class="item-img">
+          <image src="/static/home/icon_home_detail_comment.png" class="img"></image>
+        </view>
+        <view class="item-text">咨询</view>
+      </view>
+    </view>
+    <view class="footer-right">
+      <view class="btn1" @click="handlerFavorite">
+        <image
+          :src="
+            goods.favorites
+              ? require('/static/home/icon_home_detail_heart.png')
+              : require('/static/home/icon_home_detail_heart2.png')
+          "
+          class="img"
+        ></image>
+        <view>收藏</view>
+      </view>
+      <view class="btn2" @click="handlerAddCart"> 立即购买 </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.footer-left {
+  display: flex;
+  .left-item {
+    margin-right: 32rpx;
+    .item-img {
+      .img {
+        width: 44rpx;
+        height: 44rpx;
+      }
+    }
+    .item-text {
+      color: #0c1223;
+      font-size: 24rpx;
+    }
+  }
+}
+.footer-right {
+  display: flex;
+  justify-content: space-between;
+  font-size: 28rpx;
+  .btn1 {
+    padding: 20rpx 54rpx;
+    background-color: #0c1223;
+    color: #fff;
+    text-align: center;
+    align-items: center;
+    border-radius: 8rpx;
+    display: flex;
+    margin-right: 20rpx;
+    vertical-align: middle;
+    .img {
+      width: 32rpx;
+      height: 32rpx;
+      margin-right: 10rpx;
+    }
+  }
+  .btn2 {
+    border-radius: 8rpx;
+    padding: 20rpx 82rpx;
+    background-color: #215ebe;
+    color: #fff;
+  }
+}
+</style>