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

1.diy---header

master
sws 2024-09-24 15:10:26 +08:00
parent 78e74c3c8f
commit 0f4039691b
4 changed files with 45 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
common/css/lib.css
View File

@ -945,6 +945,10 @@
/**
* gap
*/
.gap-2 {
gap: 4rpx;
}
.gap-4 {
gap: 8rpx;
}

51
components/diy/header.vue
View File

@ -5,33 +5,35 @@
<view class="roll pr z-i" :style="roll_style">
<view class="model-head tc pr padding-horizontal-sm flex-row align-c">
<view class="flex-row align-c jc-sb gap-16 wh-auto padding-horizontal-main pr">
<view v-if="['1', '2', '3'].includes(form.theme)" class="flex-1 flex-row align-c jc-c ht-auto gap-16" :style="text_style + 'justify-content:' + form.indicator_location || 'center'">
<template v-if="['2', '3'].includes(form.theme)">
<view class="logo-outer-style"><image-empty v-model="form.logo[0]" class="logo-style" error-img-style="width:2rem;height:2rem;"></image-empty></view>
<view v-if="['1', '2', '3'].includes(form.content.theme)" class="flex-1 flex-row align-c jc-c ht-auto gap-16" :style="text_style + 'justify-content:' + form.content.indicator_location || 'center'">
<template v-if="['2', '3'].includes(form.content.theme)">
<view class="logo-outer-style">
<image-empty :image-src="form.content.logo[0].url" class="logo-style" error-style="width:40rpx;height:40rpx;"></image-empty>
</view>
</template>
<view v-if="['1', '2'].includes(form.theme)">{{ form.title }}</view>
<template v-if="['3', '5'].includes(form.theme)">
<view v-if="['1', '2'].includes(form.content.theme)">{{ form.content.title }}</view>
<template v-if="['3', '5'].includes(form.content.theme)">
<view class="flex-1">
<componentDiySearch :value="value.com_data" :is-page-settings="true"></componentDiySearch>
<componentDiySearch :value="form" :is-page-settings="true"></componentDiySearch>
</view>
</template>
</view>
<view v-else-if="['4', '5'].includes(form.theme)" class="flex-1 flex-row align-c h gap-10">
<view class="flex-row gap-2">
<iconfont name="icon-position" size="12" color="0"></iconfont>
<span class="size-14 cr-3 text-line-1">{{ form.positioning_name }}</span>
<iconfont v-if="'icon-' + form.is_arrows_show == '1'" name="arrow-right" size="12" color="0"></iconfont>
<view v-else-if="['4', '5'].includes(form.content.theme)" class="flex-1 flex-row align-c h gap-10">
<view class="flex-row align-c gap-2">
<iconfont name="icon-location" size="12" color="0"></iconfont>
<span class="size-14 cr-3 text-line-1">{{ form.content.positioning_name }}</span>
<iconfont v-if="form.content.is_arrows_show == '1'" name="icon-arrow-right" size="24rpx" color="#000"></iconfont>
</view>
<template v-if="['5'].includes(form.theme)">
<template v-if="['5'].includes(form.content.theme)">
<view class="flex-1">
<componentDiySearch :value="value.com_data" :is-page-settings="true"></componentDiySearch>
<componentDiySearch :value="form" :is-page-settings="true"></componentDiySearch>
</view>
</template>
</view>
<view v-if="!isEmpty(form.icon_setting)" class="flex-row align-c pa right-0 padding-right-main" :style="{ gap: new_style.img_space * 2 + 'rpx' }">
<view v-for="(item, index) in form.icon_setting" :key="index" :style="{ width: new_style.img_size * 2 + 'rpx', height: new_style.img_size * 2 + 'rpx' }">
<image-empty v-if="item.img.length > 0" v-model="item.img[0]" :error-img-style="'width: ' + Number(new_style.img_size) / 4 + 'rpx;height:' + Number(new_style.img_size) / 4 + 'rpx;'"></image-empty>
<iconfont v-else :name="'icon-' + item.icon" :size="new_style.img_size / 2 + ''" color="6"></iconfont>
<view v-if="!isEmpty(form.content.icon_setting)" class="flex-row align-c" :class="['1'].includes(form.content.theme) ? 'pa right-0 padding-right-main' : ''" :style="{ gap: form.style.img_space * 2 + 'rpx' }">
<view v-for="(item, index) in form.content.icon_setting" :key="index" :style="{ width: form.style.img_size * 2 + 'rpx', height: form.style.img_size * 2 + 'rpx' }">
<image-empty v-if="item.img.length > 0" :image-src="item.img[0].url" :error-style="'width: ' + Number(form.style.img_size) * 2 + 'rpx;height:' + Number(form.style.img_size) * 2 + 'rpx;'"></image-empty>
<iconfont v-else :name="'icon-' + item.icon" :size="form.style.img_size + 'rpx'" color="#666"></iconfont>
</view>
</view>
</view>
@ -45,6 +47,7 @@
<script>
const app = getApp();
import componentDiySearch from '@/components/diy/search';
import imageEmpty from '@/components/diy/modules/image-empty';
import { isEmpty, background_computer, gradient_computer } from '@/common/js/common/common.js';
// 状态栏高度
var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
@ -60,6 +63,7 @@
},
components: {
componentDiySearch,
imageEmpty,
},
data() {
return {
@ -71,7 +75,7 @@
text_style: '',
};
},
mounted() {
created() {
this.init();
},
methods: {
@ -92,8 +96,7 @@
new_roll_style += `background: transparent;`;
}
this.setData({
form: new_content,
new_style: new_style,
form: this.value,
position: (new_style.up_slide_display == '1' ? 'position:absolute;' : 'position:relative;') + 'top:' + bar_height + 'rpx;',
roll_style: new_roll_style,
text_style: `font-weight:${new_style.header_background_title_typeface}; font-size: ${new_style.header_background_title_size * 2}rpx; color: ${new_style.header_background_title_color};`,
@ -137,12 +140,8 @@
.logo-outer-style {
height: 64rpx;
.logo-style {
max-height: 64rpx;
max-width: 100%;
:deep(.image-slot) {
height: 64rpx;
width: 64rpx;
}
height: 64rpx;
width: 64rpx;
}
}
</style>

14
components/diy/modules/image-empty.vue
View File

@ -27,7 +27,7 @@
type_class: {
type: String,
default: () => '',
}
},
},
data() {
return {
@ -37,7 +37,7 @@
defaultImage: '/static/images/common/image-empty.png',
};
},
mounted() {
created() {
this.init();
},
methods: {
@ -50,14 +50,14 @@
if (img_url == undefined || img_url == null || img_url == '') {
this.setData({
empty_outer_style: 'background: #f4fcff;display:flex;align-items: center;justify-content: center;',
empty_style: `${ this.errorStyle }`
})
empty_style: `${this.errorStyle}`,
});
img_url = this.defaultImage;
}
this.setData({
imageUrl: img_url
})
}
imageUrl: img_url,
});
},
},
};
</script>

