jufubao-base 1.0.21 → 1.0.23-beta2

package/src/components/JfbBaseOrderList/JfbBaseOrderList.vue

@@ -1,285 +1,767 @@
 <template>
   <view
     class="jfb-base-order-list"
-    @click="handleSelect"
-    :class="{ editx : isEditx && active }"
+    @click="handleEditxSelect"
+    :class="{
+      editx: isEditx && active,
+      noBorder: noBorder,
+    }"
   >
     <!--#ifdef H5-->
     <view
       class="jfb-base-order-list__edit"
-      :class="{ editx : isEditx && active }"
-      v-if="isEditx && active"
+      :class="{ editx: isEditx && active }"
+      v-if="isEditx && active && !noBorder"
     >
       <view class="jfb-base-order-list__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <view class="jfb-base-order-list__body">
-      <xd-tab
-        :list="tabList"
-        v-model="status"
-      ></xd-tab>
-
-      <view class="jfb-base-order-list__body-order">
-        <view
-          @click="handleToLink(item)"
-          class="jfb-base-order-list__body-order-item"
-          v-for="(item,index) in orderList"
-          :key="index">
+    <view
+      class="jfb-base-order-list__body"
+    >
+      <view class="fixed_top" :style="{top: (layoutInfo.top - 2)+'rpx'}">
+        <xd-tab
+          v-if="initStatus"
+          :tabIndex="tabIndex"
+          :list="tabList"
+          show-footer-line
+          @onTab="handleChange"
+        ></xd-tab>
+      </view>
+      <view style="height: 100rpx;"></view>
+      <view v-if="loadingList" class="jfb-base-order-list__body-order skeleton-wrap">
+        <view class="jfb-base-order-list__body-order-item"
+          v-for="i in 5" :key="i"
+        >
+          <view class="jfb-base-order-list__body-order-item-biz"><view></view></view>
           <view class="jfb-base-order-list__body-order-item-title">
-            <view>订单编号:{{item.order_number}}</view>
-            <view :style="{color:item.status==='Y'?'#FF6E6E':'#999999'}">{{item.statusName}}</view>
+            <view></view>
+            <view></view>
           </view>
-          <view class="jfb-base-order-list__body-order-item-content">
-            <image
-              :src="item.img"></image>
-            <view class="jfb-base-order-list__body-order-item-content-info">
-              <view class="jfb-base-order-list__body-order-item-content-info-name">{{item.name}}</view>
-              <view class="jfb-base-order-list__body-order-item-content-info-price">
-                <view :style="{fontSize:'32rpx',color: $mainColor}">
-                  <xd-unit
-                    :price="item.price"
-                    :color="$mainColor"
-                    :fontSize="32"
-                  ></xd-unit>
-                </view>
-                <view style="font-size: 28rpx;color: #999999;display: flex;align-items: center">
-                  <xd-font-icon size="20" icon="icondanchuangguanbi_xian" style="margin-right: 8rpx"></xd-font-icon>
-                  {{item.num}}
+          <view class="order-list">
+            <view
+              class="jfb-base-order-list__body-order-item-content">
+              <image></image>
+              <view class="jfb-base-order-list__body-order-item-content-info">
+                <view class="jfb-base-order-list__body-order-item-content-info-name"></view>
+                <view class="brand_name"></view>
+                <view class="jfb-base-order-list__body-order-item-content-info-price">
+                  <view></view>
+                  <view class="info-price"></view>
                 </view>
               </view>
             </view>
           </view>
           <view class="jfb-base-order-list__body-order-item-bottom">
-            <view>下单时间:{{item.created}}</view>
-            <view>合计:
-              <xd-unit
-                :price="item.total"
-                :color="$mainColor"
-                :fontSize="28"
-              ></xd-unit> </view>
+            <view></view>
+            <view></view>
           </view>
         </view>
       </view>
