<template>
	<view class="cleanCustom">
		<!-- 用户定制的积分转赠 -->
		<loadlogo v-if="!loadlogo" />
		<view class="page-content">
			<view class="content-title" :style="'background: url('+ (imgfixUrls + 'cleanimg.png') +');background-size: 100% 200upx;background-repeat: no-repeat;'">
				<view class="f-24 col-f">
					我的积分
				</view>
				<view class="f-50 col-f">
					{{pageData.mycredit}}
				</view>
			</view>
			<view class="datum">
				<text class="f-32 f-w">积分转赠</text>
				<text class="f-20 col-9" style="padding-left: 10upx;">手续费：{{pageData.integralsxf}}%</text>
				<view class="dis-flex inputClass" style="margin-top: 40upx;">
					<view class="f-w">
						对方手机号码
					</view>
					<input type="text" v-model="mobile" class="classinput" maxlength="11" />
				</view>
				<view class="dis-flex inputClass" style="margin-top: 20upx;">
					<view class="f-w">
						转赠数量
					</view>
					<input type="digit" @input="inputchage" v-model="numberdata"  class="classinput"  placeholder="积分" />
				</view>
				<view class="dis-flex" style="padding-top: 20upx;">
					<view class="f-24 col-9">
						最多可赠送{{pageData.mycredit}}积分
					</view>
					<view class="f-24 col-9 t-r flex-box">
						手续费：<text class="col-f4">{{service}}积分</text>
					</view>
				</view>
				<view class="dis-flex inputClass" style="margin-top: 40upx;">
					<view class="f-w">
						支付密码
					</view>
					<input type="text" v-model="password" class="classinput" />
				</view>
			</view>
		</view>
		<view class="bottomBtn dis-flex">
			<view class="flex-box p-30" style="padding: 24upx;">
				<view class="f-32 f-w col-f4">
					{{payservice}}
				</view>
				<view class="f-24 col-9">
					支付积分
				</view>
			</view>
			<view class="paybtn" @click="giveas">
				确认转赠
			</view>
		</view>
	</view>
</template>

<script>
	import App from "@/common/js/app.js"
	import Loadlogo from '@/components/template/loadlogo'
	export default{
		data(){
			return{
				pageData:{},
				numberdata:'',
				password:'',
				mobile:'',
				loadlogo:false
			}
		},
		components:{
			Loadlogo
		},
		onLoad() {
			this.getPageData();
		},
		computed:{
			service() {
			    return Math.round(this.numberdata * (this.pageData.integralsxf / 100) * 100) / 100 ;
			},
			payservice(){
				return Math.round((Number(this.service) + Number(this.numberdata)) * 100) / 100;
			}
		},
		methods:{
			giveas(){
				let _this = this;
				if(!_this.mobile){
					uni.showModal({
						showCancel:false,
						content:'请输入转赠手机号'
					});
					return
				}
				if(!_this.numberdata){
					uni.showModal({
						showCancel:false,
						content:'请输入转赠积分'
					});
					return
				}
				if(!_this.password){
					uni.showModal({
						showCancel:false,
						content:'请输入支付密码'
					});
					return
				}
				App.showError(
					`是否确认向手机号位${_this.mobile}的用户转赠${_this.numberdata}积分?`,
					data => {
						if (data.confirm) {
						let data = {
							credit:_this.numberdata,
							pwd:_this.password,
							mobile:_this.mobile
						}
						App._post_form('&p=Member&do=integralApi', data, res => {
							uni.showToast({
								title:'操作成功'
							});
							// _this.numberdata = '';
							// _this.password = '';
							// _this.mobile = '';
						}, false, () => {
							
						})
					}
					},
					true
				);
				
			},
			inputchage(e){
				console.log(e);
				
			},
			getPageData(){
				let _this = this;
				App._post_form('&p=Member&do=integralPage', {}, res => {
					this.pageData = res.data;
				}, false, () => {
					_this.loadlogo = true;
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.cleanCustom{
		
		.page-content{
			padding: 30upx;
			.content-title{
				width: 100%;
				height: 200upx;
				// line-height: 200upx;
				border-radius: 20upx;
				padding: 40upx;
				box-sizing: border-box;
			}
			.datum{
				margin-top: 50upx;
				.inputClass{
					height: 80upx;
					line-height: 80upx;
					color: #333333;
					border: 2upx solid #eeeeee;
					font-size: 28upx;
					padding: 0 20upx;
					border-radius: 10upx;
				}
				.classinput{
					height: 80upx;
					line-height: 80upx;
					font-size: 28upx;
					flex: 1;
					text-align: right;
				}
			}
		}
		.bottomBtn{
			background-color: #ffffff;
			height: 120upx;
			position: fixed;
			width: 100vw;
			box-sizing: border-box;
			
			left: 0;
			bottom: 0;
			position: fixed;
			.paybtn{
				flex: 0.5;
				height: 120upx;
				line-height: 120upx;
				background-color: #2772FD;
				color: #ffffff;
				font-size: 32upx;
				font-weight: bold;
				text-align: center;
			}
		}
	}
</style>
<style>
	page{
		background-color: #f8f8f8;
	}
</style>
