APP
/
ox_zhiNengZhuShou
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

add collection list

organize
刘嘉炜 3 years ago
parent
8f2b50958b
commit
ea78a11e2b
4 changed files with 237 additions and 22 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/pages.json
  2. 172
      src/pages/collection/list/list.vue
  3. 2
      src/pages/index/index.vue
  4. 79
      src/pages/turnover/turnover.vue

6
src/pages.json
View File

@ -104,6 +104,12 @@
}
},
{
"path": "pages/collection/list/list",
"style": {
"navigationBarTitleText": "收款记录"
}
},
{
"path": "pages/collection/detail/detail",
"style": {
"navigationBarTitleText": "收款明细"

172
src/pages/collection/list/list.vue
View File

@ -0,0 +1,172 @@
<template>
<view class="collection-list">
<view class="cl-date">
<view class="cd-txt">收款日期</view>
<view class="cd-content">
<input class="cc-ipt" />
<view class="cc-icon"></view>
<picker class="cc-img">
<image></image>
</picker>
</view>
</view>
<view class="cl-list">
<view class="cl-item" v-for="i in 10" :key="i">
<view class="ci-tit-name">
<view class="ctn-name">
<view>品牌收入汇总</view>
<image></image>
</view>
<image></image>
</view>
<view class="ci-price">
<text>￥</text>10800.<text>00</text>
</view>
<view class="ci-tip">日总收入</view>
<view class="ci-preview">
<view class="cp-line cp-first">
<view><text class="margin">收款100笔</text>（￥10000.00） </view>
<view><text class="margin">退款2笔</text>（￥200.00）</view>
</view>
<view class="cp-line">
<view><text class="margin">收款100笔</text>（￥10000.00） </view>
<view><text class="margin">退款2笔</text>（￥200.00）</view>
</view>
<view class="cp-line">
<view><text class="margin">收款100笔</text>（<text class="orange">￥200.00</text>） </view>
<view><text class="margin">退款2笔</text>（<text class="orange">￥200.00</text>）</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang='scss'>
@import '~style/public.scss';
.cl-date{
padding: 26upx 24upx;
@include centerFlex(space-between);
.cd-txt{
flex-shrink: 0;
flex-grow: 0;
margin-right: 20upx;
line-height: 40upx;
font-size: 28upx;
color: #9C9C9F;
}
.cd-content{
flex-grow: 1;
padding: 26upx 20upx;
border-radius: 10upx;
background-color: #fff;
@include centerFlex(space-between);
.cc-ipt{
flex-grow: 1;
height: 100%;
font-size: 28upx;
color: #1a1a1a;
}
.cc-icon{
flex-shrink: 0;
flex-grow: 0;
margin: 0 17upx;
height: 40upx;
width: 2upx;
background-color: #f2f1f6;
}
.cc-img{
flex-shrink: 0;
flex-grow: 0;
image{
width: 40upx;
height: 40upx;
background-color: skyblue;
}
}
}
}
.cl-list{
padding: 0 24upx 60upx;
.cl-item{
margin-bottom: 24upx;
padding: 30upx;
height: 432upx;
border-radius: 10upx;
background-color: #fff;
.ci-tit-name{
margin-bottom: 42upx;
@include centerFlex(space-between);
.ctn-name{
>view{
line-height: 40upx;
font-size: 28upx;
color: #1a1a1a;
@include textHide(1);
}
@include centerFlex(flex-start);
}
image{
flex-shrink: 0;
flex-grow: 0;
margin-left: 12upx;
width: 28upx;
height: 28upx;
background-color: skyblue;
}
}
.ci-price{
text-align: center;
font-size: 64upx;
font-weight: 500;
color: #1a1a1a;
@include textHide(1);
>text{
font-size: 32upx;
}
}
.ci-tip{
line-height: 40upx;
text-align: center;
font-size: 28upx;
color: #9c9c9f;
}
.ci-preview{
padding-top: 38upx;
.cp-line{
@include centerFlex(space-between);
>view{
flex-grow: 0;
flex-shrink: 0;
width: 49%;
line-height: 32upx;
font-size: 24upx;
color: #9c9c9f;
@include textHide(1);
.margin{
margin-right: 10upx;
}
.orange{
color: #F6843E;
}
}
}
.cp-first{
margin-bottom: 24upx;
>view{
font-size: 28upx;
font-weight: 500;
color: #1A1A1A;
}
}
}
}
}
</style>

2
src/pages/index/index.vue
View File

@ -79,7 +79,7 @@
const tabList = [
{
id: 0,
name: '营业额',
name: '收入统计',
path: '/pages/turnover/turnover',
serverKey: 1001 // 后端对应权限编号
},

79
src/pages/turnover/turnover.vue
View File

@ -1,8 +1,8 @@
<template>
<view class="turnover-container">
<view class="tc-tab" v-if="storeList.length > 1">
<view :class="[tabID == 0?'active':'']" @click="tabChange(0)">品牌</view>
<view :class="[tabID == 1?'active':'']" @click="tabChange(1)">门店</view>
<view :class="[tabID == 0?'active':'']" @click="tabChange(0)">品牌统计</view>
<view :class="[tabID == 1?'active':'']" @click="tabChange(1)">门店统计</view>
</view>
<view class="tc-total-section">
@ -26,9 +26,13 @@
<view class="tts-money">
<view>{{pageInfo.duration || '-'}}</view>
<view>总营业额</view>
<view>总收入</view>
<view><text>¥</text>{{pageInfo.total || '0'}}</view>
</view>
<view class="tts-preview">
<view>线上 ¥0.00</view>
<view>线下 ¥200.00</view>
</view>
</view>
<view class="tc-info-section">
<view class="tis-tab">
@ -49,24 +53,31 @@
<!-- <image mode="aspectFit" src="/static/images/icon/calendar.png"></image> -->
</view>
<view class="td-tip">实际收入</view>
<view class="td-tip">总收入</view>
<view class="td-price"><text>¥</text>{{pageInfo.calc.total || 0}}</view>
<view class="td-detail">
<view>
<view class="td-first">
线上 ¥1000.00
</view>
<view>
<text>收款笔数 </text>{{pageInfo.calc.in_count || 0}}
<text class="margin">收款笔数 </text> （ {{pageInfo.calc.in_count || 0}} ）
</view>
<view>
<text>退款笔数 </text>{{pageInfo.calc.out_count || 0}}
<text class="margin">退款笔数 </text> （ <text class="orange"> {{pageInfo.calc.out_count || 0}} </text> ）
</view>
</view>
<view>
<view class="td-first">
线上 ¥1000.00
</view>
<view>
<text>收款金额 </text> ￥{{pageInfo.calc.in_total || '0.00'}}
<text class="margin">收款金额 </text> （ ￥{{pageInfo.calc.in_total || '0.00'}} ）
</view>
<view>
<text>退款金额 </text> ￥{{pageInfo.calc.out_total || '0.00'}}
<text class="margin">退款金额 </text> （ <text class="orange"> ￥{{pageInfo.calc.out_total || '0.00'}} </text> ）
</view>
</view>
@ -264,7 +275,7 @@ export default {
@include centerFlex(center);
>view{
margin: 0 70upx;
width: 176upx;
width: 228upx;
height: 72upx;
line-height: 72upx;
text-align: center;
@ -314,33 +325,52 @@ export default {
}
.tts-money{
padding-top: 48upx;
padding-bottom: 70upx;
>view{
margin-bottom: 34upx;
text-align: center;
padding: 0 24upx;
@include textHide(1);
&:first-child{
margin-bottom: 22upx;
line-height: 34upx;
font-size: 24upx;
color: #9c9c9f;
}
&:nth-child(2){
margin-bottom: 30upx;
margin-bottom: 12upx;
line-height: 40upx;
font-size: 28upx;
color: #9c9c9f;
}
&:nth-child(3){
line-height: 90upx;
font-size: 76upx;
font-size: 64upx;
color: #1a1a1a;
font-weight: bold;
font-weight: 600;
>text{
font-size: 52upx;
}
}
}
}
.tts-preview{
padding-bottom: 70upx;
@include centerFlex(space-between);
>view{
width: 50%;
padding: 0 24upx;
line-height: 40upx;
text-align: center;
font-size: 28upx;
font-weight: 500;
color: #1a1a1a;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
}
.tc-info-section{
.tis-tab{
@ -427,6 +457,12 @@ export default {
>view{
max-width: 50%;
flex-shrink: 0;
.td-first{
margin-bottom: 24upx;
color: #1A1A1A;
font-weight: 500;
font-size: 28upx;
}
&:first-child{
margin-right: 24upx;
}
@ -434,16 +470,17 @@ export default {
margin-left: 24upx;
}
>view{
margin-bottom: 24upx;
font-weight: 500;
font-size: 32upx;
color: #1a1a1a;
font-size: 24upx;
color: #9C9C9F;
@include textHide(1);
>text{
margin-right: 10upx;
font-weight: 400;
font-size: 28upx;
color: #9C9C9F;
}
.orange{
color: #F6843E;
}
.margin{
margin-right: 12upx;
}
}
}

Write Preview
Loading…
Cancel
Save