CBB3/pages/user/detail/award.vue

<template>
	<view>
		<view class="app-bg">
			<image src="/static/img/detail_bg.png"></image>
			<view class="body fx-h fx-bc fx-ac">
				<view class="count">{{ user.award || 0 }}</view>
				<view class="label">我的奖金</view>

			</view>
			<!-- <view class="fukuan" @click="fukuan" style="position: absolute;right: 30rpx;top: 180rpx;">
				<image src="/static/img/fukuan.png" style="width: 50rpx;height: 50rpx;"></image>
			</view> -->
		</view>
		<uni-nav-bar color="#fff" :border="false" statusBar backgroundColor="transparent" left-icon="left"
			@clickLeft="utils.navigateBack()" fixed title="我的奖金"></uni-nav-bar>
		<view class="htop" :style="'height:calc(65vw - ' + statusBarHeight + 'px - 44px);'"></view>
		<view class="app-body">


			<!-- <view class="pannel fx-r fx-bc">
				<view class="item fx-h fx-bc fx-ac" @tap="tapSc">
					<image src="/static/img/detail_sc.png"></image>
					<view class="text">闪兑</view>
				</view>
				<view class="line"></view>
				<view class="item fx-h fx-bc fx-ac" @tap="TapZc">
					<image src="/static/img/detail_zc.png"></image>
					<view class="text">转水果</view>
				</view>
				<view class="line"></view>
				<view class="item fx-h fx-bc fx-ac" @tap="TapZchu">
					<image src="/static/img/detail_zchu.png" style="width: 50rpx;height: 50rpx;"></image>
					<view class="text">转臻选</view>
				</view>
			</view> -->

			<!--列表数据-->
			<view class="nav-list fx-r fx-bc">
				<view class="item fx-h fx-bc" @tap="tapNav(item.code)" :class="form.type == item.code  ? 'active' : ''"
					v-for="(item,index) in navList">
					<view class="label">{{ item.name }}</view>
					<image class="icon" v-if="form.type == item.code" src="/static/img/detail_d.png"></image>
				</view>

				<view class="fx-g1"></view>

				<view class="time fx-r fx-bc" @tap="openintegralDate()">
					<view class="count">{{ form.dateStr || "" }}</view>
					<image class="icon" src="/static/img/detail_next.png"></image>
				</view>
			</view>
			<scroll-view scroll-y class="scroll" :style="'height: calc(100vh - 61vw -  100rpx - 130rpx);'"
				@scrolltolower="loadMoreData">
				<view class="sc-body">

					<view class="detail-list" v-if="data.length > 0">
						<view class="top fx-r">
							<view class="label">{{ this.form.dateStr }}</view>
							<view class="fx-g1"></view>
							<view class="label">收入：{{ this.total.inMoney || '0.00' }}
								支出：{{ this.total.outMoney || '0.00' }}</view>
						</view>

						<view class="item fx-r fx-bc" v-for="(item,index) in data">
							<image class="icon" v-if="item.type == 0" src="/static/img/detail_in.png"></image>
							<image class="icon" v-if="item.type == 1" src="/static/img/detail_in.png"></image>
							<image class="icon" v-if="item.type == 2" src="/static/img/detail_out.png"></image>
							<view class="info">
								<view class="title">{{ item.title }}</view>
								<view class="tag">{{ item.content }}</view>
								<view class="time">{{ item.time }}</view>
							</view>
							<view class="fx-g1"></view>
							<view class="right fx-h">
								<view class="money" style="color:#e2a622;" v-if="item.type == 1">+{{item.v}}</view>
								<view class="money" v-if="item.type == 2">-{{item.v}}</view>
								<view class="fx-g1"></view>
								<view class="balance">余额：{{ item.money }}</view>
							</view>

						</view>


					</view>

					<view v-if="data.length > 0">
						<view class="loading fx-r fx-ac fx-bc" v-if="page.isFrite && !page.isFoot">
							<image src="/static/img/xloading.png"></image>
							<text>正在载入更多...</text>
						</view>
						<view class="loading complete" :hidden="!page.isFoot">已加载全部</view>
					</view>
					<uv-empty v-if="data.length == 0 && isFirst" mode="data" icon="/static/img/no-empty.png"></uv-empty>
				</view>
			</scroll-view>
		</view>
		<PayDialog ref="payDialog" @getPassword="getPassword"></PayDialog>
		<uv-datetime-picker ref='integralDate' v-model="datetime" @confirm="tapConfirm" mode="year-month"></uv-datetime-picker>
		<uv-popup ref='payPopup' @close="payPopupClose()" mode="center">
			<view class="codeBox">
				<tki-qrcode v-if="ifShow" cid="qrcode1" ref="qrcode" :val="codePay" :size="size" :unit="unit"
					:background="background" :foreground="foreground" :pdground="pdground" :icon="icon"
					:iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true"
					@result="qrR" />
			</view>
		</uv-popup>
	</view>
	</view>
