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

组合搭配手机端迁移

master
于肖磊 2025-03-27 17:22:33 +08:00
parent 668c930f6e
commit 7ce6c50c06
5 changed files with 561 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

512
components/diy/binding.vue Normal file
View File

@ -0,0 +1,512 @@
<template>
<view class="oh" :style="style_container">
<view :style="style_img_container">
<view class="oh flex-col" :style="'gap:' + new_style.data_content_outer_spacing * 2 + 'rpx;'">
<view v-for="(match_item, match_index) in list" :key="match_index" :data-value="match_item.url" @tap.stop="url_event">
<view class="oh" :style="match_layout_style">
<view class="flex-col oh" :style="match_layout_img_style">
<view :class="['oh wh-auto ht-auto', host_graph_theme == '0' ? 'flex-row' : 'flex-col' ]" :style="host_graph_theme == '0' ? 'margin-bottom:' + new_style.data_content_bottom_spacing * 2 + 'rpx;' : ''">
<!-- 主图大图模式和主图单列时的显示，并且图片是有值的 -->
<template v-if="!isEmpty(match_item) && ((host_graph_theme == '1' && form.is_host_graph_show == '1') || host_graph_theme == '0')">
<view class="oh pr" :style="data_img_style">
<view v-if="!isEmpty(match_item.new_cover)" :style="data_img_style">
<imageEmpty :propImageSrc="match_item.new_cover[0]" :propStyle="data_content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
</view>
<view v-else :style="data_img_style">
<imageEmpty :propImageSrc="match_item.images" :propStyle="data_content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
</view>
</view>
</template>
<!-- 主图单列显示时的显示 -->
<view v-if="host_graph_theme == '0'" class="flex-1 flex-col jc-sb gap-6" :style="data_content_style">
<view class="flex-col gap-6">
<view class="text-line-1" :style="data_title_style">{{ match_item.title }}</view>
<view class="flex-row align-c jc-sb">
<view class="flex-col gap-6">
<view class="flex-row align-c">
<view :style="data_price_symbol_style">￥</view>
<view :style="data_price_style">{{ match_item.estimate_price }}</view>
</view>
<view class="flex-row align-c gap-3">
<img-or-icon-or-text :propValue="propValue" propType="data_discounts" />
<view class="flex-row">
<view :style="data_save_price_symbol_style">￥</view>
<view :style="data_save_price_style">{{ match_item.estimate_discount_price || 0 }}</view>
</view>
</view>
</view>
</view>
</view>
<view class="flex-row align-c jc-e">
<img-or-icon-or-text :value="propValue" type="details" />
</view>
</view>
</view>
<view class="flex-col" :style="host_graph_theme !== '0' ? data_content_style : ''">
<!-- 主图大图模式时的显示 -->
<view v-if="host_graph_theme !== '0'" class="flex-col gap-6" :style="'margin-bottom:' + new_style.data_content_bottom_spacing * 2 + 'rpx;'">
<view class="text-line-1" :style="data_title_style">{{ match_item.title }}</view>
<view class="flex-row align-c jc-sb">
<view class="flex-col gap-6">
<view class="flex-row align-c">
<view :style="data_price_symbol_style">￥</view>
<view :style="data_price_style">{{ match_item.estimate_price }}</view>
</view>
<view class="flex-row align-c gap-3">
<img-or-icon-or-text :propValue="propValue" propType="data_discounts" />
<view class="flex-row">
<view :style="data_save_price_symbol_style">￥</view>
<view :style="data_save_price_style">{{ match_item.estimate_discount_price || 0 }}</view>
</view>
</view>
</view>
<view class="flex-row align-c jc-e">
<img-or-icon-or-text :value="propValue" type="details" />
</view>
</view>
</view>
<!-- 商品信息区域 -->
<view :style="goods_content_style" :class="match_item.is_home_show_goods ? 'show-goods' : 'hidden-goods'">
<view :style="goods_content_img_style">
<view :class="outer_class" :style="onter_style">
<template v-if="!['3'].includes(theme)">
<view v-for="(item, index) in match_item.goods" :key="index" class="pr oh" :style="layout_style" :data-value="item.goods_url" @tap.stop="url_event">
<view :class="['oh wh-auto ht-auto', ['0' , '2'].includes(theme) ? 'flex-row' : 'flex-col' ]" :style="layout_img_style">
<template v-if="!isEmpty(item) && is_show('goods_img')">
<view class="oh pr" :style="goods_img_style">
<imageEmpty :propImageSrc="item.images" :propStyle="goods_content_img_radius + goods_img_style" propErrorStyle="width: 50rpx;height: 50rpx;"></imageEmpty>
</view>
</template>
<view v-if="is_show('title') || is_show('price') || is_show('save_price')" class="flex-1 flex-row jc-sb" :style="content_style">
<view class="flex-1 flex-col jc-sb">
<view v-if="is_show('title')" :class="theme == '0' ? 'text-line-2' : 'text-line-1'" :style="goods_title_style">
{{ item.title }}
</view>
<view v-if="is_show('price')" class="flex-row align-c text-line-1">
<view :style="goods_price_symbol_style">{{ item.show_price_symbol }}</view>
<view :style="goods_price_style">{{ item.price }}</view>
<view v-if="is_show('price_unit')" :style="goods_price_unit_style">{{ item.show_price_unit }}</view>
</view>
<view v-if="is_show('save_price')" class="flex-row align-c gap-3">
<img-or-icon-or-text :propValue="propValue" propType="goods_discounts" />
<view class="flex-1 text-line-1 flex-row">
<view :style="goods_save_price_symbol_style">{{ item.show_price_symbol }}</view>
<view :style="goods_save_price_style">{{ item.discount_price || 0 }}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<template v-else>
<swiper circular="true" :autoplay="new_style.is_roll == '1'" :interval="new_style.interval_time * 1000" :duration="500" :next-margin="new_style.rolling_fashion == 'translation' ? '-' + content_outer_spacing_magin : '0rpx'" :display-multiple-items="slides_per_group" :style="{ width: '100%', height: new_style.content_outer_height * new_scale + 'px' }">
<swiper-item v-for="(item1, index1) in match_item.content_goods" :key="index1">
<view class="flex-row wh-auto ht-auto" :style="onter_style">
<view v-for="(item, index) in item1.split_list" :key="index" class="pr oh" :style="layout_style" :data-value="item.goods_url" @tap.stop="url_event">
<view :class="['oh wh-auto ht-auto', ['0', '2'].includes(theme) ? 'flex-row' : 'flex-col' ]" :style="layout_img_style">
<template v-if="!isEmpty(item) && is_show('goods_img')">
<view class="oh pr wh-auto ht-auto">
<imageEmpty :propImageSrc="item.images" :propStyle="goods_content_img_radius" propErrorStyle="width: 50rpx;height: 50rpx;"></imageEmpty>
</view>
</template>
<view v-if="is_show('title') || is_show('price') || is_show('save_price')" class="flex-1 flex-row jc-sb" :style="content_style">
<view class="flex-1 flex-col jc-sb">
<view v-if="is_show('title')" :class="theme == '0' ? 'text-line-2' : 'text-line-1'" :style="goods_title_style">
{{ item.title }}
</view>
<view v-if="is_show('price')" class="flex-row align-c text-line-1">
<view :style="goods_price_symbol_style">{{ item.show_price_symbol }}</view>
<view :style="goods_price_style">{{ item.price }}</view>
<view v-if="is_show('price_unit')" :style="goods_price_unit_style">{{ item.show_price_unit }}</view>
</view>
<view v-if="is_show('save_price')" class="flex-row align-c gap-3">
<img-or-icon-or-text :propValue="propValue" propType="goods_discounts" />
<view class="flex-1 text-line-1 flex-row">
<view :style="goods_save_price_symbol_style">{{ item.show_price_symbol }}</view>
<view :style="goods_save_price_style">{{ item.discount_price || 0 }}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
</template>
</view>
</view>
</view>
<!-- 底部展开收起按钮区域 -->
<view :style="bottom_button_style" :data-index="match_index" @tap.stop="item_more_goods_event">
<view class="flex-row align-c jc-sb" :style="bottom_button_img_style">
<view :style="button_style">{{ match_item.is_home_show_goods ? '收起' : '展开'}}{{ match_item.type_name }}商品</view>
<iconfont :name="match_item.is_home_show_goods ? 'icon-arrow-top' : 'icon-arrow-bottom'" :color="new_style.bottom_button_icon_color" :size="new_style.bottom_button_icon_size + ''"></iconfont>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
const app = getApp();
import { isEmpty, common_styles_computer, common_img_computer, gradient_handle, padding_computer, radius_computer, background_computer, border_computer, box_shadow_computer, old_margin, margin_computer } from '@/common/js/common/common.js';
import imageEmpty from '@/components/diy/modules/image-empty.vue';
import subscriptIndex from '@/components/diy/modules/subscript/index.vue';
import imgOrIconOrText from '@/components/diy/modules/img-or-icon-or-text.vue';
var system = app.globalData.get_system_info(null, null, true);
var sys_width = app.globalData.window_width_handle(system.windowWidth);
export default {
components: {
imageEmpty,
imgOrIconOrText,
subscriptIndex
},
props: {
propValue: {
type: Object,
default: () => ({}),
},
propKey: {
type: [String, Number],
default: '',
},
// 组件渲染的下标
propIndex: {
type: Number,
default: 0,
},
},
data() {
return {
form: {},
new_style: {},
propIsCartParaCurve: false,
list: [],
content_radius: '', // 圆角设置
content_img_radius: '', // 图片圆角设置
content_padding: '', // 内边距设置
host_graph_theme: '',//主图风格
theme: '', // 选择的风格
content_outer_spacing: '', // 商品间距
content_outer_spacing_magin: '', // 商品间距
// 最外层不同风格下的显示
outer_class: '',
onter_style: '',
// 不同主图风格下的内容
match_layout_style: '',
match_layout_img_style: '',
data_content_img_radius: '',
data_content_padding: '',
data_content_style: '',
// 不同风格下的样式
layout_style: '',
layout_img_style: '',
content_style: '', // 内容区域的样式
style_container: '', // 公共样式
style_img_container: '',
shop_content_list: [],
slides_per_group: 1,
// 内容样式
data_title_style: '',
data_price_symbol_style: '',
data_price_style: '',
data_save_price_symbol_style: '',
data_save_price_style: '',
goods_title_style: '',
goods_price_symbol_style: '',
goods_price_style: '',
goods_save_price_symbol_style: '',
goods_save_price_style: '',
goods_price_unit_style: '',
button_style: '',
// 图片大小
goods_img_style: '',
new_scale: 1,
// 商品样式设置
goods_content_style: '',
goods_content_img_style: '',
// 底部展开收取设置
bottom_button_style: '',
bottom_button_img_style: '',
};
},
watch: {
propKey(val) {
this.init();
},
propValue(new_value, old_value) {
this.init();
},
},
created() {
this.init();
},
methods: {
isEmpty, margin_computer,
init() {
const new_form = this.propValue.content || null;
const new_style = this.propValue.style || null;
if (new_form != null && new_style != null) {
let new_list = [];
// 指定商品并且指定商品数组不为空
if (!isEmpty(new_form.data_list) && new_form.data_type == '0') {
new_list = new_form.data_list.map((item) => ({
...item.data,
title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
new_cover: item.new_cover,
}));
} else if (!isEmpty(new_form.data_auto_list) && new_form.data_type == '1') {
// 筛选商品并且筛选商品数组不为空
new_list = new_form.data_auto_list;
}
// 最外层不同风格下的显示
const flex = ['0'].includes(new_form.theme) ? 'flex-col ' : 'flex-row ';
const wrap = new_form.theme == '3' ? '' : 'flex-wrap ';
// 默认数据
const data_style_list = [
{ name: '单列展示', value: '0', width: 128, height: 128 },
{ name: '大图展示', value: '1', width: 0, height: 221 },
];
const scale = sys_width / 390;
// 主图大小的控制
let data_img_style = ``;
const data_list = data_style_list.filter(item => item.value == new_form.host_graph_theme);
if (['0'].includes(new_form.host_graph_theme)) {
data_img_style += `width: ${ this.size_handle(new_style, 'data', 'width', data_list, scale) };`
} else {
data_img_style += 'width: 100%;'
}
if (['0', '1'].includes(new_form.host_graph_theme)) {
data_img_style += `height: ${ this.size_handle(new_style, 'data', 'height', data_list, scale) };`
}
console.log(data_img_style);
// 商品图片大小的控制
const goods_style_list = [
{ name: '单列展示', value: '0', width: 50, height: 50 },
{ name: '两列展示（纵向）', value: '1', width: 0, height: 156 },
{ name: '两列展示（横向）', value: '2', width:50, height: 50 },
{ name: '左右滑动展示', value: '3', width:0, height: 0 },
]
const goods_list = goods_style_list.filter(item => item.value == new_form.theme);
let goods_img_style = '';
if (['0', '2'].includes(new_form.theme)) {
goods_img_style = `width: ${ this.size_handle(new_style, 'goods', 'width', goods_list, scale) };`;
}
if (!['3'].includes(new_form.theme)) {
goods_img_style = `height: ${ this.size_handle(new_style, 'goods', 'height', goods_list, scale) }`;
}
const data_handle_list = new_list.map((item) => ({
...item,
is_home_show_goods: new_form.is_default_show_goods == '1',
content_goods: new_form.theme == '3' ? this.get_goods_content_list(item.goods, new_form, new_style) : item.goods,
}))
this.setData({
form: new_form,
new_style: new_style,
outer_class: flex + wrap + 'oh',
onter_style: `gap: ${new_style.goods_content_outer_spacing * 2 + 'rpx'};`,
content_outer_spacing_magin: new_style.goods_content_outer_spacing * 2 + 'rpx',
list: data_handle_list,
new_scale: scale,
host_graph_theme: new_form.host_graph_theme, // 主题
theme: new_form.theme,
match_layout_style: this.get_match_layout_style(new_style),
match_layout_img_style: this.get_match_layout_img_style(new_form, new_style),
data_content_img_radius: radius_computer(new_style.data_img_radius),
data_content_padding: padding_computer(new_style.data_padding),
data_content_style: this.get_data_content_style(new_form, new_style),
data_img_style: data_img_style,
data_title_style: this.trends_config('title', 'data', new_style),
data_price_symbol_style: this.trends_config('price_symbol', 'data', new_style),
data_price_style: this.trends_config('price', 'data', new_style),
data_save_price_symbol_style: this.trends_config('save_price_symbol', 'data', new_style),
data_save_price_style: this.trends_config('save_price', 'data', new_style),
goods_title_style: this.trends_config('title', 'goods', new_style),
goods_price_symbol_style: this.trends_config('price_symbol', 'goods', new_style),
goods_price_style: this.trends_config('price', 'goods', new_style),
goods_save_price_symbol_style: this.trends_config('save_price_symbol', 'goods', new_style),
goods_save_price_style: this.trends_config('save_price', 'goods', new_style),
goods_price_unit_style: this.trends_config('price_unit', 'goods', new_style),
goods_content_img_radius: radius_computer(new_style.goods_radius),
slides_per_group: new_style.rolling_fashion == 'translation' ? new_form.carousel_col : 1,
button_style: this.trends_config('button', 'bottom', new_style),
goods_img_style: goods_img_style,
layout_style: this.get_layout_style(new_form, new_style),
layout_img_style: this.get_layout_img_style(new_form, new_style),
content_style: this.get_content_style(new_form, new_style),
goods_content_style: common_styles_computer(new_style.goods_content_style),
goods_content_img_style: common_img_computer(new_style.goods_content_style),
bottom_button_style: common_styles_computer(new_style.bottom_button_style),
bottom_button_img_style: common_img_computer(new_style.bottom_button_style),
style_container: common_styles_computer(new_style.common_style), // 公共样式
style_img_container: common_img_computer(new_style.common_style, this.propIndex), // 图片样式
});
}
},
get_goods_content_list(list, form, new_style) {
// 深拷贝一下，确保不会出现问题
const cloneList = JSON.parse(JSON.stringify(list));
if (new_style.rolling_fashion != 'translation') {
// 如果是分页滑动情况下，根据选择的行数和每行显示的个数来区分具体是显示多少个
if (cloneList.length > 0) {
// 每页显示的数量
const num = form.carousel_col;
// 存储数据显示
let nav_list = [];
// 拆分的数量
const split_num = Math.ceil(cloneList.length / num);
for (let i = 0; i < split_num; i++) {
nav_list.push({
split_list: cloneList.slice(i * num, (i + 1) * num),
});
}
return nav_list;
} else {
// 否则的话，就返回全部的信息
return [
{
split_list: cloneList,
},
];
}
} else {
// 存储数据显示
let nav_list = [];
cloneList.forEach((item) => {
nav_list.push({
split_list: [item],
});
});
return nav_list;
}
},
get_data_content_style(new_form, new_style) {
const spacing_value = new_style.data_content_spacing;
let spacing = '';
if (['0'].includes(new_form.host_graph_theme)) {
spacing = `margin-left: ${spacing_value}px;`;
} else {
spacing = padding_computer(new_style.data_padding);
}
return `${spacing}`;
},
get_match_layout_style(new_style) {
return this.layout_handle(new_style, 'data') + radius_computer(new_style.data_radius)
},
get_match_layout_img_style(new_form, new_style) {
const padding = new_form.host_graph_theme == '0' ? padding_computer(new_style.data_padding) : '';
return padding + this.layout_img_handle(new_style, 'data');
},
get_layout_style(form, new_style) {
const { goods_radius, goods_margin } = new_style;
const radius = radius_computer(goods_radius);
const gradient = this.layout_handle(new_style, 'goods');
let size_style = '';
const goods_left_right_width_margin = goods_margin.margin_left + goods_margin.margin_right;
if (['1', '2'].includes(form.theme)) {
size_style = `width: calc((100% - ${new_style.goods_content_outer_spacing * 2 + (goods_left_right_width_margin * 4) + 'rpx'}) / 2);`;;
} else if (form.theme == '3') {
// 如果不是平移的时候执行
if (new_style.rolling_fashion != 'translation') {
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 * (sys_width / 390) + 'px'};`;
} else {
size_style = `margin-right: ${ (new_style.goods_content_outer_spacing * 2) + (goods_margin.margin_right * 2) }rpx;width: 100%;height: 100%;`;
}
} else if (form.theme == '0') {
size_style = `width: calc(100% - ${ goods_left_right_width_margin }px);`;
}
return radius + gradient + size_style;
},
get_layout_img_style(form, new_style) {
const padding = [ '0', '2'].includes(form.theme) ? padding_computer(new_style.goods_padding) : '';
return padding + this.layout_img_handle(new_style, 'goods');
},
get_content_style(form, new_style){
const spacing_value = new_style.goods_content_spacing;
let spacing = '';
if (['0', '2'].includes(form.theme)) {
spacing = `margin-left: ${spacing_value}px;`;
} else {
spacing = padding_computer(new_style.goods_padding);
}
return `${spacing}`;
},
get_multicolumn_columns_width(new_style, form) {
const { carousel_col } = form;
// 计算间隔的空间。(gap * gap数量) / 模块数量
let gap = (new_style.goods_content_outer_spacing * (carousel_col - 1)) / carousel_col;
return `calc(${100 / carousel_col}% - ${gap * 2}rpx)`;
},
layout_handle(new_style, type) {
return gradient_handle(new_style[`${ type }_color_list`], new_style[`${ type }_direction`]) + margin_computer(new_style[`${ type }_margin`]) + border_computer(new_style[`${ type }_border_box`]) + box_shadow_computer(new_style[`${ type }_border_box`]);
},
layout_img_handle(new_style, type){
const data = {
background_img_style: new_style[`${ type }_background_img_style`],
background_img: new_style[`${ type }_background_img`],
}
return background_computer(data);
},
// 根据传递的参数，从对象中取值
trends_config(key, type, new_style) {
return this.style_config(new_style[`${ type }_${key}_typeface`], new_style[`${ type }_${key}_size`], new_style[`${ type }_${key}_color`]);
},
// 根据传递的值，显示不同的内容
style_config(typeface, size, color) {
return `font-weight:${typeface}; font-size: ${size}px;color: ${color};`;
},
size_handle(new_style, type, location, list, scale){
if (typeof new_style[`${ type }_content_img_${ location }`] == 'number') {
return new_style[`${ type }_content_img_${ location }`] * scale + 'px';
} else {
if (list.length > 0) {
return list[0][location] * scale + 'rpx';
} else {
return 'auto';
}
}
},
item_more_goods_event(e) {
var index = e.currentTarget.dataset.index;
var temp_data = this.list;
temp_data[index]['is_home_show_goods'] = !temp_data[index]['is_home_show_goods'];
this.setData({ list: temp_data });
},
// 判断是否显示对应的内容
is_show(index) {
return this.form.is_goods_show.includes(index);
},
url_event(e) {
app.globalData.url_event(e);
},
},
};
</script>
<style scoped lang="scss">
.gap-6 {
gap: 12rpx;
}
.gap-3 {
gap: 6rpx;
}
.show-goods {
height: 100%;
transform: scale(1); /* 初始缩放比例 */
opacity: 1;
transition: height 0.4s linear, transform 0.6s linear, opacity 0.6s linear; /* 同时控制缩放, 透明度, 高度 */
}
.hidden-goods {
height: 0rpx;
transform: scale(0); /* 初始缩放比例 */
opacity: 0;
transition: height 0.4s linear, transform 0.6s linear, opacity 0.6s linear; /* 同时控制缩放, 透明度, 高度 */
}
</style>

3
components/diy/diy.vue
View File

@ -41,6 +41,7 @@
<componentDiyBlogList v-else-if="item.key == 'blog'" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data"></componentDiyBlogList>
<componentDiyBlogTabs v-else-if="item.key == 'blog-tabs'" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data" :propTop="get_diy_prop_top(item.com_data)" :propScrollTop="scroll_top" :propCustomNavHeight="get_diy_custom_nav_height(item.com_data)" :propIsTabsUseSafeDistance="getPropIsTabsUseSafeDistance"></componentDiyBlogTabs>
<componentDiyShop v-else-if="item.key == 'shop'" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data"></componentDiyShop>
<componentDiyBinding v-else-if="item.key == 'binding'" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data"></componentDiyBinding>
<!-- 工具组件 -->
<componentDiyFloatWindow v-else-if="item.key == 'float-window'" :propKey="item.id + index" :propValue="item.com_data"></componentDiyFloatWindow>
<componentDiyTitle v-else-if="item.key == 'title'" :propKey="item.id + index" :propIndex="get_prop_index(item)" :propValue="item.com_data"></componentDiyTitle>
@ -129,6 +130,7 @@
import componentDiySeckill from '@/components/diy/seckill';
import componentDiyRealstore from '@/components/diy/realstore';
import componentDiyShop from '@/components/diy/shop';
import componentDiyBinding from '@/components/diy/binding';
import componentDiyTabsCarousel from '@/components/diy/tabs-carousel';
import componentDataTabs from '@/components/diy/data-tabs';
import componentGoodsList from '@/components/goods-list/goods-list';
@ -190,6 +192,7 @@
componentDiySeckill,
componentDiyRealstore,
componentDiyShop,
componentDiyBinding,
componentDiyTabsCarousel,
componentDataTabs,
componentGoodsList,

20
components/diy/modules/img-or-icon-or-text.vue
View File

@ -1,16 +1,16 @@
<template>
<view v-if="is_show" :style="corner_marker">
<view v-if="is_show" :style="corner_marker + (propType == 'data_discounts' ? 'background-size: 400%;' : '')" :class="propType == 'data_discounts' ? 'discount-icon' : ''">
<view class="flex-row nowrap oh" :style="corner_img_marker">
<template v-if="type_boolean">
<template v-if="!isEmpty(type_img)">
<image-empty v-model="type_img[0]" :style="img_style"></image-empty>
</template>
<template v-else>
<iconfont :name="'icon-' + type_icon" :size="new_type_size + ''" :color="new_type_color"></iconfont>
<iconfont :name="'icon-' + type_icon" :size="new_type_size * 2 + 'rpx'" :color="new_type_color" propContainerDisplay="flex"></iconfont>
</template>
</template>
<template v-else>
<span class="text-line-1" :style="'font-size:' + new_type_size * 2 + 'rpx;color:' + new_type_color">{{ type_text }}</span>
<view class="text-line-1" :style="'font-size:' + new_type_size * 2 + 'rpx;color:' + new_type_color">{{ type_text }}</view>
</template>
</view>
</view>
@ -82,4 +82,18 @@
width: 100%;
height: 100%;
}
.discount-icon {
animation: gradient 5s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>

38
components/diy/realstore.vue
View File

@ -32,9 +32,9 @@
</view>
</view>
</view>
<view class="flex-row gap-2 align-c">
<view v-if="!isEmpty(item.status_info) && !isEmpty(item.status_info.time)" class="flex-row gap-2 align-c">
<imgOrIconOrText :propValue="propValue" propType="time" />
<view v-if="!isEmpty(item.status_info)" class="flex-1 flex-row align-c">
<view class="flex-1 flex-row align-c">
<span class="text-line-1" :style="state_style + `color: ${ item.status_info.status == 1 ? new_style.realstore_state_color : new_style.realstore_default_state_color }`">{{ item.status_info.msg }}</span>
<span v-if="!isEmpty(item.status_info.msg) || !isEmpty(item.status_info.time)" :style="'color: #ccc;' + margin_computer(new_style.realstore_business_distance)">|</span>
<span class="text-line-1" :style="business_hours_style">{{ item.status_info.time }}</span>
@ -93,9 +93,9 @@
<view class="text-line-2" :style="title_style">{{ item.name }}</view>
</view>
<view class="flex-row jc-sb align-c">
<view class="flex-1 flex-row gap-2 align-c">
<view v-if="!isEmpty(item.status_info) && !isEmpty(item.status_info.time)" class="flex-1 flex-row gap-2 align-c">
<imgOrIconOrText :propValue="propValue" propType="time" />
<span v-if="!isEmpty(item.status_info)" class="text-line-1" :style="state_style + `color: ${ item.status_info.status == 1 ? new_style.realstore_state_color : new_style.realstore_default_state_color }`">{{ item.status_info.msg }}</span>
<span class="text-line-1" :style="state_style + `color: ${ item.status_info.status == 1 ? new_style.realstore_state_color : new_style.realstore_default_state_color }`">{{ item.status_info.msg }}</span>
</view>
<view v-if="item.lat != 0 && item.lng != 0" :data-index="index1" :data-split="index" @tap.stop="address_map_event">
<imgOrIconOrText :propValue="propValue" propType="navigation" />
@ -197,23 +197,6 @@
const new_form = this.propValue.content || null;
const new_style = this.propValue.style || null;
if (new_form != null && new_style != null) {
const default_list = {
name: '测试门店标题',
province_name: '测试地址',
alias: '上海门店',
city_name: '',
county_name: '',
address: '',
logo: '',
new_cover: [],
distance: '12km',
status_info: {
msg: '营业中',
time: '7:00-22:00',
status: 1,
type: 0,
},
};
let new_list = [];
// 指定商品并且指定商品数组不为空
if (!isEmpty(new_form.data_list) && new_form.data_type == '0') {
@ -225,10 +208,7 @@
} else if (!isEmpty(new_form.data_auto_list) && new_form.data_type == '1') {
// 筛选商品并且筛选商品数组不为空
new_list = new_form.data_auto_list;
} else {
new_list = Array(4).fill(default_list);
}
console.log(new_list);
// 最外层不同风格下的显示
const flex = ['0', '2'].includes(new_form.theme) ? 'flex-col ' : 'flex-row ';
const wrap = new_form.theme == '3' ? '' : 'flex-wrap ';
@ -272,6 +252,7 @@
new_style: new_style,
outer_class: flex + wrap + 'oh',
onter_style: `gap: ${new_style.content_outer_spacing * 2 + 'rpx'};`,
content_outer_spacing_magin: new_style.content_outer_spacing * 2 + 'rpx',
list: new_list,
new_scale: scale,
content_radius: radius_computer(new_style.realstore_radius), // 圆角设置
@ -431,4 +412,13 @@
</script>
<style scoped lang="scss">
.gap-10 {
gap: 20rpx;
}
.gap-2 {
gap: 4rpx;
}
.gap-3 {
gap: 6rpx;
}
</style>

31
components/diy/shop.vue
View File

@ -18,9 +18,11 @@
<view class="flex-1 flex-row jc-sb gap-10" :style="content_style">
<view class="flex-1 flex-col jc-sb gap-10">
<view class="text-line-2" :style="title_style">
<template v-for="(item1, index1) in item.icon_list">
<template v-if="!isEmpty(item1.icon)">
<img :key="index1" :src="item1.icon" class="title-img" :style="title_img_style + 'margin-right: ' + (index < item.icon_list.length - 1 ? new_style.shop_title_img_inner_spacing * 2 : new_style.shop_title_img_outer_spacing * 2) + 'rpx;vertical-align: middle;'" />
<template v-if="(item.icon_list || null) != null && item.icon_list.length > 0">
<template v-for="(item1, index1) in item.icon_list">
<template v-if="!isEmpty(item1.icon)">
<img :key="index1" :src="item1.icon" class="title-img" :style="title_img_style + 'margin-right: ' + (index < item.icon_list.length - 1 ? new_style.shop_title_img_inner_spacing * 2 : new_style.shop_title_img_outer_spacing * 2) + 'rpx;vertical-align: middle;'" />
</template>
</template>
</template>{{ item.name }}
</view>
@ -35,7 +37,7 @@
</template>
<template v-else>
<swiper circular="true" :autoplay="new_style.is_roll == '1'" :interval="new_style.interval_time * 1000" :duration="500" :next-margin="new_style.rolling_fashion == 'translation' ? '-' + content_outer_spacing_magin : '0rpx'" :display-multiple-items="slides_per_group" :style="{ width: '100%', height: new_style.content_outer_height * new_scale + 'px' }">
<swiper-item v-for="(item1, index) in shop_content_list" :key="index">
<swiper-item v-for="(item1, index1) in shop_content_list" :key="index1">
<view class="flex-row wh-auto ht-auto" :style="onter_style">
<view v-for="(item, index) in item1.split_list" :key="index" class="pr oh" :style="layout_style" :data-value="item.url" @tap.stop="url_event">
<view :class="['oh ht-auto', ['0', '4'].includes(theme) ? 'flex-row' : 'flex-col' ]" :style="layout_img_style">
@ -51,9 +53,11 @@
</template>
<view class="flex-col jc-sb gap-10" :style="content_style">
<view class="text-line-2" :style="title_style">
<template v-for="(item1, index1) in item.icon_list">
<template v-if="!isEmpty(item1.icon)">
<image :key="index1" :src="item1.icon" mode="aspectFit" :style="title_img_style + 'margin-right: ' + (index < item.icon_list.length - 1 ? new_style.shop_title_img_inner_spacing * 2 : new_style.shop_title_img_outer_spacing * 2) + 'rpx;vertical-align: middle;'" :data-value="item1.url" @tap.stop="url_event" />
<template v-if="(item.icon_list || null) != null && item.icon_list.length > 0">
<template v-for="(item2, index2) in item.icon_list">
<template v-if="!isEmpty(item2.icon)">
<img :key="index2" :src="item2.icon" class="title-img" :style="title_img_style + 'margin-right: ' + (index < item.icon_list.length - 1 ? new_style.shop_title_img_inner_spacing * 2 : new_style.shop_title_img_outer_spacing * 2) + 'rpx;vertical-align: middle;'" />
</template>
</template>
</template>{{ item.name }}
</view>
@ -152,13 +156,6 @@
const new_form = this.propValue.content || null;
const new_style = this.propValue.style || null;
if (new_form != null && new_style != null) {
const default_list = {
name: '测试商户标题',
describe: '测试商户描述',
icon_list: [{ icon: `http://shopxo.com/static/diy/images/components/model-shop/auth.png`}, { icon: ''}],
logo: '',
new_cover: [],
};
let new_list = [];
// 指定商品并且指定商品数组不为空
if (!isEmpty(new_form.data_list) && new_form.data_type == '0') {
@ -170,8 +167,6 @@
} else if (!isEmpty(new_form.data_auto_list) && new_form.data_type == '1') {
// 筛选商品并且筛选商品数组不为空
new_list = new_form.data_auto_list;
} else {
new_list = Array(4).fill(default_list);
}
// 最外层不同风格下的显示
const flex = ['0', '2'].includes(new_form.theme) ? 'flex-col ' : 'flex-row ';
@ -216,6 +211,7 @@
new_style: new_style,
outer_class: flex + wrap + 'oh',
onter_style: `gap: ${new_style.content_outer_spacing * 2 + 'rpx'};`,
content_outer_spacing_magin: new_style.content_outer_spacing * 2 + 'rpx',
list: new_list,
new_scale: scale,
content_radius: radius_computer(new_style.shop_radius), // 圆角设置
@ -359,4 +355,7 @@
.title-img {
object-fit: contain;
}
.gap-10 {
gap: 20rpx;
}
</style>