135 lines
3.1 KiB
Vue
135 lines
3.1 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">
|
|
<goods-list type="double" :list="goodsList" :price-type="price_type"></goods-list>
|
|
</view>
|
|
</mescroll-body>
|
|
</template>
|
|
|
|
<script>
|
|
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
|
import {
|
|
getGoodsListColumn,
|
|
getGoodsColumn
|
|
} from "@/api/store"
|
|
|
|
export default {
|
|
mixins: [MescrollMixin],
|
|
props:{
|
|
autoGetData: {
|
|
type: Boolean,
|
|
default:true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
goodsList: [],
|
|
active: 0,
|
|
columnList: [],
|
|
upOption: {
|
|
auto: false,
|
|
empty: {
|
|
icon: '/static/images/goods_null.png',
|
|
tip: "暂无商品",
|
|
},
|
|
toTop: {
|
|
bottom: '300rpx'
|
|
}
|
|
},
|
|
downOption:{use: false, isLock: true},
|
|
hasData: true,
|
|
price_type: 0
|
|
}
|
|
},
|
|
mounted() {
|
|
if(this.autoGetData) {
|
|
this.getData()
|
|
}
|
|
},
|
|
methods: {
|
|
async getData() {
|
|
await this.getGoodsColumnFun()
|
|
this.mescroll.resetUpScroll();
|
|
},
|
|
changeActive(index) {
|
|
this.active = index
|
|
this.$refs.uWaterfall.clear();
|
|
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
|
|
getGoodsListColumn({
|
|
page_size: pageSize,
|
|
page_no: pageNum,
|
|
column_id: columnId,
|
|
p_id: this.$store.getters.hasPid,
|
|
set: this.$store.getters.hasSetId
|
|
}).then(({
|
|
data
|
|
}) => {
|
|
this.price_type = data.set_price_type;
|
|
let curPageData = data.lists;
|
|
let curPageLen = curPageData.length;
|
|
let hasNext = !!data.more;
|
|
if (page.num == 1) this.goodsList = [];
|
|
this.goodsList = this.goodsList.concat(curPageData);
|
|
this.mescroll.endSuccess(curPageLen, hasNext);
|
|
})
|
|
},
|
|
async getGoodsColumnFun() {
|
|
const {
|
|
data,
|
|
code
|
|
} = await getGoodsColumn()
|
|
if (code == 1) {
|
|
this.columnList = data
|
|
this.hasData = data.length ? true : false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</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>
|