</template>

<style lang="scss">
	.codeBox {
		padding: 50rpx 50rpx;
		border-radius: 25rpx;
	}

	.app-bg {
		position: absolute;

		image {
			width: 100vw;
			height: 50vw;
		}
		.body {
			position: absolute;
			height: 50vw;
			width: 100vw;
			top: 0;
			.count {
				font-weight: 500;
				font-size: 64rpx;
				color: #fff;
			}

			.label {
				margin-top: 4px;
				color: #fff;
			}
		}
	}

	.app-body {
		padding: 0px 20rpx;
		position: relative;
		top: -100rpx;

		.pannel {
			background: #fff;
			width: calc(100% - 80rpx);
			margin-left: 40rpx;
			box-shadow: 0px 0px 20px 0px rgba(50, 50, 52, 0.06);
			border-radius: 20px;
			padding: 40rpx 0;

			.item {
				width: calc(33.3% - 1px);

				image {
					width: 62rpx;
					height: 62rpx;
				}

				.text {
					font-weight: bold;
					font-size: 30rpx;
					color: #333333;
					margin-top: 4rpx;
				}
			}

			.line {
				width: 2rpx;
				height: 74rpx;
				background: #DCDFE6;
			}
		}


	}

	.nav-list {
		height: 100rpx;

		.item {
			margin-right: 50rpx;

			.label {
				font-weight: bold;
				font-size: 30rpx;
				color: #5C5C5C;
			}

			&.active {
				.label {
					font-weight: bold;
					font-size: 36rpx;
					color: #2C2C2C;
				}

				.icon {
					width: 36rpx;
					height: 14rpx;
					margin-top: 4rpx;
				}
			}

		}

		.time {

			.count {
				font-weight: bold;
				font-size: 28rpx;
				color: #2C2C2C;
			}

			.label {
				font-weight: bold;
				font-size: 30rpx;
				color: #2C2C2C;
				margin-left: 6rpx;
			}

			.icon {
				margin-left: 10rpx;
				width: 20rpx;
				height: 12rpx;
			}
		}
	}

	.detail-list {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;

		.top {
			margin-bottom: 40rpx;

			.label {
				font-weight: 500;
				font-size: 25rpx;
				color: #979797;
			}
		}

		.item {
			margin-bottom: 40rpx;

			.icon {
				width: 84rpx;
				height: 84rpx;
			}

			.info {
				width: calc(100% - 280rpx);
				margin-left: 16rpx;

				.title {
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}

				.tag {
					font-size: 20rpx;
					color: #979797;
					margin-top: 6rpx;
				}

				.time {
					font-size: 24rpx;
					color: #979797;
				}
			}

			.right {
				text-align: right;
				width: 160rpx;

				.money {
					font-weight: bold;
					font-size: 34rpx;
					color: #FF4C4C;
				}

				.balance {
					font-weight: 500;
					font-size: 24rpx;
					color: #979797;
				}
			}

		}
	}
</style>

