!20 商城装修

Merge pull request !20 from 疯狂的世界/master-vue3

pages/index/user.vue

@@ -3,13 +3,13 @@
     title="我的"
     tabbar="/pages/index/user"
     navbar="custom"
-    :bgStyle="template.style?.background"
+    :bgStyle="template.page"
     :navbarStyle="template.style?.navbar"
     onShareAppMessage
     :showFloatButton="true"
   >
-    <s-block v-for="(item, index) in template.data" :key="index" :styles="item.style">
-      <s-block-item :type="item.type" :data="item.data" :styles="item.style" />
+    <s-block v-for="(item, index) in template.components" :key="index" :styles="item.property.style">
+      <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
     </s-block>
   </s-layout>
 </template>

sheep/api/product/spu.js

@@ -1,6 +1,6 @@
 import request from '@/sheep/request';
 
-export default {
+const SpuApi = {
     // 获得商品 SPU 列表
     getSpuList: (recommendType) => {
         return request({
@@ -34,3 +34,4 @@ export default {
         });
     }
 };
+export default SpuApi;

sheep/api/promotion/article.js

@@ -0,0 +1,12 @@
+import request from '@/sheep/request';
+
+export default {
+    // 获得文章详情
+    getArticle: (id) => {
+        return request({
+            url: '/app-api/promotion/article/get',
+            method: 'GET',
+            params: { id }
+        });
+    }
+}

sheep/api/promotion/combination.js

@@ -0,0 +1,67 @@
+import request2 from "@/sheep/request2";
+
+// 拼团 API
+const CombinationApi = {
+    // 获得拼团活动列表
+    getCombinationActivityList: (count) => {
+        return request2({
+            url: "promotion/combination-activity/list",
+            method: 'GET',
+            params: {count}
+        });
+    },
+
+    // 获得拼团活动分页
+    getCombinationActivityPage: (params) => {
+        return request2({
+            url: "promotion/combination-activity/page",
+            method: 'GET',
+            params
+        });
+    },
+
+    // 获得拼团活动明细
+    getCombinationActivity: (id) => {
+        return request2({
+            url: "promotion/combination-activity/get-detail",
+            method: 'GET',
+            params: {
+                id
+            }
+        });
+    },
+
+    // 获得最近 n 条拼团记录（团长发起的）
+    getHeadCombinationRecordList: (activityId, status, count) => {
+        return request2({
+            url: "promotion/combination-record/get-head-list",
+            method: 'GET',
+            params: {
+                activityId,
+                status,
+                count
+            }
+        });
+    },
+
+    // 获得拼团记录明细
+    getCombinationRecordDetail: (id) => {
+        return request2({
+            url: "promotion/combination-record/get-detail",
+            method: 'GET',
+            params: {
+                id
+            }
+        });
+    },
+
+    // 获得拼团记录的概要信息
+    getCombinationRecordSummary: () => {
+        return request2({
+            url: "promotion/combination-record/get-summary",
+            method: 'GET',
+        });
+    }
+}
+
+export default CombinationApi

sheep/api/promotion/seckill.js

@@ -0,0 +1,33 @@
+import request2 from "@/sheep/request2";
+
+const SeckillApi = {
+  // 获得秒杀时间段列表
+  getSeckillConfigList: () => {
+    return request2({ url: 'promotion/seckill-config/list', method: 'GET' });
+  },
+
+  // 获得当前秒杀活动
+  getNowSeckillActivity: () => {
+    return request2({ url: 'promotion/seckill-activity/get-now', method: 'GET' });
+  },
+
+  // 获得秒杀活动分页
+  getSeckillActivityPage: () => {
+    return request2({ url: 'promotion/seckill-activity/page', method: 'GET' });
+  },
+
+  /**
+   * 获得秒杀活动明细
+   * @param {number} id 秒杀活动编号
+   * @return {*}
+   */
+  getSeckillActivity: (id) => {
+    return request2({
+      url: 'promotion/seckill-activity/get-detail',
+      method: 'GET',
+      params: { id }
+    });
+  }
+}
+
+export default SeckillApi;

sheep/components/s-block-item/s-block-item.vue

@@ -21,10 +21,8 @@
     <s-image-cube v-if="type === 'MagicCube'" :data="data" :styles="styles" />
     <!-- 图文组件：视频播放 -->
     <s-video-block v-if="type === 'VideoPlayer'" :data="data" :styles="styles" />
-    <!-- 基础组件：辅助线 -->
-    <s-line-block v-if="type === 'lineBlock'" :data="data" />
-    <!-- 图文组件：富文字 -->
-    <s-richtext-block v-if="type === 'richtext'" :data="data" :styles="styles" />
+    <!-- 基础组件：分割线 -->
+    <s-line-block v-if="type === 'Divider'" :data="data" />
     <!-- 图文组件：热区 -->
     <s-hotzone-block v-if="type === 'hotzone'" :data="data" :styles="styles" />
 
@@ -34,24 +32,26 @@
     <s-goods-shelves v-if="type === 'ProductList'" :data="data" :styles="styles" />
 
     <!-- 营销组件：拼团 -->
-    <s-groupon-block v-if="type === 'groupon'" :data="data" :styles="styles" />
+    <s-groupon-block v-if="type === 'PromotionCombination'" :data="data" :styles="styles" />
     <!-- 营销组件：秒杀 -->
-    <s-seckill-block v-if="type === 'seckill'" :data="data" :styles="styles" />
-    <!-- 营销组件：积分商城 -->
-    <s-score-block v-if="type === 'scoreGoods'" :data="data" :styles="styles" />
-    <!-- 营销组件：小程序直播 -->
-    <s-live-block v-if="type === 'mplive'" :data="data" :styles="styles" />
+    <s-seckill-block v-if="type === 'PromotionSeckill'" :data="data" :styles="styles" />
+    <!-- 营销组件：积分商城（模式不一样，无法适配） -->
+    <s-score-block v-if="type === 'PromotionPoint'" :data="data" :styles="styles" />
+    <!-- 营销组件：小程序直播（暂时没有这个功能） -->
+    <s-live-block v-if="type === 'MpLive'" :data="data" :styles="styles" />
     <!-- 营销组件：优惠券 -->
     <s-coupon-block v-if="type === 'CouponCard'" :data="data" :styles="styles" />
+    <!-- 营销组件：文章 -->
+    <s-richtext-block v-if="type === 'PromotionArticle'" :data="data" :styles="styles" />
 
-    <!-- 会员组件：会员卡片 -->
-    <s-user-card v-if="type === 'userCard'" />
-    <!-- 会员组件：订单卡片 -->
-    <s-order-card v-if="type === 'orderCard'" :data="data" />
-    <!-- 会员组件：资产卡片 -->
-    <s-wallet-card v-if="type === 'walletCard'" />
-    <!-- 会员组件：卡券卡片 -->
-    <s-coupon-card v-if="type === 'couponCard'" />
+    <!-- 用户组件：用户卡片 -->
+    <s-user-card v-if="type === 'UserCard'" />
+    <!-- 用户组件：用户订单 -->
+    <s-order-card v-if="type === 'UserOrder'" :data="data" />
+    <!-- 用户组件：用户资产 -->
+    <s-wallet-card v-if="type === 'UserWallet'" />
+    <!-- 用户组件：用户卡券 -->
+    <s-coupon-card v-if="type === 'UserCoupon'" />
   </view>
 </template>
 

sheep/components/s-goods-card/s-goods-card.vue

@@ -12,8 +12,8 @@
         <s-goods-column
           class=""
           size="sl"
-          :goodsFields="productFields"
-          :tagStyle="badge"
+          :goodsFields="data.fields"
+          :tagStyle="data.badge"
           :data="item"
           :titleColor="data.fields.name?.color"
           :subTitleColor="data.fields.introduction.color"
@@ -46,8 +46,8 @@
           <s-goods-column
             class="goods-md-box"
             size="md"
-            :goodsFields="productFields"
-            :tagStyle="badge"
+            :goodsFields="data.fields"
+            :tagStyle="data.badge"
             :data="item"
             :titleColor="data.fields.name?.color"
             :subTitleColor="data.fields.introduction.color"
@@ -76,8 +76,8 @@
           <s-goods-column
             class="goods-md-box"
             size="md"
-            :goodsFields="productFields"
-            :tagStyle="badge"
+            :goodsFields="data.fields"
+            :tagStyle="data.badge"
             :data="item"
             :titleColor="data.fields.name?.color"
             :subTitleColor="data.fields.introduction.color"
@@ -109,9 +109,9 @@
         <s-goods-column
           class="goods-card"
           size="lg"
-          :goodsFields="productFields"
+          :goodsFields="data.fields"
           :data="item"
-          :tagStyle="badge"
+          :tagStyle="data.badge"
           :titleColor="data.fields.name?.color"
           :subTitleColor="data.fields.introduction.color"
           :topRadius="data.borderRadiusTop"
@@ -174,7 +174,8 @@
       return {
         background: `linear-gradient(to right, ${btnBuy.bgBeginColor}, ${btnBuy.bgEndColor})`,
       };
-    } else if (btnBuy.type === 'img') {
+    }
+    if (btnBuy.type === 'img') {
       // 图片按钮
       return {
         width: '54rpx',
@@ -185,26 +186,6 @@
     }
   });
 
