Browse Source

效果报表

王晓晨 3 years ago
parent
commit
997057d5cb
5 changed files with 696 additions and 36 deletions
  1. 2 1
      App.vue
  2. 66 0
      components/numRun/numRun.vue
  3. 4 4
      components/subComponents/dmPopView.vue
  4. 1 1
      pages.json
  5. 623 30
      pages/reportPage/reportPage.vue

+ 2 - 1
App.vue

@@ -3,7 +3,8 @@
 		onLaunch: function() {
 			let BASE_URL = "";
 			var env ='';
-			let res = uni.getStorageSync('env')
+			// let res = uni.getStorageSync('env')
+			let res = '1'
 			switch(res){
 			   case '1': //dev
 			     BASE_URL = 'http://192.168.4.212:8866' // 开发环境

+ 66 - 0
components/numRun/numRun.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="qwNumBox" style="width: 36px;height:48px;">
+    <div class="trasBox" :style="{ top:( -1 * value * 48) +'px' }">
+      <div class="qwnum">0</div>
+      <div class="qwnum">1</div>
+      <div class="qwnum">2</div>
+      <div class="qwnum">3</div>
+      <div class="qwnum">4</div>
+      <div class="qwnum">5</div>
+      <div class="qwnum">6</div>
+      <div class="qwnum">7</div>
+      <div class="qwnum">8</div>
+      <div class="qwnum">9</div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    props: {
+      value: {
+        type: Number,
+        default() {
+          return 0;
+        }
+      }
+    }
+  };
+</script>
+<style lang="scss">
+  .qwNumBox + .qwNumBox {
+    margin-left: 5px;
+  }
+
+  .qwNumBox {
+    position: relative;
+    display: inline-block;
+    float: left;
+    width: 36px;
+    height: 48px;
+    overflow: hidden;
+
+    .trasBox {
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: auto;
+      width: 100%;
+      transform-origin: 0 0;
+      transition: top 0.8s;
+    }
+
+    .qwnum {
+      width: 36px;
+      height: 48px;
+      line-height: 48px;
+      background: rgba(72, 152, 241, 0.072);
+      border: 1px solid rgba(72, 152, 241, .3); /*no*/
+      border-radius: 6px;
+      font-size: 36px;
+      font-family: MicrosoftYaHei-Bold;
+      font-weight: bold;
+      color: #4898F1;
+      text-align: center;
+    }
+  }
+</style>

+ 4 - 4
components/subComponents/dmPopView.vue

@@ -11,7 +11,7 @@
 			<text class="pop-title" v-if="isShowTitle">{{title}}</text>
 			<image class="pop-close" src="../../static/icons/icon_close@2x.png" v-if="isShowClose" mode="" @click="handleCancel"></image>
 			<slot></slot>
-			<text class="pop-commit" :style="{'background-color':themeColor}" v-if="isShowConfirm" @click="handleConfirm">确定</text>
+			<text class="pop-commit" :style="{'background-color':color2}" v-if="isShowConfirm" @click="handleConfirm">确定</text>
 		</view>
 		
 		<view v-else :class="['pop-contentView',containerVisible ? 'pop-contentView-show' : '']" :style="{zIndex: zIndex}"
@@ -19,7 +19,7 @@
 			<text class="pop-title" v-if="isShowTitle">{{title}}</text>
 			<image class="pop-close" src="../../static/icons/icon_close@2x.png" v-if="isShowClose" mode="" @click="handleCancel"></image>
 			<slot></slot>
-			<text class="pop-commit" :style="{'background-color':themeColor}" v-if="isShowConfirm" @click="handleConfirm">确定</text>
+			<text class="pop-commit" :style="{'background-color':color2}" v-if="isShowConfirm" @click="handleConfirm">确定</text>
 		</view>
 		
 		
@@ -65,13 +65,13 @@
 				maskBgColor: '',
 				selectValue: [0],
 				selIdx: 0,
-				themeColor:''
+				color2:''
 			}
 		},
 		mounted() {
 			let app = getApp();
 			this.globalData = app.globalData;
-			this.themeColor = this.globalData.themeColor;
+			this.color2 = this.globalData.color2;
 		},
 		methods: {
 			show() {

+ 1 - 1
pages.json

@@ -21,7 +21,7 @@
 			"style": {
 				"navigationBarTitleText": "效果报表",
 				"enablePullDownRefresh": true,
-				"onReachBottomDistance": 50,
+				"onReachBottomDistance": 100,
 				"scrollIndicator": "none",
 				"app-plus": {
 					"pullToRefresh": {

+ 623 - 30
pages/reportPage/reportPage.vue

@@ -1,36 +1,629 @@
-<template>
-	
-	<view class="content">
+<template>
+
+	<view class="content">
+		<view class="headerSection">
+			<view class="sectionA">
+				<view class="left">
+					<view class="name">今日可提现</view>
+					<view class="value" :style="`color: ${color2};`">¥{{headerInfo.canCashOut || 0.00}}</view>
+					<!-- <num-run :value="700"></num-run> -->
+				</view>
+				<view class="right">
+					<view class="txRecord" :style="`color: ${color2};`">提现记录></view>
+					<view class="txRequest" :style="`background-color: ${color1};`">提现申请</view>
+				</view>
+			</view>
+			<view class="sectionB">
+				<view class="item1" v-for="(item, idx) in shouyiList" :key="idx">
+					<view class="name">{{item.title}}</view>
+					<view class="value">¥{{item.value}}</view>
+					<view class="des" v-if="idx == 1">
+						(服续费¥{{item.subValue}})
+					</view>
+					<view class="rightLine" v-if="idx < 2"></view>
+				</view>
+			</view>
+		</view>
+
+		<view class="screenSection">
+			<view class="sectionA">
+				<view class="title">我的收益明细</view>
+				<view class="dataScreen">
+					<block v-if="listParmas.startDate">
+						<text @click="dataScreenAction">{{listParmas.startDate + '-' + listParmas.endDate}}</text>
+						<text @click="clearDate" :style="`margin-left: 10px; color: ${color2};`">清空</text>
+					</block>
+					<block v-else>
+						<text @click="dataScreenAction">时间选择</text>
+						<image src="../../static/icons/icon_dropDown@2x.png" mode="aspectFit"></image>
+					</block>
+				</view>
+			</view>
+			<view class="sectionB">
+				<view class="item" v-for="(item, idx) in tabList" :key="idx" :style="`background-color: ${item.isSelect ? color1: '#fff'}; color: ${item.isSelect ? '#fff': '#B1B1B1'};`"
+				 @click="selectTab(item)">
+					{{item.typeName}}
+				</view>
+			</view>
+		</view>
 		
-	</view>
-	
-</template>
-
-<script>
-	
-	export default {
-		data() {
-			return {}
-		},
-		mounted() {
+		<view class="listSection">
+			<view class="top-Section">
+				<view class="point"></view>
+				<view class="name">任务详情</view>
+				<view class="totalPrice" :style="`color: ${color2};`">总收益:{{totalIncome}}元</view>
+			</view>
+			
+			<view class="item" v-for="(item, idx) in dataList" :key="idx">
+				<view class="sectionA">
+					<view class="point" :style="`background-color: ${color1};`"></view>
+					<view class="name" :style="`color: ${color1};`">{{item.name}}</view>
+				</view>
+				<view class="sectionB">
+					<image class="icon" src="https://dm.static.elab-plus.com/yezhu/h5/icon_dingwei.png" mode="aspectFit" style="color: #0066CC;"></image>
+					<view class="date">{{item.happenTime || '-'}}</view>
+				</view>
+				<view class="sectionC">
+					<view class="point"></view>
+					<view class="name">收益明细</view>
+				</view>
+				<view class="sectionD">
+					<view class="name">{{item.incomeType || '-'}}</view>
+					<view class="value" :style="`color: ${color2};`">+{{item.income}}元</view>
+				</view>
+				<view class="bottomLine" v-if="idx < dataList.length - 1"></view>
+			</view>
+			
+			<view class="com_noMore_text" v-if="noMore && dataList.length > 0">没有更多了</view>
+			
+			<view class="empty" v-if="dataList.length == 0">
+				<image class="emptyImg" src="https://dm.static.elab-plus.com/yezhu/h5/icon_empty.png" mode=""></image>
+				<view class="text">暂无数据</view>
+			</view>
+			
+		</view>
+		
+		<dm-calendar-picker-view ref='calendarPickerView' @confirmSelDate='confirmSelDate'></dm-calendar-picker-view>
+	</view>
+
+</template>
+
+<script>
+	import numRun from '../../components/numRun/numRun.vue'
+	import dmCalendarPickerView from '../../components/subComponents/dmCalendarPickerView.vue'
+	import moment from '../../static/moment.min.js'
+	
+	let app = getApp();
+	export default {
+		data() {
+			return {
+				headerInfo: {
+					alreadyCashOut: 0.00,
+					canCashOut: 0.00,
+					serviceFee: 0.00,
+					todayIncome: 0.00,
+					totalIncome: 0.00
+				},
+				shouyiList: [{
+						title: '今日收益',
+						value: 0,
+						des: ''
+					},
+					{
+						title: '总收益',
+						value: 0,
+						subValue: 20,
+						des: ''
+					},
+					{
+						title: '累计已提现',
+						value: 0,
+						des: ''
+					}
+				],
+
+				color1: '',
+				color2: '',
+				tabList: [],
+				listParmas: {
+					endDate: "",
+					pageNo: 1,
+					pageSize: 20,
+					startDate: "",
+					type: 0
+				},
+				dataList: [],
+				noMore: true,
+				totalIncome: 0.00
+			}
+		},
+		mounted() {
+			this.color1 = app.globalData.color1;
+			this.color2 = app.globalData.color2;
+			this.getReportHeader()
+			this.getReportMenu()
+		},
+		methods: {
+			// 表头数据
+			async getReportHeader() {
+				const res = await this.$myRequest({
+					url: '/report/header',
+					method: 'GET'
+				});
+				if (res && res.data.success) {
+					console.log('表头res:', res)
+					this.headerInfo = res.data.single || {
+						alreadyCashOut: 0.00,
+						canCashOut: 0.00,
+						serviceFee: 0.00,
+						todayIncome: 0.00,
+						totalIncome: 0.00
+					}
+					this.shouyiList[0].value = this.headerInfo.todayIncome || 0.00
+					this.shouyiList[1].value = this.headerInfo.totalIncome || 0.00
+					this.shouyiList[2].value = this.headerInfo.alreadyCashOut || 0.00
+					this.shouyiList[1].subValue = this.headerInfo.serviceFee || 0.00
+				}
+			},
+
+			async getReportMenu() {
+				const res = await this.$myRequest({
+					url: '/report/nav',
+					method: 'GET'
+				});
+				if (res && res.data.success) {
+					console.log('菜单res:', res)
+					var tempList = res.data.list || []
+					tempList.forEach((item, idx) => {
+						item['isSelect'] = idx == 0 ? true : false
+					})
+					this.tabList = tempList
+					if (this.tabList.length > 0) {
+						this.selectTab(this.tabList[0])
+					}
+				}
+			},
+			
+			selectTab(e) {
+				this.tabList.forEach((item, idx) => {
+					item.isSelect = false
+					if (e.type == item.type) {
+						item.isSelect = true
+					}
+				})
+				this.listParmas.type = e.type
+				this.pullDownRefresh(true)
+			},
+			
+			async getReportList() {
+				var self = this
+				const res = await this.$myRequest({
+					url: '/report/list',
+					data: self.listParmas
+				});
+				if (res && res.data.success) {
+					if (this.listParmas.pageNo == 1) {
+						this.dataList = res.data.single.pageInfoModel.resultSet || []
+					} else {
+						this.dataList = this.dataList.concat(res.data.single.pageInfoModel.resultSet || []);
+					}
+					this.totalIncome = res.data.single.totalIncome || '0.00'
+					this.noMore = res.data.single.pageInfoModel.resultSet.length < this.listParmas.pageSize
+					uni.stopPullDownRefresh();
+				}
+				else {
+					this.noMore = true
+					this.totalIncome = '0.00'
+					uni.stopPullDownRefresh();
+				}
+			},
+			
+			dataScreenAction() {
+				this.$refs.calendarPickerView.show()
+			},
+			
+			confirmSelDate(e) {
+			
+				const startDate = e.startDate;
+				const endDate = e.endDate;
+				if (moment(startDate).isBefore(endDate)) {
+					this.listParmas.startDate = startDate;
+					this.listParmas.endDate = endDate;
+				} else {
+					this.listParmas.startDate = endDate;
+					this.listParmas.endDate = startDate;
+				}
+				this.pullDownRefresh()
+			
+			},
 			
+			clearDate() {
+				this.listParmas.startDate = '';
+				this.listParmas.endDate = '';
+				this.pullDownRefresh()
+			},
+			
+			pullDownRefresh(isPullDown = true) {
+				if (isPullDown) {
+					this.listParmas.pageNo = 1;
+					this.getReportList()
+				} else {
+					if (this.noMore) {
+						return;
+					}
+					this.listParmas.pageNo++;
+					this.getReportList()
+				}
+			},
+		},
+		
+		
+		onPullDownRefresh() {
+			this.pullDownRefresh(true)
+			setTimeout(function() {
+				uni.stopPullDownRefresh();
+			}, 1000);
+		},
+		
+		onReachBottom() {
+			this.pullDownRefresh(false)
 		},
-		methods: {
+		
+		watch: {
+			
+		},
+		components: {
+			numRun,
+			dmCalendarPickerView
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	page {
+		width: 100vw;
+		// height: 100vh;
+	}
+
+	.content {
+		width: 100%;
+		// height: 100%;
+		// max-height: 100%;
+		// overflow-y: scroll;
+		background-color: #F5F5F7;
+		padding: 20rpx 20rpx 100rpx 20rpx;
+		box-sizing: border-box;
+
+		.headerSection {
+			width: 100%;
+			height: 352rpx;
+			background-color: #fff;
+			border-radius: 16rpx;
+			padding: 32rpx 30rpx 16rpx 48rpx;
+			box-sizing: border-box;
+
+			.sectionA {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+
+				.left {
+					.name {
+						font-size: 32rpx;
+						font-family: Verdana, Verdana-Regular;
+						font-weight: 400;
+						text-align: left;
+						color: #2c2c2c;
+						line-height: 40px;
+					}
+
+					.value {
+						margin-left: -12rpx;
+						font-size: 64rpx;
+						font-family: DIN Alternate, DIN Alternate-Bold;
+						font-weight: 700;
+						text-align: left;
+					}
+				}
+
+
+				.right {
+
+					.txRecord {
+						font-size: 24rpx;
+						font-family: Verdana, Verdana-Regular;
+						font-weight: 400;
+						text-align: right;
+					}
+
+					.txRequest {
+						margin-top: 32rpx;
+						width: 178rpx;
+						height: 60rpx;
+						border-radius: 12rpx;
+
+						font-size: 28rpx;
+						font-family: Verdana, Verdana-Bold;
+						font-weight: 700;
+						text-align: center;
+						color: #ffffff;
+						line-height: 60rpx;
+					}
+
+				}
+
+			}
+
+			.sectionB {
+				margin-top: 40rpx;
+				display: flex;
+				justify-content: space-between;
+				align-items: flex-start;
+
+				.item1 {
+					width: calc((100% - 90rpx) / 3);
+					position: relative;
+					height: 110rpx;
+
+					.name {
+						font-size: 24rpx;
+						font-family: Verdana, Verdana-Regular;
+						font-weight: 400;
+						text-align: left;
+						color: #999999;
+					}
+
+					.value {
+						font-size: 32rpx;
+						font-family: DIN Alternate, DIN Alternate-Bold;
+						font-weight: 700;
+						text-align: left;
+						color: #262626;
+					}
+
+					.des {
+						font-size: 20rpx;
+						font-family: Verdana, Verdana-Regular;
+						font-weight: 400;
+						text-align: left;
+						color: #cecece;
+						white-space: nowrap;
+						margin-left: -15rpx;
+					}
+
+					.rightLine {
+						position: absolute;
+						right: 0;
+						width: 2rpx;
+						height: 60rpx;
+						border-right: 2rpx dashed #7f7f7f;
+						top: calc((100% - 60rpx) / 2);
+						opacity: 0.2;
+					}
+				}
+			}
+
+		}
+
+		.screenSection {
+			margin-top: 60rpx;
+			width: 100%;
+			padding: 20rpx;
+			box-sizing: border-box;
+
+			.sectionA {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				.title {
+					font-size: 28rpx;
+					font-family: Verdana, Verdana-Bold;
+					font-weight: 700;
+					text-align: left;
+					color: #262626;
+				}
+
+				.dataScreen {
+					display: flex;
+					align-items: center;
+					font-size: 24rpx;
+					font-family: Verdana, Verdana-Regular;
+					font-weight: 400;
+					text-align: right;
+					color: #262626;
+
+					image {
+						margin-left: 10rpx;
+						width: 30rpx;
+						height: 30rpx;
+					}
+				}
+			}
+
+			.sectionB {
+				margin-top: 24rpx;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				flex-wrap: nowrap;
+				overflow-x: scroll;
+
+				.item {
+					width: 160rpx;
+					min-width: 160rpx;
+					height: 70rpx;
+					border-radius: 8rpx;
+
+					font-size: 24rpx;
+					font-family: Verdana, Verdana-Bold;
+					font-weight: 700;
+					text-align: center;
+					line-height: 70rpx;
+					margin-right: 10rpx;
+				}
+			}
+
+			.sectionB::-webkit-scrollbar {
+				display: none;
+				/* Chrome Safari */
+			}
+
+		}
+		
+		.listSection {
+			padding: 30rpx;
+			box-sizing: border-box;
+			position: relative;
+			background-color: #fff;
+			border-radius: 20rpx;
+			
+			.top-Section {
+				height: 80rpx;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				border-bottom: 2px dashed rgba($color: #7F7F7F, $alpha: 0.1);
+				
+				.point {
+					width: 16rpx;
+					height: 16rpx;
+					background: #3ecde6;
+					border-radius: 50%;
+				}
+				.name {
+					margin-left: 26rpx;
+					font-size: 28rpx;
+					font-family: Verdana, Verdana-Regular;
+					font-weight: 400;
+					text-align: left;
+					color: #262626;
+					flex-grow: 1;
+				}
+				.totalPrice {
+					font-size: 28rpx;
+					font-family: Verdana, Verdana-Regular;
+					font-weight: 400;
+					text-align: right;
+				}
+			}
+			
+			.item {
+				position: relative;
+				padding: 40rpx 0;
+				box-sizing: border-box;
+				
+				.sectionA {
+					display: flex;
+					align-items: center;
+					
+					.point {
+						width: 14rpx;
+						height: 14rpx;
+						border-radius: 50%;
+					}
+					.name {
+						margin-left: 28rpx;
+						font-size: 32rpx;
+						font-family: Verdana, Verdana-Bold;
+						font-weight: 700;
+						text-align: left;
+					}
+				}
+				
+				.sectionB {
+					display: flex;
+					align-items: center;
+					margin-top: 12rpx;
+					
+					.icon {
+						margin-left: -5rpx;
+						width: 22rpx;
+						height: 27rpx;
+						margin-right: 24rpx;
+					}
+					.date {
+						font-size: 30rpx;
+						font-family: Verdana, Verdana-Regular;
+						font-weight: 400;
+						text-align: left;
+						color: #262626;
+					}
+				}
+				
+				.sectionC {
+					display: flex;
+					align-items: center;
+					margin-top: 34rpx;
+					
+					.point {
+						width: 14rpx;
+						height: 14rpx;
+						background: #e0e0e0;
+						border-radius: 50%;
+						margin-right: 28rpx;
+					}
+					.name {
+						font-size: 22rpx;
+						font-family: Verdana, Verdana-Regular;
+						font-weight: 400;
+						text-align: left;
+						color: #b1b1b1;
+					}
+				}
+				
+				.sectionD {
+					display: flex;
+					align-items: center;
+					margin-top: 6rpx;
+					justify-content: space-between;
+					
+					.name {
+						margin-left: 35rpx;
+						font-size: 30rpx;
+						font-family: Verdana, Verdana-Regular;
+						font-weight: 400;
+						text-align: left;
+						color: #262626;
+					}
+					
+					.value {
+						font-size: 30rpx;
+						font-family: Verdana, Verdana-Regular;
+						font-weight: 400;
+						text-align: right;
+						color: #fd8f3c;
+					}
+				}
+				
+				.bottomLine {
+					bottom: 0;
+					width: 100%;
+					left: 0;
+					position: absolute;
+					border-bottom: 2rpx dashed rgba($color: #7F7F7F, $alpha: 0.1);
+				}
+			}
 			
+			.empty {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				
+				.emptyImg {
+					width: 283rpx;
+					height: 227rpx;
+				}
+				.text {
+					margin-top: -20rpx;
+					font-size: 28rpx;
+					font-family: PingFang SC, PingFang SC-Medium;
+					font-weight: 500;
+					text-align: center;
+					color: #b1b3ba;
+				}
+			}
 		}
-	}
-	
-</script>
-
-<style lang="scss" scoped>
-	page {
-		width: 100vw;
-		height: 100vh;		
-	}
-	.content {
-		width: 100%;
-		height: 100%;
-		background-color: #F5F5F7;
-	}
-	
+		
+	}
 </style>