<script>
	import PayDialog from "@/components/ui-pay/payDialog.vue";
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			PayDialog,
			tkiQrcode
		},
		computed: mapState(['user']),
		data() {
			return {
				statusBarHeight: 20,
				isFirst: false,
				datetime: "",
				total: {},
				data: [],
				page: {
					isFirst: false,
					isLoad: false,
					isFoot: false,
					page: 1
				},
				form: {
					dateStr: "",
					date: "",
					type: "all"
				},
				navList: [{
						"name": "全部",
						"code": "all"
					},
					{
						"name": "收入",
						"code": "income"
					},
					{
						"name": "支出",
						"code": "disburse"
					}
				],
				codePay: '', //付款码  // 要生成的二维码值
				ifShow: true,
				size: 400, // 二维码大小
				unit: 'upx', // 单位
				background: '#fff', // 背景色
				foreground: '', // 前景色
				pdground: '#FF4C4C', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: false, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '' // 二维码生成后的图片地址或base64
			}
		},
		onLoad(options) {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.form.dateStr = this.utils.date('Y年m月');
			this.form.date = this.utils.date('Y-m');
			this.datetime = this.utils.strtotime() * 1000;

		},
		onShow() {
			this.initView();
		},

		methods: {
			...mapMutations(['checkUserLogin']),
			/**
			 * 加载基础配置
			 */
			initView: function() {
				this.totalData();
				this.getData(true);
			},
			fukuan() {
				this.$refs['payDialog'].show();
			},
			payPopupClose() {
				this.$refs.payPopup.close()
			},
			getPassword(val) {
				let obj = this
				var password = val.password;
				obj.request.post("tradeCode", {
					payment: password,
				}).then(res => {
					if (res.code == 200) {
						obj.$refs['payDialog'].cleanNum();
						obj.$refs['payDialog'].hideFun();
						obj.$refs.payPopup.open()
						obj.codePay = res.data.rand_code
						if (obj.codePay) {
							setTimeout(function() {
								obj.$refs.qrcode._makeCode()
							}, 1000);
						}
					} else {
						obj.$refs['payDialog'].cleanNum();
						obj.$refs['payDialog'].hideFun();
						uni.showModal({
							title: '系统提示',
							content: res.msg,
							showCancel: false
						});
					}
				})
			},
			qrR(res) {
				this.src = res
			},
			/**
			 * 获取数据
			 */
			getData: function(isPull = false) {
				if (this.page.isLoad) return;
				this.page.isLoad = true;
				if (isPull) {
					this.page.page = 1;
					this.page.isLoad = false;
					this.page.isFoot = false;
				}
				uni.showLoading({
					title: '获取数据中..'
				});
				var post = {};
				post.page = this.page.page;

				this.request.post("userAward", {
						...this.form,
						page: this.page.page
					})
					.then(res => {
						uni.hideLoading();
						this.page.isFirst = true;
						this.page.isLoad = false;
						this.isFirst = true;
						if (isPull) {
							this.data = res.data.list;
						} else {
							this.data = this.data.concat(res.data.list);
						}
						//是否到底
						if (res.data.list.length != res.data.pageSize) {
							this.page.isFoot = true;
						}
					})
					.catch((res) => {
						console.log(res);
						uni.hideLoading();
						uni.showModal({
							title: '系统提示',
							content: '加载失败，返回在尝试',
							showCancel: false
						});
					});
			},

			totalData: function() {
				this
					.request
					.post("userAwardTotal", {
						...this.form
					})
					.then(res => {
						if (res.code == 200) {
							this.total = res.data;
						}
					})
			},



			loadMoreData: function() {
				if (this.page.isFoot || this.page.isLoad) {
					return;
				}
				this.page.page++;
				this.getData();
			},

			tapNav: function(ev) {
				this.form.type = ev;
				this.getData(true);

			},

			tapConfirm: function(ev) {
				this.form.dateStr = this.utils.date('Y年m月', ev.value / 1000);
				this.form.date = this.utils.date('Y-m', ev.value / 1000);
				this.isPicker = false;
				this.totalData();
				this.getData(true);
			},
			openintegralDate(){
				this.$refs.integralDate.open()
			},
			tapSc: function() {
				uni.navigateTo({
					url: "/pages/user/detail/integral_sc"
				})
			},
			/**
			 * 趣豆转账
			 */
			TapZc: function() {
				uni.navigateTo({
					url: "/pages/user/detail/integral_gift"
				})
			},
			TapZchu() {
				uni.navigateTo({
					url: "/pages/user/detail/integral_chu"
				})
			},
		},
	}
</script>