|
|
<template> <view class="app">
<!-- <view class="nav-view"> <text class="nav-title">云商城</text> </view> --> <swiper class="swiper" indicator-active-color="white" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"> <swiper-item @click="toYunProduct()"> <view class="swiper-item uni-bg-red"> <image class="swiper-img swiper-img-tt" src="/static/shop/677088217d8a00aa.jpg"></image> </view> </swiper-item> <swiper-item @click="toYunProduct()"> <view class="swiper-item uni-bg-green"> <image class="swiper-img" src="/static/shop/rem.jpg"></image> </view> </swiper-item> <swiper-item @click="toYunProduct()"> <view class="swiper-item uni-bg-blue"> <image class="swiper-img" src="/static/shop/b7f2be6053cc88b4.jpg"></image> </view> </swiper-item> </swiper> <view class="menu-item"> <text class="menu-txt">云仓备货</text> <text class="menu-txt" style="border-left-width: 0rpx;">云仓提货</text> </view> <view class="shop-list"> <view class="shop-item" @click="toNewDetail"> <view class="shop-item-left"> <text class="shop-item-left-title">通知 | 关于“轻未来超轻维阻燃粉”外包装升级通知</text> <text class="shop-item-left-time">2021年4月23日</text> </view> <image src="/static/shop/677088217d8a00aa.jpg" class="shop-item-img"> </image> </view> <view class="shop-item" @click="toNewDetail"> <view class="shop-item-left"> <text class="shop-item-left-title">通知 | 关于“轻未来超轻维阻燃粉”外包装升级通知</text> <text class="shop-item-left-time">2021年4月23日</text> </view> <image src="/static/shop/677088217d8a00aa.jpg" class="shop-item-img"> </image> </view> <view class="shop-item" @click="toNewDetail"> <view class="shop-item-left"> <text class="shop-item-left-title">通知 | 关于“轻未来超轻维阻燃粉”外包装升级通知</text> <text class="shop-item-left-time">2021年4月23日</text> </view> <image src="/static/shop/677088217d8a00aa.jpg" class="shop-item-img"> </image> </view> </view> </view> </template>
<script> import tabbarMixin from './mixin/tabbar' import homeMixin from './mixin/home' import pageHeader from './components/page-header.vue' import banner from './components/banner.vue' import productList from '@/pages/product/components/product-list.vue' import homeAdvertModal from './components/home-advert-modal.vue' export default { components: { pageHeader, banner, productList, homeAdvertModal }, mixins: [homeMixin, tabbarMixin], data() { return { navList: [],//导航列表
advertList: [],//广告列表
hotList: [],//热门推荐
indicatorDots: true, autoplay: true, interval: 2000, duration: 500, swipeImgs:['/static/shop/677088217d8a00aa.jpg','/static/shop/rem.jpg','/static/shop/b7f2be6053cc88b4.jpg'] } }, computed: { changeIndicatorDots(e) { this.indicatorDots = !this.indicatorDots }, changeAutoplay(e) { this.autoplay = !this.autoplay }, intervalChange(e) { this.interval = e.target.value }, durationChange(e) { this.duration = e.target.value }, midAdvert(){ if(this.advertList.length === 0) return {}; const res = this.advertList.filter(item=> item.advert_type === 'middle'); return res.length > 0 ? res[0]: {}; }, carousel(){ return this.advertList.filter(item=> item.advert_type === 'carousel'); } }, onLoad() { this.loadAdvert(); this.loadNavList(); setTimeout(()=>{ //this.navTo('/pages/address/list')
}, 1000) }, methods: { toNewDetail(){ this.navTo(`/pages/yunProduct/newDetail`); }, toYunProduct(){ let keyword=1 this.navTo(`/pages/yunProduct/detail?keyword=${keyword}`); }, //加载广告 缓存10分钟
async loadAdvert(){ const res = await this.$request('advert', 'getAdvertList', {}, { cache: 10*60 }); this.advertList = res.data; this.log(res); }, //加载导航 缓存1小时
async loadNavList(){ const res = await this.$request('advert', 'getNavList', {}, { cache: 60*60*0, }); this.navList = res.data; }, } } </script>
<style> page{ background-color: white; } </style> <style scoped lang="scss"> /* 分类 */ .swiper{ height: 375rpx; } .swiper-item{
} .swiper-img{ width: 100%; } .menu-item{ display: flex; flex-direction: row; align-items: center; } .menu-txt{ height: 90rpx; line-height: 90rpx; text-align: center; flex: 1; font-size: 18px; font-weight: 500; color: #EDAF8B; border: 1px solid #EDAF8B; } .shop-list{ } .shop-item{ display: flex; justify-content: space-between; align-items: center; flex-direction: row; margin: 40rpx 20rpx; } .shop-item-left{ flex: 1; height: 200rpx; position: relative; margin: 0rpx 40rpx 0rpx 0rpx; } .shop-item-img{ width: 200rpx; height: 200rpx; border-radius: 10rpx; } .shop-item-left-title{ font-size: 16px; // font-weight: 500;
color: #333333; } .shop-item-left-time{ position: absolute; bottom: 10rpx; left: 0rpx; font-size: 13px; font-weight: 500; color: #999999; } </style>
|