[improvement] rename packages dir to src (#3659)
This commit is contained in:
neverland
@@ -0,0 +1,183 @@
|
||||
/* eslint-disable */
|
||||
export default {
|
||||
goods_id: '946755',
|
||||
quota: 15,
|
||||
quota_used: 0,
|
||||
goods_info: {
|
||||
title: '测试商品',
|
||||
picture:
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/16/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2/2/w/100/h/100/q/75/format/jpg',
|
||||
price: 1
|
||||
},
|
||||
sku: {
|
||||
price: '1.00',
|
||||
stock_num: 227,
|
||||
none_sku: false,
|
||||
hide_stock: false,
|
||||
collection_id: 2261,
|
||||
tree: [
|
||||
{
|
||||
k: '颜色',
|
||||
k_id: '1',
|
||||
v: [
|
||||
{
|
||||
id: '30349',
|
||||
name: '天蓝色',
|
||||
imgUrl:
|
||||
'https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'
|
||||
},
|
||||
{
|
||||
id: '1215',
|
||||
name: '白色'
|
||||
}
|
||||
],
|
||||
k_s: 's1',
|
||||
count: 2
|
||||
},
|
||||
{
|
||||
k: '尺寸',
|
||||
k_id: '2',
|
||||
v: [
|
||||
{
|
||||
id: '1193',
|
||||
name: '1'
|
||||
},
|
||||
{
|
||||
id: '1194',
|
||||
name: '2'
|
||||
}
|
||||
],
|
||||
k_s: 's2',
|
||||
count: 2
|
||||
}
|
||||
],
|
||||
list: [
|
||||
{
|
||||
id: 2259,
|
||||
price: 100,
|
||||
discount: 100,
|
||||
code: '',
|
||||
s1: '1215',
|
||||
s2: '1193',
|
||||
s3: '0',
|
||||
s4: '0',
|
||||
s5: '0',
|
||||
stock_num: 110,
|
||||
goods_id: 946755
|
||||
},
|
||||
{
|
||||
id: 2260,
|
||||
price: 100,
|
||||
discount: 100,
|
||||
code: '',
|
||||
s1: '1215',
|
||||
s2: '1194',
|
||||
s3: '0',
|
||||
s4: '0',
|
||||
s5: '0',
|
||||
stock_num: 0,
|
||||
goods_id: 946755
|
||||
},
|
||||
{
|
||||
id: 2257,
|
||||
price: 100,
|
||||
discount: 100,
|
||||
code: '',
|
||||
s1: '30349',
|
||||
s2: '1193',
|
||||
s3: '0',
|
||||
s4: '0',
|
||||
s5: '0',
|
||||
stock_num: 111,
|
||||
goods_id: 946755
|
||||
},
|
||||
{
|
||||
id: 2258,
|
||||
price: 100,
|
||||
discount: 100,
|
||||
code: '',
|
||||
s1: '30349',
|
||||
s2: '1194',
|
||||
s3: '0',
|
||||
s4: '0',
|
||||
s5: '0',
|
||||
stock_num: 6,
|
||||
goods_id: 946755
|
||||
}
|
||||
],
|
||||
messages: [
|
||||
{
|
||||
datetime: '0',
|
||||
disable: false,
|
||||
multiple: '0',
|
||||
name: '留言1',
|
||||
type: 'text',
|
||||
required: '1'
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable: false,
|
||||
multiple: 0,
|
||||
name: '留言2',
|
||||
type: 'id_no',
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable: false,
|
||||
multiple: 0,
|
||||
name: '留言3',
|
||||
type: 'image',
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable: false,
|
||||
multiple: 1,
|
||||
name: '留言4',
|
||||
type: 'text',
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable: false,
|
||||
name: '数字',
|
||||
multiple: 0,
|
||||
type: 'tel',
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable: false,
|
||||
name: '邮件',
|
||||
multiple: 0,
|
||||
type: 'email',
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable: false,
|
||||
name: '日期',
|
||||
multiple: 0,
|
||||
type: 'date',
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable: false,
|
||||
name: '时间含日期',
|
||||
multiple: 0,
|
||||
type: 'time',
|
||||
required: 0
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable: false,
|
||||
name: '时间',
|
||||
multiple: 0,
|
||||
type: 'time',
|
||||
required: 0
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<!-- 基础用法 -->
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<div class="sku-container">
|
||||
<van-sku
|
||||
v-model="showBase"
|
||||
:sku="skuData.sku"
|
||||
:goods="skuData.goods_info"
|
||||
:goods-id="skuData.goods_id"
|
||||
:hide-stock="skuData.sku.hide_stock"
|
||||
:quota="skuData.quota"
|
||||
:quota-used="skuData.quota_used"
|
||||
reset-stepper-on-hide
|
||||
reset-selected-sku-on-hide
|
||||
disable-stepper-input
|
||||
:close-on-click-overlay="closeOnClickOverlay"
|
||||
:message-config="messageConfig"
|
||||
:custom-sku-validator="customSkuValidator"
|
||||
@buy-clicked="onBuyClicked"
|
||||
@add-cart="onAddCartClicked"
|
||||
/>
|
||||
<van-button
|
||||
block
|
||||
type="primary"
|
||||
@click="showBase = true"
|
||||
>
|
||||
{{ $t('basicUsage') }}
|
||||
</van-button>
|
||||
</div>
|
||||
</demo-block>
|
||||
|
||||
<!-- 自定义步进器 -->
|
||||
<demo-block :title="$t('title2')">
|
||||
<div class="sku-container">
|
||||
<van-sku
|
||||
hide-quota-text
|
||||
v-model="showStepper"
|
||||
:sku="skuData.sku"
|
||||
:goods="skuData.goods_info"
|
||||
:goods-id="skuData.goods_id"
|
||||
:hide-stock="skuData.sku.hide_stock"
|
||||
:quota="skuData.quota"
|
||||
:quota-used="skuData.quota_used"
|
||||
:custom-stepper-config="customStepperConfig"
|
||||
:message-config="messageConfig"
|
||||
@buy-clicked="onBuyClicked"
|
||||
@add-cart="onAddCartClicked"
|
||||
/>
|
||||
<van-button
|
||||
block
|
||||
type="primary"
|
||||
@click="showStepper = true"
|
||||
>
|
||||
{{ $t('title2') }}
|
||||
</van-button>
|
||||
</div>
|
||||
</demo-block>
|
||||
|
||||
<!-- 隐藏售罄sku -->
|
||||
<demo-block :title="$t('hideSoldoutSku')">
|
||||
<div class="sku-container">
|
||||
<van-sku
|
||||
hide-quota-text
|
||||
v-model="showSoldout"
|
||||
:sku="skuData.sku"
|
||||
:goods="skuData.goods_info"
|
||||
:goods-id="skuData.goods_id"
|
||||
:hide-stock="skuData.sku.hide_stock"
|
||||
:quota="skuData.quota"
|
||||
:quota-used="skuData.quota_used"
|
||||
:custom-stepper-config="customStepperConfig"
|
||||
:message-config="messageConfig"
|
||||
:show-soldout-sku="false"
|
||||
@buy-clicked="onBuyClicked"
|
||||
@add-cart="onAddCartClicked"
|
||||
/>
|
||||
<van-button
|
||||
block
|
||||
type="primary"
|
||||
@click="showSoldout = true"
|
||||
>
|
||||
{{ $t('hideSoldoutSku') }}
|
||||
</van-button>
|
||||
</div>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<div class="sku-container">
|
||||
<van-sku
|
||||
v-model="showCustom"
|
||||
:stepper-title="$t('stepperTitle')"
|
||||
:sku="skuData.sku"
|
||||
:goods="skuData.goods_info"
|
||||
:goods-id="skuData.goods_id"
|
||||
:hide-stock="skuData.sku.hide_stock"
|
||||
:quota="skuData.quota"
|
||||
:quota-used="skuData.quota_used"
|
||||
show-add-cart-btn
|
||||
reset-stepper-on-hide
|
||||
:initial-sku="initialSku"
|
||||
:message-config="messageConfig"
|
||||
@buy-clicked="onBuyClicked"
|
||||
@add-cart="onAddCartClicked"
|
||||
>
|
||||
<template #sku-header-price="{ price }">
|
||||
<div class="van-sku__goods-price">
|
||||
<span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ price }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #sku-actions="{ skuEventBus }">
|
||||
<div class="van-sku-actions">
|
||||
<van-button
|
||||
square
|
||||
size="large"
|
||||
type="warning"
|
||||
@click="onPointClicked"
|
||||
>
|
||||
{{ $t('button1') }}
|
||||
</van-button>
|
||||
<van-button
|
||||
square
|
||||
size="large"
|
||||
type="danger"
|
||||
@click="props.skuEventBus.$emit('sku:buy')"
|
||||
>
|
||||
{{ $t('button2') }}
|
||||
</van-button>
|
||||
</div>
|
||||
</template>
|
||||
</van-sku>
|
||||
<van-button
|
||||
block
|
||||
type="primary"
|
||||
@click="showCustom = true"
|
||||
>
|
||||
{{ $t('advancedUsage') }}
|
||||
</van-button>
|
||||
</div>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import skuData from './data';
|
||||
import { LIMIT_TYPE } from '../constants';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '自定义步进器',
|
||||
hideSoldoutSku: '隐藏售罄规格',
|
||||
stepperTitle: '我要买',
|
||||
button1: '积分兑换',
|
||||
button2: '买买买'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Custom Stepper Related Config',
|
||||
hideSoldoutSku: 'Hide Soldout Sku',
|
||||
stepperTitle: 'Stepper title',
|
||||
button1: 'Button',
|
||||
button2: 'Button'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
this.skuData = skuData;
|
||||
return {
|
||||
showBase: false,
|
||||
showCustom: false,
|
||||
showStepper: false,
|
||||
showSoldout: false,
|
||||
closeOnClickOverlay: true,
|
||||
initialSku: {
|
||||
s1: '30349',
|
||||
s2: '1193',
|
||||
selectedNum: 3
|
||||
},
|
||||
customSkuValidator: () => '请选择xxx',
|
||||
customStepperConfig: {
|
||||
quotaText: '单次限购100件',
|
||||
stockFormatter: (stock) => `剩余${stock}件`,
|
||||
handleOverLimit: (data) => {
|
||||
const { action, limitType, quota } = data;
|
||||
|
||||
if (action === 'minus') {
|
||||
this.$toast('至少选择一件商品');
|
||||
} else if (action === 'plus') {
|
||||
if (limitType === LIMIT_TYPE.QUOTA_LIMIT) {
|
||||
this.$toast(`限购${quota}件`);
|
||||
} else {
|
||||
this.$toast('库存不够了');
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
messageConfig: {
|
||||
uploadImg: (file, img) => new Promise(resolve => {
|
||||
setTimeout(() => resolve(img), 1000);
|
||||
}),
|
||||
uploadMaxSize: 3
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onBuyClicked(data) {
|
||||
this.$toast('buy:' + JSON.stringify(data));
|
||||
},
|
||||
|
||||
onAddCartClicked(data) {
|
||||
this.$toast('add cart:' + JSON.stringify(data));
|
||||
},
|
||||
|
||||
onPointClicked() {
|
||||
this.$toast('积分兑换');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../style/var";
|
||||
|
||||
.demo-sku {
|
||||
background-color: @white;
|
||||
|
||||
.sku-container {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user