[Improvement] Reorganize demos (#1052)

2025-10-21 19:24:16 +00:00 · 2018-05-12 15:22:37 +08:00
parent a55eda8891
commit 4de1e7da55
83 changed files with 109 additions and 113 deletions
--- a/packages/sku/demo/index.vue
+++ b/packages/sku/demo/index.vue
@@ -0,0 +1,161 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <div class="sku-container">
+        <van-sku
+          v-model="showBase"
+          :sku="$t('sku').sku"
+          :goods="$t('sku').goods_info"
+          :goods-id="$t('sku').goods_id"
+          :hide-stock="$t('sku').sku.hide_stock"
+          :quota="$t('sku').quota"
+          :quota-used="$t('sku').quota_used"
+          reset-stepper-on-hide
+          reset-selected-sku-on-hide
+          disable-stepper-input
+          :close-on-click-overlay="closeOnClickOverlay"
+          :message-config="messageConfig"
+          @buy-clicked="onBuyClicked"
+          @add-cart="onAddCartClicked"
+        />
+        <van-button type="primary" @click="showBase = true" block>{{ $t('basicUsage') }}</van-button>
+      </div>
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <div class="sku-container">
+        <van-sku
+          v-model="showStepper"
+          :sku="$t('sku').sku"
+          :goods="$t('sku').goods_info"
+          :goods-id="$t('sku').goods_id"
+          :hide-stock="$t('sku').sku.hide_stock"
+          :quota="$t('sku').quota"
+          :quota-used="$t('sku').quota_used"
+          :custom-stepper-config="customStepperConfig"
+          :message-config="messageConfig"
+          @buy-clicked="onBuyClicked"
+          @add-cart="onAddCartClicked"
+        />
+        <van-button type="primary" @click="showStepper = true" block>{{ $t('title2') }}</van-button>
+      </div>
+    </demo-block>
+
+    <demo-block :title="$t('advancedUsage')">
+      <div class="sku-container">
+        <van-sku
+          v-model="showCustom"
+          :stepper-title="$t('stepperTitle')"
+          :sku="$t('sku').sku"
+          :goods="$t('sku').goods_info"
+          :goods-id="$t('sku').goods_id"
+          :hide-stock="$t('sku').sku.hide_stock"
+          :quota="$t('sku').quota"
+          :quota-used="$t('sku').quota_used"
+          show-add-cart-btn
+          reset-stepper-on-hide
+          :initial-sku="initialSku"
+          :message-config="messageConfig"
+          @buy-clicked="onBuyClicked"
+          @add-cart="onAddCartClicked"
+        >
+          <template slot="sku-header-price" slot-scope="props">
+            <div class="van-sku__goods-price">
+              <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span>
+            </div>
+          </template>
+          <template slot="sku-actions" slot-scope="props">
+            <div class="van-sku-actions">
+              <van-button bottom-action @click="onPointClicked">{{ $t('button1') }}</van-button>
+              <van-button type="primary" bottom-action @click="props.skuEventBus.$emit('sku:buy')">{{ $t('button2') }}</van-button>
+            </div>
+          </template>
+        </van-sku>
+        <van-button type="primary" @click="showCustom = true" block>{{ $t('advancedUsage') }}</van-button>
+      </div>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+import data from './data';
+import { LIMIT_TYPE } from '../../../packages/sku/constants';
+
+export default {
+  i18n: {
+    'zh-CN': {
+      sku: data['zh-CN'],
+      title2: '自定义步进器相关配置',
+      stepperTitle: '我要买',
+      button1: '积分兑换',
+      button2: '买买买'
+    },
+    'en-US': {
+      sku: data['en-US'],
+      title2: 'Custom Stepper Related Config',
+      stepperTitle: 'Stepper title',
+      button1: 'Button',
+      button2: 'Button'
+    }
+  },
+
+  data() {
+    return {
+      showBase: false,
+      showCustom: false,
+      showStepper: false,
+      closeOnClickOverlay: true,
+      initialSku: {
+        s1: '30349',
+        s2: '1193'
+      },
+      customStepperConfig: {
+        quotaText: '单次限购100件',
+        handleOverLimit: (data) => {
+          const { action, limitType, quota } = data;
+
+          if (action === 'minus') {
+            Toast('至少选择一件商品');
+          } else if (action === 'plus') {
+            if (limitType === LIMIT_TYPE.QUOTA_LIMIT) {
+              Toast(`限购${quota}件`);
+            } else {
+              Toast('库存不够了~~');
+            }
+          }
+        }
+      },
+      messageConfig: {
+        uploadImg: (file, img) => {
+          return new Promise(resolve => {
+            setTimeout(() => resolve(img), 1000);
+          });
+        },
+        uploadMaxSize: 3
+      }
+    };
+  },
+
+  methods: {
+    onBuyClicked(data) {
+      Toast(JSON.stringify(data));
+    },
+
+    onAddCartClicked(data) {
+      Toast(JSON.stringify(data));
+    },
+
+    onPointClicked() {
+      Toast('积分兑换');
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-sku {
+  .sku-container {
+    padding: 0 15px;
+  }
+}
+</style>