selectxiaofeijilu.vue 8.0 KB
<template>
	<view class="box">
		<view class="jilulist">
			<view class="jiluitem" v-for="(item,index) in selectarr" :key="index">
				<view class="jileft" @click="select(item.id,index)">
					<view class="selimg" v-if="item.select==false">
						<image src="/static/img/selsect.png"></image>
					</view>
					<view class="selimg" v-else>
						<image src="/static/img/xuan.png"></image>
					</view>
					<view class="dhao">
						<view class="seldanhao">订单号:{{item.order_sn}}</view>
						<view class="selcishu">{{item.recharge}}</view>
					</view>

				</view>
				<view class="jiright">
					<view class="jidate">
						{{item.createtime}}
					</view>
					<view class="jimoney">¥{{item.pay_money}}</view>
				</view>
			</view>


		</view>

		<view class="bottom">
			<view class="bottomleft">
				<view class="selimg" @click="selectall">
					<image src="/static/img/selsect.png" v-if="select_all == false"></image>
					<image src="/static/img/xuan.png" v-else></image>
				</view>
				<view class="allsel">全选</view>
				<view class="chongjilu">
					<view class="jilu">
						{{totalnum}}个充值记录
					</view>
					<text class="total">共</text>
					<text class="totalmonety">{{totalmoney}}元</text>
				</view>

			</view>
			<view class="nextstep" @click="next">下一步</view>
		</view>
	</view>
</template>

<script>
	import app from "../../App.vue"
	export default {
		data() {
			return {
				selectarr: [],
				// 充值记录
				totalnum: 0,
				//钱数
				totalmoney: 0,
				select_all: false,
				// 选中的id
				select_id: []

			}
		},
		methods: {
			// 单选选择数板
			select(id, index) {
				let t = this;
				let newselect_id = t.select_id;
				let newselectarr = t.selectarr;
				let newtotalmoney = t.totalmoney;
				let newtotalnum = t.totalnum;
				newselectarr[index].select = !newselectarr[index].select;
				console.log('909090707070',newselectarr[index].select)
				console.log(newselectarr[index].select)
				if (newselectarr[index].select==true) {
					newtotalmoney = Number(newtotalmoney) + Number(newselectarr[index].pay_money);
					newtotalnum = Number(newtotalnum) + 1
					newselect_id.push(id)
				} else {
					console.log(88888800000)
					newtotalmoney = Number(newtotalmoney) - Number(newselectarr[index].pay_money);
					newtotalnum = Number(newtotalnum) - 1;
					for(var i=0;i<newselect_id.length;i++){
						if(id==newselect_id[i]){
							newselect_id.splice(i, 1);
						}
					}
					
					
					console.log(newselect_id)
				}
				t.selectarr = newselectarr;
				t.totalmoney = newtotalmoney.toFixed("2");
				t.totalnum = newtotalnum;
				t.select_id = newselect_id;
				if(t.select_id.length==t.selectarr.length){
					t.select_all=true
				}else{
					t.select_all = false;
				}
				uni.setStorageSync("select_id",t.select_id);
				uni.setStorageSync("totalmoney",t.totalmoney);
				uni.setStorageSync("totalnum",t.totalnum)
				
			},


			
			selectall() {
				let t = this;
				let newselectarr = t.selectarr;
				let newtotalmoney = 0;
				let newtotalnum = t.totalnum;
				t.select_all = !t.select_all;
				let newselect_id = t.select_id

				for (var i = 0; i < newselectarr.length; i++) {
					if (t.select_all) {
						newselectarr[i].select = true;
						newselect_id.push(newselectarr[i].id)
						newtotalmoney = Number(newtotalmoney) + Number(newselectarr[i].pay_money);
						newtotalnum = newselectarr.length
					} else {
						newselectarr[i].select = false;
						newtotalmoney = 0;
						newtotalnum = 0;
						newselect_id = []
					}
				};
				t.selectarr = newselectarr;
				t.totalmoney = newtotalmoney.toFixed("2");
				t.totalnum = newtotalnum;
				t.select_id = newselect_id;
				uni.setStorageSync("select_id",t.select_id)
				uni.setStorageSync("totalmoney",t.totalmoney)
				uni.setStorageSync("totalnum",t.totalnum)
			},
			// 选择消费记录
			choose_jilu() {
				let t = this;
				let url = "api/person/choosePayList";
				let param = {};
				app.post(url, param, 'post').then(r => {
					for (var i = 0; i < r.length; i++) {
						r[i]['select'] = false
					}
					t.selectarr = r;
					
					
					
					let newselect_id=uni.getStorageSync("select_id");
					let newselectarr=t.selectarr;
					let select_count = 0;
					if(newselect_id!=''){
						for(var i=0;i<newselectarr.length;i++){
							if(newselect_id.indexOf(newselectarr[i].id)!=-1){
									select_count++;
									newselectarr[i].select=true	
								}
							
						}
					}
					
					if(select_count==newselectarr.length){
						t.select_all = true
					}
					
					
					
					// for(var i=0;i<newselectarr.length;i++){
					// 	console.log('999000888',typeof(newselectarr.indexOf(newselectarr[i].id)))
					// 	if(newselectarr.indexOf(newselectarr[i].id)!=-1){
					// 		select_count++;
					// 		newselectarr[i].select=true	
					// 	}
					// }
					// if(select_count == newselectarr.length) {
					// 	t.select_all = true
					// }
					
					t.selectarr=newselectarr;
					
					if(uni.getStorageSync("totalmoney")!=''){
						t.totalmoney=uni.getStorageSync("totalmoney");
					}
					if(uni.getStorageSync("totalnum")!=''){
						t.totalnum=uni.getStorageSync("totalnum");
					}
					
				}).catch(err => {
					
				})
			},
			//下一步
			next() {
				
				
				let t = this;
				let id = t.select_id;
				let pages = getCurrentPages();
				
				// let currPage = pages[pages.length - 1]; //当前页面
				let prevPage = pages[pages.length - 2]; //上一个页面
				
				//直接调用上一个页面的setData()方法,把数据存到上一个页面中去
				prevPage.setData({
					selectId: id,
					totlemoney:t.totalmoney
				});
			
				// uni.navigateTo({
				// 	url: '/pages/kafapiao/kafapiao?money=' + this.totalmoney + '&select_id=' + this.select_id
				// })
				
				 // uni.navigateTo({
				 // 	url: '/pages/kafapiao/kafapiao'
				 // })
				 uni.navigateBack({
				 	checked:true
				 })
			}
		},
		onLoad(options) {

		},
		onShow() {
			// 选择消费记录
			this.choose_jilu();
			let newselect_id=uni.getStorageSync("select_id");
			if(newselect_id!=''){
				this.select_id=newselect_id
			}
			
		},
		onUnload: function() {
			let t = this;
			let id = t.select_id;
			let pages = getCurrentPages();
			
			// let currPage = pages[pages.length - 1]; //当前页面
			let prevPage = pages[pages.length - 2]; //上一个页面
			
			//直接调用上一个页面的setData()方法,把数据存到上一个页面中去
			prevPage.setData({
				selectId: id,
				totlemoney:t.totalmoney
			});
			
			
		},
	}
