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.
 
 
 
 
high-mini/subPages/recharge-centre/recharge-centre.vue

500 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: '#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.showModal({
title: '请确认充值号码',
content: '充值号码 : ' + that.inputPhone + ',充值成功后无法退款',
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>