15
components/diy/search.vue
View File

@ -6,7 +6,7 @@
<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>
<image :src="form.icon_img[0].url" class="img" mode="heightFix"></image>
</view>
</template>
<template v-else>
@ -20,7 +20,7 @@
<view :class="['padding-vertical-xs text-size-xs', isPageSettings ? 'padding-horizontal' : 'padding-horizontal-lg']">{{ form.search_tips }}</view>
</template>
<template v-else-if="!isEmpty(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>
<image :src="form.search_botton_img[0].url" class="img" :style="search_button_radius" mode="heightFix"></image>
</template>
<template v-else>
<view :class="['padding-vertical-xs text-size-xs', isPageSettings ? 'padding-horizontal' : 'padding-horizontal-lg']">
@ -64,11 +64,13 @@
form: this.value.content,
new_style: this.value.style,
});
console.log(this.value);
this.init();
},
methods: {
isEmpty,
init() {
console.log(this.new_style);
const { search_button_radius, common_style } = this.new_style;
this.setData({
style: this.get_style(), // 内部样式
@ -114,14 +116,15 @@
<style lang="scss" scoped>
.search {
height: 64rpx;
.box {
padding: 12rpx 30rpx;
}
.img-box {
height: 100%;
min-width: 4rpx;
max-width: 12rpx;
.img {
height: 36rpx;
display: block;
}
}
.search-botton {
height: 56rpx;
@ -134,4 +137,4 @@
}
}
}
</style>
</style>