partnerApp/pages/wallet/transactionDetails.vue

<template>
	<view class="page">
		<public-module></public-module>
		<view class="flexd">
			<view class="headerFilter dis a-c j-s">
				<view class="drop dis a-c j-s" @tap="searchPopup">
					<image src="/static/image/addStaff/screen.png" mode="" style="width: 18px;height: 18px;"></image>
					<text>全部筛选</text>
					<u-icon name="arrow-down-fill" color="#9A9A9A" size="16"></u-icon>
				</view>
				<text>收入￥{{sumAmountSR?sumAmountSR:0}}</text>
				<text>支出￥{{sumAmountZC?sumAmountZC:0}}</text>
			</view>
			<view :class="['dropdown-content', { 'show': showDropdown }]" @tap="searchPopup">
				<view :class="['dropdown-content1','dis','f-c','j-s', { 'show1': showDropdown }]" @tap.stop.prevent>
					<view style="padding: 0 16px; box-sizing: border-box;">
						<view class="term">
							<text>业务板块</text>
							<view class="dis  a-c f-wrap j-start" style="margin-top: 5px;">
								<view class="status-data"
									:class="{'active':item.dictValue==pageRequest.businessSegmentsType}"
									v-for="(item,index) in businessSegmentsSZTypeList"
									@tap.stop.prevent="statusclick('businessSegmentsType',item.dictValue)" :key="index">
									{{item.dictTag}}
								</view>
							</view>
						</view>
						<view class="term">
							<text>收支类型</text>
							<view class="dis  a-c f-wrap j-start" style="margin-top: 5px;">
								<view class="status-data "
									:class="{'active':item.dictValue==pageRequest.incomeAndExpensesType,'disableSelection':!incomeAndExpensesDisabled.includes(item.dictValue)}"
									v-for="(item,index) in incomeAndExpensesTypeList"
									@tap.stop.prevent="statusclick('incomeAndExpensesType',item.dictValue)"
									:key="index">
									{{item.dictTag}}
								</view>
							</view>
						</view>
						<view class="term">
							<text>交易类型</text>
							<view class="dis  a-c f-wrap j-start" style="margin-top: 5px;">
								<view class="status-data"
									:class="{'active':item.dictValue==pageRequest.transactionType,'disableSelection':!transactionDisabled.includes(item.dictValue)}"
									v-for="(item,index) in moneyAttrTypeList"
									@tap.stop.prevent="statusclick('transactionType',item.dictValue)" :key="index">
									{{item.dictTag}}
								</view>
							</view>
						</view>
						<view class="term">
							<text>筛选日期</text>
							<view class="dis  a-c f-wrap j-start" style="margin-top: 5px;">
								<view class="status-data" :class="item.value==pageRequest.dateQueryType? 'active':''"
									v-for="(item,index) in dateList" @tap="dateclick(index)" :key="index">
									{{item.label}}
								</view>
								<view class="dis a-c">
									<view class="status-data" :class="startShow? 'active' :''" @tap="startShowmethod()">
										<text v-if="pageRequest.startDate!=''">{{pageRequest.startDate}}</text>
										<text v-else>{{transformTime()}}</text>
									</view>
									<text style="margin: 0 8px;font-size: 12px;">至</text>
									<view class="status-data" :class="endShow? 'active' :''" @tap="endShowmethod()">
										<text v-if="pageRequest.endDate!=''">{{pageRequest.endDate}}</text>
										<text v-else>{{transformTime()}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="operateBtn dis ">
						<view class="cancel dis a-c j-c" @click="showDropdown=false">
							取消
						</view>
						<view class="confirm dis a-c j-c" @click="querysearch">
							确定
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="" style="padding-top: 52px;">
			<view class="yshoudata" v-for="(item,index) in dataList" :key="index" @click="details(item)">
				<view class=" dis f-c content">
					<view class="dis a-c j-s">
						<view class="dis a-c" v-if="item.transactionType==1">
							<image src="/static/image/wallet/shouxu.png" mode="">
							</image>
							<text style="margin-left: 5px;font-size: 14px;color: #333;">车险</text>
						</view>
						<view class="dis a-c" v-if="item.transactionType==2">
							<image src="/static/image/wallet/tuiguang.png" mode="">
							</image>
							<text style="margin-left: 5px;font-size: 14px;color: #333;">推广</text>
						</view>
						<view class="dis a-c" v-if="item.transactionType==3">
							<image src="/static/image/wallet/tixian.png" mode="">
							</image>
							<text style="margin-left: 5px;font-size: 14px;color: #333;">提现</text>
						</view>
						<text style="font-size: 14px;font-weight: bold;"
							:style="{ color: item.transactionType == 3 ? '#333' : '#FF5600' }">{{item.transactionType==3?'-':'+'}}{{item.amount}}</text>
					</view>
					<text v-if="item.transactionType !== 3">订单号：{{item.subOrderNo}}</text>
					<text>交易号：{{item.id}}</text>
					<view class="dis a-c j-s">
						<text>{{item.signingTime}}</text>
						<text v-if="item.transactionType!=3">车牌号：{{item.licenseNo}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 回到顶部 -->
		<u-picker v-model="startShow" mode="time" :params="params" @confirm="startconfirm"></u-picker>
		<u-picker v-model="endShow" mode="time" :params="params" @confirm="endconfirm"></u-picker>

	</view>
</template>
<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				params: {
					year: true, //年
					month: true, //月
					day: true, //日
					hour: false,
					minute: false,
					second: false,
				},
				sumAmountSR: 0, //总收入
				sumAmountZC: 0, //总支出
				dataList: [],
				startShow: false,
				endShow: false,
				timespecifications: null,
				pageRequest: {
					businessSegmentsType: 0, //业务板块
					dateQueryType: 0, //日期类型
					incomeAndExpensesType: 0, //收支类型
					transactionType: 0, //交易类型
					userId: "",
					endDate: "",
					startDate: "",
					pageNum: 1,
					pageSize: 20,
				},
				showDropdown: false,
				businessSegmentsSZTypeList: [],
				incomeAndExpensesTypeList: [],
				//交易类型字典
				moneyAttrTypeList: [],
				jiaoyiList: [{
						label: '车险',
						value: 1,
						src: "/static/image/wallet/shouxu.png"
					},
					{
						label: '推广费',
						value: 2,
						src: "/static/image/wallet/tuiguang.png"
					},
					{
						label: '提现',
						value: 3,
						src: "/static/image/wallet/tixian.png"
					}
				],
				//日期筛选list
				dateList: [{
						label: '全部',
						value: 0,
					},
					{
						label: '一周内',
						value: 1,
					},
					{
						label: '一个月内',
						value: 2,
					},
					{
						label: '三个月内',
						value: 3,
					},
					{
						label: '六个月内',
						value: 4,
					},

				],
				incomeAndExpensesDisabled: ['0', '1', '2'],
				transactionDisabled: ['0', '1', '2', '3', '4'],
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		onShow() {},
		onLoad() {
			this.pageRequest.userId = this.userInfo.sysUser.id;
			this.getDictionary('businessSegmentsSZType'); //业务板块
			this.getDictionary('incomeAndExpensesType'); //收支类型
			this.getDictionary('moneyAttrType'); //交易类型
			this.queryList();
		},

		methods: {

			details(item) {
				switch (item.transactionType) {
					case '1':
						this.navigate({
								url: "/pages/wallet/billInfo1?companyId=" + item.subOrderNo,
							},
							"navigateTo", true);
						break;
					case '2':
					case '3':
						this.navigate({
								url: "/pages/wallet/billInfo?type=" + item.transactionType + '&id=' + item.id +
									'&subOrderNo=' + item.subOrderNo + '&amount=' + item.amount,
							},
							"navigateTo", true);
						break;
					default:
				}

			},
			//状态筛选
			statusclick(filed, e) {
				this.pageRequest[filed] = e;
				if (filed == 'businessSegmentsType') { //业务板块
					switch (e) {
						case '0':
							this.pageRequest.incomeAndExpensesType = '0';
							this.pageRequest.transactionType = "0";
							this.incomeAndExpensesDisabled = ['0', '1', '2'];
							this.transactionDisabled = ['0', '1', '2', '3', '4'];
							break;
						case '1':
							this.pageRequest.incomeAndExpensesType = '0';
							this.pageRequest.transactionType = "0";
							this.incomeAndExpensesDisabled = ['0', '1', '2'];
							this.transactionDisabled = ['0', '1', '2', '3'];
							break;
						case '2':
							this.pageRequest.incomeAndExpensesType = '1';
							this.pageRequest.transactionType = "4";
							this.incomeAndExpensesDisabled = ['1'];
							this.transactionDisabled = ['4'];
							break;
					}
				}
				if (filed == 'incomeAndExpensesType') { //收支类型
					switch (e) {
						case '0':
							this.pageRequest.transactionType = "0";
							this.transactionDisabled = ['0', '1', '2', '3', '4'];
							break;
						case '1':
							if (this.pageRequest.businessSegmentsType == '2') {
								this.pageRequest.transactionType = "4";
								this.transactionDisabled = ['4'];
							} else {
								this.pageRequest.transactionType = "0";
								this.transactionDisabled = ['0', '1', '2', '4'];
							}
							break;
						case '2':
							this.pageRequest.transactionType = "3";
							this.transactionDisabled = ['3'];
							break;
					}
				}

			},
			//查询事件
			querysearch() {
				this.queryList();
				this.showDropdown = false;
			},
			async getDictionary(type) {
				let res = await this.$http.get('/sysDict/dictDetails/' + type);
				if (res.code == '200') {
					this[type + 'List'] = res.data.ddList;
				}
			},
			async queryList() {
				let res = await this.$http.post('/sysUserAccount/findMyIncomeAndExpensesByUserId', this.pageRequest);
				if (res.code == '200') {
					this.dataList = res.data.data.content;
					this.sumAmountSR = res.data.sumAmountSR;
					this.sumAmountZC = res.data.sumAmountZC;
				}
			},
			searchPopup() {
				this.showDropdown = !this.showDropdown;
			},
			//日期筛选
			dateclick(e) {
				this.pageRequest.dateQueryType = e;
			},
			startShowmethod() {
				this.startShow = true;
			},
			startconfirm(e) {
				this.pageRequest.startDate = e.year + '-' + e.month + '-' + e.day;
			},
			endShowmethod() {
				this.endShow = true;
			},
			endconfirm(e) {
				this.pageRequest.endDate = e.year + '-' + e.month + '-' + e.day;
			},
			//当前时间
			transformTime(day) {
				var date = new Date();
				date.setFullYear(date.getFullYear());
				date.setTime(date.getTime());
				var strYear = date.getFullYear();
				var strDay = day ? date.getDate() - day : date.getDate();
				var strMonth = date.getMonth() + 1;
				if (strMonth < 10) {
					strMonth = "0" + strMonth;
				}
				if (strDay < 10) {
					strDay = "0" + strDay;
				}
				var datastr = strYear + "-" + strMonth + "-" + strDay;
				return datastr;
			},
			transformTime1(month) {
				var date = new Date();
				date.setFullYear(date.getFullYear());
				date.setTime(date.getTime());
				var strYear = date.getFullYear();
				var strDay = date.getDate();
				var strMonth = month ? (date.getMonth() + 1) - month : date.getMonth() + 1;
				if (strMonth < 10) {
					strMonth = "0" + strMonth;
				}
				if (strDay < 10) {
					strDay = "0" + strDay;
				}
				var datastr = strYear + "-" + strMonth + "-" + strDay;
				return datastr;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.disableSelection {
		color: rgba(51, 51, 51, 0.2);
		pointer-events: none;
		/* 禁用点击事件 */
	}

	.dropdown-content {
		background-color: rgba(0, 0, 0, 0.6);
		height: 0px;
		opacity: 0;
		transition: opacity 0.3s ease;

		.title {
			font-size: 14px;
			color: #232832;
			font-weight: bold;
			border-bottom: 1px solid #E1E1E1;
		}

		.term {
			padding-top: 10px;

			>text {
				color: #232832;
				font-weight: bold;
				font-size: 13px;
			}
		}

		.operateBtn {
			font-weight: bold;
			font-size: 16px;

			.cancel {
				width: 50%;
				height: 46px;
				color: #0052FF;
				background-color: #EAEAEA;
			}

			.confirm {
				width: 50%;
				height: 46px;
				color: #fff;
				background-color: #0052FF;
			}
		}
	}

	.dropdown-content1 {
		background-color: #fff;
		height: 0px;
		overflow: hidden;
		transition: height 0.4s ease;
	}

	.show {
		height: 100vh;
		opacity: 1;
		/* 下拉菜单内容的最大高度 */
	}

	.show1 {
		height: 400px;
		/* 下拉菜单遮罩最大高度 */
	}

	.status-data {
		padding: 4px 10px;
		box-sizing: border-box;
		margin: 0 8px 5px 0;
		font-size: 12px;
		border: 1px solid #eee;
		cursor: pointer;
	}

	.active {
		position: relative;
		background: rgba(0, 82, 255, 0.1);
		color: #0052FF;
		border: 1px solid #0052FF;
		font-weight: 700;
	}

	.active::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 10px;
		height: 10px;
		background-image: url("/static/image/car-insure/before.png");
		background-size: cover;
	}

	.page {
		background: #F8FAFE;
	}

	.flexd {
		position: fixed;
		left: 0;
		right: 0;
		z-index: 9999;
	}

	.yshoudata {
		padding: 8px 16px;

		background-color: #fff;

		.content {
			border-bottom: 1px solid #CFCFCF;
			padding: 8px 0;

			>text:nth-child(2) {
				font-size: 13px;
				color: #333;
				margin: 4px 0;
			}

			>view:nth-child(3) {
				color: rgba(51, 51, 51, 0.8);
				font-size: 12px;
			}
		}

		image {
			width: 20px;
			height: 20px;
		}
	}

	.headerFilter {
		padding: 8px 16px;
		background: #F8FAFE;
		z-index: 99;

		.drop {
			width: 106px;
			height: 100%;
			background: #EAEEF5;
			border-radius: 6px;
			padding: 5px;

			text {
				color: rgba(51, 51, 51, 0.8);
				font-size: 14px;
			}
		}

		>text {
			color: rgba(51, 51, 51, 0.8);
			font-size: 14px;
		}
	}
</style>