jufubao-base 1.0.181 → 1.0.182-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-base",
-  "version": "1.0.181",
+  "version": "1.0.182-beta1",
   "private": false,
   "description": "聚福宝业务组件基础插件包",
   "main": "index.js",

package/src/components/JfbBaseAddress/Attr.js

@@ -1,5 +1,6 @@
 'use strict';
 import StyleForm from "@/utils/StyleForm";
+import IConList from "@/ICONS"
 let styleForm = new StyleForm(
   {border: null, shadow: null, spacing: '',  bgColor:'',  margin: null},
   null,
@@ -11,6 +12,35 @@ export default {
   advanced: [],
   content: (data)=>{
     return [
+      {
+        label: "布局样式配置",
+        ele: "xd-radio",
+        valueKey: "layout_style",
+        value: data.layout_style || 'old',
+        list: [
+          {label: '原有布局', value: 'old'},
+          {label: '淘福客布局', value: 'tfk'},
+        ],
+        groupKey: "content",
+      },
+      {
+        label: "编辑图标",
+        ele: "xd-select-list",
+        valueKey: "edit_icon",
+        value: data.edit_icon || 'iconbianji-01',
+        list: IConList,
+        className: 'input80',
+        groupKey: "content",
+      },
+      {
+        label: "删除图标",
+        ele: "xd-select-list",
+        valueKey: "delete_icon",
+        value: data.delete_icon || 'iconshanchu-01',
+        list: IConList,
+        className: 'input80',
+        groupKey: "content",
+      },
       {
         label: '选取地区路径:',
         ele: 'xd-select-pages-path',
@@ -23,7 +53,26 @@ export default {
         },
         inline: false,
       },
-      ...styleForm.getForm(data, '内容列表样式配置')
+      ...styleForm.getForm(data, '内容列表样式配置'),
+      {
+        label: "圆角设置",
+        ele: 'xd-site-select-list',
+        valueKey: 'cardRadius',
+        value: data['cardRadius'] || '',
+        groupKey:'style',
+        placeholder: '请选择内容圆角设置',
+        multiple: false,
+        className: 'input80',
+        handleCustom({ action, data }) {
+          XdBus.getParentApi('getOptionsSettingList')({ setting_id: 'edtix_style_radius' })
+            .then(res => {
+              data.cb(res.list)
+            })
+            .catch(error => {
+              console.error(error);
+            });
+        },
+      }
     ].filter(i=>i)
   },
 }

package/src/components/JfbBaseAddress/JfbBaseAddress.vue

@@ -26,81 +26,108 @@
         class="jfb-base-address__body-address"
         v-if="addressList && addressList.length > 0"
       >
-        <view
-          :style="{
-            marginBottom: jfbListSpacing + 'rpx',
-            boxShadow: jfbListShadowComputed,
-            border: jfbListBorderComputed,
-            backgroundColor: jfbListBgColor,
-          }"
-          class="jfb-base-address__body-address-item"
-          v-for="(item, index) in addressList"
-          @click="handleSelectAddress(item)"
-          :key="index"
-        >
-          <view class="jfb-base-address__body-address-item-top">
-            <view
-              v-if="item.is_default === 'Y'"
-              :style="{
-                backgroundColor: mainColor,
-                color: '#fff',
-                fontSize: '24rpx',
-                padding: '4rpx 10rpx',
-                borderRadius: '4rpx',
-                marginRight: '20rpx',
-              }"
-              >默认</view
-            >
+        <template v-if="layout_style === 'old'">
+          <view
+            :style="{
+              marginBottom: jfbListSpacing + 'rpx',
+              boxShadow: jfbListShadowComputed,
+              border: jfbListBorderComputed,
+              backgroundColor: jfbListBgColor,
+              borderRadius: cardRadius + 'rpx'
+            }"
+            class="jfb-base-address__body-address-item"
+            v-for="(item, index) in addressList"
+            @click="handleSelectAddress(item)"
+            :key="index"
+          >
+            <view class="jfb-base-address__body-address-item-top">
+              <view
+                v-if="item.is_default === 'Y'"
+                :style="{
+                  backgroundColor: mainColor,
+                  color: '#fff',
+                  fontSize: '24rpx',
+                  padding: '4rpx 10rpx',
+                  borderRadius: '4rpx',
+                  marginRight: '20rpx',
+                }"
+                >默认</view
+              >
+              <view
+                :style="{
+                  color: '#999999',
+                  flex: 1,
+                  paddingRight: item.is_valid === 'N' ? '40rpx' : '',
+                }"
+              >
+                <view>
+                  {{ item | getCodeName }}
+                </view>
+              </view>
+              <view
+                style="position: absolute; right: 40rpx; width: 50rpx"
+                v-if="item.is_valid === 'N'"
+              >
+                <xd-font-icon
+                  size="32"
+                  :color="dangerColor"
+                  icon="iconmingchengtubiao"
+                ></xd-font-icon>
+              </view>
+            </view>
+            <view class="jfb-base-address__body-address-item-middle">
+              {{ item.address_detail }} {{ item.house_number }}
+            </view>
             <view
               :style="{
