优化

src/pages/common/groupbuy/detail.vue

@@ -3,7 +3,7 @@
     <view class='swiper-container'>
       <swiper class='swiper' :interval='1500' :duration='1000' @change='swiperChange'>
         <swiper-item v-for='(item,index) in bannerList' :key='index'>
-          <image :src='assetsUrl("test_bg.png")' />
+          <image :src='item' />
         </swiper-item>
       </swiper>
       <view class='indicator'>
@@ -16,8 +16,8 @@
         超级\n秒杀
       </view>
       <view class='price c-flex-column' style='flex: 1'>
-        <text>52</text>
-        <text>￥65</text>
+        <text>{{ detailBean?.payPrice }}</text>
+        <text>￥{{ detailBean?.goodsPrice || 0 }}</text>
       </view>
       <view class='countdown-time c-flex-column'>
         <view class='c-flex-row'>180天
@@ -34,11 +34,11 @@
     <view class='goods-info-view c-flex-column'>
       <view class='c-flex-row'>
         <text class='goods-price accent-text-color'>39.89</text>
-        <text>销量2653</text>
+        <text>销量{{ detailBean.totalNum }}</text>
       </view>
 
       <view class='c-flex-row'>
-        <text>女童夏装套装洋气装短袖阔腿裤子夏装夏装套装</text>
+        <text style='flex: 1'>{{ detailBean.name }}</text>
         <view class='share-button c-flex-column'>
           <image :src='assetsUrl("ic_share.png")'></image>
           <button class='btn' plain open-type='share'>分享</button>
@@ -53,12 +53,6 @@
         <image :src='assetsUrl("ic_arrow_right_gray.png")' />
         <text>共1种颜色可选</text>
       </view>
-      <view class='divider' style='width:auto;height: 0.5rpx;margin-left: 100rpx' />
-      <view class='c-flex-row' @click.stop='showSkuDialog'>
-        <text>参数</text>
-        <text>品牌 风格 季节 款号</text>
-        <image :src='assetsUrl("ic_arrow_right_gray.png")' />
-      </view>
     </view>
 
     <view class='recommend-view c-flex-column'>
@@ -77,9 +71,10 @@
 
     <view class='goods-detail c-flex-column'>
       <text>商品详情</text>
-      <image :src='assetsUrl("test_bg.png")' mode='aspectFill' />
-      <image :src='assetsUrl("test_bg.png")' mode='aspectFill' />
-      <image :src='assetsUrl("test_bg.png")' mode='aspectFill' />
+
+      <image
+        v-for='(item,index) in JSON.parse(detailBean.content).filter((a: any) => a.type === 2).map((b: any) => b.images)'
+        :src='item' mode='aspectFill' :key='index' />
     </view>
 
     <view class='bottom-view c-flex-row'>
@@ -116,12 +111,19 @@
 import { assetsUrl } from '@/utils/assets';
 import { goPath } from '@/utils';
 import SkuDialog from '@/components/sku-dialog.vue';
+import { getGroupBuyDetail } from '@/api/groupbuy';
 
 const skuDialogRef = ref();
+const detailBean = ref();
 
-const bannerList = ref([1, 2, 3, 4]);
+const bannerList = ref([]);
 const swiperIndex = ref(0);
 
+onLoad(async (e) => {
+  detailBean.value = await getGroupBuyDetail(e.id);
+  bannerList.value = JSON.parse(detailBean.value.content).filter((item: any) => item.type === 2).map((item: any) => item.images);
+});
+
 const swiperChange = (e: any) => {
   swiperIndex.value = e.detail.current;
 };
@@ -142,7 +144,7 @@ const addShoppingCart = () => {
 };
 
 const placeOrder = () => {
-  goPath('/pages/mall/subs/order/order-confirm');
+  goPath('/pages/common/groupbuy/order');
 };
 </script>
 
@@ -192,7 +194,7 @@ const placeOrder = () => {
   position: relative;
   padding: 15rpx 30rpx;
   background: #F32B2B;
-  background-image: url("../../../static/images/bg_groupbuy_countdown.png");
+  background-image: url('../../../static/images/bg_groupbuy_countdown.png');
   background-size: 100% 100%;
 
   .super-second-kill {
@@ -253,10 +255,11 @@ const placeOrder = () => {
       color: #F32B2B;
     }
 
-    .time:nth-of-type(1){
+    .time:nth-of-type(1) {
       margin-left: 18rpx;
     }
-    .time:nth-of-type(3){
+
+    .time:nth-of-type(3) {
       margin-right: 0;
     }
 
@@ -323,7 +326,7 @@ const placeOrder = () => {
 
 .goods-sku-view {
   background: #FFFFFF;
-  padding: 0 30rpx;
+  padding: 20rpx 30rpx;
   margin-top: 20rpx;
 
   view:nth-of-type(n+1) {
@@ -362,7 +365,7 @@ const placeOrder = () => {
 
   view:nth-of-type(1) {
     align-items: flex-start;
-    padding-top: 40rpx;
+    //padding-top: 20rpx;
   }
 }
 

src/pages/common/groupbuy/index.vue

@@ -7,20 +7,20 @@
 
     <scroll-view class='scroll-view'>
       <view class='c-flex-column' v-for='(item, index) in groupbuyList' :key='index'>
-        <view class='item c-flex-row' @click.stop='goPath("/pages/common/groupbuy/detail")'>
+        <view class='item c-flex-row' @click.stop='goPath(`/pages/common/groupbuy/detail?id=${item.id}`)'>
           <image class='goods-image' :src='JSON.parse(item.content)[0].images' />
           <view class='c-flex-column' style='flex: 1'>
             <view class='goods-name'>{{ item.name }}</view>
             <view class='middle-view c-flex-row'>
-              <text>原价：￥{{ item.payPrice }}</text>
-              <view class='decline c-flex-row'>
+              <text>原价：￥{{ item.goodsPrice }}</text>
+              <view v-if='(item.goodsPrice - item.payPrice)>0' class='decline c-flex-row'>
                 <image :src='assetsUrl("ic_decline.png")' />
-                <text>直降￥{{ item.offsetPrice }}</text>
+                <text>直降￥{{ (item.goodsPrice - item.payPrice).toFixed(2) }}</text>
               </view>
               <text>即将恢复</text>
             </view>
             <view class='bottom-price c-flex-row' :class='{"bottom-price-disabled":tabIndex==1}'>
-              <text>41</text>
+              <text>{{ item.payPrice }}</text>
               <text>团购</text>
             </view>
           </view>
@@ -165,7 +165,7 @@ const fetchData = async () => {
         font-weight: bold;
         font-size: 40rpx;
         color: #FFFFFF;
-        margin-left: 40rpx;
+        margin-left: 30rpx;
         margin-bottom: 5rpx;
       }
 

src/pages/common/groupbuy/order.vue

@@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script lang='ts' setup>
+
+</script>
+
+<style lang='scss' scoped>
+
+</style>