develop
/
qwl-wechat-h5
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 Commits
1 Branch
0 Tags
1.5 MiB
 
 
 
 
Tree: a29c2fa753
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'a29c2fa753'
${ noResults }
qwl-wechat-h5/pages/tabbar/home.vue

571 lines
12 KiB
Raw Blame History

<template>
<view class="app">
<!-- <view class="nav-view">
<text class="nav-title">轻未来</text>
</view> -->
<view>
<view class="date-item">
<text class="triangle-bottomright"></text>
<text class="date-title">时间</text>
<text class="triangle-topleft"></text>
<text class="date-txt">2021年</text>
</view>
<view @click="toAchievement">
<view class="service-item">
<text class="service-number">100.00</text>
<text class="service-unit">万</text>
</view>
<text class="service-title">服务业绩(元)</text>
<view class="charge-item">
<text class="charge-item-money">充值业绩：10.00万</text>
<text class="charge-item-money">本月营业额：8000元</text>
</view>
</view>
<view class="service-item">
<text class="service-number">1000</text>
</view>
<text class="service-title">服务人数 (个)</text>
<view class="charge-item">
<text class="charge-item-money">分公司数量：800 (个)</text>
<text class="charge-item-money">合伙人：900 (个)</text>
</view>
<view class="separator-section"></view>
<view class="rank-list">
<view class="rank-title">
<image class="rank-img" src="/static/home/rank.png"></image>
<text class="rank-title-txt">4月业绩代理排名</text>
</view>
<view class="rank-item">
<view class="rank-top">
<image class="rank-user-img" src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3832721317,312397218&fm=26&gp=0.jpg"></image>
<view class="rank-des">
<view class="rank-des-name">
<text class="rank-des-name-txt">张三</text>
<text class="rank-des-nick-name">zhangsan</text>
</view>
<text class="rank-des-nick-name rank-des-company">分公司</text>
</view>
<image class="rank-rate-img" src="/static/home/firstRank.png"></image>
</view>
<view class="rank-bottom">
<view class="rank-bottom-item">
<view class="rank-bottom-item-des">
<text class="rank-bottom-item-des-number">100.00</text>
<text class="rank-bottom-item-des-unit"> 万</text>
</view>
<text class="rank-bottom-item-name">服务业绩</text>
</view>
<view class="rank-bottom-item">
<view class="rank-bottom-item-des">
<text class="rank-bottom-item-des-number">10.00</text>
<text class="rank-bottom-item-des-unit"> 万</text>
</view>
<text class="rank-bottom-item-name">充值业绩</text>
</view>
<view class="rank-bottom-item">
<view class="rank-bottom-item-des">
<text class="rank-bottom-item-des-number">10000</text>
<text class="rank-bottom-item-des-unit"> 个</text>
</view>
<text class="rank-bottom-item-name">服务人数</text>
</view>
</view>
</view>
<view class="rank-item">
<view class="rank-top">
<image class="rank-user-img" src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3832721317,312397218&fm=26&gp=0.jpg"></image>
<view class="rank-des">
<view class="rank-des-name">
<text class="rank-des-name-txt">张三</text>
<text class="rank-des-nick-name">zhangsan</text>
</view>
<text class="rank-des-nick-name rank-des-company">分公司</text>
</view>
<image class="rank-rate-img" src="/static/home/firstRank.png"></image>
</view>
<view class="rank-bottom">
<view class="rank-bottom-item">
<view class="rank-bottom-item-des">
<text class="rank-bottom-item-des-number">100.00</text>
<text class="rank-bottom-item-des-unit"> 万</text>
</view>
<text class="rank-bottom-item-name">服务业绩</text>
</view>
<view class="rank-bottom-item">
<view class="rank-bottom-item-des">
<text class="rank-bottom-item-des-number">10.00</text>
<text class="rank-bottom-item-des-unit"> 万</text>
</view>
<text class="rank-bottom-item-name">充值业绩</text>
</view>
<view class="rank-bottom-item">
<view class="rank-bottom-item-des">
<text class="rank-bottom-item-des-number">10000</text>
<text class="rank-bottom-item-des-unit"> 个</text>
</view>
<text class="rank-bottom-item-name">服务人数</text>
</view>
</view>
</view>
<view class="rank-item">
<view class="rank-top">
<image class="rank-user-img" src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3832721317,312397218&fm=26&gp=0.jpg"></image>
<view class="rank-des">
<view class="rank-des-name">
<text class="rank-des-name-txt">张三</text>
<text class="rank-des-nick-name">zhangsan</text>
</view>
<text class="rank-des-nick-name rank-des-company">分公司</text>
</view>
<image class="rank-rate-img" src="/static/home/firstRank.png"></image>
</view>
<view class="rank-bottom">
<view class="rank-bottom-item">
<view class="rank-bottom-item-des">
<text class="rank-bottom-item-des-number">100.00</text>
<text class="rank-bottom-item-des-unit"> 万</text>
</view>
<text class="rank-bottom-item-name">服务业绩</text>
</view>
<view class="rank-bottom-item">
<view class="rank-bottom-item-des">
<text class="rank-bottom-item-des-number">10.00</text>
<text class="rank-bottom-item-des-unit"> 万</text>
</view>
<text class="rank-bottom-item-name">充值业绩</text>
</view>
<view class="rank-bottom-item">
<view class="rank-bottom-item-des">
<text class="rank-bottom-item-des-number">10000</text>
<text class="rank-bottom-item-des-unit"> 个</text>
</view>
<text class="rank-bottom-item-name">服务人数</text>
</view>
</view>
</view>
</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: [],//热门推荐
}
},
computed: {
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: {
toAchievement(){
this.navTo('/pages/qHome/achievement')
},
//加载广告 缓存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">
/* 分类 */
.nav-view{
height: 64rpx;
border-bottom: 1rpx solid #E6E6E6;
}
.nav-title{
display: block;
font-size: 20px;
color:#333333 ;
text-align: center;
line-height: 64rpx;
}
.date-item{
margin: 25rpx 0rpx 30rpx;
}
.date-title{
background-color:#EDAF8B ;
color: white;
margin: 10rpx 10rpx 0rpx 20rpx;
font-size: 13px;
}
.date-txt{
font-size: 15px;
color: #333333;
}
.triangle-topleft {
position: relative;
top: 42rpx;
left: -12rpx;
width: 0;
height: 0;
border-top: 36rpx solid #EDAF8B;
border-right: 36rpx solid transparent;
}
.triangle-bottomright {
position: relative;
top: -38rpx;
left: 20rpx;
width: 0;
height: 0;
border-bottom: 36rpx solid #EDAF8B;
border-left: 36rpx solid transparent;
}
.service-item{
margin: 35rpx 10rpx 0rpx 30rpx;
}
.service-number{
color: #EDAF8B;
font-size: 36px;
margin: 0rpx 5rpx 0rpx 0rpx;
}
.service-unit{
color: #EDAF8B;
font-size: 18px;
margin: 0rpx 0rpx 20rpx 0rpx;
}
.service-title{
font-size: 15px;
color: #999999;
margin: 0rpx 0rpx 10rpx 30rpx;
}
.charge-item{
margin: 34rpx 20rpx 50rpx 30rpx;
padding:15rpx 20rpx;
background-color:#F5F5F5 ;
display: flex;
justify-content: space-between;
align-items: center;
}
.charge-item-money{
color: #999999;
font-size: 13px;
}
.separator-section{
height: 20rpx;
background: #F5F5F5;
}
.rank-list{
padding: 10rpx 60rpx;
}
.rank-title{
border-bottom: 1rpx solid $separatorColor;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.rank-img{
display: inline-block;
width: 44rpx;
height: 44rpx;
margin: 0rpx 28rpx 0rpx -10rpx;
}
.rank-title-txt{
color: #333333;
font-size: 16px;
font-weight: bold;
height: 110rpx;
line-height: 110rpx;
}
.rank-item{
border-bottom: 1rpx solid $separatorColor;
}
.rank-top{
margin: 20rpx 0rpx;
position: relative;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
// vertical-align: middle;
}
.rank-user-img{
width: 130rpx;
height: 130rpx;
border-radius: 50%;
display: inline-block;
margin-right: 28rpx;
}
.rank-des{
display: inline-block;
}
.rank-des-name{
font-size: 15px;
font-weight: bold;
}
.rank-des-name-txt{
font-size: 15px;
font-weight: bold;
color: #333333;
margin:0rpx 10rpx 0rpx 0rpx
}
.rank-des-nick-name{
font-size: 13px;
font-weight: 500;
color: #999999;
}
.rank-des-company{
position: relative;
top: -0rpx;
}
.rank-bottom{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 20rpx 0rpx;
}
.rank-bottom-item{
text-align: center;
}
.rank-bottom-item-des{
}
.rank-bottom-item-des-number{
font-size: 18px;
font-weight: bold;
color: #333333;
}
.rank-bottom-item-des-unit{
font-size: 13px;
font-weight: 500;
color: #333333;
margin: 0rpx 4rpx;
}
.rank-bottom-item-name{
position: relative;
top: -4rpx;
font-size: 13px;
font-weight: 500;
color: #999999;
}
.rank-rate-img{
position: absolute;
// top: 18rpx;
right: 0rpx;
width: 50rpx;
height: 50rpx;
border-radius: 50%;
}
.cate-section {
display: flex;
align-items: center;
flex-wrap:wrap;
padding: 10rpx 16rpx;
background: #fff;
.item {
display: flex;
flex-direction: column;
align-items: center;
width: 20%;
padding: 20rpx 0;
font-size: 24rpx;
color: #333;
}
.icon {
width: 84rpx;
height: 84rpx;
margin-bottom: 14rpx;
border-radius: 50%;
}
}
.mid-ad{
width: 100%;
height: 208rpx;
padding: 0 20rpx 20rpx;
background: #fff;
image{
width:100%;
height: 100%;
}
}
.floor-header{
padding: 6rpx 30rpx 8rpx 24rpx;
font-size: 24rpx;
color: #999;
background-color: #fff;
.icon{
flex-shrink: 0;
width: 80rpx;
height: 80rpx;
margin-right: 20rpx;
}
.tit-box{
flex: 1;
display: flex;
flex-direction: column;
}
.tit{
margin-bottom: 10rpx;
font-size: 32rpx;
color: #333;
font-weight: 700;
}
.icon-you{
font-size: 28rpx;
color: #999;
}
}
.hot-wrap{
padding-top: 20rpx;
background: linear-gradient(to bottom, #fff 10rpx, #f7f7f7);
opacity: 0;
transition: opacity .2s;
&.show{
opacity: 1;
}
.floor-header{
padding-bottom: 30rpx;
}
/deep/ .list-item{
box-shadow: 4rpx 0 10rpx rgba(0,0,0,.06);
}
}
</style>