karlcarlo
a5c5d753b6
- 新增大量图片资源，包括图标、背景图、海报等，用于页面展示 - 添加字体文件及样式配置，支持自定义字体 - 引入 uni-ui 组件库，包括图标、弹窗、日期选择器等常用组件 - 添加网络状态监听、加密工具等基础工具函数 - 配置 Vuex 状态管理，包括购物车数量、热门搜索词等 - 增加页面组件，如用户协议、分销信息、提现状态等 - 配置项目构建和忽略文件，优化开发体验
94 lines
2.5 KiB
Vue
94 lines
2.5 KiB
Vue
<template>
|
|
<!-- 商品分类 -->
|
|
<view :style="colorStyle">
|
|
<!-- 商品分类的三种样式布局 -->
|
|
<template1 v-if="activeIndex == 0" :level="level" ref="classOne"></template1>
|
|
<template2 v-if="showTemplateTwo" :reset="reset" :level="level" :showType="activeIndex" :isFooter="isFooter" ref="classTwo"></template2>
|
|
<template3 v-if="showTemplateThree" :reset="reset" :showType="activeIndex" :isFooter="isFooter" ref="classThree"></template3>
|
|
<template4 v-if="showTemplateFour" :reset="reset" :level="level" :isFooter="isFooter" @toggleBar="toggleBar" ref="classFour"></template4>
|
|
<pageFooter @newDataStatus="newDataStatus" v-show="showBar"></pageFooter>
|
|
<activityModal :pageIndex="2"></activityModal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import colors from "@/mixins/color";
|
|
import template1 from './template/template1.vue';
|
|
import template2 from './template/template2.vue';
|
|
import template3 from './template/template3.vue';
|
|
import template4 from './template/template4.vue';
|
|
import pageFooter from '@/components/pageFooter/index.vue';
|
|
import activityModal from "@/components/activityModal/index.vue";
|
|
import { colorChange } from '@/api/api.js';
|
|
import { mapGetters } from 'vuex';
|
|
export default {
|
|
computed: {
|
|
...mapGetters(['isLogin', 'uid', 'diyCategory']),
|
|
//diyCategory 暴露两个属性 level 和 index ,分别为分类等级和模板下标
|
|
level(){
|
|
return this.diyCategory.level
|
|
},
|
|
activeIndex(){
|
|
return this.diyCategory.index
|
|
},
|
|
showTemplateTwo(){
|
|
if(([2,3].includes(this.activeIndex) && this.level == 2) || ([1,2].includes(this.activeIndex) && this.level == 3)){
|
|
return true
|
|
}
|
|
},
|
|
showTemplateThree(){
|
|
if([1,4].includes(this.activeIndex) && this.level == 2){
|
|
return true
|
|
}
|
|
},
|
|
showTemplateFour(){
|
|
if((this.activeIndex == 5 && this.level == 2) || (this.activeIndex == 3 && this.level == 3)){
|
|
return true
|
|
}
|
|
}
|
|
},
|
|
components: {
|
|
template1,
|
|
template2,
|
|
template3,
|
|
template4,
|
|
pageFooter,
|
|
activityModal
|
|
},
|
|
mixins: [colors],
|
|
data() {
|
|
return {
|
|
isFooter:false,
|
|
showBar: false,
|
|
reset: 0
|
|
}
|
|
},
|
|
onShow() {
|
|
this.reset++;
|
|
},
|
|
onUnload(){
|
|
uni.$off('newAttrNum')
|
|
},
|
|
methods: {
|
|
newDataStatus(val){
|
|
this.isFooter = val ? true : false;
|
|
this.showBar = val ? true : false;
|
|
},
|
|
toggleBar(val){
|
|
this.showBar = val;
|
|
}
|
|
},
|
|
onPageScroll(e) {
|
|
if(this.showTemplateFour){
|
|
uni.$emit('scroll');
|
|
}
|
|
},
|
|
onReachBottom() {
|
|
if(this.showTemplateFour){
|
|
this.$refs.classFour.productslist();
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|