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

弹窗组件适配底部菜单

master
gongfuxiang 2024-09-27 01:04:54 +08:00
parent bf04bcd934
commit 91dfe59177
4 changed files with 19 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/cart/cart.vue
View File

@ -264,10 +264,7 @@
<view class="cr-red"> {{ item.tips }}</view>
</view>
</view>
</view>
<!-- 底部占位 -->
<view v-if="(footer_seat_style || null) != null" :style="footer_seat_style"></view>
</view>
</view>
</component-popup>
@ -313,10 +310,7 @@
</block>
<block v-else>
<view class="cr-grey tc padding-top-xl padding-bottom-xxxl">{{ $t('cart.cart.h63814') }}</view>
</block>
<!-- 底部占位 -->
<view v-if="(footer_seat_style || null) != null" :style="footer_seat_style"></view>
</block>
</view>
</view>
</component-popup>

7
components/goods-buy/goods-buy.vue
View File

@ -1,7 +1,7 @@
<template>
<view :class="theme_view" class="z-i-deep">
<component-popup :propShow="popup_status" propPosition="bottom" @onclose="popup_close_event" :propIndex="propIndex">
<view class="goods-spec-choice-container padding-main bg-white pr" :style="goods_spec_choice_content_style">
<view class="goods-spec-choice-container padding-main bg-white pr">
<view class="close fr oh">
<view class="fr" @tap.stop="popup_close_event">
<iconfont name="icon-close-o" size="28rpx" color="#999"></iconfont>
@ -81,7 +81,6 @@
params: {},
back_data: {},
popup_status: false,
goods_spec_choice_content_style: '',
goods_spec_base_price: 0,
goods_spec_base_original_price: 0,
goods_spec_base_inventory: 0,
@ -165,16 +164,12 @@
}
}
// 底部菜单高度
var tabbar_height = app.globalData.is_tabbar_pages() ? app.globalData.app_tabbar_height_value() : 0;
// 设置数据
this.setData({
popup_status: status,
params: params || {},
back_data: back_data,
goods: goods || {},
goods_spec_choice_content_style: 'padding-bottom:'+((tabbar_height*2)+40)+'rpx',
goods_spec_choose: goods_spec_choose,
goods_spec_base_price: goods.price,
goods_spec_base_original_price: goods.original_price || 0,

2
components/nav-more/nav-more.vue
View File

@ -6,7 +6,7 @@
</view>
<!-- 弹窗 -->
<component-popup :propShow="popup_status" :propIsBar="propIsBar" propPosition="top" :propMask="true" :propTop="propTop" @onclose="quick_close_event">
<view class="padding-vertical-lg">
<view class="padding-top-lg">
<view class="padding-left-main padding-bottom-main">{{ $t('recommend-form.recommend-form.7gc30l') }}</view>
<view class="divider-b">
<slot></slot>

30
components/popup/popup.vue
View File

@ -2,7 +2,7 @@
<view :class="theme_view + ' ' + propMostClass">
<view :class="'popup ' + (propClassname || '') + ' ' + (propShow ? 'popup-show' : 'popup-hide') + ' ' + (propAnimation ? 'animation' : '')" :disable-scroll="propDisablescroll">
<view class="popup-mask" :style="'z-index: ' + propIndex + ';'" v-if="propMask" @tap="on_mask_tap"></view>
<view :class="'popup-content popup-' + (propPosition || 'bottom') + ' ' + (propIsRadius ? '' : 'popup-radius-0') + ' ' + (propIsBar ? 'popup-bar' : '') + ' ' + (propPosition === 'bottom' ? 'bottom-line-exclude' : '')" :style="position_style">
<view :class="'popup-content popup-' + (propPosition || 'bottom') + ' ' + (propIsRadius ? '' : 'popup-radius-0') + ' ' + (propIsBar ? 'popup-bar' : '') + ' ' + (propPosition === 'bottom' ? 'bottom-line-exclude' : '')" :style="popup_content_style+this.propStyle">
<slot></slot>
</view>
</view>
@ -13,8 +13,8 @@
export default {
data() {
return {
theme_view: app.globalData.get_theme_value_view(),
popup_content_left_value: 'auto',
theme_view: app.globalData.get_theme_value_view(),
popup_content_style: '',
};
},
components: {},
@ -80,18 +80,12 @@
watch: {
// 监听状态
propShow(value, old_value) {
this.left_handle();
},
},
computed: {
position_style() {
let style = 'left:' + this.popup_content_left_value + ';' + (this.propTop ? 'top:' + this.propTop : '') + ';' + (this.propBottom ? 'bottom:' + this.propBottom : '') + ';' + this.propStyle;
return style;
this.init_handle();
},
},
// 组建创建
created: function () {
this.left_handle();
this.init_handle();
},
methods: {
// 事件处理
@ -104,8 +98,12 @@
{}
);
},
// 左边距位置处理
left_handle() {
// 初初始化处理
init_handle() {
// 弹窗从底部弹出，获取底部菜单高度、如果当前为底部菜单页面则增加底部间距
var tabbar_height = (this.propPosition == 'bottom' && app.globalData.is_tabbar_pages()) ? ((app.globalData.app_tabbar_height_value()*2)+20) : 0;
// 左边距位置处理
var left = 0;
// #ifdef H5
// 处理内容左边距、避免父级设置内边距影响
@ -113,8 +111,10 @@
if (width > 800) {
left = (width - 800) / 2;
}
// #endif
this.popup_content_left_value = left + 'px';
// #endif
this.setData({
popup_content_style: 'left:' + left + ';' + (this.propTop ? 'top:' + this.propTop : '') + ';' + (this.propBottom ? 'bottom:' + this.propBottom : '') + ';padding-bottom:'+tabbar_height+'rpx;',
});
},
},
};