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

修改页面问题处理

master
于肖磊 2024-10-31 14:03:30 +08:00
parent ac17e43b2b
commit a28ffedef3
7 changed files with 215 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
common/css/page.css
View File

@ -1359,4 +1359,11 @@ button[disabled].bg-grey {
/* #ifndef H5 */
padding-top: calc(var(--status-bar-height) + 10rpx);
/* #endif */
}
/* 数字和文字超出范围不整体换行 */
.text-word-break {
word-break: break-all;
overflow-wrap: break-word;
word-wrap: break-word;
}

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

@ -9,9 +9,16 @@
<view class="w h" :style="item.data_style.background_img_style">
<template v-if="item.data_content.data_type == 'goods'">
<view class="w h flex-col" :style="'gap:'+ item.title_text_gap * 2 + 'rpx;' + ([0, 1].includes(index) ? item.data_style.chunk_padding_data : '')">
<view v-if="(!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)) && [0, 1].includes(index)" class="flex-col gap-5 tl">
<view class="ma-0 w text-line-1" :style="item.data_style.daheading_style">{{ item.data_content.heading_title || '' }}</view>
<view class="ma-0 w text-line-1" :style="item.data_style.subtitle_style">{{ item.data_content.subtitle || '' }}</view>
<view v-if="(!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)) && [0, 1].includes(index)" :class="'tl' + (item.data_style.title_line == '1' ? ' flex-row align-c gap-10' : ' flex-col gap-5')">
<template v-if="item.data_content.heading_title_type && item.data_content.heading_title_type == 'image'">
<view v-if="item.data_content.heading_title_img.length > 0" class="re" :style="'height:' + (!isEmpty(item.data_style.heading_img_height) ? item.data_style.heading_img_height : 0) * 2 + 'rpx'">
<image :src="item.data_content.heading_title_img[0].url" mode="aspectFit" />
</view>
</template>
<template v-else>
<view class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="item.data_style.heading_style">{{ item.data_content.heading_title || '' }}</view>
</template>
<view class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="item.data_style.subtitle_style">{{ item.data_content.subtitle || '' }}</view>
</view>
<view class="w h">
<magic-carousel :propValue="item" :propGoodStyle="item.data_style" :propActived="form.style_actived" propType="product" @onCarouselChange="carousel_change($event, index)"></magic-carousel>
@ -41,9 +48,16 @@
<view class="w h" :style="item.data_style.background_img_style">
<template v-if="item.data_content.data_type == 'goods'">
<view class="w h flex-col" :style="'gap:'+ item.title_text_gap * 2 + 'rpx;' + item.data_style.chunk_padding_data">
<view v-if="!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)" class="flex-col gap-5 tl">
<view class="ma-0 w text-line-1" :style="item.data_style.heading_style">{{ item.data_content.heading_title || '' }}</view>
<view class="ma-0 w text-line-1" :style="item.data_style.subtitle_style">{{ item.data_content.subtitle || '' }}</view>
<view v-if="!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)" :class="'tl' + (item.data_style.title_line == '1' ? ' flex-row align-c gap-10' : ' flex-col gap-5')">
<template v-if="item.data_content.heading_title_type && item.data_content.heading_title_type == 'image'">
<view v-if="item.data_content.heading_title_img.length > 0" class="re" :style="'height:' + (!isEmpty(item.data_style.heading_img_height) ? item.data_style.heading_img_height : 0) * 2 + 'rpx'">
<image :src="item.data_content.heading_title_img[0].url" mode="aspectFit" />
</view>
</template>
<template v-else>
<view class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="item.data_style.heading_style">{{ item.data_content.heading_title || '' }}</view>
</template>
<view class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="item.data_style.subtitle_style">{{ item.data_content.subtitle || '' }}</view>
</view>
<view class="w h">
<magic-carousel :propValue="item" :propGoodStyle="item.data_style" propType="product" :propActived="form.style_actived" @onCarouselChange="carousel_change($event, index)"></magic-carousel>
@ -76,6 +90,8 @@
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,
@ -141,6 +157,7 @@
init() {
const new_form = this.propValue.content;
const new_style = this.propValue.style;
const container_height = !isEmpty(new_form.container_height) ? new_form.container_height : sys_width;
const density = 4;
this.setData({
form: new_form,
@ -152,21 +169,9 @@
data_magic_list: this.get_data_magic_list(new_form.data_magic_list),
style_container: common_styles_computer(new_style.common_style) + 'box-sizing: border-box;', // 用于样式显示
style_img_container: common_img_computer(new_style.common_style, this.propIndex),
});
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();
div_width: sys_width,
cubeCellWidth: sys_width / density,
container_size: container_height * 2 + 'rpx',
});
},
get_data_magic_list(data) {
@ -189,7 +194,7 @@
data_content.fit = fit;
// 商品名称和价格样式
data_style.goods_title_style = this.goods_trends_config(data_style, 'title');
data_style.goods_price_style = this.goods_trends_config(data_style, 'price');
data_style.goods_price_style = this.goods_trends_config(data_style, 'price') + `line-height: ${ item.data_style.goods_price_size }px;`;
const radius = !isEmpty(data_style.img_radius) ? data_style.img_radius : { radius: 4, radius_top_left: 4, radius_top_right: 4, radius_bottom_left: 4, radius_bottom_right: 4 };
data_style.get_img_radius = radius_computer(radius);
@ -333,4 +338,8 @@
.h {
height: 100%;
}
.flex-basis-shrink {
flex-basis: content;
flex-shrink: 1;
}
</style>

5
components/diy/header.vue
View File

@ -174,9 +174,12 @@
const gradient = { color_list: up_slide_background_color_list, direction: up_slide_background_direction };
// 背景图
const back = { background_img: up_slide_background_img, background_img_style: up_slide_background_img_style };
const up_slide_opacity = 'opacity:' + ((newVal - 20) / (this.header_top + 33) > 1 ? 1 : ((newVal - 20) / (this.header_top + 33)).toFixed(2)) + ';'
this.setData({
up_slide_opacity: up_slide_opacity,
up_slide_old_logo_style: 'opacity:' + ((newVal - 5) / (this.header_top + 33) > 1 ? 1 : ((newVal - 5) / (this.header_top + 33)).toFixed(2)) + ';',
// 20是大小误差
up_slide_style: gradient_computer(gradient) + 'opacity:' + ((newVal - 20) / (this.header_top + 33) > 1 ? 1 : ((newVal - 20) / (this.header_top + 33)).toFixed(2)) + ';',
up_slide_style: gradient_computer(gradient) + up_slide_opacity,
up_slide_img_style: background_computer(back),
});
},

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