-  // 商品字段配置，todo @owen 字段名称与服务端对齐，这里先转换，后期重构时再修改
-  const productFields = computed(()  => {
-    return {
-      title: props.data.fields.name,
-      subtitle: props.data.fields.introduction,
-      price: props.data.fields.price,
-      original_price: props.data.fields.marketPrice,
-      stock: props.data.fields.stock,
-      salesCount: props.data.fields.salesCount,
-    }
-  })
-
-  // 角标，todo @owen 规范命名，这里先转换，后期重构时再修改
-  const badge = computed(() => {
-    return {
-      show: props.data.badge.show,
-      src: props.data.badge.imgUrl,
-    }
-  })
-
   //region 商品瀑布流布局
   // 下一个要处理的商品索引
   let count = 0;

sheep/components/s-goods-column/s-goods-column.vue

@@ -9,15 +9,15 @@
       @tap="onClick"
     >
       <view v-if="tagStyle.show" class="tag-icon-box">
-        <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src)"></image>
+        <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
       </view>
       <image class="xs-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFit"></image>
       <view
-        v-if="goodsFields.title?.show || goodsFields.price?.show"
+        v-if="goodsFields.title?.show || goodsFields.name?.show || goodsFields.price?.show"
         class="xs-goods-content ss-flex-col ss-row-around"
       >
         <view
-          v-if="goodsFields.title?.show"
+          v-if="goodsFields.title?.show || goodsFields.name?.show"
           class="xs-goods-title ss-line-1"
           :style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]"
         >
@@ -37,16 +37,16 @@
     <!-- sm卡片：竖向紧凑，一行放三个，图上内容下 -->
     <view v-if="size === 'sm'" class="sm-goods-card ss-flex-col" :style="[elStyles]" @tap="onClick">
       <view v-if="tagStyle.show" class="tag-icon-box">
-        <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src)"></image>
+        <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
       </view>
       <image class="sm-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill"></image>
 
       <view
-        v-if="goodsFields.title?.show || goodsFields.price?.show"
+        v-if="goodsFields.title?.show || goodsFields.name?.show || goodsFields.price?.show"
         class="sm-goods-content"
         :style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]"
       >
-        <view v-if="goodsFields.title?.show" class="sm-goods-title ss-line-1 ss-m-b-16">
+        <view v-if="goodsFields.title?.show || goodsFields.name?.show" class="sm-goods-title ss-line-1 ss-m-b-16">
           {{ data.title || data.name }}
         </view>
         <view
@@ -63,7 +63,7 @@
     <!-- md卡片：竖向，一行放两个，图上内容下 -->
     <view v-if="size === 'md'" class="md-goods-card ss-flex-col" :style="[elStyles]" @tap="onClick">
       <view v-if="tagStyle.show" class="tag-icon-box">
-        <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src)"></image>
+        <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
       </view>
       <image class="md-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="widthFix"></image>
       <view
@@ -71,14 +71,14 @@
         :id="elId"
       >
         <view
-          v-if="goodsFields.title?.show"
+          v-if="goodsFields.title?.show || goodsFields.name?.show"
           class="md-goods-title ss-line-1"
           :style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]"
         >
           {{ data.title || data.name }}
         </view>
         <view
-          v-if="goodsFields.subtitle?.show"
+          v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
           class="md-goods-subtitle ss-m-t-16 ss-line-1"
           :style="[{ color: subTitleColor, background: subTitleBackground }]"
         >
@@ -135,7 +135,7 @@
       @tap="onClick"
     >
       <view v-if="tagStyle.show" class="tag-icon-box">
-        <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src)"></image>
+        <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
       </view>
       <view v-if="seckillTag" class="seckill-tag ss-flex ss-row-center"> 秒杀 </view>
       <view v-if="grouponTag" class="groupon-tag ss-flex ss-row-center">
@@ -145,14 +145,14 @@
       <view class="lg-goods-content ss-flex-1 ss-flex-col ss-row-between ss-p-b-10 ss-p-t-20">
         <view>
           <view
-            v-if="goodsFields.title?.show"
+            v-if="goodsFields.title?.show || goodsFields.name?.show"
             class="lg-goods-title ss-line-2"
             :style="[{ color: titleColor }]"
           >
             {{ data.title || data.name }}
           </view>
           <view
-            v-if="goodsFields.subtitle?.show"
+            v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
             class="lg-goods-subtitle ss-m-t-10 ss-line-1"
             :style="[{ color: subTitleColor, background: subTitleBackground }]"
           >
@@ -201,7 +201,7 @@
     <!-- sl卡片：竖向型，一行放一个，图片上内容下边 -->
     <view v-if="size === 'sl'" class="sl-goods-card ss-flex-col" :style="[elStyles]" @tap="onClick">
       <view v-if="tagStyle.show" class="tag-icon-box">
-        <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src)"></image>
+        <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
       </view>
 
       <image class="sl-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill"></image>
@@ -209,14 +209,14 @@
       <view class="sl-goods-content">
         <view>
           <view
-            v-if="goodsFields.title?.show"
+            v-if="goodsFields.title?.show || goodsFields.name?.show"
             class="sl-goods-title ss-line-1"
             :style="[{ color: titleColor }]"
           >
             {{ data.title || data.name }}
           </view>
           <view
-            v-if="goodsFields.subtitle?.show"
+            v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
             class="sl-goods-subtitle ss-m-t-16"
             :style="[{ color: subTitleColor, background: subTitleBackground }]"
           >
