mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-23 09:52:57 +08:00
style(Sku): fix header height when hide header image
This commit is contained in:
chenjiahan
parent
84e09a54bd
commit
ecb6bfccb5
@ -1,205 +1,207 @@
|
|||||||
export const skuData = {
|
export function getSkuData(large_picture_preview = false) {
|
||||||
goods_id: '946755',
|
return {
|
||||||
quota: 15,
|
goods_id: '946755',
|
||||||
quota_used: 0,
|
quota: 15,
|
||||||
start_sale_num: 10,
|
quota_used: 0,
|
||||||
goods_info: {
|
start_sale_num: 10,
|
||||||
title: '测试商品',
|
goods_info: {
|
||||||
picture:
|
title: '测试商品',
|
||||||
'https://img.yzcdn.cn/upload_files/2017/03/16/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2/2/w/100/h/100/q/75/format/jpg',
|
picture:
|
||||||
price: 1,
|
'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',
|
sku: {
|
||||||
stock_num: 227,
|
price: '1.00',
|
||||||
none_sku: false,
|
stock_num: 227,
|
||||||
hide_stock: false,
|
none_sku: false,
|
||||||
collection_id: 2261,
|
hide_stock: false,
|
||||||
tree: [
|
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: '白色',
|
|
||||||
imgUrl:
|
|
||||||
'https://img.yzcdn.cn/upload_files/2017/03/16/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2/2/w/100/h/100/q/75/format/jpg',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
k_s: 's1',
|
|
||||||
count: 2,
|
|
||||||
large_picture_preview: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
properties: [
|
|
||||||
{
|
|
||||||
k_id: 124,
|
|
||||||
k: '加料',
|
|
||||||
is_multiple: true,
|
|
||||||
v: [
|
|
||||||
{
|
{
|
||||||
id: 1224,
|
k: '颜色',
|
||||||
name: '布丁',
|
k_id: '1',
|
||||||
price: 3,
|
v: [
|
||||||
|
{
|
||||||
|
id: '30349',
|
||||||
|
name: '天蓝色',
|
||||||
|
imgUrl:
|
||||||
|
'https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1215',
|
||||||
|
name: '白色',
|
||||||
|
imgUrl:
|
||||||
|
'https://img.yzcdn.cn/upload_files/2017/03/16/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2/2/w/100/h/100/q/75/format/jpg',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
k_s: 's1',
|
||||||
|
count: 2,
|
||||||
|
large_picture_preview,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 1225,
|
k: '尺寸',
|
||||||
name: '波霸',
|
k_id: '2',
|
||||||
price: 4,
|
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: 1226,
|
id: 2260,
|
||||||
name: '珍珠',
|
price: 100,
|
||||||
price: 5,
|
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,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
properties: [
|
||||||
};
|
{
|
||||||
|
k_id: 124,
|
||||||
|
k: '加料',
|
||||||
|
is_multiple: true,
|
||||||
|
v: [
|
||||||
|
{
|
||||||
|
id: 1224,
|
||||||
|
name: '布丁',
|
||||||
|
price: 3,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1225,
|
||||||
|
name: '波霸',
|
||||||
|
price: 4,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1226,
|
||||||
|
name: '珍珠',
|
||||||
|
price: 5,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
export const initialSku = {
|
export const initialSku = {
|
||||||
s1: '30349',
|
s1: '30349',
|
||||||
|
|||||||
@ -83,15 +83,15 @@
|
|||||||
<div class="sku-container">
|
<div class="sku-container">
|
||||||
<van-sku
|
<van-sku
|
||||||
v-model="showLargePicturePreview"
|
v-model="showLargePicturePreview"
|
||||||
:sku="skuData.sku"
|
:sku="skuData2.sku"
|
||||||
:quota="skuData.quota"
|
:quota="skuData2.quota"
|
||||||
:goods="skuData.goods_info"
|
:goods="skuData2.goods_info"
|
||||||
:goods-id="skuData.goods_id"
|
:goods-id="skuData2.goods_id"
|
||||||
:hide-stock="skuData.sku.hide_stock"
|
:hide-stock="skuData2.sku.hide_stock"
|
||||||
:properties="skuData.properties"
|
:properties="skuData2.properties"
|
||||||
:quota-used="skuData.quota_used"
|
:quota-used="skuData2.quota_used"
|
||||||
:message-config="messageConfig"
|
:message-config="messageConfig"
|
||||||
:start-sale-num="skuData.start_sale_num"
|
:start-sale-num="skuData2.start_sale_num"
|
||||||
:show-header-image="false"
|
:show-header-image="false"
|
||||||
:custom-sku-validator="customSkuValidator"
|
:custom-sku-validator="customSkuValidator"
|
||||||
:close-on-click-overlay="closeOnClickOverlay"
|
:close-on-click-overlay="closeOnClickOverlay"
|
||||||
@ -175,7 +175,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { skuData, initialSku } from './data';
|
import { initialSku, getSkuData } from './data';
|
||||||
import { LIMIT_TYPE } from '../constants';
|
import { LIMIT_TYPE } from '../constants';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -203,7 +203,8 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
this.skuData = skuData;
|
this.skuData = getSkuData();
|
||||||
|
this.skuData2 = getSkuData(true);
|
||||||
this.initialSku = initialSku;
|
this.initialSku = initialSku;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|||||||
@ -53,6 +53,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
box-sizing: border-box;
|
||||||
min-height: 96px;
|
min-height: 96px;
|
||||||
padding: @padding-sm 20px @padding-sm @padding-xs;
|
padding: @padding-sm 20px @padding-sm @padding-xs;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -282,6 +283,7 @@
|
|||||||
|
|
||||||
&__content {
|
&__content {
|
||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
import { mount } from '../../../test';
|
import { mount } from '../../../test';
|
||||||
import Sku from '..';
|
import Sku from '..';
|
||||||
import { skuData, initialSku } from '../demo/data';
|
import { getSkuData, initialSku } from '../demo/data';
|
||||||
|
|
||||||
|
const skuData = getSkuData();
|
||||||
|
|
||||||
test('resetSelectedSku method', () => {
|
test('resetSelectedSku method', () => {
|
||||||
skuData.sku.messages = [];
|
skuData.sku.messages = [];
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user