<template>
|
<!-- 门店经营报表 -->
|
<view>
|
<view class="store-box" v-show="isShow">
|
<view class="store-box-row font-12 gray">
|
<text>广州天河店</text>
|
</view>
|
<view class="store-box-row font-12 gray">
|
<text>长沙五一店</text>
|
</view>
|
<view class="store-box-row font-12 gray">
|
<text>深圳南山店</text>
|
</view>
|
</view>
|
<view>
|
<h-tabs
|
class="tab"
|
:tabData="tabs"
|
:config="{
|
color: '#abb1cc',
|
activeColor: '#518EFF',
|
underLineColor: '#518EFF',
|
underLineHeight: 6,
|
fontSize: '28',
|
underLineWidth: 60,
|
}"
|
@tabClick="tabClick($event)"
|
/>
|
</view>
|
<view v-if="tabIndex==0">
|
<view class="content-box">
|
<view class="content-box-header">
|
<text class="font-16">2020年12月24日</text>
|
</view>
|
<view class="font-14">
|
<view class="content-box-row flex justify-between">
|
<text>营业收入</text>
|
<text>￥12,122</text>
|
</view>
|
<view class="content-box-row flex justify-between">
|
<text>现金收入</text>
|
<text>￥12,122</text>
|
</view>
|
<view class="content-box-row flex justify-between">
|
<text>盈划扣</text>
|
<text>￥12,122</text>
|
</view>
|
<view class="content-box-row flex justify-between">
|
<text>本金消耗</text>
|
<text>￥12,122</text>
|
</view>
|
<view class="content-box-row flex justify-between">
|
<text>赠送消耗</text>
|
<text>￥12,122</text>
|
</view>
|
<view class="content-box-row flex justify-between">
|
<text>现金退款</text>
|
<text>￥12,122</text>
|
</view>
|
<view class="content-box-row flex justify-between">
|
<text>卡项回归</text>
|
<text>￥12,122</text>
|
</view>
|
<view class="content-box-row flex justify-between">
|
<text>欠款</text>
|
<text>￥12,122</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view v-if="tabIndex==2">
|
<view class="content-box font-14">
|
<navigator url="./analyse" hover-class="none" class="content-row">
|
<text>营业收入</text>
|
<text class="iconfont iconarrow-backimg gray"></text>
|
</navigator>
|
<view class="content-row">
|
<text>现金收入</text>
|
<text class="iconfont iconarrow-backimg gray"></text>
|
</view>
|
<view class="content-row">
|
<text>盈划扣</text>
|
<text class="iconfont iconarrow-backimg gray"></text>
|
</view>
|
<view class="content-row">
|
<text>本金消耗</text>
|
<text class="iconfont iconarrow-backimg gray"></text>
|
</view>
|
<view class="content-row">
|
<text>赠送消耗</text>
|
<text class="iconfont iconarrow-backimg gray"></text>
|
</view>
|
<view class="content-row">
|
<text>现金退款</text>
|
<text class="iconfont iconarrow-backimg gray"></text>
|
</view>
|
<view class="content-row">
|
<text>卡项回归</text>
|
<text class="iconfont iconarrow-backimg gray"></text>
|
</view>
|
<view class="content-row">
|
<text>欠款</text>
|
<text class="iconfont iconarrow-backimg gray"></text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import HTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
|
export default {
|
components: {
|
HTabs
|
},
|
data() {
|
return {
|
tabs:[
|
{
|
state: 1,
|
name: '每日'
|
},
|
{
|
state: 2,
|
name: '每月'
|
},
|
{
|
state: 3,
|
name: '专项'
|
}
|
],
|
isShow:false,
|
tabIndex:0
|
}
|
},
|
methods:{
|
onNavigationBarButtonTap(e){
|
if(e.index==0){
|
uni.navigateTo({
|
url:"./hint"
|
})
|
}
|
if(e.index==1){
|
this.isShow=!this.isShow
|
}
|
},
|
tabClick(index){
|
this.tabIndex=index
|
}
|
}
|
}
|
</script>
|
|
<style>
|
page{
|
background: #F6F6F8;
|
}
|
.tab{
|
background: #FFFFFF;
|
border-bottom: #EDEAF4;
|
border-bottom-left-radius: 4px;
|
border-bottom-right-radius: 4px;
|
box-shadow:0 6px 6px rgba(237,234,244,0.5);
|
}
|
.content-box{
|
background: #FFFFFF;
|
border: 1px solid #EDEAF4;
|
border-radius: 4px;
|
margin: 10px 10px 0;
|
padding: 10px;
|
}
|
.content-box-header{
|
border-bottom: 1px solid #EDEAF4;
|
padding: 0 5px 10px;
|
}
|
.content-box-row{
|
padding: 10px 5px 0;
|
}
|
.store-box{
|
border: 1px solid #EDEAF4;
|
border-radius: 4px;
|
background: #FFFFFF;
|
position: absolute;
|
top: -10px;
|
right: 38px;
|
padding: 0 10px;
|
z-index: 999;
|
}
|
.store-box-row{
|
border-bottom: 1px solid #EDEAF4;
|
padding: 5px 0;
|
}
|
.store-box-row:nth-last-child(1){
|
border: 0;
|
}
|
.content-row{
|
border-bottom: 1px solid #EDEAF4;
|
padding: 10px 5px;
|
display: flex;
|
justify-content: space-between;
|
}
|
.content-row:nth-last-child(1){
|
border: 0;
|
}
|
</style>
|
