Huanyuyuehui/pages/columnGoods/HotNewGoods/index.vue

312 lines
53 KiB
Vue
Raw Normal View History

2024-03-21 17:52:58 +08:00
<template>
<view class="quality-recommend" :style="viewColor">
<view class="quality_header">
<view class="slider-banner swiper">
<view class="swiper">
<swiper indicator-dots="true" :autoplay="autoplay" :interval="interval" :duration="duration"
indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
<block v-for="(item,index) in imgUrls" :key="index">
<swiper-item>
<image :src="item.pic" class="slide-image" @click="goUrl(item.url)"></image>
</swiper-item>
</block>
</swiper>
</view>
</view>
</view>
<view class="recommend_count">
<view class="title acea-row">
<view class="name"> {{ name }}</view>
<text>{{ desc }}</text>
</view>
<view class="recommend_goods">
<block v-for="(item,index) in recommendList" :key="index" v-if="index < 3">
<view class="list" @click="goDetail(item)">
<view class="picture">
<image :src="item.image"></image>
</view>
<view class="name line1">{{item.store_name}}</view>
</view>
</block>
</view>
</view>
<view class="wrapper">
<GoodList :bastList="goodsList" :is-sort="false" :isLogin='isLogin'></GoodList>
<view class="txt-bar" v-if="goodsList.length>0 && !isScroll">我是有底线的~</view>
</view>
</view>
</template>
<script>
import emptyPage from '@/components/emptyPage.vue'
import GoodList from "@/components/goodList";
import { getIndexData } from '@/api/api.js';
import { getGroomList,getHotBanner } from "@/api/store";
import { goShopDetail } from '@/libs/order.js'
import {initiateAssistApi} from '@/api/activity.js';
import util from "@/utils/util";
import { mapGetters } from "vuex";
import { toLogin } from '@/libs/login.js';
const typeData = {
best:{
desc:'新品抢先购',
name:'精品推荐'
},
hot:{
desc:'剁手必备指南',
name:'热门榜单'
},
new:{
desc:'发现品质好物',
name:'首发新品'
},
good:{
desc:'惊喜折扣价',
name:'推荐单品'
},
}
export default {
computed: mapGetters(['isLogin','uid','viewColor']),
name: "HotNewGoods",
components: {
GoodList,
emptyPage,
},
props: {},
data: function() {
return {
imgUrls: [],
goodsList: [],
recommendList: [],
name: "",
hotData:[],
loaded:false,
desc: "",
type:0,
autoplay:true,
circular:false,
interval: 3000,
duration: 500,
page:1,
limit:8,
isScroll:true,
};
},
/**
* 用户点击右上角分享
*/
// #ifdef MP
onShareAppMessage: function() {
let that = this;
wx.showShareMenu({
withShareTicket: true,
menus: ['shareAppMessage', 'shareTimeline']
})
return {
title: that.name || '',
path: 'pages/columnGoods/HotNewGoods/index?type='+that.type,
}
},
onShareTimeline: function() {
let that = this;
return {
title: that.name || '',
query: {
type: that.type
},
imageUrl: ''
}
},
// #endif
onLoad: function(option) {
this.type = option.type
this.getIndexGroomList();
this.getHotBanner();
getIndexData().then(res=>{
this.hotData = res.data.hot;
}).finally(e=>{
this.loaded = true;
this.titleInfo();
});
},
watch:{
name(n){
uni.setNavigationBarTitle({
title:n||'加载中'
})
}
},
methods: {
goUrl(url){
this.$util.JumpPath(url);
},
titleInfo: function() {
if(!this.loaded){
this.name = '';
this.desc = '';
}else{
let name = (typeData[this.type]||{}).name || '精品推荐';
let url = this.$route ? this.$route.fullPath : ('/' + util.getNowUrl());
this.hotData.forEach(data=>{
if(data.url == url) name = data.title;
})
this.name = name;
this.desc = (typeData[this.type]||{}).desc || '新品抢先购';
}
},
getIndexGroomList: function() {
if(!this.isScroll) return
let that = this;
let type = this.type;
getGroomList(type,{
page:this.page,
limit:this.limit
}).then(res => {
that.goodsList = that.goodsList.concat(res.data.list);
if(this.page == 1)that.recommendList = that.goodsList.splice(0,3);
that.isScroll = res.data.list.length>=that.limit
that.page++
})
.catch(function(res) {
that.$util.Tips({ title: res });
});
},
getHotBanner(){
let that = this
getHotBanner(this.type).then(res=>{
that.imgUrls = res.data;
})
},
goDetail(item){
goShopDetail(item, this.uid).then(res => {
if (this.isLogin) {
initiateAssistApi(item.activity_id).then(res => {
let id = res.data.product_assist_set_id;
uni.hideLoading();
uni.navigateTo({
url: '/pages/activity/assist_detail/index?id=' + id
});
}).catch((err) => {
uni.showToast({
title: err,
icon: 'none'
})
});
} else {
toLogin()
}
})
}
},
onReachBottom() {
this.getIndexGroomList()
}
};
</script>
<style lang="scss">
/deep/ .empty-box{
background-color: #f5f5f5;
}
.quality_header{
position: relative;
padding: 30rpx 20rpx 0;
&::before{
content: "";
display: block;
width: 100%;
height: 180rpx;
background: var(--view-theme);
position: absolute;
top: 0;
left: 0;
border-radius: 0 0 20rpx 20rpx;
z-index: 0;
}
}
.swiper,swiper,swiper-item,.slide-image{
width: 100%;
height: 300rpx;
border-radius: 16rpx;
z-index: 20;
}
/deep/.swiper .uni-swiper-dot{
width: 8rpx;
height: 8rpx;
border-radius: 100%;
background-color: rgba(0,0,0,.3)!important;
}
/deep/.swiper .uni-swiper-dot-active{
width: 18rpx;
background-color: #E93323!important;
border-radius: 4rpx;
margin-top: -4rpx;
}
.quality-recommend {
background: #F5F5F5;
}
.recommend_goods{
padding: 30rpx 0;
display: flex;
.list{
width: 210rpx;
margin-right: 20rpx;
&:last-child{
margin-right: 0;
}
.picture,image{
width:210rpx;
height: 210rpx;
border-radius: 16rpx;
}
.name{
font-size: 26rpx;
color: #282828;
margin-top: 14rpx;
padding: 0 4rpx;
}
}
}
.recommend_count{
min-height: 416rpx;
background-size: 100%;
background-color: #fff;
background-repeat: no-repeat;
margin: 30rpx auto 0;
width: 710rpx;
padding: 0 20rpx;
border-radius: 16rpx;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsYAAAGGCAMAAABPBrd2AAACIlBMVEUAAAD//f3/////7fr86en86en86ur/6+z86+z57u718fH86en76+v18PD48PD37u787e367u728fH86en47+/28fH38PD86en86Oj48fH/6ur57e737u/67e318vL86en67Oz67u/67O347e347Oz37+/08/P57O328PD57+/18vT38PD17u777O347u7/6Or57O347+/77O337vD47u727u/57u787Oz57e356+z47+/96uv57u757u727/D67+/17vD57+/77Oz57e376Oj37O/37+/57e357e/57+/67vD38fH67fD87Oz87O357Oz47+/28PD57Oz57e/67e347+/57O347+/95+n76+377Oz57+/47u/67ez86On76+z96+396ur67e397e3+7Oz86ur57e387Oz/6Oj84uH57e386Ob/6+z67O/85ef67Oz47Ov57u765ef/5en/6+385eT74uX+6ur/4+r84+f66+v87e756en65+L84uX67Oz67Ov57e385+n55OX85+f75ub639727Of85+r44eP/5ez87Oz+7Oz+6Of85On47u776ej56uX/4ef87e325+X96e376Oj+5eb76un+7+/+7e366Ob+4OD96+z57Oz86ej66+386Of/3+b+4eX76Of87u786ef75+b76en66un+3uP66ef86Oj/6ur76Of86en76eX66Ob+5+X67On/5uv77OpN2oM2AAAAtnRSTlMABgMJwrm/DK0OEbeyQSE6qlonuz41MsXAJMaLSn0TvXpVpoaDOBaTRF4ZRimiHsaVTqQcPC5qsH+OH69tcS9QLG+oYrUbKmVIUlcYU52biGAVdGZ3TJBcxKCzaGN2x7aZwzGesceYlsbGTcbENsNyj5nGx8bGxcfHxmpKx8fDQ0abw8PDv8bHwsPIt7+/x3aWyMeQyMeaxm64u6fGqZ6Bx57HxZK8x6KOhsaKdr+NesiFx8jHwiKj4TAAAIlHSURBVHjatJnBrtJAFIaN0WjcGRdN2PkCduPOB9HVxA1Jm7rqWKCmdUOUyKJJSZWF1wTRsEATifCA/ufMGYYOt1aMfv+cM2emQwv0b+3FGyc8/vH57pvSsEMkZbLbUNvURY0GkFs0TVPPmhlT91D6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
.title {
padding: 20rpx 0;
align-items: flex-end;
.name{
font-size:32rpx;
color: #282828;
font-weight: bold;
margin-right: 20rpx;
}
text{
font-size: 24rpx;
color: #666666;
}
}
}
.wrapper{
margin-top: 30rpx;
padding: 0 20rpx;
}
.txt-bar{
padding: 20rpx 0;
text-align: center;
font-size: 26rpx;
color: #666;
background-color: #f5f5f5;
}
</style>