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

修改自定义组件的显示

master
于肖磊 2024-09-19 16:57:10 +08:00
parent cfffb723f1
commit 3420d8dd1b
7 changed files with 47 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/diy/custom.vue
View File

@ -1,7 +1,7 @@
<template>
<view ref="container" :style="style_container + 'height:'+ form.height * 2 + 'rpx;'">
<view class="wh-auto ht-auto pr">
<view v-for="item in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x, div_width) , 'top': percentage_count(item.location.y, form.height), 'width': percentage_count(item.com_data.com_width, div_width), 'height': percentage_count(item.com_data.com_height, form.height)}">
<view v-for="item in form.custom_list" :key="item.id" class="main-content" :style="{'left': get_percentage_count(item.location.x, div_width) , 'top': get_percentage_count(item.location.y, form.height), 'width': get_percentage_count(item.com_data.com_width, div_width), 'height': get_percentage_count(item.com_data.com_height, form.height)}">
<template v-if="item.key == 'text'">
<model-text :key="item.com_data" :value="item.com_data" :source-list="form.data_source_content" @url_open="url_open"></model-text>
</template>
@ -47,6 +47,13 @@
custom_height: 0,
};
},
computed: {
get_percentage_count() {
return (num, container_size) => {
return this.percentage_count(num, container_size);
}
}
},
created() {
this.setData({
form: this.value.content,
@ -55,6 +62,7 @@
this.init();
},
methods: {
percentage_count,
init() {
this.setData({
style_container: common_styles_computer(this.new_style.common_style) + 'box-sizing: border-box;', // 用于样式显示

5
components/diy/diy.vue
View File

@ -6,7 +6,6 @@
<componentDiyTabs v-if="is_tabs" :value="tabs_data"></componentDiyTabs>
<view v-if="is_tabs_type">
<view v-for="(item, index) in value.diy_data" :key="index">
{{ item.key }}
<!-- 基础组件 -->
<componentDiySearch v-if="item.key == 'search'" :value="item.com_data"></componentDiySearch>
<componentCarousel v-else-if="item.key == 'carousel'" :value="item.com_data"></componentCarousel>
@ -103,12 +102,14 @@
is_tabs_type: true,
};
},
computed: {
diy_content_style() {
return `padding-bottom:${this.padding_footer_computer}rpx`;
},
},
mounted() {
this.init();
},
methods: {
init() {
// tabs选项卡数据过滤

16
components/diy/modules/custom/model-image.vue
View File

@ -1,12 +1,15 @@
<template>
<view class="img-outer pr wh-auto ht-auto" :style="border_style" @tap="url_open(form.link)">
<image-empty v-model="img" :style="image_style"></image-empty>
<image-empty :image-src="img" :style="image_style" error-style="width: 60rpx;height: 60rpx;"></image-empty>
</view>
</template>
<script>
import { percentage_count, radius_computer, isEmpty } from '@/common/js/common/common.js';
import imageEmpty from '@/components/diy/modules/image-empty.vue';
export default {
components: {
imageEmpty,
},
props: {
value: {
type: Object,
@ -56,20 +59,17 @@
}
},
get_image_style() {
return `${set_count()};transform: rotate(${this.form.img_rotate}deg); ${radius_computer(this.form.img_radius)};`;
return `width: ${percentage_count(this.form.img_width, this.form.com_width)}; height: ${percentage_count(this.form.img_height, this.form.com_height)};transform: rotate(${this.form.img_rotate}deg); ${radius_computer(this.form.img_radius)};`;
},
get_border_style() {
let style = ``;
if (this.form.border_show == '1') {
style += `border: ${this.form.border_size}px ${this.form.border_style} ${this.form.border_color}; ${radius_computer(this.form.border_radius)};`;
style += `border: ${this.form.border_size * 2}rpx ${this.form.border_style} ${this.form.border_color}; ${radius_computer(this.form.border_radius)};`;
}
return style;
},
set_count() {
return `width: ${percentage_count(this.form.img_width, this.form.com_width)}; height: ${percentage_count(this.form.img_height, this.form.com_height)};`;
},
url_open(link) {
this.$emit('url_open', link)
this.$emit('url_open', link);
},
},
};

4
components/diy/modules/custom/model-lines.vue
View File

@ -32,9 +32,9 @@
},
get_border_style() {
if (this.form.line_settings === 'horizontal') {
return `margin: 5px 0;border-bottom: ${this.form.line_size}px ${this.form.line_style} ${this.form.line_color};`;
return `margin: 5px 0;border-bottom: ${this.form.line_size * 2}rpx ${this.form.line_style} ${this.form.line_color};`;
} else {
return `margin: 0 5px;border-right: ${this.form.line_size}px ${this.form.line_style} ${this.form.line_color};`;
return `margin: 0 5px;border-right: ${this.form.line_size * 2}rpx ${this.form.line_style} ${this.form.line_color};`;
}
}
},

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

@ -61,7 +61,7 @@
return text;
},
get_text_style() {
let style = `font-size: ${this.form.text_size}px;color: ${this.form.text_color}; text-align: ${this.form.text_location}; transform: rotate(${this.form.text_rotate}deg);text-decoration: ${this.form.text_option};${padding_computer(this.form.text_padding)};`;
let style = `font-size: ${this.form.text_size * 2}rpx;color: ${this.form.text_color}; text-align: ${this.form.text_location}; transform: rotate(${this.form.text_rotate}deg);text-decoration: ${this.form.text_option};${padding_computer(this.form.text_padding)};box-sizing: border-box;`;
if (this.form.text_weight == 'italic') {
style += `font-style: italic`;
} else if (this.form.text_weight == '500') {
@ -72,7 +72,7 @@
get_com_style() {
let style = `background-color: ${this.form.com_bg}; ${radius_computer(this.form.bg_radius)}`;
if (this.form.border_show == '1') {
style += `border: ${this.form.border_size}px ${this.form.border_style} ${this.form.border_color};`;
style += `border: ${this.form.border_size * 2}rpx ${this.form.border_style} ${this.form.border_color};`;
}
// 是富文本并且开启了上下滚动的开关
if (this.form.is_rich_text == '1' && this.form.is_up_down == '1') {

13
components/diy/modules/data-magic/magic-carousel.vue
View File

@ -1,9 +1,9 @@
<template>
<swiper circular="true" :autoplay="value.data_style.is_roll == '1'" :interval="value.data_style.interval_time * 1000" :duration="500" :vertical="value.data_style.rotation_direction == 'vertical'" class="swiper" style="height: 100%;" @change="carousel_change">
<swiper circular="true" :autoplay="value.data_style.is_roll == '1'" :interval="value.data_style.interval_time * 1000" :duration="500" :vertical="value.data_style.rotation_direction == 'vertical'" class="swiper" style="height: 100%" @change="carousel_change">
<swiper-item v-for="(item1, index1) in value.data_content.list" :key="index1">
<template v-if="type === 'img'">
<view @tap="url_event(item1.carousel_link.page)">
<image-empty v-model="item1.carousel_img[0]" :style="contentImgRadius" error-style="width: 80rpx;height: 80rpx;"></image-empty>
<image-empty :image-src="item1.carousel_img[0]" :style="contentImgRadius" error-style="width: 80rpx;height: 80rpx;"></image-empty>
</view>
</template>
<template v-else>
@ -17,7 +17,7 @@
const app = getApp();
import imageEmpty from '@/components/diy/modules/image-empty.vue';
import productListShow from '@/components/diy/modules/data-magic/product-list-show.vue';
import { isEmpty } from '../../../../common/js/common/common';
import { isEmpty } from '@/common/js/common/common.js';
export default {
components: {
imageEmpty,
@ -51,9 +51,8 @@ import { isEmpty } from '../../../../common/js/common/common';
app.globalData.url_open(link);
}
},
}
}
},
};
</script>
<style>
</style>
<style></style>

31
components/diy/modules/data-magic/product-list-show.vue
View File

@ -12,7 +12,8 @@
<view v-if="!isEmpty(isShow)" class="flex-col wh-auto ht-auto tl gap-10">
<view v-if="isShow.includes('title')" class="text-line-2 text-size-md shop-title">{{ item.title }}</view>
<view v-if="isShow.includes('price')" class="identifying">
<span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
<span class="num">{{ item.show_price_symbol }}</span
>{{ item.min_price }}
<template v-if="isShow.includes('price_unit')">
<span class="num">{{ item.show_price_unit }}</span>
</template>
@ -36,7 +37,7 @@
</template>
</view>
</view>
<view v-if="isShow.includes('title')" class="text-line-1 text-size-md shop-title tl wh-auto" style="overflow: inherit;">{{ item.title }}</view>
<view v-if="isShow.includes('title')" class="text-line-1 text-size-md shop-title tl wh-auto" style="overflow: inherit">{{ item.title }}</view>
</view>
</template>
<template v-else>
@ -50,7 +51,8 @@
<view v-if="!isEmpty(isShow)" class="flex-col wh-auto tl gap-10" :style="img_padding_computer">
<view v-if="isShow.includes('title')" class="text-line-2 text-size-md shop-title">{{ item.title }}</view>
<view v-if="isShow.includes('price')" class="identifying">
<span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
<span class="num">{{ item.show_price_symbol }}</span
>{{ item.min_price }}
<template v-if="isShow.includes('price_unit')">
<span class="num">{{ item.show_price_unit }}</span>
</template>
@ -73,7 +75,8 @@
<view v-if="!isEmpty(isShow)" class="flex-col wh-auto ht-auto tl gap-20">
<view v-if="isShow.includes('title')" class="text-line-2 text-size-md shop-title">{{ item.title }}</view>
<view v-if="isShow.includes('price')" class="identifying">
<span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
<span class="num">{{ item.show_price_symbol }}</span
>{{ item.min_price }}
<template v-if="isShow.includes('price_unit')">
<span class="num">{{ item.show_price_unit }}</span>
</template>
@ -87,7 +90,7 @@
<script>
import { isEmpty, padding_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';
export default {
components: {
imageEmpty,
@ -129,25 +132,25 @@
computed: {
img_padding_computer() {
if (!isEmpty(this.chunkPadding)) {
return padding_computer(this.chunkPadding) + ';box-sizing: border-box;'
return padding_computer(this.chunkPadding) + ';box-sizing: border-box;';
} else {
return '';
}
}
},
},
methods: {
isEmpty,
url_event(link) {
this.$emit('url_event', link);
}
}
}
},
},
};
</script>
<style scoped lang="scss">
.identifying {
font-size: 28rpx;
color: #EA3323;
color: #ea3323;
.num {
font-size: 18rpx;
}
@ -158,13 +161,13 @@
background: #fff;
font-size: 24rpx;
line-height: 34rpx;
color: #EA3323;
color: #ea3323;
text-align: center;
position: absolute;
bottom: 8rpx;
border-radius: 16rpx;
}
.shop-max-height{
.shop-max-height {
max-height: calc(100% / 3);
}
.half-width {
@ -176,4 +179,4 @@
.gap-20 {
gap: 40rpx;
}
</style>
</style>