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

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');

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({

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>

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
+        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="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 class="tool-box">
+          <slot name="tool"></slot>
+        </view>
+        <view>
+          <slot name="rightBottom"></slot>
         </view>
-      </view>
-      <view class="tool-box">
-        <slot name="tool"></slot>
-      </view>
-      <view>
-        <slot name="rightBottom"></slot>
       </view>
     </view>
   </view>

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>

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>

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;
   }