159 lines
4.1 KiB
Vue
159 lines
4.1 KiB
Vue
<template>
|
|
<page-meta :page-style="themeColor"></page-meta>
|
|
<view>
|
|
<block v-if="diyData">
|
|
<block v-for="(item, index) in diyData.value" :key="index">
|
|
<view v-if="item.componentName == 'GoodsCategory'">
|
|
<diy-category @tologin="toLogin" ref="category" :value="item"></diy-category>
|
|
</view>
|
|
</block>
|
|
</block>
|
|
|
|
<ns-login ref="login"></ns-login>
|
|
|
|
<loading-cover ref="loadingCover"></loading-cover>
|
|
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<!-- 小程序隐私协议 -->
|
|
<privacy-popup ref="privacyPopup"></privacy-popup>
|
|
<!-- #endif -->
|
|
|
|
<!-- 底部tabBar -->
|
|
<view id="tab-bar">
|
|
<diy-bottom-nav></diy-bottom-nav>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
diyData: null,
|
|
// 新增：标记是否已监听语言事件，避免重复监听
|
|
langListenerAdded: false
|
|
};
|
|
},
|
|
onLoad() {
|
|
//刷新多语言
|
|
this.$langConfig.refresh();
|
|
uni.hideTabBar();
|
|
this.getDiyInfo();
|
|
// 新增：监听全局语言切换事件
|
|
this.addLangListener();
|
|
},
|
|
onShow() {
|
|
if (this.$refs.category) this.$refs.category[0].pageShow();
|
|
},
|
|
onUnload() {
|
|
if (!this.storeToken && this.$refs.login) this.$refs.login.cancelCompleteInfo();
|
|
// 新增：页面销毁时移除语言监听，避免内存泄漏
|
|
this.removeLangListener();
|
|
},
|
|
methods: {
|
|
// 新增：添加语言切换监听（封装为方法，避免重复监听）
|
|
addLangListener() {
|
|
if (!this.langListenerAdded) {
|
|
uni.$on('lang-changed', this.handleLangChange);
|
|
this.langListenerAdded = true;
|
|
}
|
|
},
|
|
// 新增：移除语言切换监听
|
|
removeLangListener() {
|
|
if (this.langListenerAdded) {
|
|
uni.$off('lang-changed', this.handleLangChange);
|
|
this.langListenerAdded = false;
|
|
}
|
|
},
|
|
// 新增：语言切换后的处理逻辑
|
|
handleLangChange() {
|
|
// 1. 刷新多语言配置（确保语言包生效）
|
|
this.$langConfig.refresh();
|
|
// 2. 显示加载遮罩，提升用户体验
|
|
if (this.$refs.loadingCover) this.$refs.loadingCover.show();
|
|
// 3. 重新请求分类数据（核心：获取对应语言的分类内容）
|
|
this.getDiyInfo();
|
|
},
|
|
getDiyInfo() {
|
|
this.$api.sendRequest({
|
|
url: '/api/diyview/info',
|
|
data: {
|
|
name: 'DIY_VIEW_GOODS_CATEGORY'
|
|
},
|
|
// 新增：请求头携带当前语言，让后端返回对应语言的分类数据
|
|
header: {
|
|
'lang': uni.getStorageSync('lang') || 'zh-cn'
|
|
},
|
|
success: res => {
|
|
if (res.code == 0 && res.data) {
|
|
this.diyData = res.data;
|
|
if (this.diyData.value) {
|
|
this.diyData = JSON.parse(this.diyData.value);
|
|
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
|
}
|
|
uni.stopPullDownRefresh();
|
|
}
|
|
},
|
|
// 新增：请求失败时隐藏加载遮罩，避免遮罩卡死
|
|
fail: () => {
|
|
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
|
uni.stopPullDownRefresh();
|
|
}
|
|
});
|
|
},
|
|
toLogin() {
|
|
this.$refs.login.open('/pages/goods/category')
|
|
}
|
|
},
|
|
onPullDownRefresh() {
|
|
uni.hideTabBar();
|
|
this.getDiyInfo();
|
|
},
|
|
// 新增：页面隐藏时移除监听（可选，增强容错）
|
|
onHide() {
|
|
this.removeLangListener();
|
|
},
|
|
// 新增：页面重新显示时重新添加监听
|
|
onReShow() {
|
|
this.addLangListener();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
/deep/ .uni-popup__wrapper.uni-center {
|
|
background: rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
/deep/ .uni-popup__wrapper-box {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
/deep/ .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
|
|
overflow-y: visible;
|
|
}
|
|
|
|
/deep/ .loading-layer {
|
|
background: #fff !important;
|
|
}
|
|
|
|
// 分类四一级展开
|
|
/deep/ .category-template-4 .template-four .uni-popup__wrapper-box {
|
|
border-radius: 0px 0px 14px 14px !important;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/deep/ .category-template-4 .content-wrap .categoty-goods-wrap .goods-list {
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
/deep/ .category-template-4 .content-wrap .goods-list .goods-item .footer-wrap .right-wrap .num-action {
|
|
width: 46rpx;
|
|
height: 46rpx;
|
|
}
|
|
|
|
/deep/ .uni-page-refresh-inner .uni-page-refresh__path {
|
|
stroke: rgb(1, 1, 1) !important;
|
|
}
|
|
</style> |