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

修改属性显示逻辑

master
于肖磊 2024-10-10 17:53:56 +08:00
parent f1ac36da1d
commit 475970ef9a
4 changed files with 131 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/diy/custom.vue
View File

@ -5,20 +5,19 @@
<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, div_height), width: get_percentage_count(item.com_data.com_width, div_width), height: get_percentage_count(item.com_data.com_height, div_height) }">
<template v-if="item.key == 'text'">
<model-text :propkey="propkey" :propValue="item.com_data"
:propSourceList="form.data_source_content" @url_event="url_event"></model-text>
<model-text :propkey="propkey" :propValue="item.com_data" :propSourceList="form.data_source_content" @url_event="url_event"></model-text>
</template>
<template v-else-if="item.key == 'img'">
<model-image :propkey="propkey" :propValue="item.com_data"
:propSourceList="form.data_source_content" @url_event="url_event"></model-image>
<model-image :propkey="propkey" :propValue="item.com_data" :propSourceList="form.data_source_content" @url_event="url_event"></model-image>
</template>
<template v-else-if="item.key == 'auxiliary-line'">
<model-lines :propkey="propkey" :propValue="item.com_data"
:propSourceList="form.data_source_content"></model-lines>
<model-lines :propkey="propkey" :propValue="item.com_data" :propSourceList="form.data_source_content"></model-lines>
</template>
<template v-else-if="item.key == 'icon'">
<model-icon :propkey="propkey" :propValue="item.com_data"
:propSourceList="form.data_source_content" @url_event="url_event"></model-icon>
<model-icon :propkey="propkey" :propValue="item.com_data" :propSourceList="form.data_source_content" @url_event="url_event"></model-icon>
</template>
<template v-else-if="item.key == 'panel'">
<model-panel :propkey="propkey" :propValue="item.com_data" :propSourceList="form.data_source_content" @url_event="url_event"></model-panel>
</template>
</view>
</view>
@ -33,6 +32,7 @@ import modelText from '@/components/diy/modules/custom/model-text.vue';
import modelLines from '@/components/diy/modules/custom/model-lines.vue';
import modelImage from '@/components/diy/modules/custom/model-image.vue';
import modelIcon from '@/components/diy/modules/custom/model-icon.vue';
import modelPanel from '@/components/diy/modules/custom/model-panel.vue';
export default {
components: {
@ -40,6 +40,7 @@ export default {
modelLines,
modelImage,
modelIcon,
modelPanel
},
props: {
propValue: {

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

@ -1,6 +1,6 @@
<template>
<view ref="container" class="img-magic" :style="'height:' + container_size + ';' + style_container">
<view class="wh-auto pr" :style="style_img_container">
<view class="img-magic" :style="'height:' + container_size + ';' + style_container">
<view class="magic-container wh-auto ht-auto pr" :style="style_img_container">
<view class="pr" :style="'width:calc(100% + ' + outer_spacing + ');height:calc(100% + ' + outer_spacing + ');margin:-' + spacing + ';'">
<!-- 风格9 -->
<template v-if="form.style_actived == 7">
@ -72,8 +72,6 @@
const app = getApp();
import magicCarousel from '@/components/diy/modules/data-magic/magic-carousel.vue';
import { background_computer, common_styles_computer, common_img_computer, gradient_computer, radius_computer, percentage_count, isEmpty, padding_computer } from '@/common/js/common/common.js';
var system = app.globalData.get_system_info(null, null, true);
var sys_width = app.globalData.window_width_handle(system.windowWidth);
export default {
components: {
magicCarousel,
@ -104,6 +102,7 @@
container_size: 0,
style_container: '',
style_img_container: '',
div_width: 0
};
},
computed: {
@ -125,7 +124,7 @@
this.init();
},
},
created() {
mounted() {
this.init();
},
methods: {
@ -141,12 +140,25 @@
spacing: this.new_style.image_spacing + 'rpx',
content_radius: radius_computer(this.new_style.data_radius),
content_img_radius: radius_computer(this.new_style.img_radius),
cubeCellWidth: sys_width / density,
container_size: sys_width * 2 + 'rpx',
data_magic_list: this.get_data_magic_list(this.form.data_magic_list),
style_container: common_styles_computer(this.new_style.common_style) + 'box-sizing: border-box;', // 用于样式显示
style_img_container: common_img_computer(this.new_style.common_style),
});
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this);
query
.select('.magic-container')
.boundingClientRect((res) => {
if ((res || null) != null) {
this.setData({
div_width: res.width,
cubeCellWidth: res.width / density,
container_size: res.width + 'px',
});
}
})
.exec();
});
},
get_data_magic_list(data) {
data.forEach((item) => {
@ -216,7 +228,7 @@
},
// 计算成百分比
percentage(num) {
return percentage_count(num, sys_width);
return percentage_count(num, this.div_width);
},
// 根据传递的参数，从对象中取值
trends_config(style, key) {
@ -260,7 +272,6 @@
<style lang="scss" scoped>
// 图片魔方是一个正方形，根据宽度计算高度
.img-magic {
width: 100%;
overflow: hidden;
}
.cube-selected {

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

@ -1,7 +1,7 @@
<template>
<!-- 图片魔方 -->
<view ref="container" class="img-magic" :style="style_container + 'height:' + container_size">
<view :style="style_img_container">
<view class="img-magic" :style="style_container + 'height:' + container_size">
<view class="magic-container wh-auto ht-auto" :style="style_img_container">
<view class="pr" :style="outer_style">
<!-- 风格3 -->
<template v-if="form.style_actived == 2">
@ -31,9 +31,6 @@
<script>
const app = getApp();
import { common_styles_computer, common_img_computer, radius_computer, percentage_count } from '@/common/js/common/common.js';
var system = app.globalData.get_system_info(null, null, true);
var sys_width = app.globalData.window_width_handle(system.windowWidth);
// var height = app.globalData.window_height_handle(system);
export default {
props: {
propValue: {
@ -59,6 +56,7 @@
content_img_radius: '',
cube_cell: '',
container_size: '',
div_width: 0,
};
},
watch: {
@ -75,7 +73,7 @@
};
},
},
created() {
mounted() {
this.init();
},
methods: {
@ -90,15 +88,30 @@
const density = 4;
this.setData({
form: this.propValue.content,
outer_style: `width:${outer_spacing};height:${outer_spacing};margin:${outer_sx}`,
img_spacing: `padding:${spacing}`,
outer_style: `width:${outer_spacing};height:${outer_spacing};margin:${outer_sx};`,
img_spacing: `padding:${spacing};`,
img_outer_spacing: new_style.image_spacing * 2 + 'rpx',
content_img_radius: radius_computer(new_style),
container_size: sys_width * 2 + 'rpx',
cube_cell: sys_width / density,
style_container: common_styles_computer(new_style.common_style),
style_container: common_styles_computer(new_style.common_style) + 'box-sizing: border-box;',
style_img_container: common_img_computer(new_style.common_style),
});
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this);
query
.select('.magic-container')
.boundingClientRect((res) => {
console.log(res);
if ((res || null) != null) {
this.setData({
div_width: res.width,
container_size: res.width + 'px',
cube_cell: res.width / density,
});
}
})
.exec();
});
},
getSelectedWidth(item) {
return (item.end.x - item.start.x + 1) * this.cube_cell;
@ -117,7 +130,7 @@
},
// 计算成百分比
percentage(num) {
return percentage_count(num, sys_width);
return percentage_count(num, this.div_width);
},
// 跳转链接
url_event(e) {
@ -130,7 +143,6 @@
<style lang="scss" scoped>
// 图片魔方是一个正方形，根据宽度计算高度
.img-magic {
width: 100%;
overflow: hidden;
box-sizing: border-box;
}

77
components/diy/modules/custom/model-panel.vue Normal file
View File

@ -0,0 +1,77 @@
<template>
<view class="wh-auto ht-auto re oh" :style="com_style"></view>
</template>
<script>
import { radius_computer, padding_computer, isEmpty, gradient_handle } from '@/common/js/common/common.js';
export default {
props: {
propValue: {
type: Object,
default: () => {
return {};
},
required: true,
},
propSourceList: {
type: [ Object, Array ],
default: () => {
return {};
},
},
propkey: {
type: String,
default: '',
}
},
data() {
return {
form: {},
text_title: '',
text_style: '',
com_style: '',
};
},
watch: {
propkey(val) {
this.setData({
form: this.propValue,
});
this.init();
}
},
created() {
this.setData({
form: this.propValue,
});
this.init();
},
methods: {
init() {
this.setData({
com_style: this.get_com_style(),
});
},
get_com_style() {
let style = `${ gradient_handle(this.form.color_list, this.form.direction) } ${radius_computer(this.form.bg_radius)}; transform: rotate(${this.form.panel_rotate}deg);`;
if (this.form.border_show == '1') {
style += `border: ${this.form.border_size * 2}rpx ${this.form.border_style} ${this.form.border_color};`;
}
return style;
},
},
};
</script>
<style lang="scss" scoped>
.break {
word-wrap: break-word;
word-break: break-all;
}
.rich-text-content {
white-space: normal;
word-break: break-all;
* {
max-width: 100%;
}
}
</style>