mirror of
https://gitee.com/niucloud-team/niucloud-admin.git
synced 2025-12-12 10:52:48 +00:00
549 lines
16 KiB
Vue
549 lines
16 KiB
Vue
<template>
|
||
<view :class="['rubik-cube', diyStore.mode]" :style="warpCss">
|
||
|
||
<!-- 1左2右 -->
|
||
<template v-if="diyComponent.mode == 'row1-lt-of2-rt'">
|
||
<view class="template-left">
|
||
<app-link :data="diyComponent.list[0].link" :class="['item', diyComponent.mode]"
|
||
:style="{ marginRight: diyComponent.imageGap * 2 + 'rpx', width: diyComponent.list[0].imgWidth, height: diyComponent.list[0].imgHeight + 'px' }">
|
||
<image :src="img(diyComponent.list[0].imageUrl)" mode="scaleToFill"
|
||
:style="diyComponent.list[0].pageItemStyle" :show-menu-by-longpress="true"></image>
|
||
</app-link>
|
||
</view>
|
||
|
||
<view class="template-right">
|
||
<template v-for="(item, index) in diyComponent.list" :key="index">
|
||
<template v-if="index > 0">
|
||
<app-link :data="item.link" :class="['item', diyComponent.mode]"
|
||
:style="{ marginBottom: diyComponent.imageGap * 2 + 'rpx', width: item.imgWidth, height: item.imgHeight + 'px' }">
|
||
<image :src="img(item.imageUrl)" mode="scaleToFill" :style="item.pageItemStyle"
|
||
:show-menu-by-longpress="true"></image>
|
||
</app-link>
|
||
</template>
|
||
</template>
|
||
</view>
|
||
</template>
|
||
|
||
<!-- 1左3右 -->
|
||
<template v-else-if="diyComponent.mode == 'row1-lt-of1-tp-of2-bm'">
|
||
<view class="template-left">
|
||
<app-link :data="diyComponent.list[0].link" :class="['item', diyComponent.mode]"
|
||
:style="{ marginRight: diyComponent.imageGap * 2 + 'rpx', width: diyComponent.list[0].imgWidth, height: diyComponent.list[0].imgHeight + 'px' }">
|
||
<image :src="img(diyComponent.list[0].imageUrl)" mode="scaleToFill"
|
||
:style="diyComponent.list[0].pageItemStyle" :show-menu-by-longpress="true"></image>
|
||
</app-link>
|
||
</view>
|
||
|
||
<view class="template-right">
|
||
<app-link :data="diyComponent.list[1].link" :class="['item', diyComponent.mode]"
|
||
:style="{ marginBottom: diyComponent.imageGap * 2 + 'rpx', width: diyComponent.list[1].imgWidth, height: diyComponent.list[1].imgHeight + 'px' }">
|
||
<image :src="img(diyComponent.list[1].imageUrl)" mode="scaleToFill"
|
||
:style="diyComponent.list[1].pageItemStyle" :show-menu-by-longpress="true"></image>
|
||
</app-link>
|
||
<view class="template-bottom">
|
||
<template v-for="(item, index) in diyComponent.list" :key="index">
|
||
<template v-if="index > 1">
|
||
<app-link :data="item.link" :class="['item', diyComponent.mode]" :style="{
|
||
marginRight: diyComponent.imageGap * 2 + 'rpx',
|
||
width: item.imgWidth,
|
||
height: item.imgHeight + 'px'
|
||
}">
|
||
<image :src="img(item.imageUrl)" mode="scaleToFill" :style="item.pageItemStyle"
|
||
:show-menu-by-longpress="true"></image>
|
||
</app-link>
|
||
</template>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<template v-else>
|
||
<app-link :class="['item', diyComponent.mode]" v-for="(item, index) in diyComponent.list" :key="index"
|
||
:data="item.link"
|
||
:style="{ marginRight: diyComponent.imageGap * 2 + 'rpx', marginBottom: diyComponent.imageGap * 2 + 'rpx', width: item.widthStyle, height: item.imgHeight + 'px' }">
|
||
<image :src="img(item.imageUrl)" :mode="'scaleToFill'" :style="item.pageItemStyle"
|
||
:show-menu-by-longpress="true"></image>
|
||
</app-link>
|
||
</template>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
// 魔方
|
||
import { onMounted, computed, watch } from 'vue';
|
||
import useDiyStore from '@/stores/diy';
|
||
import { img } from '@/utils/common';
|
||
|
||
const props = defineProps(['component', 'index', 'pullDownRefresh']);
|
||
|
||
const diyStore = useDiyStore();
|
||
|
||
const diyComponent = computed(() => {
|
||
if (diyStore.mode == 'decorate') {
|
||
return diyStore.value[props.index];
|
||
} else {
|
||
return props.component;
|
||
}
|
||
})
|
||
|
||
const warpCss = computed(() => {
|
||
var style = '';
|
||
if (diyComponent.value.componentBgColor) style += 'background-color:' + diyComponent.value.componentBgColor + ';';
|
||
if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||
if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
|
||
if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||
if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
|
||
return style;
|
||
})
|
||
|
||
const countBorderRadius = (type, index) => {
|
||
var obj = '';
|
||
if (diyComponent.value.elementAngle == 'right') {
|
||
return obj;
|
||
}
|
||
var defaultData = {
|
||
'row1-lt-of2-rt': [
|
||
['border-top-right-radius', 'border-bottom-right-radius'],
|
||
['border-top-left-radius', 'border-bottom-left-radius', 'border-bottom-right-radius'],
|
||
['border-top-left-radius', 'border-bottom-left-radius', 'border-top-right-radius']
|
||
],
|
||
'row1-lt-of1-tp-of2-bm': [
|
||
['border-top-right-radius', 'border-bottom-right-radius'],
|
||
['border-top-left-radius', 'border-bottom-left-radius', 'border-bottom-right-radius'],
|
||
['border-radius'],
|
||
['border-top-left-radius', 'border-bottom-left-radius', 'border-top-right-radius']
|
||
],
|
||
'row1-tp-of2-bm': [
|
||
['border-bottom-left-radius', 'border-bottom-right-radius'],
|
||
['border-top-left-radius', 'border-bottom-right-radius', 'border-top-right-radius'],
|
||
['border-top-left-radius', 'border-bottom-left-radius', 'border-top-right-radius']
|
||
],
|
||
'row2-lt-of2-rt': [
|
||
['border-top-right-radius', 'border-bottom-left-radius', 'border-bottom-right-radius'],
|
||
['border-top-left-radius', 'border-bottom-right-radius', 'border-bottom-left-radius'],
|
||
['border-top-left-radius', 'border-bottom-right-radius', 'border-top-right-radius'],
|
||
['border-top-left-radius', 'border-bottom-left-radius', 'border-top-right-radius']
|
||
],
|
||
'row1-of4': [
|
||
['border-top-right-radius', 'border-bottom-right-radius'],
|
||
['border-radius'],
|
||
['border-radius'],
|
||
['border-top-left-radius', 'border-bottom-left-radius']
|
||
],
|
||
'row1-of3': [
|
||
['border-top-right-radius', 'border-bottom-right-radius'],
|
||
['border-radius'],
|
||
['border-top-left-radius', 'border-bottom-left-radius']
|
||
],
|
||
'row1-of2': [
|
||
['border-top-right-radius', 'border-bottom-right-radius'],
|
||
['border-top-left-radius', 'border-bottom-left-radius']
|
||
]
|
||
};
|
||
|
||
defaultData[type][index].forEach((item, index) => {
|
||
obj += 'border-top-left-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
|
||
obj += 'border-top-right-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
|
||
obj += 'border-bottom-left-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
|
||
obj += 'border-bottom-right-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
|
||
});
|
||
return obj;
|
||
}
|
||
|
||
watch(
|
||
() => props.pullDownRefresh,
|
||
(newValue, oldValue) => {
|
||
// 处理下拉刷新业务
|
||
}
|
||
)
|
||
|
||
onMounted(() => {
|
||
refresh();
|
||
// 装修模式下刷新
|
||
watch(
|
||
() => diyComponent.value,
|
||
(newValue, oldValue) => {
|
||
if (newValue && newValue.componentName == 'RubikCube') {
|
||
refresh();
|
||
}
|
||
}
|
||
)
|
||
});
|
||
|
||
const refresh = () => {
|
||
if (diyStore.mode == 'decorate') {
|
||
diyComponent.value.list.forEach((item : any, index) => {
|
||
// 装修模式下设置默认图
|
||
if (item.imageUrl == '') {
|
||
item.imageUrl = 'static/resource/images/diy/figure.png';
|
||
item.imgWidth = 690;
|
||
item.imgHeight = 330;
|
||
}
|
||
});
|
||
}
|
||
handleData()
|
||
}
|
||
|
||
const handleData = () => {
|
||
var singleRow = {
|
||
'row1-of2': {
|
||
ratio: 2,
|
||
width: 'calc((100% - ' + uni.upx2px(diyComponent.value.imageGap * 2) + 'px) / 2)'
|
||
},
|
||
'row1-of3': {
|
||
ratio: 3,
|
||
width: 'calc((100% - ' + uni.upx2px(diyComponent.value.imageGap * 4) + 'px) / 3)'
|
||
},
|
||
'row1-of4': {
|
||
ratio: 4,
|
||
width: 'calc((100% - ' + uni.upx2px(diyComponent.value.imageGap * 6) + 'px) / 4)'
|
||
}
|
||
};
|
||
|
||
diyComponent.value.list.forEach((item, index) => {
|
||
item.pageItemStyle = countBorderRadius(diyComponent.value.mode, index);
|
||
});
|
||
|
||
if (singleRow[diyComponent.value.mode]) {
|
||
calcSingleRow(singleRow[diyComponent.value.mode]);
|
||
} else if (diyComponent.value.mode == 'row2-lt-of2-rt') {
|
||
calcFourSquare();
|
||
} else if (diyComponent.value.mode == 'row1-lt-of2-rt') {
|
||
calcRowOneLeftOfTwoRight();
|
||
} else if (diyComponent.value.mode == 'row1-tp-of2-bm') {
|
||
calcRowOneTopOfTwoBottom();
|
||
} else if (diyComponent.value.mode == 'row1-lt-of1-tp-of2-bm') {
|
||
calcRowOneLeftOfOneTopOfTwoBottom();
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 魔方：单行多个，平分宽度
|
||
* 公式：
|
||
* 宽度：屏幕宽度/2，示例：375/2=187.5
|
||
* 比例：原图高/原图宽，示例：322/690=0.46
|
||
* 高度：宽度*比例，示例：187.5*0.46=86.25
|
||
*/
|
||
const calcSingleRow = (params) => {
|
||
uni.getSystemInfo({
|
||
success: res => {
|
||
let maxHeight = 0;
|
||
|
||
diyComponent.value.list.forEach((item, index) => {
|
||
var ratio = item.imgHeight / item.imgWidth;
|
||
|
||
let width = res.windowWidth - uni.upx2px(diyComponent.value.margin.both *
|
||
2); // 减去左右间距
|
||
if (diyComponent.value.imageGap > 0) {
|
||
width -= uni.upx2px(params.ratio * diyComponent.value.imageGap * 2); // 减去间隙
|
||
}
|
||
item.imgWidth = width / params.ratio;
|
||
item.imgHeight = item.imgWidth * ratio;
|
||
|
||
if (maxHeight == 0 || maxHeight < item.imgHeight) maxHeight = item
|
||
.imgHeight;
|
||
})
|
||
|
||
diyComponent.value.list.forEach((item, index) => {
|
||
item.widthStyle = params.width;
|
||
item.imgHeight = maxHeight;
|
||
});
|
||
}
|
||
})
|
||
};
|
||
|
||
/**
|
||
* 魔方：四方型，各占50%
|
||
*/
|
||
const calcFourSquare = () => {
|
||
uni.getSystemInfo({
|
||
success: res => {
|
||
let maxHeightFirst = 0;
|
||
let maxHeightTwo = 0;
|
||
diyComponent.value.list.forEach((item, index) => {
|
||
var ratio = item.imgHeight / item.imgWidth;
|
||
item.imgWidth = res.windowWidth;
|
||
item.imgWidth -= uni.upx2px(diyComponent.value.margin.both * 4);
|
||
if (diyComponent.value.imageGap > 0) {
|
||
item.imgWidth -= uni.upx2px(diyComponent.value.imageGap * 2);
|
||
}
|
||
item.imgWidth = item.imgWidth / 2;
|
||
item.imgHeight = item.imgWidth * ratio;
|
||
|
||
|
||
// 获取每行最大高度
|
||
if (index <= 1) {
|
||
if (maxHeightFirst == 0 || maxHeightFirst < item.imgHeight) {
|
||
maxHeightFirst = item.imgHeight;
|
||
}
|
||
} else if (index > 1) {
|
||
if (maxHeightTwo == 0 || maxHeightTwo < item.imgHeight) {
|
||
maxHeightTwo = item.imgHeight;
|
||
}
|
||
}
|
||
});
|
||
diyComponent.value.list.forEach((item, index) => {
|
||
item.imgWidth = 'calc((100% - ' + uni.upx2px(diyComponent.value.imageGap * 2) +
|
||
'px) / 2)';
|
||
item.widthStyle = item.imgWidth;
|
||
if (index <= 1) {
|
||
item.imgHeight = maxHeightFirst;
|
||
} else if (index > 1) {
|
||
item.imgHeight = maxHeightTwo;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 魔方：1左2右
|
||
*/
|
||
const calcRowOneLeftOfTwoRight = () => {
|
||
let rightHeight = 0; // 右侧两图平分高度
|
||
let divide = 'left'; // 划分规则，left：左，right：右
|
||
if (diyComponent.value.list[1].imgWidth === diyComponent.value.list[2].imgWidth) divide = 'right';
|
||
uni.getSystemInfo({
|
||
success: res => {
|
||
diyComponent.value.list.forEach((item, index) => {
|
||
if (index == 0) {
|
||
var ratio = item.imgHeight / item.imgWidth; // 获取左图的尺寸比例
|
||
item.imgWidth = res.windowWidth - uni.upx2px(diyComponent.value.margin
|
||
.both * 4) - uni.upx2px(diyComponent.value.imageGap * 2);
|
||
item.imgWidth = item.imgWidth / 2;
|
||
item.imgHeight = item.imgWidth * ratio;
|
||
rightHeight = (item.imgHeight - uni.upx2px(diyComponent.value.imageGap *
|
||
2)) / 2;
|
||
item.imgWidth += 'px';
|
||
} else {
|
||
item.imgWidth = diyComponent.value.list[0].imgWidth;
|
||
item.imgHeight = rightHeight;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 魔方：1上2下
|
||
*/
|
||
const calcRowOneTopOfTwoBottom = () => {
|
||
var maxHeight = 0;
|
||
uni.getSystemInfo({
|
||
success: res => {
|
||
diyComponent.value.list.forEach((item, index) => {
|
||
|
||
var ratio = item.imgHeight / item.imgWidth; // 获取左图的尺寸比例
|
||
if (index == 0) {
|
||
item.imgWidth = res.windowWidth - uni.upx2px(diyComponent.value.margin
|
||
.both * 4);
|
||
} else if (index > 0) {
|
||
item.imgWidth = res.windowWidth - uni.upx2px(diyComponent.value.margin
|
||
.both * 4) - uni.upx2px(diyComponent.value.imageGap * 2);
|
||
item.imgWidth = item.imgWidth / 2;
|
||
}
|
||
|
||
item.imgHeight = item.imgWidth * ratio;
|
||
|
||
// 获取最大高度
|
||
if (index > 0 && (maxHeight == 0 || maxHeight < item.imgHeight))
|
||
maxHeight = item.imgHeight;
|
||
|
||
});
|
||
diyComponent.value.list.forEach((item, index) => {
|
||
item.imgWidth += 'px';
|
||
item.widthStyle = item.imgWidth;
|
||
if (index > 0) item.imgHeight = maxHeight;
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 魔方：1左3右
|
||
*/
|
||
const calcRowOneLeftOfOneTopOfTwoBottom = () => {
|
||
uni.getSystemInfo({
|
||
success: res => {
|
||
diyComponent.value.list.forEach((item, index) => {
|
||
// 左图
|
||
if (index == 0) {
|
||
var ratio = item.imgHeight / item.imgWidth; // 获取左图的尺寸比例
|
||
item.imgWidth = res.windowWidth - uni.upx2px(diyComponent.value.margin
|
||
.both * 4) - uni.upx2px(diyComponent.value.imageGap * 2);
|
||
item.imgWidth = item.imgWidth / 2;
|
||
item.imgHeight = item.imgWidth * ratio;
|
||
} else if (index == 1) {
|
||
item.imgWidth = diyComponent.value.list[0].imgWidth;
|
||
item.imgHeight = (diyComponent.value.list[0].imgHeight - uni.upx2px(diyComponent.value
|
||
.imageGap * 2)) / 2;
|
||
} else if (index > 1) {
|
||
item.imgWidth = (diyComponent.value.list[0].imgWidth - uni.upx2px(diyComponent.value
|
||
.imageGap * 2)) / 2;
|
||
item.imgHeight = diyComponent.value.list[1].imgHeight;
|
||
}
|
||
});
|
||
|
||
diyComponent.value.list.forEach((item, index) => {
|
||
item.imgWidth += 'px';
|
||
item.imgHeight;
|
||
});
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.rubik-cube {
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
|
||
.item {
|
||
text-align: center;
|
||
line-height: 0;
|
||
overflow: hidden;
|
||
|
||
image {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
// 一行两个
|
||
.rubik-cube .item.row1-of2 {
|
||
box-sizing: border-box;
|
||
margin-top: 0 !important;
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
.rubik-cube .item.row1-of2:nth-child(1) {
|
||
margin-left: 0 !important;
|
||
}
|
||
|
||
.rubik-cube .item.row1-of2:nth-child(2) {
|
||
margin-right: 0 !important;
|
||
}
|
||
|
||
// 一行三个
|
||
.rubik-cube .item.row1-of3 {
|
||
box-sizing: border-box;
|
||
margin-top: 0 !important;
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
.rubik-cube .item.row1-of3:nth-child(1) {
|
||
margin-left: 0 !important;
|
||
}
|
||
|
||
.rubik-cube .item.row1-of3:nth-child(3) {
|
||
margin-right: 0 !important;
|
||
}
|
||
|
||
// 一行四个
|
||
.rubik-cube .item.row1-of4 {
|
||
box-sizing: border-box;
|
||
margin-top: 0 !important;
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
.rubik-cube .item.row1-of4:nth-child(1) {
|
||
margin-left: 0 !important;
|
||
}
|
||
|
||
.rubik-cube .item.row1-of4:nth-child(4) {
|
||
margin-right: 0 !important;
|
||
}
|
||
|
||
// 两左两右
|
||
.rubik-cube .item.row2-lt-of2-rt {
|
||
// width: 50%;
|
||
display: inline-block;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.rubik-cube .item.row2-lt-of2-rt:nth-child(1) {
|
||
margin-left: 0 !important;
|
||
margin-top: 0 !important;
|
||
}
|
||
|
||
.rubik-cube .item.row2-lt-of2-rt:nth-child(2) {
|
||
margin-right: 0 !important;
|
||
margin-top: 0 !important;
|
||
}
|
||
|
||
.rubik-cube .item.row2-lt-of2-rt:nth-child(3) {
|
||
margin-left: 0 !important;
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
.rubik-cube .item.row2-lt-of2-rt:nth-child(4) {
|
||
margin-right: 0 !important;
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
// 一左两右
|
||
.rubik-cube .template-left,
|
||
.rubik-cube .template-right {
|
||
// width: 50%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.rubik-cube .template-left .item.row1-lt-of2-rt:nth-child(1) {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.rubik-cube .template-right .item.row1-lt-of2-rt:nth-child(2) {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
.rubik-cube.row1-lt-of2-rt .template-right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
// 一上两下
|
||
.rubik-cube .item.row1-tp-of2-bm:nth-child(1) {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
margin-top: 0 !important;
|
||
margin-left: 0 !important;
|
||
margin-right: 0 !important;
|
||
}
|
||
|
||
.rubik-cube .item.row1-tp-of2-bm:nth-child(2) {
|
||
// width: 50%;
|
||
box-sizing: border-box;
|
||
margin-left: 0 !important;
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
.rubik-cube .item.row1-tp-of2-bm:nth-child(3) {
|
||
// width: 50%;
|
||
box-sizing: border-box;
|
||
margin-right: 0 !important;
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
// 一左三右
|
||
.rubik-cube .template-left .item.row1-lt-of1-tp-of2-bm {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.rubik-cube .template-bottom {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.rubik-cube .template-bottom .item:nth-child(2) {
|
||
margin-right: 0 !important;
|
||
}
|
||
</style> |