<!-- 会员充值 --> <template> <view class="member"> <view class="card-wrap"> <view class="card" :style="{'background-image':'url(../../static/icon/account_bg.webp)'}"> <view class="card-info"> <up-image width="100rpx" height="100rpx" /> <view class="card-info-right"> <view class="phone">155****4444</view> <view class="level">开通会员 享折扣权益</view> </view> </view> <view class="charge"> <view class="charge-left"> <view> <text class="txt">账户余额(元)</text> <text class="money">1680.00</text> </view> </view> <view class="charge-right">充值</view> </view> </view> </view> <view class="detail"> <view class="detail-title">账户详情</view> <view class="detail-total"> <view class="detail-total-item"> <text>累计消费</text> <view>1000</view> </view> <view class="detail-total-item"> <text>累计充值</text> <view>1000</view> </view> </view> <view class="detail-card"> <view class="detail-card-item"> <view class="detail-card-item-left"> <u-image width="60rpx" height="60rpx"></u-image> </view> <view class="detail-card-item-right"> <view class="detail-card-item-right-money"> <text>会员充值</text> <text>+1000.00</text> </view> <viewl class="detail-card-item-right-remind"> <text>2024-06-04 14:00:00</text> <text>余额1000元</text> </viewl> </view> </view> <view class="detail-card-item"> <view class="detail-card-item-left"> <u-image width="60rpx" height="60rpx"></u-image> </view> <view class="detail-card-item-right"> <view class="detail-card-item-right-money"> <text>会员充值</text> <text>+1000.00</text> </view> <viewl class="detail-card-item-right-remind"> <text>2024-06-04 14:00:00</text> <text>余额1000元</text> </viewl> </view> </view> <view class="detail-card-item"> <view class="detail-card-item-left"> <u-image width="60rpx" height="60rpx"></u-image> </view> <view class="detail-card-item-right"> <view class="detail-card-item-right-money"> <text>会员充值</text> <text>+1000.00</text> </view> <viewl class="detail-card-item-right-remind"> <text>2024-06-04 14:00:00</text> <text>余额1000元</text> </viewl> </view> </view> <view class="detail-card-item" v-for="item in 5"> <view class="detail-card-item-left"> <u-image width="60rpx" height="60rpx"></u-image> </view> <view class="detail-card-item-right"> <view class="detail-card-item-right-money"> <text>会员充值</text> <text>+1000.00</text> </view> <viewl class="detail-card-item-right-remind"> <text>2024-06-04 14:00:00</text> <text>余额1000元</text> </viewl> </view> </view> </view> </view> </view> </template> <script setup> import { rechargeApi } from "@/api/user.js"; import { onLoad, onReachBottom } from "@dcloudio/uni-app" onLoad(() => {}) onReachBottom((e) => { console.log(e); }) rechargeApi({ price: 0.01 }).then(res => { if (!res.data?.nonceStr) return uni.$u.toast('支付失败!'); console.log(2); uni.requestPayment({ provider: 'wxpay', timeStamp: res.data.timeStamp, nonceStr: res.data.nonceStr, package: res.data.package, signType: res.data.signType, paySign: res.data.paySign, success: (e) => { if (e.errMsg == 'requestPayment:ok') { uni.showModal({ title: '订单支付成功', confirmText: '查看订单', cancelText: '继续购买', success: (e) => { if (e.confirm) uni.redirectTo({ url: '/pagesOrder/order/order?back=-1&type=2' }) else uni.navigateBack(); } }) } else uni.$u.toast('支付失败') }, fail: (e) => { uni.$u.toast('用户取消支付'); uni.redirectTo({ url: '/pagesOrder/order/order?back=-1&type=1' }) } }) }) </script> <style lang="scss"> .member { padding-bottom: 300rpx; .card-wrap { padding: 40rpx 0 20rpx 0; background-color: #fff; margin-bottom: 30rpx; .card { background-size: 100%; background-repeat: no-repeat; height: 272rpx; margin: 0 30rpx; border-radius: 10rpx; padding: 20rpx 0 0 20rpx; box-sizing: border-box; background-color: #fff; .card-info { display: flex; align-items: center; margin-bottom: 60rpx; .card-info-right { margin-left: 40rpx; .phone { margin-bottom: 12rpx; font-weight: 600; font-size: 32rpx; color: #444444; } .level { font-size: 28rpx; color: #7B5232; } } } .charge { display: flex; align-items: center; padding-right: 38rpx; .charge-left { flex: 1; display: flex; margin-right: 30rpx; &>view { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10rpx; .txt { margin-right: 16rpx; font-size: 24rpx; color: #7B5232; } .money { font-weight: 600; font-size: 48rpx; color: #7B5232; } } } .charge-right { width: 148rpx; height: 52rpx; line-height: 52rpx; background: #7B5232; border-radius: 30rpx; font-size: 22rpx; color: #FFFFFF; text-align: center; } } } } .detail { margin: 0 30rpx; .detail-title { margin-bottom: 16rpx; font-weight: 600; font-size: 32rpx; color: #262626; } .detail-total { display: flex; align-items: center; margin-bottom: 30rpx; .detail-total-item { display: flex; align-items: center; margin-right: 68rpx; text { margin-right: 4rpx; font-size: 28rpx; color: #777777; } view { font-weight: 600; font-size: 28rpx; color: #333333; } } } } .detail-card { background-color: #fff; border-radius: 12rpx; padding: 0 20rpx; box-sizing: border-box; .detail-card-item { display: flex; align-items: center; height: 130rpx; border-bottom: 2rpx solid #F3F3F3; .detail-card-item-left { margin-right: 22rpx; } .detail-card-item-right { flex: 1; .detail-card-item-right-money { margin-bottom: 14rpx; display: flex; align-items: center; justify-content: space-between; font-size: 30rpx; color: #333333; } .detail-card-item-right-remind { display: flex; align-items: center; justify-content: space-between; font-size: 24rpx; color: #333333; } } } } } </style>