+      <template v-else>
+        <view
+          v-if="orderList && orderList.length > 0"
+          class="jfb-base-order-list__body-order"
+          :style="{ padding: outMargin }"
+        >
+          <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="jfb-base-order-list__body-order-item-pay"
+                v-if="item.buttons.length"
+              >
+                <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>
+          </template>
+          <template v-if="layout_style === 'tfk'">
+            <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',
+              }"
+            >
+              <xd-tfk-order-item 
+                :mainColor="mainColor"
+                :isShowOrderNo="isShowOrderNo"
+                :brandTextColor="brandTextColor"
+                :item="item"
+                @handleBtnEvent="action => handleBtnEvent(action, item)"
+              ></xd-tfk-order-item>
+            </view>
+          </template>
+        </view>
+        <view v-else class="jfb-base-order-list__body-no">
+          <xd-font-icon
+            size="120"
+            color="#ccc"
+            icon="iconzanwudingdan"
+          ></xd-font-icon>
+          <view>暂无订单</view>
+        </view>
+      </template>
+
     </view>
   </view>
 </template>
 
 <script>
-  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
-  import XdTab from "@/components/XdTab/XdTab";
-  import XdUnit from "@/components/XdUnit/XdUnit";
-  import { jfbRootExec } from "@/utils/xd.event";
-  import JfbBaseOrderListMixin from "./JfbBaseOrderListMixin";
-  import { getContainerPropsValue } from "@/utils/xd.base";
-  export default {
-    name: "JfbBaseOrderList",
-    components: {
-      XdFontIcon,
-      XdTab,
-      XdUnit
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import XdTab from "@/components/XdTab/XdTab";
+import XdUnit from "@/components/XdUnit/XdUnit";
+import XdButton from "@/components/XdButton/XdButton";
+import { jfbRootExec } from "@/utils/xd.event";
+import JfbBaseOrderListMixin from "./JfbBaseOrderListMixin";
+import componentsMixins from "@/mixins/componentsMixins";
+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",
+  components: {
+    XdFontIcon,
+    XdTab,
+    XdUnit,
+    XdButton,
+    XdTfkOrderItem,
+  },
+  mixins: [componentsMixins, extsMixins, JfbBaseOrderListMixin],
+  data() {
+    return {
+
+      showLen: 3,
+      tabList: [],
+      tabIndex: 0,
+      page_size: 10,
+      page_token: 1,
+      hasNext: true,
+      next_page_token: "",
+      orderList: [],
+      detailPath: "",
+      payPath: "",
+      status: null, //全部、已完成、已取消
+      initStatus: false,
+      loadingList: true,
+
+      //基础
+      radius: 0,
+      backgroundColor: "",
+      brandTextColor:'',
+      padding: 0,
+
+      //投影
+      is_shadow: "Y",
+      is_shadow_bg: 0,
+      is_shadow_w: 0,
+      sectionShadow: "",
+
+      //边框
+      is_border: "Y",
+      is_border_w: 0,
+      is_border_c: "",
+      sectionBorder: "",
+
+      //其他
+      margin: {
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+      },
+      layout_style: "old",
+      isShowOrderNo: "Y",
+
+      noticeBgc:'',
+    };
+  },
+
+  computed: {
+    outMargin() {
+      let str = `${this.checkValue(this.margin.top, 20)}rpx`;
+      str = `${str} ${this.checkValue(this.margin.right, 20)}rpx`;
+      str = `${str} ${this.checkValue(this.margin.bottom, 20)}rpx`;
+      str = `${str} ${this.checkValue(this.margin.left, 20)}rpx`;
+      return str
     },
-    mixins: [
-      JfbBaseOrderListMixin
-    ],
-    data() {
-      return {
-        tabList: [
-          {
-            name: '全部',
-            value: '0'
-          },
-          {
-            name: '已取消',
-            value: '1'
-          },
-          {
-            name: '已完成',
-            value: '2'
-          }
-        ],
-        orderList: [
-          {
-            order_number: 2121212121212121,
-            status: 'Y',
-            statusName: '已完成',
-            img: 'https://img.js.design/assets/img/6359fa51fac2712f7f3ecfa0.png#08226879b3e8fe27fc089d9723a2d22b',
-            name: '万达影院兑换码',
-            isCode: true,
-            type: '普通',
-            time: '2022-11-01 16:20:00',
-            price: 39,
-            num: 1,
-            total: 128,
-            created: '2022-12-12 12:43'
-          },
-          {
-            order_number: 2121212121212121,
-            status: 'Y',
-            statusName: '已完成',
-            img: 'https://img.js.design/assets/img/6359fa51fac2712f7f3ecfa0.png#08226879b3e8fe27fc089d9723a2d22b',
-            name: '万达影院兑换码',
-            isCode: false,
-            type: '普通',
-            time: '2022-11-01 16:20:00',
-            price: 39,
-            num: 1,
-            total: 128,
-            created: '2022-12-12 12:43'
-          }
-        ],
-        detailPath: '',
-        status: null, //全部、已完成、已取消
-        //todo
-      }
+    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;
     },
-    watch: {
-      container(value) {
-        this.init(value)
-      }
+    borderBox() {
+      // if (this.is_border === "Y")
+      //   return `${this.is_border_w}rpx solid ${this.is_border_c}`;
+      // else return "0";
+      return this.sectionBorder;
+    },
+  },
+  watch: {
+    container(value,oldValue) {
+      if(JSON.stringify(value) === JSON.stringify(oldValue)) return;
+      if (this.$configProject['isPreview']) this.init(value)
+    },
+  },
+  created() {
+    this.noticeBgc = Color(this.warningColor).alpha(0.2).toString();
+    this.init(this.container);
+  },
+  methods: {
+    getKey(id, index){
+      return  id + index;
+    },
+    getBtnType(action) {
+      if (action === "pay") return "primary";
+      if (action === "cancel_unpaid") return "info";
+      return "default";
     },
-    created() {
-      this.init(this.container);
 
-      //todo
+    onJfbLoad(options) {
+      let status = options.status || options.type;
+      //地址栏设置值
+      if (status) {
+        this.tabIndex = this.tabList.findIndex((item) => {
+          return item.status === status;
+        });
+      }
+      this.initStatus = true;
+      this.getList(status);
     },
-    methods: {
-      onJfbLoad(options) {
+    /**
+     * @description 监听事件变化
+     * @param container {object} 业务组件对象自己
+     */
+    init(container) {
+      this.margin = getContainerPropsValue(container, "content.margin", {top: 0, left: 0, right: 0, bottom: 0,});
+      this.radius = getContainerPropsValue(container, "content.radius", 0);
+      this.backgroundColor = getContainerPropsValue(container, "content.backgroundColor", "#f8f8f8");
+      this.brandTextColor = getContainerPropsValue(container, "content.brandTextColor", this.mainColor);
+      this.padding = getContainerPropsValue(container, "content.padding", 20);
 
-        // jfbRootExec('baiduUserLogin', {
+      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");
+      let sectionShadow = getContainerPropsValue(container, "content.sectionShadow", "");
+      this.sectionShadow = this.getShadowCompatibleOldStyle(sectionShadow, {
+        type: this.is_shadow,
+        width: this.is_shadow_w,
+        color: this.is_shadow_bg,
+      })
 
-        //   vm: this,//   data: {
+      this.is_border = getContainerPropsValue(container, "content.is_border", "N");
+      this.is_border_c = getContainerPropsValue(container, "content.is_border_c", "#fff");
+      this.is_border_w = getContainerPropsValue(container, "content.is_border_w", 2);
+      let sectionBorder = getContainerPropsValue(container, "content.sectionBorder", "");
+      this.sectionBorder = this.getBorderCompatibleOldStyle(sectionBorder, {
+        type: this.is_border,
+        width: this.is_border_w,
+        color: this.is_border_c,
+      })
 
-        //     account: 'gaoshiyong',//     password: '123456789',//     type: 3,//     ...options
+      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,
+          ...item,
+          size: Number(item.size ? item.size : 18) * 2,
+        };
+      });
 
-        //   }
+    },
 
-        // }).then().catch()
-      },
-      /**
-       * @description 监听事件变化
-       * @param container {object} 业务组件对象自己
-       */
-      init(value) {
-
-        //this.bgcolor = getContainerPropsValue(value, 'content.bgcolor', '#fff');
-        this.detailPath = getContainerPropsValue(value, 'content.path')
-        this.status = this.$xdUniHelper.parseURL()['params'].status;
-        //this.height = getContainerPropsValue(value, 'content.height', 10);
-      },
-      handleToLink(item) {
+    switchOpen(item){
+      item['isOpen'] = !item['isOpen']
+    },
+
+    switchOpen(item){
+      item['isOpen'] = !item['isOpen']
+    },
+
+    cancelUnPayOrder(main_order_id) {
+      this.$xdConfirm({
+        styles: this.styles,
+        content: "是否取消订单?",
+        success: (res) => {
+          if (res.confirm) {
+            this.$xdShowLoading({});
+            jfbRootExec("cancelBaseOrder", {
+              vm: this,
+              data: {
+                main_order_id,
+              },
+            }).then((res) => {
+              this.page_token = 1;
+              setTimeout(() => {
+                this.$xdHideLoading();
+                this.$xdAlert({
+                  content: "取消成功",
+                });
+                this.getList(this.tabList[this.tabIndex].status);
+              }, 3000);
+            });
+          }
+        },
+      });
+    },
+
+    handleBtnEvent(action, item) {
+      if (action === "cancel_unpaid") {
+        //取消订单
+        this.cancelUnPayOrder(item.main_order_id);
+      } else if (action === "pay") {
+        //去支付
+        if (this.$configProject.type === "food") {
+          console.log(
+            getApp().globalData.$xd.brandInfo,
+            "getApp().globalData.$xd.brandInfo"
+          );
+          let callbackUrl = `${window.location.protocol}//${window.location.host}/system/pay/success?order_id=${item["pay_order_id"]}`;
+          this.$xdUniHelper.navigateTo({
+            url: `${getApp().globalData.$xd.brandInfo.pay_url}?order_id=${
+              item["pay_order_id"]
+            }&callback_url=${callbackUrl}`,
+          });
+          return;
+        }
         this.$xdUniHelper.navigateTo({
-          path: `${this.detailPath}?id=${item.order_id}`
+          url: `${this.payPath}?order_id=${item.pay_order_id}&main_order_id=${item.main_order_id}`,
+        });
+      }
+    },
+
+    getList(status) {
+      this.$xdShowLoading({});
+      let tab = "all";
+      if (status) tab = this.tabList[this.tabIndex].status;
+      jfbRootExec("getBaseOrderList", {
+        vm: this,
+        data: {
+          tab,
+          page_size: this.page_size,
+          page_token: this.page_token,
+        },
+      })
+        .then((res) => {
+          this.loadingList = false;
+          this.$xdHideLoading();
+          console.log(res.list, "list");
+          let list = res.list.map((item) => {
+            item["isOpen"] = false;
+            item.products = item.products.map((prod, i) => {
+              prod['key'] = prod.product_id + i;
+              prod["product_thumb"] = prod.product_thumb
+                ? getServiceUrl(prod.product_thumb)
+                : "";
+              return prod;
+            });
+            item.buttons = item.buttons.map((btn, i) => {
+              btn["key"] = btn.action + i;
+              return btn;
+            })
+            item["created_time_text"] = this.$xdUniHelper.getDate(
+              item["created_time"] * 1000
+            ).fullTime;
+            return item;
+          });
+          if (this.page_token === 1) {
+            this.orderList = list;
+          } else {
+            this.orderList = this.orderList.concat(list);
+          }
+          this.hasNext = res.next_page_token !== "";
+          this.next_page_token = res.next_page_token;
         })
-      },
-      onJfbScroll(options) {
-        console.log('event.onJfbScroll', options)
-      },
-      onJfbReachBottom(options) {
-        console.log('event.onJfbReachBottom', options)
-      },
-      onJfbShow(options) {
-        console.log('event.onJfbShow', options)
-      },
-      onJfbHide(options) {
-        console.log('event.onJfbHide', options)
-      },
-      onJfbBack(options) {
-        console.log('event.onJfbBack', options)
-      },
-    }
-  }
+        .catch((err) => {
+          this.$xdHideLoading();
+        });
+    },
+
+    handleChange(item, index) {
+      if (index === this.tabIndex) return;
+      this.tabIndex = index;
+      this.page_token = 1;
+      this.hasNext = true;
+      this.getList(item);
+      // #ifdef H5
+      let params = this.$xdUniHelper.parseURL().params;
+      params["type"] = item.status;
+      history.replaceState(
+        null,
+        null,
+        `?${this.$xdUniHelper.jsonToParams(params)}`
+      );
+      // #endif
+    },
 
+    handleToLink(path, item) {
+      //跳转到第三方订单详情
+      if(item['third_order_detail_url']) {
+        this.$xdUniHelper.navigateTo({
+          url: item['third_order_detail_url'],
+        });
+      }else{
+        this.$xdUniHelper.navigateTo({
+          url: `${path}?id=${item.main_order_id}`,
+        });
+      }
+    },
+
+    onJfbReachBottom(options) {
+      console.log("1111");
+      if (this.hasNext) {
+        this.page_token = this.next_page_token;
+        this.getList(this.tabList[this.tabIndex].status);
+      }
+    },
+    onJfbShow(options) {
+      this.onJfbLoad(options);
+    },
+  },
+};
 </script>
 
 <style scoped lang="less">
