jufubao-base 1.0.197-beta5 → 1.0.197-beta8

package/src/components/JfbBaseOrderList/XdTfkOrderItem.vue

@@ -0,0 +1,267 @@
+<template>
+  <view class="xd-tfk-order-item">
+    <view class="o_header">
+      <view class="h_l">
+        <xd-font-icon
+          v-if="item.biz_code_icon"
+          :icon="item.biz_code_icon"
+          :size="item['biz_code_icon_size']"
+        ></xd-font-icon>
+        <view :class="{ marginLeft: item.biz_code_icon }" style="margin-left: 20rpx;">{{item.biz_code_name }}</view>
+      </view>
+      <view v-if="isShowOrderNo==='N'" class="o_status" :style="{
+        color:item.status.status_type !== 'error' ? mainColor : '#999999',
+      }">{{ item.status.status_name }}</view>
+    </view>
+    <view class="o_title" v-if="isShowOrderNo==='Y'">
+      <view class="o_number">订单编号:{{ item.main_order_id }}</view>
+      <view class="o_status" :style="{
+        color:item.status.status_type !== 'error' ? mainColor : '#999999',
+      }">{{ item.status.status_name }}</view>
+    </view>
+    <view class="prod_list">
+      <!-- 单个商品展示商品信息 -->
+      <template v-if="item.products.length == 1">
+        <view class="one_prod" v-for="Sitem in item.products" :key="Sitem.key">
+          <view class="prod_img">
+            <image :src="Sitem.product_thumb" style="background: #ffffff" mode="aspectFill"></image>
+          </view>
+          <view class="prod_info">
+            <view class="prod_name">{{ Sitem.product_name }}</view>
+            <view v-if="Sitem.brand_name" class="prod_brand" :style="{color: brandTextColor}">{{ Sitem.brand_name }}</view>
+            <view v-if="Sitem.product_sku_name" class="prod_sku">规格：{{ Sitem.product_sku_name }}</view>
+            <view class="prod_price">
+              <view>￥448</view>
+              <view class="info-price">
+                <text>x</text>
+                <text>{{ Sitem.product_num }}</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </template>
+
+      <!-- 多个商品展示更多商品信息 -->
+      <view v-if="item.products.length > 1" class="more_prod">
+        <view class="img_list">
+          <view class="prod_img" v-for="prod in item.products" :key="prod.key">
+            <image :src="prod.product_thumb" style="background: #ffffff" mode="aspectFit"></image>
+          </view>
+        </view>
+        <view class="right_arrow">
+          <xd-font-icon icon='iconxiangyou_xian' :size="26" color="#bdc0c5"></xd-font-icon>
+        </view>
+      </view>
+    </view>
+    <view class="prod_total">
+      <view>
+        <view class="serve_fee" style="color:#999" v-if="item['main_user_server_amount'] !== undefined && item['main_user_server_amount'] > 0">
+          <text>（平台服务费：</text>
+          <xd-unit
+            :isOld="false"
+            :price="item['main_user_server_amount']"
+            :fontSize="24"
+            :is-gray="true"
+            color="#999"
+            :icon-size=".25"
+          ></xd-unit>
+          <text>）</text>
+        </view>
+      </view>
+      <view style="display: flex;align-items: center;">
+        共{{item.products.length}}件商品
+        <template v-if="item.biz_code !== 'gift' && item.is_not_show_price !== 'Y'">
+          实付
+          <xd-unit
+            :isOld="false"
+            :price="item.total_amount"
+            :color="mainColor"
+            :fontSize="28"></xd-unit>
+        </template>
+        
+      </view>
+    </view>
+    <view v-if="item.buttons.length" class="prod_footer">
+      <view style="flex: 1;"></view>
+      <view class="btn" 
+        v-for="(btn,index) in item.buttons" :key="btn.key"
+        @click="handleBtnEvent(btn.action, item)"
+      >{{btn.text}}</view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon"
+  import XdUnit from "@/components/XdUnit/XdUnit"
+  export default{
+    name:"XdTfkOrderItem",
+    components: {
+      XdFontIcon,
+      XdUnit,
+    },
+    props:{
+      item: Object,
+      mainColor: String,
+      isShowOrderNo: {
+        type: String,
+      },
+      brandTextColor: String
+    },
+    data(){
+      return{
+      }
+    },
+    methods:{
+      handleBtnEvent(action){
+        this.$emit('handleBtnEvent', action)
+      },
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .xd-tfk-order-item{
+    padding-left: 30rpx;
+    overflow: hidden;
+    .o_header{
+      height: 90rpx;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid #EDEDED;
+      padding-right: 30rpx;
+      color: #333333;
+      font-size: 28rpx;
+
+      .h_l{
+        display: flex;
+        align-items: center;
+      }
+    }
+    .o_title{
+      height: 80rpx;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding-right: 30rpx;
+      color: #333333;
+      font-size: 24rpx;
+      border-bottom: 1px solid #EDEDED;
+    }
+    .one_prod{
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: 30rpx 30rpx 30rpx 0;
+      box-sizing: border-box;
+      .prod_img{
+        width: 140rpx;
+        height: 140rpx;
+        background-color: #f5f5f9;
+        image{
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .prod_info{
+        flex: 1;
+        padding-left: 30rpx;
+        .prod_name{
+          color: #2e2f30;
+          font-size: 30rpx;
+        }
+        .prod_brand{
+          font-size: 24rpx;
+          margin-top: 8rpx;
+        }
+        .prod_sku{
+          color: #797d82;
+          font-size: 24rpx;
+          margin-top: 8rpx;
+        }
+      }
+      .prod_price{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        color: rgb(46, 47, 48);
+        font-size: 30rpx;
+        margin-top: 12rpx;
+        .info-price{
+          display: flex;
+          color: #bdc0c5;
+          font-size: 26rpx;
+        }
+      }
+    }
+    .prod_list{
+      position: relative;
+      .right_arrow{
+        position: absolute;
+        right: 0px;
+        height: 100%;
+        width: 60rpx;
+        top: 0;
+        background: #FFF;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+    .more_prod{
+      display: flex;
+      flex-wrap: nowrap;
+      overflow: auto;
+      padding: 30rpx 30rpx 30rpx 0;
+      width: 100%;
+      .img_list{
+        display: flex;
+        flex-wrap: nowrap;
+        padding-right: 60rpx;
+      }
+      .prod_img{
+        width: 140rpx;
+        height: 140rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        image{
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .prod_total{
+      height: 80rpx;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding-right: 30rpx;
+      border-top: 1px solid #EDEDED;
+      color: #2e2f30;
+      font-size: 26rpx;
+      .serve_fee{
+        display: flex;
+        align-items: center;
+      }
+    }
+    .prod_footer{
+      padding: 16rpx 30rpx 16rpx 0;
+      display: flex;
+      align-items: center;
+      border-top: 1px solid #EDEDED;
+      .btn{
+        width: 170rpx;
+        height: 66rpx;
+        border: 1px solid #EDEDED;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 20rpx;
+        color: #2e2f30;
+        font-size: 24rpx;
+      }
+    }
+  }
+</style>

package/src/components/JfbBasePosterBigSmall/JfbBasePosterBigSmall.vue

@@ -1,4 +1,4 @@
-<script src="JfbBasePosterBigSmallMixin.js"></script>
+
 <template>
   <view
     class="jfb-base-poster-big-small"
@@ -17,14 +17,12 @@
     <view class="jfb-base-poster-big-small__body">
       <view
         class="jfb-base-poster-big-small__body-wrap"
-        :style="{
-          margin: margin,
-          flexDirection: position === 1 ? 'row' : 'row-reverse',
-        }"
+        :style="{margin: margin,flexDirection: position === 1 ? 'row' : 'row-reverse'}"
         v-if="isShowAd"
       >
+        <!--大图-->
         <view
-          v-if="isCarousel === 1"
+          v-if="isCarousel === 1 && bigList.length > 0"
           :style="{
             margin: msMarginComputed,
             width: bigWidth + 'rpx',
@@ -40,7 +38,7 @@
                 borderRadius: radius + 'rpx',
               }"
               :src="bigList[0].image_url"
-              mode="aspectFill"
+              mode="scaleToFill"
             ></image>
         </view>
         </view>
@@ -75,7 +73,7 @@
                 <image
                   :style="{borderRadius: radius + 'rpx',width: bigWidth + 'rpx',height: bigHeight + 'rpx',}"
                   :src="item['image_url']"
-                  mode="aspectFill"></image>
+                  mode="scaleToFill"></image>
               </swiper-item>
             </swiper>
             <!--#endif-->
@@ -91,13 +89,15 @@
               @animationfinish="handleBigAnimationfinish"
             >
               <template slot-scope="{ item, index }">
-                <image :style="{borderRadius: radius + 'rpx',}" :src="item['image_url']" mode="aspectFill"></image>
+                <image :style="{borderRadius: radius + 'rpx',}" :src="item['image_url']" mode="scaleToFill"></image>
               </template>
             </xd-swiper>
             <!--#endif-->
           </xd-swiper-dot>
           <view v-if="isPreview" class="carousel-mask"></view>
         </view>
+        <!--大图-->
+        <!--小图-->
         <view
           :style="{
             width: bigWidth + 'rpx',
@@ -112,7 +112,7 @@
             }"
           >
             <view
-              v-if="topIsCarousel === 1"
+              v-if="topIsCarousel === 1 && topList.lenght > 0"
               :style="{
                 width: bigWidth + 'rpx',
                 height: smallHeight + 'rpx',
@@ -126,7 +126,7 @@
                     borderRadius: topRadius + 'rpx',
                   }"
                   :src="topList[0].image_url"
-                  mode="aspectFill"
+                  mode="scaleToFill"
                 ></image></view
             ></view>
             <view
@@ -159,7 +159,7 @@
                     <image
                       :style="{borderRadius: radius + 'rpx',width: bigWidth + 'rpx',height: smallHeight + 'rpx',}"
                       :src="item['image_url']"
-                      mode="aspectFill"></image>
+                      mode="scaleToFill"></image>
                   </swiper-item>
                 </swiper>
                 <!--#endif-->
@@ -175,7 +175,7 @@
                   @animationfinish="handleTopAnimationfinish"
                 >
                   <template slot-scope="{ item, index }">
-                    <image :style="{borderRadius: topRadius + 'rpx',}" :src="item['image_url']" mode="aspectFill"></image>
+                    <image :style="{borderRadius: topRadius + 'rpx',}" :src="item['image_url']" mode="scaleToFill"></image>
                   </template>
                 </xd-swiper>
                 <!--#endif-->
@@ -190,7 +190,7 @@
             }"
           >
             <view
-              v-if="bottomIsCarousel === 1"
+              v-if="bottomIsCarousel === 1 &&  bottomList.lenght > 0"
               :style="{
                 width: bigWidth + 'rpx',
                 height: smallHeight + 'rpx',
@@ -204,7 +204,7 @@
                     borderRadius: bottomRadius + 'rpx',
                   }"
                   :src="bottomList[0].image_url"
-                  mode="aspectFill"
+                  mode="scaleToFill"
                 ></image> </view
             ></view>
             <view
@@ -237,7 +237,7 @@
                     <image
                       :style="{borderRadius: radius + 'rpx',width: bigWidth + 'rpx',height: smallHeight + 'rpx',}"
                       :src="item['image_url']"
-                      mode="aspectFill"></image>
+                      mode="scaleToFill"></image>
                   </swiper-item>
                 </swiper>
                 <!--#endif-->
@@ -258,7 +258,7 @@
                         borderRadius: bottomRadius + 'rpx',
                       }"
                       :src="item['image_url']"
-                      mode="aspectFill"
+                      mode="scaleToFill"
                     ></image>
                   </template>
                 </xd-swiper>
@@ -268,6 +268,7 @@
             </view>
           </view>
         </view>
+        <!--小图-->
       </view>
     </view>
   </view>
@@ -297,12 +298,7 @@ export default {
     return {
       params:{},
       height: 0, //组件高度
-      mS: {
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0,
-      }, //间距
+      mS: {}, //间距
       isPreview: false, //是否预览
       test: {
         content_id: "KpBbUKdj4aBejwe7Fh1ki",
@@ -364,9 +360,7 @@ export default {
   },
   computed: {
     margin() {
-      return `${this.mS.top || 0}rpx ${this.mS.right || 0}rpx ${
-        this.mS.bottom || 0
-      }rpx ${this.mS.left || 0}rpx`;
+      return this.getMarginAndPadding(this.mS, 0);
     },
     msMarginComputed() {
       if (this.position === 1) {
@@ -793,10 +787,11 @@ export default {
       // 获取大小图之间间距，如果没有则设置默认值
       this.msMargin = getContainerPropsValue(container, "content.msMargin", 10);
       // 获取安全区域宽度，减去margin的值，再除以2，获取大图宽度
-      this.bigWidth = getWidthHeight(this.height,this.mS,this.msMargin).bigWidth;
-      this.bigHeight = getWidthHeight(this.height,this.mS,this.msMargin).bigHeight;
+      this.bigWidth = getWidthHeight(this.height,this.mS,this.msMargin , this).bigWidth;
+      this.bigHeight = getWidthHeight(this.height,this.mS,this.msMargin, this).bigHeight;
       // 获取容器高度，减去margin的值，再除以2，获取小图高度
-      this.smallHeight = getWidthHeight(this.height,this.mS,this.msMargin).smallHeight;
+      this.smallHeight = getWidthHeight(this.height, this.mS, this.msMargin, this).smallHeight;
+
       // 获取大图数据
       this.isCarousel = getContainerPropsValue(
         container,
@@ -882,6 +877,9 @@ export default {
   &__body {
     &-wrap {
       display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      overflow: hidden;
     }
   }
 }

package/src/components/JfbBasePosterBigSmall/getWidthHeight.js

@@ -1,12 +1,16 @@
-function getWidthHeight(height, mS= {}, msMargin={}) {
-  let bigWidth =
-    uni.getSystemInfoSync().safeArea.width -
-    (mS.left + mS.right + Number(msMargin)) / 2;
-  let bigHeight = height - (mS.top + mS.bottom);
+
+function checkValue(value, dValue = 0){
+  if(value === undefined || value === '' || value === null) return dValue;
+  return Number(value || 0);
+}
+
+export default (height, mS= {}, msMargin={}, $vm) =>{
+  let marginRL = checkValue(mS.left, 0) +  checkValue(mS.right, 0);
+  let marginTB = checkValue(mS.top, 0) +  checkValue(mS.bottom, 0);
+  let bigWidth = (750 - (marginRL + Number(msMargin)))/2;
+  let bigHeight = height - marginTB;
   // 获取容器高度，减去margin的值，再除以2，获取小图高度
-  let smallHeight =
-    (height - (mS.top + mS.bottom + Number(msMargin))) /
-    2;
+  let smallHeight = (height - (marginTB + Number(msMargin)))/2;
   return { bigWidth, bigHeight, smallHeight };
 }
-export default getWidthHeight;
+