You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
522 lines
14 KiB
522 lines
14 KiB
<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: '#ffffff', //选中当前导航栏字体颜色
|
|
currentSwiperWidth: '33.33%', //当前导航的宽度 % upx rpx px （导航超出可左右滑动 ）
|
|
currentSwiperHeight: 100, //当前导航的高度度 rpx px
|
|
mainHeight: 240, //全屏或者局部滑动设置的高度
|
|
currentSwiperLineShow: false, //是否显示导航栏的线条 （线条距离标题太近的话可自行修改.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;
|
|
}
|
|
|
|
.bgSet{
|
|
background-color:#1D63FF;
|
|
}
|
|
|
|
.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> |