gxd-uni-library-editx 1.0.0

package/src/components/XdExpressTimeLine/XdExpressTimeLine.vue

@@ -0,0 +1,280 @@
+<template>
+  <view class="xd-express">
+    <view class="xd-express__info">
+      <view>
+        <view>订单编号：</view>
+        <view>{{information['orderId']}}</view>
+      </view>
+      <view>
+        <view>快递编号：</view>
+        <view>{{information['number']}}</view>
+      </view>
+      <view>
+        <view>国内承运人：</view>
+        <view>{{information['name']}}</view>
+      </view>
+      <view>
+        <view>{{noticeName}}</view>
+        <view>{{information['notice']}}</view>
+      </view>
+    </view>
+    <view class="ali">
+      <view class="ali_top borders" v-if="state !== 3">
+        <text class="ali_top_icon">收</text>
+        <text class="a14">浙江省杭州市西湖区 蒋村街道 紫霞街 110号</text>
+      </view>
+      <!-- ======="state": 0 ,1 ,2====== -->
+      <view class="ali_state">
+        <block v-for="(item,i) in datas" :key="i">
+          <view class="State_Four">
+            <view class="FourBox">
+              <text class="line" :class="[i === 0?'noline':'']"></text>
+              <text
+                class="ali_top_icon"
+                :class="[/^.*(签收|再次为您服务).*$/.test(item.remark)?'isOk':'']"
+                style="margin: 0 0;"
+                v-if="Type(item.remark) === true"
+              >{{item.remark | Type}}
+              </text>
+              <view class="ali_top_icons" style="margin: 0 0;" v-else>
+                <text class="line" :class="[i === 0?'noline':'']"></text>
+                <text class="ali_top_iconss"></text>
+                <text class="line" :class="[i ===0?'noline':'']"></text>
+              </view>
+              <text class="line" :class="[i === datas.length -1?'noline':'']"></text>
+            </view>
+            <view class="remark">
+              <text class="a14">{{item.remark}}</text>
+              <text class="a12" style="padding-top: 10rpx;">{{item.time}}</text>
+            </view>
+          </view>
+        </block>
+      </view>
+    </view>
+  </view>
+
+</template>
+
+<script>
+
+  /**
+   * @description 匹配规则
+   * @type {{p: RegExp, s: RegExp, d: RegExp, y: RegExp, l: RegExp}}
+   */
+  let reg = {
+    p: /^.*(派件中|派件|派件人|派送|安排投递).*$/, //派
+    l: /^.*(已收件|已取件|收件|取件|揽投).*$/, //揽
+    y: /^.*(转运|中转|营业部|集散|转场|下一站|到达).*$/, //运
+    d: /^.*(熊猫快收|代收|自提通知|合作点|上门自提|智能快递柜|快递柜).*$/, //待
+    s: /^.*(签收|再次为您服务|投递到|菜鸟驿站).*$/ //收
+  };
+
+  export default {
+    name: "XdExpressTimeLine",
+    props: {
+      noticeName:{
+        type: String,
+        default: '描述：'
+      },
+      /**
+       * @description 物流详细
+       * @example [{time: '2019-05-23 16:30:20',remark: '[杭州市]快件派送至【丰巢智能快递柜'}],
+       */
+      datas: {
+        type: Array,
+        required: true
+      },
+      state: {
+        type: Number, //2,3
+        required: true
+      },
+
+      /**
+       * @description 订单信息
+       * @example {"name":"顺丰快递","orderId":"s451214554121212","number":"21212121212112"}
+       */
+      information: {
+        type: Object,
+        required: true
+      },
+    },
+    data() {
+      return {
+
+      }
+    },
+    //过滤返回关键字
+    filters: {
+      Type(item) {
+        let Info;
+        let Phone = /\d{11}/;
+        if (Phone.test(item) && reg.p.test(item)) {
+          Info = "派";
+        } else if (reg.l.test(item)) {
+          Info = "揽";
+        } else if (reg.y.test(item)) {
+          Info = "运";
+        } else if (reg.d.test(item)) {
+          Info = "待";
+        } else if (reg.s.test(item)) {
+          Info = "收";
+        } else {
+          Info = "";
+        }
+        return Info
+      }
+    },
+    methods: {
+      //判断哪个该展示关键字--还是默认
+      Type(item) {
+        let Info;
+        let Phone = /\d{11}/;
+        if (Phone.test(item) && reg.p.test(item)) {
+          Info = true;
+        } else if (reg.l.test(item)) {
+          Info = true;
+        } else if (reg.y.test(item)) {
+          Info = true;
+        } else if (reg.d.test(item)) {
+          Info = true;
+        } else if (reg.s.test(item)) {
+          Info = true;
+        } else {
+          Info = false;
+        }
+        return Info
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-express {
+    &__info {
+      background: #fff;
+      margin-bottom: unit(20,rpx);
+      padding: unit(20, rpx);
+
+      & > view {
+        font-size: @xd-font-size-lg;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        line-height: unit(60,rpx);
+
+        & >view:first-child {
+          flex-shrink: 0;
+        }
+
+        &> view:last-child {
+          flex: 1;
+          width: 0;
+        }
+      }
+    }
+
+
+  }
+
+  .isOk {
+    background-color: #F0AD4E !important;
+  }
+
+  .ali_top_iconss {
+    width: unit(12, rpx);
+    height: unit(12, rpx);
+    display: block;
+    background-color: @custom-btn-info;
+    padding-right: unit(2, rpx);
+    border-radius: 50%;
+  }
+
+  .noline {
+    background-color: @xd-text-color-inverse !important;
+  }
+
+  .State_Four {
+    display: flex;
+    /* border: 1upx solid red; */
+  }
+
+  .FourBox {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-right: unit(24, rpx);
+  }
+
+  .line {
+    width: unit(2, rpx);
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    background-color: @custom-btn-info;
+  }
+
+  /* ============= */
+  .remark {
+    display: flex;
+    flex-direction: column;
+    width: 90%;
+    padding: unit(24, rpx) 0;
+  }
+
+  .borders {
+    border-bottom: 1px solid @xd-bg-color-hover;
+    padding: unit(24, rpx) 0;
+  }
+
+  .ali_top_icons {
+    width: unit(46, rpx);
+    height: unit(46, rpx);
+    background-color: @xd-text-color-inverse;
+    border-radius: 50%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    align-content: center;
+  }
+
+  .ali_top_icon {
+    width: unit(46, rpx);
+    height: unit(46, rpx);
+    background-color: #83AECF;
+    color: @xd-text-color-inverse;
+    font-size: @xd-font-size-base + 2;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: unit(20, rpx)
+  }
+
+  .ali_top {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  /* ========公共========= */
+  .a14 {
+    font-size: @xd-font-size-base + 2;
+    color: @xd-text-color;
+  }
+
+  .a12 {
+    font-size: @xd-font-size-sm;
+    color: #999;
+  }
+
+  .ali {
+    /* width: 100%; */
+    /* border: 1upx solid #F76260; */
+    background-color: @xd-text-color-inverse;
+    padding: 0 unit(24, rpx);
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+</style>