Merge remote-tracking branch 'origin/dev-yxl' into dev-sws
sws
commit
25a84d3c4e
|
|
@ -4,18 +4,41 @@
|
|||
<block v-if="form.carousel_type == 'card'">
|
||||
<swiper-item v-for="(item, index) in new_list" :key="index" class="flex-row align-c">
|
||||
<view class="swiper-item" :style="img_style" :class="['scale-defalt', { 'scale-1': animationData === index }]">
|
||||
<image :src="item.carousel_img[0].url" class="img ht-auto" :style="img_style" :mode="img_fit"></image>
|
||||
<block v-if="!is_obj_empty(item.carousel_img)">
|
||||
<image :src="item.carousel_img[0].url" class="img ht-auto" :style="img_style" :mode="img_fit"></image>
|
||||
</block>
|
||||
</view>
|
||||
<view v-if="new_style.video_is_show == '1' && item.carousel_video.length > 0" :class="{'x-middle': new_style.video_location == 'center', 'right-0': new_style.video_location == 'flex-end' }" class="video-class flex-row pa gap-10 align-c oh" :style="video_style" @click="video_play(item.carousel_video)">
|
||||
<block v-if="new_style.video_type == 'img'">
|
||||
<image :src="new_style.video_img[0].url" class="video_img" mode="aspectFill"></image>
|
||||
</block>
|
||||
<block v-else>
|
||||
<iconfont :name="!is_obj_empty(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="!is_obj_empty(item.video_title)" :style="`color:${new_style.video_title_color};font-size: ${new_style.video_title_size}px;`">{{ item.video_title }}</span>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
<block v-else>
|
||||
<swiper-item v-for="(item, index) in new_list" :key="index">
|
||||
<view class="item-image flex-row jc-c align-c w h" :style="img_style">
|
||||
<image :src="item.carousel_img[0].url" class="img" :style="img_style" :mode="img_fit"></image>
|
||||
<view class="item-image flex-row jc-c align-c wh-auto ht-auto pr" :style="img_style">
|
||||
<block v-if="!is_obj_empty(item.carousel_img)">
|
||||
<image :src="item.carousel_img[0].url" class="img" :style="img_style" :mode="img_fit"></image>
|
||||
</block>
|
||||
</view>
|
||||
<view v-if="new_style.video_is_show == '1' && item.carousel_video.length > 0" :class="{'x-middle': new_style.video_location == 'center', 'right-0': new_style.video_location == 'flex-end' }" class="video-class flex-row pa gap-10 align-c oh" :style="video_style" @click="video_play(item.carousel_video)">
|
||||
<block v-if="new_style.video_type == 'img'">
|
||||
<image :src="new_style.video_img[0].url" class="video_img" mode="aspectFill"></image>
|
||||
</block>
|
||||
<block v-else>
|
||||
<iconfont :name="!is_obj_empty(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="!is_obj_empty(item.video_title)" :style="`color:${new_style.video_title_color};font-size: ${new_style.video_title_size}px;`">{{ item.video_title }}</span>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
<video :src="video_src" id="carousel_video" :autoplay="true" show-fullscreen-btn class="video_class"></video>
|
||||
<view v-if="new_style.is_show == '1'" :class="{'dot-center': new_style.indicator_location == 'center', 'dot-right': new_style.indicator_location == 'flex-end' }" class="dot flex-row pa" :style="dot_style">
|
||||
<template v-if="new_style.indicator_style == 'num'">
|
||||
<view :style="indicator_style" class="dot-item">
|
||||
|
|
@ -25,13 +48,13 @@
|
|||
<template v-else>
|
||||
<view v-for="(item, index2) in form.carousel_list" :key="index2" :style="indicator_style + (actived_index == index2 ? 'background:' + new_style.actived_color : '')" class="dot-item" />
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const app = getApp();
|
||||
import { common_styles_computer, radius_computer, is_obj_empty } from '@/common/js/common/common.js';
|
||||
import { common_styles_computer, radius_computer, is_obj_empty, gradient_computer, padding_computer } from '@/common/js/common/common.js';
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
|
|
@ -58,6 +81,8 @@
|
|||
interval_types: '',
|
||||
img_fit: '',
|
||||
dot_style: '',
|
||||
video_style: '',
|
||||
video_src: '',
|
||||
// 样式二的处理
|
||||
animation: '',
|
||||
animationData: 0,
|
||||
|
|
@ -83,6 +108,7 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
is_obj_empty,
|
||||
init() {
|
||||
const { common_style, actived_color } = this.new_style;
|
||||
// 用于样式显示
|
||||
|
|
@ -102,6 +128,8 @@
|
|||
fit = 'aspectFit';
|
||||
}
|
||||
this.img_fit = fit;
|
||||
// 视频播放按钮显示逻辑
|
||||
this.video_style = this.get_video_style();
|
||||
},
|
||||
get_indicator_style() {
|
||||
const { indicator_radius, indicator_style, indicator_size, color } = this.new_style;
|
||||
|
|
@ -157,6 +185,25 @@
|
|||
} else {
|
||||
this.actived_index = e.target.current;
|
||||
}
|
||||
},
|
||||
get_video_style() {
|
||||
const { video_bottom, video_radius, video_color_list, video_direction, video_title_color, video_padding} = this.new_style;
|
||||
let style = `bottom: ${video_bottom}px;`;
|
||||
if (!is_obj_empty(video_radius)) {
|
||||
style += radius_computer(video_radius)
|
||||
}
|
||||
const data = {
|
||||
color_list: video_color_list,
|
||||
direction: video_direction,
|
||||
}
|
||||
style += gradient_computer(data) + padding_computer(video_padding) + `color: ${video_title_color};`;
|
||||
return style;
|
||||
},
|
||||
video_play(list) {
|
||||
this.video_src = list[0].url;
|
||||
let videoContext = uni.createVideoContext('carousel_video');
|
||||
videoContext.requestFullScreen();
|
||||
videoContext.play();
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
@ -185,6 +232,7 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
height: 90%;
|
||||
|
|
@ -205,5 +253,22 @@
|
|||
|
||||
.img {
|
||||
width: 100%;
|
||||
}
|
||||
.video_img {
|
||||
max-width: 6rem;
|
||||
height: 1.4rem;
|
||||
}
|
||||
.video-class {
|
||||
max-width: 100%;
|
||||
}
|
||||
.x-middle {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.video_class {
|
||||
position: absolute;
|
||||
height: 0px;
|
||||
width: 0px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<view v-if="value.diy_data.length > 0" :style="diy_content_style">
|
||||
<view v-for="(item, index) in value.diy_data" :key="index">
|
||||
<!-- 基础组件 -->
|
||||
<!-- <componentDiySearch></componentDiySearch> -->
|
||||
<componentDiySearch v-if="item.key == 'search'" :value="item.com_data"></componentDiySearch>
|
||||
<componentCarousel v-if="item.key == 'carousel'" :value="item.com_data"></componentCarousel>
|
||||
<componentDiyUserInfo v-if="item.key == 'user-info'" :value="item.com_data"></componentDiyUserInfo>
|
||||
<componentDiyVideo v-else-if="item.key == 'video'" :value="item.com_data"></componentDiyVideo>
|
||||
|
|
|
|||
|
|
@ -43,7 +43,6 @@ export default {
|
|||
}
|
||||
const { windowHeight } = uni.getSystemInfoSync();
|
||||
this.style = `bottom: ${((offset_number / windowHeight) * 100).toFixed(4) + '%'};` + location;
|
||||
|
||||
},
|
||||
methods: {
|
||||
url_open() {
|
||||
|
|
|
|||
|
|
@ -1,14 +1,140 @@
|
|||
<template>
|
||||
<view> 这是search </view>
|
||||
<view :style="style_container">
|
||||
<view :style="style" class="flex-row align-c">
|
||||
<view class="search wh-auto pr">
|
||||
<view class="box oh flex-row align-c gap-10 bg-white" :style="box_style">
|
||||
<template v-if="form.is_icon_show == '1'">
|
||||
<template v-if="form.icon_img.length > 0">
|
||||
<view class="img-box">
|
||||
<image :src="form.icon_img[0].url" class="img" mode="aspectFill"></image>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<iconfont :name="!is_obj_empty(form.icon_class) ? 'icon-' + form.icon_class : 'icon-index-search'" size="'28rpx'" :color="new_style.icon_color"></iconfont>
|
||||
</template>
|
||||
</template>
|
||||
<span v-if="form.is_tips_show == '1'" :class="[isPageSettings ? 'text-size-xs text-line-1' : 'text-size-md text-line-1']" :style="`color: ${ new_style.tips_color }`">{{ form.tips }}</span>
|
||||
</view>
|
||||
<view v-if="form.is_search_show == '1'" class="pa search-botton h flex-row align-c jc-c" :style="search_button">
|
||||
<template v-if="form.search_type === 'text'">
|
||||
<view :class="['padding-vertical-xs text-size-xs', isPageSettings ? 'padding-horizontal' : 'padding-horizontal-lg']">{{ form.search_tips }}</view>
|
||||
</template>
|
||||
<template v-else-if="!is_obj_empty(form.search_botton_img) && form.search_botton_img.length > 0">
|
||||
<image :src="form.search_botton_img[0].url" class="img" :style="search_button_radius" mode="aspectFill"></image>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view :class="['padding-vertical-xs text-size-xs', isPageSettings ? 'padding-horizontal' : 'padding-horizontal-lg']">
|
||||
<iconfont :name="!is_obj_empty(form.search_botton_icon) ? 'icon-' + form.search_botton_icon : ''" size="'28rpx'"></iconfont>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { background_computer, common_styles_computer, gradient_computer, radius_computer, is_obj_empty } from '@/common/js/common/common.js';
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
isPageSettings: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
new_style: {},
|
||||
style: '',
|
||||
style_container: '',
|
||||
search_button_radius: '',
|
||||
box_style: '',
|
||||
search_button: '',
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.form = this.value.content;
|
||||
this.new_style = this.value.style;
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
is_obj_empty,
|
||||
init() {
|
||||
const { search_button_radius, common_style } = this.new_style;
|
||||
// 内部样式
|
||||
this.style = this.get_style();
|
||||
// 全局样式
|
||||
this.style_container = this.isPageSettings ? '' : common_styles_computer(common_style);
|
||||
// 按钮圆角
|
||||
this.search_button_radius = radius_computer(search_button_radius);
|
||||
// 搜索框设置
|
||||
this.box_style = this.get_box_style();
|
||||
// 搜索按钮显示
|
||||
this.search_button = this.get_search_button();
|
||||
},
|
||||
get_style() {
|
||||
let common_styles = '';
|
||||
if (this.new_style.text_style == 'italic') {
|
||||
common_styles += `font-style: italic`;
|
||||
} else if (this.new_style.text_style == '500') {
|
||||
common_styles += `font-weight: 500`;
|
||||
}
|
||||
return common_styles;
|
||||
},
|
||||
get_box_style() {
|
||||
let style = `border: 1px solid ${ this.new_style.search_border }; ${ radius_computer(this.new_style.search_border_radius) };`;
|
||||
if (this.form.is_center == '1') {
|
||||
style += `justify-content: center;`;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
get_search_button() {
|
||||
let style = this.search_button_radius;
|
||||
const { search_botton_color_list, search_botton_direction, search_botton_background_img_style, search_botton_background_img } = this.new_style;
|
||||
if (this.form.search_type != 'img') {
|
||||
const data = {
|
||||
color_list: search_botton_color_list,
|
||||
direction: search_botton_direction,
|
||||
background_img: search_botton_background_img,
|
||||
background_img_style: search_botton_background_img_style,
|
||||
}
|
||||
style += gradient_computer(data) + background_computer(data) + `color: ${ this.new_style.button_inner_color };`;
|
||||
}
|
||||
console.log(style);
|
||||
return style;
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<style lang="scss" scoped>
|
||||
.search {
|
||||
height: 64rpx;
|
||||
.box {
|
||||
padding: 12rpx 30rpx;
|
||||
}
|
||||
.img-box {
|
||||
height: 100%;
|
||||
min-width: 4rpx;
|
||||
max-width: 12rpx;
|
||||
}
|
||||
.search-botton {
|
||||
height: 56rpx;
|
||||
top: 4rpx;
|
||||
right: 4rpx;
|
||||
.img {
|
||||
height: 56rpx;
|
||||
min-width: 6rpx;
|
||||
max-width: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue