312 lines
53 KiB
Vue
312 lines
53 KiB
Vue
|
<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>
|