@@ -307,12 +307,25 @@
       type: [Array, Object],
       default() {
         return {
+          // 商品名称（旧）
           title: { show: true },
+          // 商品介绍（旧）
           subtitle: { show: true },
+          // 商品价格
           price: { show: true },
+          // 市场价（旧）
           original_price: { show: true },
+          // 销量（旧）
           sales: { show: true },
+          // 库存
           stock: { show: true },
+          // 商品名称（新）
+          name: { show: true },
+          // 商品介绍（新）
+          introduction: { show: true },
+          // 市场价（新）
+          marketPrice: { show: true },
+          // 销量（新）
           salesCount: { show: true },
         };
       },

sheep/components/s-goods-shelves/s-goods-shelves.vue

@@ -19,10 +19,10 @@
         <s-goods-column
           class="goods-card"
           size="xs"
-          :goodsFields="productFields"
-          :tagStyle="tagStyle"
+          :goodsFields="data.fields"
+          :tagStyle="data.badge"
           :data="item"
-          :titleColor="productFields.title?.color"
+          :titleColor="data.fields.name?.color"
           :topRadius="data.borderRadiusTop"
           :bottomRadius="data.borderRadiusBottom"
           :titleWidth="(454 - marginRight * 2 - data.space * 2 - marginLeft * 2) / 2"
@@ -49,10 +49,10 @@
         <s-goods-column
           class="goods-card"
           size="sm"
-          :goodsFields="productFields"
-          :tagStyle="tagStyle"
+          :goodsFields="data.fields"
+          :tagStyle="data.badge"
           :data="item"
-          :titleColor="productFields.title?.color"
+          :titleColor="data.fields.name?.color"
           :topRadius="data.borderRadiusTop"
           :bottomRadius="data.borderRadiusBottom"
           @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
@@ -73,10 +73,10 @@
             <s-goods-column
               class="goods-card"
               size="sm"
-              :goodsFields="productFields"
-              :tagStyle="tagStyle"
+              :goodsFields="data.fields"
+              :tagStyle="data.badge"
               :data="item"
-              :titleColor="productFields.title?.color"
+              :titleColor="data.fields.name?.color"
               :titleWidth="(750 - marginRight * 2 - data.space * 4 - marginLeft * 2) / 3"
               @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
             ></s-goods-column>
@@ -105,7 +105,7 @@
       default() {},
     },
   });
-  const { layoutType, tagStyle, spuIds } = props.data;
+  const { layoutType, spuIds } = props.data;
   let { marginLeft, marginRight } = props.styles;
   const goodsList = ref([]);
   onMounted(async () => {
@@ -114,26 +114,6 @@
       goodsList.value = data;
     }
   });
-
-  // 商品字段配置，todo @owen 字段名称与服务端对齐，这里先转换，后期重构时再修改
-  const productFields = computed(()  => {
-    return {
-      title: props.data.fields.name,
-      subtitle: props.data.fields.introduction,
-      price: props.data.fields.price,
-      original_price: props.data.fields.marketPrice,
-      stock: props.data.fields.stock,
-      salesCount: props.data.fields.salesCount,
-    }
-  })
-
-  // 角标，todo @owen 规范命名，这里先转换，后期重构时再修改
-  const badge = computed(() => {
-    return {
-      show: props.data.badge.show,
-      src: props.data.badge.imgUrl,
-    }
-  })
 </script>
 
 <style lang="scss" scoped>

sheep/components/s-groupon-block/s-groupon-block.vue

@@ -2,13 +2,13 @@
 <template>
   <view>
     <view
-      v-if="mode === 1"
+      v-if="layoutType === 'threeCol'"
       class="goods-sm-box ss-flex ss-flex-wrap"
       :style="[{ margin: '-' + data.space + 'rpx' }]"
     >
       <view
