<template>
	<view class="pointRecharge">
		<view class="recharge-top">
			<u-avatar :src="mall_UserInfo.Photo" size="80" ></u-avatar>
			<view class="recharge-top-r">
				<text class="chaochu1"  style="font-size:13px;color: #111111;font-weight: bold;" >{{mall_UserInfo.Name}}</text>
				<text class="chaochu1" style='font-size: 11px;color: #666666;'>可用点数：{{Point}}</text>
			</view>
		</view>
		<view class="recharge-c">
			<text style="font-size: 11px;color: #111111;">充点数 <text style="color: #DD0000;"> (虚拟商品支付成功后不支持退款)</text></text>
		</view>
		<view class="rechargelist ">
			<view class="rechargeitem" @click="btnRecharge(item)" :style="{'border':'1px solid '+mainColor,'color':mainColor}" v-for="(item, index) in pointGoods" :key="index">
				<text class="chaochu1-t" >{{item.SellingPrice}}元</text>
				<text class="chaochu1-t" style="margin-top: 7px;font-size: 11px;">点数 {{item.PonitNum}}{{item.GivePoint>0?'+送'+item.GivePoint:''}}</text>
			</view>
		</view>
		<u-modal v-model="show" :content="content" :show-cancel-button='true' @confirm='queren'></u-modal>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				mainColor: '',
				secondary: '',
				mall_UserInfo:{},
				pointGoods:[],
				RechargeMsg:{
					PayWay:1,
					Income:0,
					PointGoodsId:0,
				},
				show:false,
				content:'',
				orderInfo:{},
				Point:0,
			}
		},
		onLoad() {
			
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
			this.secondary = this.$uiConfig.secondary;
			uni.setNavigationBarTitle({
				title: '余额点数'
			});
			this.mall_UserInfo = uni.getStorageSync("mall_UserInfo") ? uni.getStorageSync("mall_UserInfo"):{};
			this.getPointGoodsList()
			this.getdianshu()
		},
		methods:{
			getPointGoodsList(){
				this.request2({
						url: '/api/AppletPoint/GetPointGoodsList',
						data: {}
					},
					res => {
						this.pointGoods = res.data
					}
				);
			},
			getdianshu(){
				this.request2({
						url: '/api/AppletPoint/GetAppletUserPointDetailPageList',
						data: {pageIndex:1,pageSize:15,Type:0}
					},
					res => {
						this.Point = res.data.pageData.PointNum
					}
				);
			},
			btnRecharge(item){//点击充值
				this.show= true;
				this.content= '确定花费'+item.SellingPrice+'元充值点数'+item.PonitNum+'吗？'
				this.RechargeMsg.Income = item.SellingPrice;
				this.RechargeMsg.PointGoodsId = item.ID;
			},
			queren(){
				this.request2({
						url: '/api/WeChatPay/GetPointPayInfo',
						data: this.RechargeMsg
					},
					res => {
						this.orderInfo = JSON.parse(res.data);
						this.Pay()
					}
				);
			},
			Pay(){
				let that=this;
				let orderInfo = this.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.getdianshu()
						
						
					},
					fail: function(err) {
						console.log('fail:', err);
						uni.showToast({
							title: "支付失败"
						})
					}
				});
			}
		}
	}
</script>

<style>
	.pointRecharge{
		width: 100%;
		height: 100vh;
		background: #FFF;
	}
	.pointRecharge .recharge-top{
		width: 100%;
		padding: 15px;
		display: flex;
		flex-direction: row;align-items: center;
		border-bottom: 1px solid #E2E2E2;
	}
	.pointRecharge .recharge-top-r{
		display: flex;
		flex:1;
		margin-left: 10px;
		font-size: 13px;
		color: #111111;
		height: 40px;
		flex-direction: column;
		justify-content: space-between;
	}
	.pointRecharge .recharge-top-r .chaochu1{
		white-space: nowrap;text-overflow: ellipsis;overflow: hidden;width: calc(100vw - 80px);
	}
	
	.pointRecharge .recharge-c{
		width: 100%;
		padding: 15px;
	}
	.pointRecharge .rechargelist{
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.pointRecharge .rechargeitem{
		width: 28%;
		border-radius: 3px;
		padding: 15px 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 16px;
		margin-left: 4%;
		margin-bottom: 15px;
		
	}
	.pointRecharge .chaochu1-t{
		white-space: nowrap;text-overflow: ellipsis;overflow: hidden;width: 100%;text-align: center;
	}
</style>
