715 lines
18 KiB
Vue
715 lines
18 KiB
Vue
<template>
|
||
<view style="padding-bottom: 160rpx">
|
||
<!-- <fu-custom :isBack="true" :isBottom="true" bgColor="cu-theme" backColor="text-white">
|
||
<block slot="content"><text class="text-white">充值</text></block>
|
||
</fu-custom> -->
|
||
<!-- 选择金额 start -->
|
||
<!-- <view class="cz_cont"> -->
|
||
<!-- <view class="flex text-center mt32 pb16" style="border-bottom: 1px solid #FFFFFF;">
|
||
<view v-for="(item, index) in navList" :key="index" class="cu-item flex-sub " :class="{ cur: tabCurrentIndex === index }" @click="tabClick(index)">
|
||
{{ item.text || '' }}
|
||
<view class="active-line"></view>
|
||
</view>
|
||
</view> -->
|
||
<!-- <text class="tx_money " style="color: #333333;" v-if="tabCurrentIndex == 0">
|
||
充值金额
|
||
</text>
|
||
<view class="item_main" v-if="tabCurrentIndex == 0">
|
||
<view class="list" :class="act_type == index ? 'act' : ''" @click="get_money(item, index)" :data-index="index" v-for="(item, index) in moneyData" :key="index">
|
||
<text class="add_money">
|
||
{{ item.money }}
|
||
<text class="fs24">{{ i18n['元'] }}</text>
|
||
</text>
|
||
<image v-if="act_type == index " src="/static/my/checkmoney.png" mode=""></image>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- <view style="margin-top: 48rpx; padding: 0 24rpx;" v-if="tabCurrentIndex == '1'">
|
||
<view class="fs32 text-blod font-d8">{{ i18n['卡号'] }}</view>
|
||
<input
|
||
type="number"
|
||
value=""
|
||
class="fs32 font-cc"
|
||
style="height: 100rpx; border-bottom: 1px solid #FFFFFF;"
|
||
placeholder-class="text-pr-lp"
|
||
@input="handleChange"
|
||
:placeholder="i18n['请输入礼品卡号']"
|
||
v-model="change_money"
|
||
/>
|
||
<view class="flex text-999 fs24" style="flex-flow: column; padding: 40rpx 0;">
|
||
<text>{{ i18n['温馨提示'] }}：</text>
|
||
<text style="margin-top: 8rpx;">{{ '礼品卡充值成功之后不可退回，文字后台可设定' }}</text>
|
||
</view>
|
||
</view> -->
|
||
<!-- </view> -->
|
||
<!-- 选择金额 end -->
|
||
|
||
<!-- 充值信息 start -->
|
||
<view class="tx_cont" v-if="tabCurrentIndex == 0">
|
||
<text class="tx_money">
|
||
<!-- <image style="width: 6rpx; height: 28rpx; margin-right: 24rpx;" src="/static/my/zuobian.png"></image> -->
|
||
自定输入金额
|
||
</text>
|
||
<view class="tx_box">
|
||
<text style="color: #333333;">¥</text>
|
||
<input type="number" value="" class=" font-cc" placeholder-class="text-pr" @input="handleChange" placeholder="0.00" v-model="change_money" />
|
||
</view>
|
||
</view>
|
||
<!-- 充值信息 end -->
|
||
|
||
<!-- 充值方式 start -->
|
||
<view class="pay_box" v-if="tabCurrentIndex == 0">
|
||
<view class="model_content">
|
||
<view class="pay">
|
||
<!-- <image style="width: 6rpx; height: 28rpx; margin-right: 24rpx;" src="/static/my/zuobian.png"></image> -->
|
||
选择支付方式
|
||
</view>
|
||
</view>
|
||
<view class="cu-list menu" style="border-radius: 24rpx;">
|
||
<radio-group class="block" @change="RadioChange">
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<view class="cu-item cu-form-group " @click="handleSelect(1)">
|
||
<view class="title alipay fs28 ">支付宝</view>
|
||
<view class="content" style="display: flex;justify-content: space-between;align-items: center;">
|
||
<image class="image" v-if="acc_type == '1'" :src='STATIC_URL+"122.png"' mode="aspectFill"></image>
|
||
<image class="image" v-else :src='STATIC_URL+"123.png"'mode="aspectFill"></image>
|
||
<!-- <radio color="#FF5737" :class="acc_type == '2' ? 'checked' : ''" :checked="acc_type == '2' ? true : false" value="2"></radio> -->
|
||
</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
<view class="cu-item cu-form-group " @click="handleSelect(2)">
|
||
<view class="title wxpay fs28 ">微信</view>
|
||
<view class="content" style="display: flex;justify-content: space-between;align-items: center;">
|
||
<image class="image" v-if="acc_type == '2'" :src='STATIC_URL+"122.png"' mode="aspectFill"></image>
|
||
<image class="image" v-else :src='STATIC_URL+"123.png"' mode="aspectFill"></image>
|
||
<!-- <radio color="#FF5737" :class="acc_type == '1' ? 'checked' : ''" :checked="acc_type == '1' ? true : false" value="1"></radio> -->
|
||
</view>
|
||
</view>
|
||
|
||
</radio-group>
|
||
</view>
|
||
</view>
|
||
<!-- 充值方式 end -->
|
||
|
||
<!-- 立即充值按钮 -->
|
||
<view class="tx_btn" @click="payFn">立即充值</view>
|
||
<!-- 断网检测 -->
|
||
<fu-notwork></fu-notwork>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* @author 刘畅
|
||
*/
|
||
export default {
|
||
data() {
|
||
return {
|
||
number:1,
|
||
tabCurrentIndex: 0, //顶部导航 选择的第几个
|
||
navList: [
|
||
{
|
||
state: 0,
|
||
text: global.i18n['余额充值']
|
||
},
|
||
{
|
||
state: 1,
|
||
text: global.i18n['礼品卡充值']
|
||
}
|
||
], //冻结顶部导航
|
||
change_money: '', // {String} 充值金额
|
||
acc_type: 1, // {Number} 充值方式 1:支付宝；2：微信；
|
||
act_type: -1, // {Number} 选择充值的金额
|
||
wxChannel: '', // {String} 获取微信服务供应商
|
||
aliChannel: '', // {String} 获取阿里服务供应商
|
||
moneyData: [], // {Array.<Object>} 选择充值那些金额
|
||
showPopup: false, // {Boolean} 弹窗是否显示
|
||
is_show: true, // {Boolean}
|
||
product_id: 0, // {Number} 选择充值金额的产品id，0：自定义；
|
||
money: '' // {String} 充值金额
|
||
};
|
||
},
|
||
/**
|
||
* @function
|
||
* @description 获取系统信息，获取包支持的服务商信息
|
||
*/
|
||
onLoad(options) {
|
||
// #ifdef MP-WEIXIN
|
||
this.acc_type=2
|
||
// #endif
|
||
this.setNavigationBarTitle('充值');
|
||
let that = this;
|
||
uni.getProvider({
|
||
service: 'payment',
|
||
success: function(res) {
|
||
let provider = res.provider;
|
||
provider.forEach(item => {
|
||
if (item == 'wxpay') {
|
||
that.wxChannel = item;
|
||
} else {
|
||
that.aliChannel = item;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
this.getDetali();
|
||
if (uni.getSystemInfoSync().platform == 'ios') {
|
||
this.is_show = false;
|
||
} else {
|
||
this.is_show = true;
|
||
}
|
||
},
|
||
onNavigationBarButtonTap(e) {
|
||
this.showPopup = true;
|
||
},
|
||
methods: {
|
||
tabClick(index) {
|
||
this.tabCurrentIndex = index;
|
||
},
|
||
handleSelect(value) {
|
||
this.acc_type = value;
|
||
},
|
||
/**
|
||
* @function
|
||
* @description 获取充值规则
|
||
* @property {Number} group -【规则分组。类型：int(11) unsigned，默认0通用，1 IOS】
|
||
*/
|
||
getDetali() {
|
||
// return
|
||
this.$api
|
||
.get(global.apiUrls.getRechargeRule, {
|
||
// group: 0
|
||
})
|
||
.then(res => {
|
||
console.log(res);
|
||
this.moneyData = res.data.data;
|
||
});
|
||
},
|
||
/**
|
||
* @event 手动输入
|
||
* @description 手动输入充值金额
|
||
*/
|
||
handleChange() {
|
||
this.act_type = -1;
|
||
this.product_id = 0;
|
||
console.log(this.change_money);
|
||
},
|
||
/**
|
||
* @description 不知道有啥用，但是不敢删
|
||
*/
|
||
confirm: async function() {
|
||
let _self = this;
|
||
if (_self.checked) {
|
||
//下单
|
||
if (_self.payType == 'wxpay') {
|
||
_self.requestPayment('wxpay', _self.order_sn);
|
||
uni.showLoading({
|
||
title: '请稍等，正在发起支付'
|
||
});
|
||
} else if (_self.payType == 'alipay') {
|
||
_self.requestPayment('alipay', _self.order_sn);
|
||
uni.showLoading({
|
||
title:'请稍等，正在发起支付'
|
||
});
|
||
}
|
||
}
|
||
},
|
||
/**
|
||
* @function
|
||
* @description 支付成功
|
||
* @param {Object} sn - 支付成功
|
||
*/
|
||
paySuccess(sn) {
|
||
this.$message.success('支付成功');
|
||
setTimeout(() => {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
}, 800);
|
||
|
||
// if (this.order_type == 12) {
|
||
// uni.redirectTo({
|
||
// url: '/pages/integral/integralgoods/exchange-success/index',
|
||
// order_sn: sn,
|
||
// })
|
||
|
||
// } else {
|
||
// this.$urouter.redirectTo({
|
||
// url: '/pages/order/order-process/pay-success/index',
|
||
// params: {
|
||
// order_sn: sn,
|
||
// order_type: 3,
|
||
// pay_type: this.payType
|
||
// }
|
||
// })
|
||
// }
|
||
},
|
||
/**
|
||
* @event
|
||
* @description 点击选择充值金额
|
||
* @param {Obejct} item - 点击的哪一项的详细信息
|
||
* @param {Number} index - 点击的哪一项的序号
|
||
*/
|
||
get_money(item, index) {
|
||
this.act_type = index;
|
||
this.change_money = item.money;
|
||
this.money = item.money;
|
||
this.product_id = item.id;
|
||
},
|
||
/**
|
||
* @event
|
||
* @description 切换充值方式
|
||
*/
|
||
RadioChange(e) {
|
||
this.acc_type = e.detail.value;
|
||
},
|
||
// get_type(e) {
|
||
// this.acc_type = e.currentTarget.dataset.index;
|
||
// },
|
||
/**
|
||
* @event
|
||
* @description 点击立即充值按钮
|
||
* @property {Obejct} arr - 请求接口携带的参数
|
||
* @property {Number} arr.order_type - 【订单类型。类型：int(11) unsigned】1 ：'现金充值'，2：'虚拟币充值'，3 ：'商城交易'
|
||
* @property {String} arr.pay_type - 【支付渠道。类型：varchar(256)】wxpay:微信，alipay:支付宝，appleiap:苹果内购
|
||
* @property {String} arr.payable_money - 【应付金额。类型：decimal(10,2)】选填，也可以服务器计算
|
||
* @property {String} arr.order_info - 【商品订单等订单的附加信息。类型：字符串object】
|
||
* @property {String} arr.coupon_id - 【我使用的优惠券id。类型：int(10) unsigned】
|
||
*/
|
||
payFn() {
|
||
// uni.redirectTo({
|
||
// url: '/pages/order/order-process/pay-success/index',
|
||
// order_sn: 1
|
||
// });
|
||
// return;
|
||
// if(this.number==2){
|
||
// return
|
||
// }
|
||
console.log(this.change_money);
|
||
let { acc_type, change_money, money } = this;
|
||
console.log(this.product_id )
|
||
if (this.product_id == 0) {
|
||
if (!change_money) return this.$message.info('请输入充值金额');
|
||
if (change_money < 0.01) return this.$message.info('输入金额不能小于0.01元');
|
||
}
|
||
let data = {
|
||
amount: this.change_money
|
||
};
|
||
console.log(data);
|
||
console.log(global.apiUrls.postAddOrder)
|
||
this.$api
|
||
.post(global.apiUrls.post6710d191613f2, data)
|
||
.then(res => {
|
||
console.log(res);
|
||
if (res.data.code == 1) {
|
||
console.log(res.data)
|
||
// let sn = res.data.data.order_sn;
|
||
uni.requestPayment({
|
||
provider: 'wxpay',
|
||
timeStamp: res.data.data.result.payCode.timeStamp,
|
||
nonceStr: res.data.data.result.payCode.nonceStr,
|
||
package: res.data.data.result.payCode.package,
|
||
signType: res.data.data.result.payCode.signType,
|
||
paySign: res.data.data.result.payCode.paySign,
|
||
success: res => {
|
||
uni.showToast({ title: '支付成功~', icon: 'none' });
|
||
setTimeout(()=> {
|
||
uni.navigateBack({delta: 1})
|
||
}, 800)
|
||
},
|
||
fail: err => {
|
||
console.log('fail:' + JSON.stringify(err));
|
||
}
|
||
});
|
||
|
||
}else{
|
||
this.$message.info(res.data.msg);
|
||
}
|
||
})
|
||
.catch(e => {
|
||
console.log(e);
|
||
this.$message.info('网络繁忙,请稍后重试');
|
||
});
|
||
},
|
||
|
||
// 唤醒支付
|
||
startPay(provider,orderInfo){
|
||
let { modes, payOptions } = this
|
||
console.log(provider)
|
||
console.log(orderInfo)
|
||
let self = this;
|
||
let types=1
|
||
if(provider=='wxpay'){
|
||
types=2
|
||
}
|
||
uni.requestPayment({
|
||
provider:provider, //alipay wxpay
|
||
orderInfo: orderInfo, // 微信、支付宝订单数据
|
||
success: function (res) {
|
||
console.log(res)
|
||
uni.$emit('caozuo_payrder', { msg: '支付成功' });
|
||
self.number=1
|
||
uni.navigateTo({
|
||
url: '/pages/user/wallet/recharge-success/index?type='+self.acc_type,
|
||
});
|
||
// if(self.paylei==1){
|
||
// uni.navigateBack({ })
|
||
// }else{
|
||
// uni.redirectTo({
|
||
// url:'/pages/goods/pay-success/index?order='+self.order_sn +'&type='+types
|
||
// })
|
||
// }
|
||
|
||
},
|
||
fail: function (err) {
|
||
self.number=1
|
||
console.log('fail:' + JSON.stringify(err));
|
||
self.$message.info('取消支付')
|
||
}
|
||
});
|
||
},
|
||
|
||
|
||
// 小程序支付
|
||
startPayWechat(options){
|
||
let { modes, payOptions } = this
|
||
console.log(options)
|
||
console.log(22222)
|
||
let _this=this
|
||
uni.requestPayment({
|
||
provider: 'wxpay',
|
||
timeStamp: options.timeStamp,
|
||
nonceStr: options.nonceStr,
|
||
package: options.package,
|
||
signType: options.signType,
|
||
paySign: options.paySign,
|
||
success: function (res) {
|
||
uni.$emit('caozuo_payrder', { msg: '支付成功' });
|
||
_this.number=1
|
||
uni.navigateTo({
|
||
url: '/pages/user/wallet/recharge-success/index?type='+_this.acc_type,
|
||
});
|
||
},
|
||
fail: function (err) {
|
||
_this.submitBtnLoading = false
|
||
console.log('fail:' + JSON.stringify(err));
|
||
}
|
||
});
|
||
},
|
||
|
||
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: #F6F6F6;
|
||
}
|
||
.money {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
// input placeholder 样式 start
|
||
.placeholderClass {
|
||
font-size: 32rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #bfbfbf;
|
||
}
|
||
|
||
.tx_btn {
|
||
width: calc(100% - 60upx);
|
||
height: 88upx;
|
||
background: #FF9300;
|
||
border-radius: 44upx;
|
||
font-size: 32upx;
|
||
color: #FFFFFF;
|
||
line-height: 88upx;
|
||
text-align: center;
|
||
position: fixed;
|
||
bottom: 40upx;
|
||
left: 30upx;
|
||
}
|
||
|
||
// 选择金额 start
|
||
.cz_cont {
|
||
position: relative;
|
||
height: auto;
|
||
overflow: hidden;
|
||
background: #FFFFFF;
|
||
z-index: 10;
|
||
// border-radius: 24rpx;
|
||
// margin: 0 24rpx;
|
||
.title{
|
||
color: #333333;
|
||
}
|
||
.cu-item {
|
||
position: relative;
|
||
color: #333333;
|
||
font-size: 32rpx;
|
||
.active-line {
|
||
position: absolute;
|
||
bottom: -16rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
display: none;
|
||
width: 40rpx;
|
||
height: 6rpx;
|
||
background: #ffd437;
|
||
opacity: 1;
|
||
border-radius: 10rpx;
|
||
}
|
||
}
|
||
.cu-item.cur {
|
||
color: #d8d8d8;
|
||
font-weight: 500;
|
||
border-bottom: 0 !important;
|
||
.active-line {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.cu-item.cur::after {
|
||
content: '';
|
||
display: none;
|
||
}
|
||
|
||
.item_main {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
flex-wrap: wrap;
|
||
padding: 0 32rpx;
|
||
margin-top: 24rpx;
|
||
width: 100%;
|
||
align-content: space-around;
|
||
.list {
|
||
width: 32%;
|
||
flex: none;
|
||
text-align: center;
|
||
height: 104rpx;
|
||
background: #ffffff;
|
||
border-radius: 16rpx;
|
||
margin-bottom: 36rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
margin-right: 2%;
|
||
font-size: 32rpx;
|
||
color: #1A1A1A;
|
||
border: 1upx solid #CBCBCB;
|
||
font-weight: bold;
|
||
position: relative;
|
||
image{
|
||
width: 44upx;
|
||
height: 44upx;
|
||
top: 0;
|
||
position: absolute;
|
||
right: 0;
|
||
z-index: 99;
|
||
}
|
||
}
|
||
|
||
.act {
|
||
border-radius: 8rpx;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #FF7600 !important;
|
||
position: relative;
|
||
// background: #ffd437;
|
||
border-color: #FF7600;
|
||
.money {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.list:nth-child(3n) {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
// 选择金额 end
|
||
|
||
.tx_money {
|
||
font-size: 32rpx;
|
||
display: block;
|
||
align-items: center;
|
||
// color: #d8d8d8;
|
||
margin-top: 30upx;
|
||
padding: 0 30upx;
|
||
}
|
||
|
||
// 充值方式 start
|
||
.tx_main {
|
||
width: 100%;
|
||
height: auto;
|
||
overflow: hidden;
|
||
padding: 0 30upx 30upx 30upx;
|
||
background: white;
|
||
border-top: 10px solid #f2f2f2;
|
||
|
||
.payMain {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.tx_choose {
|
||
font-size: 30upx;
|
||
color: #333;
|
||
line-height: 90upx;
|
||
display: block;
|
||
}
|
||
|
||
.tx_mainBox {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 46%;
|
||
height: auto;
|
||
overflow: hidden;
|
||
border-radius: 10rpx;
|
||
border: 1px solid #999;
|
||
|
||
.tx_name {
|
||
display: block;
|
||
line-height: 100upx;
|
||
font-size: 30upx;
|
||
color: #333;
|
||
text-align: center;
|
||
}
|
||
|
||
image {
|
||
width: 50upx;
|
||
height: 50upx;
|
||
margin-right: 20upx;
|
||
}
|
||
}
|
||
}
|
||
// 充值方式 end
|
||
|
||
// 充值信息 start
|
||
.tx_cont {
|
||
height: auto;
|
||
overflow: hidden;
|
||
background: #FFFFFF;
|
||
// margin: 0 24rpx;
|
||
// margin-top: 10rpx;
|
||
// border-radius: 24rpx;
|
||
|
||
.all_out {
|
||
&:after {
|
||
border: none;
|
||
}
|
||
|
||
display: inline-block;
|
||
background: none;
|
||
font-size: 24upx;
|
||
}
|
||
|
||
.tx_box {
|
||
width: 100%;
|
||
height: auto;
|
||
overflow: hidden;
|
||
padding: 0 30upx 20upx 30upx;
|
||
margin-top: 20upx;
|
||
position: relative;
|
||
|
||
&:before {
|
||
content: '';
|
||
position: absolute;
|
||
height: 1px;
|
||
background: #eeeeee;
|
||
left: 30upx;
|
||
right: 0;
|
||
bottom: 0;
|
||
transform: scaleY(0.5);
|
||
}
|
||
|
||
text {
|
||
display: block;
|
||
font-size: 40upx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
float: left;
|
||
line-height: 70upx;
|
||
}
|
||
|
||
input {
|
||
display: block;
|
||
width: auto;
|
||
height: 70upx;
|
||
font-size: 40upx;
|
||
line-height: 70upx;
|
||
padding: 0 30upx;
|
||
color: #333;
|
||
}
|
||
|
||
.text-pr {
|
||
font-weight: bold;
|
||
font-size: 40upx;
|
||
color: #8e8e93;
|
||
}
|
||
|
||
.text-pr-lp {
|
||
font-size: 32px;
|
||
font-weight: 400;
|
||
color: #8e8e93;
|
||
}
|
||
}
|
||
}
|
||
// 充值信息 end
|
||
|
||
.fu-flex-center {
|
||
background: $uni-text-color-inverse;
|
||
}
|
||
|
||
.pay_box {
|
||
// margin: 24rpx 24rpx 0rpx 24rpx;
|
||
background: #FFFFFF;
|
||
// border-radius: 24rpx;
|
||
.model_content {
|
||
border-radius: 24rpx;
|
||
height: auto;
|
||
padding: 0 30upx;
|
||
// margin-top: 20upx;
|
||
background: #FFFFFF;
|
||
}
|
||
.pay {
|
||
font-size: 32upx;
|
||
height: 80upx;
|
||
line-height: 80upx;
|
||
color: #333333;
|
||
}
|
||
|
||
.cu-list.menu > .cu-item {
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.cu-list.menu > .cu-item.arrow:before {
|
||
display: none !important;
|
||
}
|
||
.wxpay {
|
||
background: url(https://lvtai-files.oss-cn-beijing.aliyuncs.com/mini/1d066923b9b33614a9df47ea787e5af9.png);
|
||
padding-left: 80upx;
|
||
background-size: contain;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.alipay {
|
||
background: url(https://lvtai-files.oss-cn-beijing.aliyuncs.com/mini/1d066923b9b33614a9df47ea787e5af9.png);
|
||
padding-left: 80upx;
|
||
background-size: contain;
|
||
background-repeat: no-repeat;
|
||
}
|
||
.image {
|
||
height: 32rpx;
|
||
width: 32rpx;
|
||
}
|
||
.cu-form-group + .cu-form-group {
|
||
border-top: none;
|
||
}
|
||
}
|
||
</style>
|