商品详情 ui 完成 备份商品详情

src/pagesHome/marketer/productDetail - 副本.vue

@@ -0,0 +1,419 @@
+<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="banners" previousMargin="30" nextMargin="30" circular 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;" @change='handlerChange' />
+      </view>
+
+      <view v-show="current == 0">
+        {{ goods.description }}
+      </view>
+    </view>
+
+    <!-- 评价内容 -->
+    <!-- <view class="Evaluate-content">
+      <EvaluateContent :comments="comments"></EvaluateContent>
+    </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">
+        <view class="cart" @click="handlerAddCart">加入购物车</view>
+        <!-- <view class="buy" @click="handlerImmediateBy">立即购买</view> -->
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import {
+    getGoodsDetailApi,
+    addFavorite,
+    addShoppingCart,
+    addGoodsFavorite,
+    cancelFavorite,
+    // getGoodsConcentList,
+    accountToOrderGetComment,
+  } from '@/api/client/business.js';
+  import {  accountTotIdGetConponList } from '@/api/client/mine.js';
+  import couponComponent from './components/couponComponent.vue';
+  import evaluateComponent from './components/evaluateComponent.vue';
+  export default {
+    components: {
+      couponComponent,
+      evaluateComponent,
+    },
+    data() {
+      return {
+        userOperate: [{
+            name: '店铺',
+            icon: 'file-text',
+          },
+          // ,
+          //       {
+          //         name: '立即咨询',
+          //         icon: 'chat',
+          //       },
+        ],
+        favorite_list: {
+          name: '收藏',
+          icon: 'heart',
+          fill: 'heart-fill',
+        },
+        goods: [], //商品详情
+        banners: [],
+        coupons: [], //优惠券
+        comments: [], // 评论
+        id: '', //商品id
+        shoopId: null, //店铺id
+        show: false,
+        detailList: [{
+            id: '1',
+            name: '服务详情',
+          },
+          {
+            id: '2',
+            name: '购买须知',
+          },
+          {
+            id: '3',
+            name: '网友评价',
+          },
+        ],
+        current: 0
+      };
+    },
+    onLoad(option) {
+      // 获取商品详情接口
+      this.shoopId = option.shopId;
+      this.id = option.id;
+      this.handlerInitList(this.id)
+    },
+    methods: {
+      handlerChange(e) {
+        this.current = e.index
+      },
+      openPopup() {
+        this.show = true;
+      },
+      // closeCoupon(data) {
+      //   this.show = data;
+      //   this.handlerGetGoodsConcentList()
+      // },
+      handlerInitList(id) {
+        getGoodsDetailApi(id).then(res => {
+          this.goods = res.data.goods;
+          this.comments = res.data.comments;
+          res.data.goods.banners.map(rs => {
+            this.banners.push(rs.url);
+          });
+          this.handlerGetGoodsConcentList();
+        });
+      },
+      handlerGetGoodsConcentList() {
+        // 获取商品评价列表
+        let params = {
+          // merchantId:this.shoopId,
+          goodsId: this.goods.id,
+        };
+        accountToOrderGetComment(params).then(res => {
+          console.log('@@@@res', res);
+        });
+
+        // 根据id获取优惠券列表
+        // accountTotIdGetConponList(this.shoopId,{ paging:'1,10' }).then(res=>{
+        //   this.coupons = res.data.records
+        // })
+      },
+
+      // 点击分享
+      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;
+            }
+          });
+        }
+      },
+
+      // 点击购买按钮
+      // handlerImmediateBy() {
+      //   this.$store.commit('order/GET_ORDER_LIST', this.goods);
+      //   uni.navigateTo({
+      //     url: `/pages/client/clientPackage/uptickOrder?id=${this.id}`,
+      //   });
+      // },
+
+      // 加入购物车
+      handlerAddCart() {
+        let params = {
+          merchantId: this.shoopId,
+          goodsId: this.goods.id,
+          quantity: 1,
+          price: this.goods.specialPrice,
+          goodsName: this.goods.name,
+          goodsPic: this.goods.logo,
+          originalPrice: this.goods.originalPrice,
+        };
+        addShoppingCart(params).then(res => {
+          if (res.code === 'OK') {
+            uni.showToast({
+              title: '购物车添加成功',
+              icon: 'none',
+            });
+          } else {
+            uni.showToast({
+              title: res.message,
+              icon: 'none',
+            });
+            return;
+          }
+        });
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .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;
+  }
+
+  // 底部
+  .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;
+      }
+    }
+  }
+</style>

