|
|
<template> <view class="app"> <view class="menu"> <view class="menu-item" @click="currentTitle='打款业绩'"> <text class="menu-item-txt">打款业绩</text> <view :style="{backgroundColor:currentTitle=='打款业绩'?'#EDAF8B':'white'}" class="menu-item-line"></view> </view> <view class="menu-item" @click="currentTitle='出货业绩'"> <text class="menu-item-txt">出货业绩</text> <view :style="{backgroundColor:currentTitle=='出货业绩'?'#EDAF8B':'white'}" class="menu-item-line"></view> </view> <view class="separator-line"></view> </view> <view class="separator-section"></view> <view class="achievement-head"> <view class="achievement-head-left"> <text class="achievement-head-time">2021年4月</text> <text class="achievement-head-number">打款业绩:¥99999.00</text> </view> <view class="achievement-head-right"> <text class="achievement-head-right-txt">全部</text> <image class="achievement-head-right-img" src="/static/base/select.png"></image> </view> </view>
<!-- <view class="product-section"> <text class="prduct-title">轻未来超纤维阻燃粉轻未来超纤维阻燃粉轻未来超纤维阻燃粉</text> <view class="product-des"> <view class="product-price"> <text class="product-price-sale">¥5999</text> <text class="product-price-show">¥6999</text> </view> <text class="product-number">库存:2000个</text> </view> </view> <view class="separator-section"></view> <view class="product-detail"> <text class="product-detail-title">产品描述</text> <view class="product-detail-wrap"> <text class="product-detail-txt">理想,是未来事物的美好想象和希望,也比喻对某事物榛于最完善境界的观念。是人们在实践过程中形成的,有实现可能性的、对未来社会和自身发展的向往和追求;价值观是基于人的一定的思维感官之上而作出的认知、理解、判断或抉择、也就是认定事物、判定是非的一种思维或取向、本产本具有良好疗效;</text> </view> <image class="product-detail-img" src="/static/shop/677088217d8a00aa.jpg"></image> </view> --> <!-- <view class="shop-list"> <view class="shop-item"> <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"> <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"> <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>
export default { components: { }, data() { return { currentTitle:'打款业绩', 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: { toStoreProduct(){ this.navTo(`/pages/yunProduct/storeProduct`) }, //加载广告 缓存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"> /* 分类 */
.menu{ display: flex; flex-direction: row; align-items: center; background-color: white; // background-color: yellow;
} .menu-item{ display: flex; flex-direction: column; justify-content: center; align-items: center; flex:1; } .menu-item-txt{ width: 200rpx; text-align: center; display: block; font-size: 15px; font-weight: bold; color: #333333; height: 104rpx; line-height: 104rpx; } .menu-item-line{ position: relative; top: -20rpx; background-color: #EDAF8B; height:6rpx ; width: 50rpx; } .separator-line{ position: absolute; left: 49.98%; width: 2rpx; background-color:#333333 ; height: 33rpx; } .separator-section{ background-color: $separatorColor; height: 20rpx; } .achievement-head{ margin: 36rpx; // width: 750rpx;
display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .achievement-head-time{ font-size: 18px; // font-weight: 500;
color: #333333; padding: 0rpx 0rpx 20rpx; } .achievement-head-number{ padding: 10rpx 0rpx 0rpx; display: block; font-size: 15px; font-weight: 500; color: #999999; } .achievement-head-right{ padding: 10rpx 10rpx 10rpx 25rpx; background-color:#F5F5F5 ; margin: 0rpx 10rpx 0rpx 0rpx; border-radius: 6rpx; } .achievement-head-right-txt{ font-size: 13px; font-weight: 500; color: #333333; } .achievement-head-right-img{ position: relative; top: 2rpx; display: inline-block; width: 20rpx; height: 20rpx; margin: 0rpx 10rpx; } </style>
|