mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +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 = {
|
||||
goods_id: '946755',
|
||||
quota: 15,
|
||||
quota_used: 0,
|
||||
start_sale_num: 10,
|
||||
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: '白色',
|
||||
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: [
|
||||
export function getSkuData(large_picture_preview = false) {
|
||||
return {
|
||||
goods_id: '946755',
|
||||
quota: 15,
|
||||
quota_used: 0,
|
||||
start_sale_num: 10,
|
||||
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: [
|
||||
{
|
||||
id: 1224,
|
||||
name: '布丁',
|
||||
price: 3,
|
||||
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,
|
||||
},
|
||||
{
|
||||
id: 1225,
|
||||
name: '波霸',
|
||||
price: 4,
|
||||
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: 1226,
|
||||
name: '珍珠',
|
||||
price: 5,
|
||||
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,
|
||||
name: '布丁',
|
||||
price: 3,
|
||||
},
|
||||
{
|
||||
id: 1225,
|
||||
name: '波霸',
|
||||
price: 4,
|
||||
},
|
||||
{
|
||||
id: 1226,
|
||||
name: '珍珠',
|
||||
price: 5,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
export const initialSku = {
|
||||
s1: '30349',
|
||||
|
||||
@ -83,15 +83,15 @@
|
||||
<div class="sku-container">
|
||||
<van-sku
|
||||
v-model="showLargePicturePreview"
|
||||
:sku="skuData.sku"
|
||||
:quota="skuData.quota"
|
||||
:goods="skuData.goods_info"
|
||||
:goods-id="skuData.goods_id"
|
||||
:hide-stock="skuData.sku.hide_stock"
|
||||
:properties="skuData.properties"
|
||||
:quota-used="skuData.quota_used"
|
||||
:sku="skuData2.sku"
|
||||
:quota="skuData2.quota"
|
||||
:goods="skuData2.goods_info"
|
||||
:goods-id="skuData2.goods_id"
|
||||
:hide-stock="skuData2.sku.hide_stock"
|
||||
:properties="skuData2.properties"
|
||||
:quota-used="skuData2.quota_used"
|
||||
:message-config="messageConfig"
|
||||
:start-sale-num="skuData.start_sale_num"
|
||||
:start-sale-num="skuData2.start_sale_num"
|
||||
:show-header-image="false"
|
||||
:custom-sku-validator="customSkuValidator"
|
||||
:close-on-click-overlay="closeOnClickOverlay"
|
||||
@ -175,7 +175,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { skuData, initialSku } from './data';
|
||||
import { initialSku, getSkuData } from './data';
|
||||
import { LIMIT_TYPE } from '../constants';
|
||||
|
||||
export default {
|
||||
@ -203,7 +203,8 @@ export default {
|
||||
},
|
||||
|
||||
data() {
|
||||
this.skuData = skuData;
|
||||
this.skuData = getSkuData();
|
||||
this.skuData2 = getSkuData(true);
|
||||
this.initialSku = initialSku;
|
||||
|
||||
return {
|
||||
|
||||
@ -53,6 +53,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
box-sizing: border-box;
|
||||
min-height: 96px;
|
||||
padding: @padding-sm 20px @padding-sm @padding-xs;
|
||||
overflow: hidden;
|
||||
@ -282,6 +283,7 @@
|
||||
|
||||
&__content {
|
||||
overflow-x: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import { mount } from '../../../test';
|
||||
import Sku from '..';
|
||||
import { skuData, initialSku } from '../demo/data';
|
||||
import { getSkuData, initialSku } from '../demo/data';
|
||||
|
||||
const skuData = getSkuData();
|
||||
|
||||
test('resetSelectedSku method', () => {
|
||||
skuData.sku.messages = [];
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user