czg_team/xo_user_client
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

源文件

Browse Source
This commit is contained in:
gyq
2025-04-25 09:49:53 +08:00
commit 791d82b9e3
640 changed files with 130029 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

784
components/diy/diy.vue Normal file
View File

@@ -0,0 +1,784 @@
<template>
<view :style="page_style">
<view :style="page_img_style">
<scroll-view :scroll-y="true" class="ht" @scroll="on_scroll_event" @scrolltolower="on_scroll_lower_event" @scrolltoupper="on_scroll_upper_event" lower-threshold="60" scroll-with-animation="true">
<!-- 头部小程序兼容 -->
<view class="pr header">
<componentDiyHeader :propKey="header_data.id" :propValue="header_data.com_data" :propScrollTop="head_scroll_top" @onImmersionModelCallBack="immersion_model_call_back" @onLocationBack="choice_location_back"></componentDiyHeader>
</view>
<view :style="content_padding">
<view class="content flex-col" :style="'padding-top:calc(' + (temp_is_header_top ? temp_header_top + temp_sticky_top + 'px)' : '0px)')">
<view v-for="item in tabs_data" :key="item.key">
<template v-if="item.is_enable == '1'">
<componentDiyTabs v-if="item.key == 'tabs'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propContentPadding="content_padding" :propValue="item.com_data" :propTop="get_tabs_data_prop_top" :propStickyTop="get_tabs_data_prop_sticky_top" :propIsImmersionModel="is_immersion_model && is_the_safe_distance_enabled && item.com_data.content.tabs_top_up == '1'" :propNavIsTop="is_header_top" :propTabsIsTop="true" @onComputerHeight="tabs_height_event" @onTabsTap="tabs_click_event"></componentDiyTabs>
<componentDiyTabsCarousel v-else-if="item.key == 'tabs-carousel'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propContentPadding="content_padding" :propValue="item.com_data" :propTop="get_tabs_data_prop_top" :propStickyTop="get_tabs_data_prop_sticky_top" :propIsImmersionModel="is_immersion_model && is_the_safe_distance_enabled" :propScrollTop="scroll_top" :propTabsIsTop="true" @onComputerHeight="tabs_height_event" @onTabsTap="tabs_click_event" @onVideoPlay="video_play"></componentDiyTabsCarousel>
</template>
</view>
<template v-if="is_tabs_type">
<template v-if="diy_data.length > 0">
<view v-for="(item, index) in diy_data" :key="index" :style="'margin-top:' + (['float-window'].includes(item.key) ? '0rpx;z-index:1' : -(item.com_data.style.common_style.floating_up * 2 || 0) + 'rpx;z-index:' + (!isEmpty(item.com_data.style.common_style.module_z_index) ? item.com_data.style.common_style.module_z_index : 0))">
<!-- 基础组件 -->
<template v-if="item.is_enable == '1'">
<componentDiySearch v-if="item.key == 'search'" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data"></componentDiySearch>
<componentDiyCarousel v-else-if="item.key == 'carousel'" :propOuterContainerPadding="outer_container_padding" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data" @onVideoPlay="video_play"></componentDiyCarousel>
<componentDiyNavGroup v-else-if="item.key == 'nav-group'" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data"></componentDiyNavGroup>
<componentDiyUserInfo v-else-if="item.key == 'user-info'" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data"></componentDiyUserInfo>
<componentDiyNotice v-else-if="item.key == 'notice'" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data"></componentDiyNotice>
<componentDiyVideo v-else-if="item.key == 'video'" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data"></componentDiyVideo>
<componentDiyArticleList v-else-if="item.key == 'article-list'" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data"></componentDiyArticleList>
<componentDiyArticleTabs v-else-if="item.key == 'article-tabs'" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data" :propTop="get_diy_prop_top(item.com_data)" :propScrollTop="scroll_top" :propCustomNavHeight="get_diy_custom_nav_height(item.com_data)" :propIsTabsUseSafeDistance="getPropIsTabsUseSafeDistance"></componentDiyArticleTabs>
<componentDataTabs v-else-if="item.key == 'data-tabs'" :ref="'diy_goods_buy' + index" :propIndex="get_prop_index(item)" :propDiyIndex="index" :propKey="item.id + index" :propValue="item.com_data" :propTop="get_diy_prop_top(item.com_data)" :propScrollTop="scroll_top" :propCustomNavHeight="get_diy_custom_nav_height(item.com_data)" :propIsTabsUseSafeDistance="getPropIsTabsUseSafeDistance" @goods_buy_event="goods_buy_event"></componentDataTabs>
<componentDiyGoodsTabs v-else-if="item.key == 'goods-tabs'" :ref="'diy_goods_buy' + index" :propIndex="get_prop_index(item)" :propDiyIndex="index" :propKey="item.id + index" :propValue="item.com_data" :propTop="get_diy_prop_top(item.com_data)" :propScrollTop="scroll_top" :propCustomNavHeight="get_diy_custom_nav_height(item.com_data)" :propIsTabsUseSafeDistance="getPropIsTabsUseSafeDistance" @goods_buy_event="goods_buy_event"></componentDiyGoodsTabs>
<componentDiyGoodsList v-else-if="item.key == 'goods-list'" :ref="'diy_goods_buy' + index" :propIndex="get_prop_index(item)" :propDiyIndex="index" :propKey="item.id + index" :propValue="item.com_data" @goods_buy_event="goods_buy_event"></componentDiyGoodsList>
<componentDiyDataMagic v-else-if="item.key == 'data-magic'" :propOuterContainerPadding="outer_container_padding" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data"></componentDiyDataMagic>
<componentDiyCustom v-else-if="item.key == 'custom'" :propOuterContainerPadding="outer_container_padding" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data"></componentDiyCustom>
<componentDiyImgMagic v-else-if="item.key == 'img-magic'" :propOuterContainerPadding="outer_container_padding" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data"></componentDiyImgMagic>
<componentDiyHotZone v-else-if="item.key == 'hot-zone'" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data"></componentDiyHotZone>
<componentDiySeckill v-else-if="item.key == 'seckill'" :propOuterContainerPadding="outer_container_padding" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data"></componentDiySeckill>
<!-- 插件 -->
<componentDiyCoupon v-else-if="item.key == 'coupon'" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data"></componentDiyCoupon>
<!-- 工具组件 -->
<componentDiyFloatWindow v-else-if="item.key == 'float-window'" :propKey="item.id + index" :propValue="item.com_data"></componentDiyFloatWindow>
<componentDiyTitle v-else-if="item.key == 'title'" :propKey="item.id + index" :propIndex="get_prop_index(item)" :propValue="item.com_data"></componentDiyTitle>
<componentDiyAuxiliaryLine v-else-if="item.key == 'row-line'" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data"></componentDiyAuxiliaryLine>
<componentDiyRichText v-else-if="item.key == 'rich-text'" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data"></componentDiyRichText>
<componentDiyAuxiliaryBlank v-else-if="item.key == 'auxiliary-blank'" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data"></componentDiyAuxiliaryBlank>
</template>
</view>
</template>
<!-- diy底部卡槽 -->
<slot name="diy-bottom-content"></slot>
<slot name="diy-bottom-common"></slot>
</template>
<template v-else>
<!-- 商品九宫格列表 -->
<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">
<!-- 商品购买 -->
<component-goods-buy ref="goods_buy" v-on:CartSuccessEvent="goods_cart_back_event"></component-goods-buy>
<!-- 视频播放 -->
<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" 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>
</view>
</view>
<!-- 当前diy页面底部菜单（非公共底部菜单） -->
<block v-if="is_show_footer">
<componentDiyFooter :propKey="footer_data.id" :propValue="footer_data.com_data" @onFooterHeight="footer_height_value_event"></componentDiyFooter>
<view v-if="footer_height_value > 0" :style="'height:' + footer_height_value + 'rpx;'"></view>
</block>
<!-- 底部卡槽 -->
<slot name="bottom"></slot>
</scroll-view>
</view>
</view>
</template>
<script>
const app = getApp();
import { isEmpty, common_styles_computer, background_computer, padding_computer } from '@/common/js/common/common.js';
import componentDiyHeader from '@/components/diy/header';
import componentDiyFooter from '@/components/diy/footer';
import componentDiyTabs from '@/components/diy/tabs';
import componentDiySearch from '@/components/diy/search';
import componentDiyCarousel from '@/components/diy/carousel';
import componentDiyUserInfo from '@/components/diy/user-info';
import componentDiyNotice from '@/components/diy/notice';
import componentDiyVideo from '@/components/diy/video';
import componentDiyArticleList from '@/components/diy/article-list';
import componentDiyArticleTabs from '@/components/diy/article-tabs';
import componentDiyHotZone from '@/components/diy/hot-zone';
import componentDiyCoupon from '@/components/diy/coupon';
import componentDiyFloatWindow from '@/components/diy/float-window';
import componentDiyTitle from '@/components/diy/title';
import componentDiyAuxiliaryLine from '@/components/diy/auxiliary-line';
import componentDiyRichText from '@/components/diy/rich-text';
import componentDiyAuxiliaryBlank from '@/components/diy/auxiliary-blank';
import componentDiyNavGroup from '@/components/diy/nav-group';
import componentDiyGoodsList from '@/components/diy/goods-list';
import componentDiyGoodsTabs from '@/components/diy/goods-tabs';
import componentDiyDataMagic from '@/components/diy/data-magic';
import componentDiyCustom from '@/components/diy/custom';
import componentDiyImgMagic from '@/components/diy/img-magic';
import componentDiySeckill from '@/components/diy/seckill';
import componentDiyTabsCarousel from '@/components/diy/tabs-carousel';
import componentDataTabs from '@/components/diy/data-tabs';
import componentGoodsList from '@/components/goods-list/goods-list';
import componentNoData from '@/components/no-data/no-data';
import componentBottomLine from '@/components/bottom-line/bottom-line';
import componentGoodsBuy from '@/components/goods-buy/goods-buy';
import componentSearch from '@/components/search/search';
var system = app.globalData.get_system_info(null, null, true);
var sys_width = app.globalData.window_width_handle(system.windowWidth);
// 状态栏高度
var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
// #ifdef MP-TOUTIAO
bar_height = 0;
// #endif
export default {
name: 'diy',
props: {
propValue: {
type: Object,
default: () => ({}),
},
propDataId: {
type: [String, Number],
default: '',
},
propKey: {
type: [String, Number],
default: 0,
},
},
components: {
componentDiyHeader,
componentDiyFooter,
componentDiyTabs,
componentDiySearch,
componentDiyCarousel,
componentDiyUserInfo,
componentDiyNotice,
componentDiyVideo,
componentDiyArticleList,
componentDiyArticleTabs,
componentDiyHotZone,
componentDiyCoupon,
componentDiyAuxiliaryLine,
componentDiyRichText,
componentDiyFloatWindow,
componentDiyTitle,
componentDiyAuxiliaryBlank,
componentDiyNavGroup,
componentDiyGoodsList,
componentDiyGoodsTabs,
componentDiyDataMagic,
componentDiyCustom,
componentDiyImgMagic,
componentDiySeckill,
componentDiyTabsCarousel,
componentDataTabs,
componentGoodsList,
componentNoData,
componentBottomLine,
componentGoodsBuy,
componentSearch,
},
data() {
return {
// 基础配置
currency_symbol: app.globalData.currency_symbol(),
// 是否有选项卡
is_tabs: false,
// 是否是模块数据或者是九宫格商品分类样式数据， 默认模块数据
is_tabs_type: true,
// 是否开启沉浸模式
is_immersion_model: false,
// 5,7,0 是误差，， 10 是下边距，66是高度，bar_height是不同小程序下的导航栏距离顶部的高度
// #ifdef MP
sticky_top: bar_height + 5 + 10,
// #endif
// #ifdef H5 || MP-TOUTIAO
sticky_top: bar_height + 7 + 10,
// #endif
// #ifdef APP
sticky_top: bar_height + 0 + 10,
// #endif
header_top: '',
temp_sticky_top: 0,
temp_header_top: '0px',
is_header_top: false,
temp_is_header_top: false,
scroll_top: 0,
// 选项卡高度
tabs_height: 0,
header_data: {},
footer_data: {},
// 选项卡数据
tabs_data: {},
diy_data: [],
page_style: '',
page_img_style: '',
is_show_footer: false,
tabs_home_id: this.propDataId,
// 商品列表
goods_list: [],
goods_total: 0,
goods_page_total: 0,
goods_page: 1,
// 数据展示样式（0图文、1九方格）
goods_show_type_value: 1,
// 增加随机数，避免无法监听数据列表内部数据更新
random_value: 0,
// 标签插件
plugins_label_data: null,
goods_list_loding_status: 1,
goods_list_loding_msg: '',
goods_bottom_line_status: false,
// 判断数据是否在加载中
data_is_loading: 0,
// 缓存key
cache_key: app.globalData.data.cache_diy_data_key,
// 底部导航高度
footer_height_value: 0,
// 商品ref索引
goods_index: 0,
// 视频播放逻辑
video_src: '',
popup_width: '0rpx',
popup_height: '0rpx',
// 顶部导航是否换行
is_search_alone_row: false,
data_alone_row_space: 0,
content_padding: '',
outer_container_padding: 0,
// 滚动延迟器
head_scroll_top: 0,
scroll_throttle_timeout: null,
// 是否开启安全距离
is_the_safe_distance_enabled: false,
// 是否开启置顶
is_tabs_data_topped: false,
};
},
computed: {
get_tabs_data_prop_top() {
// 开启了沉浸式时的处理
if (this.is_immersion_model) {
// 并且开启了安全距离
return this.is_the_safe_distance_enabled ? this.temp_header_top : 0;
} else {
return this.temp_header_top;
}
},
get_tabs_data_prop_sticky_top() {
// 开启了沉浸式时的处理
if (this.is_immersion_model) {
// 并且开启了安全距离
return this.is_the_safe_distance_enabled ? this.temp_sticky_top : 0;
} else {
return this.temp_sticky_top;
}
},
get_prop_index() {
return (item) => {
return this.is_the_safe_distance_enabled && this.tabs_data.length == 0 ? item.index : -1;
}
},
get_diy_prop_top() {
return (item) => {
// 不开启沉浸模式时的处理
if (!this.is_immersion_model) {
return this.temp_sticky_top + this.tabs_height;
} else {
// 开启沉浸模式且开启选项卡置顶时
if (this.is_tabs_data_topped) {
return this.tabs_height;
} else {
// 开启安全距离
let is_general_safe_distance_num = this.temp_sticky_top;
// #ifdef H5 || MP-TOUTIAO
is_general_safe_distance_num = this.is_header_top ? this.temp_sticky_top : 0
// #endif
if (this.is_the_safe_distance_enabled) {
return is_general_safe_distance_num;
} else {
if (item?.content?.is_general_safe_distance == '1') {
return is_general_safe_distance_num;
} else {
return 0;
}
}
}
}
}
},
get_diy_custom_nav_height() {
return (item) => {
let header_height = (this.is_search_alone_row ? 66 + this.data_alone_row_space : 33);
// #ifdef H5 || MP-TOUTIAO
header_height = this.is_header_top ? header_height : 0;
// #endif
// 不开启沉浸模式时的处理
if (!this.is_immersion_model) {
return header_height;
} else {
// 开启沉浸模式且开启选项卡置顶时
if (this.is_tabs_data_topped) {
return 0;
} else {
// 开启沉浸模式时并且开启安全距离
if (this.is_the_safe_distance_enabled) {
return this.is_search_alone_row ? 66 + this.data_alone_row_space : 33;
} else {
if (item?.content?.is_general_safe_distance == '1') {
return header_height;
} else {
return 0;
}
}
}
}
}
},
getPropIsTabsUseSafeDistance() {
let is_tabs_use_safe_distance = this.is_immersion_model;
// #ifdef H5 || MP-TOUTIAO
is_tabs_use_safe_distance = this.is_immersion_model && this.is_header_top;
// #endif
return is_tabs_use_safe_distance || !this.is_immersion_model;
}
},
watch: {
propKey(val) {
// 如果当前存在别的diy或者商品分类tabs则不更新数据
if ((this.tabs_id || null) == null) {
// 初始化
this.init();
}
},
},
created() {
// 初始化配置
this.init_config();
// 初始化
this.init();
},
methods: {
isEmpty,
// 初始化配置
init_config(status) {
if ((status || false) == true) {
// 是否显示底部菜单，如果当前地址已经存在系统底部菜单中则不显示当前diy页面自定义的底部菜单
var is_show_footer = parseInt(this.propValue.header.com_data.content.bottom_navigation_show || 0) == 1;
var is_tabbar = app.globalData.is_tabbar_pages();
this.setData({
is_show_footer: is_show_footer && !is_tabbar,
});
// diy页面不显示底部菜单则设置底部菜单高度为0
if(!this.is_show_footer) {
// 存储diy页面底部菜单高度
if(app.globalData.current_page(false) == 'pages/diy/diy') {
app.globalData.app_diy_tabbar_height_save(0);
}
}
} else {
app.globalData.is_config(this, 'init_config');
}
},
// 初始化
init() {
const { header = {}, diy_data = [], tabs_data = [] } = this.propValue;
// 头部的样式
let header_style = header.com_data.style;
let new_diy_index = 0;
let new_tabs_data = [];
let new_diy_data = [];
if (tabs_data.length > 0) {
tabs_data.forEach((item) => {
// 修改item的内容
item = this.get_index_content(new_diy_index, header, header_style, item);
new_tabs_data.push(item);
new_diy_index++;
});
new_diy_data = diy_data;
} else {
new_tabs_data = tabs_data;
// 过滤数据
diy_data.forEach((item) => {
// 判断是否是商品列表
if (item.com_name == 'float-window') {
item.index = -1;
} else {
// 修改item的内容
item = this.get_index_content(new_diy_index, header, header_style, item);
new_diy_data.push(item);
new_diy_index++;
}
});
}
const { padding_right = 0, padding_left = 0 } = header_style.common_style;
const new_is_search_alone_row = header.com_data.content.data_alone_row_value.length > 0 ? true : false;
const new_data_alone_row_space = parseInt(header_style.data_alone_row_space || 0);
// tabs选项卡数据过滤
this.setData({
header_data: header,
footer_data: this.propValue.footer,
diy_data: new_diy_data,
tabs_data: new_tabs_data,
page_style: common_styles_computer(header_style.common_style),
page_img_style: background_computer(header_style.common_style),
// 内间距
content_padding: `padding: 0px ${padding_right}px 0px ${padding_left}px;` + 'box-sizing:border-box;',
outer_container_padding: padding_right + padding_left,
// 判断顶部导航是否置顶
is_header_top: parseInt(header_style.up_slide_display) == 1 ? true : false,
is_tabs_data_topped: new_tabs_data[0]?.com_data?.content?.tabs_top_up == '1' || false,
temp_sticky_top: this.sticky_top,
temp_header_top: (new_is_search_alone_row ? 66 + new_data_alone_row_space : 33),
header_top: (new_is_search_alone_row ? 66 + new_data_alone_row_space : 33),
is_immersion_model: header_style.header_background_type !== 'color_image' && header_style.immersive_style == '1',
// 顶部导航高度是否变化--------------------------------------------------
is_search_alone_row: new_is_search_alone_row,
data_alone_row_space: new_data_alone_row_space,
is_immersive_style_and_general_safe_distance_value: header_style.immersive_style == '1' && header_style.general_safe_distance_value == '1',
is_the_safe_distance_enabled: header_style.immersive_style == '1' && header_style.general_safe_distance_value == '1',// diy_data是否开启安全距离
});
// 缓存数据
uni.setStorageSync(this.cache_key + this.tabs_home_id, diy_data);
},
// 顶部导航沉浸模式回调
// immersion_model_call_back(bool) {
// this.setData({
// is_immersion_model: bool,
// });
// },
get_index_content(new_diy_index, header, header_style, item) {
item.index = new_diy_index;
if (new_diy_index == 0) {
// 判断是否开启沉浸模式和是否开启安全距离 如果为true则除了选项卡和选项卡轮播外， 第一个组件则加上安全距离样式的padding_top加上顶部导航的高度和安全距离的高度
if (header_style.immersive_style == '1' && header_style.general_safe_distance_value == '1') {
let new_data = JSON.parse(JSON.stringify(item));
// 顶部导航的高度
let header_top_height = (header.com_data.content.data_alone_row_value.length > 0 ? parseInt(header.com_data.style.data_alone_row_space || 5) : 0) + 33 + (header.com_data.content.data_alone_row_value.length > 0 ? 33 : 0);
new_data.com_data.style.common_style.padding_top = parseInt(new_data.com_data.style.common_style.padding_top) + header_top_height;
return new_data;
}
return item;
}
return item;
},
// 选项卡回调更新数据
tabs_click_event(tabs_id, bool, params = {}) {
let new_data = [];
this.setData({
is_tabs_type: bool,
tabs_id: tabs_id,
});
let new_params = {
...params,
id: tabs_id,
};
if (tabs_id) {
new_data = uni.getStorageSync(this.cache_key + tabs_id) || [];
if (new_data.length > 0) {
// 先使用缓存数据展示
this.setData({
diy_data: new_data,
});
// 已有本地缓存则直接取远程有效数据（默认首次取的是远程缓存数据）
new_params['is_cache'] = 0;
}
// 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) {
new_data = data?.config.diy_data || [];
uni.setStorageSync(this.cache_key + tabs_id, new_data);
this.setData({
diy_data: new_data,
});
// 是否需要重新加载数据
if (parseInt(data.is_result_data_cache || 0) == 1) {
this.tabs_click_event(tabs_id, bool, { is_cache: 0 });
}
} else {
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);
}
} else {
if (tabs_id == '') {
new_data = uni.getStorageSync(this.cache_key + this.tabs_home_id) || [];
}
// 先使用缓存数据展示
this.setData({
diy_data: new_data,
});
}
},
// 选项卡高度
tabs_height_event(height) {
let new_tabs_height = 0;
// 判断是否有选项卡切选项卡数组数据内的字段is_enable值是否为1
if (this.tabs_data.length > 0) {
this.tabs_data.forEach((item, index) => {
if (item.is_enable == '1') {
new_tabs_height = height;
}
});
}
this.setData({
tabs_height: new_tabs_height,
});
},
// 滚动加载
on_scroll_lower_event(e) {
if (!this.is_tabs_type) {
this.get_goods_list();
}
},
// 滚动到顶部
on_scroll_upper_event() {
setTimeout(() => {
this.head_scroll_top = 0;
});
},
// 查询商品
get_goods_list(is_mandatory) {
// 分页是否还有数据
if ((is_mandatory || 0) == 0) {
if (this.goods_bottom_line_status == true) {
uni.stopPullDownRefresh();
return false;
}
}
// 是否加载中
if (this.data_is_loading == 1) {
return false;
}
this.setData({
data_is_loading: 1,
});
// 获取数据
if (this.goods_page > 1) {
uni.showLoading({
title: this.$t('common.loading_in_text'),
});
}
let new_data = {
category_id: this.tabs_id,
page: this.goods_page,
};
// 九宫格数据
uni.request({
url: app.globalData.get_request_url('datalist', 'search'),
method: 'POST',
data: new_data,
dataType: 'json',
success: (res) => {
if (this.goods_page > 1) {
uni.hideLoading();
}
uni.stopPullDownRefresh();
if (res.data.code == 0) {
var data = res.data.data;
if (data.data.length > 0) {
if (this.goods_page <= 1) {
var temp_goods_list = data.data;
} else {
var temp_goods_list = this.goods_list || [];
var temp_data = data.data;
for (var i in temp_data) {
temp_goods_list.push(temp_data[i]);
}
}
this.setData({
goods_list: temp_goods_list,
random_value: Math.random(),
goods_total: data.total,
goods_page_total: data.page_total,
goods_list_loding_status: 3,
goods_list_loding_msg: '',
goods_page: this.goods_page + 1,
data_is_loading: 0,
});
// 是否还有数据
this.setData({
goods_bottom_line_status: this.goods_page > 1 && this.goods_page > this.goods_page_total,
});
} else {
this.setData({
goods_list_loding_status: 0,
goods_list_loding_msg: res.data.msg,
goods_total: 0,
data_is_loading: 0,
});
if (this.goods_page <= 1) {
this.setData({
goods_list: [],
goods_bottom_line_status: false,
});
}
}
} else {
this.setData({
goods_list_loding_status: 0,
goods_list_loding_msg: res.data.msg,
data_is_loading: 0,
});
app.globalData.is_login_check(res.data, this, 'get_goods_list', is_mandatory);
}
},
fail: () => {
if (this.goods_page > 1) {
uni.hideLoading();
}
uni.stopPullDownRefresh();
this.setData({
goods_list_loding_status: 2,
goods_list_loding_msg: this.$t('common.internet_error_tips'),
data_is_loading: 0,
});
},
});
},
// 页面滚动事件
on_scroll_event(e) {
const scroll_num = parseInt(e.detail.scrollTop);
if (scroll_num <= 20) {
this.head_scroll_top = 0;
} else {
if (scroll_num / (this.sticky_top + 33) <= 1) {
// 更新数据的逻辑
this.head_scroll_top = scroll_num;
} else {
this.head_scroll_top = this.sticky_top + 100;
}
}
// #ifdef H5 || MP-TOUTIAO
// 判断顶部导航是否置顶
if (!this.is_header_top && !this.is_immersion_model) {
if (scroll_num >= this.sticky_top + 33 + (this.is_search_alone_row ? 0 : 33 + this.data_alone_row_space)) {
this.temp_sticky_top = 0;
this.temp_header_top = 0;
this.temp_sticky_no_h5_top = 0;
this.temp_is_header_top = true;
} else {
this.temp_header_top = this.header_top;
this.temp_sticky_top = this.sticky_top;
this.temp_sticky_no_h5_top = this.sticky_top;
this.temp_is_header_top = false;
}
}
//#endif
this.scroll_timer_compute(scroll_num);
},
scroll_timer_compute(scroll_num) {
// 使用节流技术减少事件触发的处理次数
if (!this.scroll_throttle_timeout) {
const self = this;
this.scroll_throttle_timeout = setTimeout(() => {
this.scroll_top = scroll_num;
// 清除定时器
this.scroll_throttle_timeout = null;
}, 20); // 可以根据实际情况调整延时时间
}
},
// 底部菜单高度
footer_height_value_event(value) {
this.setData({
footer_height_value: (value*2)+20,
});
// 存储diy页面底部菜单高度
if(app.globalData.current_page(false) == 'pages/diy/diy') {
app.globalData.app_diy_tabbar_height_save(value);
}
},
// 商品数量更新回调
goods_buy_event(index, goods = {}, params = {}, back_data = null) {
if ((this.$refs.goods_buy || null) != null) {
this.goods_index = index;
this.$refs.goods_buy.init(goods, params, back_data);
}
},
// 商品加购回调
goods_cart_back_event(e) {
if ((this.$refs[`diy_goods_buy${this.goods_index}`][0] || null) != null) {
this.$refs[`diy_goods_buy${this.goods_index}`][0].goods_cart_back_event(e);
}
},
// 视频播放
video_play(url, width, height) {
this.setData({
video_src: url,
popup_width: width,
popup_height: height,
});
this.$refs.popup.open();
const videoContext = uni.createVideoContext('carousel_video');
if (!isEmpty(videoContext)) {
videoContext.play();
}
},
// 视频关闭
video_close() {
const videoContext = uni.createVideoContext('carousel_video');
if (!isEmpty(videoContext)) {
videoContext.pause();
}
this.$refs.popup.close();
},
// 位置回调
choice_location_back(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></style>