add InvalidGoods component

packages/index.js

@@ -15,6 +15,7 @@ import ExpressWay from './express-way';
 import Field from './field';
 import Icon from './icon';
 import ImagePreview from './image-preview';
+import InvalidGoods from './invalid-goods';
 import Lazyload from './lazyload';
 import Loading from './loading';
 import NoticeBar from './notice-bar';
@@ -59,6 +60,7 @@ const components = [
   ExpressWay,
   Field,
   Icon,
+  InvalidGoods,
   Loading,
   NoticeBar,
   OrderGoods,
@@ -117,6 +119,7 @@ export {
   Field,
   Icon,
   ImagePreview,
+  InvalidGoods,
   Lazyload,
   Loading,
   NoticeBar,

packages/invalid-goods/Card.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="van-invalid-goods-card">
+    <div class="van-invalid-goods__thumb">
+      <img :src="item.img_url" />
+      <div class="van-invalid-goods-card__flag">失效</div>
+    </div>
+    <div class="van-invalid-goods-card__content">
+      <div class="van-invalid-goods-card__row">
+        <h4 class="van-invalid-goods-card__title">{{ item.title }}</h4>
+        <span class="van-invalid-goods-card__price">¥{{ item.price }}</span>
+      </div>
+      <div class="van-invalid-goods-card__row">
+        <div class="van-invalid-goods-card__sku">{{ item.sku }}</div>
+        <span  class="van-invalid-goods-card__num">x{{ item.num }}</span>
+      </div>
+      <div class="van-invalid-goods-card__desc">{{ item.unavailable_desc }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'van-invalid-goods-card',
+
+  props: {
+    item: Object
+  }
+};
+</script>
+

packages/invalid-goods/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <div class="van-invalid-goods" @click="showDetail = true">
+      <h3 class="van-invalid-goods__title">{{ title }}</h3>
+      <van-cell-group class="van-invalid-goods__container">
+        <div class="van-invalid-goods__gallery">
+          <div v-for="item in formattedGoods" :key="item.sku_id" class="van-invalid-goods__thumb">
+            <img :src="item.img_url" />
+          </div>
+        </div>
+        <div class="van-invalid-goods__count">
+          <span>共{{ formattedGoods.length }}件</span>
+          <van-icon name="arrow" />
+        </div>
+      </van-cell-group>
+    </div>
+    <van-actionsheet v-model="showDetail" :title="actionsheetTitle">
+      <div class="van-invalid-goods__list">
+        <van-invalid-goods-card  v-for="item in formattedGoods" :key="item.sku_id" :item="item" />
+      </div>
+    </van-actionsheet>
+  </div>
+</template>
+
+<script>
+import Card from './Card';
+import Icon from '../icon';
+import CellGroup from '../cell-group';
+import Actionsheet from '../actionsheet';
+
+export default {
+  name: 'van-invalid-goods',
+
+  components: {
+    [Card.name]: Card,
+    [Icon.name]: Icon,
+    [CellGroup.name]: CellGroup,
+    [Actionsheet.name]: Actionsheet
+  },
+
+  props: {
+    goods: {
+      type: Array,
+      required: true
+    },
+    title: {
+      type: String,
+      default: '以下商品无法一起购买，点击查看原因'
+    },
+    actionsheetTitle: {
+      type: String,
+      default: '以下商品无法一起下单'
+    }
+  },
+
+  data() {
+    return {
+      showDetail: false
+    };
+  },
+
+  methods: {
+    getSkuStr(arr) {
+      return arr.filter(item => item.v).map(item => item.v).join(', ');
+    }
+  },
+
+  computed: {
+    formattedGoods() {
+      return this.goods.map(item => ({
+        ...item,
+        price: parseFloat(item.price / 100, 10).toFixed(2),
+        sku: this.getSkuStr(item.sku)
+      }));
+    }
+  }
+};
+</script>

packages/vant-css/src/index.css

@@ -35,3 +35,4 @@
 @import './express-way.css';
 @import './pay-order.css';
 @import './order-goods.css';
+@import './invalid-goods.css';

packages/vant-css/src/invalid-goods.css

@@ -0,0 +1,121 @@
+@import "./mixins/ellipsis";
+
+$van-invalid-goods-photo-size: 90px;
+
+.van {
+  &-invalid-goods {
+    margin: 10px 0;
+
+    &__title {
+      color: #999;
+      font-size: 12px;
+      text-align: center;
+      margin-bottom: 10px;
+    }
+
+    &__container {
+      padding: 5px 10px;
+    }
+
+    &__gallery {
+      overflow: hidden;
+      height: $van-invalid-goods-photo-size;
+    }
+
+    &__thumb {
+      float: left;
+      display: flex;
+      height: 100%;
+      position: relative;
+      margin-right: 5px;
+      align-items: center;
+      justify-content: center;
+
+      img {
+        max-width: $van-invalid-goods-photo-size;
+        max-height: $van-invalid-goods-photo-size;
+      }
+    }
+
+    &__count {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 80px;
+      color: #666;
+      font-size: 14px;
+      padding-right: 8px;
+      line-height: calc($van-invalid-goods-photo-size + 10px);
+      background-color: #fff;
+      text-align: right;
+
+      span {
+        margin-right: 6px;
+        vertical-align: middle;
+      }
+    }
+
+    &__list {
+      max-height: 400px;
+      overflow-y: scroll;
+    }
+  }
+
+  &-invalid-goods-card {
+    color: #999;
+    margin: 10px 0;
+    padding: 5px 10px;
+    background-color: #fafafa;
+    height: $van-invalid-goods-photo-size;
+
+    &__flag {
+      position: absolute;
+      left: 0;
+      top: 70px;
+      width: $van-invalid-goods-photo-size;
+      color: #fff;
+      font-size: 12px;
+      line-height: 20px;
+      text-align: center;
+      background-color: rgba(0,0,0,.6);
+    }
+
+    &__content {
+      width: 100%;
+      padding-left: 100px;
+      box-sizing: border-box;
+    }
+
+    &__row {
+      display: flex;
+      line-height: 20px;
+    }
+
+    &__title,
+    &__sku {
+      flex: 1;
+      @mixin multi-ellipsis 2;
+    }
+
+    &__title,
+    &__price {
+      font-size: 14px;
+    }
+
+    &__num,
+    &__sku {
+      font-size: 12px;
+    }
+
+    &__desc {
+      color: #f60;
+      font-size: 12px;
+      margin-top: 5px;
+    }
+  }
+
+  .van-icon-arrow {
+    color: #666;
+    font-size: 10px;
+  }
+}