159 lines
3.4 KiB
Vue
159 lines
3.4 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="jilv_title">
|
|
<view v-for="(item,index) in shang_cate" :key="index" @click="change_shang_id(item.id)" :class="shang_id==item.id?'selActive':''">
|
|
{{item.title}}
|
|
</view>
|
|
</view>
|
|
<mescroll-body ref="mescrollRef" class="valbox" @init="mescrollInit" :down="downOption" @down="downCallback"
|
|
@up="upCallback">
|
|
<view class="content_mian">
|
|
<view class="content_mian_item" v-for="(e,i) in listdata" :key="i">
|
|
<view class="imgView">
|
|
<image :src="'https://hdyfs.languowangluo.cn'+e.imgurl"></image>
|
|
<view>{{e.shang_name}}</view>
|
|
</view>
|
|
<view class="title hang1">{{e.title}}</view>
|
|
<view class="price">产考价:{{e.price}}元</view>
|
|
</view>
|
|
</view>
|
|
</mescroll-body>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
shang_cate:[],
|
|
card_id:'',
|
|
downOption: {
|
|
auto: false
|
|
},
|
|
listdata:[],
|
|
shang_id:''
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
this.card_id=e.id
|
|
// this.getDeatil();
|
|
},
|
|
methods: {
|
|
// getDeatil(){
|
|
// let that = this;
|
|
// that.req({
|
|
// url: 'card_level',
|
|
// success(res) {
|
|
// if (res.status == 1) {
|
|
// that.shang_cate=res.data
|
|
// }
|
|
// }
|
|
// })
|
|
// },
|
|
/*下拉刷新的回调 */
|
|
downCallback() {
|
|
// this.mescroll.resetUpScroll()
|
|
this.loadData(1)
|
|
},
|
|
/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
|
|
upCallback(page) {
|
|
//联网加载数据
|
|
this.loadData(page.num);
|
|
},
|
|
loadData(pageNo) {
|
|
// 模拟接口
|
|
let that = this;
|
|
that.req({
|
|
url: 'shang_goods',
|
|
data: {
|
|
page: pageNo,
|
|
card_id:that.card_id,
|
|
shang_id:that.shang_id,
|
|
},
|
|
success: function(res) {
|
|
that.mescroll.endByPage(res.data.goods.data.length, res.data.goods.last_page);
|
|
if (pageNo == 1) {
|
|
let lastArr = [{
|
|
title: '全部',
|
|
id: ''
|
|
}]
|
|
that.shang_cate=lastArr.concat(res.data.card_level);
|
|
that.listdata = res.data.goods.data;
|
|
} else {
|
|
that.listdata = that.listdata.concat(res.data.goods.data);
|
|
}
|
|
console.log(that.listdata)
|
|
}
|
|
})
|
|
},
|
|
change_shang_id(e){
|
|
this.shang_id=e;
|
|
this.loadData(1)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content{
|
|
.jilv_title {
|
|
font-size: 30rpx;
|
|
color: #F7F7F7;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 690rpx;
|
|
margin: 20rpx auto 0;
|
|
flex-wrap: wrap;
|
|
// overflow-x: scroll;
|
|
>view{
|
|
background: #444444;
|
|
border-radius: 10rpx;
|
|
padding: 15rpx 25rpx;
|
|
margin-right: 20rpx;
|
|
margin-bottom: 15rpx;
|
|
}
|
|
.selActive{
|
|
background: linear-gradient(0deg, #1AC762 0%, #35ED85 100%);
|
|
border-radius: 10rpx;
|
|
color: #222;
|
|
}
|
|
}
|
|
&_mian{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
&_item{
|
|
margin: 30rpx 0 0 30rpx;
|
|
width: 210rpx;
|
|
.imgView{
|
|
position: relative;
|
|
width: 210rpx;
|
|
height: 300rpx;
|
|
image{
|
|
width: 210rpx;
|
|
height: 300rpx;
|
|
}
|
|
view{
|
|
position: absolute;
|
|
top: 9rpx;
|
|
left: 10rpx;
|
|
font-weight: 600;
|
|
color: #B35CEF;
|
|
// opacity: 0.8;
|
|
font-size: 26rpx;
|
|
-webkit-text-stroke: 1rpx #fff;
|
|
}
|
|
}
|
|
.title{
|
|
font-size: 26rpx;
|
|
text-align: center;
|
|
color: #fff;
|
|
}
|
|
.price{
|
|
font-size: 24rpx;
|
|
color: rgba(255, 255, 255, .4);
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |