gxd-uni-library-editx 1.0.0

package/src/components/XdStoreOrderList/XdStoreOrderList.vue

@@ -0,0 +1,450 @@
+<template>
+  <view class="xd-order">
+    <view
+      :style="{background: background}"
+      class="xd-order__item"
+      v-for="(item,index) in dataList"
+      :key="item.order_id"
+    >
+      <view class="xd-order__item-title">
+        <view>订单号：{{item.order_id}}</view>
+        <view>{{item.status}}</view>
+      </view>
+      <view class="xd-order__item-list">
+        <view v-for="(pItem,pIndex) in item.product" :key="pItem['product_id']" @click="toOrderDetail(item)">
+          <view :style="{width: productWidth + 'rpx', height: productHeight + 'rpx'}">
+            <image :src="pItem.thumb"></image>
+          </view>
+          <view style="
+         overflow: hidden;
+         text-overflow: ellipsis;
+         white-space: nowrap;">{{pItem['product_name']}}
+          </view>
+          <view>
+            <view>
+              <xd-unit
+                :price="pItem.sale_price"
+                :font-size="28"
+                font-weight="normal"
+                :iocn-size=".3"
+              ></xd-unit>
+            </view>
+            <view>x{{pItem['ct']}}</view>
+          </view>
+        </view>
+        <view
+          style="background: #fff"
+          class="xd-order__item-list-all"
+          v-if="isCut && item.allProduct && item.allProduct.length > 3"
+        >
+          <view>
+            <xd-font-icon
+              v-if="item.show_all"
+              size="28"
+              icon="iconxiashuangjiantou"
+              @click="handleShowAll(item)"
+            ></xd-font-icon>
+            <xd-font-icon v-else size="28" icon="iconshuangjiantoushang" @click="handleCloseAll(item)"></xd-font-icon>
+          </view>
+        </view>
+      </view>
+      <view class="xd-order__item-number">
+        <view>
+          <view>下单时间：</view>
+          <view>
+            {{item.placed_time}}
+          </view>
+        </view>
+        <view>
+          <view>合计：</view>
+          <view>
+            <xd-unit :price="item.price"></xd-unit>
+          </view>
+        </view>
+      </view>
+      <slot :item="item" :index="index">
+        <view
+          class="xd-order__item-btn"
+          v-if="item.status_code === '3008' || item.status_code === '3007' || uiType === 4 || uiType === 5"
+        >
+          <view v-if="item.status_code === '3008' || item.status_code === '3007'">
+            <xd-button
+              type="default"
+              size="mini"
+              radius="10rpx"
+              @click="cannelOrder(item)"
+            >取消订单
+            </xd-button>
+          </view>
+          <view v-if="item.status_code === '3008' || item.status_code === '3007'">
+            <xd-button
+              type="primary"
+              size="mini"
+              radius="10rpx"
+              @click="toPay(item)"
+            >去付款
+            </xd-button>
+          </view>
+          <view v-if="(uiType === 4 && item.status_code === '3000') || (uiType === 5 && item.status_code === '3010')">
+            <xd-button
+              type="primary"
+              size="mini"
+              radius="10rpx"
+              @click="toCashier(item)"
+            >再次购买
+            </xd-button>
+          </view>
+        </view>
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script>
+  /**
+   * XdShopOrderList 我的订单插件控件
+   * @description 在使用该插件订单数据列表必须完全加载之后才能初始化该插件（不支持异步加载）
+   *
+   * @property {Boolean} disabled = [true|false]    是否禁用
+   * @property {String}  btnType                    按钮颜色类型（primary,default,subPrimary,danger,info,warning,success）
+   * @property {String}  radius                     圆角处理
+   * @property {String}  size                       按钮大小（default，mini）
+   * @property {Boolean} isCut                      商品过多时是否开启折叠展示（default，false）
+   * @event {Function} click                        按钮点击事件e
+   */
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdUnit from "@/components/XdUnit/XdUnit";
+  import XdButton from "@/components/XdButton/XdButton";
+
+  export default {
+    components: {
+      XdButton,
+      XdUnit,
+      XdFontIcon
+    },
+    name: "XdStoreOrderList",
+    props: {
+      background: {
+        type: String,
+        default: '#fff'
+      },
+      type: {
+        type: String | Number,
+        required: true
+      },
+      nodata: {
+        type: String,
+        default: '您还没有相关订单'
+      },
+
+      list: {
+        type: Array | null,
+        required: true
+      },
+
+      productWidth: {
+        type: Number,
+        default: 150
+      },
+      productHeight: {
+        type: Number,
+        default: 150
+      },
+      isCut: {
+        type: Boolean,
+        default: false
+      },
+    },
+    data() {
+      return {
+        uiType: null, //选中订单类型
+
+        //订单列表数组列表
+        dataList: [],
+
+        //我的订单列表数据，null使用测试数据   array=> 使用正式数据
+        testData: [
+          {
+            "order_id": "m389261245389619200",
+            "placed_time": "2021-09-06 15:45:17",
+            "confirm_time": "2021-09-06 15:45:17",
+            "status": "\u652f\u4ed8\u4e2d",
+            "status_code": "3008",
+            "send_status_code": "N",
+            "price": 249,
+            "product": [{
+              "product_id": 1409469,
+              "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119153621543.jpg?x-oss-process=style\/200_200",
+              "product_name": "\u8d1d\u87ba\u6865 \u67f3\u5dde\u87ba\u86f3\u7c89\u666e\u901a\u88c5 330g*5\u5305",
+              "ct": 2,
+              "sale_price": 55,
+              "id": 448613
+            }, {
+              "product_id": 1409459,
+              "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119151849615.jpg?x-oss-process=style\/200_200",
+              "product_name": "JIAJIA\/\u52a0\u52a0 \u8c03\u5473\u54c1\u7ec4\u5408C\u6b3e",
+              "ct": 2,
+              "sale_price": 43,
+              "id": 448614
+            }, {
+              "product_id": 1409457,
+              "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119151624114.jpg?x-oss-process=style\/200_200",
+              "product_name": "JIAJIA\/\u52a0\u52a0 \u8c03\u5473\u54c1\u7ec4\u5408A\u6b3e 210g+900ml",
+              "ct": 1,
+              "sale_price": 53,
+              "id": 448615
+            },
+              {
+                "product_id": 1409480,
+                "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119151624114.jpg?x-oss-process=style\/200_200",
+                "product_name": "JIAJIA\/\u52a0\u52a0 \u8c03\u5473\u54c1\u7ec4\u5408A\u6b3e 210g+900ml",
+                "ct": 1,
+                "sale_price": 53,
+                "id": 448615
+              }
+            ]
+          },
+          {
+            "order_id": "s299419273976496128",
+            "placed_time": "2021-01-01 17:45:09",
+            "confirm_time": "2021-01-01 17:45:09",
+            "status": "\u5df2\u53d1\u8d27",
+            "status_code": "3000",
+            "send_status_code": "Y",
+            "price": 312,
+            "product": [{
+              "product_id": 423457,
+              "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20200426093257532.jpg?x-oss-process=style\/200_200",
+              "product_name": "\u91d1\u9f99\u9c7c \u9187\u9999\u83dc\u7c7d\u6cb9 5L*4\u6876",
+              "ct": 1,
+              "sale_price": 312,
+              "id": 161078
+            }]
+          }
+        ]
+      }
+    },
+
+    watch: {
+      list(value) {
+        this.init(value);
+      },
+
+      type(value) {
+        this.uiType = value;
+        this.init(this.list)
+      }
+    },
+
+    created() {
+      this.uiType = this.type;
+      this.init(this.list);
+    },
+
+
+    methods: {
+      init(list) {
+        if (list === null) {
+          if (this.uiType === 0 || this.uiType === 4 || this.uiType === 1) {
+            if (this.isCut) {
+              this.testData.map((item, index, arr) => {
+                item.show_all = true
+                if (item.product.length > 3) {
+                  item.allProduct = this.$xdUniHelper.cloneDeep(item.product)
+                  item.cutProduct = this.$xdUniHelper.cloneDeep(item.product).splice(0, 3)
+                  item.product = this.$xdUniHelper.cloneDeep(item.cutProduct)
+                }
+                arr.splice(index, 1, item)
+              })
+            }
+            this.dataList = this.$xdUniHelper.cloneDeep(this.testData);
+          } else {
+            this.dataList = [];
+          }
+        } else {
+          if (this.isCut) {
+            let tempList = this.$xdUniHelper.cloneDeep(list)
+            tempList.map((item, index, arr) => {
+              item.show_all = true
+              if (item.product.length > 3) {
+                item.allProduct = this.$xdUniHelper.cloneDeep(item.product)
+                item.cutProduct = this.$xdUniHelper.cloneDeep(item.product).splice(0, 3)
+                item.product = this.$xdUniHelper.cloneDeep(item.cutProduct)
+              }
+              arr.splice(index, 1, item)
+            })
+            this.dataList = tempList;
+          } else {
+            this.dataList = list
+          }
+        }
+      },
+
+
+      /**
+       * @description 去付款
+       * @param item
+       */
+      toPay(item) {
+        this.$emit('onToPay', item);
+      },
+
+      /**
+       * @description 取消订单
+       * @param item
+       */
+      cannelOrder(item) {
+        this.$emit('onCannelOrder', item);
+      },
+
+      /**
+       * @description 再次购买
+       * @param item
+       */
+      toCashier(item) {
+        this.$emit('onCashier', item);
+      },
+
+      /**
+       * @description 去订单详情
+       * @param item
+       */
+      toOrderDetail(item) {
+        this.$emit('onOrderDetail', item);
+      },
+
+      handleShowAll(item) {
+        console.log(item, 'itemitem')
+        item.product = this.$xdUniHelper.cloneDeep(item.allProduct)
+        item.show_all = false
+      },
+
+      handleCloseAll(item) {
+        item.product = this.$xdUniHelper.cloneDeep(item.cutProduct)
+        item.show_all = true
+      }
+
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-nodata {
+    line-height: unit(300, rpx);
+    color: #999;
+    text-align: center;
+    font-size: @xd-font-size-base + 2;
+  }
+
+  .xd-order {
+    &__item {
+      margin-top: unit(20, rpx);
+
+      &-title {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        line-height: unit(60, rpx);
+        border-bottom: 1px solid #efefef;
+        padding: unit(10, rpx) unit(20, rpx);
+        font-size: @xd-font-size-base + 2;
+
+        & > view:last-child {
+          color: #999;
+        }
+
+      }
+
+
+      &-list {
+        &-all {
+          display: flex;
+          justify-content: center !important;
+          align-items: center !important;
+          font-size: @xd-font-size-base + 2;
+        }
+
+        & > view {
+          display: flex;
+          justify-content: space-between;
+          align-items: flex-start;
+          padding: unit(20, rpx);
+          border-bottom: 1px solid #f8f8f8;
+
+          &:last-child {
+            border-bottom: 0;
+          }
+
+          &:hover {
+            background: #f8f8f8;
+          }
+
+          & > view:first-child {
+            border-radius: unit(10, rpx);
+            flex-shrink: 0;
+            margin-right: unit(30, rpx);
+
+            & > image {
+              width: 100%;
+              height: 100%;
+            }
+          }
+
+          & > view:nth-child(2) {
+            font-size: @xd-font-size-base;
+            flex: 1;
+            width: 0;
+          }
+
+          & > view:last-child {
+            text-align: right;
+            min-width: unit(100, rpx);
+            display: flex;
+            justify-content: flex-end;
+            align-items: flex-end;
+            flex-direction: column;
+            margin-left: unit(20, rpx);
+
+            & > view:first-child {
+
+            }
+
+            & > view:last-child {
+              font-size: @xd-font-size-base;
+              color: #999;
+            }
+          }
+        }
+      }
+
+      &-number {
+        font-size: @xd-font-size-base + 2;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: unit(20, rpx);
+        border-top: 1px solid #efefef;
+
+        & > view {
+          display: flex;
+          align-items: center;
+        }
+      }
+
+      &-btn {
+        height: unit(70, rpx);
+        display: flex;
+        justify-content: flex-end;
+        align-items: flex-start;
+        text-align: right;
+        padding: 0 unit(20, rpx) unit(10, rpx);
+
+
+        & > view {
+          margin-left: unit(20, rpx);
+        }
+      }
+    }
+  }
+
+</style>