143 lines
3.2 KiB
Vue
143 lines
3.2 KiB
Vue
<template>
|
|
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"
|
|
:down="downOption" v-if="hasData">
|
|
<view class="goods-column">
|
|
<scroll-view scroll-x="true">
|
|
<view class="column-wrap">
|
|
<view class="item flex-col m-r-50 muted" v-for="(item, index) in columnList" :key="index"
|
|
@tap="changeActive(index)">
|
|
<view class="xxl normal title" :class="{bold: active == index}">{{item.name}}</view>
|
|
<view class="m-t-8 xs text-center" :class="{normal : active == index}">{{item.remark}}</view>
|
|
<view v-if="active == index" class="line br60"></view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="goods">
|
|
<list type="double" :list="videoList" :price-type="price_type"></list>
|
|
</view>
|
|
</mescroll-body>
|
|
</template>
|
|
|
|
<script>
|
|
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
|
import {
|
|
businessSchool,
|
|
businessSchoolCategory
|
|
} from '@/api/user'
|
|
import list from './components/list.vue'
|
|
|
|
export default {
|
|
components: {
|
|
list
|
|
},
|
|
mixins: [MescrollMixin],
|
|
data() {
|
|
return {
|
|
videoList: [],
|
|
active: 0,
|
|
columnList: [],
|
|
upOption: {
|
|
auto: false,
|
|
empty: {
|
|
icon: 'https://zjeloong.oss-cn-hangzhou.aliyuncs.com/uniapp/goods_null.png',
|
|
tip: "暂无数据",
|
|
},
|
|
toTop: {
|
|
bottom: '30rpx'
|
|
}
|
|
},
|
|
hasData: true,
|
|
price_type: 0
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
async getData() {
|
|
await this.getGoodsColumnFun()
|
|
this.mescroll.resetUpScroll();
|
|
},
|
|
changeActive(index) {
|
|
this.active = index
|
|
this.mescroll.resetUpScroll();
|
|
},
|
|
upCallback(page) {
|
|
const {
|
|
columnList,
|
|
active
|
|
} = this
|
|
const pageNum = page.num;
|
|
const pageSize = page.size;
|
|
if (!columnList.length) return
|
|
const columnId = columnList[active].id
|
|
businessSchool({
|
|
page_size: pageSize,
|
|
page_no: pageNum,
|
|
cid: columnId,
|
|
}).then(({
|
|
data
|
|
}) => {
|
|
let curPageData = data.list;
|
|
let curPageLen = curPageData.length;
|
|
let hasNext = !!data.more;
|
|
if (page.num == 1) this.videoList = [];
|
|
this.videoList = this.videoList.concat(curPageData);
|
|
this.mescroll.endSuccess(curPageLen, hasNext);
|
|
this.$refs.waterfallsFlowRef.refresh();
|
|
})
|
|
},
|
|
async getGoodsColumnFun() {
|
|
const {
|
|
data,
|
|
code
|
|
} = await businessSchoolCategory()
|
|
if (code == 1) {
|
|
this.columnList = data
|
|
this.hasData = data.length ? true : false
|
|
}
|
|
},
|
|
loaded() {
|
|
console.log('加载完成')
|
|
},
|
|
|
|
wapperClick(item) {
|
|
console.log('单项点击事件', item)
|
|
},
|
|
|
|
imageClick(item) {
|
|
console.log('图片点击事件', item)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.goods-column {
|
|
.column-wrap {
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
padding: 30rpx;
|
|
|
|
.item {
|
|
display: inline-block;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.title {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.line {
|
|
position: absolute;
|
|
top: 32rpx;
|
|
left: 0;
|
|
width: 144rpx;
|
|
height: 12rpx;
|
|
background: linear-gradient(90deg, #FF2C3C 0%, rgba(255, 44, 60, 0) 100%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |