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

修改头部显示逻辑

master
于肖磊 2024-11-29 17:38:57 +08:00
parent dc156f5104
commit 74c6ec651a
4 changed files with 75 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
components/choice-location/choice-location.vue
View File

@ -1,22 +1,24 @@
<template> <template>
<view :class="theme_view"> <view :class="theme_view">
<view v-if="propIsShowAddressChoice" class="choice-location pr wh-auto flex-row gap-2 align-c" @tap="choose_user_location"> <view v-if="propIsShowAddressChoice" class="choice-location pr wh-auto oh" :style="propLocationContainerStyle" @tap="choose_user_location">
<view v-if="propIsLeftIconArrow" class="dis-inline-block va-m lh"> <view class="flex-row gap-2 align-c oh" :style="propLocationImgContainerStyle">
<block v-if="propLeftImgValue.length > 0"> <view v-if="propIsLeftIconArrow" class="dis-inline-block va-m lh">
<image :src="propLeftImgValue[0].url" class="dis-block" mode="heightFix"></image> <block v-if="propLeftImgValue.length > 0">
</block> <image :src="propLeftImgValue[0].url" class="dis-block" mode="heightFix"></image>
<block v-else> </block>
<iconfont :name="propLeftIconValue" :size="propIconLocationSize" propClass="lh" :color="propIconLocationColor || propBaseColor"></iconfont> <block v-else>
</block> <iconfont :name="propLeftIconValue" :size="propIconLocationSize" propClass="lh" :color="propIconLocationColor || propBaseColor"></iconfont>
</view> </block>
<view class="va-m dis-inline-block margin-left-xs text-size-md single-text text" :style="'max-width:' + propTextMaxWidth + ';color:' + (propTextColor || propBaseColor) + ';'">{{ location.text || '' }}</view> </view>
<view v-if="propIsRightIconArrow" class="va-m lh dis-inline-block margin-left-xs"> <view class="va-m dis-inline-block margin-left-xs text-size-md single-text text" :style="'max-width:' + propTextMaxWidth + ';color:' + (propTextColor || propBaseColor) + ';'">{{ location.text || '' }}</view>
<block v-if="propRightImgValue.length > 0"> <view v-if="propIsRightIconArrow" class="va-m lh dis-inline-block margin-left-xs">
<image :src="propRightImgValue[0].url" class="dis-block" mode="heightFix"></image> <block v-if="propRightImgValue.length > 0">
</block> <image :src="propRightImgValue[0].url" class="dis-block" mode="heightFix"></image>
<block v-else> </block>
<iconfont :name="propRightIconValue" :size="propIconArrowSize" propClass="lh-xs" :color="propIconArrowColor || propBaseColor"></iconfont> <block v-else>
</block> <iconfont :name="propRightIconValue" :size="propIconArrowSize" propClass="lh-xs" :color="propIconArrowColor || propBaseColor"></iconfont>
</block>
</view>
</view> </view>
</view> </view>
</view> </view>
@ -92,6 +94,14 @@
type: String, type: String,
default: 'icon-arrow-bottom', default: 'icon-arrow-bottom',
}, },
propLocationContainerStyle: {
type: String,
default: '',
},
propLocationImgContainerStyle: {
type: String,
default: '',
},
}, },
// 页面被展示 // 页面被展示
created: function () { created: function () {

38
components/diy/header.vue
View File

@ -49,9 +49,9 @@
</view> </view>
</view> </view>
<view v-else-if="['4', '5'].includes(form.content.theme)" class="flex-1 flex-row align-c gap-10"> <view v-else-if="['4', '5'].includes(form.content.theme)" class="flex-1 flex-row align-c gap-10">
<view class="flex-row align-c gap-2"> <view :class="'flex-row align-c gap-2 ' + (form.content.positioning_name_float == '1' ? 'pa z-i' : '')">
<view class="flex-1"> <view class="flex-1">
<component-choice-location :propBaseColor="form.style.position_color" :propTextDefaultName="form.content.positioning_name" :propIsLeftIconArrow="form.content.is_location_left_icon_show == '1'" :propLeftImgValue="form.content.location_left_img" :propLeftIconValue="'icon-' + form.content.location_left_icon" :propIsRightIconArrow="form.content.is_location_right_icon_show == '1'" :propRightImgValue="form.content.location_right_img" :propRightIconValue="'icon-' + form.content.location_right_icon" :propTextMaxWidth="['4'].includes(form.content.theme) ? '300rpx' : '150rpx'" @onBack="choice_location_back"></component-choice-location> <component-choice-location :propLocationContainerStyle="style_location_container" :propLocationImgContainerStyle="style_location_img_container" :propBaseColor="form.style.position_color" :propTextDefaultName="form.content.positioning_name" :propIsLeftIconArrow="form.content.is_location_left_icon_show == '1'" :propLeftImgValue="form.content.location_left_img" :propLeftIconValue="'icon-' + form.content.location_left_icon" :propIsRightIconArrow="form.content.is_location_right_icon_show == '1'" :propRightImgValue="form.content.location_right_img" :propRightIconValue="'icon-' + form.content.location_right_icon" :propTextMaxWidth="['4'].includes(form.content.theme) ? '300rpx' : '150rpx'" @onBack="choice_location_back"></component-choice-location>
</view> </view>
</view> </view>
<template v-if="['5'].includes(form.content.theme) && !is_search_alone_row"> <template v-if="['5'].includes(form.content.theme) && !is_search_alone_row">
@ -115,7 +115,7 @@
import imageEmpty from '@/components/diy/modules/image-empty'; import imageEmpty from '@/components/diy/modules/image-empty';
import componentChoiceLocation from '@/components/choice-location/choice-location'; import componentChoiceLocation from '@/components/choice-location/choice-location';
import componentBadge from '@/components/badge/badge'; import componentBadge from '@/components/badge/badge';
import { isEmpty, background_computer, gradient_computer } from '@/common/js/common/common.js'; import { isEmpty, background_computer, gradient_computer, margin_computer, padding_computer, radius_computer } from '@/common/js/common/common.js';
// 状态栏高度 // 状态栏高度
var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0)); var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
// #ifdef MP-TOUTIAO // #ifdef MP-TOUTIAO
@ -186,6 +186,9 @@
is_search_alone_row: false, is_search_alone_row: false,
is_icon_alone_row: false, is_icon_alone_row: false,
data_alone_row_space: '0rpx', data_alone_row_space: '0rpx',
// 定位设置
style_location_container: '',
style_location_img_container: '',
}; };
}, },
watch: { watch: {
@ -264,9 +267,38 @@
data_alone_row_space: new_style.data_alone_row_space * 2 + 'rpx', data_alone_row_space: new_style.data_alone_row_space * 2 + 'rpx',
is_search_alone_row: new_content.data_alone_row_value && new_content.data_alone_row_value.includes('search'), is_search_alone_row: new_content.data_alone_row_value && new_content.data_alone_row_value.includes('search'),
is_icon_alone_row: new_content.data_alone_row_value && new_content.data_alone_row_value.includes('icon'), is_icon_alone_row: new_content.data_alone_row_value && new_content.data_alone_row_value.includes('icon'),
style_location_container: this.get_style_location_container(new_style),
style_location_img_container: this.get_style_location_img_container(new_style),
}); });
this.$emit('onImmersionModelCallBack', this.is_immersion_model); this.$emit('onImmersionModelCallBack', this.is_immersion_model);
}, },
// 定位设置
get_style_location_container(new_style) {
const style = {
color_list: new_style.location_color_list,
direction: new_style.location_direction,
}
const height = 32 - new_style.location_margin.margin_top - new_style.location_margin.margin_bottom;
return gradient_computer(style) + margin_computer(new_style.location_margin) + radius_computer(new_style.location_radius) + `color: ${new_style.location_color};height: ${ height * 2}rpx;line-height: ${height * 2}rpx;`;
},
// 背景图片
get_style_location_img_container(new_style){
const { location_background_img, location_background_img_style, location_padding, location_border_direction, location_border_size, location_border_color } = new_style;
const style = {
background_img: location_background_img,
background_img_style: location_background_img_style,
}
let border = ``;
if (new_style.location_border_show == '1') {
// 边框
if (location_border_direction == 'all') {
border += `border: ${location_border_size}px solid ${location_border_color};`;
} else {
border += `border-${location_border_direction}: ${location_border_size}px solid ${location_border_color};`;
}
}
return background_computer(style) + padding_computer(location_padding) + border;
},
// 获取顶部导航高度 // 获取顶部导航高度
get_nav_height() { get_nav_height() {
const query = uni.createSelectorQuery().in(this); const query = uni.createSelectorQuery().in(this);

12
components/diy/modules/custom/model-panel.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<view class="wh-auto ht-auto re oh" :style="com_style" :data-value="form.link && form.link.page" @tap="url_event"> <view class="wh-auto ht-auto re oh" :style="com_style" :data-value="panel_url" @tap="url_event">
<div class="wh-auto ht-auto" :style="com_img_style"></div> <div class="wh-auto ht-auto" :style="com_img_style"></div>
</view> </view>
</template> </template>
@ -36,6 +36,7 @@
text_title: '', text_title: '',
text_style: '', text_style: '',
com_style: '', com_style: '',
panel_url: '',
}; };
}, },
watch: { watch: {
@ -48,10 +49,19 @@
}, },
methods: { methods: {
init() { init() {
let url = '';
if (!isEmpty(this.propValue.link)) {
url = this.propValue.link?.page || '';
} else if (!isEmpty(this.propSourceList.data)) {
url = this.propSourceList.data[this.propValue?.data_source_link] || '';
} else {
url = this.propSourceList[this.propValue?.data_source_link] || '';
}
this.setData({ this.setData({
form: this.propValue, form: this.propValue,
com_style: this.get_com_style(this.propValue, this.propScale), com_style: this.get_com_style(this.propValue, this.propScale),
com_img_style: this.get_com_img_style(this.propValue), com_img_style: this.get_com_img_style(this.propValue),
panel_url: url,
}); });
}, },
get_com_style(form, scale) { get_com_style(form, scale) {

2
components/diy/search.vue
View File

@ -127,6 +127,8 @@ export default {
let style = `background: ${ new_style?.search_bg_color || '' };border: 1px solid ${new_style.search_border}; ${radius_computer(new_style.search_border_radius)};box-sizing: border-box;`; let style = `background: ${ new_style?.search_bg_color || '' };border: 1px solid ${new_style.search_border}; ${radius_computer(new_style.search_border_radius)};box-sizing: border-box;`;
if (form.is_center == '1') { if (form.is_center == '1') {
style += `justify-content: center;`; style += `justify-content: center;`;
} else {
style += `padding-left: ${ new_style.search_padding_left ? new_style.search_padding_left : 15 }px;`;
} }
return style; return style;
}, },