</script>

<style>
	.jiluitem {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 34rpx 0;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f5f5f5
	}

	.jilulist {
		background: #fff;
		padding: 0 32rpx;
		box-sizing: border-box;
		/* padding-bottom: 130rpx; */
		margin-bottom: 130rpx;
	}

	.jileft {
		display: flex;
		align-items: center;
	}

	.selimg {
		width: 32rpx;
		height: 32rpx;
		font-size: 0;
	}

	.seldanhao {
		color: #0A0808;
		font-size: 30rpx;
	}

	.selcishu {
		color: #7F8389;
		font-size: 26rpx;
		margin-top: 22rpx
	}

	.jidate {
		color: #7F8389;
		font-size: 26rpx;
	}

	.jimoney {
		color: #F29600;
		font-size: 28rpx;
		margin-top: 22rpx;
	}

	.dhao {
		margin-left: 36rpx
	}

	.bottom {
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 18rpx 32rpx;
		box-sizing: border-box;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;

	}

	.bottomleft {
		display: flex;
		align-items: center;
	}

	.allsel {
		color: #0A0808;
		font-size: 28rpx;
		margin-left: 20rpx;
	}

	.jilu {
		color: #7F8389;
		font-size: 26rpx;
	}

	.total {
		color: #7F8389;
		font-size: 26rpx;
	}

	.totalmonety {
		color: #F39800;
		font-size: 30rpx;
	}

	.chongjilu {
		margin-left: 48rpx;
	}

	.nextstep {
		width: 200rpx;
		height: 100rpx;
		background: rgba(243, 152, 0, 1);
		box-shadow: 0rpx 4rpx 18rpx rgba(0, 0, 0, 0.04);
		opacity: 1;
		color: #fff;
		font-size: 32rpx;
		color: #fff;
		text-align: center;
		line-height: 100rpx;
		border-radius: 10rpx;
	}
</style>