<template>
	<view class="voucherCenter">
		<loadlogo v-if="!loadlogo" />
		<view class="pageContent" v-if="loadlogo">
			<view class="title" :style="{ width: imgstyle.width - 30 + 'px', height: imgstyle.height - 30 + 'px' }" v-if="!!swiperList && swiperList.length > 0">
				<swiper class="swiper"  indicator-color="rgba(255,255,255,.4)" indicator-active-color="rgba(255,255,255,.85)" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
					<swiper-item v-for="(item, index) in swiperList" :key="index" style="border-radius: 15upx;">
						<image :src="item.thumb" style="width: 100%; height: 100%;" mode="scaleToFill"></image>
					</swiper-item>
				</swiper>
				<!-- <image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0903%2Fcebd2315p00qyv1qs003bc000hs009fm.png%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638425989&t=ba41b7eca9681c46067a2154454236e5" ></image> -->
			</view>
			<view class="dis-flex">
				<view :class="type == 1?'checkSpeedItem':'speedItem'" @click="checkItem(1)" v-if="voucherData.slowre == 1">
					慢充
				</view>
				<view :class="type == 2?'checkSpeedItem':'speedItem'" @click="checkItem(2)" v-if="voucherData.fastre == 1">
					快充
				</view>
				<view :class="type == 3?'checkSpeedItem':'speedItem'" @click="checkItem(3)" v-if="voucherData.mostre == 1">
					特快充
				</view>
			</view>
			<view class="phoneInput">
				<input type="number" class="input" maxlength="11" placeholder-style="color:#cccccc;" placeholder="请输入充值号码" v-model="phoneCrad"  />
				<view class="f-20 col-9" style="padding: 10upx 0 0 20upx;">
					{{type == 1?voucherData.slowtext:type == 2?voucherData.fasttext:voucherData.mosttext}}
				</view>
			</view>
			<view style="position: relative;">
				<view class="denomination dis-flex">
					<view :class="money.money == item.money?'checkDenominaItem':'denominaItem'" v-for="(item,index) in denominaList" @click="checkPrice(item)">
						<view class="price">
							{{item.money}}元
						</view>
						<view class="onlyNeed" v-if="voucherData.vipflag == '0'">
							只需
						</view>
						<view class="newPrice" v-if="voucherData.vipflag == '0'">
							{{item.prcie}}元
						</view>
						<view class="onlyNeed" style="font-size: 20upx;padding: 20upx 0;" v-if="voucherData.vipflag != '0'">
							会员价{{item.vipprice}}元
						</view>
						<view class="onlyNeed" style="font-size: 20upx;" v-if="voucherData.vipflag != '0'">
							非会员价{{item.prcie}}元
						</view>
					</view>
				</view>
				<view class="denominaTiele">
					<image :src="imgfixUrls + 'miane.png'" mode=""></image>
					<view class="tieleText">
						充值面额
					</view>
				</view>
			</view>
			
		</view>
		<view class="affirm">
			<view class="flex-box f-50 col-f4 f-w" style="padding-left: 30upx;">
				<text style="padding-right: 20upx;">¥</text>{{money && voucherData.vipflag != '0'?money.vipprice:money.prcie || '0'}}
			</view>
			<view class="recharge" @click="topUp">
				立即充值
			</view>
		</view>
		<view class="share" @click="crodShow = true">
			<view class="iconfont icon-forward" style="font-size: 46upx;padding-top: 6upx;">
				
			</view>
			分享
		</view>
		<view class="order" @click="goOrder">
			<view class="iconfont icon-dingdan" style="font-size: 46upx;padding-top: 6upx;">
				
			</view>
			订单
		</view>
		<PopManager :show="crodShow" :type="'center'" @clickmask="crodShow = false">
			<view class="crod">
				<image :src="voucherData.qrimg" mode=""></image>
			</view>
		</PopManager>
		<follow  :followShow="followShow" :followType="followType" :followTitleShow="followTitleShow" @clickmask="openQrShow"
		 @closeFollowPop="closeFollowPop" @closeFollowTitle="closeFollowTitle" :shareId="shareId" :followData="followData"></follow>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	import Loadlogo from '@/components/template/loadlogo.vue';
	import PopManager from '@/components/template/PopManager';
	import follow from '@/components/template/follow.vue';
	
	export default{
		data(){
			return{
				type:1,
				swiperList:[],
				voucherData:{},
				denominaList:[],
				money:'',
				phoneCrad:'',
				loadlogo:false,
				crodShow:false,
				imgstyle:{},
				followShow: false,
				followType: '0',
				followTitleShow: true,
				shareId: null,
				followData:{}
			}
		},
		components:{
			Loadlogo,
			PopManager,
			follow
		},
		onLoad() {
			this.imgstyle = uni.getStorageSync('imgstyle');
			this.getVoucherData()
		},
		methods:{
			closeFollowTitle() {
				let _this = this
				_this.followTitleShow = false
			},
			closeFollowPop() {
				let _this = this
				_this.followShow = false
			},
			openQrShow() {
				let _this = this
				_this.followShow = true
			},
			goOrder(){
				App.navigationTo({
					url: 'pages/subPages2/voucherCenter/phoneOrders'
				});
			},
			topUp(){
				let _this = this;
				// 关注相关
				if(!_this.money){
					uni.showModal({
						showCancel:false,
						content:'请选择充值金额',
						title:'温馨提示'
					});
					return
				}
				let myreg=/^[1][3,4,5,7,8,9][0-9]{9}$/;
				if (!myreg.test(_this.phoneCrad)) {
				    uni.showModal({
				    	showCancel:false,
				    	content:'请填写正确的手机号码',
				    	title:'温馨提示'
				    });
				    return
				}
				let data = {
					id:'',
					type:11
				}
				App._post_form('&do=Follow', data, res => {
					if (res.data.status == '1') {
						_this.followShow = true;
						_this.followData = res.data
						// console.log('2');
						// if (goodsType !== 'integral') {
						// 	this.getGoodsDetail(_this.goods_id, _this.goodsType); 
						// }
						// _this.getover();
						return false
					}else{
						let datas = {
							mobile:_this.phoneCrad,
							type:_this.type,
							money:_this.money.money
						}
						App.showError(
							`正在为号码${_this.phoneCrad}进行充值,选择充值方式为${_this.type == 1?'慢充':_this.type == 2?'快充':'特快充'},请确认号码是否无误?`,
							data => {
								if (data.confirm) {
								App._post_form(
									`&p=mobilerecharge&do=createMrechargeOrder`,
									datas,
									res => {
										App.navigationTo({
											url: 'pages/mainPages/payment/payment?orderid=' + res.data.orderid + '&plugin=mobilerecharge&types=1'
										});
									},
									false,
									() => {}
								);
									}
							},
							true
						);
					}
				});
				
				
				
				
			},
			checkPrice(money){
				this.money = money;
			},
			getVoucherData(){
				let _this = this;
				App._post_form(
					`&p=mobilerecharge&do=rechargePageInfo`,
					{},
					res => {
						console.log(res);
						_this.voucherData = res.data;
						if(res.data.slowre == '1'){
							_this.type = 1;
							_this.denominaList = _this.voucherData.pricediv[1];
						}else if(res.data.fastre == '1'){
							_this.type = 2;
							_this.denominaList = _this.voucherData.pricediv[2];
						}else if(res.data.mostre == '1'){
							_this.type = 3;
							_this.denominaList = _this.voucherData.pricediv[3];
						}
						// debugger
						_this.swiperList = res.data.advs;
						
						_this.loadlogo = true;
					},
					false,
					() => {}
				);
			},
			checkItem(type){
				if(this.type == type) return
				this.type = type;
				this.money = '';
				this.denominaList = this.voucherData.pricediv[type];
			}
		}
	}
