|
|
|
@ -3,23 +3,26 @@ |
|
|
|
<view class="ctab"> |
|
|
|
<u-tabs :list="tab_list" :is-scroll="true" :show-bar="false" :current="current" @change="change"></u-tabs> |
|
|
|
</view> |
|
|
|
<view class="com" v-for="(tab, tabIndex) in tab_list" v-if="tabIndex == current" :key="tabIndex"> |
|
|
|
<view class="lf-row-between list" v-for="(item, index) in tab.list" :key="index"> |
|
|
|
<view class="com" v-for="(tab, tabIndex) in tab_list" v-if="tabIndex == current" :key="tab.id"> |
|
|
|
<view class="lf-row-between list" v-for="(item, index) in tab.list" :key="item.id" @click="toDetail(item)"> |
|
|
|
<view class="left"> |
|
|
|
<image src="../../static/tu.png" mode=""></image> |
|
|
|
<image :src="item.cover" mode=""></image> |
|
|
|
</view> |
|
|
|
<view class="right"> |
|
|
|
<view class="lf-line-2 title">网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季</view> |
|
|
|
<view class="lf-row-between tips"> |
|
|
|
<view class="lf-line-2 title">{{ item.name }}</view> |
|
|
|
<view class="lf-flex tips"> |
|
|
|
<view class="u-line-progress"> |
|
|
|
<u-line-progress :percent="25" height="20" :striped="true" active-color="#FE9903" :show-percent="false" inactive-color="#F5F5F5"></u-line-progress> |
|
|
|
<u-line-progress :percent="item.specs[0].sold_percent" height="20" :striped="true" active-color="#FE9903" :show-percent="false" inactive-color="#F5F5F5"></u-line-progress> |
|
|
|
</view> |
|
|
|
<text class="progress">已抢25%</text> |
|
|
|
<text class="bought">2.4万人已购买</text> |
|
|
|
<text class="progress">{{ item.specs[0].sold_percent_text }}</text> |
|
|
|
<text class="bought">{{ item.specs[0].sold_stock_text }}</text> |
|
|
|
</view> |
|
|
|
<view class="lf-row-between price"> |
|
|
|
<text>￥</text><text>19</text>.<text>90</text> |
|
|
|
<text>￥39.00</text> |
|
|
|
<text class="lf-font-bold"> |
|
|
|
<text class="lf-font-24">￥</text> |
|
|
|
<text class="lf-font-42">{{ item.specs[0].selling_price }}</text> |
|
|
|
</text> |
|
|
|
<text class="lf-font-24">￥{{ item.specs[0].original_price }}</text> |
|
|
|
<button>立即抢购</button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -38,60 +41,87 @@ |
|
|
|
<script> |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
let shared = { |
|
|
|
loadingClass: false, |
|
|
|
loadingText: '没有更多数据啦~', |
|
|
|
page: 1, |
|
|
|
isPage: true |
|
|
|
} |
|
|
|
return { |
|
|
|
tab_list: [{ |
|
|
|
name: '推荐', |
|
|
|
list: [1, 2, 3, 4,5,6,7,8], |
|
|
|
...shared |
|
|
|
}, { |
|
|
|
name: '每日必抢', |
|
|
|
list: [], |
|
|
|
...shared |
|
|
|
}, { |
|
|
|
name: '生活用品', |
|
|
|
list: [1], |
|
|
|
...shared |
|
|
|
},{ |
|
|
|
name: '家政服务', |
|
|
|
list: [], |
|
|
|
...shared |
|
|
|
},{ |
|
|
|
name: '美食部落', |
|
|
|
list: [], |
|
|
|
...shared |
|
|
|
},{ |
|
|
|
name: '奶茶夏日', |
|
|
|
list: [], |
|
|
|
...shared |
|
|
|
},{ |
|
|
|
name: '奶茶夏日', |
|
|
|
list: [], |
|
|
|
...shared |
|
|
|
}], |
|
|
|
tab_list: [], |
|
|
|
current: 0, // tab下表 |
|
|
|
pageSize: 10 |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad() { |
|
|
|
this.$http(this.API.API_GOODS_LIST, {data: 1}).then(res => { |
|
|
|
console.log(res); |
|
|
|
}).catch(err => err); |
|
|
|
this.getCategoryList(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 切换tab |
|
|
|
change(index) { |
|
|
|
this.current = index; |
|
|
|
}, |
|
|
|
// 获取分类tab |
|
|
|
getCategoryList(){ |
|
|
|
this.$http(this.API.API_CATEGORY_LIST).then(res => { |
|
|
|
let res_list = res.data || []; |
|
|
|
let tab_list = res_list.map(item => { |
|
|
|
return { |
|
|
|
id: item.id, |
|
|
|
name: item.name, |
|
|
|
type: item.type, |
|
|
|
list: [], |
|
|
|
loadingClass: true, |
|
|
|
loadingText: '正在加载中', |
|
|
|
page: 1, |
|
|
|
isPage: true |
|
|
|
} |
|
|
|
}) |
|
|
|
this.tab_list = tab_list; |
|
|
|
this.getGoodsList(); |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 获取分类下的商品列表 |
|
|
|
getGoodsList(){ |
|
|
|
let per_page = this.pageSize; |
|
|
|
let tab_item = this.tab_list[this.current]; |
|
|
|
this.$http(this.API.API_GOODS_LIST, { |
|
|
|
category_id: tab_item.id, |
|
|
|
type: tab_item.type, |
|
|
|
page: tab_item.page, |
|
|
|
per_page |
|
|
|
}).then(res => { |
|
|
|
console.log("res", res); |
|
|
|
|
|
|
|
let isPage = res.data.has_more_page; |
|
|
|
tab_item.isPage = isPage; |
|
|
|
if(isPage){ |
|
|
|
tab_item.loadingClass = true; |
|
|
|
tab_item.loadingText = '正在加载中'; |
|
|
|
}else{ |
|
|
|
tab_item.loadingClass = false; |
|
|
|
tab_item.loadingText = '没有更多数据啦~'; |
|
|
|
} |
|
|
|
if(tab_item.page == 1){ |
|
|
|
tab_item.list = res.data.items; |
|
|
|
}else{ |
|
|
|
tab_item.list.push(...res.data.items); |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 去到详情页 |
|
|
|
toDetail(item){ |
|
|
|
this.$url('/pages/goodsDetail/index?id='+ item.id); |
|
|
|
} |
|
|
|
}, |
|
|
|
onReachBottom(){ |
|
|
|
console.log("页面触底") |
|
|
|
let tab_item = this.tab_list[this.current]; |
|
|
|
if(tab_item.isPage){ |
|
|
|
tab_item.page = tab_item.page + 1; |
|
|
|
this.getGoodsList(); |
|
|
|
} |
|
|
|
}, |
|
|
|
onPullDownRefresh(){ |
|
|
|
console.log("下拉刷新"); |
|
|
|
let tab_item = this.tab_list[this.current]; |
|
|
|
tab_item.page = 1; |
|
|
|
tab_item.isPage = true; |
|
|
|
tab_item.loadingClass = true; |
|
|
|
tab_item.loadingText = '正在加载中'; |
|
|
|
this.getGoodsList(); |
|
|
|
uni.stopPullDownRefresh() |
|
|
|
} |
|
|
|
} |
|
|
|
@ -102,6 +132,7 @@ |
|
|
|
.title { |
|
|
|
font-size: 28rpx; |
|
|
|
color: $u-content-color; |
|
|
|
height: 88rpx; |
|
|
|
} |
|
|
|
|
|
|
|
// tab |
|
|
|
@ -159,29 +190,30 @@ |
|
|
|
.price{ |
|
|
|
overflow: hidden; |
|
|
|
color:#FF0000; |
|
|
|
text{ |
|
|
|
font-size: 48rpx; |
|
|
|
color:#FF0000; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
text:nth-child(1){ |
|
|
|
color: #FF0000; |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
text:nth-child(2){ |
|
|
|
color: #FF0000; |
|
|
|
font-size: 48rpx; |
|
|
|
} |
|
|
|
text:nth-child(3){ |
|
|
|
color: #FF0000; |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
text:nth-child(4){ |
|
|
|
color: #777777; |
|
|
|
font-size: 28rpx; |
|
|
|
text-decoration:line-through; |
|
|
|
font-weight: 400; |
|
|
|
} |
|
|
|
|
|
|
|
// text{ |
|
|
|
// font-size: 48rpx; |
|
|
|
// color:#FF0000; |
|
|
|
// font-weight: 500; |
|
|
|
// } |
|
|
|
// text:nth-child(1){ |
|
|
|
// color: #FF0000; |
|
|
|
// font-size: 28rpx; |
|
|
|
// } |
|
|
|
// text:nth-child(2){ |
|
|
|
// color: #FF0000; |
|
|
|
// font-size: 48rpx; |
|
|
|
// } |
|
|
|
// text:nth-child(3){ |
|
|
|
// color: #FF0000; |
|
|
|
// font-size: 28rpx; |
|
|
|
// } |
|
|
|
// text:nth-child(4){ |
|
|
|
// color: #777777; |
|
|
|
// font-size: 28rpx; |
|
|
|
// text-decoration:line-through; |
|
|
|
// font-weight: 400; |
|
|
|
// } |
|
|
|
button{ |
|
|
|
width: 160rpx; |
|
|
|
height: 60rpx; |
|
|
|
|
LAPTOP-D7TKRI82\邓
5 years ago