<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; this.inputAmount = ''; this.price = ''; this.inputAmountId = ''; this.amoutstatus = ''; }, //滑动事件 自行完善需要的代码 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; this.inputAmount = ''; this.price = ''; this.inputAmountId = ''; this.amoutstatus = ''; }, /** * 提交订单 */ 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; } let cztype = ''; if (that.swiperTabIdx == 0) { cztype = '中国电信' } if (that.swiperTabIdx == 1) { cztype = '中国移动' } if (that.swiperTabIdx == 2) { cztype = '中国联通' } uni.showModal({ title: '请确认充值号码', content: cztype + ' : ' + that.inputPhone + ',充值金额 : ' + that.inputAmount + '元,充值成功后无法退款', success: function(res) { if (res.confirm) { uni.navigateTo({ url: '../unionComfirmation/unionComfirmation?orderPrice=' + that .price + '&payPrice=' + that.inputAmount + '&rechargeContent=' + that .inputPhone + '&rechargeModel=' + that.amoutType + '&objectId=' + that.inputAmountId + '&rechargeType=' + that .swiperCurrent }) } } }) // 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: 100%; min-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>