jufubao-base 1.0.192-beta1 → 1.0.193

package/src/components/JfbBaseUserOrder/JfbBaseUserOrder.vue

@@ -13,18 +13,25 @@
       <view class="jfb-base-user-order__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <view class="jfb-base-user-order__body">
-      <view class="x-line"></view>
-      <view :style="[bodyStyleComp]" v-if="list.length > 0">
+    <view
+      v-if="list.length > 0"
+      class="jfb-base-user-order__body"
+      :style="{ padding: outMargin}"
+    >
+      <view :style="{borderRadius: bodyRadius + 'rpx', backgroundColor:bodyBackgroundColor, padding:outPadding}">
         <view class="my-order__add">
-          <view :style="[titleStyleComp]">{{myOrderName}}</view>
-          <view
-            v-if="isShowBtn === 'Y'"
-            @click="handleToLink(afterUrl)"
-            :style="[addBtnStyleComp]"
-          >{{afterBuyName}}</view>
+          <view :style="{color:cardNameColor}">我的订单</view>
+          <view @click="handleToLink(afterUrl)" :style="{borderColor:subColor || mainColor,color: subColor || mainColor}">售后订单</view>
         </view>
-        <view class="my-order__content" :style="[contStyleComp]">
+        <view
+          class="my-order__content"
+          :style="{
+            borderRadius: radius + 'rpx',
+            background: backgroundColor,
+            marginTop: spacing + 'rpx',
+            border: borderBox,
+          }"
+        >
           <view class="my-order__content-type">
             <view
               class="my-order__content-type-item"
@@ -33,16 +40,14 @@
               @click="handleToLink(orderListUrl, item.status)"
             >
               <view class="my-order__content-type-item-icon">
-                <image v-if="item.image" :src="item.image"></image>
                 <xd-font-icon
-                  v-else
                   :icon="item.icon"
                   :color="iconColor"
                   :size="item.size"
                 ></xd-font-icon>
                 <view
                   v-if="item.num"
-                  :style="[popComp]"
+                  :style="{backgroundColor: iconColor}"
                   class="my-order__content-type-item-number"
                 >{{item.num}}</view>
               </view>
@@ -62,7 +67,6 @@
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins"
   import { getContainerPropsValue } from "@/utils/xd.base";
