增加总收入点击提示

pages/index/components/statistics.vue

@@ -10,16 +10,25 @@
 				</view>
 			</view>
 
-			<ul class="payList">
-				<li v-for="item in list" :key="item.id">
+			<view class="payList">
+				<view class="li" v-for="(item,index) in list" :key="index">
 					<view style="text-align: center;">
 						{{item.payType}}
 					</view>
-					<view style="text-align: center;">
+					<view style="text-align: center;" class="u-m-t-6">
 						{{item.payAmount}}
 					</view>
-				</li>
-			</ul>
+				</view>
+			</view>
+
+			<view class="u-m-t-8 u-flex u-row-center u-font-24 u-col-center color-666">
+				<view class="u-flex" @click="toggleShowAll">
+					<view>{{!showAll?'展开全部':'收起全部' }}</view>
+					<view class="u-flex  u-col-center u-m-t-4 tranistion-2" :class="{rotate:showAll}">
+						<up-icon color="#666" name="arrow-down" :size="12"></up-icon>
+					</view>
+				</view>
+			</view>
 		</view>
 	</view>
 	<datePickerview @confirm="datePickerConfirm" ref="datePicker" style="z-index: 999;"></datePickerview>
@@ -39,6 +48,15 @@
 		onShow
 	} from '@dcloudio/uni-app';
 	let selected = ref('today')
+	let showAll = ref(false);
+	let $list=[]
+	function toggleShowAll() {
+		showAll.value = !showAll.value
+		setList()
+	}
+	function setList(){
+		list.value=showAll.value?$list:$list.slice(0,4)
+	}
 	let list = ref()
 	const emit = defineEmits(['totalRevenue'])
 	const timeList = [{
@@ -63,15 +81,15 @@
 	]
 	const currentInstance = getCurrentInstance()
 	onShow((options) => {
-		let iToken =  uni.getStorageSync('iToken')
-		console.log(iToken,'调试123')
-		if(iToken){
+		let iToken = uni.getStorageSync('iToken')
+		if (iToken) {
 			getlist()
-		}else{
-			uni.redirectTo({url: '/pages/login/index'})
+		} else {
+			uni.redirectTo({
+				url: '/pages/login/index'
+			})
 		}
 	});
-
 	function getlist(start, end) {
 		let startTime, endTime;
 		if (selected.value == 'today') {
@@ -103,7 +121,8 @@
 			startTime,
 			endTime,
 		}).then((res) => {
-			list.value = res.sale.payCount.slice(0, 4)
+			$list=res.sale.payCount
+			setList()
 			emit('totalRevenue', res.sale.incomeAmountAll)
 		})
 	}
@@ -150,22 +169,25 @@
 		padding: 0;
 	}
 
+	.rotate {
+		transform: rotate(180deg);
+	}
+
 	.statistics {
 		padding: 0 28rpx;
 
 		.statisticsBox {
 			width: 694rpx;
-			height: 260rpx;
 			background: #FFFFFF;
 			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
 			border-radius: 16rpx 16rpx 16rpx 16rpx;
+			padding: 32rpx 22rpx;
+			box-sizing: border-box;
+			margin-top: 54rpx;
 
 			.time-wrapper {
 				display: flex;
 				justify-content: space-around;
-				padding-bottom: 16rpx;
-				padding-top: 16rpx;
-				margin-top: 54rpx;
 
 				.timelistbox {
 					position: relative;
@@ -192,22 +214,24 @@
 				.time-selected {
 					color: #318afe;
 					font-size: 32rpx !important;
+					font-weight: bold;
 				}
 			}
 
 			.payList {
 				display: flex;
-				justify-content: space-around;
 				align-items: center;
 				flex-wrap: wrap;
 				margin-top: 32rpx;
 
-				>li {
+				.li {
 					font-family: Source Han Sans CN, Source Han Sans CN;
 					font-weight: 400;
 					font-size: 28rpx;
 					color: #666666;
-					width: 170rpx;
+					width: 25%;
+					white-space: nowrap;
+					margin-bottom: 24rpx;
 
 					>view {
 						text-align: center;