新增选项卡轮播
于肖磊
parent
8110d6c05f
commit
f57adb5859
|
|
@ -69,6 +69,10 @@
|
|||
return {};
|
||||
},
|
||||
},
|
||||
isCommon: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -127,7 +131,7 @@
|
|||
new_list: this.seat_list.concat(this.form.carousel_list),
|
||||
popup_width: block * 16 * 2 + 'rpx',
|
||||
popup_height: block * 9 * 2 + 'rpx',
|
||||
style_container: common_styles_computer(common_style), // 用于样式显示
|
||||
style_container: this.isCommon ? common_styles_computer(common_style) : '', // 用于样式显示
|
||||
img_style: radius_computer(this.new_style), // 图片的设置
|
||||
indicator_style: this.get_indicator_style(), // 指示器的样式
|
||||
dot_style: `bottom: ${common_style.padding_bottom * 2 + 12}rpx;`, // 指示器位置
|
||||
|
|
|
|||
|
|
@ -4,7 +4,10 @@
|
|||
<componentDiyHeader :key="key" :value="header_data.com_data"></componentDiyHeader>
|
||||
</view>
|
||||
<view class="pr" :style="diy_content_style">
|
||||
<componentDiyTabs v-if="is_tabs" :value="tabs_data" :key="key" @tabs-click="tabs_click_event"></componentDiyTabs>
|
||||
<view v-for="(item, index) in tabs_data" :key="index">
|
||||
<componentDiyTabs v-if="item.key == 'tabs'" :value="item.com_data" :key="key" @tabs-click="tabs_click_event"></componentDiyTabs>
|
||||
<componentDiyTabsCarousel v-else-if="item.key == 'tabs-carousel'" :value="item.com_data" :key="key + 'tabs-carousel'" @tabs-click="tabs_click_event"></componentDiyTabsCarousel>
|
||||
</view>
|
||||
<view v-if="is_tabs_type" class="diy-content">
|
||||
<template v-if="diy_data.length > 0">
|
||||
<view v-for="(item, index) in diy_data" :key="index">
|
||||
|
|
@ -80,7 +83,8 @@
|
|||
import componentDiyDataMagic from '@/components/diy/data-magic';
|
||||
import componentDiyCustom from '@/components/diy/custom';
|
||||
import componentDiyImgMagic from '@/components/diy/img-magic';
|
||||
import componentDiySeckill from '@/components/diy/seckill.vue';
|
||||
import componentDiySeckill from '@/components/diy/seckill';
|
||||
import componentDiyTabsCarousel from '@/components/diy/tabs-carousel';
|
||||
import componentGoodsList from '@/components/goods-list/goods-list';
|
||||
import componentNoData from '@/components/no-data/no-data';
|
||||
import componentBottomLine from '@/components/bottom-line/bottom-line';
|
||||
|
|
@ -127,9 +131,10 @@
|
|||
componentDiyCustom,
|
||||
componentDiyImgMagic,
|
||||
componentDiySeckill,
|
||||
componentDiyTabsCarousel,
|
||||
componentGoodsList,
|
||||
componentNoData,
|
||||
componentBottomLine,
|
||||
componentBottomLine
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -180,14 +185,13 @@
|
|||
methods: {
|
||||
init() {
|
||||
// tabs选项卡数据过滤
|
||||
const filter_tabs_list = this.value.tabs_data || [];
|
||||
// const filter_tabs_list = this.value.tabs_data || [];
|
||||
this.setData({
|
||||
key: get_math(),
|
||||
header_data: this.value.header,
|
||||
footer_data: this.value.footer,
|
||||
diy_data: this.value.diy_data,
|
||||
tabs_data: filter_tabs_list.length > 0 ? filter_tabs_list[0].com_data : {},
|
||||
is_tabs: true,
|
||||
tabs_data: this.value.tabs_data,
|
||||
});
|
||||
uni.setStorageSync('diy-data-' + this.propId, this.value.diy_data);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@
|
|||
<span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
|
||||
</view>
|
||||
<view v-if="show_content && is_show('original_price') && !isEmpty(item.min_original_price)" class="text-size-xss flex-row">
|
||||
<img class="original-price-left" :src="form.static_img[0].url" />
|
||||
<image class="original-price-left" :src="form.static_img[0].url" />
|
||||
<span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]"
|
||||
>{{ item.show_original_price_symbol }}{{ item.min_original_price }}
|
||||
<block v-if="is_show('original_price_unit')">
|
||||
|
|
@ -121,7 +121,7 @@
|
|||
<span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
|
||||
</view>
|
||||
<view v-if="show_content && is_show('original_price') && !isEmpty(item.min_original_price)" class="text-size-xss flex">
|
||||
<img class="original-price-left" :src="form.static_img[0].url" />
|
||||
<image class="original-price-left" :src="form.static_img[0].url" />
|
||||
<span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]"
|
||||
>{{ item.show_original_price_symbol }}{{ item.min_original_price }}
|
||||
<block v-if="is_show('original_price_unit')">
|
||||
|
|
@ -494,6 +494,10 @@
|
|||
.gap-20 {
|
||||
gap: 40rpx;
|
||||
}
|
||||
.original-price-left {
|
||||
width: 20rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
.br-b-e {
|
||||
border-bottom: 2rpx solid #eee;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
defaultImage: '/static/images/common/image-empty.png',
|
||||
};
|
||||
},
|
||||
created() {
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<!-- 文章列表 -->
|
||||
<view class="container">
|
||||
<view class="flex-row gap-10 jc-sb align-s">
|
||||
<view class="flex-row gap-10 jc-sb align-c">
|
||||
<view class="tabs flex-1 flex-width">
|
||||
<scroll-view :scroll-x="true" :show-scrollbar="false" :scroll-with-animation="true" :scroll-into-view="'one-nav-item-' + active_index" class="wh-auto">
|
||||
<view class="flex-row" :style="'column-gap: ' + tabs_spacing + 'px;'">
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<view v-if="intervalId != undefined" class="flex-row align-c gap-4">
|
||||
<span class="text-size-xss" :style="{ 'color': new_style.end_text_color }">{{ seckill_time.time_first_text }}</span>
|
||||
<view class="flex-row gap-3 jc-c align-c" :style="[form.theme == '4' ? time_bg + 'padding: 6rpx 8rpx;border-radius: 22rpx;' : '']">
|
||||
<img v-if="form.theme == '4'" class="seckill-head-icon radius-xs" :src="form.theme_4_static_img[0].url" />
|
||||
<image v-if="form.theme == '4'" class="seckill-head-icon radius-xs" :src="form.theme_4_static_img[0].url" />
|
||||
<view v-for="(item, index) in time_config" :key="item.key" class="flex-row gap-3 jc-c align-c">
|
||||
<template v-if="form.theme == '4'">
|
||||
<view class="text-size-xs" :style="{ color: new_style.countdown_color }">{{ item.value }}</view>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,72 @@
|
|||
<template>
|
||||
<div class="flex-col oh" :style="style_container">
|
||||
<componentDiyTabs :value="value" :is-common="false" :spacing-common-style="spacing_common_style" @tabs-click="tabs_click_event"></componentDiyTabs>
|
||||
<componentDiycarousel :value="value" :is-common="false"></componentDiycarousel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { common_styles_computer } from '@/common/js/common/common.js';
|
||||
import componentDiyTabs from '@/components/diy/tabs';
|
||||
import componentDiycarousel from '@/components/diy/carousel';
|
||||
export default {
|
||||
components: {
|
||||
componentDiyTabs,
|
||||
componentDiycarousel
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
style_container: '',
|
||||
spacing_common_style: {
|
||||
padding: 0,
|
||||
padding_top: 0,
|
||||
padding_bottom: 0,
|
||||
padding_left: 0,
|
||||
padding_right: 0,
|
||||
margin: 0,
|
||||
margin_top: 0,
|
||||
margin_bottom: 0,
|
||||
margin_left: 0,
|
||||
margin_right: 0,
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
const new_style = this.value.style || {};
|
||||
this.setData({
|
||||
style_container: `${ common_styles_computer(new_style.common_style)};gap:${new_style.data_spacing * 2}rpx`,
|
||||
spacing_common_style: {
|
||||
padding: 0,
|
||||
padding_top: new_style.common_style.padding_top,
|
||||
padding_bottom: 0,
|
||||
padding_left: new_style.common_style.padding_left,
|
||||
padding_right: new_style.common_style.padding_right,
|
||||
margin: 0,
|
||||
margin_top: new_style.common_style.margin_top,
|
||||
margin_bottom: 0,
|
||||
margin_left: new_style.common_style.margin_left,
|
||||
margin_right: new_style.common_style.margin_right,
|
||||
}
|
||||
})
|
||||
},
|
||||
tabs_click_event(tabs_id, is_micro_page) {
|
||||
this.$emit('tabs-click', tabs_id, is_micro_page);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
<script>
|
||||
const app = getApp();
|
||||
import { common_styles_computer } from '@/common/js/common/common.js';
|
||||
import { common_styles_computer, padding_computer, margin_computer } from '@/common/js/common/common.js';
|
||||
import componentDiyModulesTabsView from '@/components/diy/modules/tabs-view';
|
||||
// 状态栏高度
|
||||
var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
|
||||
|
|
@ -31,6 +31,14 @@
|
|||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
isCommon: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
spacingCommonStyle: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
}
|
||||
},
|
||||
components: {
|
||||
componentDiyModulesTabsView,
|
||||
|
|
@ -57,7 +65,7 @@
|
|||
new_tabs_data.content.tabs_list.unshift(new_tabs_data.content.home_data);
|
||||
this.setData({
|
||||
tabs_data: new_tabs_data,
|
||||
style_container: common_styles_computer(new_style.common_style),
|
||||
style_container: this.isCommon ? common_styles_computer(new_style.common_style) : new_content.tabs_top_up == '1' ? padding_computer(this.spacingCommonStyle) + margin_computer(this.spacingCommonStyle) : '',
|
||||
top_up: new_content.tabs_top_up,
|
||||
});
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue