<style>
	.salesvolume {
		background: #FFF;
		font-family: aa;
	}

	.salesvolume .headStatus {
		overflow: hidden;
		position: relative;
		width: 140vw;
		padding-right: 40vw;
		padding-bottom: 10px;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		display: flex;
		background: #FFFFFF;
	}

	.salesvolume .headStatus .arrow {
		height: 24px;
		margin: 5px 10px;
		width: 24px;
	}

	.salesvolume .headStatus .title {
		font-size: 16px;
		color: #000;
		flex: 1;
		width: 1px;
		margin-left: 10px;
		line-height: 34px;
	}

	.salesvolume .sharebox_top {
		width: 100%;
		height: 316rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: linear-gradient(90deg, #F89A60, #E38358);
		position: relative;
		overflow: hidden;
	}

	.salesvolume .sharebox_top .sharebox_top_nav {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		line-height: 34px;
		padding: 0 10px;
	}
	.top-nav-c{
		width: 690rpx;
		height: 150rpx;
		position: absolute;
		left: 30rpx;
		bottom: 0;
		box-shadow: 0px 0px 19px 0px rgba(204, 70, 50, 0.46);
		background: linear-gradient(90deg, #FFCF91, #FFC291);
		border-radius: 13px;
		padding: 26rpx 34rpx;
		display: flex;
		justify-content: space-between;
	}
	.salesvolume .goumai{
		width: 690rpx;
		margin-left: 30rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 22px 0px rgba(116, 116, 116, 0.18);
		border-radius: 10px;
		padding: 15px;
		margin-top: 13px;
	}
	.top-nav-c-r{
		display: flex;
		align-items: center;
		height: 60rpx;
		border-radius: 30rpx;
		background: rgba(233, 109, 70, 0.2);
		padding: 0 12px;
		font-size: 24rpx;
		color: #B65646;
	}
	.salesvolume .goumailist{
		display: -webkit-box;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
		margin-top: 10px;
	}
	/* 隐藏下方的滚动条 */
	.goumailist::-webkit-scrollbar {
		background-color: transparent;
	}
	.salesvolume .list-item{
		width: 200rpx;
		height: 150rpx;
		border: 1px solid #FAC88C;
		border-radius: 6px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-right: 7px;
	}
	.salesvolume .oneText{
		overflow: hidden;display: inline-block;white-space: nowrap; text-overflow:ellipsis;
		width: 100%;
		text-align: center;
	}
	.chongzhi{
		width: 90%;
		height: 42px;
		border-radius: 21px;
		font-size: 17px;
		color: #FFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 5%;
		margin-top: 10px;
	}
	.salesvolume .mingxilist{
		margin-top: 15px;
		display: flex;
		width: 100%;
		justify-content: space-between;
		
	}
	.mingxilist-l{
		width: calc(100vw - 60rpx - 30px - 50px);
		font-size: 15px;
		color: #000000;
	}
	.mingxilist-r{
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		font-size: 15px;
		color: #000000;
		font-weight: bold;
		
	}

</style>
<template>
	<scroll-view :scroll-y="true" @scroll="scrollHandler" @scrolltoupper="scrollTopHandler" style="height: 100vh;">
		<view class="salesvolume">
			<view class="headStatus" v-if="scrollTop > 50" :style="[
				headStyle,
				{
				  zIndex: scrollTop < 10 ? 'unset' : 2,
				  opacity: scrollTop < 10 ? '100' : scrollTop,
				},]">
				<view class="arrow" @click="redirectPrev">
					<u-icon name="arrow-left" size="48" color="#000"></u-icon>
				</view>
				<view class="title" v-if="scrollTop > 50">{{pageTitle}}</view>
			</view>
			<view style="width: 100%;height: 100%;">
				<view class="sharebox_top">
					<view class="sharebox_top_nav" :style="{paddingTop:nav+'px'}">
						<view class="arrow" @click="redirectPrev">
							<u-icon name="arrow-left" size="48" color="#fff"></u-icon>
						</view>
						<view class="title" style="color: #FFFFFF;font-size: 16px;">{{pageTitle}}</view>
						<view style="width: 24px;height: 24px;"></view>
					</view>
					<view class="top-nav-c">
						<view>
							<view style="font-size: 17px;color: #961C08;font-weight: bold;">储值卡总额{{AllUseDeposit.SurplusPrice?AllUseDeposit.SurplusPrice:0}}元</view>
							<view style="font-size: 12px;color: #B65646;margin-top: 15rpx;">累计充值{{AllUseDeposit.DepositPrice?AllUseDeposit.DepositPrice:0}}元</view>
						</view>
						<view class="top-nav-c-r" @click="golist" style="max-width: 240rpx;">
							储值卡({{AllUseDeposit.DepositNum?AllUseDeposit.DepositNum:0}}张)
							<u-icon name="arrow" color="#B65646" size="30" ></u-icon>
						</view>
					</view>
					<image src="../../../static/images/icon/card-bottom.png"  style="width: 100%;height: 13px;position: absolute;left: 0;bottom: 0;"></image>
				</view>
				<view class="goumai">
					<view style="display: flex;">
						<text style="font-size: 17px;color: #000000;font-weight: bold;">储值卡购买</text>
						<text style="font-size: 12px;color: #919191;line-height: 28px;margin-left: 5px;">储值卡永久有效</text>
					</view>
					<view class="goumailist" v-if="Deposit.length>0">
						<view class="list-item" v-for="(x,i) in Deposit" :key='i' @click="goxuanze(x)"
						:style="{'border':'1px solid'+ (x.ID==Paymsg.DepositId?'#ED723A':'#FAC88C'),background:(x.ID==Paymsg.DepositId?'linear-gradient(to bottom, #fff1df, #ffcb91)':'transparent')}">
							<view class="oneText" style="display: flex;align-items: flex-end;">
								<view class="oneText" style="font-size: 24rpx;color: #961C08;width: 100%;">充￥
									<text style="font-size: 44rpx;color: #961C08;font-weight: bold;line-height: 42rpx;">{{x.DepositPrice}}</text>
								</view>
								
							</view>
							<view class="oneText" style="font-size:28rpx;color: #FF0000 ;margin-top: 5px;font-weight: bold;">付￥{{x.SalePrice}}</view>
						</view>
					</view>
					<view class="chongzhi" :style="{background:mainColor}" @click="gocz">
						充值支付￥{{Paymsg.SalePrice}}
					</view>
				</view>
				<view class="goumai" style="margin-bottom: 30px;">
					<view style="display: flex;justify-content: space-between;align-items: center;">
						<text style="font-size: 17px;color: #000000;font-weight: bold;">卡片明细</text>
						<view @click="gomingxigengduo" style="font-size: 14px;color: #919191;line-height: 28px;display: flex;align-items: center;margin-right: 3px;">
							查看更多
							<u-icon name="arrow" color="#919191" size="20" ></u-icon>
						</view>
					</view>
					<u-empty v-if="balanceList.length == 0" text="暂无数据" mode="coupon"></u-empty>
					<view class="mingxilist" v-for="(x, i) in balanceList" :key="i" >
						<view class="mingxilist-l">
							<view class="oneText" style="text-align: left;">{{x.Remarks}}</view>
							<view style="font-size: 12px;color: #BCBCBC;">{{x.CreateDate}}</view>
						</view>
						<view class="mingxilist-r">
							<view v-if="x.Type== 1" :style="{color:mainColor}">+{{x.Surplus - x.Balance}}</view>
							<view v-if="x.Type== 2" >-{{x.Balance-x.Surplus}}</view>
							<!-- <view style="font-size: 12px;color: #F44235;font-weight: normal;">
								{{x.Remarks}}
							</view> -->
						</view>
					</view>
				</view>
			</view>

			<u-modal v-model="show" :content="content" :show-cancel-button='true' @confirm='queren'></u-modal>


		</view>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth='gbAuth'></auth>
	</scroll-view>
</template>

<script>
	import auth from "../../../components/auth/index.vue";
	export default {
		components: {
			auth
		},
		data() {
			return {
				pageTitle: "储蓄卡",
				show:false,
				mainColor: "",
				showAuth: false,
				U: {},
				headStyle: {},
				scrollTop: 0,
				nav: 0,
				msg:{
					pageIndex:1,
					pageSize:999999,
				},
				Deposit:[],
				Paymsg:{
					PayWay:1,
					SalePrice:0,
					DepositId:0,
				},
				content:'',
				orderInfo:{},
				balanceList:[],//流水列表
				AllUseDeposit:{},//基础资料
				type:0,//是否是从领取页面过来的
			}
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
			this.nav = uni.getMenuButtonBoundingClientRect().top;
			this.headStyle.paddingTop = this.nav + 'px';
			this.u = uni.getStorageSync("mall_UserInfo");
			if (!this.u) {
				this.u = {
					nickName: "未登录",
					avatarUrl: ""
				};
				this.showAuth = true;
			} else {
				this.getDepositPageList()
				this.getdetailed()//明细
				this.getxq()//详情
			}
			
		},
		onLoad(options) {
			if(options && options.type){
				this.type = options.type
			}
		},
		methods: {
			reloadUserinfo() {
				this.u = uni.getStorageSync("mall_UserInfo");
				// this.showAuth=false;
				this.getDepositPageList()
				this.getdetailed()//明细
				this.getxq()//详情
			},
			//关闭登录窗口
			gbAuth() {
				uni.navigateBack()
			},
			goxuanze(x){
				this.Paymsg.DepositId = x.ID
				this.Paymsg.SalePrice = x.SalePrice
			},
			scrollHandler(e) {
				this.scrollTop = e.detail.scrollTop;
			},
			scrollTopHandler() {
				this.scrollTop = 0;
			},
			redirectPrev() {//返回上一个页面
			if(this.type==0){
				uni.navigateBack({
					delta: 1,
				});
			}else{
				uni.reLaunch({
					url:'/pages/index/index'
				})
			}
				
			},
			getxq(){
				this.request2({
						url: '/api/AppletCoupon/GetAllUseDeposit',
						data: {}
					},
					res => {
						if (res.resultCode == 1) {
							this.AllUseDeposit = res.data
						}
					}
				);
			},
			getDepositPageList(){
				this.request2({
						url: '/api/AppletCoupon/GetDepositPageList',
						data: this.msg
					},
					res => {
						if (res.resultCode == 1) {
							this.Deposit = res.data.pageData;
							if(this.Deposit.length>0){//进入页面默认选择第一个
								this.Paymsg.DepositId = this.Deposit[0].ID
								this.Paymsg.SalePrice = this.Deposit[0].SalePrice
							}
						}
					}
				);
			},
			getdetailed(){
				this.request2({
						url: '/api/AppletCoupon/GetDepositBalancePageList',
						data: {pageIndex:1,pageSize:10,OldDepositBuyId:0}
					},
					res => {
						if (res.resultCode == 1) {
							this.balanceList = res.data.pageData
						}
					}
				);
			},
			golist(){
				uni.navigateTo({
					url: '/pages/coupon/cards/list'
				})
			},
			gocz(){
				this.content= '确定花费'+this.Paymsg.SalePrice+'元充值吗？'
				this.show= true;
			},
			queren(){
				let url='/api/WeChatPay/GetDepositPayInfo'
				this.request2({
						url: url,
						data: this.Paymsg
					},
					res => {
						this.orderInfo = JSON.parse(res.data);
						this.Pay()
					}
				);
			},
			Pay(){
				let that=this;
				let orderInfo = that.orderInfo;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: this.orderInfo.timeStamp,
					nonceStr: this.orderInfo.nonceStr,
					package: this.orderInfo.package,
					signType: this.orderInfo.signType,
					paySign: this.orderInfo.sign,
					success: function(res) {
						console.log('success', res);
						uni.showToast({
							title: "支付成功"
						})
						that.getxq()
					},
					fail: function(err) {
						console.log('fail:', err);
						uni.showToast({
							icon:'none',
							title: "支付失败"
						})
					}
				});
			},
			gomingxigengduo(){//明细更多
				uni.navigateTo({
					url: '/pages/coupon/cards/carddetailed'
				})
			}
		}

	}
</script>
