From ea78a11e2b64f1cf9dad2bf44bb720f0bb1aae03 Mon Sep 17 00:00:00 2001
From: "liujw155@outlook.com" <liujw155@outlook.com>
Date: Tue, 15 Mar 2022 18:01:06 +0800
Subject: [PATCH] add collection list

---
 src/pages.json                     |   6 ++
 src/pages/collection/list/list.vue | 172 +++++++++++++++++++++++++++++++++++++
 src/pages/index/index.vue          |   2 +-
 src/pages/turnover/turnover.vue    |  79 ++++++++++++-----
 4 files changed, 237 insertions(+), 22 deletions(-)
 create mode 100644 src/pages/collection/list/list.vue

diff --git a/src/pages.json b/src/pages.json
index 4c5beba..51a24c8 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -104,6 +104,12 @@
 			}
 		},
 		{
+			"path": "pages/collection/list/list",
+			"style": {
+				"navigationBarTitleText": "收款记录"
+			}
+		},
+		{
 			"path": "pages/collection/detail/detail",
 			"style": {
 				"navigationBarTitleText": "收款明细"
diff --git a/src/pages/collection/list/list.vue b/src/pages/collection/list/list.vue
new file mode 100644
index 0000000..dfa6577
--- /dev/null
+++ b/src/pages/collection/list/list.vue
@@ -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>
\ No newline at end of file
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 917757a..5d2bf04 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -79,7 +79,7 @@
 	const tabList = [
 		{
 			id: 0,
-			name: '营业额',
+			name: '收入统计',
 			path: '/pages/turnover/turnover',
 			serverKey: 1001  // 后端对应权限编号
 		},
diff --git a/src/pages/turnover/turnover.vue b/src/pages/turnover/turnover.vue
index c7fc3c1..81c7268 100644
--- a/src/pages/turnover/turnover.vue
+++ b/src/pages/turnover/turnover.vue
@@ -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;
                         }
                     }
                 }