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

修改商品和文章的显示

master
于肖磊 2024-11-23 16:09:33 +08:00
parent ad41d82bbd
commit 51af86b36e
4 changed files with 64 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
components/diy/article-list.vue
View File

@ -49,15 +49,18 @@
<template v-else>
<image :src="item.data.cover" class="img" :style="img_radius + 'height:100%;'" mode="aspectFill" />
</template>
<template v-if="field_show.includes('3') && name_float == '1'">
<view class="text-line-1" :style="article_name + float_name_style">{{ item.new_title ? item.new_title : item.data.title }}</view>
</template>
<!-- 角标 -->
<subscriptIndex :propValue="propValue"></subscriptIndex>
</view>
<view v-if="field_show.includes('0') || field_show.includes('1') || field_show.includes('2') || field_show.includes('3')" class="jc-sb flex-1 flex-col" :style="article_theme !== '0' ? content_padding : ''">
<view v-if="field_show.includes('0') || field_show.includes('1') || field_show.includes('2') || (field_show.includes('3') && name_float == '0')" class="jc-sb flex-1 flex-col" :style="article_theme !== '0' ? content_padding : ''">
<div class="flex-col" :style="'gap:' + name_desc_space + 'px;'">
<div v-if="field_show.includes('3')" class="title text-line-2" :style="article_name + article_name_height_computer">{{ item.new_title ? item.new_title : item.data.title }}</div>
<div v-if="field_show.includes('3') && name_float == '0'" class="title text-line-2" :style="article_name + article_name_height_computer">{{ item.new_title ? item.new_title : item.data.title }}</div>
<div v-if="field_show.includes('2')" class="desc text-line-1" :style="article_desc">{{ item.data.describe || '' }}</div>
</div>
<view class="flex-row jc-sb gap-8 align-e margin-top">
<view :class="'flex-row jc-sb gap-8 align-e' + ((field_show.includes('3') && name_float == '0') || field_show.includes('2') ? ' margin-top' : '')">
<view :style="article_date">{{ field_show.includes('0') ? item.data.add_time : '' }}</view>
<view v-show="field_show.includes('1')" class="flex-row align-c gap-3" :style="article_page_view">
<iconfont name="icon-eye" propContainerDisplay="flex"></iconfont>
@ -80,7 +83,7 @@
<script>
const app = getApp();
import { common_styles_computer, common_img_computer, padding_computer, radius_computer, get_math, gradient_handle, background_computer } from '@/common/js/common/common.js';
import { isEmpty, common_styles_computer, common_img_computer, padding_computer, radius_computer, get_math, gradient_handle, background_computer, gradient_computer, margin_computer } from '@/common/js/common/common.js';
import subscriptIndex from '@/components/diy/modules/subscript/index.vue';
var system = app.globalData.get_system_info(null, null, true);
var sys_width = app.globalData.window_width_handle(system.windowWidth);
@ -153,6 +156,9 @@
carousel_height_computer: '',
// 文章内容高度
article_name_height_computer: '',
// 文章名称浮动样式
float_name_style: '',
name_float: '0',
// 图片大小
img_size: '',
// 文章轮播数据
@ -179,6 +185,7 @@
const new_content = this.propValue.content || {};
const new_style = this.propValue.style || {};
this.setData({
name_float: !isEmpty(new_content.name_float) ? new_content.name_float : '0',
// 判断是自动还是手动
data_list:
new_content.data_type == '0'
@ -212,6 +219,7 @@
next_margin: new_style.rolling_fashion == 'translation' ? '-' + new_style.article_spacing_margin + 'px' : '0rpx',
// 文章内容高度
slides_per_group: new_style.rolling_fashion == 'translation' ? Number(new_content.carousel_col) + 1 : 1,
});
// 默认数据
const product_style_list = [
@ -285,6 +293,12 @@
// 计算间隔的空间。(gap * gap数量) / 模块数量
let gap = temp_carousel_col !== '0' ? (new_style.article_spacing * temp_carousel_col) / (Number(temp_carousel_col) + 1) : '0';
const multicolumn_columns_width = new_style.rolling_fashion == 'translation' ? `margin-right: ${ new_style.article_spacing }px;width:100%;` : `width:calc(${100 / (Number(temp_carousel_col) + 1)}% - ${gap * 2}rpx);min-width:calc(${100 / (Number(temp_carousel_col) + 1)}% - ${gap * 2}rpx);`;
const { name_bg_color_list = [], name_bg_direction = '180deg', name_bg_radius, name_bg_padding, name_bg_margin } = new_style;
const data = {
color_list: name_bg_color_list,
direction: name_bg_direction,
}
let location = 'position:absolute;bottom:0;left:0;right:0;'
// 轮播宽度
this.setData({
// 滚动时间
@ -297,6 +311,7 @@
carousel_height_computer: new_style.article_height + 'px',
// 文章内容高度
article_name_height_computer: `height:${new_style.name_size * 2.4 * 2}rpx;line-height:${new_style.name_size * 1.2 * 2}rpx;`,
float_name_style: gradient_computer(data) + (!isEmpty(name_bg_radius) ? radius_computer(name_bg_radius) : '') + (!isEmpty(name_bg_padding) ? padding_computer(name_bg_padding) : '' ) + (!isEmpty(name_bg_padding) ? margin_computer(name_bg_margin) : '') + location,
article_img_style: background_computer(article_data)
});
// 文章轮播数据

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

@ -213,6 +213,10 @@
data_style.indicator_location_style = get_indicator_location_style(data_style);
data_style.background_style = gradient_computer(data_style);
data_style.background_img_style = background_computer(data_style);
// 商品价格处理
data_style.goods_price_symbol_style = this.goods_trends_config(data_style, 'price_symbol');
data_style.goods_price_unit_style = this.goods_trends_config(data_style, 'price_unit');
let fit = '';
if (data_content.img_fit == 'contain') {
fit = 'aspectFit';

29
components/diy/goods-list.vue
View File

@ -41,13 +41,13 @@
<view v-if="!['3', '4', '5'].includes(form.theme)" class="flex-col gap-5">
<view :class="[form.is_price_solo == '1' ? 'flex-row align-c nowrap' : 'flex-col gap-5']">
<view v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="'color:' + new_style.shop_price_color">
<text class="identifying">{{ item.show_price_symbol }}</text>
<text :style="price_symbol">{{ item.show_price_symbol }}</text>
<text :style="price_style">{{ item.min_price }}</text>
<text v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</text>
<text v-if="is_show('price_unit')" :style="price_unit">{{ item.show_price_unit }}</text>
</view>
<view v-if="show_content && is_show('original_price') && !isEmpty(item.min_original_price)" class="text-size-xss flex-row">
<!-- <image v-if="form.static_img.length > 0" class="original-price-left" :src="form.static_img[0].url" model="widthFix"></image> -->
<text :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]">
<text :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]" :style="original_price">
{{ item.show_original_price_symbol }}{{ item.min_original_price }}
<block v-if="is_show('original_price_unit')">
{{ item.show_original_price_unit }}
@ -79,13 +79,13 @@
<view v-else class="flex-row align-c jc-sb">
<view class="flex-row align-c nowrap">
<view v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="'color:' + new_style.shop_price_color">
<text class="identifying">{{ item.show_price_symbol }}</text>
<text :style="price_symbol">{{ item.show_price_symbol }}</text>
<text :style="price_style">{{ item.min_price }}</text>
<text v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</text>
<text v-if="is_show('price_unit')" :style="price_unit">{{ item.show_price_unit }}</text>
</view>
<view v-if="show_content && is_show('original_price') && !isEmpty(item.min_original_price)" class="text-size-xss flex-row">
<!-- <image v-if="form.static_img.length > 0" class="original-price-left" :src="form.static_img[0].url" model="widthFix"></image> -->
<text :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]">
<text :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]" :style="original_price">
{{ item.show_original_price_symbol }}{{ item.min_original_price }}
<block v-if="is_show('original_price_unit')">
{{ item.show_original_price_unit }}
@ -141,13 +141,13 @@
<view class="flex-row align-c jc-sb">
<view class="flex-row align-c nowrap">
<view v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="'color:' + new_style.shop_price_color">
<text class="identifying">{{ item.show_price_symbol }}</text>
<text :style="price_symbol">{{ item.show_price_symbol }}</text>
<text :style="price_style">{{ item.min_price }}</text>
<text v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</text>
<text v-if="is_show('price_unit')" :style="price_unit">{{ item.show_price_unit }}</text>
</view>
<view v-if="show_content && is_show('original_price') && !isEmpty(item.min_original_price)" class="text-size-xss flex">
<!-- <image v-if="form.static_img.length > 0" class="original-price-left" :src="form.static_img[0].url" model="widthFix"></image> -->
<text :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]">
<text :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]" :style="original_price">
{{ item.show_original_price_symbol }}{{ item.min_original_price }}
<block v-if="is_show('original_price_unit')">
{{ item.show_original_price_unit }}
@ -249,6 +249,9 @@
score_style: '',
button_style: '',
simple_desc: '',
price_symbol: '',
price_unit: '',
original_price: '',
// 按钮背景色
button_gradient: '',
// 图片大小
@ -356,6 +359,9 @@
score_style: this.trends_config(new_style, 'score'),
button_style: this.trends_config(new_style, 'button', 'buy_button') + button_gradient,
simple_desc: this.trends_config(new_style, 'simple_desc', 'desc'),
price_symbol: this.trends_config(new_style, 'price_symbol'),
price_unit: this.trends_config(new_style, 'price_unit'),
original_price: this.trends_config(new_style, 'original_price'),
shop_content_list: this.get_shop_content_list(new_list, new_form, new_style),
slides_per_group: new_style.rolling_fashion == 'translation' ? new_form.carousel_col : 1,
img_size: img_style,
@ -572,11 +578,6 @@
font-size: 18rpx;
}
.original-price {
// background-color: #ede2c5;
border-radius: 0;
font-size: 24rpx;
border-bottom-right-radius: 20rpx;
border-top-right-radius: 20rpx;
padding: 0 20rpx;
}
.flex-img5 {

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

@ -16,11 +16,11 @@
</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 + 'height:'+ ((propGoodStyle.goods_title_size + 3) * 4) + 'rpx;'">{{ item.title }}</view>
<view v-if="propIsShow.includes('price')" class="identifying" :style="propGoodStyle.goods_price_style">
<text class="num">{{ item.show_price_symbol }}</text>
<view v-if="propIsShow.includes('price')" :style="propGoodStyle.goods_price_style">
<text :style="propGoodStyle.goods_price_symbol_style">{{ item.show_price_symbol }}</text>
{{ item.min_price }}
<template v-if="propIsShow.includes('price_unit')">
<text class="num">{{ item.show_price_unit }}</text>
<text :style="propGoodStyle.goods_price_unit_style">{{ item.show_price_unit }}</text>
</template>
</view>
</view>
@ -43,10 +43,10 @@
<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 }}
<view v-if="propIsShow.includes('price')" class="pa" :style="propGoodStyle.goods_price_style + float_pirce_style">
<text :style="propGoodStyle.goods_price_symbol_style">{{ item.show_price_symbol }}</text>{{ item.min_price }}
<template v-if="propIsShow.includes('price_unit')">
{{ item.show_price_unit }}
<text :style="propGoodStyle.goods_price_unit_style">{{ item.show_price_unit }}</text>
</template>
</view>
</view>
@ -71,11 +71,10 @@
</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 + 'height:'+ ((propGoodStyle.goods_title_size + 3) * 4) + 'rpx;'">{{ 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 }}
<view v-if="propIsShow.includes('price')" :style="propGoodStyle.goods_price_style">
<text :style="propGoodStyle.goods_price_symbol_style">{{ item.show_price_symbol }}</text>{{ item.min_price }}
<template v-if="propIsShow.includes('price_unit')">
<text class="num">{{ item.show_price_unit }}</text>
<text :style="propGoodStyle.goods_price_unit_style">{{ item.show_price_unit }}</text>
</template>
</view>
</view>
@ -88,7 +87,7 @@
<script>
const app = getApp();
import { gradient_computer, radius_computer, padding_computer, background_computer, isEmpty } from "@/common/js/common/common.js";
import { gradient_computer, radius_computer, padding_computer, background_computer, isEmpty, margin_computer } from "@/common/js/common/common.js";
import imageEmpty from '@/components/diy/modules/image-empty.vue';
export default {
components: {
@ -137,6 +136,10 @@
style_container: '',
style_img_container: '',
block_size: '',
float_pirce_style: '',
old_radius: { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 },
old_padding: { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 },
old_margin: { margin: 0, margin_top: 0, margin_bottom: 0, margin_left: 0, margin_right: 0 },
};
},
mounted() {
@ -155,7 +158,7 @@
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 { goods_color_list = [], goods_direction = '180deg', goods_radius = old_radius, goods_background_img = [], goods_background_img_style = '2', goods_chunk_padding = old_padding, goods_price_color_list = [], goods_price_direction = '180deg', goods_price_radius = old_radius, goods_price_padding = old_padding, goods_price_margin = old_margin, goods_price_location = 'center'} = this.propGoodStyle;
const style_data = {
color_list: goods_color_list,
direction: goods_direction,
@ -165,7 +168,18 @@
background_img_style: goods_background_img_style,
}
const total_gap = this.propGoodStyle.data_goods_gap * (this.propValue.length - 1);
const data = {
color_list: goods_price_color_list,
direction: goods_price_direction,
}
let location = 'left:50%;transform:translateX(-50%);bottom:0;'
if (goods_price_location == 'left') {
location = 'left:0;bottom:0;';
} else if (goods_price_location == 'right') {
location = 'right:0;bottom:0;';
}
this.setData({
float_pirce_style: gradient_computer(data) + radius_computer(goods_price_radius) + padding_computer(goods_price_padding) + margin_computer(goods_price_margin) + location,
style_container: gradient_computer(style_data) + radius_computer(goods_radius), // 用于样式显示
style_img_container: this.propFlex == 'col' ? background_computer(style_img_data) : padding_computer(goods_chunk_padding) + background_computer(style_img_data) + 'box-sizing: border-box;',
block_size: this.propOuterflex == 'row' ? 'height:100%;width:calc((100% - ' + total_gap * 2 + 'rpx) / ' + this.propNum + ');' : 'width: 100%;height:calc((100% - ' + total_gap * 2 + 'rpx) / ' + this.propNum + ');'
@ -187,22 +201,6 @@
</script>
<style scoped lang="scss">
.identifying .num {
font-size: 18rpx;
line-height: 18rpx;
}
.price-suspension {
width: calc(100% - 32rpx);
margin: 0 8rpx;
background: #fff;
font-size: 24rpx;
line-height: 34rpx;
color: #ea3323;
text-align: center;
position: absolute;
bottom: 8rpx;
border-radius: 16rpx;
}
.w {
width: 100%;
}