-        v-for="item in goodsList"
-        :key="item.id"
+        v-for="product in productList"
+        :key="product.id"
         class="goods-card-box"
         :style="[
           {
@@ -19,15 +19,15 @@
         <s-goods-column
           class="goods-card"
           size="sm"
-          :goodsFields="goodsFields"
+          :goodsFields="data.fields"
           :tagStyle="tagStyle"
-          :data="item"
-          :titleColor="goodsFields.title?.color"
+          :data="product"
+          :titleColor="data.fields.name?.color"
           :topRadius="data.borderRadiusTop"
           :bottomRadius="data.borderRadiusBottom"
           @click="
             sheep.$router.go('/pages/goods/groupon', {
-              id: item.id,
+              id: product.id,
               activity_id: props.data.activityId,
             })
           "
@@ -35,33 +35,33 @@
       </view>
     </view>
     <!-- 样式2 一行一个 图片左 文案右 -->
-    <view class="goods-box" v-if="mode == 2">
+    <view class="goods-box" v-if="layoutType === 'oneCol'">
       <view
         class="goods-list"
-        v-for="(item, index) in goodsList"
+        v-for="(product, index) in productList"
         :key="index"
         :style="[{ marginBottom: space + 'px' }]"
       >
         <s-goods-column
           class="goods-card"
           size="lg"
-          :includes="goodsFields"
+          :goodsFields="data.fields"
           :tagStyle="tagStyle"
-          :data="item"
-          :titleColor="goodsFields.title?.color"
-          :subTitleColor="goodsFields.subtitle.color"
+          :data="product"
+          :titleColor="data.fields.name?.color"
+          :subTitleColor="data.fields.introduction?.color"
           :topRadius="data.borderRadiusTop"
           :bottomRadius="data.borderRadiusBottom"
           @click="
             sheep.$router.go('/pages/goods/groupon', {
-              id: item.id,
+              id: product.id,
               activity_id: props.data.activityId,
             })
           "
         >
           <template v-slot:cart>
             <button class="ss-reset-button cart-btn" :style="[buyStyle]">
-              {{ buyNowStyle.mode === 1 ? buyNowStyle.text : '' }}
+              {{ btnBuy?.type === 'text' ? btnBuy.text : '' }}
             </button>
           </template>
         </s-goods-column>
@@ -73,13 +73,11 @@
 <script setup>
   /**
    * 拼团
-   *
-   * @property {Array} list 											- 商品列表
-   *
-   *
    */
   import { computed, onMounted, ref } from 'vue';
   import sheep from '@/sheep';
+  import SpuApi from "@/sheep/api/product/spu";
+  import CombinationApi from "@/sheep/api/promotion/combination";
 
   // 接收参数
   const props = defineProps({
@@ -93,32 +91,34 @@
     },
   });
 
