CBB3/pages/user/detail/integral.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.integral || 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(61vw - ' + 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>
			
				<!--列表数据-->
				<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="isPicker = true">
						<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>
							
						<u-empty
									v-if="data.length == 0 && isFirst"
									mode="data"
									icon="/static/img/no-empty.png"
								></u-empty>		
						
					</view>
				</scroll-view>	
			</view>	
			<PayDialog ref="payDialog" @getPassword="getPassword"></PayDialog>
	 <u-datetime-picker :show="isPicker" v-model="datetime" @confirm="tapConfirm" @cancel="isPicker = false" @close="isPicker = false" mode="year-month"></u-datetime-picker>		
		<u-popup :show="payCodeShow" @close="payCodeShow = false" @open="payCodeShow = true" 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>
		</u-popup>
		</view>	
	</view>
</template>

<style lang="scss">
	.codeBox{
		padding: 50rpx 50rpx;
		border-radius: 25rpx;
	}
	.app-bg{
		position: absolute;
		image{width: 100vw;height: 61vw;}
		.body{
			position: absolute;
			height: 61vw;
			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(50% - 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,
				isPicker : 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:'',//付款码  // 要生成的二维码值
				payCodeShow:false,//付款码弹窗
				
				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();
			},
			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.payCodeShow = true
						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("userIntegral",{
						...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("userIntegralTotal",{
						...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);
			},
			
			tapSc:function(){
				uni.navigateTo({
					url:"/pages/user/detail/integral_sc"
				})
			},
			/**
			 * 趣豆转账
			 */
			TapZc:function(){
				uni.navigateTo({
					url:"/pages/user/detail/integral_gift"
				})
			}
	},
}
</script>