495 lines
12 KiB
Vue
495 lines
12 KiB
Vue
<template>
|
||
<view class="container">
|
||
<u-navbar title="充值" :titleStyle="{color:'#fff'}" :autoBack="true" bgColor="transparent" leftIconColor="#fff"></u-navbar>
|
||
<image mode="aspectFill" src="/static/unielepystatic/img/pay/icon-background.png" class="rebg"></image>
|
||
<view class="container-main-hd">
|
||
<view class="item-header">
|
||
<text class="money">￥{{moneyInfo}}</text>
|
||
<view class="item-header-img">
|
||
<image src="/static/unielepystatic/img/pay/icon-balancepay.png"></image>
|
||
<text class="money-text">账户余额</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="container-main">
|
||
<view class="item-bottom">
|
||
<view class="item-bottom-inner-header">
|
||
<text class="title-text">充值金额</text>
|
||
<view class="input-money-header">
|
||
<text>￥</text>
|
||
<input type="digit" class="uni-input" focus placeholder="请输入充值金额" v-model="money" @input="checkNum" :maxlength="maxlength"/>
|
||
</view>
|
||
</view>
|
||
<u-radio-group active-color="#2269FB" v-model="payType" @change="radioGroupChange" >
|
||
<view class="item-bottom-inner-center">
|
||
<text class="title-text">充值方式</text>
|
||
<view v-for="(item,index) in rechargeList" :key="index" class="pay" @click="choosePay(item)">
|
||
<view class="rgmlist">
|
||
<view class="pay-method">
|
||
<image :src="item.icon" mode="aspectFill" :style="item.style"></image>
|
||
<text>{{item.name}}</text>
|
||
</view>
|
||
<u-radio shape="circle" :name="item.id" @change="radioChage"></u-radio>
|
||
</view>
|
||
<view class="tips3" v-if="item.id === '5' && payType === '5'">{{tips3}}</view>
|
||
</view>
|
||
</view>
|
||
</u-radio-group>
|
||
<view class="item-footer" v-if="isbank">
|
||
<view class="item-transfer">
|
||
<text>转账人姓名</text>
|
||
<input class="uni-input" focus placeholder="请输入您的名字" v-model="name" />
|
||
</view>
|
||
<view class="item-transfer-bottom">
|
||
<view class="text">
|
||
<text>转账凭证:</text>
|
||
<text>（请至少上传一张转账截图）</text>
|
||
</view>
|
||
<view class="filepicker">
|
||
<u-upload
|
||
:fileList="fileList1"
|
||
@afterRead="afterRead"
|
||
@delete="deletePic"
|
||
:previewFullImage="true"
|
||
name="1"
|
||
maxSize="1048576"
|
||
multiple
|
||
:maxCount="1"
|
||
>
|
||
<image src="/static/unielepystatic/img/public/icon-uploadimg.png" mode="widthFix" style="width: 70px;height: 70px;"></image>
|
||
</u-upload>
|
||
</view>
|
||
<text class="transfer-tips">{{tips2}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="btn">
|
||
<button :disabled="btnDisable" @click="$stopRepeatClick(submitBtn,'')">提交</button>
|
||
<text>{{tips}}</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {uploadImage} from '@/api/api.js'
|
||
export default{
|
||
data() {
|
||
return {
|
||
maxlength:10,
|
||
moneyInfo:"0.00",
|
||
money:"",
|
||
name:"",
|
||
rechargeList:[
|
||
{id:'2',name:"微信支付",icon:"/static/unielepystatic/img/pay/icon-wechatpay.png",style:"width: 54rpx;height: 50rpx"},
|
||
{id:'5',name:"线下转账",icon:"/static/unielepystatic/img/pay/icon-bankpay.png",style:"width: 52rpx;height: 52rpx"},
|
||
],
|
||
payType:"",
|
||
tips:"",
|
||
tips2:"",
|
||
tips3:"温馨提示：线下转账请联系客服",
|
||
isbank:false,
|
||
images: [],
|
||
imageStyles:{
|
||
width:100,
|
||
height:100,
|
||
},
|
||
fileList1:[],
|
||
btnDisable:false,
|
||
noClick:true
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getData()
|
||
},
|
||
methods:{
|
||
//限制只能输入正确的价格（后两位的小数或正整数）
|
||
checkNum(e) {
|
||
let value = e.detail.value;
|
||
if(!this.$common.isRealPrice(value)){
|
||
this.$common.showToast("请输入正确的金额")
|
||
return
|
||
}
|
||
let dot = value.indexOf('.'); //包含小数点
|
||
let reg = /^[0-9]+$/; //正整数
|
||
if (dot > -1) {
|
||
this.maxlength = dot + 3; //长度是小数点后两位
|
||
if (value.length > dot + 3) {
|
||
}
|
||
}
|
||
if (reg.test(value)) { //如果是正整数不包含小数点
|
||
this.maxlength = 10;
|
||
}
|
||
},
|
||
choosePay(item){
|
||
this.payType = item.id
|
||
if(this.payType==='5'){
|
||
this.isbank = true
|
||
this.btnDisable = false
|
||
}else{
|
||
if(this.payType==='2'){
|
||
this.btnDisable = false
|
||
this.isbank = false
|
||
}else{
|
||
this.isbank = false
|
||
this.btnDisable = false
|
||
}
|
||
|
||
}
|
||
},
|
||
submitBtn(){
|
||
var that = this
|
||
if(!that.btnDisable){
|
||
that.btnDisable = true
|
||
if(!that.$common.isRealPrice(that.money)){
|
||
that.btnDisable = false
|
||
that.$common.showToast("请填写正确格式的金额")
|
||
return
|
||
}
|
||
if(this.payType=='2'){
|
||
that.btnDisable = false
|
||
var params = {
|
||
pay_method:2,
|
||
platform:'xcx',
|
||
type:"recharge",
|
||
amount:that.money
|
||
}
|
||
//支付逻辑
|
||
// userPayment(params).then(res=>{
|
||
// uni.hideLoading()
|
||
// if(res.code == 2000){
|
||
// if(that.payType=='2'){
|
||
// var payObj = res.data.data.wechataydata
|
||
// var order_no = res.data.data.order_no
|
||
// // #ifdef MP-WEIXIN
|
||
// uni.requestPayment({
|
||
// provider: 'wxpay',
|
||
// // appId:'wx023a7d6245xxxxx',
|
||
// timeStamp: payObj.timestamp,
|
||
// nonceStr: payObj.nonceStr,
|
||
// package: payObj.package,
|
||
// signType: payObj.signType,
|
||
// paySign: payObj.sign,
|
||
// success(res) {
|
||
// uni.hideLoading()
|
||
// console.log(res, '支付成功')
|
||
// that.$common.showToast("支付成功")
|
||
// that.$common.reloadPage("/pages/pay/recharge")
|
||
// },
|
||
// fail(res) {
|
||
// uni.hideLoading()
|
||
// that.$common.showToast("用户取消支付")
|
||
// }
|
||
// })
|
||
// // #endif
|
||
// }
|
||
|
||
// }else{
|
||
// that.$common.showToast(res.msg)
|
||
// }
|
||
// })
|
||
}
|
||
else if(this.payType == '5'){
|
||
if(that.images==""){
|
||
that.btnDisable = false
|
||
that.$common.showToast("请先上传凭证")
|
||
return
|
||
}
|
||
this.$common.showLoading("支付中...")
|
||
var params = {
|
||
pay_method:that.payType,
|
||
platform:'xcx',
|
||
type:'recharge',
|
||
amount:that.money,
|
||
bank_transfer_name:that.name,
|
||
bank_transfer_image:that.images
|
||
}
|
||
userPayment(params).then(res=>{
|
||
uni.hideLoading()
|
||
if(res.code == 2000){
|
||
that.$common.showToast("提交成功,请等待确认")
|
||
that.$common.reloadPage("/pages/pay/recharge")
|
||
}else{
|
||
that.$common.showToast(res.msg)
|
||
that.btnDisable = false
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
},
|
||
radioChage(n){
|
||
|
||
},
|
||
radioGroupChange(n) {
|
||
if(n==='5'){
|
||
this.isbank = true
|
||
this.btnDisable = false
|
||
}else{
|
||
if(n==='3'){
|
||
this.btnDisable = true
|
||
this.isbank = false
|
||
this.$common.showToast("微信支付正在开通中...")
|
||
}else{
|
||
this.isbank = false
|
||
this.btnDisable = false
|
||
}
|
||
|
||
}
|
||
},
|
||
//u-upload自定义图片上传
|
||
// 删除图片
|
||
deletePic(event) {
|
||
this[`fileList${event.name}`].splice(event.index, 1)
|
||
this.images=""
|
||
},
|
||
// 新增图片
|
||
async afterRead(event) {
|
||
// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
|
||
let lists = [].concat(event.file)
|
||
let fileListLen = this[`fileList${event.name}`].length
|
||
lists.map((item) => {
|
||
this[`fileList${event.name}`].push({
|
||
...item,
|
||
status: 'uploading',
|
||
message: '上传中'
|
||
})
|
||
})
|
||
for (let i = 0; i < lists.length; i++) {
|
||
const obj = await uploadImage(lists[i].url)
|
||
let result=''
|
||
if(obj.code == 2000) {
|
||
if (obj.data.data[0].indexOf("://")>=0){
|
||
result = obj.data.data[0]
|
||
}else{
|
||
result = url.split('/api')[0]+obj.data.data[0]
|
||
}
|
||
} else {
|
||
common.showToast(obj.msg)
|
||
}
|
||
let item = this[`fileList${event.name}`][fileListLen]
|
||
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
||
status: 'success',
|
||
message: '',
|
||
url: result
|
||
}))
|
||
fileListLen++
|
||
this.images=result
|
||
}
|
||
console.log(this.fileList1,"上传的图片列表")
|
||
},
|
||
//----------------图片上传结束
|
||
getData(){
|
||
// getConsumelist().then(res=>{
|
||
// if(res.code == 2000){
|
||
// this.moneyInfo = res.data.data.balance
|
||
// }
|
||
// })
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.rebg{
|
||
width:100%;
|
||
height:468rpx
|
||
}
|
||
.container{
|
||
.container-main-hd{
|
||
background: transparent;
|
||
position: absolute;
|
||
top:140rpx;
|
||
width: 100%;
|
||
.item-header{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
height: 250rpx;
|
||
font-size: 60rpx;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
.money{
|
||
margin-top: 100rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.item-header-img{
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 26rpx;
|
||
color: #FFFFFF;
|
||
opacity: 0.82;
|
||
image{
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
}
|
||
.money-text{
|
||
margin-left: 14rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.container-main{
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
||
position: absolute;
|
||
top:450rpx;
|
||
width: 100%;
|
||
}
|
||
.filepicker{
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.item-bottom{
|
||
// position: absolute;
|
||
// top: 260rpx;
|
||
overflow: hidden;
|
||
width: 100%;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
||
}
|
||
.item-bottom-inner-header{
|
||
padding-left: 40rpx;
|
||
padding-top: 50rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.title-text{
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
}
|
||
.input-money-header{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 60rpx;
|
||
margin-right: 30rpx;
|
||
height: 70rpx;
|
||
font-size: 26rpx;
|
||
flex:1;
|
||
border-bottom:2rpx solid #EEEEEE;
|
||
text{
|
||
font-size: 48rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
input{
|
||
margin-left: 20rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
.item-bottom-inner-center{
|
||
width: 100%;
|
||
padding: 60rpx 40rpx 0 40rpx;
|
||
.pay{
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
.title-text{
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
display:block;
|
||
padding-bottom: 42rpx;
|
||
}
|
||
.rgmlist{
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.pay-method{
|
||
display: flex;
|
||
align-items: center;
|
||
text{
|
||
margin-left: 26rpx;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
.tips3{
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
margin-top: 20rpx;
|
||
border-bottom:solid 2rpx #EEEEEE;
|
||
height: 60rpx;
|
||
}
|
||
}
|
||
.btn{
|
||
position: fixed;
|
||
width: 100%;
|
||
bottom: 50rpx;
|
||
button{
|
||
color: #FFFFFF;
|
||
background: linear-gradient(90deg, #3EA6FD, #2269FB);
|
||
border-radius: 45rpx;
|
||
width: 90%;
|
||
}
|
||
text{
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
margin: 0 86rpx;
|
||
}
|
||
|
||
}
|
||
.item-footer{
|
||
padding: 0rpx 40rpx;
|
||
.item-transfer{
|
||
display: flex;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
height: 80rpx;
|
||
background: #FFFFFF;
|
||
margin-bottom:20rpx;
|
||
border-radius: 10rpx;
|
||
text{
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
font-weight: bold;
|
||
}
|
||
.uni-input{
|
||
height: 70rpx;
|
||
font-size: 28rpx;
|
||
flex:1;
|
||
margin-left: 36rpx;
|
||
border-bottom:2rpx solid #EEEEEE;
|
||
}
|
||
}
|
||
.item-transfer-bottom{
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
flex-direction: column;
|
||
background: #FFFFFF;
|
||
border-radius: 10rpx;
|
||
margin-bottom: 300rpx;
|
||
.text{
|
||
display: flex;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
font-weight: bold;
|
||
height: 60rpx;
|
||
width: 100%;
|
||
text:last-child{
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
}
|
||
.upload-img{
|
||
display: block;
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
.transfer-tips{
|
||
margin-top: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
font-size: 24rpx;
|
||
color: #CCCCCC;
|
||
}
|
||
}
|
||
</style>
|