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

细节优化

master
gongfuxiang 2024-10-20 21:12:19 +08:00
parent 5adac67561
commit ce8b52fefa
8 changed files with 96 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/diy/carousel.vue
View File

@ -133,8 +133,8 @@
const new_style = this.propValue.style;
// 获取当前手机的宽度
const { windowWidth } = uni.getSystemInfoSync();
// 将90%的宽度分成16份
const block = (windowWidth * 0.9) / 16;
// 将80%的宽度分成16份
const block = (windowWidth * 0.8) / 16;
const { common_style, actived_color } = new_style;
// scaleToFill 对应 fill aspectFit 对应 contain aspectFill 对应 cover

70
components/diy/diy.vue
View File

@ -1,7 +1,7 @@
<template>
<view :style="page_style">
<view :style="page_img_style">
<scroll-view :scroll-y="true" class="ht" @scroll="on_scroll_event">
<scroll-view :scroll-y="true" class="ht" @scroll="on_scroll_event" @scrolltolower="on_scroll_lower_event" lower-threshold="60">
<!-- 头部小程序兼容 -->
<view class="pr header">
<componentDiyHeader :propKey="header_data.id" :propValue="header_data.com_data" :propScrollTop="scroll_top" @onImmersionModelCallBack="immersion_model_call_back" @onLocationBack="choice_location_back"></componentDiyHeader>
@ -9,7 +9,7 @@
<view class="content flex-col" :style="'padding-top:' + (temp_is_header_top ? temp_header_top : '0')">
<view v-for="item in tabs_data" :key="item.key">
<componentDiyTabs v-if="item.key == 'tabs'" :propValue="item.com_data" :propTop="temp_header_top" :propNavIsTop="is_header_top" :propTabsIsTop="temp_is_header_top" @onComputerHeight="tabs_height_event" @onTabsTap="tabs_click_event"></componentDiyTabs>
<componentDiyTabsCarousel v-else-if="item.key == 'tabs-carousel'" :propValue="item.com_data" :propTop="temp_header_top" :propNavIsTop="is_header_top" :propTabsIsTop="temp_is_header_top" @onComputerHeight="tabs_height_event" @onTabsTap="tabs_click_event"></componentDiyTabsCarousel>
<componentDiyTabsCarousel v-else-if="item.key == 'tabs-carousel'" :propValue="item.com_data" :propTop="temp_header_top" :propNavIsTop="is_header_top" :propTabsIsTop="temp_is_header_top" @onComputerHeight="tabs_height_event" @onTabsTap="tabs_click_event" @onVideoPlay="video_play"></componentDiyTabsCarousel>
</view>
<template v-if="is_tabs_type">
<template v-if="diy_data.length > 0">
@ -45,21 +45,24 @@
</template>
<!-- diy底部卡槽 -->
<slot name="diy-bottom"></slot>
<slot name="diy-bottom-content"></slot>
<slot name="diy-bottom-common"></slot>
</template>
<template v-else>
<!-- 商品九宫格列表 -->
<scroll-view :scroll-y="true" class="scroll-box" @scrolltolower="scroll_lower" lower-threshold="60">
<view v-if="goods_list.length > 0" class="padding-horizontal-main padding-top-main oh">
<component-goods-list :propData="{ style_type: goods_show_type_value, goods_list: goods_list, random: random_value }" :propLabel="plugins_label_data" :propCurrencySymbol="currency_symbol" :propIsCartParaCurve="true"></component-goods-list>
</view>
<template v-else>
<!-- 提示信息 -->
<component-no-data :propStatus="goods_list_loding_status" :propMsg="goods_list_loding_msg"></component-no-data>
</template>
<!-- 结尾 -->
<component-bottom-line :propStatus="goods_bottom_line_status"></component-bottom-line>
</scroll-view>
<view v-if="goods_list.length > 0" class="padding-horizontal-main padding-top-main oh">
<component-goods-list :propData="{ style_type: goods_show_type_value, goods_list: goods_list, random: random_value }" :propLabel="plugins_label_data" :propCurrencySymbol="currency_symbol"></component-goods-list>
</view>
<view v-else class="pr">
<!-- 提示信息 -->
<component-no-data :propStatus="goods_list_loding_status" :propMsg="goods_list_loding_msg" propLoadingLogoTop="30%"></component-no-data>
</view>
<!-- diy底部卡槽 -->
<template v-if="goods_bottom_line_status">
<slot name="diy-bottom-content"></slot>
</template>
<slot name="diy-bottom-common"></slot>
</template>
<view class="z-i-deep">
@ -68,8 +71,8 @@
<!-- 视频播放 -->
<uni-popup ref="popup" type="center" border-radius="20rpx" :mask-click="false">
<view class="flex-col align-c jc-c gap-10">
<video :src="video_src" id="carousel_video" :autoplay="true" :controls="true" :loop="true" show-fullscreen-btn class="radius-md" :style="{ width: popup_width, height: popup_height }"></video>
<iconfont name="icon-qiandao-tancguanbi" size="56rpx" color="#666" propContainerDisplay="flex" @tap="video_close"></iconfont>
<video :src="video_src" id="carousel_video" :autoplay="true" :controls="true" show-fullscreen-btn class="radius-md" :style="{ width: popup_width, height: popup_height }"></video>
<iconfont name="icon-qiandao-tancguanbi" size="56rpx" color="#ccc" propContainerDisplay="flex" @tap="video_close"></iconfont>
</view>
</uni-popup>
</view>
@ -249,8 +252,11 @@
},
watch: {
propKey(val) {
// 初始化
this.init();
// 如果当前存在别的diy或者商品分类tabs则不更新数据
if((this.tabs_id || null) == null) {
// 初始化
this.init();
}
},
},
created() {
@ -358,12 +364,17 @@
}
// diy数据
if (bool) {
uni.showLoading({
title: this.$t('common.loading_in_text'),
mask: true
});
uni.request({
url: app.globalData.get_request_url('index', 'diy'),
method: 'POST',
data: new_params,
dataType: 'json',
success: (res) => {
uni.hideLoading();
// 数据处理
let data = res.data.data.data;
if (res.data.code == 0) {
@ -380,10 +391,17 @@
app.globalData.showToast(res.data.msg);
}
},
fail: () => {
uni.hideLoading();
app.globalData.showToast(this.$t('common.internet_error_tips'));
},
});
} else {
this.setData({
goods_page: 1,
goods_list: [],
goods_list_loding_status: 1,
goods_bottom_line_status: false,
});
this.get_goods_list(1);
}
@ -405,8 +423,10 @@
},
// 滚动加载
scroll_lower(e) {
this.get_goods_list();
on_scroll_lower_event(e) {
if(!this.is_tabs_type) {
this.get_goods_list();
}
},
// 查询商品
@ -578,14 +598,16 @@
},
// 位置回调
choice_location_back(e) {
this.$emit('onLocationBack', e);
// 如果存在tabs_id则表示当前有选择tab数据则仅当前模块更新，无需给上级回调位置
if((this.tabs_id || null) == null) {
this.$emit('onLocationBack', e);
} else {
this.tabs_click_event(this.tabs_id, this.is_tabs_type);
}
},
},
};
</script>
<style lang="scss" scoped>
.search-popup {
z-index: 100 !important;
}
</style>

4
components/diy/goods-list.vue
View File

@ -204,8 +204,7 @@
return {
form: {},
new_style: {},
is_show_cart: false,
propIsCartParaCurve: true,
propIsCartParaCurve: false,
list: [],
content_radius: '', // 圆角设置
content_img_radius: '', // 图片圆角设置
@ -296,7 +295,6 @@
button_style: this.trends_config(new_style, 'button', 'gradient'),
simple_desc: this.trends_config(new_style, 'simple_desc', 'desc'),
shop_content_list: this.get_shop_content_list(new_list, new_form),
is_show_cart: new_form.shop_button_effect == '1',
});
},
get_shop_content_list(list, form) {

60
components/diy/modules/tabs-view.vue
View File

@ -1,6 +1,6 @@
<template>
<!-- 文章列表 66rpx是自定义顶部导航栏的高度-->
<uv-sticky :disabled="!propIsTop" :offset-top="propTop" :zIndex="propZIndex" :customNavHeight="custom_nav_height">
<!-- 66rpx是自定义顶部导航栏的高度-->
<uv-sticky :disabled="!propIsTop" :offset-top="propTop" :zIndex="propZIndex" :customNavHeight="propCustomNavHeight">
<view class="tabs-view flex-row gap-10 jc-sb align-c" :style="propStyle + propTabsBackground">
<view class="tabs flex-1 flex-width">
<scroll-view :scroll-x="true" :show-scrollbar="false" :scroll-with-animation="true" :scroll-into-view="'one-nav-item-' + active_index" class="wh-auto">
@ -10,7 +10,7 @@
<image v-if="!isEmpty(item.img)" :src="item.img[0].url" class="img" mode="widthFix" />
<view class="title" :style="index == active_index ? tabs_theme_style.tabs_title_checked : tabs_theme_style.tabs_title">{{ item.title }}</view>
<view class="desc" :style="tabs_theme_index == '1' && index == active_index ? tabs_check : ''">{{ item.desc }}</view>
<iconfont v-if="tabs_theme_index == '3' && index == active_index" name="icon-checked-smooth" class="icon" :style="tabs_theme_index == '3' && index == active_index ? icon_tabs_check : ''"></iconfont>
<iconfont v-if="tabs_theme_index == '3' && index == active_index" name="icon-checked-smooth" class="icon" :style="tabs_theme_index == '3' && index == active_index ? icon_tabs_check : ''" propContainerDisplay="flex"></iconfont>
<view class="bottom_line" :class="tabs_bottom_line_theme" :style="tabs_check"></view>
</view>
</view>
@ -19,14 +19,15 @@
</view>
<iconfont v-if="propIsTabsIcon" :name="'icon-' + icon.more_icon_class || 'category-more'" :size="icon.more_icon_size + '' || '14'" :color="icon.more_icon_color || '#000'" propContainerDisplay="flex" @click="category_check_event"></iconfont>
</view>
<componentPopup :propShow="popup_status" :propIsBar="propIsBar" propPosition="top" :propMask="true" :propTop="tabs_top" @onclose="quick_close_event">
<!-- 选项卡更多弹窗 -->
<componentPopup :propShow="popup_status" :propIsBar="propIsBar" propPosition="top" :propMask="true" :propTop="propTop" @onclose="quick_close_event">
<view class="padding-vertical-lg">
<view class="padding-left-main padding-bottom-main">{{ $t('recommend-form.recommend-form.7gc30l') }}</view>
<view class="divider-b">
<view class="nav-list-more">
<view class="flex-row flex-wrap align-c">
<view v-for="(item, index) in tabs_list" :key="index" class="item tc cr-base cp text-size-xs" :data-index="index" @tap="handle_event">
<view class="dis-inline-block padding-vertical-xs padding-horizontal-sm round" :class="active_index == index ? 'bg-main border-color-main cr-white' : ''">
<view class="dis-inline-block padding-vertical-xs padding-horizontal round" :class="active_index == index ? 'bg-main border-color-main cr-white' : ''">
{{ item.title }}
</view>
</view>
@ -68,11 +69,6 @@
type: Boolean,
default: false,
},
// 粘性定位距离顶部的高度
propTop: {
type: Number,
default: 0,
},
// 指定样式
propStyle: {
type: String,
@ -93,6 +89,11 @@
type: String,
default: 'transparent',
},
// 置顶距离顶部高度
propTop: {
type: [String,Number],
default: '0',
},
},
components: {
componentPopup,
@ -118,28 +119,11 @@
// 过滤弹窗
popup_status: false,
propIsBar: false,
// 5,7,0 是误差，， 12 是下边距，60是高度，bar_height是不同小程序下的导航栏距离顶部的高度
// #ifdef MP
tabs_top: 'calc(' + (bar_height + 5 + 12) + 'px + 66rpx);',
// #endif
// #ifdef H5 || MP-TOUTIAO
tabs_top: 'calc(' + (bar_height + 7 + 12) + 'px+ 66rpx);',
// #endif
// #ifdef APP
tabs_top: 'calc(' + (bar_height + 0 + 12) + 'px+ 66rpx);',
// #endif
custom_nav_height: '66rpx',
tabs_bottom_line_theme: '',
};
},
mounted() {
this.init();
// 延迟执行，等待dom渲染完成
this.$nextTick(() => {
this.setData({
custom_nav_height: this.propCustomNavHeight,
});
});
},
methods: {
// 判断是否为空
@ -175,18 +159,14 @@
},
// 获取选项卡主题
get_tabs_theme(data) {
switch (data.tabs_theme) {
case '1':
return 'tabs-style-2';
case '2':
return 'tabs-style-3';
case '3':
return 'tabs-style-4';
case '4':
return 'tabs-style-5';
default:
return 'tabs-style-1';
}
let arr = {
'1': 'tabs-style-2',
'2': 'tabs-style-3',
'3': 'tabs-style-4',
'4': 'tabs-style-5',
};
let value = arr[data.tabs_theme];
return value === undefined ? 'tabs-style-1' : value;
},
// 选中的背景渐变色样式
tabs_check_computer(data) {
@ -252,7 +232,7 @@
position: absolute;
left: 0;
right: 0;
bottom: -10rpx;
bottom: 0;
display: none;
}
.icon {

11
components/diy/tabs-carousel.vue
View File

@ -2,7 +2,7 @@
<view class="flex-col ou" :style="style_container">
<view class="ou" :style="style_img_container">
<componentDiyTabs :propValue="propValue" :propTop="propTop" :propNavIsTop="propNavIsTop" :propTabsIsTop="propTabsIsTop" @onComputerHeight="tabs_height_event" @onTabsTap="tabs_click_event"></componentDiyTabs>
<componentDiycarousel :propValue="propValue" :propIsCommon="false"></componentDiycarousel>
<componentDiycarousel :propValue="propValue" :propIsCommon="false" @onVideoPlay="video_play"></componentDiycarousel>
</view>
</view>
</template>
@ -24,7 +24,7 @@
},
},
propTop: {
type: Number,
type: [String,Number],
default: 0,
},
// 是否导航栏置顶
@ -86,12 +86,19 @@
top_up: new_content.tabs_top_up,
});
},
// tab点击
tabs_click_event(tabs_id, is_micro_page) {
this.$emit('onTabsTap', tabs_id, is_micro_page);
},
// tab高度
tabs_height_event(height) {
this.$emit('onComputerHeight', height);
},
// 视频播放
video_play(url, popup_width, popup_height) {
console.log(url, popup_width, popup_height)
this.$emit('onVideoPlay', url, popup_width, popup_height);
},
},
};
</script>

