high-mini/subPages/recharge-centre/recharge-centre.vue

<template>
	<view>
		<view class="width100 height120" style="background-color: #3267f6;">
			<view class="alijusstart paddleft10 paddtright10" style="background-color: #2d5de5;height: 30px;">
				<image src="../static/tongz.png" style="height: 20px;" class="icon45"></image>
				<view class="right-left-scroll margle">
					<view class="content font12 fontspec"
						:style="{'animation': `noticeAnimation ${time}s linear 1s infinite`}">
						{{notice}}
					</view>
				</view>
			</view>

			<view class="block">
				<view class="content height60">
					<input type="number" class="my flleft font20 fcorfff" maxlength="11"
						placeholder-style="color:#ffffff;" placeholder="请输入充值号码" v-model="inputPhone" />
				</view>
				<view class="line1 width100 backcorfff"></view>
			</view>
		</view>
		<view class="backcorlf5 height70"></view>
		<view class="width90 border-r backcorfff" style="margin-top: -60px;">
			<view class="swiperHead">
				<!--组件-->
				<swiperNavBar :scrollIntoView="scrollIntoView" :swiperTabList='tabs' :swiperTabIdx='swiperTabIdx'
					:currentSwiperWidth='currentSwiperWidth' :currentSwiperHeight='currentSwiperHeight'
					:swiperCurrentSize='swiperCurrentSize' :swiperColor='swiperColor'
					:swiperCurrentColor='swiperCurrentColor' :currentSwiperLineShow="currentSwiperLineShow"
					:currentSwiperLineActiveWidth="currentSwiperLineActiveWidth"
					:currentSwiperLineActiveHeight="currentSwiperLineActiveHeight"
					:currentSwiperLineActiveBg="currentSwiperLineActiveBg"
					:currentSwiperLineAnimatie="currentSwiperLineAnimatie" v-if=" tabs.length > 0 "
					@change="CurrentTab">
				</swiperNavBar>
				<!--组件-->
			</view>
			<!--内容-->
			<view class="swiperCont border-r">
				<swiper class="swiper border-r" :style="{ height:mainHeight + 'px' }" :current="swiperTabIdx"
					@change="SwiperChange">
					<swiper-item class="swiperItem border-r" v-for="(item,index) in tabs" :key='index'>
						<!-- <view class="width90 font14 fcor333 fontwig6 mart5">
							话费特惠充值
						</view> -->
						<view v-if="amountList == ''" class="mart10 fotct font14 fcor666">
							<image mode="widthFix" style="width: 40vw;" :src="imagewxUrl+imgadres"></image>
						</view>
						<view class="list" v-else>
							<view class="box border-r" :class="{'on':item.id == inputAmountId}"
								v-for="(item,index) in amountList" :key="index" @click="select(item)">
								<view class="heTitle fcor333 font16 fontwig6 paddtop5"
									:class="{'on':item.id == inputAmountId}" v-if="item.status != 2">
									{{item.rechargePrice}}元
								</view>
								<view class="heTitle fcor999 font16 fontwig6 paddtop5"
									:class="{'on':item.id == inputAmountId}" v-if="item.status == 2">
									{{item.rechargePrice}}元
								</view>
								<view class="font13 contcil" :class="{'on':item.id == inputAmountId}"
									v-if="item.status != 2">售{{item.payPrice}}元</view>
								<view class="font12 contcil" :class="{'on':item.id == inputAmountId}"
									v-if="item.status == 2">已售空</view>
								<view class="width100 font12  height25l boxchil"
									:class="{'on':item.id == inputAmountId}" style="">{{explainReceiptTime}}
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<view class="width90 height50 backcor008 font18 fcorfff fotct border-r" @click="addOrderPay()">
				<text v-if="inputAmount">¥</text>
				{{inputAmount}}
				立即充值
			</view>
			<view class="width100 height40"></view>
		</view>
		<view class="width90 mart20">
			<rich-text :nodes="textcont"></rich-text>
		</view>

		<wybPopup ref="popup" type="center" height="850" width="600" bgColor="" radius="6" :showCloseIcon="true">
			<image class="popImg" :src="imageUrl+imgadres1"></image>
		</wybPopup>
		<Postion></Postion>
	</view>
</template>

