修改页面显示
于肖磊
parent
8b2e33ba24
commit
c4aba4ee4f
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<view class="pr" :style="style_container">
|
||||
<swiper circular="true" :autoplay="form.is_roll == '1'" :interval="form.interval_time * 1000" :duration="500" :style="{ height: new_style.height * 2 + 'rpx' }" :previous-margin="previousMargin" :next-margin="nextMargin" @change="slideChange">
|
||||
<swiper circular="true" :autoplay="form.is_roll == '1'" :interval="form.interval_time * 1000" :display-multiple-items="slides_per_group" :duration="500" :style="{ height: new_style.height * 2 + 'rpx' }" :previous-margin="previousMargin" :next-margin="nextMargin" @change="slideChange">
|
||||
<block v-if="form.carousel_type == 'card'">
|
||||
<swiper-item v-for="(item, index) in new_list" :key="index" class="flex-row align-c" @tap="url_open(item.carousel_link)">
|
||||
<view class="swiper-item" :style="img_style" :class="['scale-defalt', { 'scale-1': animationData === index }]">
|
||||
|
|
@ -13,12 +13,12 @@
|
|||
<block v-else>
|
||||
<iconfont :name="!isEmpty(new_style.video_icon_class) ? 'icon-' + new_style.video_icon_class : 'icon-bofang'" size="'28rpx'" :color="new_style.video_icon_color"></iconfont>
|
||||
</block>
|
||||
<span v-if="!isEmpty(item.video_title)" :style="{ color: new_style.video_title_color, 'font-size': new_style.video_title_size * 2 + 'rpx' }">{{ item.video_title }}</span>
|
||||
<span v-if="!isEmpty(item.video_title)" :style="{ color: new_style.video_title_color, 'font-size': new_style.video_title_size * 2 + 'rpx', 'text-wrap': 'nowrap' }">{{ item.video_title }}</span>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
<block v-else>
|
||||
<swiper-item v-for="(item, index) in new_list" :key="index">
|
||||
<swiper-item v-for="(item, index) in new_list" :key="index" :style="{ 'padding-right': new_style.image_spacing * 2 + 'rpx' }">
|
||||
<view class="item-image flex-row jc-c align-c wh-auto ht-auto pr" :style="img_style">
|
||||
<image-empty :image-src="item.carousel_img[0]" class="img" :style="img_style" :img_fit="img_fit" error-style="width: 100rpx;height: 100rpx;"></image-empty>
|
||||
</view>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
<block v-else>
|
||||
<iconfont :name="!isEmpty(new_style.video_icon_class) ? 'icon-' + new_style.video_icon_class : 'icon-bofang'" size="'28rpx'" :color="new_style.video_icon_color"></iconfont>
|
||||
</block>
|
||||
<span v-if="!isEmpty(item.video_title)" :style="{ color: new_style.video_title_color, 'font-size': new_style.video_title_size * 2 + 'rpx' }">{{ item.video_title }}</span>
|
||||
<span v-if="!isEmpty(item.video_title)" :style="{ color: new_style.video_title_color, 'font-size': new_style.video_title_size * 2 + 'rpx', 'text-wrap': 'nowrap' }">{{ item.video_title }}</span>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
|
|
@ -96,6 +96,7 @@
|
|||
animationData: 0,
|
||||
previousMargin: '0rpx',
|
||||
nextMargin: '0rpx',
|
||||
slides_per_group: 1,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -142,6 +143,13 @@
|
|||
animationData: 0,
|
||||
});
|
||||
});
|
||||
} else if (this.form.carousel_type != 'inherit') {
|
||||
this.$nextTick(() => {
|
||||
this.setData({
|
||||
nextMargin: '100rpx',
|
||||
slides_per_group: this.form.carousel_type == 'twoDragOne' ? 2 : 1,
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
get_indicator_style() {
|
||||
|
|
@ -292,6 +300,8 @@
|
|||
}
|
||||
.video-class {
|
||||
max-width: 100%;
|
||||
margin-right: 20rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.x-middle {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -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': 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)}">
|
||||
<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 :key="item.com_data" :value="item.com_data" :source-list="form.data_source_content" @url_open="url_open"></model-text>
|
||||
</template>
|
||||
|
|
@ -11,6 +11,9 @@
|
|||
<template v-else-if="item.key == 'auxiliary-line'">
|
||||
<model-lines :key="item.com_data" :value="item.com_data" :source-list="form.data_source_content"></model-lines>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'icon'">
|
||||
<model-icon :key="item.com_data" :value="item.com_data" :source-list="form.data_source_content" @url_open="url_open"></model-icon>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -24,12 +27,14 @@
|
|||
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';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
modelText,
|
||||
modelLines,
|
||||
modelImage
|
||||
modelImage,
|
||||
modelIcon
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
|
|
@ -43,14 +48,16 @@
|
|||
return {
|
||||
form: {},
|
||||
new_style: {},
|
||||
scale: sys_width / 390,
|
||||
style_container: '',
|
||||
custom_height: 0,
|
||||
div_width: 0,
|
||||
div_height: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
get_percentage_count() {
|
||||
return (num, container_size) => {
|
||||
return this.percentage_count(num, container_size);
|
||||
return this.percentage_count(num * this.scale, container_size);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -66,7 +73,8 @@
|
|||
init() {
|
||||
this.setData({
|
||||
style_container: common_styles_computer(this.new_style.common_style) + 'box-sizing: border-box;', // 用于样式显示
|
||||
div_width: sys_width
|
||||
div_width: sys_width,
|
||||
div_height: this.form.height * this.scale,
|
||||
});
|
||||
},
|
||||
url_open(link) {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<block v-if="theme == '6'">
|
||||
<view :class="['flex-row align-c jc-sb ptb-15 mlr-10 gap-20', { 'br-b-e': index != list.length - 1 }]">
|
||||
<view v-if="is_show('title')" :class="text_line" :style="title_style">{{ item.title }}</view>
|
||||
<view v-if="is_show('price')" class="num nowrap" :style="'color:' + new_style.shop_price_color">
|
||||
<view v-if="is_show('price') && !isEmpty(item.min_price)" class="num nowrap" :style="'color:' + new_style.shop_price_color">
|
||||
<span class="identifying">{{ item.show_price_symbol }}</span
|
||||
><span :style="price_style">{{ item.min_price }}</span>
|
||||
<span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
|
||||
|
|
@ -31,14 +31,14 @@
|
|||
</view>
|
||||
<view v-if="!['3', '4', '5'].includes(form.theme)" class="flex-col gap-5 oh">
|
||||
<view :class="[form.is_price_solo == '1' ? 'flex-row align-c nowrap' : 'flex-col gap-5']">
|
||||
<view v-if="is_show('price')" class="num" :style="'color:' + new_style.shop_price_color">
|
||||
<view v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="'color:' + new_style.shop_price_color">
|
||||
<span class="identifying">{{ item.show_price_symbol }}</span
|
||||
><span :style="price_style">{{ item.min_price }}</span>
|
||||
<span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
|
||||
</view>
|
||||
<view v-if="show_content && is_show('original_price')" class="text-size-xss flex-row">
|
||||
<span class="original-price-left"></span
|
||||
><span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]"
|
||||
<view v-if="show_content && is_show('original_price') && !isEmpty(item.min_original_price)" class="text-size-xss flex-row">
|
||||
<img class="original-price-left" :src="form.static_img[0].url" />
|
||||
<span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]"
|
||||
>{{ item.show_original_price_symbol }}{{ item.min_original_price }}
|
||||
<block v-if="is_show('original_price_unit')">
|
||||
{{ item.show_original_price_unit }}
|
||||
|
|
@ -66,14 +66,14 @@
|
|||
</view>
|
||||
<view v-else class="flex-row align-c jc-sb">
|
||||
<view class="flex-row align-c nowrap">
|
||||
<view v-if="is_show('price')" class="num" :style="'color:' + new_style.shop_price_color">
|
||||
<view v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="'color:' + new_style.shop_price_color">
|
||||
<span class="identifying">{{ item.show_price_symbol }}</span
|
||||
><span :style="price_style">{{ item.min_price }}</span>
|
||||
<span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
|
||||
</view>
|
||||
<view v-if="show_content && is_show('original_price')" class="text-size-xss flex-row">
|
||||
<span class="original-price-left"></span
|
||||
><span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]"
|
||||
<view v-if="show_content && is_show('original_price') && !isEmpty(item.min_original_price)" class="text-size-xss flex-row">
|
||||
<img class="original-price-left" :src="form.static_img[0].url" />
|
||||
<span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]"
|
||||
>{{ item.show_original_price_symbol }}{{ item.min_original_price }}
|
||||
<block v-if="is_show('original_price_unit')">
|
||||
{{ item.show_original_price_unit }}
|
||||
|
|
@ -115,14 +115,14 @@
|
|||
</view>
|
||||
<view class="flex-row align-c jc-sb">
|
||||
<view class="flex-row align-c nowrap">
|
||||
<view v-if="is_show('price')" class="num" :style="'color:' + new_style.shop_price_color">
|
||||
<view v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="'color:' + new_style.shop_price_color">
|
||||
<span class="identifying">{{ item.show_price_symbol }}</span
|
||||
><span :style="price_style">{{ item.min_price }}</span>
|
||||
<span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
|
||||
</view>
|
||||
<view v-if="show_content && is_show('original_price')" class="text-size-xss flex">
|
||||
<span class="original-price-left"></span
|
||||
><span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]"
|
||||
<view v-if="show_content && is_show('original_price') && !isEmpty(item.min_original_price)" class="text-size-xss flex">
|
||||
<img class="original-price-left" :src="form.static_img[0].url" />
|
||||
<span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]"
|
||||
>{{ item.show_original_price_symbol }}{{ item.min_original_price }}
|
||||
<block v-if="is_show('original_price_unit')">
|
||||
{{ item.show_original_price_unit }}
|
||||
|
|
@ -427,14 +427,6 @@
|
|||
.identifying {
|
||||
font-size: 18rpx;
|
||||
}
|
||||
|
||||
// .original-price-left {
|
||||
// width: 20rpx;
|
||||
// background-image: url('/src/assets/images/components/model-goods-list/price.png');
|
||||
// background-size: 100% 100%;
|
||||
// background-repeat: no-repeat;
|
||||
// }
|
||||
|
||||
.original-price {
|
||||
background-color: #ede2c5;
|
||||
border-radius: 0;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,64 @@
|
|||
<template>
|
||||
<view class="img-outer pr oh flex-row" :style="com_style" @tap="url_open(form.icon_link)">
|
||||
<iconfont :name="'icon-' + form.icon_class" :color="form.icon_color" :size="form.icon_size"></iconfont>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { radius_computer, padding_computer, isEmpty } from '@/common/js/common/common.js';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
sourceList: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
com_style: '',
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.setData({
|
||||
form: this.value,
|
||||
});
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.setData({
|
||||
com_style: this.get_com_style(),
|
||||
});
|
||||
},
|
||||
get_com_style() {
|
||||
let style = `background-color: ${ this.form.com_bg }; ${ radius_computer(this.form.bg_radius) };transform: rotate(${this.form.icon_rotate}deg);${ padding_computer(this.form.icon_padding) };`;
|
||||
if (this.form.border_show == '1') {
|
||||
style += `border: ${this.form.border_size * 2 }rpx ${this.form.border_style} ${this.form.border_color};box-sizing: border-box;`;
|
||||
}
|
||||
if (this.form.icon_location == 'center') {
|
||||
style += `justify-content: center;`;
|
||||
} else if (this.form.icon_location == 'left') {
|
||||
style += `justify-content: flex-start;`;
|
||||
} else if (this.form.icon_location == 'right') {
|
||||
style += `justify-content: flex-end;`;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
url_open(link) {
|
||||
this.$emit('url_open', link)
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<view class="img-outer pr wh-auto ht-auto" :style="border_style" @tap="url_open(form.link)">
|
||||
<image-empty :image-src="img" :style="image_style" error-style="width: 60rpx;height: 60rpx;"></image-empty>
|
||||
<image-empty :image-src="img" :type_style="image_style" error-style="width: 60rpx;height: 60rpx;"></image-empty>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
get_border_style() {
|
||||
let style = ``;
|
||||
if (this.form.border_show == '1') {
|
||||
style += `border: ${this.form.border_size * 2}rpx ${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)};box-sizing: border-box;`;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -32,9 +32,9 @@
|
|||
},
|
||||
get_border_style() {
|
||||
if (this.form.line_settings === 'horizontal') {
|
||||
return `margin: 5px 0;border-bottom: ${this.form.line_size * 2}rpx ${this.form.line_style} ${this.form.line_color};`;
|
||||
return `margin: 10rpx 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 * 2}rpx ${this.form.line_style} ${this.form.line_color};`;
|
||||
return `margin: 0 10rpx;border-right: ${this.form.line_size * 2}rpx ${this.form.line_style} ${this.form.line_color};`;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -34,8 +34,8 @@
|
|||
</view>
|
||||
</view>
|
||||
<template v-if="form.shop_style_type != '3'">
|
||||
<view class="flex-row flex-wrap" :style="{ gap: content_outer_spacing * 2 + 'rpx' }">
|
||||
<view v-for="(item1, index1) in list" :key="index1" class="flex-row">
|
||||
<view class="flex-row flex-wrap wh-auto" :style="{ gap: content_outer_spacing * 2 + 'rpx' }">
|
||||
<view v-for="(item1, index1) in list" :key="index1" class="flex-row wh-auto">
|
||||
<view v-for="(item, index) in item1.split_list" :key="index" :class="layout_type" :style="layout_type_style + content_radius + (form.shop_style_type == '1' ? content_padding : '')" @tap="url_event(item.goods_url)">
|
||||
<template v-if="!isEmpty(item)">
|
||||
<view class="oh pr" :class="'flex-img' + form.shop_style_type">
|
||||
|
|
@ -67,13 +67,13 @@
|
|||
</view>
|
||||
<view class="flex-row align-e gap-10 jc-sb">
|
||||
<view class="flex-col gap-5">
|
||||
<view v-if="is_show('price')" class="num" :style="{ color: new_style.shop_price_color }">
|
||||
<view v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="{ color: new_style.shop_price_color }">
|
||||
<span v-if="form.shop_style_type == '1'" class="text-size-xss pr-4">秒杀价</span>
|
||||
<span class="identifying">{{ item.show_price_symbol }}</span
|
||||
><span :style="price_style">{{ item.min_price }}</span>
|
||||
<span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
|
||||
</view>
|
||||
<view v-if="is_show('original_price')" class="size-11 flex" :style="{ color: new_style.original_price_color }">
|
||||
<view v-if="is_show('original_price') && !isEmpty(item.min_original_price)" class="size-11 flex" :style="{ color: new_style.original_price_color }">
|
||||
<span class="original-price text-line-1 flex-1"
|
||||
>{{ item.show_original_price_symbol }}{{ item.min_original_price }}
|
||||
<template v-if="is_show('original_price_unit')">
|
||||
|
|
@ -130,13 +130,13 @@
|
|||
</view>
|
||||
<view class="flex-row align-e gap-10 jc-sb">
|
||||
<view class="flex-col gap-5">
|
||||
<view v-if="is_show('price')" class="num" :style="{ color: new_style.shop_price_color }">
|
||||
<view v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="{ color: new_style.shop_price_color }">
|
||||
<span v-if="form.shop_style_type == '1'" class="text-size-xss pr-4">秒杀价</span>
|
||||
<span class="identifying">{{ item.show_price_symbol }}</span
|
||||
><span :style="price_style">{{ item.min_price }}</span>
|
||||
<span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
|
||||
</view>
|
||||
<view v-if="is_show('original_price')" class="size-11 flex" :style="{ color: new_style.original_price_color }">
|
||||
<view v-if="is_show('original_price') && !isEmpty(item.min_original_price)" class="size-11 flex" :style="{ color: new_style.original_price_color }">
|
||||
<span class="original-price text-line-1 flex-1"
|
||||
>{{ item.show_original_price_symbol }}{{ item.min_original_price }}
|
||||
<template v-if="is_show('original_price_unit')">
|
||||
|
|
@ -273,7 +273,7 @@
|
|||
});
|
||||
// 先执行一次倒计时，后续的等待倒计时执行
|
||||
setTimeout(() => {
|
||||
updateCountdown();
|
||||
this.updateCountdown();
|
||||
}, 0);
|
||||
this.setData({
|
||||
intervalId: setInterval(this.updateCountdown, 1000),
|
||||
|
|
@ -364,23 +364,31 @@
|
|||
},
|
||||
updateCountdown() {
|
||||
const now = new Date();
|
||||
let endTime = this.seckill_time.endTime;
|
||||
let endTime = this.seckill_time.endTime.replace(/-/g, '/');
|
||||
if (this.seckill_time.status === 0) {
|
||||
endTime = this.seckill_time.startTime;
|
||||
endTime = this.seckill_time.startTime.replace(/-/g, '/');
|
||||
}
|
||||
const distance = new Date(endTime).getTime() - now.getTime();
|
||||
// 如果倒计时结束，显示结束信息
|
||||
if (distance <= 1000) {
|
||||
clearInterval(intervalId.value);
|
||||
clearInterval(this.intervalId);
|
||||
// 如果是待开始状态，则显示开始倒计时，并且在结束的时候根据结束时候再执行一个定时器
|
||||
if (this.seckill_time.status === 0) {
|
||||
this.seckill_time.status = 1;
|
||||
this.seckill_time.time_first_text = '距结束';
|
||||
this.setData({
|
||||
seckill_time: {
|
||||
endTime: this.seckill_time.current.time_end,
|
||||
startTime: this.seckill_time.current.time_start,
|
||||
status: 1,
|
||||
time_first_text: '距结束',
|
||||
}
|
||||
})
|
||||
// 先执行一次倒计时，后续的等待倒计时执行
|
||||
setTimeout(() => {
|
||||
this.updateCountdown();
|
||||
}, 0);
|
||||
intervalId.value = setInterval(updateCountdown, 1000);
|
||||
this.setData({
|
||||
intervalId: setInterval(this.updateCountdown, 1000),
|
||||
})
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue