优化代码提交
于肖磊
parent
ebf7d6eff8
commit
1277a44f89
|
|
@ -4,26 +4,28 @@
|
|||
<view class="oh" :style="style_img_container">
|
||||
<view class="pr oh" :style="style">
|
||||
<view v-if="!['4'].includes(article_theme)" class="flex-wrap" :class="article_theme_class" :style="article_theme !== '3' ? article_spacing : ''">
|
||||
<view v-for="(item, index) in data_list" :key="index" class="item bg-white oh" :class="article_theme == '0' ? 'flex-row' : 'flex-col'" :style="article_style" :data-value="item.data.url" @tap="url_event">
|
||||
<template v-if="article_theme !== '3'">
|
||||
<template v-if="item.new_cover.length > 0">
|
||||
<image :src="item.new_cover[0].url" class="img" :style="img_radius + img_size" mode="aspectFill" />
|
||||
<view v-for="(item, index) in data_list" :key="index" class="item oh" :style="article_style" :data-value="item.data.url" @tap="url_event">
|
||||
<view :class="article_theme == '0' ? 'flex-row oh' : 'flex-col oh'" :style="article_img_style">
|
||||
<template v-if="article_theme !== '3'">
|
||||
<template v-if="item.new_cover.length > 0">
|
||||
<image :src="item.new_cover[0].url" class="img" :style="img_radius + img_size" mode="aspectFill" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<image :src="item.data.cover" class="img" :style="img_radius + img_size" mode="aspectFill" />
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<image :src="item.data.cover" class="img" :style="img_radius + img_size" mode="aspectFill" />
|
||||
</template>
|
||||
</template>
|
||||
<view class="jc-sb flex-1" :class="article_theme == '3' ? 'flex-row align-c' : 'flex-col'" :style="article_theme !== '0' ? content_padding : ''">
|
||||
<div class="flex-col" :class="article_theme == '3' ? 'flex-1 flex-width' : ''" :style="'gap:' + name_desc_space + 'px;'">
|
||||
<div class="title" :class="article_theme == '3' ? 'text-line-1' : 'text-line-2'" :style="article_name">{{ item.new_title ? item.new_title : item.data.title }}</div>
|
||||
<div v-if="field_show.includes('2')" class="desc text-line-1" :style="article_desc">{{ item.data.describe || '' }}</div>
|
||||
</div>
|
||||
<view class="flex-row jc-sb gap-8" :class="article_theme == '3' ? 'margin-left' : 'align-e margin-top'">
|
||||
<view :style="article_date">{{ field_show.includes('0') ? item.data.add_time : '' }}</view>
|
||||
<view v-show="field_show.includes('1')" class="flex-row align-c gap-3" :style="article_page_view">
|
||||
<iconfont name="icon-eye" propContainerDisplay="flex"></iconfont>
|
||||
<view>
|
||||
{{ item.data.access_count ? item.data.access_count : '' }}
|
||||
<view class="jc-sb flex-1" :class="article_theme == '3' ? 'flex-row align-c' : 'flex-col'" :style="article_theme !== '0' ? content_padding : ''">
|
||||
<div class="flex-col" :class="article_theme == '3' ? 'flex-1 flex-width' : ''" :style="'gap:' + name_desc_space + 'px;'">
|
||||
<div class="title" :class="article_theme == '3' ? 'text-line-1' : 'text-line-2'" :style="article_name">{{ item.new_title ? item.new_title : item.data.title }}</div>
|
||||
<div v-if="field_show.includes('2')" class="desc text-line-1" :style="article_desc">{{ item.data.describe || '' }}</div>
|
||||
</div>
|
||||
<view class="flex-row jc-sb gap-8" :class="article_theme == '3' ? 'margin-left' : 'align-e margin-top'">
|
||||
<view :style="article_date">{{ field_show.includes('0') ? item.data.add_time : '' }}</view>
|
||||
<view v-show="field_show.includes('1')" class="flex-row align-c gap-3" :style="article_page_view">
|
||||
<iconfont name="icon-eye" propContainerDisplay="flex"></iconfont>
|
||||
<view>
|
||||
{{ item.data.access_count ? item.data.access_count : '' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -34,24 +36,26 @@
|
|||
<swiper class="swiper" circular :autoplay="is_roll ? true : false" :interval="interval_time" :style="'height:' + carousel_height_computer">
|
||||
<swiper-item v-for="(item1, index1) in article_carousel_list" :key="index1">
|
||||
<view class="flex-row" :style="article_spacing">
|
||||
<view v-for="(item, index) in item1.carousel_list" :key="index" class="item bg-white oh flex-col" :style="article_style" :data-value="item.data.url" @tap="url_event">
|
||||
<template v-if="item.new_cover.length > 0">
|
||||
<image :src="item.new_cover[0].url" class="img" :style="img_radius + article_item_height" mode="aspectFill" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<image :src="item.data.cover" class="img" :style="img_radius + article_item_height" mode="aspectFill" />
|
||||
</template>
|
||||
<view class="jc-sb flex-1 flex-col" :style="article_theme !== '0' ? content_padding : ''">
|
||||
<div class="flex-col" :style="'gap:' + name_desc_space + 'px;'">
|
||||
<div class="title text-line-2" :style="article_name + article_name_height_computer">{{ item.new_title ? item.new_title : item.data.title }}</div>
|
||||
<div v-if="field_show.includes('2')" class="desc text-line-1" :style="article_desc">{{ item.data.describe || '' }}</div>
|
||||
</div>
|
||||
<view class="flex-row jc-sb gap-8 align-e margin-top">
|
||||
<view :style="article_date">{{ field_show.includes('0') ? item.data.add_time : '' }}</view>
|
||||
<view v-show="field_show.includes('1')" class="flex-row align-c gap-3" :style="article_page_view">
|
||||
<iconfont name="icon-eye" propContainerDisplay="flex"></iconfont>
|
||||
<view>
|
||||
{{ item.data.access_count ? item.data.access_count : '' }}
|
||||
<view v-for="(item, index) in item1.carousel_list" :key="index" class="item oh" :style="article_style" :data-value="item.data.url" @tap="url_event">
|
||||
<view class="oh flex-col" :style="article_img_style">
|
||||
<template v-if="item.new_cover.length > 0">
|
||||
<image :src="item.new_cover[0].url" class="img" :style="img_radius + article_item_height" mode="aspectFill" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<image :src="item.data.cover" class="img" :style="img_radius + article_item_height" mode="aspectFill" />
|
||||
</template>
|
||||
<view class="jc-sb flex-1 flex-col" :style="article_theme !== '0' ? content_padding : ''">
|
||||
<div class="flex-col" :style="'gap:' + name_desc_space + 'px;'">
|
||||
<div class="title text-line-2" :style="article_name + article_name_height_computer">{{ item.new_title ? item.new_title : item.data.title }}</div>
|
||||
<div v-if="field_show.includes('2')" class="desc text-line-1" :style="article_desc">{{ item.data.describe || '' }}</div>
|
||||
</div>
|
||||
<view class="flex-row jc-sb gap-8 align-e margin-top">
|
||||
<view :style="article_date">{{ field_show.includes('0') ? item.data.add_time : '' }}</view>
|
||||
<view v-show="field_show.includes('1')" class="flex-row align-c gap-3" :style="article_page_view">
|
||||
<iconfont name="icon-eye" propContainerDisplay="flex"></iconfont>
|
||||
<view>
|
||||
{{ item.data.access_count ? item.data.access_count : '' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -68,7 +72,7 @@
|
|||
|
||||
<script>
|
||||
const app = getApp();
|
||||
import { common_styles_computer, common_img_computer, padding_computer, radius_computer, get_math } from '@/common/js/common/common.js';
|
||||
import { common_styles_computer, common_img_computer, padding_computer, radius_computer, get_math, gradient_handle, background_computer } from '@/common/js/common/common.js';
|
||||
var system = app.globalData.get_system_info(null, null, true);
|
||||
var sys_width = app.globalData.window_width_handle(system.windowWidth);
|
||||
export default {
|
||||
|
|
@ -126,6 +130,7 @@
|
|||
article_item_height: '',
|
||||
|
||||
article_style: '',
|
||||
article_img_style: '',
|
||||
// 轮播图定时轮播
|
||||
interval_time: 2000,
|
||||
// 轮播图是否滚动
|
||||
|
|
@ -226,21 +231,31 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
// 背景图的处理
|
||||
const article_data = {
|
||||
background_img_style: new_style.article_background_img_style,
|
||||
background_img: new_style.article_background_img,
|
||||
}
|
||||
// 渐变效果
|
||||
const gradient = gradient_handle(new_style.article_color_list, new_style.article_direction);
|
||||
// 文章样式
|
||||
if (this.article_theme == '0') {
|
||||
this.setData({
|
||||
img_size: img_style,
|
||||
article_style: this.content_spacing + this.content_padding + this.content_radius,
|
||||
article_style: this.content_radius + gradient,
|
||||
article_img_style: this.content_spacing + this.content_padding + background_computer(article_data)
|
||||
});
|
||||
} else if (this.article_theme == '1') {
|
||||
this.setData({
|
||||
img_size: img_style,
|
||||
article_style: `width: calc(50% - ${new_style.article_spacing / 2}px);` + this.content_radius,
|
||||
article_style: `width: calc(50% - ${new_style.article_spacing / 2}px);` + this.content_radius + gradient,
|
||||
article_img_style: background_computer(article_data)
|
||||
});
|
||||
} else if (this.article_theme == '2') {
|
||||
this.setData({
|
||||
img_size: img_style,
|
||||
article_style: this.content_radius,
|
||||
article_style: this.content_radius + gradient,
|
||||
article_img_style: background_computer(article_data)
|
||||
});
|
||||
} else if (this.article_theme == '3') {
|
||||
this.setData({
|
||||
|
|
@ -259,11 +274,12 @@
|
|||
// 是否滚动修改
|
||||
is_roll: new_style.is_roll,
|
||||
article_item_height: `height: ${new_style.article_height * 2}rpx`,
|
||||
article_style: this.article_style + this.content_radius + multicolumn_columns_width,
|
||||
article_style: this.content_radius + multicolumn_columns_width + gradient,
|
||||
// 轮播高度
|
||||
carousel_height_computer: (new_style.name_size * 2 + new_style.article_height) * 2 + 'rpx',
|
||||
// 文章内容高度
|
||||
article_name_height_computer: `height:${new_style.name_size * 2.4 * 2}rpx;line-height:${new_style.name_size * 1.2 * 2}rpx;`,
|
||||
article_img_style: background_computer(article_data)
|
||||
});
|
||||
// 文章轮播数据
|
||||
const cloneList = JSON.parse(JSON.stringify(this.data_list));
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<!-- 文章列表 -->
|
||||
<view class="article-tabs ou" :class="'article-tabs-' + propKey" :style="style_container">
|
||||
<view class="ou" :style="style_img_container">
|
||||
<componentDiyModulesTabsView :propValue="article_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" :propCustomNavHeight="propCustomNavHeight * 2 + 'rpx'" :propTabsBackground="tabs_background" @onTabsTap="tabs_click_event"></componentDiyModulesTabsView>
|
||||
<componentDiyModulesTabsView :propValue="article_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" :propsTabsPaddingStyle="tabs_padding_style" :propCustomNavHeight="propCustomNavHeight * 2 + 'rpx'" :propTabsBackground="tabs_background" @onTabsTap="tabs_click_event"></componentDiyModulesTabsView>
|
||||
<view class="oh">
|
||||
<componentDiyArticleList :propKey="diy_key" :propValue="article_tabs" :propIsCommonStyle="false"></componentDiyArticleList>
|
||||
</view>
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
<script>
|
||||
const app = getApp();
|
||||
import { common_styles_computer, common_img_computer, padding_computer, margin_computer, background_computer, gradient_computer } from '@/common/js/common/common.js';
|
||||
import { common_styles_computer, common_img_computer, padding_computer, margin_computer, background_computer, gradient_computer, isEmpty } from '@/common/js/common/common.js';
|
||||
import componentDiyModulesTabsView from '@/components/diy/modules/tabs-view';
|
||||
import componentDiyArticleList from '@/components/diy/article-list'; // 状态栏高度
|
||||
var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
|
||||
|
|
@ -65,6 +65,7 @@
|
|||
style_img_container: '',
|
||||
style: '',
|
||||
article_tabs: {},
|
||||
tabs_padding_style: '',
|
||||
// 是否滑动置顶
|
||||
top_up: '0',
|
||||
tabs_style: '',
|
||||
|
|
@ -168,6 +169,7 @@
|
|||
style_container: common_styles_computer(common_style),
|
||||
style_img_container: common_img_computer(common_style, this.propIndex),
|
||||
tabs_style: new_tabs_style,
|
||||
tabs_padding_style: !isEmpty(new_style.tabs_padding) ? padding_computer(new_style.tabs_padding) : '',
|
||||
});
|
||||
},
|
||||
// tabs切换事件
|
||||
|
|
|
|||
|
|
@ -158,7 +158,7 @@
|
|||
const new_form = this.propValue.content;
|
||||
const new_style = this.propValue.style;
|
||||
const container_height = !isEmpty(new_form.container_height) ? new_form.container_height : sys_width;
|
||||
const density = 4;
|
||||
const density = !isEmpty(new_form.magic_cube_density) ? new_form.magic_cube_density : 4;
|
||||
this.setData({
|
||||
form: new_form,
|
||||
new_style: new_style,
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
</view>
|
||||
<template v-if="is_tabs_type">
|
||||
<template v-if="diy_data.length > 0">
|
||||
<view v-for="(item, index) in diy_data" :key="index" :style="'margin-top:' + (['float-window'].includes(item.key) ? '0rpx;z-index:1' : -(item.com_data.style.common_style.floating_up * 2 || 0) + 'rpx;z-index:' + (item.com_data.style.common_style.is_bottom_up == '1' ? '0' : '1'))">
|
||||
<view v-for="(item, index) in diy_data" :key="index" :style="'margin-top:' + (['float-window'].includes(item.key) ? '0rpx;z-index:1' : -(item.com_data.style.common_style.floating_up * 2 || 0) + 'rpx;z-index:' + (!isEmpty(item.com_data.style.common_style.module_z_index) ? item.com_data.style.common_style.module_z_index : 0))">
|
||||
<!-- 基础组件 -->
|
||||
<template v-if="item.is_enable == '1'">
|
||||
<componentDiySearch v-if="item.key == 'search'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiySearch>
|
||||
|
|
|
|||
|
|
@ -3,59 +3,90 @@
|
|||
<view class="oh" :style="style_img_container">
|
||||
<view :class="outer_class" :style="onter_style">
|
||||
<block v-if="!['5'].includes(theme)">
|
||||
<view v-for="(item, index) in list" :key="index" class="pr" :class="layout_type" :style="layout_style" :data-index="index" :data-value="item.goods_url" @tap.stop="url_event">
|
||||
<block v-if="theme == '6'">
|
||||
<view :class="['flex-row align-c jc-sb ptb-15 mlr-10 gap-20', { 'br-b-e': index != list.length - 1 }]">
|
||||
<view v-if="is_show('title')" :class="text_line" :style="title_style">{{ item.title }}</view>
|
||||
<view v-if="is_show('price') && !isEmpty(item.min_price)" class="num nowrap" :style="'color:' + new_style.shop_price_color">
|
||||
<text class="identifying">{{ item.show_price_symbol }}</text>
|
||||
<text :style="price_style">{{ item.min_price }}</text>
|
||||
<text v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<block v-if="!isEmpty(item)">
|
||||
<view v-if="!isEmpty(item.new_cover)" :style="img_size">
|
||||
<imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
|
||||
</view>
|
||||
<view v-else :style="img_size">
|
||||
<imageEmpty :propImageSrc="item.images" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
|
||||
<view v-for="(item, index) in list" :key="index" class="pr oh" :style="layout_style" :data-index="index" :data-value="item.goods_url" @tap.stop="url_event">
|
||||
<view :class="layout_type" :style="layout_img_style">
|
||||
<block v-if="theme == '6'">
|
||||
<view :class="['flex-row align-c jc-sb ptb-15 mlr-10 gap-20', { 'br-b-e': index != list.length - 1 }]">
|
||||
<view v-if="is_show('title')" :class="text_line" :style="title_style">{{ item.title }}</view>
|
||||
<view v-if="is_show('price') && !isEmpty(item.min_price)" class="num nowrap" :style="'color:' + new_style.shop_price_color">
|
||||
<text class="identifying">{{ item.show_price_symbol }}</text>
|
||||
<text :style="price_style">{{ item.min_price }}</text>
|
||||
<text v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view v-if="is_show('title') || is_show('simple_desc') || is_show('price') || is_show('original_price') || is_show('sales_count') || is_show('plugins_view_icon') || form.is_shop_show == '1'" class="flex-col flex-1 jc-sb content gap-10" :style="content_style">
|
||||
<view class="flex-col gap-10 top-title">
|
||||
<view v-if="is_show('title') || (['0', '1', '2', '3', '5'].includes(theme) && is_show('simple_desc'))" class="flex-col" :style="{ gap: new_style.title_simple_desc_spacing * 2 + 'rpx' }">
|
||||
<view v-if="is_show('title')" :class="text_line" :style="title_style">{{ item.title }}</view>
|
||||
<view v-if="['0', '1', '2', '3', '5'].includes(theme) && is_show('simple_desc')" class="text-line-1" :style="simple_desc">{{ item.simple_desc }}</view>
|
||||
<block v-else>
|
||||
<block v-if="!isEmpty(item)">
|
||||
<view v-if="!isEmpty(item.new_cover)" :style="img_size">
|
||||
<imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
|
||||
</view>
|
||||
<view v-if="show_content && is_show('plugins_view_icon') && !isEmpty(item.plugins_view_icon_data)" class="flex-row gap-5 align-c">
|
||||
<view v-for="(icon_data, icon_index) in item.plugins_view_icon_data" :key="icon_index" class="radius text-size-xsss padding-horizontal-xs" :style="{ background: icon_data.bg_color, color: icon_data.color, border: '1rpx solid' + (!isEmpty(icon_data.br_color) ? icon_data.br_color : icon_data.bg_color) }">{{ icon_data.name }}</view>
|
||||
<view v-else :style="img_size">
|
||||
<imageEmpty :propImageSrc="item.images" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="!['3', '4', '5'].includes(form.theme)" class="flex-col gap-5">
|
||||
<view :class="[form.is_price_solo == '1' ? 'flex-row align-c nowrap' : 'flex-col gap-5']">
|
||||
<view v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="'color:' + new_style.shop_price_color">
|
||||
<text class="identifying">{{ item.show_price_symbol }}</text>
|
||||
<text :style="price_style">{{ item.min_price }}</text>
|
||||
<text v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</text>
|
||||
</block>
|
||||
<view v-if="is_show('title') || is_show('simple_desc') || is_show('price') || is_show('original_price') || is_show('sales_count') || is_show('plugins_view_icon') || form.is_shop_show == '1'" class="flex-col flex-1 jc-sb content gap-10" :style="content_style">
|
||||
<view class="flex-col gap-10 top-title">
|
||||
<view v-if="is_show('title') || (['0', '1', '2', '3', '5'].includes(theme) && is_show('simple_desc'))" class="flex-col" :style="{ gap: new_style.title_simple_desc_spacing * 2 + 'rpx' }">
|
||||
<view v-if="is_show('title')" :class="text_line" :style="title_style">{{ item.title }}</view>
|
||||
<view v-if="['0', '1', '2', '3', '5'].includes(theme) && is_show('simple_desc')" class="text-line-1" :style="simple_desc">{{ item.simple_desc }}</view>
|
||||
</view>
|
||||
<view v-if="show_content && is_show('original_price') && !isEmpty(item.min_original_price)" class="text-size-xss flex-row">
|
||||
<image v-if="form.static_img.length > 0" class="original-price-left" :src="form.static_img[0].url" model="widthFix"></image>
|
||||
<text :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')">
|
||||
{{ item.show_original_price_unit }}
|
||||
<view v-if="show_content && is_show('plugins_view_icon') && !isEmpty(item.plugins_view_icon_data)" class="flex-row gap-5 align-c">
|
||||
<view v-for="(icon_data, icon_index) in item.plugins_view_icon_data" :key="icon_index" class="radius text-size-xsss padding-horizontal-xs" :style="{ background: icon_data.bg_color, color: icon_data.color, border: '1rpx solid' + (!isEmpty(icon_data.br_color) ? icon_data.br_color : icon_data.bg_color) }">{{ icon_data.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="!['3', '4', '5'].includes(form.theme)" class="flex-col gap-5">
|
||||
<view :class="[form.is_price_solo == '1' ? 'flex-row align-c nowrap' : 'flex-col gap-5']">
|
||||
<view v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="'color:' + new_style.shop_price_color">
|
||||
<text class="identifying">{{ item.show_price_symbol }}</text>
|
||||
<text :style="price_style">{{ item.min_price }}</text>
|
||||
<text v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</text>
|
||||
</view>
|
||||
<view v-if="show_content && is_show('original_price') && !isEmpty(item.min_original_price)" class="text-size-xss flex-row">
|
||||
<image v-if="form.static_img.length > 0" class="original-price-left" :src="form.static_img[0].url" model="widthFix"></image>
|
||||
<text :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')">
|
||||
{{ item.show_original_price_unit }}
|
||||
</block>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row jc-sb align-e">
|
||||
<view>
|
||||
<view v-if="show_content" class="flex-row align-c text-size-xss">
|
||||
<view v-if="is_show('sales_count')" class="pr-5" :style="sold_number_style">已售{{ item.sales_count }}件</view>
|
||||
<!-- <view v-if="is_show('sales_count')" :class="['pr-5', {'br-r-e': is_show('sales_count') && is_show('4')}]" :style="sold_number_style>已售{{ item.sales_count }}件</view> -->
|
||||
<!-- <view v-if="is_show('4')" class="pl-5" :style="score_style">评分0</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="form.is_shop_show == '1'" class="pr" :data-index="index" @tap.stop="goods_button_event">
|
||||
<block v-if="form.shop_type == 'text'">
|
||||
<view class="plr-11 padding-vertical-xs round" :style="button_style + ('color:' + new_style.shop_button_text_color)">{{ form.shop_button_text }}</view>
|
||||
</block>
|
||||
</text>
|
||||
<view v-else class="round padding-horizontal-sm ptb-5" :style="button_gradient">
|
||||
<iconfont :name="'icon-' + (!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart')" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size * 2 + 'rpx'" propContainerDisplay="flex"></iconfont>
|
||||
</view>
|
||||
<view v-if="form.shop_button_effect == '1'" class="cart-badge-icon pa badge-style">
|
||||
<component-badge :propNumber="item.user_cart_count || 0"></component-badge>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row jc-sb align-e">
|
||||
<view>
|
||||
<view v-if="show_content" class="flex-row align-c text-size-xss">
|
||||
<view v-if="is_show('sales_count')" class="pr-5" :style="sold_number_style">已售{{ item.sales_count }}件</view>
|
||||
<!-- <view v-if="is_show('sales_count')" :class="['pr-5', {'br-r-e': is_show('sales_count') && is_show('4')}]" :style="sold_number_style>已售{{ item.sales_count }}件</view> -->
|
||||
<!-- <view v-if="is_show('4')" class="pl-5" :style="score_style">评分0</view> -->
|
||||
<view v-else class="flex-row align-c jc-sb">
|
||||
<view class="flex-row align-c nowrap">
|
||||
<view v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="'color:' + new_style.shop_price_color">
|
||||
<text class="identifying">{{ item.show_price_symbol }}</text>
|
||||
<text :style="price_style">{{ item.min_price }}</text>
|
||||
<text v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</text>
|
||||
</view>
|
||||
<view v-if="show_content && is_show('original_price') && !isEmpty(item.min_original_price)" class="text-size-xss flex-row">
|
||||
<image v-if="form.static_img.length > 0" class="original-price-left" :src="form.static_img[0].url" model="widthFix"></image>
|
||||
<text :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')">
|
||||
{{ item.show_original_price_unit }}
|
||||
</block>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="form.is_shop_show == '1'" class="pr" :data-index="index" @tap.stop="goods_button_event">
|
||||
|
|
@ -71,88 +102,61 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="flex-row align-c jc-sb">
|
||||
<view class="flex-row align-c nowrap">
|
||||
<view v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="'color:' + new_style.shop_price_color">
|
||||
<text class="identifying">{{ item.show_price_symbol }}</text>
|
||||
<text :style="price_style">{{ item.min_price }}</text>
|
||||
<text v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</text>
|
||||
</view>
|
||||
<view v-if="show_content && is_show('original_price') && !isEmpty(item.min_original_price)" class="text-size-xss flex-row">
|
||||
<image v-if="form.static_img.length > 0" class="original-price-left" :src="form.static_img[0].url" model="widthFix"></image>
|
||||
<text :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')">
|
||||
{{ item.show_original_price_unit }}
|
||||
</block>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="form.is_shop_show == '1'" class="pr" :data-index="index" @tap.stop="goods_button_event">
|
||||
<block v-if="form.shop_type == 'text'">
|
||||
<view class="plr-11 padding-vertical-xs round" :style="button_style + ('color:' + new_style.shop_button_text_color)">{{ form.shop_button_text }}</view>
|
||||
</block>
|
||||
<view v-else class="round padding-horizontal-sm ptb-5" :style="button_gradient">
|
||||
<iconfont :name="'icon-' + (!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart')" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size * 2 + 'rpx'" propContainerDisplay="flex"></iconfont>
|
||||
</view>
|
||||
<view v-if="form.shop_button_effect == '1'" class="cart-badge-icon pa badge-style">
|
||||
<component-badge :propNumber="item.user_cart_count || 0"></component-badge>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<swiper circular="true" :autoplay="new_style.is_roll == '1'" :interval="new_style.interval_time * 1000" :duration="500" :style="{ width: '100%', height: new_style.content_outer_height * 2 + 'rpx' }">
|
||||
<swiper-item v-for="(item1, index1) in shop_content_list" :key="index1">
|
||||
<view class="flex-row" :style="onter_style">
|
||||
<view v-for="(item, index) in item1.split_list" :key="index" class="pr" :class="layout_type" :style="layout_style" :data-index="index1" :data-split-index="index" :data-value="item.goods_url" @tap.stop="url_event">
|
||||
<block v-if="!isEmpty(item)">
|
||||
<view v-if="!isEmpty(item.new_cover)" :class="'flex-img' + theme">
|
||||
<imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
|
||||
</view>
|
||||
<view v-else :class="'flex-img' + theme">
|
||||
<imageEmpty :propImageSrc="item.images" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
|
||||
</view>
|
||||
</block>
|
||||
<view v-if="is_show('title') || is_show('simple_desc') || is_show('price') || is_show('plugins_view_icon') || is_show('original_price') || form.is_shop_show == '1'" class="flex-col flex-1 jc-sb content gap-10" :style="content_style">
|
||||
<view class="flex-col gap-10 top-title">
|
||||
<view v-if="is_show('title') || (['0', '1', '2', '3', '5'].includes(theme) && is_show('simple_desc'))" class="flex-col" :style="{ gap: new_style.title_simple_desc_spacing * 2 + 'rpx' }">
|
||||
<view v-if="is_show('title')" :class="text_line" :style="title_style">{{ item.title }}</view>
|
||||
<view v-if="['0', '1', '2', '3', '5'].includes(theme) && is_show('simple_desc')" class="text-line-1" :style="simple_desc">{{ item.simple_desc }}</view>
|
||||
<view v-for="(item, index) in item1.split_list" :key="index" class="pr oh" :style="layout_style" :data-index="index1" :data-split-index="index" :data-value="item.goods_url" @tap.stop="url_event">
|
||||
<view :class="layout_type" :style="layout_img_style">
|
||||
<block v-if="!isEmpty(item)">
|
||||
<view v-if="!isEmpty(item.new_cover)" :class="'flex-img' + theme">
|
||||
<imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
|
||||
</view>
|
||||
<view v-if="show_content && is_show('plugins_view_icon') && !isEmpty(item.plugins_view_icon_data)" class="flex-row gap-5 align-c">
|
||||
<view v-for="(icon_data, icon_index) in item.plugins_view_icon_data" :key="icon_index" class="radius text-size-xsss padding-horizontal-xs" :style="{ background: icon_data.bg_color, color: icon_data.color, border: '1rpx solid' + (!isEmpty(icon_data.br_color) ? icon_data.br_color : icon_data.bg_color) }">{{ icon_data.name }}</view>
|
||||
<view v-else :class="'flex-img' + theme">
|
||||
<imageEmpty :propImageSrc="item.images" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row align-c jc-sb">
|
||||
<view class="flex-row align-c nowrap">
|
||||
<view v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="'color:' + new_style.shop_price_color">
|
||||
<text class="identifying">{{ item.show_price_symbol }}</text>
|
||||
<text :style="price_style">{{ item.min_price }}</text>
|
||||
<text v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</text>
|
||||
</block>
|
||||
<view v-if="is_show('title') || is_show('simple_desc') || is_show('price') || is_show('plugins_view_icon') || is_show('original_price') || form.is_shop_show == '1'" class="flex-col flex-1 jc-sb content gap-10" :style="content_style">
|
||||
<view class="flex-col gap-10 top-title">
|
||||
<view v-if="is_show('title') || (['0', '1', '2', '3', '5'].includes(theme) && is_show('simple_desc'))" class="flex-col" :style="{ gap: new_style.title_simple_desc_spacing * 2 + 'rpx' }">
|
||||
<view v-if="is_show('title')" :class="text_line" :style="title_style">{{ item.title }}</view>
|
||||
<view v-if="['0', '1', '2', '3', '5'].includes(theme) && is_show('simple_desc')" class="text-line-1" :style="simple_desc">{{ item.simple_desc }}</view>
|
||||
</view>
|
||||
<view v-if="show_content && is_show('original_price') && !isEmpty(item.min_original_price)" class="text-size-xss flex">
|
||||
<image v-if="form.static_img.length > 0" class="original-price-left" :src="form.static_img[0].url" model="widthFix"></image>
|
||||
<text :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')">
|
||||
{{ item.show_original_price_unit }}
|
||||
</block>
|
||||
</text>
|
||||
<view v-if="show_content && is_show('plugins_view_icon') && !isEmpty(item.plugins_view_icon_data)" class="flex-row gap-5 align-c">
|
||||
<view v-for="(icon_data, icon_index) in item.plugins_view_icon_data" :key="icon_index" class="radius text-size-xsss padding-horizontal-xs" :style="{ background: icon_data.bg_color, color: icon_data.color, border: '1rpx solid' + (!isEmpty(icon_data.br_color) ? icon_data.br_color : icon_data.bg_color) }">{{ icon_data.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="form.is_shop_show == '1'" class="pr" :data-index="index1" :data-split-index="index" @tap.stop="goods_button_event">
|
||||
<block v-if="form.shop_type == 'text'">
|
||||
<view class="plr-11 padding-vertical-xs round" :style="button_style + ('color:' + new_style.shop_button_text_color)">{{ form.shop_button_text }}</view>
|
||||
</block>
|
||||
<view v-else class="round padding-horizontal-sm ptb-5" :style="button_gradient">
|
||||
<iconfont :name="'icon-' + (!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart')" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size * 2 + 'rpx'" propContainerDisplay="flex"></iconfont>
|
||||
<view class="flex-row align-c jc-sb">
|
||||
<view class="flex-row align-c nowrap">
|
||||
<view v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="'color:' + new_style.shop_price_color">
|
||||
<text class="identifying">{{ item.show_price_symbol }}</text>
|
||||
<text :style="price_style">{{ item.min_price }}</text>
|
||||
<text v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</text>
|
||||
</view>
|
||||
<view v-if="show_content && is_show('original_price') && !isEmpty(item.min_original_price)" class="text-size-xss flex">
|
||||
<image v-if="form.static_img.length > 0" class="original-price-left" :src="form.static_img[0].url" model="widthFix"></image>
|
||||
<text :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')">
|
||||
{{ item.show_original_price_unit }}
|
||||
</block>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="form.shop_button_effect == '1'" class="cart-badge-icon pa badge-style">
|
||||
<component-badge :propNumber="item.user_cart_count || 0"></component-badge>
|
||||
<view v-if="form.is_shop_show == '1'" class="pr" :data-index="index1" :data-split-index="index" @tap.stop="goods_button_event">
|
||||
<block v-if="form.shop_type == 'text'">
|
||||
<view class="plr-11 padding-vertical-xs round" :style="button_style + ('color:' + new_style.shop_button_text_color)">{{ form.shop_button_text }}</view>
|
||||
</block>
|
||||
<view v-else class="round padding-horizontal-sm ptb-5" :style="button_gradient">
|
||||
<iconfont :name="'icon-' + (!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart')" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size * 2 + 'rpx'" propContainerDisplay="flex"></iconfont>
|
||||
</view>
|
||||
<view v-if="form.shop_button_effect == '1'" class="cart-badge-icon pa badge-style">
|
||||
<component-badge :propNumber="item.user_cart_count || 0"></component-badge>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -169,7 +173,7 @@
|
|||
|
||||
<script>
|
||||
const app = getApp();
|
||||
import { isEmpty, common_styles_computer, common_img_computer, gradient_handle, padding_computer, radius_computer } from '@/common/js/common/common.js';
|
||||
import { isEmpty, common_styles_computer, common_img_computer, gradient_handle, padding_computer, radius_computer, background_computer } from '@/common/js/common/common.js';
|
||||
import imageEmpty from '@/components/diy/modules/image-empty.vue';
|
||||
import componentBadge from '@/components/badge/badge';
|
||||
var system = app.globalData.get_system_info(null, null, true);
|
||||
|
|
@ -219,6 +223,7 @@
|
|||
// 不同风格下的样式
|
||||
layout_type: '',
|
||||
layout_style: '',
|
||||
layout_img_style: '',
|
||||
content_style: '', // 内容区域的样式
|
||||
show_content: false, // 显示除标题外的其他区域
|
||||
text_line: '', // 超过多少行隐藏
|
||||
|
|
@ -322,8 +327,9 @@
|
|||
content_outer_spacing: new_style.content_outer_spacing, // 商品间距
|
||||
onter_style: new_form.theme == '6' ? radius_computer(new_style.shop_radius) : `gap: ${new_style.content_outer_spacing * 2 + 'rpx'};`,
|
||||
// 不同风格下的样式
|
||||
layout_type: this.get_layout_type(new_form),
|
||||
layout_type: ['0', '4'].includes(new_form.theme) ? 'flex-row wh-auto ht-auto oh' : 'flex-col wh-auto ht-auto oh',
|
||||
layout_style: this.get_layout_style(new_style, new_form),
|
||||
layout_img_style: this.get_layout_img_style(new_style, new_form),
|
||||
content_style: this.get_content_style(new_style, new_form), // 内容区域的样式
|
||||
show_content: ['0', '1', '2'].includes(new_form.theme), // 显示除标题外的其他区域
|
||||
text_line: this.get_text_line(new_form), // 超过多少行隐藏
|
||||
|
|
@ -378,35 +384,9 @@
|
|||
return line;
|
||||
},
|
||||
// 不同风格下的样式
|
||||
get_layout_type(new_form) {
|
||||
let class_type = '';
|
||||
switch (new_form.theme) {
|
||||
case '0':
|
||||
class_type = `flex-row bg-white oh`;
|
||||
break;
|
||||
case '1':
|
||||
class_type = `flex-col bg-white oh`;
|
||||
break;
|
||||
case '2':
|
||||
class_type = `flex-col bg-white oh`;
|
||||
break;
|
||||
case '3':
|
||||
class_type = `flex-col bg-white oh`;
|
||||
break;
|
||||
case '4':
|
||||
class_type = `flex-row bg-white oh`;
|
||||
break;
|
||||
case '5':
|
||||
class_type = `flex-col bg-white oh`;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return class_type;
|
||||
},
|
||||
get_layout_style(new_style, form) {
|
||||
const radius = form.theme == '6' ? '' : radius_computer(new_style.shop_radius);
|
||||
const padding = ['0', '4'].includes(form.theme) ? padding_computer(new_style.shop_padding) + 'box-sizing: border-box;' : '';
|
||||
const gradient = form.theme != '6' ? gradient_handle(new_style.shop_color_list, new_style.shop_direction) : '';
|
||||
let size_style = ``;
|
||||
if (['1', '4'].includes(form.theme)) {
|
||||
size_style = `width: calc((100% - ${new_style.content_outer_spacing * 2 + 'rpx'}) / 2);`;
|
||||
|
|
@ -415,7 +395,16 @@
|
|||
} else if (form.theme == '5') {
|
||||
size_style = `width: ${this.get_multicolumn_columns_width(new_style, form)};min-width: ${this.get_multicolumn_columns_width(new_style, form)};height: ${new_style.content_outer_height * 2 + 'rpx'};`;
|
||||
}
|
||||
return `${radius} ${padding} ${size_style}`;
|
||||
return `${radius} ${size_style} ${ gradient }`;
|
||||
},
|
||||
get_layout_img_style(new_style, form) {
|
||||
const padding = ['0', '4'].includes(form.theme) ? padding_computer(new_style.shop_padding) + 'box-sizing: border-box;' : '';
|
||||
const data = {
|
||||
background_img_style: new_style.shop_background_img_style,
|
||||
background_img: new_style.shop_background_img,
|
||||
}
|
||||
const background = form.theme != '6' ? background_computer(data) : '';
|
||||
return `${padding} ${background}`;
|
||||
},
|
||||
get_multicolumn_columns_width(new_style, form) {
|
||||
const { carousel_col } = form;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<view class="goods-tabs ou" :class="'goods-tabs-' + propKey" :style="style_container">
|
||||
<view class="ou" :style="style_img_container">
|
||||
<componentDiyModulesTabsView :propValue="goods_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" :propCustomNavHeight="propCustomNavHeight * 2 + 'rpx'" :propTabsBackground="tabs_background" @onTabsTap="tabs_click_event"></componentDiyModulesTabsView>
|
||||
<componentDiyModulesTabsView :propValue="goods_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" :propsTabsPaddingStyle="tabs_padding_style" :propCustomNavHeight="propCustomNavHeight * 2 + 'rpx'" :propTabsBackground="tabs_background" @onTabsTap="tabs_click_event"></componentDiyModulesTabsView>
|
||||
<view class="oh">
|
||||
<componentGoodsList ref="diy_goods_list" :propKey="diy_key" :propIndex="propDiyIndex" :propValue="goods_tabs" :propIsCommonStyle="false" @goods_buy_event="goods_buy_event"></componentGoodsList>
|
||||
</view>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
<script>
|
||||
const app = getApp();
|
||||
import { common_styles_computer, common_img_computer, padding_computer, margin_computer, background_computer, gradient_computer } from '@/common/js/common/common.js';
|
||||
import { common_styles_computer, common_img_computer, padding_computer, margin_computer, background_computer, gradient_computer, isEmpty } from '@/common/js/common/common.js';
|
||||
import componentDiyModulesTabsView from '@/components/diy/modules/tabs-view';
|
||||
import componentGoodsList from '@/components/diy/goods-list';
|
||||
// 状态栏高度
|
||||
|
|
@ -65,6 +65,7 @@
|
|||
style_container: '',
|
||||
style_img_container: '',
|
||||
goods_tabs: {},
|
||||
tabs_padding_style: '',
|
||||
// 是否滑动置顶
|
||||
top_up: '0',
|
||||
tabs_top: 0,
|
||||
|
|
@ -162,6 +163,7 @@
|
|||
style_container: common_styles_computer(common_style),
|
||||
style_img_container: common_img_computer(common_style, this.propIndex),
|
||||
tabs_style: new_tabs_style,
|
||||
tabs_padding_style: !isEmpty(new_style.tabs_padding) ? padding_computer(new_style.tabs_padding) : '',
|
||||
});
|
||||
},
|
||||
tabs_click_event(index) {
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@
|
|||
fit = 'aspectFill';
|
||||
}
|
||||
const container_height = !isEmpty(new_content.container_height) ? new_content.container_height : sys_width;
|
||||
const density = 4;
|
||||
const density = !isEmpty(new_content.magic_cube_density) ? new_content.magic_cube_density : 4;
|
||||
this.setData({
|
||||
form: this.propValue.content,
|
||||
new_style: this.propValue.style,
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@
|
|||
get_com_style(form, scale) {
|
||||
let style = `${ gradient_handle(form.color_list, form.direction) } ${radius_computer(form.bg_radius, scale, true)}; transform: rotate(${form.panel_rotate}deg);`;
|
||||
if (form.border_show == '1') {
|
||||
style += `border: ${form.border_size * scale }px ${form.border_style} ${form.border_color};`;
|
||||
style += `border: ${form.border_size * scale }px ${form.border_style} ${form.border_color};box-sizing: border-box;`;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@
|
|||
get_com_style(form, scale) {
|
||||
let style = `${ gradient_handle(form.color_list, form.direction) } ${radius_computer(form.bg_radius, scale, true)}`;
|
||||
if (form.border_show == '1') {
|
||||
style += `border: ${form.border_size * scale }px ${form.border_style} ${form.border_color};`;
|
||||
style += `border: ${form.border_size * scale }px ${form.border_style} ${form.border_color};box-sizing: border-box;`;
|
||||
}
|
||||
// 是富文本并且开启了上下滚动的开关
|
||||
if (form.is_rich_text == '1' && form.is_up_down == '1') {
|
||||
|
|
|
|||
|
|
@ -1,24 +1,26 @@
|
|||
<template>
|
||||
<!-- 66rpx是自定义顶部导航栏的高度-->
|
||||
<view class="tabs-view" :style="tabs_sticky">
|
||||
<view class="tabs-view flex-row gap-10 jc-sb align-c" :style="propStyle + propTabsBackground">
|
||||
<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">
|
||||
<view v-for="(item, index) in tabs_list" :key="index" :id="'one-nav-item-' + index" class="item nowrap flex-col jc-c align-c gap-4" :class="tabs_theme + (index == active_index ? ' active' : '') + ((tabs_theme_index == '0' && tabs_theme_1_style) || tabs_theme_index == '1' || tabs_theme_index == '2' ? ' pb-0' : '')" :style="'margin-left:' + (index == 0 ? '0' : tabs_spacing) + 'rpx;margin-right:' + (index - 1 == tabs_list ? '0' : tabs_spacing) + 'rpx;'" :data-index="index" @tap="handle_event">
|
||||
<view class="nowrap flex-col jc-c align-c gap-4">
|
||||
<image v-if="!isEmpty(item.img)" :src="item.img[0].url" class="img" mode="widthFix" />
|
||||
<view class="title" :style="index == active_index ? tabs_theme_style.tabs_title_checked : tabs_theme_style.tabs_title">{{ item.title }}</view>
|
||||
<view class="desc" :style="tabs_theme_index == '1' && index == active_index ? tabs_check : ''">{{ item.desc }}</view>
|
||||
<iconfont v-if="tabs_theme_index == '3' && index == active_index" name="icon-checked-smooth" class="icon" :style="tabs_theme_index == '3' && index == active_index ? icon_tabs_check : ''" propContainerDisplay="flex" size="40rpx"></iconfont>
|
||||
<view class="bottom_line" :class="tabs_bottom_line_theme" :style="tabs_check"></view>
|
||||
<view class="tabs-view" :style="propStyle + propTabsBackground">
|
||||
<view class="flex-row gap-10 jc-sb align-c" :style="propsTabsPaddingStyle">
|
||||
<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">
|
||||
<view v-for="(item, index) in tabs_list" :key="index" :id="'one-nav-item-' + index" class="item nowrap flex-col jc-c align-c gap-4" :class="tabs_theme + (index == active_index ? ' active' : '') + ((tabs_theme_index == '0' && tabs_theme_1_style) || tabs_theme_index == '1' || tabs_theme_index == '2' ? ' pb-0' : '')" :style="'margin-left:' + (index == 0 ? '0' : tabs_spacing) + 'rpx;margin-right:' + (index - 1 == tabs_list ? '0' : tabs_spacing) + 'rpx;'" :data-index="index" @tap="handle_event">
|
||||
<view class="nowrap flex-col jc-c align-c" :style="tabs_sign_spacing">
|
||||
<image v-if="!isEmpty(item.img)" :src="item.img[0].url" class="img" mode="widthFix" />
|
||||
<view class="title" :style="index == active_index ? tabs_theme_style.tabs_title_checked : tabs_theme_style.tabs_title + tabs_padding_bottom">{{ item.title }}</view>
|
||||
<view class="desc" :style="tabs_theme_index == '1' && index == active_index ? tabs_check : ''">{{ item.desc }}</view>
|
||||
<iconfont v-if="tabs_theme_index == '3' && index == active_index" name="icon-checked-smooth" class="icon" :style="tabs_theme_index == '3' && index == active_index ? icon_tabs_check : ''" propContainerDisplay="flex" size="40rpx"></iconfont>
|
||||
<view class="bottom_line" :class="tabs_bottom_line_theme" :style="tabs_check"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view :class="tabs_theme_index == '3' ? 'pb-14' : (tabs_theme_index == '0' && tabs_theme_1_style) || tabs_theme_index == '1' || tabs_theme_index == '2' ? '' : 'padding-bottom-sm'">
|
||||
<iconfont v-if="propIsTabsIcon" :name="'icon-' + icon.more_icon_class || 'category-more'" :size="icon.more_icon_size + '' || '14'" :color="icon.more_icon_color || '#000'" propContainerDisplay="flex" @click="category_check_event"></iconfont>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view :style="tabs_padding_bottom">
|
||||
<iconfont v-if="propIsTabsIcon" :name="'icon-' + icon.more_icon_class || 'category-more'" :size="icon.more_icon_size + '' || '14'" :color="icon.more_icon_color || '#000'" propContainerDisplay="flex" @click="category_check_event"></iconfont>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 选项卡更多弹窗 -->
|
||||
|
|
@ -96,6 +98,10 @@
|
|||
type: [String, Number],
|
||||
default: '0',
|
||||
},
|
||||
propsTabsPaddingStyle: {
|
||||
type: String,
|
||||
default: '',
|
||||
}
|
||||
},
|
||||
components: {
|
||||
componentPopup,
|
||||
|
|
@ -107,6 +113,8 @@
|
|||
tabs_check: '',
|
||||
icon_tabs_check: '',
|
||||
tabs_spacing: '',
|
||||
tabs_sign_spacing: '',
|
||||
tabs_padding_bottom: '',
|
||||
tabs_list: [],
|
||||
active_index: 0,
|
||||
tabs_theme_style: {
|
||||
|
|
@ -171,7 +179,9 @@
|
|||
};
|
||||
this.setData({
|
||||
tabs_spacing: Number(new_style.tabs_spacing),
|
||||
tabs_sign_spacing: !isEmpty(new_style.tabs_sign_spacing) ? `row-gap:${new_style.tabs_sign_spacing * 2}rpx;` : 'row-gap:8rpx;',
|
||||
tabs_list: new_content.tabs_list,
|
||||
tabs_padding_bottom: this.get_padding_bottom(new_content, new_style),
|
||||
// 选项卡主题
|
||||
tabs_theme: this.get_tabs_theme(new_content),
|
||||
tabs_theme_index: new_content.tabs_theme,
|
||||
|
|
@ -195,6 +205,15 @@
|
|||
let value = arr[data.tabs_theme];
|
||||
return value === undefined ? 'tabs-style-1' : value;
|
||||
},
|
||||
get_padding_bottom(form, new_style) {
|
||||
let bottom = 0;
|
||||
if (form.tabs_theme == '0') {
|
||||
bottom = 3;
|
||||
} else if (form.tabs_theme == '3') {
|
||||
bottom = 10;
|
||||
}
|
||||
return ['1', '2', '4'].includes(form.tabs_theme) ? '' : `padding-bottom: ${(new_style?.tabs_sign_spacing || 0) + bottom}px;`;
|
||||
},
|
||||
// 选中的背景渐变色样式
|
||||
tabs_check_computer(data) {
|
||||
const new_gradient_params = {
|
||||
|
|
@ -233,7 +252,7 @@
|
|||
<style lang="scss" scoped>
|
||||
.tabs {
|
||||
.item {
|
||||
padding: 0 0 10rpx 0;
|
||||
// padding: 0 0 10rpx 0;
|
||||
position: relative;
|
||||
&:first-of-type {
|
||||
margin-left: 0;
|
||||
|
|
@ -256,14 +275,14 @@
|
|||
height: 6rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
// position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
}
|
||||
.icon {
|
||||
position: absolute;
|
||||
// position: absolute;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
font-size: 40rpx;
|
||||
|
|
@ -317,7 +336,7 @@
|
|||
}
|
||||
}
|
||||
&.tabs-style-4 {
|
||||
padding-bottom: 28rpx;
|
||||
// padding-bottom: 28rpx;
|
||||
&.active {
|
||||
.title {
|
||||
color: #ff2222;
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<view class="ou" :style="style_container">
|
||||
<view class="flex-col ou" :style="style_img_container">
|
||||
<componentDiyTabs :propValue="propValue" :propTop="propTop" :propNavIsTop="propNavIsTop" :propTabsIsTop="propTabsIsTop" :propIsCommon="false" :propSpacingCommonStyle="spacing_common_style" @onComputerHeight="tabs_height_event" @onTabsTap="tabs_click_event"></componentDiyTabs>
|
||||
<componentDiyTabs :propValue="propValue" :propTop="propTop" :propNavIsTop="propNavIsTop" :propTabsIsTop="propTabsIsTop" :propIsCommon="false" :propsTabsPaddingStyle="tabs_padding_style" :propSpacingCommonStyle="spacing_common_style" @onComputerHeight="tabs_height_event" @onTabsTap="tabs_click_event"></componentDiyTabs>
|
||||
<componentDiycarousel :propValue="propValue" :propIsCommon="false" @onVideoPlay="video_play"></componentDiycarousel>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { common_styles_computer, common_img_computer } from '@/common/js/common/common.js';
|
||||
import { common_styles_computer, common_img_computer, padding_computer, isEmpty } from '@/common/js/common/common.js';
|
||||
import componentDiyTabs from '@/components/diy/tabs';
|
||||
import componentDiycarousel from '@/components/diy/carousel';
|
||||
export default {
|
||||
|
|
@ -58,6 +58,7 @@
|
|||
margin_left: 0,
|
||||
margin_right: 0,
|
||||
},
|
||||
tabs_padding_style: '',
|
||||
// top_up: '0',
|
||||
};
|
||||
},
|
||||
|
|
@ -83,6 +84,7 @@
|
|||
// style_container: `${common_styles_computer(common_style)};gap:${new_style.data_spacing * 2}rpx`,
|
||||
style_container: `${common_styles_computer(new_style.common_style)};`,
|
||||
style_img_container: common_img_computer(new_style.common_style) + 'gap:' + new_style.data_spacing * 2 + 'rpx',
|
||||
tabs_padding_style: !isEmpty(new_style.tabs_padding) ? padding_computer(new_style.tabs_padding) : '',
|
||||
spacing_common_style: {
|
||||
padding: 0,
|
||||
padding_top: new_style.common_style.padding_top,
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<view :class="top_up == '1' ? 'tabs-top' : ''" :style="tabs_top_style">
|
||||
<view class="tabs-content wh-auto bs-bb" :style="style_container">
|
||||
<view class="wh-auto bs-bb" :style="style_img_container">
|
||||
<componentDiyModulesTabsView :propValue="tabs_data" :propIsTabsIcon="true" :propTop="propTop" :propStyle="propStyle" @onTabsTap="tabs_click_event"></componentDiyModulesTabsView>
|
||||
<componentDiyModulesTabsView :propValue="tabs_data" :propIsTabsIcon="true" :propTop="propTop" :propsTabsPaddingStyle="propsTabsPaddingStyle" :propStyle="propStyle" @onTabsTap="tabs_click_event"></componentDiyModulesTabsView>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -59,6 +59,10 @@
|
|||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
propsTabsPaddingStyle: {
|
||||
type: String,
|
||||
default: '',
|
||||
}
|
||||
},
|
||||
components: {
|
||||
componentDiyModulesTabsView,
|
||||
|
|
|
|||
|
|
@ -17,11 +17,13 @@
|
|||
</view>
|
||||
<view class="flex-row gap-10 align-c right-0 pa">
|
||||
<template v-if="form.keyword_show == '1'">
|
||||
<view v-for="item in keyword_list" :key="item.id" :style="keyword_style" :data-value="item.link.page" @tap="url_event">
|
||||
{{ item.title }}
|
||||
<view class="flex-row align-c" :style="keyword_gap">
|
||||
<view v-for="item in keyword_list" :key="item.id" :style="keyword_style" :data-value="item.link" @tap="url_event">
|
||||
{{ item.title }}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<view v-if="form.right_show == '1'" class="nowrap flex-row align-c" :style="right_style" :data-value="form.right_link.page" @tap="url_event"
|
||||
<view v-if="form.right_show == '1'" class="nowrap flex-row align-c" :style="right_style" :data-value="form.right_link" @tap="url_event"
|
||||
>{{ form.right_title }}
|
||||
<iconfont name="icon-arrow-right" :color="new_style.right_color" :size="new_style.right_size * 2 + 'rpx'" propContainerDisplay="flex"></iconfont>
|
||||
</view>
|
||||
|
|
@ -64,6 +66,7 @@
|
|||
subtitle_style: '',
|
||||
keyword_list: [],
|
||||
keyword_style: '',
|
||||
keyword_gap: '',
|
||||
right_style: '',
|
||||
right_size: '',
|
||||
};
|
||||
|
|
@ -85,7 +88,7 @@
|
|||
const new_form = this.propValue.content;
|
||||
const new_style = this.propValue.style;
|
||||
|
||||
const { keyword_color, keyword_size, right_color, right_size, common_style, title_weight, title_color, title_size } = new_style;
|
||||
const { keyword_color, keyword_size, right_color, right_size, common_style, title_weight, title_color, title_size, keyword_spacing = 10 } = new_style;
|
||||
// 标题样式设置
|
||||
let common_styles = '';
|
||||
if (title_weight == 'italic') {
|
||||
|
|
@ -100,6 +103,7 @@
|
|||
title_center: new_form.is_title_center == '1' ? 'jc-c' : '',
|
||||
keyword_list: new_form.keyword_list.filter((item) => item.is_show == '1'), // 关键字
|
||||
keyword_style: `color:${keyword_color}; font-size: ${keyword_size * 2}rpx;`, // 关键字设置
|
||||
keyword_gap: !isEmpty(keyword_spacing) ? `gap: ${ keyword_spacing * 2}rpx` : 'gap: 20rpx;', // 关键字间距设置
|
||||
right_size: right_size * 2 + 'rpx', // 右边按钮设置
|
||||
right_style: `color:${right_color}; font-size: ${right_size * 2}rpx;`, //右侧按钮样式
|
||||
title_style: `color:${title_color}; font-size: ${title_size * 2}rpx; ${common_styles}`, // 标题样式设置
|
||||
|
|
@ -119,7 +123,9 @@
|
|||
return `color:${new_style.subtitle_color}; font-size: ${new_style.subtitle_size * 2}rpx; ${common_styles}`;
|
||||
},
|
||||
url_event(e) {
|
||||
app.globalData.url_event(e);
|
||||
if (!isEmpty(e.currentTarget.dataset.value)) {
|
||||
app.globalData.url_open(e.currentTarget.dataset.value.page);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="flex-row align-c" :style="'gap:' + base_data.img_space * 2 + 'rpx;'">
|
||||
<view v-for="(item, index) in icon_setting" :key="index" :style="{ width: base_data.img_size + 'px', height: base_data.img_size + 'px' }" :data-value="item.link.page" @tap="url_event">
|
||||
<view v-for="(item, index) in icon_setting" :key="index" :style="{ width: base_data.img_size + 'px', height: base_data.img_size + 'px' }" :data-value="item.link.page || ''" @tap="url_event">
|
||||
<image v-if="item.img.length > 0" :src="item.img[0].url" class="border-radius-sm" mode="scaleToFill" :style="{ width: base_data.img_size + 'px', height: base_data.img_size + 'px' }" />
|
||||
<iconfont v-else :name="'icon-' + item.icon" :size="base_data.img_size * 2 + 'rpx'" color="#666" propContainerDisplay="flex"></iconfont>
|
||||
</view>
|
||||
|
|
|
|||
Loading…
Reference in New Issue