【商品推荐】

1. 实现功能
pull/1/MERGE
YunaiV 2023-06-25 16:48:23 +08:00
parent 202ee764ba
commit a08e05ea8b
3 changed files with 50 additions and 33 deletions

View File

@ -12,10 +12,10 @@
<view class='text'> <view class='text'>
<view class='line1'>{{ item.name }}</view> <view class='line1'>{{ item.name }}</view>
<view class='money font-color'><text class='num'>{{ fen2yuan(item.price) }}</text></view> <view class='money font-color'><text class='num'>{{ fen2yuan(item.price) }}</text></view>
<view class='vip-money acea-row row-middle' v-if="item.vip_price && item.vip_price > 0">{{item.vip_price || 0}} <view class='vip-money acea-row row-middle' v-if="item.vipPrice > 0">{{ fen2yuan(item.vipPrice || 0) }}
<image src='../../static/images/vip.png'></image><text class='num'>已售{{Number(item.sales) + Number(item.ficti) || 0}}{{item.unitName}}</text> <image src='../../static/images/vip.png'></image><text class='num'>已售{{ item.salesCount }}{{item.unitName}}</text>
</view> </view>
<view class='vip-money acea-row row-middle' v-else><text class='num'>已售{{Number(item.sales) + Number(item.ficti) || 0}}{{item.unitName}}</text></view> <view class='vip-money acea-row row-middle' v-else><text class='num'>已售{{ item.salesCount }}{{item.unitName}}</text></view>
</view> </view>
</view> </view>
<view class='iconfont icon-gouwuche cart-color acea-row row-center-wrapper'></view> <view class='iconfont icon-gouwuche cart-color acea-row row-center-wrapper'></view>

View File

@ -20,16 +20,18 @@
<div class="line"></div> <div class="line"></div>
</div> </div>
<view class="wrapper"> <view class="wrapper">
<GoodList :bastList="goodsList" :is-sort="false"></GoodList> <GoodList :bastList="goodsList" :is-sort="false" />
<view class="txt-bar" v-if="goodsList.length>0 && !isScroll">线~</view> <view class="txt-bar" v-if="goodsList.length>0 && !isScroll">线~</view>
<emptyPage v-if="goodsList.length==0 && !isScroll" title="暂无数据~"></emptyPage> <emptyPage v-if="goodsList.length === 0 && !isScroll" title="暂无数据~"></emptyPage>
</view> </view>
</div> </div>
</template> </template>
<script> <script>
import emptyPage from '@/components/emptyPage.vue' import emptyPage from '@/components/emptyPage.vue'
import GoodList from "@/components/goodList"; import GoodList from "@/components/goodList";
import { getGroomList } from "@/api/store"; import * as ProductSpuApi from '@/api/product/spu.js';
import * as PromotionActivityApi from '@/api/promotion/activity.js';
import * as ProductUtil from '@/utils/product.js';
export default { export default {
name: "HotNewGoods", name: "HotNewGoods",
components: { components: {
@ -39,18 +41,19 @@ export default {
props: {}, props: {},
data: function() { data: function() {
return { return {
imgUrls: [], imgUrls: [], // TODO @ banner
goodsList: [], goodsList: [],
name: "", name: "",
icon: "", icon: "",
type:0, type: 0,
autoplay:true, autoplay: true,
circular:true, circular: true,
interval: 3000, interval: 3000,
duration: 500, duration: 500,
page:1, recommendType: '',
limit:8, page: 1,
isScroll:true limit: 8,
isScroll: true
}; };
}, },
onLoad: function(option) { onLoad: function(option) {
@ -66,42 +69,57 @@ export default {
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title:"精品推荐" title:"精品推荐"
}) })
this.recommendType = 'best';
} else if (this.type === "2") { } else if (this.type === "2") {
this.name = "热门榜单"; this.name = "热门榜单";
this.icon = "icon-remen"; this.icon = "icon-remen";
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title:"热门榜单" title:"热门榜单"
}) })
this.recommendType = 'hot';
} else if (this.type === "3") { } else if (this.type === "3") {
this.name = "首发新品"; this.name = "首发新品";
this.icon = "icon-xinpin"; this.icon = "icon-xinpin";
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title:"首发新品" title:"首发新品"
}) })
}else if (this.type === "4") { this.recommendType = 'new';
} else if (this.type === "4") {
this.name = "促销单品"; this.name = "促销单品";
this.icon = "icon-xinpin"; this.icon = "icon-xinpin";
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title:"促销单品" title:"促销单品"
}) })
this.recommendType = 'benefit';
} }
}, },
/**
* 获得推荐商品列表
*/
getIndexGroomList: function() { getIndexGroomList: function() {
if(!this.isScroll) return if(!this.isScroll) {
let that = this; return
let type = this.type; }
getGroomList(type,{ ProductSpuApi.getSpuPage({
page:this.page, recommendType: this.recommendType,
limit:this.limit pageNo: this.page,
}).then(res => { pageSize: this.limit
that.imgUrls = res.data.banner; }).then(res => {
that.goodsList = that.goodsList.concat(res.data.list); const good_list = res.data.list;
that.isScroll = res.data.list.length>=that.limit this.isScroll = good_list.length >= this.limit
that.page++ this.page++
})
.catch(function(res) { //
that.$util.Tips({ title: res }); const spuIds = good_list.map(item => item.id);
}); if (spuIds.length > 0) {
PromotionActivityApi.getActivityListBySpuIds(spuIds).then(res => {
ProductUtil.setActivityList(good_list, res.data);
this.goodsList = this.goodsList.concat(good_list); // Vue
});
}
}).catch(res => {
this.$util.Tips({ title: res });
});
} }
}, },
onReachBottom() { onReachBottom() {
@ -112,7 +130,7 @@ export default {
<style lang="scss"> <style lang="scss">
/deep/ .empty-box{ /deep/ .empty-box{
background-color: #f5f5f5; background-color: #f5f5f5;
} }
.swiper,swiper,swiper-item,.slide-image{ .swiper,swiper,swiper-item,.slide-image{
width: 100%; width: 100%;
height: 280rpx; height: 280rpx;
@ -131,7 +149,7 @@ export default {
height: 2rpx; height: 2rpx;
background-color: #e9e9e9; background-color: #e9e9e9;
} }
} }
} }
.txt-bar{ .txt-bar{
padding: 20rpx 0; padding: 20rpx 0;
@ -140,4 +158,4 @@ export default {
color: #666; color: #666;
background-color: #f5f5f5; background-color: #f5f5f5;
} }
</style> </style>

View File

@ -534,7 +534,6 @@
this.iSshowH = true this.iSshowH = true
} }
this.loading = true this.loading = true
console.log(this.goodType, '====')
const type = this.goodType === 1 ? 'best' : const type = this.goodType === 1 ? 'best' :
this.goodType === 2 ? 'hot' : this.goodType === 2 ? 'hot' :
this.goodType === 3 ? 'new' : this.goodType === 3 ? 'new' :