<template> <view class="page"> <u-navbar title="押金" :border-bottom="false" :background="bgc" title-color='#000' title-size='36' height='36'></u-navbar> <view class="norecord" v-if="userinfo.balance==0"> <view class="card"> <view class="tit">充值押金</view> <view class="tit">还车后<span style="color: #4C97E7;">随时可退</span></view> <view class="tit" style="font-size: 32rpx;color: #808080;margin-top: 32rpx;"> 押金金额 </view> <view class="tit" style="margin-top: 18rpx;font-weight: 700;font-size: 92rpx;color: #3D3D3D;line-height: 72rpx;"><span style="font-size: 52rpx;">¥</span>{{deposit}}</view> </view> <view class="card1"> <view class="cont"> <view class="yuan"></view> <view class="txt"> 电单车归还后并完成支付,可在【个人中心-押 金】申请押金退还 </view> </view> <view class="cont"> <view class="yuan"></view> <view class="txt"> 申请押金退还后预计1~3个工作日退还至原支付 账户,平均3分钟到账 </view> </view> </view> <view class="buy_btn" @click="sub4"> 立即充值 </view> </view> <view class="record" v-if="userinfo.balance!=0" > <view class="card" style="padding-top: 80rpx;"> <view class="tit" style="margin-top: 18rpx;font-weight: 700;font-size: 92rpx;color: #3D3D3D;line-height: 72rpx;"><span style="font-size: 52rpx;">¥</span>{{userinfo.balance}}</view> <view class="btn " v-if="false"> 充值 </view> <view class="btn"> 提现 </view> </view> <view class="card2"> <view class="card_top"> <view class="left"> <image src="https://api.ccttiot.com/smartmeter/img/static/uf9o0xbkFdfs5wRT7aLD" mode=""></image> 押金变动明细 </view> <view class="right"> 共{{total}}条 </view> </view> <view class="cardcont"> <view class="cont_li" v-for="(item,index) in orderList" :key="index"> <view class="cont_li_left"> <view class="txt"> 押金提现 </view> <view class="data"> 2024-04-02 10:14:41 </view> </view> <view class="cont_li_right"> <view class="cont_price"> -99 </view> <view class="cont_data"> 提现成功 </view> </view> </view> </view> </view> </view> <u-mask :show="show" @click="show = false" :z-index='100' /> <view class="tip_box" v-if="show"> <view class="top"> <view class="txt"> 押金体现后,下次使用电单车仍需要重 </view> <view class="txt"> 新充值押金,您要继续提现吗? </view> </view> <view class="bot"> <view class="bot_left" @click="show=false"> 取消 </view> <view class="bot_right"> 继续提现 </view> </view> </view> </view> </template> <script> export default { data() { return { bgc: { backgroundColor: "#7bb2ec", }, show: true, bindDeviceNum: null, userinfo: {}, orderList:[], total:0, } }, onShow() { this.$store.dispatch('fetchFeeRules', this.$u).then(() => { // 执行其他操作... }); this.getinfo() this.getlist() }, watch: { userId(newValue, oldValue) { // 处理userId变化的逻辑 console.log('userId 发生变化', newValue, oldValue); } }, computed: { appointmentServiceFee() { return this.$store.getters.appointmentServiceFee; }, dispatchFee() { return this.$store.getters.dispatchFee; }, vehicleManagementFee() { return this.$store.getters.vehicleManagementFee; }, startingPrice() { return this.$store.getters.startingPrice; }, timeFee() { return this.$store.getters.timeFee; }, timeMinutes() { return this.$store.getters.timeMinutes; }, deposit() { return this.$store.getters.deposit; }, userId() { return this.$store.getters.userId; }, }, methods: { getlist() { this.$u.get("/appVerify/order/list?type=2&userId="+this.userId).then((res) => { if (res.code == 200) { this.orderList=res.rows this.total=res.total } else { } }); }, getinfo() { this.$u.get("/getAppInfo").then((res) => { if (res.code == 200) { this.$store.commit('SET_USERID', res.user.userId); this.userinfo = res.user } else { setTimeout(()=>{ this.getinfo() this.getlist() },1000) } }); }, sub4() { let data = { userId: this.userId, // ruleId: this.freeInfo.ruleId, money: this.deposit, mark: "押金充值", type: '4' } this.$u.post('/appVerify/pre/order', data).then((res) => { if (res.code === 200) { // this.freList=res.rows let that=this uni.requestPayment({ provider: 'wxpay', timeStamp: res.data.timeStamp, nonceStr: res.data.nonceStr, package: res.data.packageVal, signType: res.data.signType, paySign: res.data.paySign, success(res) { // 支付成功逻辑 setTimeout(() => { that.getinfo() that.getlist() }, 1000) }, fail(err) { // 支付失败逻辑 uni.showToast({ title: '支付失败', icon: 'none', duration: 2000 }); } }); } else { } }) }, } } </script> <style lang="scss"> page { // background: linear-gradient(180deg, #4C97E7 0%, rgba(255, 255, 255, 0) 40%), #FFFFFF; } .page { width: 750rpx; .card { display: flex; justify-content: center; flex-wrap: wrap; padding: 28rpx 0; margin: 30rpx auto; width: 680rpx; height: 406rpx; background: #FFFFFF; box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08); border-radius: 20rpx 20rpx 20rpx 20rpx; .tit { width: 100%; text-align: center; font-weight: 500; font-size: 52rpx; color: #3D3D3D; line-height: 72rpx; } .btn { margin-top: 100rpx; display: flex; align-items: center; justify-content: center; width: 586rpx; height: 68rpx; background: #4C97E7; border-radius: 54rpx 54rpx 54rpx 54rpx; font-weight: 500; font-size: 32rpx; color: #FFFFFF; } } .buy_btn { position: fixed; bottom: 150rpx; left: 36rpx; display: flex; align-items: center; justify-content: center; width: 680rpx; height: 90rpx; background: #4C97E7; border-radius: 54rpx 54rpx 54rpx 54rpx; font-weight: 500; font-size: 40rpx; color: #FFFFFF; } .tip_box { position: fixed; left: 72rpx; top: 628rpx; width: 610rpx; height: 282rpx; background: #FFFFFF; border-radius: 30rpx 30rpx 30rpx 30rpx; z-index: 110; .top { padding: 52rpx 38rpx 42rpx 36rpx; .txt { width: 100%; text-align: center; font-weight: 500; font-size: 32rpx; color: #3D3D3D; } } .bot { border-top: 2rpx solid #D8D8D8; display: flex; flex-wrap: nowrap; height: 100%; .bot_left { width: 50%; height: 98rpx; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 36rpx; color: #3D3D3D; } .bot_right { width: 50%; height: 98rpx; display: flex; align-items: center; justify-content: center; border-left: 2rpx solid #D8D8D8; font-weight: 500; font-size: 36rpx; color: #4C97E7; } } } .card2 { margin: 30rpx auto; // padding: 38rpx 40rpx; width: 680rpx; // height: 252rpx; background: #FFFFFF; box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08); border-radius: 20rpx 20rpx 20rpx 20rpx; .card_top { display: flex; flex-wrap: nowrap; justify-content: space-between; padding: 28rpx 35rpx 24rpx 35rpx; border-bottom: 2rpx solid #D8D8D8; .left { display: flex; flex-wrap: nowrap; align-items: center; font-weight: 400; font-size: 28rpx; color: #3D3D3D; image { margin-right: 18rpx; width: 36rpx; height: 36rpx; } } .right { font-weight: 400; font-size: 24rpx; color: #3D3D3D; } } .cardcont { display: flex; flex-wrap: wrap; padding: 0rpx 34rpx; .cont_li { margin-top: 28rpx; width: 100%; display: flex; flex-wrap: nowrap; justify-content: space-between; border-bottom: 2rpx solid #D8D8D8; padding-bottom: 28rpx; .cont_li_left { width: 300rpx; display: flex; flex-wrap: wrap; .tit { width: 100%; font-weight: 400; font-size: 32rpx; color: #3D3D3D; } .data { margin-top: 8rpx; width: 100%; font-weight: 400; font-size: 20rpx; color: #979797; } } .cont_li_right { display: flex; flex-wrap: wrap; width: 100rpx; .cont_price { width: 100rpx; margin-left: auto; text-align: right; font-weight: 500; font-size: 40rpx; color: #3D3D3D; } .cont_data { width: 100rpx; text-align: right; font-weight: 400; font-size: 20rpx; color: #4C97E7; } } } } } .card1 { margin: 30rpx auto; padding: 38rpx 40rpx; width: 680rpx; // height: 252rpx; background: #FFFFFF; box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08); border-radius: 20rpx 20rpx 20rpx 20rpx; .cont { display: flex; flex-wrap: nowrap; align-items: center; .yuan { margin-right: 26rpx; width: 20rpx; height: 20rpx; border-radius: 50%; background: #808080; } .txt { width: 90%; font-weight: 400; font-size: 28rpx; color: #808080; } } } } </style>