</script>

<style>
	page{
		background-color: #F5F4F4;
	}
</style>
<style lang="scss" scoped>
	.voucherCenter{
		padding-bottom: 500upx;
		.affirm{
			width: 100%;
			height: 130upx;
			background-color: #ffffff;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			line-height: 130upx;
			.recharge{
				width: 260upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				color: #ffffff;
				background-color: #2D5FFC;
				margin-top: 25upx;
				margin-right: 30upx;
				border-radius: 60upx;
				font-size: 34upx;
				font-weight: 600;
			}
		}
		
		.share{
			width: 120upx;
			height: 120upx;
			border-radius: 50%;
			background-color: #FA4243;
			color: #FFFFFF;
			text-align: center;
			font-size: 30upx;
			position: fixed;
			right: 30upx;
			bottom: 300upx;
			// line-height: 50upx;
		}
		.order{
			width: 120upx;
			height: 120upx;
			border-radius: 50%;
			background-color: #2D5FFC;
			color: #FFFFFF;
			text-align: center;
			font-size: 30upx;
			position: fixed;
			right: 30upx;
			bottom: 150upx;
		}
		.crod{
			width: 400upx;
			height: 400upx;
			image{
			width: 400upx;
			height: 400upx;	
			}
		}
		.pageContent{
			padding: 0 30upx;
			.title{
				padding: 80upx 0upx;
				height: 360upx;
				.swiper{
					height: 100%;
					width: 100%;
				}
				image{
					width: 100%;
					height: 360upx;
				}
			}
			.speedItem{
				flex: 1;
				height: 90upx;
				line-height: 90upx;
				border: 3upx solid #EDEBEE;
				font-size: 40upx;
				font-weight: normal;
				text-align: center;
				color: #999999;
				background-color: #ffffff;
			}
			.checkSpeedItem{
				flex: 1;
				height: 90upx;
				line-height: 90upx;
				border: 3upx solid #2D5FFC;
				font-size: 40upx;
				font-weight: normal;
				text-align: center;
				color: #ffffff;
				background-color: #2D5FFC;
			}
			.phoneInput{
				.input{
					font-size: 55upx;
					line-height: 120upx;
					height: 120upx;
					color: #999999;
					padding-left: 20upx;
					border-bottom: 4upx solid #D0D0D0;
					padding-top: 55upx;
				}
			}
			.denominaTiele{
				position: absolute;
				width: 210upx;
				height: 80upx;
				top: -50upx;
				right: -18upx;
				image{
					width: 210upx;
					height: 80upx;
				}
				.tieleText{
					font-size: 34upx;
					color: #875A19;
					font-weight: 600;
					position: absolute;
					left: 0;
					top: 0;
					height: 60upx;
					line-height: 60upx;
					text-align: center;
					width: 200upx;
				}
			}
			.denomination{
				width: 90%;
				padding: 40upx 20upx 30upx;
				background-color: #ffffff;
				border-radius: 30upx;
				margin-top: 80upx;
				display: flex;
				width: auto;
				justify-content: space-between;
				flex-wrap: wrap;
				// width: 100%;
				overflow: hidden;
				.denominaItem{
					flex: 0.32;
					color: #999999;
					min-width: 32%;
					background-color: #EAEDFF;
					border-radius: 20upx;
					padding: 20upx 0;
					margin-bottom: 15upx;
					text-align: center;
					
				}
				.checkDenominaItem{
					flex: 0.32;
					text-align: center;
					color: #FFFFFF;
					min-width: 32%;
					background-color: #2D5FFC;
					border-radius: 20upx;
					padding: 20upx 0;
					margin-bottom: 15upx;
					
				}
				.price{
					font-size: 46upx;
					font-weight: bold;
				}
				.onlyNeed{
					font-size: 26upx;
				}
				.newPrice{
					font-size: 30upx;
					font-weight: bold;
				}
			}
			.denomination:after {
			      content: "";
			      flex: 0.32;
				  min-width: 32%;
			}
		}
	}
</style>
