|
|
<template> <view class="lf-row-center lf-flex-column"> <view class="ctab" v-if="tab_list.length"> <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="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="item.cover" mode="aspectFit"></image> </view> <view class="right"> <view class="lf-line-2 title">{{ item.name }}</view> <view class="lf-flex tips" v-if="item.specs[0]"> <view class="u-line-progress" v-if="item.specs[0].sold_percent"> <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 lf-m-r-10">{{ 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 class="lf-font-bold" v-if="item.specs[0]"> <text class="lf-font-24">￥</text> <text class="lf-font-42">{{ item.specs[0].selling_price }}</text> </text> <text class="lf-font-24 original-price" v-if="item.specs[0]">￥{{ item.specs[0].original_price }}</text> <text v-else></text> <button>立即抢购</button> </view> </view> </view> <!-- 加载 --> <view class="loading-more"> <text v-if="tab.list.length" :class="{'loading-more-text': tab.loadingClass}">{{ tab.loadingText }}</text> <my-nocontent v-else></my-nocontent> </view> <!-- 回到顶部 --> <u-back-top :scroll-top="pageScrollTop"></u-back-top> </view> </view></template>
<script> export default { data() { return { tab_list: [], current: 0, // tab下表
pageSize: 10 } }, onLoad() { this.getCategoryList(); // this.get();
}, methods: { get(){ this.$http(this.API.TEST, { goods_id: 1, goods_specs_id: 1, number: 1, token: 'b1f20b424ec9e7a2a4c9788fd0f75643' }).then(res => { console.log(res) // let nonceStr = res.data.nonceStr
// appId: "wxb35ef055a4dd8ad4"
// nonceStr: "60d3125d138af"
// order_num: "2842855348400816128"
// package: "prepay_id=wx23185213000285e14ea77ac97acc670000"
// paySign: "6DC330CBDF6C29BEDD4D254D9DA97364"
// signType: "MD5"
// timeStamp: "1624445533"
uni.requestPayment({ orderInfo: res.data.order_num, timeStamp: res.data.timeStamp, nonceStr: res.data.nonceStr, package: res.data.package, signType: res.data.signType, paySign: res.data.paySign, complete: result => { console.log(result) } }) }) }, // 切换tab
change(index) { this.current = index; if(this.tab_list[index].list.length <= 0){ this.getGoodsList(); // tab下没有数据，请求第一页
} }, // 获取分类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 = 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(){ let tab_item = this.tab_list[this.current]; if(tab_item.isPage){ tab_item.page = tab_item.page + 1; this.getGoodsList(); } }, onPullDownRefresh(){ 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() }, onShareAppMessage(){ return { title: '分享小程序', path: '/pages/route/index?route=home' } } }</script>
<style lang="scss" scoped> .title { font-size: 28rpx; color: $u-content-color; height: 88rpx; } // tab
.ctab{ width: 100%; margin: 20rpx 0 0rpx 0rpx; padding: 0 22rpx; } // 商品列表
.com{ width: 100%; overflow: hidden; .list{ border-radius: 10rpx; overflow: hidden; margin: 20rpx 32rpx; background-color: #FFFFFF; box-shadow: 0 10rpx 20rpx 0 rgba(0, 0, 0, 0.1); align-items: flex-start; .left{ overflow: hidden; image{ width: 204rpx; height: 204rpx; margin: 20rpx; border-radius: 10rpx; } } .right{ overflow: hidden; width: 64%; .title{ margin: 18rpx 20rpx 0 0; color: #222222; font-size: 32rpx; } .tips{ margin: 16rpx 0; overflow: hidden; .u-line-progress{ width: 112rpx; overflow: hidden; margin-right:20rpx ; } .progress{ color: #777777; font-size: 24rpx; } .bought{ color: #777777; font-size: 24rpx; margin-right: 20rpx; } } .price{ overflow: hidden; color:#FF0000; .original-price{ text-decoration: line-through; color: #777777; } // 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; background: #FE9903; border-radius: 50px; font-size: 24rpx; color: #FFFFFF; margin: 0rpx 20rpx 0rpx 20rpx; border: none; } } } } }</style>
|
