sileya-ai
/
vr-shopxo-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化代码提交

master
于肖磊 2024-11-07 17:49:56 +08:00
parent ebf7d6eff8
commit 1277a44f89
14 changed files with 265 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
components/diy/article-list.vue
View File

@ -4,26 +4,28 @@
<view class="oh" :style="style_img_container"> <view class="oh" :style="style_img_container">
<view class="pr oh" :style="style"> <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-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"> <view v-for="(item, index) in data_list" :key="index" class="item oh" :style="article_style" :data-value="item.data.url" @tap="url_event">
<template v-if="article_theme !== '3'"> <view :class="article_theme == '0' ? 'flex-row oh' : 'flex-col oh'" :style="article_img_style">
<template v-if="item.new_cover.length > 0"> <template v-if="article_theme !== '3'">
<image :src="item.new_cover[0].url" class="img" :style="img_radius + img_size" mode="aspectFill" /> <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>
<template v-else> <view class="jc-sb flex-1" :class="article_theme == '3' ? 'flex-row align-c' : 'flex-col'" :style="article_theme !== '0' ? content_padding : ''">
<image :src="item.data.cover" class="img" :style="img_radius + img_size" mode="aspectFill" /> <div class="flex-col" :class="article_theme == '3' ? 'flex-1 flex-width' : ''" :style="'gap:' + name_desc_space + 'px;'">
</template> <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>
</template> <div v-if="field_show.includes('2')" class="desc text-line-1" :style="article_desc">{{ item.data.describe || '' }}</div>
<view class="jc-sb flex-1" :class="article_theme == '3' ? 'flex-row align-c' : 'flex-col'" :style="article_theme !== '0' ? content_padding : ''"> </div>
<div class="flex-col" :class="article_theme == '3' ? 'flex-1 flex-width' : ''" :style="'gap:' + name_desc_space + 'px;'"> <view class="flex-row jc-sb gap-8" :class="article_theme == '3' ? 'margin-left' : 'align-e margin-top'">
<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> <view :style="article_date">{{ field_show.includes('0') ? item.data.add_time : '' }}</view>
<div v-if="field_show.includes('2')" class="desc text-line-1" :style="article_desc">{{ item.data.describe || '' }}</div> <view v-show="field_show.includes('1')" class="flex-row align-c gap-3" :style="article_page_view">
</div> <iconfont name="icon-eye" propContainerDisplay="flex"></iconfont>
<view class="flex-row jc-sb gap-8" :class="article_theme == '3' ? 'margin-left' : 'align-e margin-top'"> <view>
<view :style="article_date">{{ field_show.includes('0') ? item.data.add_time : '' }}</view> {{ item.data.access_count ? item.data.access_count : '' }}
<view v-show="field_show.includes('1')" class="flex-row align-c gap-3" :style="article_page_view"> </view>
<iconfont name="icon-eye" propContainerDisplay="flex"></iconfont>
<view>
{{ item.data.access_count ? item.data.access_count : '' }}
</view> </view>
</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 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"> <swiper-item v-for="(item1, index1) in article_carousel_list" :key="index1">
<view class="flex-row" :style="article_spacing"> <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"> <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">
<template v-if="item.new_cover.length > 0"> <view class="oh flex-col" :style="article_img_style">
<image :src="item.new_cover[0].url" class="img" :style="img_radius + article_item_height" mode="aspectFill" /> <template v-if="item.new_cover.length > 0">
</template> <image :src="item.new_cover[0].url" class="img" :style="img_radius + article_item_height" mode="aspectFill" />
<template v-else> </template>
<image :src="item.data.cover" class="img" :style="img_radius + article_item_height" mode="aspectFill" /> <template v-else>
</template> <image :src="item.data.cover" class="img" :style="img_radius + article_item_height" mode="aspectFill" />
<view class="jc-sb flex-1 flex-col" :style="article_theme !== '0' ? content_padding : ''"> </template>
<div class="flex-col" :style="'gap:' + name_desc_space + 'px;'"> <view class="jc-sb flex-1 flex-col" :style="article_theme !== '0' ? content_padding : ''">
<div class="title text-line-2" :style="article_name + article_name_height_computer">{{ item.new_title ? item.new_title : item.data.title }}</div> <div class="flex-col" :style="'gap:' + name_desc_space + 'px;'">
<div v-if="field_show.includes('2')" class="desc text-line-1" :style="article_desc">{{ item.data.describe || '' }}</div> <div class="title text-line-2" :style="article_name + article_name_height_computer">{{ item.new_title ? item.new_title : item.data.title }}</div>
</div> <div v-if="field_show.includes('2')" class="desc text-line-1" :style="article_desc">{{ item.data.describe || '' }}</div>
<view class="flex-row jc-sb gap-8 align-e margin-top"> </div>
<view :style="article_date">{{ field_show.includes('0') ? item.data.add_time : '' }}</view> <view class="flex-row jc-sb gap-8 align-e margin-top">
<view v-show="field_show.includes('1')" class="flex-row align-c gap-3" :style="article_page_view"> <view :style="article_date">{{ field_show.includes('0') ? item.data.add_time : '' }}</view>
<iconfont name="icon-eye" propContainerDisplay="flex"></iconfont> <view v-show="field_show.includes('1')" class="flex-row align-c gap-3" :style="article_page_view">
<view> <iconfont name="icon-eye" propContainerDisplay="flex"></iconfont>
{{ item.data.access_count ? item.data.access_count : '' }} <view>
{{ item.data.access_count ? item.data.access_count : '' }}
</view>
</view> </view>
</view> </view>
</view> </view>
@ -68,7 +72,7 @@
<script> <script>
const app = getApp(); 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 system = app.globalData.get_system_info(null, null, true);
var sys_width = app.globalData.window_width_handle(system.windowWidth); var sys_width = app.globalData.window_width_handle(system.windowWidth);
export default { export default {
@ -126,6 +130,7 @@
article_item_height: '', article_item_height: '',
article_style: '', article_style: '',
article_img_style: '',
// 轮播图定时轮播 // 轮播图定时轮播
interval_time: 2000, 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') { if (this.article_theme == '0') {
this.setData({ this.setData({
img_size: img_style, 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') { } else if (this.article_theme == '1') {
this.setData({ this.setData({
img_size: img_style, 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') { } else if (this.article_theme == '2') {
this.setData({ this.setData({
img_size: img_style, 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') { } else if (this.article_theme == '3') {
this.setData({ this.setData({
@ -259,11 +274,12 @@
// 是否滚动修改 // 是否滚动修改
is_roll: new_style.is_roll, is_roll: new_style.is_roll,
article_item_height: `height: ${new_style.article_height * 2}rpx`, 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', 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_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)); const cloneList = JSON.parse(JSON.stringify(this.data_list));

6
components/diy/article-tabs.vue
View File

@ -2,7 +2,7 @@
<!-- 文章列表 --> <!-- 文章列表 -->
<view class="article-tabs ou" :class="'article-tabs-' + propKey" :style="style_container"> <view class="article-tabs ou" :class="'article-tabs-' + propKey" :style="style_container">
<view class="ou" :style="style_img_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"> <view class="oh">
<componentDiyArticleList :propKey="diy_key" :propValue="article_tabs" :propIsCommonStyle="false"></componentDiyArticleList> <componentDiyArticleList :propKey="diy_key" :propValue="article_tabs" :propIsCommonStyle="false"></componentDiyArticleList>
</view> </view>
@ -12,7 +12,7 @@
<script> <script>
const app = getApp(); 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 componentDiyModulesTabsView from '@/components/diy/modules/tabs-view';
import componentDiyArticleList from '@/components/diy/article-list'; // 状态栏高度 import componentDiyArticleList from '@/components/diy/article-list'; // 状态栏高度
var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0)); var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
@ -65,6 +65,7 @@
style_img_container: '', style_img_container: '',
style: '', style: '',
article_tabs: {}, article_tabs: {},
tabs_padding_style: '',
// 是否滑动置顶 // 是否滑动置顶
top_up: '0', top_up: '0',
tabs_style: '', tabs_style: '',
@ -168,6 +169,7 @@
style_container: common_styles_computer(common_style), style_container: common_styles_computer(common_style),
style_img_container: common_img_computer(common_style, this.propIndex), style_img_container: common_img_computer(common_style, this.propIndex),
tabs_style: new_tabs_style, tabs_style: new_tabs_style,
tabs_padding_style: !isEmpty(new_style.tabs_padding) ? padding_computer(new_style.tabs_padding) : '',
}); });
}, },
// tabs切换事件 // tabs切换事件

2
components/diy/data-magic.vue
View File

@ -158,7 +158,7 @@
const new_form = this.propValue.content; const new_form = this.propValue.content;
const new_style = this.propValue.style; const new_style = this.propValue.style;
const container_height = !isEmpty(new_form.container_height) ? new_form.container_height : sys_width; 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({ this.setData({
form: new_form, form: new_form,
new_style: new_style, new_style: new_style,

2
components/diy/diy.vue
View File

@ -15,7 +15,7 @@
</view> </view>
<template v-if="is_tabs_type"> <template v-if="is_tabs_type">
<template v-if="diy_data.length > 0"> <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'"> <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> <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>

279
components/diy/goods-list.vue
View File

@ -3,59 +3,90 @@
<view class="oh" :style="style_img_container"> <view class="oh" :style="style_img_container">
<view :class="outer_class" :style="onter_style"> <view :class="outer_class" :style="onter_style">
<block v-if="!['5'].includes(theme)"> <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"> <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">
<block v-if="theme == '6'"> <view :class="layout_type" :style="layout_img_style">
<view :class="['flex-row align-c jc-sb ptb-15 mlr-10 gap-20', { 'br-b-e': index != list.length - 1 }]"> <block v-if="theme == '6'">
<view v-if="is_show('title')" :class="text_line" :style="title_style">{{ item.title }}</view> <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('price') && !isEmpty(item.min_price)" class="num nowrap" :style="'color:' + new_style.shop_price_color"> <view v-if="is_show('title')" :class="text_line" :style="title_style">{{ item.title }}</view>
<text class="identifying">{{ item.show_price_symbol }}</text> <view v-if="is_show('price') && !isEmpty(item.min_price)" class="num nowrap" :style="'color:' + new_style.shop_price_color">
<text :style="price_style">{{ item.min_price }}</text> <text class="identifying">{{ item.show_price_symbol }}</text>
<text v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</text> <text :style="price_style">{{ item.min_price }}</text>
</view> <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> </view>
</block> </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"> <block v-else>
<view class="flex-col gap-10 top-title"> <block v-if="!isEmpty(item)">
<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="!isEmpty(item.new_cover)" :style="img_size">
<view v-if="is_show('title')" :class="text_line" :style="title_style">{{ item.title }}</view> <imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
<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>
<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-else :style="img_size">
<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> <imageEmpty :propImageSrc="item.images" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
</view> </view>
</view> </block>
<view v-if="!['3', '4', '5'].includes(form.theme)" class="flex-col gap-5"> <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="[form.is_price_solo == '1' ? 'flex-row align-c nowrap' : 'flex-col gap-5']"> <view class="flex-col gap-10 top-title">
<view v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="'color:' + new_style.shop_price_color"> <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' }">
<text class="identifying">{{ item.show_price_symbol }}</text> <view v-if="is_show('title')" :class="text_line" :style="title_style">{{ item.title }}</view>
<text :style="price_style">{{ item.min_price }}</text> <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>
<text v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</text>
</view> </view>
<view v-if="show_content && is_show('original_price') && !isEmpty(item.min_original_price)" class="text-size-xss flex-row"> <view v-if="show_content && is_show('plugins_view_icon') && !isEmpty(item.plugins_view_icon_data)" class="flex-row gap-5 align-c">
<image v-if="form.static_img.length > 0" class="original-price-left" :src="form.static_img[0].url" model="widthFix"></image> <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>
<text :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]"> </view>
{{ item.show_original_price_symbol }}{{ item.min_original_price }} </view>
<block v-if="is_show('original_price_unit')"> <view v-if="!['3', '4', '5'].includes(form.theme)" class="flex-col gap-5">
{{ item.show_original_price_unit }} <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> </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> </view>
<view class="flex-row jc-sb align-e"> <view v-else class="flex-row align-c jc-sb">
<view> <view class="flex-row align-c nowrap">
<view v-if="show_content" class="flex-row align-c text-size-xss"> <view v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="'color:' + new_style.shop_price_color">
<view v-if="is_show('sales_count')" class="pr-5" :style="sold_number_style">已售{{ item.sales_count }}件</view> <text class="identifying">{{ item.show_price_symbol }}</text>
<!-- <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> --> <text :style="price_style">{{ item.min_price }}</text>
<!-- <view v-if="is_show('4')" class="pl-5" :style="score_style">评分0</view> --> <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> </view>
<view v-if="form.is_shop_show == '1'" class="pr" :data-index="index" @tap.stop="goods_button_event"> <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>
</view> </view>
<view v-else class="flex-row align-c jc-sb"> </block>
<view class="flex-row align-c nowrap"> </view>
<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>
</view> </view>
</block> </block>
<block v-else> <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 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"> <swiper-item v-for="(item1, index1) in shop_content_list" :key="index1">
<view class="flex-row" :style="onter_style"> <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"> <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">
<block v-if="!isEmpty(item)"> <view :class="layout_type" :style="layout_img_style">
<view v-if="!isEmpty(item.new_cover)" :class="'flex-img' + theme"> <block v-if="!isEmpty(item)">
<imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty> <view v-if="!isEmpty(item.new_cover)" :class="'flex-img' + theme">
</view> <imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
<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> </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-else :class="'flex-img' + theme">
<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> <imageEmpty :propImageSrc="item.images" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
</view> </view>
</view> </block>
<view class="flex-row align-c jc-sb"> <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-row align-c nowrap"> <view class="flex-col gap-10 top-title">
<view v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="'color:' + new_style.shop_price_color"> <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' }">
<text class="identifying">{{ item.show_price_symbol }}</text> <view v-if="is_show('title')" :class="text_line" :style="title_style">{{ item.title }}</view>
<text :style="price_style">{{ item.min_price }}</text> <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>
<text v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</text>
</view> </view>
<view v-if="show_content && is_show('original_price') && !isEmpty(item.min_original_price)" class="text-size-xss flex"> <view v-if="show_content && is_show('plugins_view_icon') && !isEmpty(item.plugins_view_icon_data)" class="flex-row gap-5 align-c">
<image v-if="form.static_img.length > 0" class="original-price-left" :src="form.static_img[0].url" model="widthFix"></image> <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>
<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> </view>
<view v-if="form.is_shop_show == '1'" class="pr" :data-index="index1" :data-split-index="index" @tap.stop="goods_button_event"> <view class="flex-row align-c jc-sb">
<block v-if="form.shop_type == 'text'"> <view class="flex-row align-c nowrap">
<view class="plr-11 padding-vertical-xs round" :style="button_style + ('color:' + new_style.shop_button_text_color)">{{ form.shop_button_text }}</view> <view v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="'color:' + new_style.shop_price_color">
</block> <text class="identifying">{{ item.show_price_symbol }}</text>
<view v-else class="round padding-horizontal-sm ptb-5" :style="button_gradient"> <text :style="price_style">{{ item.min_price }}</text>
<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> <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>
<view v-if="form.shop_button_effect == '1'" class="cart-badge-icon pa badge-style"> <view v-if="form.is_shop_show == '1'" class="pr" :data-index="index1" :data-split-index="index" @tap.stop="goods_button_event">
<component-badge :propNumber="item.user_cart_count || 0"></component-badge> <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> </view>
</view> </view>
@ -169,7 +173,7 @@
<script> <script>
const app = getApp(); 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 imageEmpty from '@/components/diy/modules/image-empty.vue';
import componentBadge from '@/components/badge/badge'; import componentBadge from '@/components/badge/badge';
var system = app.globalData.get_system_info(null, null, true); var system = app.globalData.get_system_info(null, null, true);
@ -219,6 +223,7 @@
// 不同风格下的样式 // 不同风格下的样式
layout_type: '', layout_type: '',
layout_style: '', layout_style: '',
layout_img_style: '',
content_style: '', // 内容区域的样式 content_style: '', // 内容区域的样式
show_content: false, // 显示除标题外的其他区域 show_content: false, // 显示除标题外的其他区域
text_line: '', // 超过多少行隐藏 text_line: '', // 超过多少行隐藏
@ -322,8 +327,9 @@
content_outer_spacing: new_style.content_outer_spacing, // 商品间距 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'};`, 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_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), // 内容区域的样式 content_style: this.get_content_style(new_style, new_form), // 内容区域的样式
show_content: ['0', '1', '2'].includes(new_form.theme), // 显示除标题外的其他区域 show_content: ['0', '1', '2'].includes(new_form.theme), // 显示除标题外的其他区域
text_line: this.get_text_line(new_form), // 超过多少行隐藏 text_line: this.get_text_line(new_form), // 超过多少行隐藏
@ -378,35 +384,9 @@
return line; 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) { get_layout_style(new_style, form) {
const radius = form.theme == '6' ? '' : radius_computer(new_style.shop_radius); 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 = ``; let size_style = ``;
if (['1', '4'].includes(form.theme)) { if (['1', '4'].includes(form.theme)) {
size_style = `width: calc((100% - ${new_style.content_outer_spacing * 2 + 'rpx'}) / 2);`; size_style = `width: calc((100% - ${new_style.content_outer_spacing * 2 + 'rpx'}) / 2);`;
@ -415,7 +395,16 @@
} else if (form.theme == '5') { } 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'};`; 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) { get_multicolumn_columns_width(new_style, form) {
const { carousel_col } = form; const { carousel_col } = form;

6
components/diy/goods-tabs.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<view class="goods-tabs ou" :class="'goods-tabs-' + propKey" :style="style_container"> <view class="goods-tabs ou" :class="'goods-tabs-' + propKey" :style="style_container">
<view class="ou" :style="style_img_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"> <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> <componentGoodsList ref="diy_goods_list" :propKey="diy_key" :propIndex="propDiyIndex" :propValue="goods_tabs" :propIsCommonStyle="false" @goods_buy_event="goods_buy_event"></componentGoodsList>
</view> </view>
@ -11,7 +11,7 @@
<script> <script>
const app = getApp(); 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 componentDiyModulesTabsView from '@/components/diy/modules/tabs-view';
import componentGoodsList from '@/components/diy/goods-list'; import componentGoodsList from '@/components/diy/goods-list';
// 状态栏高度 // 状态栏高度
@ -65,6 +65,7 @@
style_container: '', style_container: '',
style_img_container: '', style_img_container: '',
goods_tabs: {}, goods_tabs: {},
tabs_padding_style: '',
// 是否滑动置顶 // 是否滑动置顶
top_up: '0', top_up: '0',
tabs_top: 0, tabs_top: 0,
@ -162,6 +163,7 @@
style_container: common_styles_computer(common_style), style_container: common_styles_computer(common_style),
style_img_container: common_img_computer(common_style, this.propIndex), style_img_container: common_img_computer(common_style, this.propIndex),
tabs_style: new_tabs_style, tabs_style: new_tabs_style,
tabs_padding_style: !isEmpty(new_style.tabs_padding) ? padding_computer(new_style.tabs_padding) : '',
}); });
}, },
tabs_click_event(index) { tabs_click_event(index) {

2
components/diy/img-magic.vue
View File

@ -116,7 +116,7 @@
fit = 'aspectFill'; fit = 'aspectFill';
} }
const container_height = !isEmpty(new_content.container_height) ? new_content.container_height : sys_width; 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({ this.setData({
form: this.propValue.content, form: this.propValue.content,
new_style: this.propValue.style, new_style: this.propValue.style,

2
components/diy/modules/custom/model-panel.vue
View File

@ -57,7 +57,7 @@
get_com_style(form, scale) { 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);`; 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') { 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; return style;
}, },

2
components/diy/modules/custom/model-text.vue
View File

@ -83,7 +83,7 @@
get_com_style(form, scale) { get_com_style(form, scale) {
let style = `${ gradient_handle(form.color_list, form.direction) } ${radius_computer(form.bg_radius, scale, true)}`; let style = `${ gradient_handle(form.color_list, form.direction) } ${radius_computer(form.bg_radius, scale, true)}`;
if (form.border_show == '1') { 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') { if (form.is_rich_text == '1' && form.is_up_down == '1') {

59
components/diy/modules/tabs-view.vue
View File

@ -1,24 +1,26 @@
<template> <template>
<!-- 66rpx是自定义顶部导航栏的高度--> <!-- 66rpx是自定义顶部导航栏的高度-->
<view class="tabs-view" :style="tabs_sticky"> <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-view" :style="propStyle + propTabsBackground">
<view class="tabs flex-1 flex-width"> <view class="flex-row gap-10 jc-sb align-c" :style="propsTabsPaddingStyle">
<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="tabs flex-1 flex-width">
<view class="flex-row"> <scroll-view :scroll-x="true" :show-scrollbar="false" :scroll-with-animation="true" :scroll-into-view="'one-nav-item-' + active_index" class="wh-auto">
<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="flex-row">
<view class="nowrap flex-col jc-c align-c gap-4"> <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">
<image v-if="!isEmpty(item.img)" :src="item.img[0].url" class="img" mode="widthFix" /> <view class="nowrap flex-col jc-c align-c" :style="tabs_sign_spacing">
<view class="title" :style="index == active_index ? tabs_theme_style.tabs_title_checked : tabs_theme_style.tabs_title">{{ item.title }}</view> <image v-if="!isEmpty(item.img)" :src="item.img[0].url" class="img" mode="widthFix" />
<view class="desc" :style="tabs_theme_index == '1' && index == active_index ? tabs_check : ''">{{ item.desc }}</view> <view class="title" :style="index == active_index ? tabs_theme_style.tabs_title_checked : tabs_theme_style.tabs_title + tabs_padding_bottom">{{ item.title }}</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="desc" :style="tabs_theme_index == '1' && index == active_index ? tabs_check : ''">{{ item.desc }}</view>
<view class="bottom_line" :class="tabs_bottom_line_theme" :style="tabs_check"></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> </view>
</view> </scroll-view>
</scroll-view> </view>
</view> <view :style="tabs_padding_bottom">
<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>
<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>
</view> </view>
<!-- 选项卡更多弹窗 --> <!-- 选项卡更多弹窗 -->
@ -96,6 +98,10 @@
type: [String, Number], type: [String, Number],
default: '0', default: '0',
}, },
propsTabsPaddingStyle: {
type: String,
default: '',
}
}, },
components: { components: {
componentPopup, componentPopup,
@ -107,6 +113,8 @@
tabs_check: '', tabs_check: '',
icon_tabs_check: '', icon_tabs_check: '',
tabs_spacing: '', tabs_spacing: '',
tabs_sign_spacing: '',
tabs_padding_bottom: '',
tabs_list: [], tabs_list: [],
active_index: 0, active_index: 0,
tabs_theme_style: { tabs_theme_style: {
@ -171,7 +179,9 @@
}; };
this.setData({ this.setData({
tabs_spacing: Number(new_style.tabs_spacing), 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_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: this.get_tabs_theme(new_content),
tabs_theme_index: new_content.tabs_theme, tabs_theme_index: new_content.tabs_theme,
@ -195,6 +205,15 @@
let value = arr[data.tabs_theme]; let value = arr[data.tabs_theme];
return value === undefined ? 'tabs-style-1' : value; 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) { tabs_check_computer(data) {
const new_gradient_params = { const new_gradient_params = {
@ -233,7 +252,7 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.tabs { .tabs {
.item { .item {
padding: 0 0 10rpx 0; // padding: 0 0 10rpx 0;
position: relative; position: relative;
&:first-of-type { &:first-of-type {
margin-left: 0; margin-left: 0;
@ -256,14 +275,14 @@
height: 6rpx; height: 6rpx;
border-radius: 20rpx; border-radius: 20rpx;
background-color: red; background-color: red;
position: absolute; // position: absolute;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
display: none; display: none;
} }
.icon { .icon {
position: absolute; // position: absolute;
bottom: 0; bottom: 0;
text-align: center; text-align: center;
font-size: 40rpx; font-size: 40rpx;
@ -317,7 +336,7 @@
} }
} }
&.tabs-style-4 { &.tabs-style-4 {
padding-bottom: 28rpx; // padding-bottom: 28rpx;
&.active { &.active {
.title { .title {
color: #ff2222; color: #ff2222;

6
components/diy/tabs-carousel.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<view class="ou" :style="style_container"> <view class="ou" :style="style_container">
<view class="flex-col ou" :style="style_img_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> <componentDiycarousel :propValue="propValue" :propIsCommon="false" @onVideoPlay="video_play"></componentDiycarousel>
</view> </view>
</view> </view>
</template> </template>
<script> <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 componentDiyTabs from '@/components/diy/tabs';
import componentDiycarousel from '@/components/diy/carousel'; import componentDiycarousel from '@/components/diy/carousel';
export default { export default {
@ -58,6 +58,7 @@
margin_left: 0, margin_left: 0,
margin_right: 0, margin_right: 0,
}, },
tabs_padding_style: '',
// top_up: '0', // 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(common_style)};gap:${new_style.data_spacing * 2}rpx`,
style_container: `${common_styles_computer(new_style.common_style)};`, 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', 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: { spacing_common_style: {
padding: 0, padding: 0,
padding_top: new_style.common_style.padding_top, padding_top: new_style.common_style.padding_top,

6
components/diy/tabs.vue
View File

@ -4,7 +4,7 @@
<view :class="top_up == '1' ? 'tabs-top' : ''" :style="tabs_top_style"> <view :class="top_up == '1' ? 'tabs-top' : ''" :style="tabs_top_style">
<view class="tabs-content wh-auto bs-bb" :style="style_container"> <view class="tabs-content wh-auto bs-bb" :style="style_container">
<view class="wh-auto bs-bb" :style="style_img_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> </view>
</view> </view>
@ -59,6 +59,10 @@
type: [String, Number], type: [String, Number],
default: '', default: '',
}, },
propsTabsPaddingStyle: {
type: String,
default: '',
}
}, },
components: { components: {
componentDiyModulesTabsView, componentDiyModulesTabsView,

16
components/diy/title.vue
View File

@ -17,11 +17,13 @@
</view> </view>
<view class="flex-row gap-10 align-c right-0 pa"> <view class="flex-row gap-10 align-c right-0 pa">
<template v-if="form.keyword_show == '1'"> <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"> <view class="flex-row align-c" :style="keyword_gap">
{{ item.title }} <view v-for="item in keyword_list" :key="item.id" :style="keyword_style" :data-value="item.link" @tap="url_event">
{{ item.title }}
</view>
</view> </view>
</template> </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 }} >{{ form.right_title }}
<iconfont name="icon-arrow-right" :color="new_style.right_color" :size="new_style.right_size * 2 + 'rpx'" propContainerDisplay="flex"></iconfont> <iconfont name="icon-arrow-right" :color="new_style.right_color" :size="new_style.right_size * 2 + 'rpx'" propContainerDisplay="flex"></iconfont>
</view> </view>
@ -64,6 +66,7 @@
subtitle_style: '', subtitle_style: '',
keyword_list: [], keyword_list: [],
keyword_style: '', keyword_style: '',
keyword_gap: '',
right_style: '', right_style: '',
right_size: '', right_size: '',
}; };
@ -85,7 +88,7 @@
const new_form = this.propValue.content; const new_form = this.propValue.content;
const new_style = this.propValue.style; 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 = ''; let common_styles = '';
if (title_weight == 'italic') { if (title_weight == 'italic') {
@ -100,6 +103,7 @@
title_center: new_form.is_title_center == '1' ? 'jc-c' : '', title_center: new_form.is_title_center == '1' ? 'jc-c' : '',
keyword_list: new_form.keyword_list.filter((item) => item.is_show == '1'), // 关键字 keyword_list: new_form.keyword_list.filter((item) => item.is_show == '1'), // 关键字
keyword_style: `color:${keyword_color}; font-size: ${keyword_size * 2}rpx;`, // 关键字设置 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_size: right_size * 2 + 'rpx', // 右边按钮设置
right_style: `color:${right_color}; font-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}`, // 标题样式设置 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}`; return `color:${new_style.subtitle_color}; font-size: ${new_style.subtitle_size * 2}rpx; ${common_styles}`;
}, },
url_event(e) { url_event(e) {
app.globalData.url_event(e); if (!isEmpty(e.currentTarget.dataset.value)) {
app.globalData.url_open(e.currentTarget.dataset.value.page);
}
}, },
}, },
}; };

2
components/diy/user-info.vue
View File

@ -12,7 +12,7 @@
</view> </view>
</view> </view>
<view class="flex-row align-c" :style="'gap:' + base_data.img_space * 2 + 'rpx;'"> <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' }" /> <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> <iconfont v-else :name="'icon-' + item.icon" :size="base_data.img_size * 2 + 'rpx'" color="#666" propContainerDisplay="flex"></iconfont>
</view> </view>