-  let { mode, tagStyle, buyNowStyle, goodsFields, space } = props.data;
+  let { layoutType, tagStyle, btnBuy, space } = props.data;
   let { marginLeft, marginRight } = props.styles;
 
   // 购买按钮样式
   const buyStyle = computed(() => {
-    let buyNowStyle = props.data.buyNowStyle;
-    if (buyNowStyle.mode == 1) {
+    let btnBuy = props.data.btnBuy;
+    if (btnBuy?.type === 'text') {
       return {
-        background: `linear-gradient(to right, ${buyNowStyle.color1}, ${buyNowStyle.color2})`,
+        background: `linear-gradient(to right, ${btnBuy.bgBeginColor}, ${btnBuy.bgEndColor})`,
       };
     }
 
-    if (buyNowStyle.mode == 2) {
+    if (btnBuy?.type === 'img') {
       return {
         width: '54rpx',
         height: '54rpx',
-        background: `url(${sheep.$url.cdn(buyNowStyle.src)}) no-repeat`,
+        background: `url(${sheep.$url.cdn(btnBuy.imgUrl)}) no-repeat`,
         backgroundSize: '100% 100%',
       };
     }
   });
 
-  const goodsList = ref([]);
+  const productList = ref([]);
   onMounted(async () => {
-    let { data } = await sheep.$api.goods.activity({ activity_id: props.data.activityId });
-    goodsList.value = data;
+    // todo：@owen 与Yudao结构不一致，待重构
+    const { data: activity } = await CombinationApi.getCombinationActivity(props.data.activityId);
+    const { data: spu } = await SpuApi.getSpuDetail(activity.spuId)
+    productList.value = [spu];
   });
 </script>
 

sheep/components/s-line-block/s-line-block.vue

@@ -1,12 +1,12 @@
 <template>
-  <su-subline :color="data.lineColor" :lineStyle="data.style"></su-subline>
+  <su-subline v-bind="data"></su-subline>
 </template>
 
 <script setup>
   const props = defineProps({
     data: {
       type: Object,
-      default() {},
+      default: {},
     },
   });
 </script>

sheep/components/s-richtext-block/s-richtext-block.vue

@@ -15,7 +15,7 @@
 </template>
 <script setup>
   import { reactive, onMounted } from 'vue';
-  import sheep from '@/sheep';
+  import ArticleApi from '@/sheep/api/promotion/article';
   const props = defineProps({
     data: {
       type: Object,
@@ -30,9 +30,7 @@
     content: '',
   });
   onMounted(async () => {
-    const { error, data } = await sheep.$api.data.richtext(props.data.id);
-    if (error === 0) {
-      state.content = data.content;
-    }
+    const { data } = await ArticleApi.getArticle(props.data.id);
+    state.content = data.content;
   });
 </script>

sheep/components/s-seckill-block/s-seckill-block.vue

@@ -1,14 +1,15 @@
 <!-- 装修组件 - 秒杀 -->
 <template>
   <view>
+    <!-- 样式一：三列 - 上图下文 -->
     <view
-      v-if="mode === 1"
+      v-if="layoutType === 'threeCol'"
       class="goods-sm-box ss-flex ss-flex-wrap"
       :style="[{ margin: '-' + data.space + 'rpx' }]"
     >
       <view
-        v-for="item in goodsList"
-        :key="item.id"
+        v-for="product in productList"
+        :key="product.id"
         class="goods-card-box"
         :style="[
           {
@@ -19,49 +20,49 @@
         <s-goods-column
           class="goods-card"
           size="sm"
-          :goodsFields="goodsFields"
+          :goodsFields="data.fields"
           :tagStyle="tagStyle"
-          :data="item"
-          :titleColor="goodsFields.title?.color"
+          :data="product"
+          :titleColor="data.fields.name?.color"
           :topRadius="data.borderRadiusTop"
           :bottomRadius="data.borderRadiusBottom"
           @click="
             sheep.$router.go('/pages/goods/seckill', {
-              id: item.id,
+              id: product.id,
               activity_id: props.data.activityId,
             })
           "
         ></s-goods-column>
       </view>
     </view>
-    <!-- 样式2 -->
-    <view class="goods-box" v-if="mode == 2">
+    <!-- 样式二：一列 - 左图右文 -->
+    <view class="goods-box" v-if="layoutType === 'oneCol'">
       <view
         class="goods-list"
-        v-for="(item, index) in goodsList"
+        v-for="(product, index) in productList"
         :key="index"
         :style="[{ marginBottom: space + 'px' }]"
       >
         <s-goods-column
           class="goods-card"
           size="lg"
-          :includes="goodsFields"
+          :goodsFields="data.fields"
           :tagStyle="tagStyle"
-          :data="item"
-          :titleColor="goodsFields.title?.color"
-          :subTitleColor="goodsFields.subtitle.color"
+          :data="product"
+          :titleColor="data.fields.name?.color"
+          :subTitleColor="data.fields.introduction?.color"
           :topRadius="data.borderRadiusTop"
           :bottomRadius="data.borderRadiusBottom"
           @click="
             sheep.$router.go('/pages/goods/seckill', {
-              id: item.id,
+              id: product.id,
               activity_id: props.data.activityId,
             })
           "
         >
           <template v-slot:cart>
             <button class="ss-reset-button cart-btn" :style="[buyStyle]">
-              {{ buyNowStyle.mode === 1 ? buyNowStyle.text : '' }}
+              {{ btnBuy?.type === 'text' ? btnBuy.text : '' }}
             </button>
           </template>
         </s-goods-column>
@@ -72,14 +73,14 @@
 
 <script setup>
   /**
-   * 秒杀
-   *
-   * @property {Array} list 											- 商品列表
-   *
+   * 秒杀商品列表
    *
+   * @property {Array} list 商品列表
    */
   import { computed, onMounted, ref } from 'vue';
   import sheep from '@/sheep';
+  import SeckillApi from "@/sheep/api/promotion/seckill";
+  import SpuApi from "@/sheep/api/product/spu";
 
   // 接收参数
   const props = defineProps({
@@ -93,32 +94,35 @@
     },
   });
 
-  let { mode, tagStyle, buyNowStyle, goodsFields, space } = props.data;
+  let { layoutType, tagStyle, btnBuy, space } = props.data;
   let { marginLeft, marginRight } = props.styles;
 
   // 购买按钮样式
   const buyStyle = computed(() => {
-    let buyNowStyle = props.data.buyNowStyle;
-    if (buyNowStyle.mode == 1) {
+    let btnBuy = props.data.btnBuy;
+    if (btnBuy?.type === 'text') {
       return {
-        background: `linear-gradient(to right, ${buyNowStyle.color1}, ${buyNowStyle.color2})`,
+        background: `linear-gradient(to right, ${btnBuy.bgBeginColor}, ${btnBuy.bgEndColor})`,
       };
     }
-
-    if (buyNowStyle.mode == 2) {
+    if (btnBuy?.type === 'img') {
       return {
         width: '54rpx',
         height: '54rpx',
-        background: `url(${sheep.$url.cdn(buyNowStyle.src)}) no-repeat`,
+        background: `url(${sheep.$url.cdn(btnBuy.imgUrl)}) no-repeat`,
         backgroundSize: '100% 100%',
       };
     }
   });
 
-  const goodsList = ref([]);
+  // 商品列表
+  const productList = ref([]);
+  // 查询秒杀活动商品
   onMounted(async () => {
-    let { data } = await sheep.$api.goods.activity({ activity_id: props.data.activityId });
-    goodsList.value = data;
+    // todo：@owen 与Yudao结构不一致，待重构
+    const { data: activity } = await SeckillApi.getSeckillActivity(props.data.activityId);
+    const { data: spu } = await SpuApi.getSpuDetail(activity.spuId)
+    productList.value = [spu];
   });
 </script>
 

sheep/components/s-wallet-card/s-wallet-card.vue

@@ -5,7 +5,7 @@
       @tap="sheep.$router.go('/pages/user/wallet/money')"
     >
       <view class="value-box ss-flex ss-col-bottom">
-        <view class="value-text ss-line-1">{{ userInfo.money }}</view>
+        <view class="value-text ss-line-1">{{ userInfo.money || '0.00' }}</view>
         <view class="unit-text ss-m-l-6">元</view>
       </view>
       <view class="menu-title ss-m-t-28">账户余额</view>
@@ -23,7 +23,7 @@
       @tap="sheep.$router.go('/pages/user/wallet/score')"
     >
       <view class="value-box ss-flex ss-col-bottom">
-        <view class="value-text">{{ userInfo.score }}</view>
+        <view class="value-text">{{ userInfo.score || 0 }}</view>
         <view class="unit-text ss-m-l-6">个</view>
       </view>
       <view class="menu-title ss-m-t-28">积分</view>
@@ -37,7 +37,7 @@
       "
     >
       <view class="value-box ss-flex ss-col-bottom">
-        <view class="value-text">{{ numData.coupons_num }}</view>
+        <view class="value-text">{{ numData.coupons_num || 0 }}</view>
         <view class="unit-text ss-m-l-6">张</view>
       </view>
       <view class="menu-title ss-m-t-28">优惠券</view>

sheep/hooks/useGoods.js

@@ -2,49 +2,60 @@ import { ref } from 'vue';
 import dayjs from 'dayjs';
 import $url from '@/sheep/url';
 
-// 格式化销量
+/**
+ * 格式化销量
+ * @param {'exact' | string} type 格式类型：exact=精确值，其它=大致数量
+ * @param {number} num 销量
+ * @return {string} 格式化后的销量字符串
+ */
 export function formatSales(type, num) {
-  num = num + '';
-  if (type === 'exact') {
-    return '已售' + num;
-  } else {
-    if (num < 10) {
-      return '销量≤10';
-    } else {
-      let a = Math.pow(10, num.length - 1);
-      return '已售' + parseInt(num / a) * a + '+';
-    }
-  }
+  let prefix = type!=='exact' && num<10 ? '销量': '已售';
+  return formatNum(prefix, type, num)
 }
 
-// 格式化兑换量
+/**
+ * 格式化兑换量
+ * @param {'exact' | string} type 格式类型：exact=精确值，其它=大致数量
+ * @param {number} num 销量
+ * @return {string} 格式化后的销量字符串
+ */
 export function formatExchange(type, num) {
-  num = num + '';
-  if (type === 'exact') {
-    return '已兑换' + num;
-  } else {
-    if (num < 10) {
-      return '已兑换≤10';
-    } else {
-      let a = Math.pow(10, num.length - 1);
-      return '已兑换' + parseInt(num / a) * a + '+';
-    }
-  }
+  return formatNum('已兑换', type, num)
 }
 
-// 格式化库存
+
+/**
+ * 格式化库存
+ * @param {'exact' | any} type 格式类型：exact=精确值，其它=大致数量
+ * @param {number} num 销量
+ * @return {string} 格式化后的销量字符串
+ */
 export function formatStock(type, num) {
-  num = num + '';
+  return formatNum('库存', type, num)
+}
+
+/**
+ * 格式化数字
+ * @param {string} prefix 前缀
+ * @param {'exact' | string} type 格式类型：exact=精确值，其它=大致数量
+ * @param {number} num 销量
+ * @return {string} 格式化后的销量字符串
+ */
+export function formatNum(prefix, type, num) {
+  num = (num || 0);
+  // 情况一：精确数值
   if (type === 'exact') {
-    return '库存' + num;
-  } else {
-    if (num < 10) {
-      return '库存≤10';
-    } else {
-      let a = Math.pow(10, num.length - 1);
-      return '库存 ' + parseInt(num / a) * a + '+';
-    }
+    return prefix + num;
+  }
+  // 情况二：小于等于 10
+  if (num < 10) {
+    return `${prefix}≤10`;
   }
+  // 情况三：大于 10，除第一位外，其它位都显示为0
+  // 例如：100  - 199  显示为 100+
+  //      9000 - 9999 显示为 9000+
+  let pow = Math.pow(10, `${num}`.length - 1);
+  return `${prefix}${(num / pow) * pow}+`;
 }
 
 // 格式化价格
@@ -52,49 +63,54 @@ export function formatPrice(e) {
   return e.length === 1 ? e[0] : e.join('~');
 }
 
-// 格式化商品轮播
-export function formatGoodsSwiper(list) {
-  let swiper = [];
-  list.forEach((item, key) => {
-    if (item.indexOf('.avi') !== -1 || item.indexOf('.mp4') !== -1) {
-      swiper.push({
-        src: $url.cdn(item),
-        type: 'video',
-      });
-    } else {
-      swiper.push({
-        src: $url.cdn(item),
-        type: 'image',
-      });
-    }
+// 视频格式后缀列表
+const VIDEO_SUFFIX_LIST = ['.avi', '.mp4']
+/**
+ * 转换商品轮播的链接列表：根据链接的后缀，判断是视频链接还是图片链接
+ *
+ * @param {string[]} urlList 链接列表
+ * @return {{src: string, type: 'video' | 'image' }[]}  转换后的链接列表
+ */
+export function formatGoodsSwiper(urlList) {
+  return urlList.map((url, key) => {
+    const isVideo = VIDEO_SUFFIX_LIST.some(suffix => url.includes(suffix));
+    const type = isVideo ? 'video' :'image'
+    const src = $url.cdn(url);
+    return { type, src }
   });
-  return swiper;
 }
 
+/**
+ * 格式化订单状态的颜色
+ * @param type 订单类型
+ * @return {string} 颜色的 class 名称
+ */
 export function formatOrderColor(type) {
-  if (
-    type === 'apply_refund' ||
-    type === 'groupon_ing' ||
-    type === 'nocomment' ||
-    type === 'noget' ||
-    type === 'nosend'
-  ) {
-    return 'warning-color';
-  } else if (
-    type === 'closed' ||
-    type === 'groupon_invalid' ||
-    type === 'cancel' ||
-    type === 'refund_agree'
-  ) {
-    return 'danger-color';
-  } else if (type === 'completed') {
-    return 'success-color';
-  } else if (type === 'unpaid') {
-    return 'info-color';
+  switch (type) {
+    case 'apply_refund':
+    case 'groupon_ing':
+    case 'nocomment':
+    case 'noget':
+    case 'nosend':
+      return 'warning-color';
+    case 'closed':
+    case 'groupon_invalid':
+    case 'cancel':
+    case 'refund_agree':
+      return 'danger-color';
+    case 'completed':
+      return 'success-color';
+    case 'unpaid':
+      return 'info-color';
   }
 }
 
-// 计算相隔时间
+/**
+ * 倒计时
+ * @param toTime   截止时间
+ * @param fromTime 起始时间，默认当前时间
+ * @return {{s: string, ms: number, h: string, m: string}} 持续时间
+ */
 export function useDurationTime(toTime, fromTime = '') {
   toTime = getDayjsTime(toTime);
   if (fromTime === '') {
@@ -120,6 +136,11 @@ export function useDurationTime(toTime, fromTime = '') {
   };
 }
 
+/**
+ * 转换为 Dayjs
+ * @param {any} time 时间
+ * @return {dayjs.Dayjs}
+ */
 function getDayjsTime(time) {
   time = time.toString();
   if (time.indexOf('-') > 0) {
@@ -131,7 +152,7 @@ function getDayjsTime(time) {
     return dayjs(parseInt(time));
   }
   if (time.length === 10) {
-    // 'unixtime'
+    // 'unixTime'
     return dayjs.unix(parseInt(time));
   }
 }

sheep/store/app.js

@@ -110,7 +110,7 @@ const adaptTemplate = async (appTemplate) => {
     }
   }
   appTemplate.home = diyTemplate?.data?.home;
-  // appTemplate.user = diyTemplate?.data?.user;
+  appTemplate.user = diyTemplate?.data?.user;
 }
 
 export default app;

sheep/ui/su-subline/su-subline.vue

@@ -1,42 +1,62 @@
 <template>
-  <view class="ui-subline-wrap" :style="[elStyle]"></view>
+  <view class="wrap" :style="{height: `${height}px`}">
+    <view class="divider" :style="[elStyle]"></view>
+  </view>
 </template>
 
 <script setup>
   /**
-   * 辅助线
-   *
-   * @property {String} width = ['thin', 'medium', 'thick', '10px']				- 线条宽度
-   * @property {String} color = #000 												- 线条颜色
-   * @property {String} style = ['dotted', 'solid', 'double', 'dashed']			- 线条样式,圆点，实线，双线，虚线
-   *
+   * 分割线
    */
 
   import { computed } from 'vue';
 
   // 接收参数
   const props = defineProps({
-    color: {
+    // 线条颜色
+    lineColor: {
       type: String,
       default: '#000',
     },
-    lineStyle: {
+    // 线条样式：'dotted', 'solid', 'double', 'dashed'
+    borderType: {
       type: String,
       default: 'dashed',
     },
-    width: {
-      type: String,
-      default: 'thin',
+    // 线条宽度
+    lineWidth: {
+      type: Number,
+      default: 1,
+    },
+    // 高度
+    height: {
+      type: [Number, String],
+      default: 'auto'
     },
+    // 左右边距：none - 无边距，horizontal - 左右留边
+    paddingType: {
+      type: String,
+      default: 'none'
+    }
   });
 
   const elStyle = computed(() => {
     return {
-      'border-top-width': props.width,
-      'border-top-color': props.color,
-      'border-top-style': props.lineStyle,
+      'border-top-width': `${props.lineWidth}px`,
+      'border-top-color': props.lineColor,
+      'border-top-style': props.borderType,
+      margin: props.paddingType === 'none' ? '0' : '0px 16px'
     };
   });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.wrap {
+  display: flex;
+  align-items: center;
+
+  .divider {
+    width: 100%;
+  }
+}
+</style>