add InvalidGoods component

2017-08-30 14:47:41 +08:00
parent bfa224f005
commit 75e042b8cb
8 changed files with 401 additions and 0 deletions
@@ -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>
+
@@ -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>