@ -42,7 +42,9 @@
</template>
<script>
const app = getApp();
import { common_styles_computer, common_img_computer, radius_computer, percentage_count } from '@/common/js/common/common.js';
import { common_styles_computer, common_img_computer, radius_computer, percentage_count, isEmpty } 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 {
props: {
propValue: {
@ -113,6 +115,7 @@
} else if (new_content.img_fit == 'cover') {
fit = 'aspectFill';
}
const container_height = !isEmpty(new_content.container_height) ? new_content.container_height : sys_width;
const density = 4;
this.setData({
form: this.propValue.content,
@ -122,24 +125,11 @@
img_outer_spacing: new_style_spacing * 2 + 'rpx',
content_img_radius: radius_computer(new_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.propIndex),
style_img_container: common_img_computer(new_style.common_style, this.propIndex) + 'box-sizing: border-box;',
img_fit: fit,
});
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this);
query
.select('.magic-container')
.boundingClientRect((res) => {
if ((res || null) != null) {
this.setData({
div_width: res.width,
container_size: res.width + 'px',
cube_cell: res.width / density,
});
}
})
.exec();
div_width: sys_width,
container_size: container_height * 2 + 'rpx',
cube_cell: sys_width / density,
});
},
getSelectedWidth(item) {

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

@ -1,19 +1,24 @@
<template>
<swiper circular="true" :autoplay="propValue.data_style.is_roll == '1'" :interval="propValue.data_style.interval_time * 1000" :duration="500" :vertical="propValue.data_style.rotation_direction == 'vertical'" class="swiper" style="height: 100%" @change="carousel_change">
<swiper-item v-for="(item1, index1) in propValue.data_content.list" :key="index1">
<template v-if="propType === 'img'">
<view class="wh-auto ht-auto" :data-value="item1.carousel_link.page" @tap="url_event">
<imageEmpty :propImageSrc="item1.carousel_img[0]" :propStyle="propValue.data_style.get_img_radius" :propImgFit="propValue.data_content.fit" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
</view>
</template>
<template v-else>
<product-list-show :propOuterflex="propValue.outerflex" :propFlex="propValue.flex" :propNum="propValue.num" :propActived="propActived" :propIsShow="propValue.data_content.is_show" :propChunkPadding="propValue.data_style.chunk_padding" :propValue="item1.split_list" :propGoodStyle="propGoodStyle" :propContentImgRadius="propValue.data_style.get_img_radius" @url_event="url_event"></product-list-show>
</template>
</swiper-item>
</swiper>
<view class="wh-auto ht-auto oh ssss" :style="style_container">
<view class="wh-auto ht-auto" :style="style_img_container">
<swiper circular="true" :autoplay="propValue.data_style.is_roll == '1'" :interval="propValue.data_style.interval_time * 1000" :duration="500" :vertical="propValue.data_style.rotation_direction == 'vertical'" class="swiper" style="height: 100%" @change="carousel_change">
<swiper-item v-for="(item1, index1) in propValue.data_content.list" :key="index1">
<template v-if="propType === 'img'">
<view class="wh-auto ht-auto" :data-value="item1.carousel_link.page" @tap="url_event">
<imageEmpty :propImageSrc="item1.carousel_img[0]" :propStyle="propValue.data_style.get_img_radius" :propImgFit="propValue.data_content.fit" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
</view>
</template>
<template v-else>
<product-list-show :propOuterflex="propValue.outerflex" :propFlex="propValue.flex" :propNum="propValue.num" :propActived="propActived" :propIsShow="propValue.data_content.is_show" :propChunkPadding="propValue.data_style.chunk_padding" :propValue="item1.split_list" :propGoodStyle="propGoodStyle" :propContentImgRadius="propValue.data_style.get_img_radius" @url_event="url_event"></product-list-show>
</template>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
import { gradient_computer, radius_computer, padding_computer, background_computer, isEmpty } from "@/common/js/common/common.js";
const app = getApp();
import imageEmpty from '@/components/diy/modules/image-empty.vue';
import productListShow from '@/components/diy/modules/data-magic/product-list-show.vue';
@ -44,7 +49,35 @@
default: () => {},
},
},
data() {
return {
style_container: '',
style_img_container: '',
};
},
mounted() {
this.init();
},
methods: {
init() {
if (!isEmpty(this.propValue)) {
const { data_color_list = [], data_direction = '180deg', data_radius = { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 }, data_background_img = [], data_background_img_style = '2', data_chunk_padding = { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 }} = this.propValue.data_style;
const style_data = {
color_list: data_color_list,
direction: data_direction,
}
const style_img_data = {
background_img: data_background_img,
background_img_style: data_background_img_style,
}
this.setData({
style_container: gradient_computer(style_data) + radius_computer(data_radius) + 'box-sizing: border-box;', // 用于样式显示
style_img_container: padding_computer(data_chunk_padding) + background_computer(style_img_data),
});
} else {
return '';
}
},
carousel_change(e) {
this.$emit('onCarouselChange', e);
},

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

@ -2,72 +2,84 @@
<view v-if="propOuterflex == 'row'" class="w h">
<view class="flex-row gap-10 align-c w h">
<template v-if="propFlex === 'row'">
<view v-for="(item, index) in propValue" :key="index" class="flex-row gap-10 half-width ht-auto" :data-index="index" :data-value="item.goods_url" @tap="url_event">
<template v-if="!isEmpty(item.new_cover)">
<view class="w h">
<imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
</view>
</template>
<template v-else>
<view class="w h">
<imageEmpty :propImageSrc="item.images" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
</view>
</template>
<view v-if="!isEmpty(propIsShow)" class="flex-col w h tl jc-sb">
<view v-if="propIsShow.includes('title')" class="text-line-2" :style="propGoodStyle.goods_title_style">{{ item.title }}</view>
<view v-if="propIsShow.includes('price')" class="identifying" :style="propGoodStyle.goods_price_style">
<text class="num">{{ item.show_price_symbol }}</text>
{{ item.min_price }}
<template v-if="propIsShow.includes('price_unit')">
<text class="num">{{ item.show_price_unit }}</text>
<view v-for="(item, index) in propValue" :key="index" class="half-width ht-auto">
<view class="w h oh" :style="style_container">
<view class="w h flex-row gap-10" :style="style_img_container" :data-index="index" :data-value="item.goods_url" @tap="url_event">
<template v-if="!isEmpty(item.new_cover)">
<view class="w h">
<imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
</view>
</template>
<template v-else>
<view class="w h">
<imageEmpty :propImageSrc="item.images" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
</view>
</template>
<view v-if="!isEmpty(propIsShow)" class="flex-col w h tl jc-sb">
<view v-if="propIsShow.includes('title')" class="text-line-2" :style="propGoodStyle.goods_title_style">{{ item.title }}</view>
<view v-if="propIsShow.includes('price')" class="identifying" :style="propGoodStyle.goods_price_style">
<text class="num">{{ item.show_price_symbol }}</text>
{{ item.min_price }}
<template v-if="propIsShow.includes('price_unit')">
<text class="num">{{ item.show_price_unit }}</text>
</template>
</view>
</view>
</view>
</view>
</view>
</template>
<template v-else-if="propActived != 7 || propNum !== 1">
<view v-for="(item, index) in propValue" :key="index" :class="['flex-col gap-10 ht-auto', { 'half-width': propNum !== 1, 'w': propNum == 1 }]" :data-index="index" :data-value="item.goods_url" @tap="url_event">
<view class="w h pr">
<template v-if="!isEmpty(item.new_cover)">
<view class="w h">
<imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
<view v-for="(item, index) in propValue" :key="index" :class="['ht-auto', { 'half-width': propNum !== 1, 'w': propNum == 1 }]">
<view class="w h oh" :style="style_container">
<view class="w h flex-col gap-10" :style="style_img_container" :data-index="index" :data-value="item.goods_url" @tap="url_event">
<view class="w h pr">
<template v-if="!isEmpty(item.new_cover)">
<view class="w h">
<imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
</view>
</template>
<template v-else>
<view class="w h">
<imageEmpty :propImageSrc="item.images" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
</view>
</template>
<view v-if="propIsShow.includes('price')" class="price-suspension text-line-1" :style="propGoodStyle.goods_price_style">
{{ item.show_price_symbol }}{{ item.min_price }}
<template v-if="propIsShow.includes('price_unit')">
{{ item.show_price_unit }}
</template>
</view>
</view>
</template>
<template v-else>
<view class="w h">
<imageEmpty :propImageSrc="item.images" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
</view>
</template>
<view v-if="propIsShow.includes('price')" class="price-suspension text-line-1" :style="propGoodStyle.goods_price_style">
{{ item.show_price_symbol }}{{ item.min_price }}
<template v-if="propIsShow.includes('price_unit')">
{{ item.show_price_unit }}
</template>
<view v-if="propIsShow.includes('title')" class="text-line-1 tl w" :style="propGoodStyle.goods_title_style + ';overflow: inherit'">{{ item.title }}</view>
</view>
</view>
<view v-if="propIsShow.includes('title')" class="text-line-1 tl w" :style="propGoodStyle.goods_title_style + ';overflow: inherit'">{{ item.title }}</view>
</view>
</template>
<template v-else>
<view v-for="(item, index) in propValue" :key="index" class="flex-col w h" :data-index="index" :data-value="item.goods_url" @tap="url_event">
<template v-if="!isEmpty(item.new_cover)">
<view class="w h">
<imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
</view>
</template>
<template v-else>
<view class="w h">
<imageEmpty :propImageSrc="item.images" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
</view>
</template>
<view v-if="!isEmpty(propIsShow)" class="flex-col w h tl jc-sb" :style="img_padding_computer">
<view v-if="propIsShow.includes('title')" class="text-line-2" :style="propGoodStyle.goods_title_style">{{ item.title }}</view>
<view v-if="propIsShow.includes('price')" class="identifying" :style="propGoodStyle.goods_price_style">
<text class="num">{{ item.show_price_symbol }}</text>
{{ item.min_price }}
<template v-if="propIsShow.includes('price_unit')">
<text class="num">{{ item.show_price_unit }}</text>
<view v-for="(item, index) in propValue" :key="index" class="w h">
<view class="w h oh" :style="style_container">
<view class="w h flex-col" :style="style_img_container" :data-index="index" :data-value="item.goods_url" @tap="url_event">
<template v-if="!isEmpty(item.new_cover)">
<view class="w h">
<imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
</view>
</template>
<template v-else>
<view class="w h">
<imageEmpty :propImageSrc="item.images" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
</view>
</template>
<view v-if="!isEmpty(propIsShow)" class="flex-col w h tl jc-sb" :style="img_padding_computer">
<view v-if="propIsShow.includes('title')" class="text-line-2" :style="propGoodStyle.goods_title_style">{{ item.title }}</view>
<view v-if="propIsShow.includes('price')" class="identifying" :style="propGoodStyle.goods_price_style">
<text class="num">{{ item.show_price_symbol }}</text>
{{ item.min_price }}
<template v-if="propIsShow.includes('price_unit')">
<text class="num">{{ item.show_price_unit }}</text>
</template>
</view>
</view>
</view>
</view>
</view>
@ -77,25 +89,29 @@
<view v-else class="w h">
<view class="flex-col gap-20 align-c w h">
<template v-if="propFlex === 'row'">
<view v-for="(item, index) in propValue" :key="index" class="flex-row gap-10 align-c w h shop-max-height" :data-index="index" :data-value="item.goods_url" @tap="url_event">
<template v-if="!isEmpty(item.new_cover)">
<view class="w h">
<imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
</view>
</template>
<template v-else>
<view class="w h">
<imageEmpty :propImageSrc="item.images" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
</view>
</template>
<view v-if="!isEmpty(propIsShow)" class="flex-col w h tl jc-sb">
<view v-if="propIsShow.includes('title')" class="text-line-2" :style="propGoodStyle.goods_title_style">{{ item.title }}</view>
<view v-if="propIsShow.includes('price')" class="identifying" :style="propGoodStyle.goods_price_style">
<text class="num">{{ item.show_price_symbol }}</text
>{{ item.min_price }}
<template v-if="propIsShow.includes('price_unit')">
<text class="num">{{ item.show_price_unit }}</text>
<view v-for="(item, index) in propValue" :key="index" class="w h" :style="'max-height:calc(100% / 3 - ' + (20 / 3) + 'px;'">
<view class="w h oh" :style="style_container">
<view class="w h flex-row gap-10 align-c" :style="style_img_container" :data-index="index" :data-value="item.goods_url" @tap="url_event">
<template v-if="!isEmpty(item.new_cover)">
<view class="w h">
<imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
</view>
</template>
<template v-else>
<view class="w h">
<imageEmpty :propImageSrc="item.images" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
</view>
</template>
<view v-if="!isEmpty(propIsShow)" class="flex-col w h tl jc-sb">
<view v-if="propIsShow.includes('title')" class="text-line-2" :style="propGoodStyle.goods_title_style">{{ item.title }}</view>
<view v-if="propIsShow.includes('price')" class="identifying" :style="propGoodStyle.goods_price_style">
<text class="num">{{ item.show_price_symbol }}</text
>{{ item.min_price }}
<template v-if="propIsShow.includes('price_unit')">
<text class="num">{{ item.show_price_unit }}</text>
</template>
</view>
</view>
</view>
</view>
</view>
@ -106,7 +122,7 @@
<script>
const app = getApp();
import { isEmpty, padding_computer } from '@/common/js/common/common.js';
import { gradient_computer, radius_computer, padding_computer, background_computer, isEmpty } from "@/common/js/common/common.js";
import imageEmpty from '@/components/diy/modules/image-empty.vue';
export default {
components: {
@ -150,6 +166,15 @@
default: () => {},
}
},
data() {
return {
style_container: '',
style_img_container: '',
};
},
mounted() {
this.init();
},
computed: {
img_padding_computer() {
if (!isEmpty(this.propChunkPadding)) {
@ -161,6 +186,25 @@
},
methods: {
isEmpty,
init() {
if (!isEmpty(this.propGoodStyle)) {
const { goods_color_list = [], goods_direction = '180deg', goods_radius = { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 }, goods_background_img = [], goods_background_img_style = '2', goods_chunk_padding = { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 }} = this.propGoodStyle;
const style_data = {
color_list: goods_color_list,
direction: goods_direction,
}
const style_img_data = {
background_img: goods_background_img,
background_img_style: goods_background_img_style,
}
this.setData({
style_container: gradient_computer(style_data) + radius_computer(goods_radius) + 'box-sizing: border-box;', // 用于样式显示
style_img_container: padding_computer(goods_chunk_padding) + background_computer(style_img_data) + 'box-sizing: border-box;',
});
} else {
return '';
}
},
url_event(e) {
// 存储数据显示缓存
let index = e.currentTarget.dataset.index || 0;
@ -176,6 +220,7 @@
<style scoped lang="scss">
.identifying .num {
font-size: 18rpx;
line-height: 18rpx;
}
.price-suspension {
width: calc(100% - 32rpx);
@ -189,9 +234,6 @@
bottom: 8rpx;
border-radius: 16rpx;
}
.shop-max-height {
max-height: calc(100% / 3);
}
.w {
width: 100%;
}

5
components/diy/title.vue
View File

@ -12,7 +12,8 @@
<template v-else-if="!isEmpty(form.icon_class)">
<iconfont :name="'icon-' + form.icon_class" :size="new_style.icon_size * 2 + 'rpx'" :color="new_style.icon_color" propContainerDisplay="flex"></iconfont>
</template>
<view v-if="!isEmpty(form.title)" class="pr-15 nowrap" :style="title_style">{{ form.title }}</view>
<view v-if="!isEmpty(form.title)" class="nowrap" :style="title_style">{{ form.title }}</view>
<view v-if="!isEmpty(form.subtitle) && new_style.title_line == '1'" class="text-word-break nowrap" :style="subtitle_style">{{ form.subtitle }}</view>
</view>
<view class="flex-row gap-10 align-c right-0 pa">
<template v-if="form.keyword_show == '1'">
@ -26,7 +27,7 @@
</view>
</view>
</view>
<view v-if="!isEmpty(form.subtitle)" class="break" :style="subtitle_style">{{ form.subtitle }}</view>
<view v-if="!isEmpty(form.subtitle) && new_style.title_line != '1'" class="text-word-break" :style="subtitle_style">{{ form.subtitle }}</view>
</view>
</view>
</view>