src/pagesHome/marketer/productDetail.vue

@@ -1,419 +1,597 @@
 <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 class="service">
+		<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>
-        <view class="service-title">{{ goods.name }}</view>
-        <u-swiper :list="banners" previousMargin="30" nextMargin="30" circular 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="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 of 3">
+					<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 of 4" 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>
 
-    <!-- 占位 -->
-    <view class="placeholder"></view>
+<script>
+	import {
+		getGoodsDetailApi,
+		addFavorite,
+		addShoppingCart,
+		addGoodsFavorite,
+		cancelFavorite,
+		accountToOrderGetComment,
+	} from '@/api/client/business.js';
+	import {
+		accountTotIdGetConponList
+	} from '@/api/client/mine.js';
+	import couponComponent from './components/couponComponent.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);
+				});
 
-    <!-- 服务详情 -->
-    <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;" @change='handlerChange' />
-      </view>
+				// 根据id获取优惠券列表
+				// accountTotIdGetConponList(this.shoopId,{ paging:'1,10' }).then(res=>{
+				//   this.coupons = res.data.records
+				// })
+			},
 
-      <view v-show="current == 0">
-        {{ goods.description }}
-      </view>
-    </view>
+			// 点击分享
+			handlerShare() {
+				uni.share({
+					provider: 'weixin',
+					scene: 'WXSceneSession',
+					type: 1,
+					summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
+					success: function(res) {},
+					fail: function(err) {},
+				});
+			},
 
-    <!-- 评价内容 -->
-    <!-- <view class="Evaluate-content">
-      <EvaluateContent :comments="comments"></EvaluateContent>
-    </view> -->
+			// 选择底部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;
+						}
+					});
+				}
+			},
 
-    <!-- 底部 -->
-    <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">
-        <view class="cart" @click="handlerAddCart">加入购物车</view>
-        <!-- <view class="buy" @click="handlerImmediateBy">立即购买</view> -->
-      </view>
-    </view>
-  </view>
-</template>
+			// 加入购物车
+			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>
 
-<script>
-  import {
-    getGoodsDetailApi,
-    addFavorite,
-    addShoppingCart,
-    addGoodsFavorite,
-    cancelFavorite,
-    // getGoodsConcentList,
-    accountToOrderGetComment,
-  } from '@/api/client/business.js';
-  import {  accountTotIdGetConponList } from '@/api/client/mine.js';
-  import couponComponent from './components/couponComponent.vue';
-  import evaluateComponent from './components/evaluateComponent.vue';
-  export default {
-    components: {
-      couponComponent,
-      evaluateComponent,
-    },
-    data() {
-      return {
-        userOperate: [{
-            name: '店铺',
-            icon: 'file-text',
-          },
-          // ,
-          //       {
-          //         name: '立即咨询',
-          //         icon: 'chat',
-          //       },
-        ],
-        favorite_list: {
-          name: '收藏',
-          icon: 'heart',
-          fill: 'heart-fill',
-        },
-        goods: [], //商品详情
-        banners: [],
-        coupons: [], //优惠券
-        comments: [], // 评论
-        id: '', //商品id
-        shoopId: null, //店铺id
-        show: false,
-        detailList: [{
-            id: '1',
-            name: '服务详情',
-          },
-          {
-            id: '2',
-            name: '购买须知',
-          },
-          {
-            id: '3',
-            name: '网友评价',
-          },
-        ],
-        current: 0
-      };
-    },
-    onLoad(option) {
-      // 获取商品详情接口
-      this.shoopId = option.shopId;
-      this.id = option.id;
-      this.handlerInitList(this.id)
-    },
-    methods: {
-      handlerChange(e) {
-        this.current = e.index
-      },
-      openPopup() {
-        this.show = true;
-      },
-      // closeCoupon(data) {
-      //   this.show = data;
-      //   this.handlerGetGoodsConcentList()
-      // },
-      handlerInitList(id) {
-        getGoodsDetailApi(id).then(res => {
-          this.goods = res.data.goods;
-          this.comments = res.data.comments;
-          res.data.goods.banners.map(rs => {
-            this.banners.push(rs.url);
-          });
-          this.handlerGetGoodsConcentList();
-        });
-      },
-      handlerGetGoodsConcentList() {
-        // 获取商品评价列表
-        let params = {
-          // merchantId:this.shoopId,
-          goodsId: this.goods.id,
-        };
-        accountToOrderGetComment(params).then(res => {
-          console.log('@@@@res', res);
-        });
+<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;
+				}
+			}
 
-        // 根据id获取优惠券列表
-        // accountTotIdGetConponList(this.shoopId,{ paging:'1,10' }).then(res=>{
-        //   this.coupons = res.data.records
-        // })
-      },
+			.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;
+						}
+					}
+				}
+			}
+		}
 
