<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, #34cb75, #27b764)' : 'white', color : li == index ? '#fff' : '#808080'}"> {{item.value == '自定义'?'': '¥'}}{{item.value}} </view> </view> </view> <view class="confirmRecharge"> <button @click="affirm" class="bottom_submit">确认充值</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 sheep from '@/sheep'; // 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) => { 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]; value = matchRes; } nextTick(() => { moneyValue.value = value; // 赋值到输入框 }) } 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) => { // console.log(trAmt,'trAmt') let config_url = '' let bindType = 1 if (uni.getStorageSync("version") == '个人版') { config_url = 'app-api/pay/wallet-recharge/create' bindType = 1 } // console.log(uni.getStorageSync("captainOrNot"),'uni.getStorageSync("captainOrNot")') if (uni.getStorageSync("version") == '车队版' && uni.getStorageSync("captainOrNot") && uni.getStorageSync( "ispersonnel") == 2) { config_url = 'app-api/pay/wallet-recharge/createTeam' bindType = 2 } if (uni.getStorageSync("version") == '车队版' && uni.getStorageSync("ispersonnel") == 1) { config_url = 'app-api/pay/wallet-recharge/create' bindType = 2 } let param = { bindType: bindType, payPrice: trAmt * 100 }; uni.$request({ url: config.baseUrl + config_url, method: 'POST', data: param, }).then(res => { console.log(res, '创建订单') if (res.data.code == 0) { handle_pay_money(res.data.data) } }) } const handle_pay_money = async (e) => { sheep.$router.go('/pagesCenter/pay/index', { id: e.payOrderId, orderType: 'recharge', }); } 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: #27b764; } .style { color: #303133; font-size: 15px; text-align: center; } .bottom_submit { background: linear-gradient(to right bottom, #34cb75, #27b764); border-radius: 40rpx; font-size: 14px; color: #fff; } </style>