-                color: '#999999',
-                flex: 1,
-                paddingRight: item.is_valid === 'N' ? '40rpx' : '',
+                backgroundColor: item.is_select === 'Y' ? mainColor : '#CCC',
               }"
+              class="jfb-base-address__body-address-item-bottom"
             >
               <view>
-                {{ item | getCodeName }}
+                <view style="margin-right: 40rpx">{{ item.name }}</view>
+                <view>{{ item.phone }}</view>
+              </view>
+              <view>
+                <xd-font-icon
+                  @click.native.stop="handleEdit(item)"
+                  style="margin-right: 40rpx"
+                  icon="iconbianji-01"
+                  size="32"
+                ></xd-font-icon>
+                <xd-font-icon
+                  @click.native.stop="handleDel(item)"
+                  icon="iconshanchu-01"
+                  size="32"
+                ></xd-font-icon>
               </view>
             </view>
-            <view
-              style="position: absolute; right: 40rpx; width: 50rpx"
-              v-if="item.is_valid === 'N'"
-            >
-              <xd-font-icon
-                size="32"
-                :color="dangerColor"
-                icon="iconmingchengtubiao"
-              ></xd-font-icon>
-            </view>
-          </view>
-          <view class="jfb-base-address__body-address-item-middle">
-            {{ item.address_detail }} {{ item.house_number }}
           </view>
+        </template>
+        <template v-else>
           <view
             :style="{
-              backgroundColor: item.is_select === 'Y' ? mainColor : '#CCC',
+              marginBottom: jfbListSpacing + 'rpx',
+              boxShadow: jfbListShadowComputed,
+              border: jfbListBorderComputed,
+              backgroundColor: jfbListBgColor,
+              borderRadius: cardRadius + 'rpx'
             }"
-            class="jfb-base-address__body-address-item-bottom"
+            v-for="(item, index) in addressList"
+            @click="handleSelectAddress(item)"
+            :key="index"
           >
-            <view>
-              <view style="margin-right: 40rpx">{{ item.name }}</view>
-              <view>{{ item.phone }}</view>
-            </view>
-            <view>
-              <xd-font-icon
-                @click.native.stop="handleEdit(item)"
-                style="margin-right: 40rpx"
-                icon="iconbianji-01"
-                size="32"
-              ></xd-font-icon>
-              <xd-font-icon
-                @click.native.stop="handleDel(item)"
-                icon="iconshanchu-01"
-                size="32"
-              ></xd-font-icon>
-            </view>
+            <xd-tfk-item
+              :edit_icon="edit_icon"
+              :delete_icon="delete_icon"
+              :item="item"
+              :dangerColor="dangerColor"
+              @editAddress="handleEdit(item)"
+              @delAddress="handleDel(item)"
+              @setDefault="handleSetDefault(item)"
+            ></xd-tfk-item>
           </view>
-        </view>
+        </template>
       </view>
       <view class="jfb-base-address__body-empty" v-else>
         <xd-font-icon icon="iconbianzu-01" size="120"></xd-font-icon>
@@ -150,6 +177,7 @@ import componentsMixins from "@/mixins/componentsMixins";
 import extsMixins from "@/mixins/extsMixins";
 import StyleForm from "@/utils/StyleForm";
 import { getContainerPropsValue } from "@/utils/xd.base";
