|
|
|
@ -7,24 +7,23 @@ |
|
|
|
<!-- 二级分类 20 --> |
|
|
|
<view class="cate-content"> |
|
|
|
<!-- 左侧 一级分类 --> |
|
|
|
<scroll-view class="cate-left" :scroll-y="true" :style="{ height: `${scrollHeight}px` }"> |
|
|
|
<!-- <text class="type-nav" :class="{ selected: curIndex == index }" v-for="(item, index) in list" :key="index" |
|
|
|
@click="handleSelectNav(index)">{{ item.name }}</text> --> |
|
|
|
<text>文化资源数据</text> |
|
|
|
<text>文化数字内容</text> |
|
|
|
<scroll-view class="cate-left" scroll-y="true"> |
|
|
|
<text class="type-nav" :class="{ selected: curIndex == index }" v-for="(item, index) in menus" :key="index" |
|
|
|
@click="handleSelectNav(index)">{{ item.name }}</text> |
|
|
|
</scroll-view> |
|
|
|
<!-- 右侧 二级分类 --> |
|
|
|
<scroll-view class="cate-right" :scroll-top="scrollTop" :scroll-y="true" :style="{ height: `${scrollHeight}px` }"> |
|
|
|
<view v-if="list[curIndex]" class="cate-right-cont"> |
|
|
|
<scroll-view class="cate-right" scroll-top="true" scroll-y="true" > |
|
|
|
|
|
|
|
<view v-if="list" class="cate-right-cont"> |
|
|
|
<view class="cate-two-box"> |
|
|
|
<view class="cate-cont-box"> |
|
|
|
<view class="flex-three" v-for="(item, idx) in list[curIndex].children" :key="idx" @click="onTargetGoodsList(item.category_id)"> |
|
|
|
<view class="flex-three" v-for="(item, idx) in list" :key="idx" @click="onTargetGoodsList(item.category_id)"> |
|
|
|
<view class="cate-img-padding"> |
|
|
|
<view v-if="item.image" class="cate-img"> |
|
|
|
<image class="image" mode="scaleToFill" :src="item.image.preview_url"></image> |
|
|
|
<view v-if="item.goods_image" class="cate-img"> |
|
|
|
<image class="image" mode="scaleToFill" :src="item.goods_image"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<text class="name oneline-hide">{{ item.name }}</text> |
|
|
|
<text class="name oneline-hide">{{ item.goods_name }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -44,11 +43,21 @@ |
|
|
|
import { PageCategoryStyleEnum } from '@/common/enum/store/page/category' |
|
|
|
import SettingModel from '@/common/model/Setting' |
|
|
|
import * as CategoryApi from '@/api/category' |
|
|
|
import * as GoodsApi from '@/api/goods' |
|
|
|
import Empty from '@/components/empty' |
|
|
|
import Search from '@/components/search' |
|
|
|
import Primary from './components/primary' |
|
|
|
import Secondary from './components/secondary' |
|
|
|
import Commodity from './components/commodity' |
|
|
|
|
|
|
|
|
|
|
|
// 左侧菜单(固定) |
|
|
|
const menus = [ |
|
|
|
{ id: 'all', name: '全部标的数据', icon: 'qpdingdan' }, |
|
|
|
{ id: 'rs', name: '文化资源数据', icon: 'daifukuan', count: 0 }, |
|
|
|
{ id: 'rd', name: '文化数字内容', icon: 'daifahuo', count: 0 }, |
|
|
|
] |
|
|
|
|
|
|
|
//分页大小 |
|
|
|
let limit=24; |
|
|
|
|
|
|
|
// 最后一次刷新时间 |
|
|
|
let lastRefreshTime; |
|
|
|
@ -57,9 +66,7 @@ |
|
|
|
components: { |
|
|
|
Search, |
|
|
|
Empty, |
|
|
|
Primary, |
|
|
|
Secondary, |
|
|
|
Commodity |
|
|
|
}, |
|
|
|
mixins: [MescrollCompMixin], |
|
|
|
data() { |
|
|
|
@ -71,7 +78,13 @@ |
|
|
|
// 分类模板设置 |
|
|
|
setting: {}, |
|
|
|
// 正在加载中 |
|
|
|
isLoading: true |
|
|
|
isLoading: true, |
|
|
|
// 一级分类：指针 |
|
|
|
curIndex: 0, |
|
|
|
//默认显示第一页 |
|
|
|
page:1, |
|
|
|
// 菜单 |
|
|
|
menus, |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
@ -114,57 +127,57 @@ |
|
|
|
// SettingModel.data(false), |
|
|
|
// 获取分类列表 |
|
|
|
// CategoryApi.list() |
|
|
|
this.getAllGoods() |
|
|
|
]) |
|
|
|
.then(result => { |
|
|
|
// 初始化分类模板设置 |
|
|
|
// app.initSetting(result[0]) |
|
|
|
// 初始化分类列表数据 |
|
|
|
// app.initCategory(result[1]) |
|
|
|
// |
|
|
|
}) |
|
|
|
.finally(() => app.isLoading = false) |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 初始化分类模板设置 |
|
|
|
* @param {Object} result |
|
|
|
*/ |
|
|
|
initSetting(setting) { |
|
|
|
this.setting = setting[SettingKeyEnum.PAGE_CATEGORY_TEMPLATE.value] |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 初始化分类列表数据 |
|
|
|
* @param {Object} result |
|
|
|
*/ |
|
|
|
initCategory(result) { |
|
|
|
this.list = result.data.list |
|
|
|
|
|
|
|
// 一级分类：选中分类 |
|
|
|
handleSelectNav(index) { |
|
|
|
this.curIndex = index |
|
|
|
this.scrollTop = 0 |
|
|
|
|
|
|
|
// 加载对应的数据 |
|
|
|
}, |
|
|
|
|
|
|
|
// 展示所有的数据 |
|
|
|
getAllGoods(){ |
|
|
|
let rd={"goods_status":1,"page":this.page,"limit":limit} |
|
|
|
this.bindData(rd) |
|
|
|
}, |
|
|
|
|
|
|
|
// 查询分类 获取列表 |
|
|
|
getCatList(type){ |
|
|
|
if(type>0){ |
|
|
|
let rd={"record_type":type,"goods_status":1,"page":this.page,"limit":limit} |
|
|
|
this.bindData(rd) |
|
|
|
}else{ |
|
|
|
this.getAllGoods() |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
// 绑定数据 |
|
|
|
bindData(rd){ |
|
|
|
GoodsApi.soglist(rd).then(res=>{ |
|
|
|
this.list = res.data.data |
|
|
|
this.page=res.data.current_page |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 设置分享内容 |
|
|
|
*/ |
|
|
|
onShareAppMessage() { |
|
|
|
const app = this |
|
|
|
return { |
|
|
|
title: _this.templet.shareTitle, |
|
|
|
path: '/pages/category/index?' + app.$getShareUrlParams() |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 分享到朋友圈 |
|
|
|
* 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta) |
|
|
|
* https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html |
|
|
|
*/ |
|
|
|
onShareTimeline() { |
|
|
|
const app = this |
|
|
|
return { |
|
|
|
title: _this.templet.shareTitle, |
|
|
|
path: '/pages/category/index?' + app.$getShareUrlParams() |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
</script> |
|
|
|
@ -181,6 +194,108 @@ |
|
|
|
top: var(--window-top); |
|
|
|
left: var(--window-left); |
|
|
|
right: var(--window-right); |
|
|
|
z-index: 9; |
|
|
|
z-index: 19; |
|
|
|
} |
|
|
|
|
|
|
|
// |
|
|
|
.secondary{ |
|
|
|
z-index: 6; |
|
|
|
border-top: 1rpx solid #444; |
|
|
|
height: 100vh; |
|
|
|
} |
|
|
|
|
|
|
|
// 分类内容 |
|
|
|
.cate-content { |
|
|
|
display: flex; |
|
|
|
z-index: 1; |
|
|
|
background: #fff; |
|
|
|
padding-top: 96rpx; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
// 一级分类+二级分类 20 |
|
|
|
.cate-left { |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
flex: 0 0 26%; |
|
|
|
background: #f8f8f8; |
|
|
|
color: #444; |
|
|
|
margin-right: 22rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.cate-right { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
height: 100%; |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
.cate-right-cont { |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
flex-flow: row wrap; |
|
|
|
align-content: flex-start; |
|
|
|
padding-top: 15rpx; |
|
|
|
|
|
|
|
.cate-two-box { |
|
|
|
width: 100%; |
|
|
|
padding: 0 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 左侧一级分类 |
|
|
|
.type-nav { |
|
|
|
position: relative; |
|
|
|
height: 90rpx; |
|
|
|
z-index: 10; |
|
|
|
display: block; |
|
|
|
font-size: 26rpx; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
&.selected { |
|
|
|
background: #fff; |
|
|
|
color: #fa2209; |
|
|
|
border-right: none; |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 右侧二级分类 |
|
|
|
.cate-cont-box { |
|
|
|
margin-bottom: 30rpx; |
|
|
|
padding-bottom: 10rpx; |
|
|
|
background: #fff; |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
.name { |
|
|
|
display: block; |
|
|
|
padding-bottom: 30rpx; |
|
|
|
text-align: center; |
|
|
|
font-size: 26rpx; |
|
|
|
color: #444444; |
|
|
|
} |
|
|
|
|
|
|
|
.cate-img-padding { |
|
|
|
padding: 16rpx 16rpx 4rpx 16rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.cate-img { |
|
|
|
position: relative; |
|
|
|
width: 100%; |
|
|
|
padding-top: 100%; |
|
|
|
|
|
|
|
.image { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
border-radius: 10rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
</style> |
|
|
|
|
453530270@qq.com
2 years ago