-      // 点击分享
-      handlerShare() {
-        uni.share({
-          provider: 'weixin',
-          scene: 'WXSceneSession',
-          type: 1,
-          summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
-          success: function(res) {},
-          fail: function(err) {},
-        });
-      },
+		.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;
+							}
+						}
+					}
+				}
+			}
+		}
+		
+		
+		
 
-      // 选择底部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;
-            }
-          });
-        }
-      },
+		.evaluate {
+			height: 30rpx;
+			margin: 30rpx 0 30rpx 20rpx;
+			padding-bottom: 30rpx;
+			border-bottom: 1rpx solid #f4f4f4;
+		}
 
-      // 点击购买按钮
-      // handlerImmediateBy() {
-      //   this.$store.commit('order/GET_ORDER_LIST', this.goods);
-      //   uni.navigateTo({
-      //     url: `/pages/client/clientPackage/uptickOrder?id=${this.id}`,
-      //   });
-      // },
+		.evaluate-context {
+			.evaluate {
+				border-bottom: none;
+				padding-bottom: 10rpx;
+			}
+		}
 
-      // 加入购物车
-      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>
+		/* 占位 */
+		.placeholder {
+			height: 30rpx;
+			background-color: #f4f4f4;
+		}
+	}
 
-<style lang="scss" scoped>
-  .service {
-    min-height: 100vh;
-    background-color: #fff;
-    padding: 0 20rpx;
+	.flex {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
 
-    .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;
-      }
-    }
+	.text_title {
+		font-size: 24rpx;
+		color: #999;
+	}
 
-    /* 占位 */
-    .placeholder {
-      height: 30rpx;
-      background-color: #f4f4f4;
-    }
-  }
-  .flex {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
+	// 底部
+	// .service-footer {
 
-  .text_title {
-    font-size: 24rpx;
-    color: #999;
-  }
+	// 	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;
 
-  // 底部
-  .service-footer {
+	// 	.u-icon {
+	// 		justify-content: center !important;
+	// 	}
 
-    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;
+	// 	.user-operate {
+	// 		text-align: center;
+	// 	}
 
-    .u-icon {
-      justify-content: center !important;
-    }
+	// 	.user-operate-text {
+	// 		font-size: 24rpx;
+	// 		font-weight: 600;
+	// 	}
 
-    .user-operate {
-      text-align: center;
-    }
+	// 	.buyNow {
+	// 		width: 200px;
+	// 		height: 40px;
+	// 		display: flex;
+	// 		justify-content: flex-end;
+	// 		font-size: 26rpx;
+	// 		color: #fff;
+	// 		text-align: center;
 
-    .user-operate-text {
-      font-size: 24rpx;
-      font-weight: 600;
-    }
+	// 		.cart {
+	// 			width: 150px;
+	// 			line-height: 40px;
+	// 			cursor: pointer;
+	// 			background-color: #fe9f1e;
+	// 			// border-radius: 40px 0px 0px 40px;
+	// 			border-radius: 40px;
+	// 		}
 
-    .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;
-      }
-    }
-  }
-</style>
+	// 		.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/utils/request.js

@@ -11,10 +11,10 @@ import {
 
 // 每次请求都创建一个新的实例
 const instance = axios.create({
-  // baseURL: 'https://test.api.chelvc.com',
+  baseURL: 'https://test.api.chelvc.com',
   // baseURL: "http://192.168.68.77:11000",
   // baseURL: "https://358175z5l5.yicp.fun",
-  baseURL: "http://localhost:11000",
+  // baseURL: "http://localhost:11000",
   timeout: 10000,
   adapter: UniAdapter,
 });