<script>
	// #ifdef H5
	var jweixin = require('jweixin-module');
	// #endif
	let app = getApp();
	import QSTabs from '../../components/QS-tabs/QS-tabs.vue';
	import swiperNavBar from '../../components/swiperNavBar.vue';
	import Postion from '@/components/postion/postion.vue';
	import wybPopup from '../../components/wyb-popup/wyb-popup.vue';
	import {
		getListOutRechargePrice,
		addOrderPay,
		findSecConfigByType,
		getCmsContent
	} from '../../Utils/Api.js';
	export default {
		components: {
			QSTabs,
			swiperNavBar,
			Postion,
			wybPopup
		},
		data() {
			return {
				inputAmountId: '',
				inputAmount: '',
				inputPhone: '',
				amoutType: '',
				amountList: [],
				price: '',
				amoutstatus: '',
				tabs: [], //切换操作
				current: 0, //默认
				swiperCurrent: 2,
				imageUrl: app.globalData.imgUrl,
				imagewxUrl: app.globalData.imageWxImg,
				imgadres: 'noorder.png',
				imgadres1: '',
				image1: 'telephone1.png',
				image2: 'telephone2.png',
				notice: '', //警告
				textcont: '', // 富文本
				explainReceiptTime: '', //时间到账 
				time: 20,

				//导航
				scrollIntoView: 0, //设置哪个方向可滚动，则在哪个方向滚动到该元素
				swiperTabList: [], //导航列表
				swiperTabIdx: 0,
				swiperCurrentSize: '30rpx', //导航的字体大小
				swiperColor: '#333333', //导航栏字体未选中前颜色
				swiperCurrentColor: '#1D63FF', //选中当前导航栏字体颜色
				currentSwiperWidth: '33%', //当前导航的宽度 % upx rpx px  （导航超出可左右滑动 ）
				currentSwiperHeight: 100, //当前导航的高度度 rpx px
				mainHeight: 240, //全屏或者局部滑动设置的高度
				currentSwiperLineShow: true, //是否显示导航栏的线条 （线条距离标题太近的话可自行修改.swiperLine的css）
				currentSwiperLineActiveBg: '#1D63FF', //当前选中的导航栏线条颜色
				currentSwiperLineActiveWidth: '30rpx', //当前选中的导航栏线条的宽度 upx rpx px
				currentSwiperLineActiveHeight: '6rpx', //当前选中的导航栏线条的高度度 upx rpx px
				currentSwiperLineAnimatie: 300, //当前选中的导航栏线条过渡效果

			}
		},
		onLoad(options) {
			this.getCmsAactibity();
			this.getListOutRechargePrice();
		},
		onShow() {
			this.findSecConfigByType();
			this.findSecConfigByTypewap();
		},
		mounted() {
			// let scroll_width = 0;
			// const query = uni.createSelectorQuery().in(this);
			// query.select('.right-left-scroll').boundingClientRect(data => {
			// 	scroll_width = (data.width).toFixed(2);
			// }).exec();

			// query.select('.right-left-scroll .content').boundingClientRect(data => {
			// 	if (data.width - scroll_width > 0) {
			// 		this.time = (9 * data.width / scroll_width).toFixed(2);
			// 		console.log('=====' + this.time);
			// 	}
			// }).exec();
		},
		methods: {
			//查询弹窗
			getCmsAactibity() {
				let code;
				// #ifdef H5
				code = '2'
				// #endif
				// #ifdef MP
				code = '1'
				// #endif
				let params = {
					companyId: app.globalData.companyId,
					platform: code,
					categoryCode: 'CMS_RECHARGE_POPOVER'
				}
				getCmsContent(params).then(res => {
					if (res.return_code == '000000' && res.return_data.childCategory.length != 0) {
						//弹窗首页广告
						this.imgadres1 = res.return_data.childCategory[0].imgData;
						this.showPopup();
					}
				});
			},
			//显示弹出
			showPopup() {
				this.$refs.popup.show();
			},
			// 充值通知
			findSecConfigByType() {
				let datas = {
					codeType: 'EXPLAIN_NOTIFICATIONS'
				}
				findSecConfigByType(datas).then(res => {
					if (res.return_code == '000000') {
						this.notice = res.return_data.codeValue;
					}
				});
			},
			//充值警告
			findSecConfigByTypewap() {
				let datas = {
					codeType: 'EXPLAIN_WRAP '
				}
				findSecConfigByType(datas).then(res => {
					if (res.return_code == '000000') {
						this.textcont = res.return_data.codeValue;
					}
				});
			},
			select(amoutinfos) {
				this.inputAmount = amoutinfos.payPrice;
				this.price = amoutinfos.rechargePrice;
				this.inputAmountId = amoutinfos.id;
				this.amoutstatus = amoutinfos.status;
			},
			/**
			 * 查询价格
			 */
			getListOutRechargePrice() {
				uni.showLoading({
					title: '加载中...'
				})
				let showType;
				// #ifdef H5
				showType = 2;
				// #endif
				// #ifdef MP
				showType = 1;
				// #endif
				let params = {
					"companyId": app.globalData.companyId,
					platformId: showType
				}
				getListOutRechargePrice(params).then(res => {
					uni.hideLoading()
					if (res.return_code == '000000' && res.return_data) {
						this.tabs = res.return_data;
						this.amountList = res.return_data[0].priceList;
						this.explainReceiptTime = res.return_data[0].explain_receipt_time;
						this.amoutType = res.return_data[0].id;
					} else {
						this.amountList = [];
					}
				})
			},

			//tab点击事件 自行完善需要的代码
			CurrentTab: function(index) {
				this.swiperTabIdx = index;
				this.scrollIntoView = Math.max(0, index - 1);
				this.explainReceiptTime = this.tabs[this.swiperTabIdx].explain_receipt_time;
				this.amountList = this.tabs[this.swiperTabIdx].priceList;
				this.amoutType = this.tabs[this.swiperTabIdx].id;
			},
			//滑动事件  自行完善需要的代码
			SwiperChange: function(e) {
				this.swiperTabIdx = e.detail.current;
				this.scrollIntoView = Math.max(0, e.detail.current - 1);
				this.explainReceiptTime = this.tabs[this.swiperTabIdx].explain_receipt_time;
				this.amountList = this.tabs[this.swiperTabIdx].priceList;
				this.amoutType = this.tabs[this.swiperTabIdx].id;
			},
			/**
			 * 提交订单
			 */
			addOrderPay() {
				let that = this;
				if (that.amoutstatus == 2) {
					uni.showToast({
						title: '当前面值已售空',
						duration: 2000,
						icon: "none"
					});
					return;
				}
				if (that.inputPhone == '') {
					uni.showToast({
						title: '请输入充值号码',
						duration: 2000,
						icon: "none"
					});
					return;
				}
				if (that.inputPhone.length != 11) {
					uni.showToast({
						title: '请输入正确充值号码',
						duration: 2000,
						icon: "none"
					});
					return;
				}
				if (that.inputAmount == '') {
					uni.showToast({
						title: '请选择价格',
						duration: 2000,
						icon: "none"
					});
					return false;
				}
				uni.showToast({
					title: '提交订单...',
					icon: 'none',
					duration: 2000,
					success() {
						uni.navigateTo({
							url: '../unionComfirmation/unionComfirmation?orderPrice=' + that.price +
								'&payPrice=' + that.inputAmount + '&rechargeContent=' + that.inputPhone +
								'&rechargeModel=' + that.amoutType +
								'&objectId=' + that.inputAmountId + '&rechargeType=' + that.swiperCurrent
						})
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.popImg {
		width: 100%;
		height: 430px;
	}

	.swiperHead {
		width: 100%;
	}

	.swiperHead scroll-view {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		white-space: nowrap;
	}

	.swiperTab {
		display: inline-flex;
		flex-direction: column;
		text-align: center;
	}

	.swiperCont {
		width: 100%;
		padding-top: 5px;
		padding-bottom: 20px;
		background-color: #ffffff;
	}

	/* #ifdef H5 */
	.swiperHead {
		top: 44px;
		z-index: 10;
		width: 100%;
		background: #FFFFFF;
	}

	/* #endif */

	.swiper {
		width: 100%;
		height: 500rpx;
	}

	.swiperItem {
		overflow: auto;
		background: #ffffff;
		color: #333333;
		font-size: 30upx;
	}





	.block {
		width: 94%;
		padding: 15px 3%;

		.my {
			width: 80%;
			height: 120upx;
			display: flex;
			align-items: center;
		}

		.uni-input-placeholder {
			color: #FFFFFF;
		}
	}

	.list {
		width: 94%;
		margin-left: 3%;
		display: flow-root;
		justify-content: space-between;
		align-items: center;
		padding: 20upx 0;

		.box {
			width: 29%;
			margin-left: 1%;
			margin-right: 2%;
			margin-top: 20upx;
			margin-bottom: 20upx;
			float: left;
			height: 150upx;
			// line-height: 120upx;
			// display: inline-grid;
			justify-content: center;
			align-items: center;
			text-align: center;
			border: 1px solid #f1f1f1;
			font-size: 36upx;

			&.on {
				background-color: #ecf5fe;
				border: 1px solid #089bf5;
				color: #089bf5;
			}
		}

		.heTitle {
			width: 100%;

			&.on {
				color: #089bf5;
			}
		}
	}


	.boxchil {
		border-radius: 0 0 5px 5px;
		background-color: #f0f0f0;
		margin-top: 7px;
		color: #999999;

		&.on {
			background-color: #089bf5;
			color: #ffffff;
		}
	}

	.contcil {
		color: #999999;

		&.on {
			// background-color: #089bf5;
			color: #089bf5;
		}
	}

	.right-left-scroll {
		white-space: nowrap;
		overflow: hidden;

		.content {
			display: inline-block;
			color: #c1b569;
		}
	}
</style>