dl_mer_uniapp/components/base/recommend.vue
2025-03-04 16:03:38 +08:00

184 lines
4.4 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class='recommend'>
<block v-if="tempArr.length">
<view v-if="isShowTitle" class="flex-center recommend-box mt-20 mb-24">
<image :src="`${urlDomain}crmebimage/presets/haowuzuo.png`"></image>
<view class="f-s-32 lh-44rpx ml-4">热门推荐</view>
<image class="ml-6" :src="`${urlDomain}crmebimage/presets/haowuyou.png`"></image>
</view>
<view class='recommendList borderPad' :class="isShowTitle?'':'mt30'">
<WaterfallsFlow :wfList='tempArr' :type="1" :isStore="1">
<template slot-scope="{item}">{{item.name}}
<WaterfallsFlowItem :item="item" :type="1" :isStore="1"/>
</template>
</WaterfallsFlow>
</view>
<view class='loadingicon acea-row row-center-wrapper' :hidden='loading==false'>
<text class='loading iconfont icon-jiazai'></text>
</view>
<view class="mores-txt flex" v-if="goodScroll">
<text>我是有底线的</text>
</view>
</block>
</view>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import {
mapGetters
} from "vuex";
import animationType from '@/utils/animationType.js'
import {
getProductHot
} from '@/api/product.js';
import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue';
import WaterfallsFlowItem from '@/components/WaterfallsFlowItem/WaterfallsFlowItem.vue';
let app = getApp();
export default {
name: 'recommend',
computed: mapGetters(['uid']),
components: {
WaterfallsFlow
},
props: {
categoryId: {
type: Number,
default: function() {
return 0;
}
},
//是否显示头部
isShowTitle: {
type: Boolean,
default: function() {
return true;
}
},
//是否使用本页面的请求数据
isDefault: {
type: Boolean,
default: function() {
return true;
}
},
//使用的页面中调用数据传来的商品列表isDefault为false时使用
recommendList: {
type: Array,
default: function() {
return [];
}
}
},
data() {
return {
urlDomain: this.$Cache.get("imgHost"),
theme: app.globalData.theme,
goodScroll: false,
params: { //精品推荐分页
page: 1,
limit: 10,
cid: 0
},
loading: false,
tempArr: []
};
},
watch: {
categoryId: function(val) { //监听props中的属性
if (!this.isDefault) {
this.params.page = 1;
this.tempArr = [];
this.goodScroll = false;
this.get_host_product()
}
}
},
mounted() {
if (this.isDefault) {
this.params.page = 1;
this.goodScroll = false;
this.tempArr = [];
this.get_host_product()
}else{
this.tempArr = this.recommendList
};
},
methods: {
/**
* 获取我的推荐
*/
get_host_product: function() {
if (this.goodScroll) return;
this.loading = true
this.params.cid = this.categoryId;
getProductHot(
this.params
).then((res) => {
this.$set(this.params, 'page', this.params.page + 1);
this.goodScroll = this.params.page > res.data.totalPage;
this.tempArr = this.tempArr.concat(res.data.list || []);
this.$emit('getRecommendLength', this.tempArr.length);
this.loading = false
}).catch(err => {
this.loading = false
});
}
},
onReachBottom() {
if (this.isDefault) this.get_host_product();
}
}
</script>
<style scoped lang="scss">
.recommend-box {
image {
width: 42rpx;
height: 36rpx;
}
view {
font-weight: 600;
}
}
.mores-txt {
width: 100%;
align-items: center;
justify-content: center;
height: 70rpx;
color: #999;
font-size: 24rpx;
.iconfont {
margin-top: 2rpx;
font-size: 20rpx;
}
}
.recommend {
.title {
height: 120rpx;
line-height: 120rpx;
font-size: 32rpx;
color: #333333;
.iconfont {
font-size: 170rpx;
color: #454545;
}
}
.name {
margin: 0 28rpx;
}
}
</style>