319 lines
6.8 KiB
Vue
319 lines
6.8 KiB
Vue
<!-- 会员充值 -->
|
|
<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> |