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.
279 lines
6.5 KiB
279 lines
6.5 KiB
<template>
|
|
<view class="recharge">
|
|
<view class="action padding-lr-sm padding-top-sm text-bold"><text class="cuIcon-titles textBlue"></text>充值金额
|
|
</view>
|
|
<view class=" cu-card article ">
|
|
<view class="cu-item shadow">
|
|
<view class="money text-df " v-for="(item,index) in payList" :key="index"
|
|
@click="forPay(item.value,index)" :style="{backgroundImage : li == index ? 'linear-gradient(to right bottom, #A5C7FF, #4C91FF)' : 'white',
|
|
color : li == index ? '#fff' : '#808080'}">
|
|
{{item.value == '自定义'?'': '¥'}}{{item.value}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="confirmRecharge">
|
|
<u-button @click="affirm" shape='circle' type="primary" throttleTime="5000">确认充值</u-button>
|
|
</view>
|
|
<!-- 充值弹窗 -->
|
|
<u-modal :show="show" :title="title" :showCancelButton="true" @confirm="confirm" @cancel="cancel"
|
|
:negative-top=300 confirmText="充值">
|
|
<view style="width: 100%;">
|
|
<input placeholder="请输入充值金额" v-model="moneyValue" type="digit"
|
|
@input="handleInput" style="text-align: center;border: 1px solid #eee; border-radius: 8rpx;height: 60rpx;line-height: 60rpx;"/>
|
|
</view>
|
|
</u-modal>
|
|
<!-- -->
|
|
<u-modal :show="motorShow" :showCancelButton="true" @confirm="motorConfirm" :content="content"
|
|
@cancel="motorCancel" confirmText="去绑定">
|
|
</u-modal>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import config from '@/common/config/config.js';
|
|
|
|
import {
|
|
AESEncrypt,
|
|
AESDecrypt
|
|
} from '../../../static/utils/encodes.js';
|
|
|
|
import {
|
|
reactive,
|
|
ref,
|
|
nextTick
|
|
} from "vue";
|
|
import {
|
|
onLoad,
|
|
onShow,
|
|
onReachBottom
|
|
} from "@dcloudio/uni-app";
|
|
// import {
|
|
// log
|
|
// } from '../../../static/mqtt/dist/mqtt.min.js';
|
|
const payList = reactive([{
|
|
value: 50
|
|
}, {
|
|
value: 100
|
|
}, {
|
|
value: 200
|
|
}, {
|
|
value: 500
|
|
}, {
|
|
value: 1000
|
|
}, {
|
|
value: '自定义'
|
|
}])
|
|
const li = ref()
|
|
const show = ref(false)
|
|
const title = ref('请填写自定义金额')
|
|
const moneyValue = ref()
|
|
const pay_mount = ref()
|
|
const motorShow = ref(false)
|
|
const content = ref('tyuio')
|
|
const throttleTimer = ref(null)
|
|
//
|
|
onShow(() => {
|
|
// 判断用户绑定车队没
|
|
uni.$request({
|
|
url: config.wxUrl_pay + "app-rest/account/getTeamAccount"
|
|
}).then(res => {
|
|
if (res.data.code == 200) {
|
|
motorShow.value = false
|
|
} else {
|
|
motorShow.value = true
|
|
content.value = res.data.msg
|
|
}
|
|
console.log(res, '=======res======!!!!!!!!!!!', res.data.msg);
|
|
}).catch(err => {
|
|
uni.$u.toast(err)
|
|
})
|
|
})
|
|
//
|
|
const handleInput = (event) => {
|
|
console.log('22222222', event);
|
|
if(event.target.value === '') return
|
|
|
|
let value = event.target.value.trim();
|
|
const reg = /^\d+(\.\d{0,2})?$/; // 正则表达式，限制只能输入整数或最多两位小数
|
|
if (!reg.test(value)) {
|
|
// 如果输入的格式不符合要求，则截取合法部分
|
|
const matchRes = value.match(/^\d+(?:\.\d{0,2})?/)[0];
|
|
console.log(matchRes, 'maaaaaaaaaa---------aaaaaaaaaa')
|
|
value = matchRes;
|
|
}
|
|
nextTick(() => {
|
|
moneyValue.value = value; // 赋值到输入框
|
|
console.log(moneyValue.value, 'masdssad---------dsadas')
|
|
})
|
|
|
|
|
|
|
|
}
|
|
const motorCancel = () => {
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
});
|
|
}
|
|
const motorConfirm = () => {
|
|
uni.navigateTo({
|
|
url: '../../../pagesCenter/motorCade/motorCade'
|
|
})
|
|
}
|
|
const forPay = (e, index) => {
|
|
li.value = index
|
|
pay_mount.value = e
|
|
if (index == 5) {
|
|
show.value = true
|
|
}
|
|
}
|
|
const affirm = () => {
|
|
throttle(() => {
|
|
if (!pay_mount.value || pay_mount.value == '自定义') {
|
|
uni.showToast({
|
|
title: '请选择充值金额',
|
|
duration: 2000,
|
|
icon: 'error'
|
|
});
|
|
return
|
|
} else {
|
|
uni.showLoading({
|
|
title: '去支付'
|
|
});
|
|
|
|
submitRechargeOrder(pay_mount.value)
|
|
}
|
|
}, 500)();
|
|
}
|
|
const throttle = (fn, delay) => {
|
|
return function(args) {
|
|
if (throttleTimer.value) {
|
|
return;
|
|
}
|
|
throttleTimer.value = setTimeout(() => {
|
|
fn.apply(this, args);
|
|
throttleTimer.value = null;
|
|
}, delay);
|
|
}
|
|
}
|
|
const submitRechargeOrder = (trAmt) => {
|
|
const minappUser = uni.getStorageSync('userInfo')
|
|
let param = {
|
|
customerId: minappUser.customerId,
|
|
openid: minappUser.openid,
|
|
tradeType: 1,
|
|
type: 1,
|
|
status: 0,
|
|
trAmt: trAmt
|
|
};
|
|
let paramStr = JSON.stringify(param);
|
|
let encodeParamStr = AESEncrypt(paramStr, config.restApiAesKey);
|
|
let OrderDecrypt = {body: encodeParamStr};
|
|
console.log(paramStr, 'paramStr', encodeParamStr);
|
|
uni.$request({
|
|
url: config.wxUrl_pay + 'app-rest/order/createRechargeOrder',
|
|
method: 'POST',
|
|
data: OrderDecrypt,
|
|
}).then(res => {
|
|
uni.hideLoading();
|
|
let resInf = AESDecrypt(res.data.data, config.restApiAesKey)
|
|
startPay(resInf)
|
|
})
|
|
}
|
|
const confirm = () => {
|
|
if (moneyValue.value >= 0.01 && moneyValue.value <= 1000) {
|
|
pay_mount.value = payList[5].value = moneyValue.value
|
|
show.value = false
|
|
affirm()
|
|
} else {
|
|
uni.$u.toast('请填写0.01-1000以内的充值金额');
|
|
}
|
|
|
|
}
|
|
const cancel = () => {
|
|
payList[5].value = '自定义'
|
|
moneyValue.value = ''
|
|
show.value = false
|
|
}
|
|
const startPay = (data) => {
|
|
let timeStamp = data.timeStamp;
|
|
let nonceStr = data.nonceStr;
|
|
let package1 = data.package;
|
|
let signType = data.signType;
|
|
let paySign = data.paySign;
|
|
uni.requestPayment({
|
|
'timeStamp': timeStamp, //当前时间戳
|
|
'nonceStr': nonceStr, //随机字符串长度
|
|
'package': package1, //统一下单
|
|
'signType': signType, //签名算法，应与后台下单时的值一致
|
|
'paySign': paySign, //签名
|
|
success: (res) => {
|
|
var retStr = JSON.stringify(res);
|
|
console.log("requestPayment->retStr:", retStr);
|
|
if (res.errMsg == 'requestPayment:ok') {
|
|
// wx.navigateTo({
|
|
// url: '../../usercenter/user'
|
|
// });
|
|
} else {
|
|
uni.showToast({
|
|
title: '充值付款失败，请重试',
|
|
duration: 1500,
|
|
icon: 'error'
|
|
});
|
|
}
|
|
},
|
|
fail: (res) => {
|
|
uni.showToast({
|
|
title: '已取消',
|
|
duration: 1000,
|
|
});
|
|
return false;
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.recharge {
|
|
width: 100%;
|
|
height: 100vh;
|
|
background: #F7F8FA;
|
|
}
|
|
|
|
.money {
|
|
width: 164rpx;
|
|
height: 72rpx;
|
|
text-align: center;
|
|
line-height: 72rpx;
|
|
border: 1px solid #EBEDF0;
|
|
color: #808080;
|
|
margin-left: 32rpx;
|
|
margin-right: 32rpx;
|
|
margin-top: 32rpx;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.cu-card>.cu-item {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.confirmRecharge {
|
|
width: 100%;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: #fff;
|
|
padding: 16rpx 32rpx;
|
|
}
|
|
|
|
.textBlue {
|
|
color: #4C91FF;
|
|
}
|
|
|
|
.style {
|
|
color: #303133;
|
|
font-size: 15px;
|
|
text-align: center;
|
|
}
|
|
</style> |