-  import getServiceUrl from "@/common/getServiceUrl";
   export default {
     name: "JfbBaseUserOrder",
     components: {
@@ -70,95 +74,23 @@
     },
     mixins: [componentsMixins,extsMixins,JfbBaseUserOrderMixin],
     computed: {
-      borderComp() {
-        if (this.is_border === 'Y') return `${this.is_border_w}rpx solid ${this.is_border_c}`;
-        else return '0';
-      },
-      titleStyleComp(){
-        return {
-          fontSize: this.titleStyle.fontSize || '28rpx',
-          color: `${this.titleStyle.color || this.cardNameColor ||'#333'}`,
-          fontWeight: `${this.titleStyle.fontWeight || 'normal'}`,
-        }
-      },
-      bodyStyleComp(){
-        let margin = `${this.checkValue(this.bodyMargin.top, 20)}rpx`;
-        margin = `${margin} ${this.checkValue(this.bodyMargin.right, 20)}rpx`;
-        margin = `${margin} ${this.checkValue(this.bodyMargin.bottom, 20)}rpx`;
-        margin = `${margin} ${this.checkValue(this.bodyMargin.left, 20)}rpx`;
-
-        let padding = `${this.checkValue(this.bodyPadding.top, 0)}rpx`;
-        padding = `${padding} ${this.checkValue(this.bodyPadding.right, 0)}rpx`;
-        padding = `${padding} ${this.checkValue(this.bodyPadding.bottom, 0)}rpx`;
-        padding = `${padding} ${this.checkValue(this.bodyPadding.left, 0)}rpx`;
-
-        return {
-          margin,
-          padding,
-          borderRadius: this.bodyRadius + 'rpx',
-          backgroundColor: this.bodyBackgroundColor,
-        }
+      outPadding() {
+        let str = `${this.checkValue(this.bodyPadding.top, 0)}rpx`;
+        str = `${str} ${this.checkValue(this.bodyPadding.right, 0)}rpx`;
+        str = `${str} ${this.checkValue(this.bodyPadding.bottom, 0)}rpx`;
+        str = `${str} ${this.checkValue(this.bodyPadding.left, 0)}rpx`;
+        return str
       },
-      addBtnStyleComp(){
-        let border = {};
-        if(this.addBtnBorder && this.addBtnBorder.type === 'Y') {
-          let value = this.addBtnBorder.value ||{};
-          if(value.width) border['borderWidth'] = value.width + 'rpx';
-          if(value.color) border['borderColor'] = value.color;
-          if(value.style) border['borderStyle'] = value.style;
-        }
-        let addBtnShadow = {};
-        if(this.addBtnShadow && this.addBtnShadow.type === 'Y') {
-          let value = this.addBtnShadow.value || {};
-          if(value.color && value.width) {
-            addBtnShadow['boxShadow'] = `0 0 ${value.width}rpx ${value.color}`
-          }
-        }
-        return {
-          color: this.addBtnStyle.color || this.mainColor,
-          fontSize: this.addBtnStyle.fontSize || '26rpx',
-          fontWeight: this.addBtnStyle.fontWeight || 'normal',
-          borderColor: this.mainColor,
-          borderWidth: '2rpx',
-          borderStyle:'solid',
-          backgroundColor: this.addBtnBgColor || 'rgba(0,0,0,0)',
-          borderRadius:this.addBtnRadius + 'rpx',
-          ...border,
-          ...addBtnShadow
-        }
+      outMargin() {
+        let str = `${this.checkValue(this.bodyMargin.top, 20)}rpx`;
+        str = `${str} ${this.checkValue(this.bodyMargin.right, 20)}rpx`;
+        str = `${str} ${this.checkValue(this.bodyMargin.bottom, 20)}rpx`;
+        str = `${str} ${this.checkValue(this.bodyMargin.left, 20)}rpx`;
+        return str
       },
-      popComp(){
-        return {
-          backgroundColor: this.popBgColor,
-          color: this.popColor || '#f00',
-        }
-      },
-      contStyleComp(){
-        let borderStyle = 'solid';
-        let borderWidth = 0;
-        let borderColor = 'rgba(0,0,0,0)';
-        if(this.is_border === 'Y') {
-          if(this.is_border_w !== undefined) borderWidth = this.is_border_w;
-          if(this.is_border_c !== undefined) borderColor = this.is_border_c;
-        }
-        if(this.contBorder && this.contBorder.type === 'Y') {
-          let value = this.contBorder.value ||{};
-          if(value.width) borderWidth = value.width + 'rpx';
-          if(value.color) borderColor = value.color;
-          if(value.style) borderStyle = value.style;
-        }
-        let padding = `${this.checkValue(this.contPadding.top, 40)}rpx`;
-        padding = `${padding} ${this.checkValue(this.contPadding.right, 20)}rpx`;
-        padding = `${padding} ${this.checkValue(this.contPadding.bottom, 34)}rpx`;
-        padding = `${padding} ${this.checkValue(this.contPadding.left, 20)}rpx`;
-        return {
-          borderRadius: this.radius + 'rpx',
-          backgroundColor: this.backgroundColor,
-          marginTop: this.spacing + 'rpx',
-          border: `${borderWidth} ${borderStyle} ${borderColor}`,
-          boxShadow: this.contShadow,
-          padding
-        }
+      borderBox() {
+        if (this.is_border === 'Y') return `${this.is_border_w}rpx solid ${this.is_border_c}`;
+        else return '0';
       }
     },
     data() {
@@ -166,41 +98,14 @@
         options: {},
         list: [],
 
-        //整体
-        bodyPadding: {},
-        bodyRadius: 0,
-        bodyBackgroundColor: 'rgba(0,0,0,0)',
-        bodyMargin: { },
-        spacing:20,
-
-        //内容列表
+        //基础
         color: '#333',
-        iconColor: '',
-
-        //我的标题
-        myOrderName: '我的订单',
-        cardNameColor: '#333',
-        titleStyle: {},
-
-        //售后订单
-        isShowBtn:'Y',
-        afterBuyName:'售后订单',
-        addBtnBgColor:'rgba(0,0,0,0)',
-        addBtnStyle:{},
-        addBtnBorder:{},
-        addBtnShadow:{},
-        addBtnRadius: '40',
-
-        //数字气泡
-        popColor:'#fff',
-        popBgColor:'#f00',
-
-        //content
         backgroundColor: 'rgba(0,0,0,0)',
         radius: 0,
-        contPadding:{},
-        contShadow:{},
-        contBorder:{},
+        iconColor: '',
+        spacing:20,
+
+        //边框
         is_border: 'Y',
         is_border_w: 0,
         is_border_c: '',
@@ -209,6 +114,13 @@
         afterUrl: null,
         orderListUrl: null,
 
+        //整体
+        bodyPadding: {top: 20, left: 20, right: 20, bottom: 20},
+        bodyRadius: 0,
+        bodyBackgroundColor: 'rgba(0,0,0,0)',
+        bodyMargin: {top: 0, left: 0, right: 0, bottom: 0},
+        cardNameColor: '#333',
+        subColor:'',
       }
     },
     watch: {
@@ -266,24 +178,6 @@
        * @param container {object} 业务组件对象自己
        */
       init(container) {
-        this.isShowBtn = getContainerPropsValue(container, 'content.isShowBtn', 'Y');
-        this.afterBuyName = getContainerPropsValue(container, 'content.afterBuyName', '售后订单');
-
-        //数字气泡
-        this.popColor = getContainerPropsValue(container, 'content.popColor', '#fff');
-        this.popBgColor = getContainerPropsValue(container, 'content.popBgColor', '#f00');
-
-
-        //标题
-        this.myOrderName = getContainerPropsValue(container, 'content.myOrderName', '我的订单')
-        this.titleStyle = getContainerPropsValue(container, 'content.titleStyle', {});
-
-        //添加按钮
-        this.addBtnBgColor = getContainerPropsValue(container, 'content.addBtnBgColor', 'rgba(0,0,0,0)');
-        this.addBtnStyle = getContainerPropsValue(container, 'content.addBtnStyle', {});
-        this.addBtnBorder = getContainerPropsValue(container, 'content.addBtnBorder', {});
-        this.addBtnRadius = getContainerPropsValue(container, 'content.addBtnRadius', '40');
-        this.addBtnShadow =  getContainerPropsValue(container, 'content.addBtnShadow', {});
 
         //整体
         this.bodyMargin = getContainerPropsValue(container, 'content.bodyMargin', {top: 0, left: 0, right: 0, bottom: 0});
@@ -301,29 +195,23 @@
 
         //基础
         this.radius = getContainerPropsValue(container, 'content.radius', 0);
+        this.color = getContainerPropsValue(container, 'content.textColor', '#333');
+        this.iconColor = getContainerPropsValue(container, 'content.iconColor', this.mainColor);
         this.backgroundColor = getContainerPropsValue(container, 'content.backgroundColor', '#f8f8f8');
-        this.contPadding = getContainerPropsValue(container, 'content.contPadding', '{}')
-        this.contShadow = this.getXdShadow({width:20, color:'rgba(0,0,0,0)'},getContainerPropsValue(container, 'content.contShadow', {}))
-        this.contBorder = getContainerPropsValue(container, 'content.contBorder', {});
+
+        //边框
         this.is_border = getContainerPropsValue(container, 'content.is_border', 'N');
         this.is_border_c = getContainerPropsValue(container, 'content.is_border_c', '#f8f8f8');
         this.is_border_w = getContainerPropsValue(container, 'content.is_border_w', '2');
 
-        //内容列表
+
         this.list = getContainerPropsValue(container, 'content.orderTypeList', []).map(item=>{
-          let image = '';
-          if(this.$xdUniHelper.checkVarType(item.image) === 'object') {
-            image = getServiceUrl(item.image.url, 'size1');
-          }
           return {
             ...item,
-            image,
             size: Number(item.size ? item.size: 18) * 2,
             num: 0
           }
-        });
-        this.color = getContainerPropsValue(container, 'content.textColor', '#333');
-        this.iconColor = getContainerPropsValue(container, 'content.iconColor', this.mainColor);
+        })
       },
 
       onJfbShow(options) {
@@ -331,7 +219,6 @@
       },
 
       handleToLink(path, type) {
-        if (this.$configProject['isPreview']) return;
         this.$xdUniHelper.navigateTo({
           url: type ? `${path}?type=${type}` : path
         })
@@ -357,7 +244,6 @@
       justify-content: space-between;
       align-items: center;
       font-size: unit(28, rpx);
-      min-height: 62rpx;
 
       & > view:nth-child(2) {
         width: unit(200, rpx);
@@ -374,6 +260,7 @@
         display: flex;
         justify-content: space-around;
         align-items: center;
+        padding: unit(40, rpx) unit(20, rpx) unit(35, rpx);
 
         &-item {
           font-size: unit(24, rpx);
@@ -381,18 +268,13 @@
           flex: 1;
 
           &-icon {
-            height: unit(54, rpx);
-            width: unit(54, rpx);
+            height: unit(40, rpx);
+            width: unit(40, rpx);
             display: flex;
             justify-content: center;
             align-items: center;
             margin: 0 auto;
             position: relative;
-
-            & > image {
-              max-width: 100%;
-              max-height: 100%;
-            }
           }
 
           &-text {