Forráskód Böngészése

feat:添加发货内容详情,优化积分商城接口,取消订单添加确认框,物流追踪样式修改,收银台页面优化,添加小程序直播组件

kele 2 éve
szülő
commit
8eb4e4609d

+ 10 - 0
pages.json

@@ -209,6 +209,16 @@
             "title": "发票详情"
           }
         },
+        {
+          "path": "dispatch/content",
+          "style": {
+            "navigationBarTitleText": "发货内容"
+          },
+          "meta": {
+            "auth": true,
+            "title": "发货内容"
+          }
+        },
         {
           "path": "aftersale/apply",
           "style": {

+ 1 - 1
pages/app/score-shop.vue

@@ -43,7 +43,7 @@
   });
   async function getData(page = 1, list_rows = 5) {
     state.loadStatus = 'loading';
-    let res = await sheep.$api.app.scoreShop({
+    let res = await sheep.$api.app.scoreShop.list({
       list_rows,
       page,
     });

+ 9 - 0
pages/goods/list.vue

@@ -208,6 +208,8 @@
     state.leftGoodsList = [];
     state.rightGoodsList = [];
     count = 0;
+    leftHeight = 0;
+    rightHeight = 0;
   }
   //搜索
   function onSearch(e) {
@@ -237,6 +239,13 @@
 
   // 点击筛选项
   const onFilterItem = (val) => {
+    if (
+      state.currentSort === state.tabList[0].list[val].sort &&
+      state.currentOrder === state.tabList[0].list[val].order
+    ) {
+      state.showFilter = false;
+      return;
+    }
     state.curFilter = val;
     state.tabList[0].name = state.tabList[0].list[val].label;
     state.currentSort = state.tabList[0].list[val].sort;

+ 1 - 1
pages/goods/score.vue

@@ -184,7 +184,7 @@
     }
     state.goodsId = options.id;
     // 加载商品信息
-    sheep.$api.app.scoreShopDetail(state.goodsId).then((res) => {
+    sheep.$api.app.scoreShop.detail(state.goodsId).then((res) => {
       state.skeletonLoading = false;
       if (res.error === 0) {
         state.goodsInfo = res.data;

+ 101 - 21
pages/order/detail.vue

@@ -76,10 +76,68 @@
               <view class="order-item ss-flex ss-col-center ss-row-between ss-p-x-20 bg-white">
                 <view class="item-title">配送方式</view>
                 <view class="ss-flex ss-col-center">
-                  <text class="item-value">{{ item.dispatch_type_text }}</text>
+                  <text class="item-value ss-m-r-20">{{ item.dispatch_type_text }}</text>
+                  <button
+                    class="ss-reset-button copy-btn"
+                    @tap="onDetail(item)"
+                    v-if="
+                      (item.dispatch_type === 'autosend' || item.dispatch_type === 'custom') &&
+                      item.dispatch_status !== 0
+                    "
+                    >详情</button
+                  >
                 </view>
               </view>
             </template>
+            <template #tool>
+              <view class="ss-flex">
+                <button
+                  class="ss-reset-button apply-btn"
+                  v-if="item.btns.includes('aftersale')"
+                  @tap.stop="
+                    sheep.$router.go('/pages/order/aftersale/apply', {
+                      item: JSON.stringify(item),
+                    })
+                  "
+                >
+                  申请售后
+                </button>
+                <button
+                  class="ss-reset-button apply-btn"
+                  v-if="item.btns.includes('re_aftersale')"
+                  @tap.stop="
+                    sheep.$router.go('/pages/order/aftersale/apply', {
+                      item: JSON.stringify(item),
+                    })
+                  "
+                >
+                  重新售后
+                </button>
+
+                <button
+                  class="ss-reset-button apply-btn"
+                  v-if="item.btns.includes('aftersale_info')"
+                  @tap.stop="
+                    sheep.$router.go('/pages/order/aftersale/detail', {
+                      id: item.ext.aftersale_id,
+                    })
+                  "
+                >
+                  售后详情
+                </button>
+                <button
+                  class="ss-reset-button apply-btn"
+                  v-if="item.btns.includes('buy_again')"
+                  @tap.stop="
+                    sheep.$router.go('/pages/goods/index', {
+                      id: item.goods_id,
+                    })
+                  "
+                >
+                  再次购买
+                </button>
+              </view>
+            </template>
             <template #priceSuffix>
               <button class="ss-reset-button tag-btn" v-if="item.status_text">
                 {{ item.status_text }}
@@ -148,7 +206,7 @@
       </view>
       <view class="notice-item all-rpice-item ss-flex ss-m-t-20">
         <text class="title">{{
-          ['unpaid', 'cancel', 'closed','pending'].includes(state.orderInfo.status) ? '需付款' : '已付款'
+          ['paid', 'completed'].includes(state.orderInfo.status) ? '已付款' : '需付款'
         }}</text>
         <text class="detail all-price" v-if="Number(state.orderInfo.pay_fee) > 0"
           >¥{{ state.orderInfo.pay_fee }}</text
@@ -157,7 +215,7 @@
           v-if="
             state.orderInfo.score_amount &&
             Number(state.orderInfo.pay_fee) > 0 &&
-            !['unpaid', 'cancel', 'closed'].includes(state.orderInfo.status)
+            ['paid', 'completed'].includes(state.orderInfo.status)
           "
           class="detail all-price"
           >+</view
@@ -165,8 +223,7 @@
         <view
           class="price-text ss-flex ss-col-center"
           v-if="
-            state.orderInfo.score_amount &&
-            !['unpaid', 'cancel', 'closed'].includes(state.orderInfo.status)
+            state.orderInfo.score_amount && ['paid', 'completed'].includes(state.orderInfo.status)
           "
         >
           <image
@@ -296,10 +353,18 @@
 
   // 取消订单
   async function onCancel(orderId) {
-    const { error, data } = await sheep.$api.order.cancel(orderId);
-    if (error === 0) {
-      getOrderDetail(data.order_sn);
-    }
+    uni.showModal({
+      title: '提示',
+      content: '确定要取消订单吗?',
+      success: async function (res) {
+        if (res.confirm) {
+          const { error, data } = await sheep.$api.order.cancel(orderId);
+          if (error === 0) {
+            getOrderDetail(data.order_sn);
+          }
+        }
+      },
+    });
   }
 
   // 申请退款
@@ -340,6 +405,14 @@
     });
   }
 
+  // 配送方式详情
+  function onDetail(item) {
+    sheep.$router.go('/pages/order/dispatch/content', {
+      id: item.order_id,
+      item_id: item.id,
+    });
+  }
+
   // 评价
   function onComment(orderSN) {
     uni.$once('SELECT_INVOICE', (e) => {
@@ -376,6 +449,15 @@
     height: 36rpx;
     margin: 0 4rpx;
   }
+  .apply-btn {
+    width: 140rpx;
+    height: 50rpx;
+    border-radius: 25rpx;
+    font-size: 24rpx;
+    border: 2rpx solid #dcdcdc;
+    line-height: normal;
+    margin-left: 16rpx;
+  }
   .state-box {
     color: rgba(#fff, 0.9);
     width: 100%;
@@ -419,7 +501,6 @@
     .order-list {
       margin-bottom: 20rpx;
       background-color: #fff;
-      padding: 0 20rpx;
 
       .order-card {
         padding: 20rpx 0;
@@ -496,19 +577,18 @@
         color: #333;
         flex: 1;
       }
-
-      .copy-btn {
-        width: 100rpx;
-        line-height: 50rpx;
-        border-radius: 25rpx;
-        padding: 0;
-        background: rgba(238, 238, 238, 1);
-        font-size: 22rpx;
-        font-weight: 400;
-        color: rgba(51, 51, 51, 1);
-      }
     }
   }
+  .copy-btn {
+    width: 100rpx;
+    line-height: 50rpx;
+    border-radius: 25rpx;
+    padding: 0;
+    background: rgba(238, 238, 238, 1);
+    font-size: 22rpx;
+    font-weight: 400;
+    color: rgba(51, 51, 51, 1);
+  }
 
   // 订单价格信息
   .order-price-box {

+ 87 - 0
pages/order/dispatch/content.vue

@@ -0,0 +1,87 @@
+<template>
+  <s-layout title="发货内容">
+    <view class="order-card ss-m-x-20 ss-r-20">
+      <s-goods-item
+        :img="state.data.goods_image"
+        :title="state.data.goods_title"
+        :skuText="state.data.goods_sku_text"
+        :price="state.data.goods_price"
+        :num="state.data.goods_num"
+        radius="20"
+      >
+        <template #priceSuffix>
+          <button class="ss-reset-button tag-btn" v-if="state.data.status_text">
+            {{ state.data.status_text }}
+          </button>
+        </template>
+      </s-goods-item>
+    </view>
+    <view class="bg-white ss-p-20 ss-m-x-20 ss-r-20">
+      <view class="title ss-m-b-26">发货信息</view>
+      <view v-if="state.data.ext?.dispatch_content_type === 'params'">
+        <view class="desc ss-m-b-20" v-for="item in state.data.ext.dispatch_content" :key="item">
+          {{ item.title }}: {{ item.content }}
+        </view>
+      </view>
+      <view class="desc" v-else>{{ state.data.ext?.dispatch_content }}</view>
+    </view>
+  </s-layout>
+</template>
+<script setup>
+  import { onLoad } from '@dcloudio/uni-app';
+  import { reactive } from 'vue';
+  import sheep from '@/sheep';
+
+  const state = reactive({
+    data: [],
+  });
+  async function getDetail(id, item_id) {
+    const { error, data } = await sheep.$api.order.itemDetail({
+      id: id,
+      item_id: item_id,
+    });
+    if (error === 0) {
+      state.data = data;
+    }
+  }
+  onLoad(async (options) => {
+    getDetail(options.id, options.item_id);
+  });
+</script>
+<style lang="scss" scoped>
+  .order-card {
+    padding: 20rpx 0;
+
+    .order-sku {
+      font-size: 24rpx;
+
+      font-weight: 400;
+      color: rgba(153, 153, 153, 1);
+      width: 450rpx;
+      margin-bottom: 20rpx;
+
+      .order-num {
+        margin-right: 10rpx;
+      }
+    }
+    .tag-btn {
+      margin-left: 16rpx;
+      font-size: 24rpx;
+      height: 36rpx;
+      color: var(--ui-BG-Main);
+      border: 2rpx solid var(--ui-BG-Main);
+      border-radius: 14rpx;
+      padding: 0 4rpx;
+    }
+  }
+  .title {
+    font-size: 28rpx;
+    font-weight: bold;
+    color: #333333;
+  }
+  .desc {
+    font-size: 26rpx;
+    font-weight: 400;
+    color: #333333;
+  }
+</style>

+ 2 - 2
pages/order/express/log.vue

@@ -2,7 +2,7 @@
 <template>
   <s-layout title="物流追踪">
     <view class="log-wrap">
-      <view class="log-card ss-flex" v-if="goodsImages.length > 0">
+      <view class="log-card ss-flex ss-m-20 ss-r-10" v-if="goodsImages.length > 0">
         <uni-swiper-dot :info="goodsImages" :current="state.current" mode="round">
           <swiper class="swiper-box" @change="change">
             <swiper-item v-for="(item, index) in goodsImages" :key="index">
@@ -20,7 +20,7 @@
           <view>快递公司:{{ state.info.express_name }}</view>
         </view>
       </view>
-      <view class="log-content">
+      <view class="log-content ss-m-20 ss-r-10">
         <view
           class="log-content-box ss-flex"
           v-for="(item, index) in state.info.logs"

+ 20 - 12
pages/order/list.vue

@@ -287,7 +287,7 @@
   function onTabsChange(e) {
     if (state.currentTab === e.index) return;
 
-    state.pagination = pagination
+    state.pagination = pagination;
     state.currentTab = e.index;
 
     getOrderList();
@@ -354,11 +354,19 @@
 
   // 取消订单
   async function onCancel(orderId) {
-    const { error, data } = await sheep.$api.order.cancel(orderId);
-    if (error === 0) {
-      let index = state.pagination.data.findIndex((order) => order.id === orderId);
-      state.pagination.data[index] = data;
-    }
+    uni.showModal({
+      title: '提示',
+      content: '确定要取消订单吗?',
+      success: async function (res) {
+        if (res.confirm) {
+          const { error, data } = await sheep.$api.order.cancel(orderId);
+          if (error === 0) {
+            let index = state.pagination.data.findIndex((order) => order.id === orderId);
+            state.pagination.data[index] = data;
+          }
+        }
+      },
+    });
   }
 
   // 删除订单
@@ -408,11 +416,11 @@
     });
     state.error = res.error;
     if (res.error === 0) {
-        let orderList = _.concat(state.pagination.data, res.data.data);
-        state.pagination = {
-          ...res.data,
-          data: orderList,
-        };
+      let orderList = _.concat(state.pagination.data, res.data.data);
+      state.pagination = {
+        ...res.data,
+        data: orderList,
+      };
 
       if (state.pagination.current_page < state.pagination.last_page) {
         state.loadStatus = 'more';
@@ -443,7 +451,7 @@
 
   //下拉刷新
   onPullDownRefresh(() => {
-    state.pagination = pagination
+    state.pagination = pagination;
     getOrderList();
     setTimeout(function () {
       uni.stopPullDownRefresh();

+ 20 - 3
pages/pay/index.vue

@@ -14,12 +14,12 @@
       <view class="modal-content ss-flex-1">
         <view class="pay-title ss-p-l-30 ss-m-y-30">选择支付方式</view>
         <view
-          class="pay-type-item border-bottom"
+          class="pay-type-item"
           v-for="item in state.payMethods"
           :key="item.title"
         >
           <view
-            class="pay-item ss-flex ss-col-center ss-row-between ss-p-x-30"
+            class="pay-item ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom"
             :class="{ 'disabled-pay-item': item.disabled }"
             v-if="
               allowedPayment.includes(item.value) &&
@@ -46,10 +46,17 @@
               <view class="userInfo-money ss-m-r-10" v-if="item.value == 'money'">
                 余额: {{ userInfo.money }}元
               </view>
+              <view
+                class="userInfo-money ss-m-r-10"
+                v-if="item.value == 'offline' && item.disabled"
+              >
+                部分商品不支持
+              </view>
               <radio
                 :value="item.value"
                 color="var(--ui-BG-Main)"
                 style="transform: scale(0.8)"
+                :disabled="item.disabled"
                 :checked="state.payment === item.value"
               />
             </view>
@@ -121,7 +128,7 @@
     },
     {
       icon: '/assets/addons/shopro/frontend_img/pay/cod.png',
-      title: '线下支付',
+      title: '货到付款',
       value: 'offline',
       disabled: false,
     },
@@ -142,6 +149,16 @@
           }
         },
       });
+    } else if (state.payment === 'offline') {
+      uni.showModal({
+        title: '提示',
+        content: '确定要下单吗?',
+        success: function (res) {
+          if (res.confirm) {
+            sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.order_sn);
+          }
+        },
+      });
     } else {
       sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.order_sn);
     }

+ 31 - 17
sheep/api/app.js

@@ -52,23 +52,37 @@ export default {
       method: 'GET',
     }),
   //积分商城
-  scoreShop: (params) =>
-    request({
-      url: 'app/scoreShop',
-      method: 'GET',
-      params,
-    }),
-  scoreShopIds: (params = {}) =>
-    request({
-      url: 'app/scoreShop/ids',
-      method: 'GET',
-      params,
-    }),
-  scoreShopDetail: (id) =>
-    request({
-      url: 'app/scoreShop/' + id,
-      method: 'GET',
-    }),
+  scoreShop: {
+    list: (params) =>
+      request({
+        url: 'app/scoreShop',
+        method: 'GET',
+        params,
+      }),
+    ids: (params = {}) =>
+      request({
+        url: 'app/scoreShop/ids',
+        method: 'GET',
+        params,
+      }),
+    detail: (id) =>
+      request({
+        url: 'app/scoreShop/' + id,
+        method: 'GET',
+      }),
+  },
+  //小程序直播
+  mplive: {
+    getRoomList: (ids) =>
+      request({
+        url: 'app/mplive/getRoomList',
+        method: 'GET',
+        params: {
+          ids: ids.join(','),
+        }
+      }),
+  },
+
   //上传
   upload: (file, group = 'ugc', callback) => {
     const token = uni.getStorageSync('token');

+ 9 - 0
sheep/api/order.js

@@ -22,6 +22,15 @@ export default {
         showLoading: false,
       },
     }),
+  itemDetail: (params) =>
+    request({
+      url: 'order/order/itemDetail',
+      method: 'GET',
+      params,
+      custom: {
+        showLoading: false,
+      },
+    }),
   // 订单列表
   list: (params) =>
     request({

+ 1 - 0
sheep/components/s-block-item/s-block-item.vue

@@ -23,6 +23,7 @@
     <s-score-block v-if="type === 'scoreGoods'" :data="data" :styles="styles" />
     <s-goods-shelves v-if="type === 'goodsShelves'" :data="data" :styles="styles" />
     <s-coupon-block v-if="type === 'coupon'" :data="data" :styles="styles"></s-coupon-block>
+    <s-live-block v-if="type === 'mplive'" :data="data" :styles="styles"></s-live-block>
     <s-seckill-block v-if="type === 'seckill'" :data="data" :styles="styles"></s-seckill-block>
     <s-groupon-block v-if="type === 'groupon'" :data="data" :styles="styles"></s-groupon-block>
     <s-richtext-block v-if="type === 'richtext'" :data="data" :styles="styles"></s-richtext-block>

+ 40 - 38
sheep/components/s-goods-item/s-goods-item.vue

@@ -1,49 +1,51 @@
 <template>
   <view>
-    <slot name="top"></slot>
-  </view>
-  <view
-    class="ss-order-card-warp ss-flex ss-col-stretch ss-row-between bg-white"
-    :style="[{ borderRadius: radius + 'rpx', marginBottom: marginBottom + 'rpx' }]"
-  >
-    <view class="img-box ss-m-r-24">
-      <image class="order-img" :src="sheep.$url.cdn(img)" mode="aspectFill"></image>
+    <view>
+      <slot name="top"></slot>
     </view>
     <view
-      class="box-right ss-flex-col ss-row-between"
-      :style="[{ width: titleWidth ? titleWidth + 'rpx' : '' }]"
+      class="ss-order-card-warp ss-flex ss-col-stretch ss-row-between bg-white"
+      :style="[{ borderRadius: radius + 'rpx', marginBottom: marginBottom + 'rpx' }]"
     >
-      <view class="title-text ss-line-2" v-if="title">{{ title }}</view>
-      <view v-if="skuString" class="spec-text ss-m-t-8 ss-m-b-12">{{ skuString }}</view>
-      <view class="groupon-box">
-        <slot name="groupon"></slot>
+      <view class="img-box ss-m-r-24">
+        <image class="order-img" :src="sheep.$url.cdn(img)" mode="aspectFill"></image>
       </view>
-      <view class="ss-flex">
-        <view class="ss-flex ss-col-center">
-          <view
-            class="price-text ss-flex ss-col-center"
-            :style="[{ color: priceColor }]"
-            v-if="price && Number(price) > 0"
-          >
-            ¥{{ price }}
-          </view>
-          <view v-if="score && Number(price) > 0">+</view>
-          <view class="price-text ss-flex ss-col-center" v-if="score">
-            <image
-              :src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
-              class="score-img"
-            ></image>
-            <view>{{ score }}</view>
+      <view
+        class="box-right ss-flex-col ss-row-between"
+        :style="[{ width: titleWidth ? titleWidth + 'rpx' : '' }]"
+      >
+        <view class="title-text ss-line-2" v-if="title">{{ title }}</view>
+        <view v-if="skuString" class="spec-text ss-m-t-8 ss-m-b-12">{{ skuString }}</view>
+        <view class="groupon-box">
+          <slot name="groupon"></slot>
+        </view>
+        <view class="ss-flex">
+          <view class="ss-flex ss-col-center">
+            <view
+              class="price-text ss-flex ss-col-center"
+              :style="[{ color: priceColor }]"
+              v-if="price && Number(price) > 0"
+            >
+              ¥{{ price }}
+            </view>
+            <view v-if="score && Number(price) > 0">+</view>
+            <view class="price-text ss-flex ss-col-center" v-if="score">
+              <image
+                :src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
+                class="score-img"
+              ></image>
+              <view>{{ score }}</view>
+            </view>
+            <view v-if="num" class="total-text ss-flex ss-col-center">x {{ num }}</view>
+            <slot name="priceSuffix"></slot>
           </view>
-          <view v-if="num" class="total-text ss-flex ss-col-center">x {{ num }}</view>
-          <slot name="priceSuffix"></slot>
         </view>
-      </view>
-      <view class="tool-box">
-        <slot name="tool"></slot>
-      </view>
-      <view>
-        <slot name="rightBottom"></slot>
+        <view class="tool-box">
+          <slot name="tool"></slot>
+        </view>
+        <view>
+          <slot name="rightBottom"></slot>
+        </view>
       </view>
     </view>
   </view>

+ 111 - 0
sheep/components/s-live-block/s-live-block.vue

@@ -0,0 +1,111 @@
+<template>
+  <view>
+    <view
+      v-if="mode === 2 && state.liveList.length"
+      class="goods-md-wrap ss-flex ss-flex-wrap ss-col-top"
+      :style="[{ margin: '-' + data.space + 'rpx' }]"
+    >
+      <view
+        :style="[
+          {
+            padding: data.space + 'rpx',
+          },
+        ]"
+        class="goods-list-box"
+        v-for="item in state.liveList"
+        :key="item.id"
+      >
+        <s-live-card
+          class="goods-md-box"
+          size="md"
+          :goodsFields="goodsFields"
+          :data="item"
+          :titleColor="goodsFields.name?.color"
+          :subTitleColor="goodsFields.anchor_name?.color"
+          :topRadius="data.borderRadiusTop"
+          :bottomRadius="data.borderRadiusBottom"
+          @click="goRoom(item.roomid)"
+        >
+        </s-live-card>
+      </view>
+    </view>
+    <view v-if="mode === 1 && state.liveList.length" class="goods-lg-box">
+      <view
+        class="goods-box"
+        :style="[{ marginBottom: data.space + 'px' }]"
+        v-for="item in state.liveList"
+        :key="item.id"
+      >
+        <s-live-card
+          class="goods-card"
+          size="sl"
+          :goodsFields="goodsFields"
+          :data="item"
+          :titleColor="goodsFields.name?.color"
+          :subTitleColor="goodsFields.anchor_name.color"
+          :topRadius="data.borderRadiusTop"
+          :bottomRadius="data.borderRadiusBottom"
+          @tap="goRoom(item.roomid)"
+        >
+        </s-live-card>
+      </view>
+    </view>
+  </view>
+</template>
+<script setup>
+  import { reactive, onMounted } from 'vue';
+  import sheep from '@/sheep';
+
+  const state = reactive({
+    liveList: [],
+  });
+  const props = defineProps({
+    data: {
+      type: Object,
+      default() {},
+    },
+    styles: {
+      type: Object,
+      default() {},
+    },
+  });
+  const { mode, goodsFields, mpliveIds } = props.data ?? {};
+  const { marginLeft, marginRight } = props.styles ?? {};
+
+  async function getLiveListByIds(ids) {
+    let { data } = await sheep.$api.app.mplive.getRoomList(ids);
+    return data;
+  }
+  function goRoom(id) {
+    // wx.navigateTo({
+    //   url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${id}&custom_params=${customParams}`,
+    // });
+    wx.navigateTo({
+      url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${id}`,
+    });
+  }
+
+  onMounted(async () => {
+    state.liveList = await getLiveListByIds(mpliveIds);
+    console.log(state.liveList, 'state.liveList');
+  });
+</script>
+<style lang="scss" scoped>
+  .goods-list-box {
+    width: 50%;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+
+  .goods-box {
+    &:nth-last-of-type(1) {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  .goods-md-box,
+  .goods-sl-box {
+    position: relative;
+  }
+</style>

+ 226 - 0
sheep/components/s-live-card/s-live-card.vue

@@ -0,0 +1,226 @@
+<template>
+  <view>
+    <!-- md卡片:竖向,一行放两个,图上内容下 -->
+    <view v-if="size === 'md'" class="md-goods-card ss-flex-col" :style="[elStyles]" @tap="onClick">
+      <view class="icon-box ss-flex">
+        <image class="icon" :src="state.liveStatus[data.status].img"></image>
+        <view class="title ss-m-l-16">{{ state.liveStatus[data.status].title }}</view>
+      </view>
+      <image class="md-img-box" :src="sheep.$url.cdn(data.feeds_img)" mode="aspectFill"></image>
+      <view class="md-goods-content">
+        <view class="md-goods-title ss-line-1" :style="[{ color: titleColor }]">
+          {{ data.name }}
+        </view>
+        <view class="md-goods-subtitle ss-m-t-20 ss-line-1" :style="[{ color: subTitleColor }]">
+          主播:{{ data.anchor_name }}
+        </view>
+      </view>
+    </view>
+    <!-- sl卡片:竖向型,一行放一个,图片上内容下边 -->
+    <view v-if="size === 'sl'" class="sl-goods-card ss-flex-col" :style="[elStyles]" @tap="onClick">
+      <view class="icon-box ss-flex">
+        <image class="icon" :src="state.liveStatus[data.status].img"></image>
+        <view class="title ss-m-l-16">{{ state.liveStatus[data.status].title }}</view>
+      </view>
+      <image class="sl-img-box" :src="sheep.$url.cdn(data.feeds_img)" mode="aspectFill"></image>
+      <view class="sl-goods-content">
+        <view class="sl-goods-title ss-line-1" :style="[{ color: titleColor }]">
+          {{ data.name }}
+        </view>
+        <view class="sl-goods-subtitle ss-m-t-20 ss-line-1" :style="[{ color: subTitleColor }]">
+          主播:{{ data.anchor_name }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script setup>
+  import { computed, reactive } from 'vue';
+  import sheep from '@/sheep';
+  /**
+   * 直播卡片
+   *
+   * @property {String} img 											- 图片
+   * @property {String} title 										- 标题
+   * @property {Number} titleWidth = 0								- 标题宽度,默认0,单位rpx
+   * @property {String} skuText 										- 规格
+   * @property {String | Number} score 								- 积分
+   * @property {String | Number} price 								- 价格
+   * @property {String | Number} originalPrice 						- 单购价
+   * @property {String} priceColor 									- 价格颜色
+   * @property {Number | String} num									- 数量
+   *
+   */
+  const props = defineProps({
+    goodsFields: {
+      type: [Array, Object],
+      default() {
+        return {};
+      },
+    },
+    tagStyle: {
+      type: Object,
+      default: {},
+    },
+    data: {
+      type: Object,
+      default: {},
+    },
+    size: {
+      type: String,
+      default: 'sl',
+    },
+    background: {
+      type: String,
+      default: '',
+    },
+    topRadius: {
+      type: Number,
+      default: 0,
+    },
+    bottomRadius: {
+      type: Number,
+      default: 0,
+    },
+    titleColor: {
+      type: String,
+      default: '#333',
+    },
+    subTitleColor: {
+      type: String,
+      default: '#999999',
+    },
+  });
+  // 组件样式
+  const elStyles = computed(() => {
+    return {
+      background: props.background,
+      'border-top-left-radius': props.topRadius + 'px',
+      'border-top-right-radius': props.topRadius + 'px',
+      'border-bottom-left-radius': props.bottomRadius + 'px',
+      'border-bottom-right-radius': props.bottomRadius + 'px',
+    };
+  });
+  const state = reactive({
+    liveStatus: {
+      101: {
+        img: sheep.$url.cdn('/assets/addons/shopro/frontend_img/app/mplive/live.png'),
+        title: '直播中',
+      },
+      102: {
+        img: sheep.$url.cdn('/assets/addons/shopro/frontend_img/app/mplive/prevue.png'),
+        title: '未开始',
+      },
+      103: {
+        img: sheep.$url.cdn('/assets/addons/shopro/frontend_img/app/mplive/playback.png'),
+        title: '已结束',
+      },
+    },
+  });
+  const emits = defineEmits(['click', 'getHeight']);
+  const onClick = () => {
+    emits('click');
+  };
+</script>
+
+<style lang="scss" scoped>
+  // md
+  .md-goods-card {
+    overflow: hidden;
+    width: 100%;
+    height: 424rpx;
+    position: relative;
+    z-index: 1;
+    background-color: $white;
+    .icon-box {
+      position: absolute;
+      left: 20rpx;
+      top: 10rpx;
+      width: 136rpx;
+      height: 40rpx;
+      background: #000000;
+      opacity: 0.5;
+      border-radius: 20rpx;
+      .icon {
+        width: 40rpx;
+        height: 40rpx;
+        border-radius: 20rpx 0px 20rpx 20rpx;
+      }
+      .title {
+        font-size: 24rpx;
+        font-weight: 500;
+        color: #ffffff;
+      }
+    }
+    .md-goods-content {
+      position: absolute;
+      left: 20rpx;
+      bottom: 20rpx;
+    }
+
+    .md-img-box {
+      width: 100%;
+      height: 100%;
+    }
+
+    .md-goods-title {
+      font-size: 26rpx;
+      color: #333;
+      width: 100%;
+    }
+    .md-goods-subtitle {
+      font-size: 24rpx;
+      font-weight: 400;
+      color: #999999;
+    }
+  }
+  .sl-goods-card {
+    overflow: hidden;
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    height: 400rpx;
+    background-color: $white;
+    .icon-box {
+      position: absolute;
+      left: 20rpx;
+      top: 10rpx;
+      width: 136rpx;
+      height: 40rpx;
+      background: #000000;
+      opacity: 0.5;
+      border-radius: 20rpx;
+      .icon {
+        width: 40rpx;
+        height: 40rpx;
+        border-radius: 20rpx 0px 20rpx 20rpx;
+      }
+      .title {
+        font-size: 24rpx;
+        font-weight: 500;
+        color: #ffffff;
+      }
+    }
+    .sl-goods-content {
+      position: absolute;
+      left: 20rpx;
+      bottom: 20rpx;
+    }
+
+    .sl-img-box {
+      width: 100%;
+      height: 100%;
+    }
+
+    .sl-goods-title {
+      font-size: 26rpx;
+      color: #333;
+      width: 100%;
+    }
+    .sl-goods-subtitle {
+      font-size: 24rpx;
+      font-weight: 400;
+      color: #999999;
+    }
+  }
+</style>

+ 1 - 1
sheep/components/s-score-block/s-score-block.vue

@@ -113,7 +113,7 @@
   const { mode, buyNowStyle, goodsFields, goodsIds } = props.data ?? {};
   const { marginLeft, marginRight } = props.styles ?? {};
   async function getScoreListByIds(ids) {
-    let { data } = await sheep.$api.app.scoreShopIds({ ids });
+    let { data } = await sheep.$api.app.scoreShop.ids({ ids });
     return data;
   }