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.
495 lines
17 KiB
495 lines
17 KiB
<template>
|
|
<view>
|
|
<view class="width100 height100p backcorf06">
|
|
<view class="block">
|
|
<view class="content height60">
|
|
<input type="number" class="my flleft font18 fcorfff" maxlength="11"
|
|
placeholder-style="color:#ffffff;" placeholder="请输入充值号码" v-model="inputPhone" />
|
|
</view>
|
|
<view class="line1 width100 backcorfff"></view>
|
|
</view>
|
|
</view>
|
|
<view class="mart5">
|
|
<QSTabs ref="tabs" :tabs="tabs" animationMode="line2" :current="current" @change="change"
|
|
activeColor="#089bf5" lineColor="#089bf5" minWidth="374">
|
|
</QSTabs>
|
|
</view>
|
|
<view class="width90 font16 fcor333 fontwig6 mart20">
|
|
选择金额
|
|
</view>
|
|
<view class="list">
|
|
<view class="box" :class="{'on':item.id == inputAmountId}" v-for="(item,index) in amountList" :key="index"
|
|
@click="select(item)">
|
|
<view class="heTitle">{{item.price}}元</view>
|
|
<view class="font13 fcor999" v-if="item.status != 2 && item.discount != 100">{{item.discount}} 折</view>
|
|
<view class="font13 fcor999" v-if="item.status == 2">已售空</view>
|
|
</view>
|
|
</view>
|
|
<view class="mart5 width90 font18 fcor333 fontwig6">
|
|
充值说明：
|
|
</view>
|
|
<view v-if="current == 0">
|
|
<view class="mart5 width80 font14 fcoreb5 fontwig6" style="list-style-type: decimal;">
|
|
<view style="width: 5%;" class="flleft">1:</view>
|
|
<view style="margin-left: 5%;">
|
|
此业务为话费慢充。日常72小时内到账，如遇月初、月末运营商高峰期或系统更新，到账时间会有一定延迟，敬请谅解。充值失败后系统会自动为您退款至原账户。急单请选择“6小时到账”充值端口，感谢您的支持！
|
|
</view>
|
|
</view>
|
|
<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
|
|
<view style="width: 5%;" class="flleft">2:</view>
|
|
<view style="margin-left: 5%;">慢充话费与营业厅充值一样，只是到账时间稍长。充值过程中可能出现分批到账的情况，但是总金额不会少，请耐心等待。</view>
|
|
</view>
|
|
<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
|
|
<view style="width: 5%;" class="flleft">3:</view>
|
|
<view style="margin-left: 5%;">
|
|
目前仅支持(移动、联通、电信三网号段)，运营商黑名单号码(长期欠费或非实名制认证)携号转网空号、虚拟卡(如165167170171162等等虚拟号段)副卡号码或做过某些特殊套餐绑定的卡暂不支持充值，请勿下单。
|
|
</view>
|
|
</view>
|
|
<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
|
|
<view style="width: 5%;" class="flleft">4:</view>
|
|
<view style="margin-left: 5%;">停机号码需要额外补缴欠费后，慢充话费才能到账。<text
|
|
class="fcoreb5">此服务为虚拟充值类服务，无特殊情况不支持退款，下单前请确认充值的号码无误。</text></view>
|
|
</view>
|
|
<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
|
|
<view style="width: 5%;" class="flleft">5:</view>
|
|
<view style="margin-left: 5%;">空号、错号充值后不支持退款，请您务必核对确认号码无误后再进行充值。非空号欠费可充，欠费1个月导致空号的不能充值，损失自负无法退款。
|
|
</view>
|
|
</view>
|
|
<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
|
|
<view style="width: 5%;" class="flleft">6:</view>
|
|
<view style="margin-left: 5%;"><text
|
|
class="fcoreb5">本充值业务不提供发票</text>。如需发票请在运营商手机客户端储开取电子发票，也可以凭身份证到运营商实体营业厅打印发票。</view>
|
|
</view>
|
|
<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
|
|
<view style="width: 5%;" class="flleft">7:</view>
|
|
<view style="margin-left: 5%;">如遇系统维护充值失败，将72小时后原路退款到付款账户。 </view>
|
|
</view>
|
|
<view class="mart5 width80 font14 fcor999 fontwig6 marb40" style="list-style-type: decimal;">
|
|
<view style="width: 5%;" class="flleft">8:</view>
|
|
<view style="margin-left: 5%;">请登录所属运营商app（手机营业厅）查看充值号码的到账情况，如金额有出入或未到账，请截图充值记录明细反馈给客服。录明细反馈给客服。</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="current == 1">
|
|
<view class="mart5 width80 font14 fcoreb5 fontwig6" style="list-style-type: decimal;">
|
|
<view style="width: 5%;" class="flleft">1:</view>
|
|
<view style="margin-left: 5%;">
|
|
充值后6小时内到账，请耐心等待；如遇月初、月末运营商充值压力大，充值失败后，系统会为您自动再提交一次，如二次充值仍然失败，系统将会自动为您退款至原账户，请悉知。
|
|
</view>
|
|
</view>
|
|
<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
|
|
<view style="width: 5%;" class="flleft">2:</view>
|
|
<view style="margin-left: 5%;">
|
|
目前仅支持(移动、联通、电信三网号段)，运营商黑名单号码(长期欠费或非实名制认证)携号转网空号、虚拟卡(如165167170171162等等虚拟号段)副卡号码或做过某些特殊套餐绑定的卡暂不支持充值，请勿下单。
|
|
</view>
|
|
</view>
|
|
<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
|
|
<view style="width: 5%;" class="flleft">3:</view>
|
|
<view style="margin-left: 5%;">停机号码需要额外补缴欠费后，慢充话费才能到账。此服务为虚拟充值类服务，无特殊情况不支持退款，下单前请确认充值的号码无误。</view>
|
|
</view>
|
|
<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
|
|
<view style="width: 5%;" class="flleft">4:</view>
|
|
<view style="margin-left: 5%;">空号、错号充值后不支持退款，请您务必核对确认号码无误后再进行充值。非空号欠费可充，欠费1个月导致空号的不能充值，损失自负无法退款。</view>
|
|
</view>
|
|
<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
|
|
<view style="width: 5%;" class="flleft">5:</view>
|
|
<view style="margin-left: 5%;"><text
|
|
class="fcoreb5">本充值业务不提供发票。</text>如需发票请在运营商手机客户端储开取电子发票，也可以凭身份证到运营商实体营业厅打印发票。</view>
|
|
</view>
|
|
<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
|
|
<view style="width: 5%;" class="flleft">6:</view>
|
|
<view style="margin-left: 5%;">如遇系统维护充值失败，将72小时后原路退款到付款账户。
|
|
</view>
|
|
</view>
|
|
<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
|
|
<view style="width: 5%;" class="flleft">7:</view>
|
|
<view style="margin-left: 5%;">请登录所属运营商app(手机营业厅)查看充值号码的到账情况，如金额有出入或未到账，请截图充值记录明细反馈给客服。录明细反馈给客服。</view>
|
|
</view>
|
|
</view>
|
|
<view class="height100p"></view>
|
|
<view class="bombtn width94 font16">
|
|
<view class="width50 flleft payem">应付: {{inputAmount}}元</view>
|
|
<view class="width50 flright paybtn" @click="addOrderPay">立即购买</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// #ifdef H5
|
|
var jweixin = require('jweixin-module');
|
|
// #endif
|
|
let app = getApp();
|
|
import QSTabs from '../../components/QS-tabs/QS-tabs.vue';
|
|
import {
|
|
getListOutRechargePrice,
|
|
addOrderPay,
|
|
orderToUNionPay
|
|
} from '../../Utils/Api.js';
|
|
export default {
|
|
components: {
|
|
QSTabs
|
|
},
|
|
data() {
|
|
return {
|
|
typeId: '',
|
|
inputAmountId: '',
|
|
inputAmount: '',
|
|
inputPhone: '',
|
|
amoutType: '',
|
|
codesVlues: '',
|
|
amountList: [],
|
|
price: '',
|
|
amoutstatus: '',
|
|
tabs: ["72小时到账", "6小时到账"], //切换操作
|
|
current: 0, //默认
|
|
swiperCurrent: 2
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.typeId = options.id;
|
|
if (!app.globalData.userInfo) {
|
|
if (this.typeId == 1) {
|
|
uni.setNavigationBarTitle({
|
|
title: '中国移动'
|
|
})
|
|
this.amoutType = 2;
|
|
this.getListOutRechargePrice(2);
|
|
return;
|
|
}
|
|
if (this.typeId == 2) {
|
|
uni.setNavigationBarTitle({
|
|
title: '中国电信'
|
|
})
|
|
this.amoutType = 1;
|
|
this.getListOutRechargePrice(1);
|
|
return;
|
|
}
|
|
if (this.typeId == 3) {
|
|
uni.setNavigationBarTitle({
|
|
title: '中国联通'
|
|
})
|
|
this.amoutType = 3;
|
|
this.getListOutRechargePrice(3);
|
|
return;
|
|
}
|
|
}
|
|
},
|
|
onShow() {
|
|
this.amountList = [];
|
|
if (app.globalData.userInfo) {
|
|
if (this.typeId == 1) {
|
|
uni.setNavigationBarTitle({
|
|
title: '中国移动'
|
|
})
|
|
this.amoutType = 2;
|
|
this.getListOutRechargePrice(2);
|
|
return;
|
|
}
|
|
if (this.typeId == 2) {
|
|
uni.setNavigationBarTitle({
|
|
title: '中国电信'
|
|
})
|
|
this.amoutType = 1;
|
|
this.getListOutRechargePrice(1);
|
|
return;
|
|
}
|
|
if (this.typeId == 3) {
|
|
uni.setNavigationBarTitle({
|
|
title: '中国联通'
|
|
})
|
|
this.amoutType = 3;
|
|
this.getListOutRechargePrice(3);
|
|
return;
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
select(amoutinfos) {
|
|
this.inputAmount = amoutinfos.realPrice;
|
|
this.price = amoutinfos.price;
|
|
this.inputAmountId = amoutinfos.id;
|
|
this.amoutstatus = amoutinfos.status;
|
|
},
|
|
//筛选
|
|
change(index) {
|
|
this.$refs.tabs.setFinishCurrent(index);
|
|
this.current = index;
|
|
this.inputAmount = '';
|
|
this.inputAmountId = '';
|
|
this.amoutstatus = '';
|
|
if (index == 0) {
|
|
this.swiperCurrent = 2;
|
|
this.getListOutRechargePrice(this.amoutType);
|
|
} else {
|
|
this.swiperCurrent = 1;
|
|
this.getListOutRechargePrice(this.amoutType);
|
|
}
|
|
},
|
|
/**
|
|
* 查询价格
|
|
*/
|
|
getListOutRechargePrice(item) {
|
|
uni.showLoading({
|
|
title: '加载中...'
|
|
})
|
|
let showType;
|
|
// #ifdef H5
|
|
showType = 2;
|
|
// #endif
|
|
// #ifdef MP
|
|
showType = 1;
|
|
// #endif
|
|
let params = {
|
|
type: item,
|
|
regionId: app.globalData.cityId,
|
|
showType: showType,
|
|
rechargeType: this.swiperCurrent
|
|
}
|
|
getListOutRechargePrice(params).then(res => {
|
|
uni.hideLoading()
|
|
if (res.return_code == '000000' && res.return_data) {
|
|
this.amountList = res.return_data;
|
|
} else {
|
|
this.amountList = [];
|
|
}
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 提交订单
|
|
*/
|
|
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 params = {
|
|
// "orderPrice": this.inputAmount,
|
|
// "payPrice": this.inputAmount,
|
|
// "rechargeContent": this.inputPhone,
|
|
// "rechargeModel": this.amoutType,
|
|
// "agentKey": this.codesVlues,
|
|
// "objectId": this.inputAmountId,
|
|
// }
|
|
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 + '&agentKey=' + that.codesVlues +
|
|
'&objectId=' + that.inputAmountId + '&rechargeType=' + that.swiperCurrent
|
|
})
|
|
}
|
|
})
|
|
|
|
|
|
|
|
// uni.showLoading({
|
|
// title: '加载中...'
|
|
// })
|
|
// addOrderPay(params).then(res => {
|
|
// uni.hideLoading()
|
|
// if (res.return_code == '000000') {
|
|
// let params = {
|
|
// "orderId": res.return_data.id,
|
|
// "openId": app.globalData.openId
|
|
// }
|
|
// this.orderToUNionPay(params);
|
|
// } else {
|
|
// uni.showToast({
|
|
// title: res.return_msg,
|
|
// icon: "none"
|
|
// })
|
|
// }
|
|
// })
|
|
|
|
},
|
|
//获取订单信息
|
|
orderToUNionPay(item) {
|
|
orderToUNionPay(item).then(res => {
|
|
if (res.return_code == '000000') {
|
|
//判断是否是公众号
|
|
// #ifdef H5
|
|
//判断微信浏览器
|
|
this.payRequest(res);
|
|
// #endif
|
|
} else {
|
|
uni.showToast({
|
|
title: res.return_msg,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
//唤起支付
|
|
payRequest: function(self) {
|
|
uni.showLoading({
|
|
title: '支付中...'
|
|
})
|
|
jweixin.config({
|
|
// debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
|
|
appId: self.return_data.appId, // 必填，公众号的唯一标识
|
|
timestamp: self.return_data.timeStamp, // 必填，生成签名的时间戳
|
|
nonceStr: self.return_data.nonceStr, // 必填，生成签名的随机串
|
|
signature: self.return_data.sign, // 必填，签名，见附录1
|
|
jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
|
|
});
|
|
uni.hideLoading();
|
|
jweixin.ready(function() {
|
|
jweixin.checkJsApi({
|
|
jsApiList: ['chooseWXPay'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
|
|
success: function(res) {},
|
|
fail: function(res) {}
|
|
});
|
|
jweixin.chooseWXPay({
|
|
appId: self.return_data.appId,
|
|
timestamp: self.return_data
|
|
.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
|
|
nonceStr: self.return_data.nonceStr, // 支付签名随机串，不长于 32 位
|
|
package: self.return_data
|
|
.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
|
|
signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
|
|
paySign: self.return_data.sign, // 支付签名
|
|
success: function(res) {
|
|
// 支付成功后的回调函数
|
|
uni.showToast({
|
|
title: '支付成功'
|
|
})
|
|
if (that.jumpType == 4) {
|
|
uni.reLaunch({
|
|
url: '/pages/tabBar/user/user'
|
|
});
|
|
} else {
|
|
uni.reLaunch({
|
|
url: '../success/success?id=' + that.couponId
|
|
});
|
|
}
|
|
},
|
|
cancel: function(r) {},
|
|
fail: function(res) {}
|
|
});
|
|
});
|
|
|
|
jweixin.error(function(res) {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '支付失败了',
|
|
duration: 4000
|
|
});
|
|
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
|
|
/*alert("config信息验证失败");*/
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.block {
|
|
width: 94%;
|
|
padding: 60upx 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: 30%;
|
|
margin-left: 1%;
|
|
margin-right: 2%;
|
|
margin-top: 20upx;
|
|
float: left;
|
|
height: 120upx;
|
|
// line-height: 120upx;
|
|
display: inline-grid;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
box-shadow: 0upx 0upx 4upx #666666;
|
|
font-size: 36upx;
|
|
color: #089bf5;
|
|
|
|
&.on {
|
|
background-color: #089bf5;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.heTitle {
|
|
width: 100%;
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
|
|
.bombtn {
|
|
position: fixed;
|
|
height: 45px;
|
|
bottom: 20px;
|
|
border-radius: 6px;
|
|
|
|
.payem {
|
|
height: 45px;
|
|
line-height: 45px;
|
|
text-align: center;
|
|
background-color: #007AFF;
|
|
color: #FFFFFF;
|
|
border-radius: 6px 0 0 6px;
|
|
}
|
|
|
|
.paybtn {
|
|
height: 45px;
|
|
line-height: 45px;
|
|
text-align: center;
|
|
background-color: #F8A628;
|
|
border-radius: 0 6px 6px 0;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
</style>
|
|
|