+import XdTfkItem from "./XdTfkItem"
 let styleForm = new StyleForm(
   {
     border: null,
@@ -174,6 +202,7 @@ export default {
     XdButton,
     XdDownDrawer,
     XdAddress,
+    XdTfkItem,
   },
   mixins: [componentsMixins, extsMixins, JfbBaseAddressMixin],
   data() {
@@ -184,7 +213,12 @@ export default {
       location_url: "",
       addressList: null,
       ...styleForm.getDataItem(),
-      version: ''
+      version: '',
+
+      layout_style: "old",
+      edit_icon: "",
+      delete_icon: "",
+      cardRadius: 16,
     };
   },
   filters: {
@@ -236,6 +270,11 @@ export default {
         { value: "" }
       ).value;
       styleForm.getInitItem(this, value);
+      this.layout_style = getContainerPropsValue(value, "content.layout_style", "old");
+      this.edit_icon = getContainerPropsValue(value, "content.edit_icon", "iconbianji-01");
+      this.delete_icon = getContainerPropsValue(value, "content.delete_icon", "iconshanchu-01");
+      this.cardRadius = getContainerPropsValue(value, "content.cardRadius", 16);
+      console.log("edit_icon", this.edit_icon)
     },
     getList(callback) {
       this.$xdShowLoading({});
@@ -490,7 +529,8 @@ export default {
         })
         .catch(this.$xdLog.catch);
     },
-    handleEdit(item) {
+    //接口数据接口映射到组件数据接口
+    apiDataMapCompData(item){
       let city_name = [
         item["province_name"],
         item["city_name"],
@@ -503,13 +543,15 @@ export default {
         item["area_code"],
         item["street_code"],
       ];
-      this.defaultValue = {
+      return {
         receipt_username: item["name"],
         receipt_address: item["address_detail"],
         receipt_phone: item["phone"],
         receipt_default: item["is_default"] === "Y" ? true : false,
         city_name: city_name,
         city_code: city_code,
+        receipt_city_code: city_code,
+        receipt_city_name: city_name,
         receipt_region_name: city_name.join("  "),
         city_selected_data: city_name.map((item, index) => {
           return { label: item, value: city_code[index] };
@@ -518,11 +560,20 @@ export default {
         latitude: item["latitude"] || null,
         longitude: item["longitude"] || null,
         house_number: item["house_number"],
-      };
+      }
+    },
+    handleEdit(item) {
+      this.defaultValue = this.apiDataMapCompData(item);
 
       console.log("handleEdit", item, this.defaultValue);
       this.showAddress = true;
     },
+    handleSetDefault(item){
+      let is_default = item.is_default === "Y" ? "N" : "Y";
+      this.$set(item, 'is_default', is_default);
+      let saveData = this.apiDataMapCompData({...item, is_default});
+      this.handleSave(saveData);
+    },
     handleDel(item) {
       console.log("handleDel", item);
       this.$xdConfirm({
@@ -670,9 +721,10 @@ export default {
 
     &-address {
       &-item {
-        border-radius: unit(16, rpx);
+        // border-radius: unit(16, rpx);
         margin-bottom: unit(20, rpx);
         box-shadow: 0px 0px unit(20, rpx) 0px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
 
         &-top {
           display: flex;
@@ -695,7 +747,7 @@ export default {
           padding: unit(20, rpx) unit(40, rpx);
           font-size: unit(28, rpx);
           color: #fff;
-          border-radius: 0px 0px unit(16, rpx) unit(16, rpx);
+          // border-radius: 0px 0px unit(16, rpx) unit(16, rpx);
 
           & > view {
             display: flex;

package/src/components/JfbBaseAddress/XdTfkItem.vue

@@ -0,0 +1,117 @@
+<template>
+  <view class="xd-tfk-item" @click="handleSelectAddress">
+    <view class="item_top">
+      <view class="user_info">
+        {{ item.name }} <text style="margin-left: 20rpx;">{{ item.phone }}</text>
+        <view v-if="item.is_valid === 'N'"
+          style="position: absolute; right: 40rpx;top: 0;"
+        >
+          <xd-font-icon
+            size="32"
+            :color="dangerColor"
+            icon="iconmingchengtubiao"
+          ></xd-font-icon>
+        </view>
+      </view>
+      <view class="user_adr">{{item.province_name}}{{item.city_name}}{{item.area_name}}{{item.street_name}}{{ item.address_detail }} {{ item.house_number }}</view>
+    </view>
+    <view class="item_bottom">
+      <view class="is_default" @click.native.stop="setDefault">
+        <xd-radio :value="item.is_default === 'Y'" :width="52" :height="52" :iconSize="20"></xd-radio>
+        <view v-if="item.is_default === 'Y'">默认地址</view>
+        <view v-else>设为默认</view>
+      </view>
+      <view class="item_opera">
+        <view class="o_i" style="margin-right: 30rpx;" @click.native.stop="handleEdit">
+          <xd-font-icon class="icon" :icon="edit_icon" :size="26"></xd-font-icon> 编辑
+        </view>
+        <view class="o_i" @click.native.stop="handleDel">
+          <xd-font-icon class="icon" :icon="delete_icon" :size="26"></xd-font-icon> 删除
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+  import XdRadio from "@/components/XdRadio/XdRadio"
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon"
+  export default{
+    name:"XdTfkItem",
+    components: {
+      XdRadio,
+      XdFontIcon,
+    },
+    props:{
+      edit_icon: String,
+      delete_icon: String,
+      item: Object,
+      dangerColor: String,
+    },
+    data(){
+      return{
+      }
+    },
+    created(){
+    },
+    methods:{
+      handleSelectAddress(){
+        this.$emit("selectAddress")
+      },
+      handleEdit(){
+        this.$emit("editAddress", this.item)
+      },
+      handleDel(){
+        this.$emit("delAddress", this.item)
+      },
+      setDefault(){
+        this.$emit("setDefault", this.item)
+      }
+    },
+  }
+</script>
+<style lang="less" scoped>
+  .xd-tfk-item{
+    .item_top{
+      padding: 30rpx;
+    }
+    .user_info{
+      color: #191a1b;
+      font-size: 30rpx;
+      position: relative;
+    }
+    .user_adr{
+      color: #797d82;
+      font-size: 26rpx;
+      margin-top: 6rpx;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .item_bottom{
+      display: flex;
+      justify-content: space-between;
+      padding: 20rpx;
+      border-top: 1px solid #ededed;
+    }
+    .item_opera{
+      display: flex;
+      color: #797d82;
+      align-items: center;
+      .o_i{
+        display: flex;
+        align-items: center;
+        font-size: 26rpx;
+
+        .icon{
+          margin-right: 10rpx;
+        }
+      }
+    }
+    .is_default{
+      display: flex;
+      align-items: center;
+      font-size: 26rpx;
+      color: #797d82;
+    }
+  }
+</style>

package/src/components/JfbBaseOrderDetail/Attr.js

@@ -331,6 +331,16 @@ export default {
         inline: false,
         notice: '间距设置，<span style="color: red">单位：像素</span>。默认值：<span style="color: red">20</span>像素',
       },
+      {
+        label: "主体信息行间距:",
+        ele: 'el-input',
+        type: 'number',
+        valueKey: 'lineHeight',
+        groupKey:'style',
+        value: data['lineHeight'] || 20,
+        placeholder: '请输入主体信息行间距',
+        className: 'input80',
+      },
       {
         ele: 'title',
         label: '投影设置',

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
@@ -803,6 +815,7 @@ export default {
       },
       is_hot: "Y",
       logo: "",
+      lineHeight: 20,
 
       noticeBgc:'',
     };
@@ -1072,6 +1085,7 @@ export default {
       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);
     },
     getCountDown() {
       this.timer = setInterval(() => {

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: '原有布局', value: 'old'},
+          {label: '淘福客布局', value: 'tfk'},
+        ],
+        groupKey: "content",
+      },
       {
         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,

package/src/components/JfbBaseOrderList/XdTfkOrderItem.vue

@@ -0,0 +1,246 @@
+<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>
+      <view style="display: flex;align-items: center;">
+        共{{item.products.length}}件商品 实付
+        <xd-unit
+          :isOld="false"
+          :price="item.total_amount"
+          :color="mainColor"
+          :fontSize="28"></xd-unit>
+      </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;
+    }
+    .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>