-  @import "./JfbBaseOrderListLess.less";
+@import "./JfbBaseOrderListLess.less";
+
+.order-list {
+  position: relative;
+  &-icon {
+    position: absolute;
+    bottom: unit(-42, rpx);
+    left: 50%;
+    width: unit(64, rpx);
+    height: unit(64, rpx);
+    transform: translateX(-50%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.jfb-base-order-list {
+  &__body {
+    .fixed_top{
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      background: #FFFFFF;
+      z-index: 999;
+    }
+    &-no {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      color: #ccc;
+      font-size: unit(32, rpx);
+      margin-top: unit(360, rpx);
+      & > view {
+        margin-top: unit(30, rpx);
+      }
+    }
+    &-order {
+      .brand-name {
+        font-size: 24rpx;
+        margin-bottom: 6rpx;
+        .uni-max-cut(2, 64);
+        line-height: 32rpx;
+      }
+      &-item {
+        .skeleton-wrap & {
+          background-color: #FFFFFF;
+          border: 1px solid #EEEEEE;
+          border-radius: 10rpx;
+          margin: 20rpx;
+        }
+        &-biz {
+          color: #333333;
+          font-size: unit(28, rpx);
+          height: unit(90, rpx);
+          padding: 0 unit(40, rpx);
+          border-bottom: unit(2, rpx) solid #eee;
+          display: flex;
+          align-items: center;
 
-  .jfb-base-order-list {
-    &__body{
-      &-order {
-        padding: unit(40, rpx) 0;
+          & > view{
+            .skeleton-wrap &{
+              .skeleton-item(100rpx, 28rpx);
+            }
+          }
+        }
 
-        &-item {
-          padding: unit(40, rpx);
-          border-radius: unit(20, rpx);
-          box-shadow: 0px unit(4, rpx) unit(24, rpx) 0px rgba(154, 0, 255, 0.05);
-          margin: 0 unit(40, rpx) unit(24, rpx) unit(40, rpx);
+        &-title {
+          padding: 0 unit(40, rpx);
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          font-size: unit(24, rpx);
+          /*border-bottom: unit(2, rpx) solid #f8f8f8;*/
+          height: unit(80, rpx);
 
-          &-title {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            font-size: unit(24, rpx);
-            border-bottom: unit(2, rpx) solid #eee;
+          & > view:first-child {
+            color: #333;
+            .skeleton-wrap &{
+              .skeleton-item(300rpx, 28rpx);
+            }
+          }
 
-            & > view:first-child {
-              color: #333;
-              padding-bottom: unit(24, rpx);
+          & > view:nth-child(2) {
+            .skeleton-wrap &{
+              .skeleton-item(100rpx, 28rpx);
             }
+          }
+        }
+
+        &-content {
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          padding: unit(20, rpx) unit(40, rpx);
 
-            & > view:nth-child(2) {
-              padding-bottom: unit(24, rpx);
+          image {
+            width: unit(160, rpx);
+            height: unit(160, rpx);
+            border-radius: unit(8, rpx);
+            flex-shrink: 0;
+            .skeleton-wrap &{
+              .skeleton-item(160rpx, 160rpx);
             }
           }
 
-          &-content {
+          &-info {
+            flex: 1;
             display: flex;
-            align-items: center;
-            padding: unit(30, rpx) 0;
+            flex-direction: column;
+            justify-content: space-between;
+            margin-left: unit(24, rpx);
 
-            image {
-              width: unit(160, rpx);
-              height: unit(160, rpx);
-              border-radius: unit(8, rpx);
+            &-name {
+              font-size: unit(32, rpx);
+              color: #333333;
+              font-weight: 500;
+              .uni-max-cut(1, 64);
+              line-height: unit(64, rpx);
+
+              .skeleton-wrap &{
+                .skeleton-item(160rpx, 48rpx);
+              }
             }
 
-            &-info {
-              flex: 1;
+            &-skuname {
+              color: #999999;
+              font-size: unit(24, rpx);
+              .uni-max-cut(2, 72);
+              line-height: unit(36, rpx);
+            }
+
+            &-item {
+              font-size: unit(24, rpx);
+              color: #999999;
+            }
+
+            &-sku {
+              color: #999999;
+              font-size: unit(24, rpx);
+            }
+
+            &-price {
+              padding-top: unit(10, rpx);
               display: flex;
-              flex-direction: column;
               justify-content: space-between;
-              margin-left: unit(24, rpx);
-              height: unit(160, rpx);
-
-              &-name {
-                font-size: unit(32, rpx);
-                color: #333333;
-                font-weight: 500;
+              align-items: center;
+              .skeleton-wrap &{
+                .skeleton-item(100%, 32rpx);
+                margin-top: 20rpx;
               }
+            }
+          }
+        }
 
-              &-item {
-                font-size: unit(24, rpx);
-                color: #999999;
-              }
+        &-bottom {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          font-size: unit(24, rpx);
+          border-top: unit(2, rpx) solid #eee;
+          padding: 0 unit(40, rpx);
+          height: unit(90, rpx);
+          flex-flow: wrap;
 
-              &-price {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-              }
+          & > view:first-child {
+            color: #999;
+            .skeleton-wrap &{
+              .skeleton-item(300rpx, 28rpx);
             }
           }
 
-          &-bottom {
+          & > view:nth-child(2) {
             display: flex;
             align-items: center;
-            justify-content: space-between;
-            font-size: unit(24, rpx);
-            border-top: unit(2, rpx) solid #eee;
-
-            & > view:first-child {
-              color: #999;
-              padding-top: unit(24, rpx);
+            & > view {
+              margin-left: unit(10, rpx);
             }
-
-            & > view:nth-child(2) {
-              padding-top: unit(24, rpx);
-              display: flex;
-              align-items: center;
+            .skeleton-wrap &{
+              .skeleton-item(300rpx, 28rpx);
             }
           }
+
+          & >view:nth-child(3){
+            text-align: right;
+            display: flex;
+            width: 100%;
+            flex-shrink: 0;
+            align-items: center;
+            justify-content: flex-end;
+            padding-bottom: 10rpx;
+          }
+        }
+
+        &-pay {
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          border-top: unit(2, rpx) solid #eee;
+          padding: 0 unit(40, rpx);
+          height: unit(90, rpx);
+          & > view {
+            margin-left: unit(20, rpx);
+          }
+        }
+
+        &:last-child {
+          margin-bottom: 0;
         }
       }
     }
   }
+}
+
+/deep/ .tab-scroll__item {
+  padding: 0 3.7vw !important;
+  & > view:last-child {
+    bottom: unit(-8, rpx) !important;
+  }
+}
+
+.marginLeft {
+  margin-left: unit(20, rpx);
+}
+
+.marginLeft8 {
+  margin-left: unit(8, rpx);
+}
+
+.info-price {
+  font-size: unit(20, rpx);
+  color: #999999;
+  display: flex;
+  align-items: center;
+  & > text:last-child {
+    margin-left: unit(6, rpx);
+  }
+}
 </style>