20
components/diy/tabs.vue
View File

@ -1,10 +1,10 @@
<template>
<!-- 选项卡 -->
<view class="tabs pr">
<view class="tabs-container pr">
<view :class="top_up == '1' ? 'tabs-top' : ''" :style="tabs_top_style">
<view class="tabs-content wh-auto bs-bb" :style="style_container">
<view class="wh-auto bs-bb" :style="style_img_container">
<componentDiyModulesTabsView :propValue="tabs_data" :propIsTabsIcon="true" :propStyle="propStyle" @onTabsTap="tabs_click_event"></componentDiyModulesTabsView>
<componentDiyModulesTabsView :propValue="tabs_data" :propIsTabsIcon="true" :propTop="propTop" :propStyle="propStyle" @onTabsTap="tabs_click_event"></componentDiyModulesTabsView>
</view>
</view>
</view>
@ -29,7 +29,7 @@
},
// 置顶距离顶部高度
propTop: {
type: String,
type: [String,Number],
default: '0',
},
// 是否导航栏置顶
@ -66,8 +66,6 @@
top_up: '0',
// 置顶时，选项卡高度
tabs_seat_height: 0,
// 置顶时，选项卡距离顶部高度
// tabs_padding_top: 0,
// 置顶时，选项卡样式
tabs_top_style: '',
};
@ -125,18 +123,17 @@
style_img_container: common_img_computer(new_style.common_style),
tabs_top_style: new_tabs_top_style,
// 判断是否置顶
top_up: new_top_up,
// tabs_padding_top: this.propNavIsTop || this.propTabsIsTop ? other_style : '0',
top_up: new_top_up
});
},
// 获取选项卡高度
get_tabs_height() {
if (this.top_up == '1') {
const query = uni.createSelectorQuery();
// 选择我们想要的元素
const query = uni.createSelectorQuery();
query
.in(this)
.select('.tabs-content')
.select('.tabs-top')
.boundingClientRect((res) => {
if ((res || null) != null) {
// data包含元素的宽度、高度等信息
@ -145,8 +142,7 @@
});
this.$emit('onComputerHeight', this.tabs_seat_height);
}
})
.exec(); // 执行查询
}).exec();
} else {
this.$emit('onComputerHeight', 0);
}
@ -173,7 +169,7 @@
</script>
<style lang="scss" scoped>
.tabs {
.tabs-container {
z-index: 3;
.tabs-top {
position: fixed;

8
pages/diy/diy.vue
View File

@ -3,11 +3,13 @@
<block v-if="(data || null) != null">
<!-- diy模块 -->
<componentDiy :propValue="data.config" :propDataId="data.id" @onLocationBack="user_back_choice_location">
<template slot="diy-bottom">
<!-- 底部内容 -->
<template slot="diy-bottom-content">
<!-- 结尾 -->
<component-bottom-line :propStatus="data_bottom_line_status"></component-bottom-line>
<!-- 公共 -->
</template>
<!-- 底部公共 -->
<template slot="diy-bottom-common">
<component-common ref="common"></component-common>
</template>
</componentDiy>

9
pages/index/index.vue
View File

@ -5,14 +5,15 @@
<block v-if="data_mode == 3">
<block v-if="data_list !== null">
<componentDiy :propValue="data_list.config" :propDataId="data_list.id" :propKey="random_value" @onLocationBack="user_back_choice_location">
<template slot="diy-bottom">
<!-- 底部内容 -->
<template slot="diy-bottom-content">
<!-- 结尾 -->
<component-bottom-line :propStatus="data_bottom_line_status"></component-bottom-line>
<!-- 版权信息 -->
<component-copyright></component-copyright>
<!-- 公共 -->
</template>
<!-- 底部公共 -->
<template slot="diy-bottom-common">
<component-common ref="common" :propIsGrayscale="plugins_mourning_data_is_app"></component-common>
</template>
</componentDiy>