jufubao-base 1.0.186 → 1.0.187-beta2

package/src/components/JfbBaseOrderDetail/JfbBaseOrderDetail.vue

@@ -129,6 +129,9 @@
                 v-for="(Ditem, Dindex) in info.film_show.detail.items"
                 :key="Dindex"
                 class="jfb-base-order-detail__body-delivery-bottom-item"
+                :style="{
+                  marginBottom: lineHeight + 'rpx'
+                }"
               >
                 <view style="width: 130rpx"
                   >{{ Ditem.label }} <span v-if="Ditem.label">:</span>
@@ -214,6 +217,9 @@
                 v-for="(Ditem, Dindex) in item.info"
                 :key="Dindex"
                 class="jfb-base-order-detail__body-delivery-bottom-item"
+                :style="{
+                  marginBottom: lineHeight + 'rpx'
+                }"
               >
                 <view style="width: 130rpx;display: flex;">
                   <view v-html="Ditem.label"></view>
@@ -510,6 +516,9 @@
             v-for="(item, index) in info.detail"
             :key="index"
             class="jfb-base-order-detail__body-order"
+            :style="{
+              marginBottom: lineHeight + 'rpx'
+            }"
           >
             <view :style="{ fontWeight: item.style }">
               <view style="display: flex;">
@@ -541,6 +550,9 @@
             <view
               v-if="item.type !== 'line'"
               class="jfb-base-order-detail__body-price"
+              :style="{
+                marginBottom: lineHeight + 'rpx'
+              }"
             >
               <view :style="{ fontWeight: item.style }">{{ item.label }}</view>
               <xd-unit
@@ -683,41 +695,51 @@
         :style="prod_bottom"
         v-if="info.buttons && info.buttons.length > 0"
       >
-        <view v-for="(item, index) in info.buttons" :key="index">
-          <view
-            style="display: flex; align-items: center"
-            v-if="item.action === 'pay'"
-          >
+        <view :style="[bottomBoxStyle]">
+          <view v-for="(item, index) in info.buttons" :key="index">
             <view
-              style="display: flex; align-items: center; margin-right: 30rpx"
-              v-if="biz_code !== 'gift' || info.is_show_gift_price"
+              style="display: flex; align-items: center"
+              v-if="item.action === 'pay'"
             >
-              <text>应付：</text>
-              <xd-unit
-                :price="info.pay_info.real_pay_amount"
-                :font-size="36"
-                :iocn-size="0.45"
-              ></xd-unit>
+              <view
+                style="display: flex; align-items: center; margin-right: 30rpx"
+                v-if="biz_code !== 'gift' || info.is_show_gift_price"
+              >
+                <text>应付：</text>
+                <xd-unit
+                  :price="info.pay_info.real_pay_amount"
+                  :font-size="36"
+                  :iocn-size="0.45"
+                ></xd-unit>
+              </view>
+              <view>
+                <xd-button
+                  @click="handleToPay"
+                  size="small"
+                  type="primary"
+                  :style="{
+                    height: bottomBtnHeight + 'rpx',
+                    lineHeight: bottomBtnHeight + 'rpx',
+                  }"
+                  :radius="bottomBtnRadius + 'rpx'"
+                  :bg-color="mainColor"
+                  >{{ item.text }}
+                </xd-button>
+              </view>
             </view>
-            <view>
+            <view v-else>
               <xd-button
-                @click="handleToPay"
                 size="small"
-                type="primary"
-                radius="40rpx"
-                :bg-color="mainColor"
-                >{{ item.text }}
-              </xd-button>
+                :type="item.type !== undefined ? item.type: 'primary'"
+                :radius="bottomBtnRadius + 'rpx'"
+                :style="{
+                  height: bottomBtnHeight + 'rpx',
+                  lineHeight: bottomBtnHeight + 'rpx',
+                }"
+                @click="handleAction(item)"
+              >{{ item.text }}</xd-button>
             </view>
           </view>
-          <view v-else>
-            <xd-button
-              size="small"
-              :type="item.type !== undefined ? item.type: 'primary'"
-              radius="40rpx"
-              @click="handleAction(item)"
-            >{{ item.text }}</xd-button>
-          </view>
         </view>
       </view>
     </view>
