|
| xqd
@@ -0,0 +1,330 @@
|
|
|
+<template>
|
|
|
+ <app-layout>
|
|
|
+ <view class="header">
|
|
|
+ <view class="date-group">
|
|
|
+ <view class="date">
|
|
|
+ <picker mode="date" :value="startDate" @change="startDateChange">
|
|
|
+ <view>{{startDate}}</view>
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+ <text>至</text>
|
|
|
+ <view class="date">
|
|
|
+ <picker mode="date" :value="endDate" @change="endDateChange">
|
|
|
+ <view>{{endDate}}</view>
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="summary-btn" @click="search">统计</view>
|
|
|
+ </view>
|
|
|
+ <view class="tabs">
|
|
|
+ <view class="tab" :class="tabIndex==index?'active':''" v-for="(item,index) in tabs" :key="index" @click="changeTab(index)">
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ <view class="list-item" v-for="(item,index) in tabs[tabIndex]['listItem']" :key="index">
|
|
|
+ <text>{{item.name}}</text>
|
|
|
+ <text>{{item.value}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="desc" @click="showDesc = !showDesc">
|
|
|
+ <text>{{tabs[tabIndex].name}}说明</text>
|
|
|
+ <image src="../../../static/image/icon/arrow-right.png"></image>
|
|
|
+ </view>
|
|
|
+ <view v-if="showDesc" class="show-desc">
|
|
|
+ <view class="main">
|
|
|
+ <image class="close" src="../../../static/image/icon/close.png" @click="showDesc = !showDesc"></image>
|
|
|
+ <view class="title">{{tabs[tabIndex].name}}说明</view>
|
|
|
+ <view class="desc-con">{{tabs[tabIndex].desc}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </app-layout>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ showDesc:'',
|
|
|
+ tabIndex: 0,
|
|
|
+ date: this.getDate({
|
|
|
+ format: true
|
|
|
+ }),
|
|
|
+ startDate:this.getDate('start'),
|
|
|
+ endDate:this.getDate('end'),
|
|
|
+ tabs:[
|
|
|
+ {
|
|
|
+ name: '人数',
|
|
|
+ value: 1,
|
|
|
+ desc:'人数说明',
|
|
|
+ listItem:[
|
|
|
+ {
|
|
|
+ key: 'newCustomer',
|
|
|
+ name: '新增顾客',
|
|
|
+ value: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'newShare',
|
|
|
+ name: '新增代理',
|
|
|
+ value: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'myTeam',
|
|
|
+ name: '团队人数',
|
|
|
+ value: 0,
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '业绩',
|
|
|
+ value: 2,
|
|
|
+ desc:'业绩说明',
|
|
|
+ listItem:[
|
|
|
+ {
|
|
|
+ key: 'selfPerformance',
|
|
|
+ name: '个人业绩',
|
|
|
+ value: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'teamPerformance',
|
|
|
+ name: '团队业绩',
|
|
|
+ value: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'totalPerformance',
|
|
|
+ name: '总共业绩',
|
|
|
+ value: 0,
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '销量',
|
|
|
+ value: 3,
|
|
|
+ desc:'销量说明',
|
|
|
+ listItem:[
|
|
|
+ {
|
|
|
+ key: 'selfSale',
|
|
|
+ name: '个人销量',
|
|
|
+ value: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'teamSale',
|
|
|
+ name: '团队销量',
|
|
|
+ value: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'totalSale',
|
|
|
+ name: '总共销量',
|
|
|
+ value: 0,
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '返利',
|
|
|
+ value: 4,
|
|
|
+ desc: '返利说明',
|
|
|
+ listItem:[
|
|
|
+ {
|
|
|
+ key: 'selfCash',
|
|
|
+ name: '个人返利',
|
|
|
+ value: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'teamCash',
|
|
|
+ name: '团队返利',
|
|
|
+ value: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'totalCash',
|
|
|
+ name: '总共返利',
|
|
|
+ value: 0,
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ }
|
|
|
+
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ changeTab(index){
|
|
|
+ this.tabIndex = index
|
|
|
+ },
|
|
|
+ search(){
|
|
|
+ this.$showLoading();
|
|
|
+ this.$request({
|
|
|
+ url: this.$api.share.summary,
|
|
|
+ data: {
|
|
|
+ startDate: this.startDate,
|
|
|
+ endDate: this.endDate
|
|
|
+ }
|
|
|
+ }).then(response => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.$hideLoading();
|
|
|
+ if(response.code == 1){
|
|
|
+ const data = response.data
|
|
|
+ this.tabs.map(item => {
|
|
|
+ for (const index in item['listItem']) {
|
|
|
+ item['listItem'][index]['value'] = data[item['listItem'][index]['key']].toString()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.$hideLoading();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ startDateChange(e){
|
|
|
+ this.startDate = e.detail.value;
|
|
|
+ },
|
|
|
+ endDateChange(e){
|
|
|
+ this.endDate = e.detail.value;
|
|
|
+ },
|
|
|
+ getDate(type) {
|
|
|
+ const date = new Date();
|
|
|
+
|
|
|
+ let year = date.getFullYear();
|
|
|
+ let month = date.getMonth() + 1;
|
|
|
+ let day = date.getDate();
|
|
|
+
|
|
|
+ if (type === 'start') {
|
|
|
+ const startDate = new Date(date.getTime() - 30 * 24 * 60 * 60 * 1000);
|
|
|
+ year = startDate.getFullYear();
|
|
|
+ month = startDate.getMonth() + 1;
|
|
|
+ day = startDate.getDate();
|
|
|
+ } else if (type === 'end') {
|
|
|
+ //return `${year}-${month}-${day}`;
|
|
|
+ }
|
|
|
+ month = month > 9 ? month : '0' + month;
|
|
|
+ day = day > 9 ? day : '0' + day;
|
|
|
+
|
|
|
+ return `${year}-${month}-${day}`;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(){
|
|
|
+ this.search()
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ $defaultSpace:30rpx;
|
|
|
+ $borderColor:#ccc;
|
|
|
+ $defaultColor:#FF3A30;
|
|
|
+ .header{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background: white;
|
|
|
+ padding: $defaultSpace/3 $defaultSpace;
|
|
|
+ .date-group{
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ border: 1rpx solid $borderColor;
|
|
|
+ height: 80rpx;
|
|
|
+ align-items: center;
|
|
|
+ .date{
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ text{
|
|
|
+ padding: 0 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .summary-btn{
|
|
|
+ padding: 0 $defaultSpace;
|
|
|
+ background: $defaultColor;
|
|
|
+ color: #ffffff;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tabs{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin: $defaultSpace $defaultSpace;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ background: white;
|
|
|
+ .tab{
|
|
|
+ background: $defaultColor;
|
|
|
+ color: #333333;
|
|
|
+ border-left: 1rpx solid $borderColor;
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: $defaultSpace 0;
|
|
|
+ &.active{
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content{
|
|
|
+ background: white;
|
|
|
+ margin-top: $defaultSpace;
|
|
|
+ .list-item{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: $defaultSpace;
|
|
|
+ border-bottom: 1px solid $borderColor;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .desc{
|
|
|
+ padding: $defaultSpace;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ background: white;
|
|
|
+ margin-top: $defaultSpace;
|
|
|
+ color: #666666;
|
|
|
+ image{
|
|
|
+ width: 20rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .show-desc{
|
|
|
+ position: fixed;
|
|
|
+ background: rgba(0,0,0,.3);
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .main{
|
|
|
+ width: 90%;
|
|
|
+ height: 80%;
|
|
|
+ border-radius: $defaultSpace;
|
|
|
+ background: white;
|
|
|
+ position: relative;
|
|
|
+ .close{
|
|
|
+ position: absolute;
|
|
|
+ right: $defaultSpace;
|
|
|
+ top: $defaultSpace;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 2px solid $borderColor;
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+ color: #666666;
|
|
|
+ padding: $defaultSpace 20rpx;
|
|
|
+ }
|
|
|
+ .desc-con{
|
|
|
+ padding: $defaultSpace 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