@@ -814,15 +836,6 @@ export default {
       backgroundColor: "",
       padding: 0,
 
-      //投影
-      is_shadow: "Y",
-      is_shadow_bg: 0,
-      is_shadow_w: 0,
-
-      //边框
-      is_border: "Y",
-      is_border_w: 0,
-      is_border_c: "",
 
       //其他
       margin: {
@@ -833,8 +846,15 @@ export default {
       },
       is_hot: "Y",
       logo: "",
+      lineHeight: 20,
 
       noticeBgc:'',
+      sectionShadow: "",
+      sectionBorder: "",
+      bottomBtnRadius: 0,
+      bottomPadding: "",
+      bottomBgColor: "",
+      bottomBtnHeight: "",
     };
   },
   watch: {
@@ -873,15 +893,21 @@ export default {
       return str
     },
     shadowBox() {
-      if (this.is_shadow === "Y")
-        return `0 0 ${this.is_shadow_w}rpx ${this.is_shadow_bg}`;
-      else return "0 0 0 rgba(0,0,0,0)";
+      return this.sectionShadow;
     },
     borderBox() {
-      if (this.is_border === "Y")
-        return `${this.is_border_w}rpx solid ${this.is_border_c}`;
-      else return "0";
+      return this.sectionBorder;
     },
+    bottomBoxStyle(){
+      let padding = `${this.checkValue(this.bottomPadding.top, 20)}rpx`;
+      padding = `${padding} ${this.checkValue(this.bottomPadding.right, 20)}rpx`;
+      padding = `${padding} ${this.checkValue(this.bottomPadding.bottom, 20)}rpx`;
+      padding = `${padding} ${this.checkValue(this.bottomPadding.left, 20)}rpx`;
+      return {
+        padding: padding,
+        backgroundColor: this.bottomBgColor,
+      }
+    }
   },
   created() {
     this.noticeBgc = Color(this.warningColor).alpha(0.2).toString();
@@ -1108,17 +1134,23 @@ export default {
       this.brandTextColor = getContainerPropsValue(container, "content.brandTextColor", this.mainColor);
       this.padding = getContainerPropsValue(container, "content.padding", 20);
 
-      this.is_shadow = getContainerPropsValue(container, "content.is_shadow", "N");
-      this.is_shadow_bg = getContainerPropsValue(container, "content.is_shadow_bg", "#fff");
-      this.is_shadow_w = getContainerPropsValue(container, "content.is_shadow_w", "10");
-
-      this.is_border = getContainerPropsValue(container, "content.is_border", "N");
       this.is_hot = getContainerPropsValue(container, "content.is_hot", "Y");
-      this.is_border_c = getContainerPropsValue(container, "content.is_border_c", "#fff");
-      this.is_border_w = getContainerPropsValue(container, "content.is_border_w", 2);
       this.viewStatus = getContainerPropsValue(container, "content.viewStatus", "mall");
       this.is_show_support_shop = getContainerPropsValue(container, "content.is_show_support_shop", "N");
       this.is_show_delete_order = getContainerPropsValue(container, "content.is_show_delete_order", "N");
+      this.lineHeight = getContainerPropsValue(container, "content.lineHeight", 20);
+      let sectionShadow = getContainerPropsValue(container, "content.sectionShadow", "");
+      if(sectionShadow.type === 'Y' && sectionShadow.value){
+        this.sectionShadow = `0 0 ${sectionShadow.value.width}rpx ${sectionShadow.value.color}`;
+      }else this.sectionShadow = '';
+      let sectionBorder = getContainerPropsValue(container, "content.sectionBorder", "");
+      if(sectionBorder.type === 'Y' && sectionBorder.value){
+        this.sectionBorder = `${sectionBorder.value.width}rpx solid ${sectionBorder.value.color}`;
+      }else this.sectionBorder = '';
+      this.bottomBtnRadius = getContainerPropsValue(container, "content.bottomBtnRadius", 0);
+      this.bottomPadding = getContainerPropsValue(container, "content.bottomPadding", {});
+      this.bottomBgColor = getContainerPropsValue(container, "content.bottomBgColor", "#ffffff");
+      this.bottomBtnHeight = getContainerPropsValue(container, "content.bottomBtnHeight", 60);
     },
     getCountDown() {
       this.timer = setInterval(() => {
@@ -1758,8 +1790,6 @@ export default {
       position: fixed;
       left: 0;
       right: 0;
-      height: unit(100, rpx);
-      padding: 0 unit(30, rpx);
       box-shadow: 0 0 unit(10, rpx) rgba(0, 0, 0, 0.15);
       background: #fff;
       z-index: 3000;

package/src/components/JfbBaseOrderList/Attr.js

@@ -4,6 +4,17 @@ export default {
   style: [],
   content: (data)=>{
     return [
+      {
+        label: "布局样式配置",
+        ele: "xd-radio",
+        valueKey: "layout_style",
+        value: data.layout_style || 'old',
+        list: [
+          {label: '布局1', value: 'old'},
+          {label: '布局2', value: 'tfk'},
+        ],
+        groupKey: "style",
+      },
       {
         label: '设置订单状态:',
         ele: 'xd-order-setting',
@@ -30,6 +41,18 @@ export default {
           {required: true, message: '设置订单配置错误！请检查配置', trigger: 'change'},
         ],
       },
+      {
+        label: "是否展示订单号:",
+        ele: 'xd-radio',
+        valueKey: 'isShowOrderNo',
+        value: data['isShowOrderNo'] || 'Y',
+        groupKey:'style',
+        list: [
+          {label: '是', value: 'Y'},
+          {label: '否', value: 'N'},
+        ],
+        hidden: data.layout_style !== 'tfk'
+      },
       {
         label: '外填充:',
         ele: 'xd-margin-padding',

package/src/components/JfbBaseOrderList/JfbBaseOrderList.vue

@@ -64,104 +64,129 @@
           class="jfb-base-order-list__body-order"
           :style="{ padding: outMargin }"
         >
-          <view
-            @click="handleToLink(detailPath, item)"
-            class="jfb-base-order-list__body-order-item"
-            v-for="item in orderList"
-            :key="item.main_order_id"
-            :style="{
-              background: backgroundColor,
-              border: borderBox,
-              borderRadius: radius + 'rpx',
-              boxShadow: shadowBox,
-              marginBottom: padding + 'rpx',
-            }"
-          >
-            <view class="jfb-base-order-list__body-order-item-biz">
-              <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 }">{{item.biz_code_name }}</view>
-            </view>
-            <view class="jfb-base-order-list__body-order-item-title">
-              <view>订单编号:{{ item.main_order_id }}</view>
-              <view :style="{color:item.status.status_type !== 'error' ? mainColor : '#999999',}">{{ item.status.status_name }}</view>
-            </view>
-            <view class="order-list">
-              <view
-                class="jfb-base-order-list__body-order-item-content"
-                v-for="(Sitem, Sindex) in item.products"
-                :key="Sitem.key"
-                v-if="(item['isOpen'] === false && Sindex < showLen) || item['isOpen']"
-              >
-                <image :src="Sitem.product_thumb" style="background: #ffffff" mode="aspectFit"></image>
-                <view class="jfb-base-order-list__body-order-item-content-info">
-                  <view class="jfb-base-order-list__body-order-item-content-info-name">{{ Sitem.product_name }}</view>
-                  <view class="brand-name" v-if="Sitem.brand_name" :style="{color:brandTextColor}">{{ Sitem.brand_name }}</view>
-                  <view v-if="Sitem.product_sku_name" class="jfb-base-order-list__body-order-item-content-info-skuname">规格：{{ Sitem.product_sku_name }}</view>
-                  <view class="jfb-base-order-list__body-order-item-content-info-price">
-                    <view></view>
-                    <view class="info-price">
-                      <text>X</text>
-                      <text>{{ Sitem.product_num }}</text>
+          <template v-if="layout_style === 'old'">
+            <view
+              @click="handleToLink(detailPath, item)"
+              class="jfb-base-order-list__body-order-item"
+              v-for="item in orderList"
+              :key="item.main_order_id"
+              :style="{
+                background: backgroundColor,
+                border: borderBox,
+                borderRadius: radius + 'rpx',
+                boxShadow: shadowBox,
+                marginBottom: padding + 'rpx',
+              }"
+            >
+              <view class="jfb-base-order-list__body-order-item-biz">
+                <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 }">{{item.biz_code_name }}</view>
+              </view>
+              <view class="jfb-base-order-list__body-order-item-title">
+                <view>订单编号:{{ item.main_order_id }}</view>
+                <view :style="{color:item.status.status_type !== 'error' ? mainColor : '#999999',}">{{ item.status.status_name }}</view>
+              </view>
+              <view class="order-list">
+                <view
+                  class="jfb-base-order-list__body-order-item-content"
+                  v-for="(Sitem, Sindex) in item.products"
+                  :key="Sitem.key"
+                  v-if="(item['isOpen'] === false && Sindex < showLen) || item['isOpen']"
+                >
+                  <image :src="Sitem.product_thumb" style="background: #ffffff" mode="aspectFit"></image>
+                  <view class="jfb-base-order-list__body-order-item-content-info">
+                    <view class="jfb-base-order-list__body-order-item-content-info-name">{{ Sitem.product_name }}</view>
+                    <view class="brand-name" v-if="Sitem.brand_name" :style="{color:brandTextColor}">{{ Sitem.brand_name }}</view>
+                    <view v-if="Sitem.product_sku_name" class="jfb-base-order-list__body-order-item-content-info-skuname">规格：{{ Sitem.product_sku_name }}</view>
+                    <view class="jfb-base-order-list__body-order-item-content-info-price">
+                      <view></view>
+                      <view class="info-price">
+                        <text>X</text>
+                        <text>{{ Sitem.product_num }}</text>
+                      </view>
                     </view>
                   </view>
                 </view>
+                <view
+                  class="order-list-icon"
+                  :style="{ bottom: item['isOpen'] ? '-30rpx' : '-54rpx' }"
+                  v-if="item.products.length > showLen"
+                  @click.stop="switchOpen(item)"
+                >
+                  <view :style="{ background: backgroundColor }">
+                    <xd-font-icon
+                      color="#666"
+                      :icon="item['isOpen'] ? 'iconshang_up' : 'iconxia_down'"
+                      size="24"
+                    ></xd-font-icon>
+                  </view>
+                </view>
+              </view>
+              <view class="jfb-base-order-list__body-order-item-bottom">
+                <view>下单时间:{{ item.created_time_text }}</view>
+                <view v-if="item.biz_code !== 'gift' && item.is_not_show_price !== 'Y'">
+                  <text>合计:</text>
+                  <xd-unit
+                    :isOld="false"
+                    :price="item.total_amount"
+                    :color="mainColor"
+                    :fontSize="28"
+                  ></xd-unit>
+                </view>
+                <view 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
-                class="order-list-icon"
-                :style="{ bottom: item['isOpen'] ? '-30rpx' : '-54rpx' }"
-                v-if="item.products.length > showLen"
-                @click.stop="switchOpen(item)"
+                class="jfb-base-order-list__body-order-item-pay"
+                v-if="item.buttons.length"
               >
-                <view :style="{ background: backgroundColor }">
-                  <xd-font-icon
-                    color="#666"
-                    :icon="item['isOpen'] ? 'iconshang_up' : 'iconxia_down'"
-                    size="24"
-                  ></xd-font-icon>
+                <view v-for="(btn,index) in item.buttons" :key="btn.key">
+                  <xd-button
+                    :type="getBtnType(btn.action)"
+                    size="mini"
+                    @click="handleBtnEvent(btn.action, item)"
+                  >{{ btn.text }}</xd-button>
                 </view>
               </view>
             </view>
-            <view class="jfb-base-order-list__body-order-item-bottom">
-              <view>下单时间:{{ item.created_time_text }}</view>
-              <view v-if="item.biz_code !== 'gift' && item.is_not_show_price !== 'Y'">
-                <text>合计:</text>
-                <xd-unit
-                  :isOld="false"
-                  :price="item.total_amount"
-                  :color="mainColor"
-                  :fontSize="28"
-                ></xd-unit>
-              </view>
-              <view 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>
+          </template>
+          <template v-if="layout_style === 'tfk'">
             <view
-              class="jfb-base-order-list__body-order-item-pay"
-              v-if="item.buttons.length"
+              @click="handleToLink(detailPath, item)"
+              class="jfb-base-order-list__body-order-item"
+              v-for="item in orderList"
+              :key="item.main_order_id"
+              :style="{
+                background: backgroundColor,
+                border: borderBox,
+                borderRadius: radius + 'rpx',
+                boxShadow: shadowBox,
+                marginBottom: padding + 'rpx',
+              }"
             >
-              <view v-for="(btn,index) in item.buttons" :key="btn.key">
-                <xd-button
-                  :type="getBtnType(btn.action)"
-                  size="mini"
-                  @click="handleBtnEvent(btn.action, item)"
-                >{{ btn.text }}</xd-button>
-              </view>
+              <xd-tfk-order-item 
+                :mainColor="mainColor"
+                :isShowOrderNo="isShowOrderNo"
+                :brandTextColor="brandTextColor"
+                :item="item"
+                @handleBtnEvent="action => handleBtnEvent(action, item)"
+              ></xd-tfk-order-item>
             </view>
-          </view>
+          </template>
         </view>
         <view v-else class="jfb-base-order-list__body-no">
           <xd-font-icon
@@ -189,6 +214,7 @@ import extsMixins from "@/mixins/extsMixins";
 import { getContainerPropsValue } from "@/utils/xd.base";
 import getServiceUrl from "@/common/getServiceUrl";
 import Color from "color";
+import XdTfkOrderItem from "./XdTfkOrderItem"
 
 export default {
   name: "JfbBaseOrderList",
@@ -197,6 +223,7 @@ export default {
     XdTab,
     XdUnit,
     XdButton,
+    XdTfkOrderItem,
   },
   mixins: [componentsMixins, extsMixins, JfbBaseOrderListMixin],
   data() {
@@ -239,6 +266,8 @@ export default {
         right: 0,
         bottom: 0,
       },
+      layout_style: "old",
+      isShowOrderNo: "Y",
 
       noticeBgc:'',
     };
@@ -315,6 +344,8 @@ export default {
 
       this.detailPath = getContainerPropsValue(container, "content.detailPath", { value: "" }).value;
       this.payPath = getContainerPropsValue(container, "content.payPath", {value: "",}).value;
+      this.layout_style = getContainerPropsValue(container, "content.layout_style", "old");
+      this.isShowOrderNo = getContainerPropsValue(container, "content.isShowOrderNo", "Y");
       this.tabList = getContainerPropsValue(container, "content.orderTypeList", []).map((item) => {
         return {
           name: item.customName || item.label,