mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2026-08-06 10:57:25 +08:00
refactor: 更新多个页面的样式和结构
This commit is contained in:
@@ -1,69 +1,75 @@
|
||||
<template>
|
||||
<view class="wap">
|
||||
<u-navbar title="预存款列表">
|
||||
</u-navbar>
|
||||
<u-navbar
|
||||
title="预存款列表"
|
||||
:fixed="true"
|
||||
:placeholder="true"
|
||||
:border="false"
|
||||
:auto-back="true"
|
||||
></u-navbar>
|
||||
|
||||
<view class="wrapper-show-money">
|
||||
<view class="money-view">
|
||||
<h3>预存款金额 </h3>
|
||||
<view class="money">¥{{unitPrice(walletNum) }}</view>
|
||||
|
||||
<text class="money-label">预存款金额</text>
|
||||
<text class="money">¥{{ unitPrice(walletNum) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="wrapper-tabs">
|
||||
|
||||
<swiper class="swiper-box" :current="swiperCurrent">
|
||||
<view class="wrapper-tabs">
|
||||
<swiper class="swiper-box" :current="swiperCurrent">
|
||||
<swiper-item class="swiper-item" v-for="index in list.length" :key="index">
|
||||
<scroll-view class="scroll-v view-wrapper" enableBackToTop="true" scroll-with-animation scroll-y @scrolltolower="loadMore">
|
||||
<view v-if="depositData.length!=0" class="view-item" v-for="(logItem, logIndex) in depositData" :key="logIndex">
|
||||
<view class="view-item-detail">
|
||||
<view class="-title">{{logItem.detail}}</view>
|
||||
<!-- <view class="-number">{{logItem.detail}}</view> -->
|
||||
</view>
|
||||
<view class="view-item-change">
|
||||
<view class="-money green" v-if="logItem.serviceType == 'WALLET_PAY' || logItem.serviceType == 'WALLET_WITHDRAWAL'"> {{unitPrice(logItem.money)}} </view>
|
||||
<view class="-money" v-if="logItem.serviceType == 'WALLET_REFUND' || logItem.serviceType == 'WALLET_RECHARGE' || logItem.serviceType == 'WALLET_COMMISSION' ">
|
||||
+{{unitPrice(logItem.money)}} </view>
|
||||
<view class="-time">{{logItem.createTime}}</view>
|
||||
<scroll-view
|
||||
class="scroll-v view-wrapper"
|
||||
enable-back-to-top
|
||||
scroll-with-animation
|
||||
scroll-y
|
||||
@scrolltolower="loadMore"
|
||||
>
|
||||
<view v-if="depositData.length != 0" class="list-card">
|
||||
<view
|
||||
class="view-item"
|
||||
v-for="(logItem, logIndex) in depositData"
|
||||
:key="logIndex"
|
||||
>
|
||||
<view class="view-item-detail">
|
||||
<text class="item-title">{{ logItem.detail }}</text>
|
||||
</view>
|
||||
<view class="view-item-change">
|
||||
<text
|
||||
class="item-money"
|
||||
:class="getMoneyClass(logItem.serviceType)"
|
||||
>{{ formatLogMoney(logItem) }}</text>
|
||||
<text class="item-time">{{ logItem.createTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-empty v-if="depositData.length==0" mode="history" text="暂无记录" />
|
||||
|
||||
<u-empty v-if="depositData.length == 0" mode="history" text="暂无记录" />
|
||||
</scroll-view>
|
||||
|
||||
</swiper-item>
|
||||
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getUserRecharge, getWalletLog } from "@/api/members";
|
||||
import { getUserWallet } from "@/api/members";
|
||||
import { getUserRecharge, getWalletLog, getUserWallet } from "@/api/members";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
walletNum: 0,
|
||||
current: 0,
|
||||
swiperCurrent: 0,
|
||||
userInfo: "", //用户详情信息
|
||||
userInfo: "",
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
order: "desc",
|
||||
},
|
||||
depositData: [], //遍历的数据集合
|
||||
rechargeList: "", //充值明细列表
|
||||
walletLogList: "", //钱包变动列表
|
||||
list: [
|
||||
// {
|
||||
// name: "充值明细",
|
||||
// },
|
||||
{
|
||||
name: "预存款变动明细",
|
||||
},
|
||||
],
|
||||
depositData: [],
|
||||
rechargeList: "",
|
||||
walletLogList: "",
|
||||
list: [{ name: "预存款变动明细" }],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@@ -73,47 +79,51 @@ export default {
|
||||
},
|
||||
async mounted() {
|
||||
this.getWallet();
|
||||
let result = await getUserWallet(); //预存款
|
||||
|
||||
const result = await getUserWallet();
|
||||
this.walletNum = result.data.result.memberWallet;
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**分页获取预存款充值记录 */
|
||||
isOutgoing(serviceType) {
|
||||
return serviceType === "WALLET_PAY" || serviceType === "WALLET_WITHDRAWAL";
|
||||
},
|
||||
isIncoming(serviceType) {
|
||||
return (
|
||||
serviceType === "WALLET_REFUND" ||
|
||||
serviceType === "WALLET_RECHARGE" ||
|
||||
serviceType === "WALLET_COMMISSION"
|
||||
);
|
||||
},
|
||||
getMoneyClass(serviceType) {
|
||||
if (this.isOutgoing(serviceType)) return "out";
|
||||
if (this.isIncoming(serviceType)) return "in";
|
||||
return "";
|
||||
},
|
||||
formatLogMoney(logItem) {
|
||||
const amount = this.unitPrice(logItem.money);
|
||||
if (this.isOutgoing(logItem.serviceType)) return `-${amount}`;
|
||||
if (this.isIncoming(logItem.serviceType)) return `+${amount}`;
|
||||
return amount;
|
||||
},
|
||||
getRecharge() {
|
||||
getUserRecharge(this.params).then((res) => {
|
||||
if (res.data.success) {
|
||||
if (res.data.result.records.length != 0) {
|
||||
this.depositData.push(...res.data.result.records);
|
||||
}
|
||||
if (res.data.success && res.data.result.records.length) {
|
||||
this.depositData.push(...res.data.result.records);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getWallet() {
|
||||
|
||||
getWalletLog(this.params).then((res) => {
|
||||
if (res.data.success) {
|
||||
if (res.data.result.records.length != 0) {
|
||||
this.depositData.push(...res.data.result.records);
|
||||
}
|
||||
if (res.data.success && res.data.result.records.length) {
|
||||
this.depositData.push(...res.data.result.records);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
changed(index) {
|
||||
this.depositData = [];
|
||||
this.swiperCurrent = index;
|
||||
this.params.pageNumber = 1;
|
||||
if (index == 0) {
|
||||
// this.getRecharge();
|
||||
this.getWallet();
|
||||
} else {
|
||||
this.getWallet();
|
||||
}
|
||||
this.getWallet();
|
||||
},
|
||||
|
||||
loadMore() {
|
||||
this.params.pageNumber++;
|
||||
this.getWallet();
|
||||
@@ -123,97 +133,123 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.green {
|
||||
color: $aider-color-green !important;
|
||||
.wap {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.wrapper-show-money {
|
||||
flex-shrink: 0;
|
||||
height: 200rpx;
|
||||
}
|
||||
|
||||
.money-view {
|
||||
height: 100%;
|
||||
padding: 32rpx 40rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
color: #fff;
|
||||
background-image: linear-gradient(
|
||||
25deg,
|
||||
$main-color,
|
||||
$light-color,
|
||||
$aider-light-color
|
||||
);
|
||||
}
|
||||
|
||||
.money-label {
|
||||
font-size: 28rpx;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.money {
|
||||
margin-top: 12rpx;
|
||||
max-width: 100%;
|
||||
font-size: 56rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.wrapper-tabs {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.swiper-box,
|
||||
.swiper-item,
|
||||
.scroll-v {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.list-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.view-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 28rpx 32rpx;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.view-item {
|
||||
padding: 32rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.view-item-detail {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding-right: 24rpx;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.view-item-change {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
align-self: center;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.item-money {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
|
||||
&.in {
|
||||
color: $aider-color-green;
|
||||
}
|
||||
.view-item-change {
|
||||
text-align: right;
|
||||
> .-money {
|
||||
font-size: 36rpx;
|
||||
color: $main-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
> .-time {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.view-item-detail {
|
||||
line-height: 1.75;
|
||||
> .-title {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
> .-number {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.submit-btn {
|
||||
line-height: 90rpx;
|
||||
text-align: center;
|
||||
|
||||
color: #fff;
|
||||
background: $main-color;
|
||||
|
||||
margin: 0 auto;
|
||||
height: 90rpx;
|
||||
}
|
||||
|
||||
.operation {
|
||||
font-size: 32rpx;
|
||||
margin-right: 24rpx;
|
||||
color: rgb(96, 98, 102);
|
||||
}
|
||||
.money {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.money-view {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0 32rpx;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
background-image: linear-gradient(
|
||||
25deg,
|
||||
$main-color,
|
||||
$light-color,
|
||||
$aider-light-color
|
||||
);
|
||||
}
|
||||
|
||||
.swiper-item,
|
||||
.scroll-v {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
/* #ifndef H5 */
|
||||
height: calc(100vh - 200rpx);
|
||||
/* #endif */
|
||||
|
||||
/* #ifdef H5 */
|
||||
height: calc(100vh - 288rpx);
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.wap {
|
||||
width: 100%;
|
||||
height: calc(100vh - 44px);
|
||||
}
|
||||
|
||||
.wrapper-show-money {
|
||||
height: 200rpx;
|
||||
// background-image: url('/static/img/main-bg.jpg');
|
||||
|
||||
&.out {
|
||||
color: #ff5a5f;
|
||||
}
|
||||
}
|
||||
|
||||
.item-time {
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,27 +1,41 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<u-navbar :auto-back="false" @leftClick="back" title="余额"></u-navbar>
|
||||
<div class="box">
|
||||
<div class="deposit">预存款金额</div>
|
||||
<div class="money">¥{{unitPrice(walletNum) }}</div>
|
||||
<div class="operation-btns">
|
||||
<div class="operation-btn light" @click="navigateTo('/pages/mine/deposit/withdrawal')">提现</div>
|
||||
<div class="operation-btn" @click="navigateTo('/pages/mine/deposit/recharge')">充值</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box list" @click="navigateTo('/pages/mine/deposit/index')">
|
||||
<div class="list-left">预存款明细</div>
|
||||
<div class="list-right">
|
||||
<u-icon name="arrow-right"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box list" @click="navigateTo('/pages/mine/deposit/withdrawApply')">
|
||||
<div class="list-left">提现记录</div>
|
||||
<div class="list-right">
|
||||
<u-icon name="arrow-right"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<view class="page">
|
||||
<u-navbar
|
||||
title="余额"
|
||||
:auto-back="false"
|
||||
:placeholder="true"
|
||||
:border="false"
|
||||
@leftClick="back"
|
||||
></u-navbar>
|
||||
|
||||
<view class="page-body">
|
||||
<view class="balance-card">
|
||||
<view class="deposit">预存款金额</view>
|
||||
<view class="money">¥{{ unitPrice(walletNum) }}</view>
|
||||
<view class="operation-btns">
|
||||
<view
|
||||
class="operation-btn light"
|
||||
@click="navigateTo('/pages/mine/deposit/withdrawal')"
|
||||
>提现</view>
|
||||
<view
|
||||
class="operation-btn primary"
|
||||
@click="navigateTo('/pages/mine/deposit/recharge')"
|
||||
>充值</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu-list">
|
||||
<view class="list-item" @click="navigateTo('/pages/mine/deposit/index')">
|
||||
<text class="list-label">预存款明细</text>
|
||||
<u-icon name="arrow-right" color="#ccc" size="16"></u-icon>
|
||||
</view>
|
||||
<view class="list-item" @click="navigateTo('/pages/mine/deposit/withdrawApply')">
|
||||
<text class="list-label">提现记录</text>
|
||||
<u-icon name="arrow-right" color="#ccc" size="16"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -34,7 +48,7 @@ export default {
|
||||
},
|
||||
async onShow() {
|
||||
if (this.isLogin("auth")) {
|
||||
let result = await getUserWallet(); //预存款
|
||||
let result = await getUserWallet();
|
||||
this.walletNum = result.data.result.memberWallet;
|
||||
} else {
|
||||
this.navigateToLogin("redirectTo");
|
||||
@@ -46,75 +60,92 @@ export default {
|
||||
url: "/pages/tabbar/user/my",
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 跳转
|
||||
*/
|
||||
navigateTo(url) {
|
||||
uni.navigateTo({
|
||||
url,
|
||||
});
|
||||
uni.navigateTo({ url });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.list-left {
|
||||
flex: 8;
|
||||
}
|
||||
.list-right {
|
||||
flex: 2;
|
||||
text-align: right;
|
||||
}
|
||||
.wrapper {
|
||||
width: 94%;
|
||||
margin: 0 3%;
|
||||
}
|
||||
.box {
|
||||
margin: 20rpx 0;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
|
||||
padding: 40rpx;
|
||||
.page-body {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.balance-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 48rpx 32rpx 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.deposit {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.money {
|
||||
margin: 24rpx 0 40rpx;
|
||||
font-size: 64rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.operation-btns {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
}
|
||||
.money {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
font-size: 50rpx;
|
||||
margin: 20rpx 0 40rpx 0;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
.deposit {
|
||||
margin-top: 50rpx;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
.operation-btn {
|
||||
background: #ee6d41;
|
||||
color: #fff;
|
||||
height: 90rpx;
|
||||
width: 240rpx;
|
||||
margin: 0 20rpx;
|
||||
border-radius: 10rpx;
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
border-radius: 12rpx;
|
||||
font-size: 30rpx;
|
||||
text-align: center;
|
||||
line-height: 90rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.light {
|
||||
background: #fdf2ee;
|
||||
color: #ee6d41;
|
||||
color: $light-color;
|
||||
border: 1px solid rgba(238, 109, 65, 0.25);
|
||||
}
|
||||
|
||||
.primary {
|
||||
background: $light-color;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
margin-top: 24rpx;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.list-label {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,52 +1,136 @@
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<view class="-list">
|
||||
<view class="page">
|
||||
<view class="form-card">
|
||||
<view class="title">充值金额</view>
|
||||
<view class="content">
|
||||
<view class="price">
|
||||
<span> ¥</span>
|
||||
<u-input v-model="price" placeholder='金额' type="number" />
|
||||
|
||||
</view>
|
||||
|
||||
<view class="amount-row">
|
||||
<text class="currency">¥</text>
|
||||
<u-input
|
||||
v-model="price"
|
||||
type="digit"
|
||||
border="none"
|
||||
placeholder="请输入充值金额"
|
||||
input-align="left"
|
||||
class="amount-input"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="submit" :class="{'light':flag}" @click="handlerRecharge">充值</view>
|
||||
<view class="submit" :class="{ disabled: flag }" @click="handlerRecharge">充值</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { recharge } from "@/api/members";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
price: 0,
|
||||
price: "",
|
||||
flag: true,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
price(val) {
|
||||
val <= 0 ? (this.flag = true) : (this.flag = false);
|
||||
this.flag = !(Number(val) > 0);
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
// 充值
|
||||
async handlerRecharge() {
|
||||
if (this.price > 0) {
|
||||
|
||||
let res = await recharge({ price: this.price });
|
||||
if (res.data.success) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/cart/payment/payOrder?orderType=RECHARGE&recharge_sn=${res.data.result.rechargeSn}`,
|
||||
});
|
||||
}
|
||||
const amount = Number(this.price);
|
||||
if (!(amount > 0)) {
|
||||
uni.showToast({
|
||||
title: "请输入充值金额",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await recharge({ price: amount });
|
||||
if (res.data.success) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/cart/payment/payOrder?orderType=RECHARGE&recharge_sn=${res.data.result.rechargeSn}`,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './style.scss';
|
||||
</style>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.amount-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 16rpx 0 8rpx;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.currency {
|
||||
flex-shrink: 0;
|
||||
margin-right: 16rpx;
|
||||
font-size: 56rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.amount-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
:deep(.amount-input .u-input) {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.amount-input .u-input__content) {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
:deep(.amount-input .u-input__content__field-wrapper__field) {
|
||||
height: 72rpx !important;
|
||||
min-height: 72rpx !important;
|
||||
font-size: 56rpx !important;
|
||||
font-weight: 600 !important;
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
:deep(.amount-input .u-input__content__field-wrapper__field--placeholder) {
|
||||
font-size: 32rpx !important;
|
||||
font-weight: 400 !important;
|
||||
color: #c0c4cc !important;
|
||||
}
|
||||
|
||||
.submit {
|
||||
margin-top: 80rpx;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background: $light-color;
|
||||
color: #fff;
|
||||
border-radius: 44rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,12 @@
|
||||
<template>
|
||||
<view class="wap">
|
||||
<u-navbar title="提现记录"></u-navbar>
|
||||
<u-navbar
|
||||
title="提现记录"
|
||||
:fixed="true"
|
||||
:placeholder="true"
|
||||
:border="false"
|
||||
:auto-back="true"
|
||||
></u-navbar>
|
||||
<scroll-view class="scroll-v view-wrapper" enableBackToTop="true" scroll-with-animation scroll-y @scrolltolower="loadMore">
|
||||
<view v-if="records.length != 0" class="view-item" v-for="(item, index) in records" :key="index">
|
||||
<view class="view-item-detail">
|
||||
|
||||
@@ -1,122 +1,273 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="-list">
|
||||
<view class="title">提现类型</view>
|
||||
<view class="content">
|
||||
<view class="price">
|
||||
<u-input disabled :value="type === 'ALI' ? '支付宝' : '微信'" placeholder="" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="page">
|
||||
<view class="form-card">
|
||||
<view class="field-label">提现类型</view>
|
||||
<view class="readonly-value">{{ typeLabel }}</view>
|
||||
</view>
|
||||
<view class="-list">
|
||||
<view class="title">提现金额</view>
|
||||
<view class="content">
|
||||
<view class="price">
|
||||
<span> ¥</span>
|
||||
<u-input v-model="price" placeholder="" type="number" />
|
||||
</view>
|
||||
|
||||
<view class="all">
|
||||
<view @click="handleAll" :style="{ color: $mainColor }">全部</view>
|
||||
<view style="font-size: 24rpx; color: #999">可提现金额<span>{{unitPrice(walletNum) }}</span>元</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="tips">
|
||||
最低提现金额为 {{ minPrice }} 元
|
||||
</view>
|
||||
</view>
|
||||
<view class="-list" v-if="type === 'ALI'">
|
||||
<view class="title">真实姓名</view>
|
||||
<view class="content">
|
||||
<view class="price">
|
||||
<u-input v-model="realName" placeholder="" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="-list" v-if="type === 'ALI'">
|
||||
<view class="title">第三方登录账号</view>
|
||||
<view class="content">
|
||||
<view class="price">
|
||||
<u-input v-model="connectNumber" placeholder="" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-card">
|
||||
<view class="field-label">提现金额</view>
|
||||
<view class="amount-main">
|
||||
<view class="amount-left">
|
||||
<text class="currency">¥</text>
|
||||
<u-input
|
||||
v-model="price"
|
||||
type="digit"
|
||||
border="none"
|
||||
placeholder="请输入提现金额"
|
||||
input-align="left"
|
||||
class="amount-input"
|
||||
/>
|
||||
</view>
|
||||
<view class="amount-extra">
|
||||
<text class="all-btn" @click="handleAll">全部</text>
|
||||
<text class="balance-tip">可提现金额 {{ unitPrice(walletNum) }} 元</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tips">最低提现金额为 {{ minPrice }} 元</view>
|
||||
</view>
|
||||
|
||||
<template v-if="type === 'ALI'">
|
||||
<view class="form-card">
|
||||
<view class="field-row">
|
||||
<text class="field-label">真实姓名</text>
|
||||
<u-input
|
||||
v-model="realName"
|
||||
border="none"
|
||||
input-align="right"
|
||||
placeholder="请输入真实姓名"
|
||||
class="field-input"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-card">
|
||||
<view class="field-row">
|
||||
<text class="field-label">第三方登录账号</text>
|
||||
<u-input
|
||||
v-model="connectNumber"
|
||||
border="none"
|
||||
input-align="right"
|
||||
placeholder="请输入支付宝账号"
|
||||
class="field-input"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view class="submit" @click="cashd">提现</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getUserWallet, withdrawalApply, withdrawalSettingVO } from "@/api/members";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
price: 0,
|
||||
price: "",
|
||||
walletNum: 0,
|
||||
minPrice: 0,
|
||||
type: '',
|
||||
connectNumber: '',
|
||||
realName: ''
|
||||
minPrice: 0,
|
||||
type: "",
|
||||
connectNumber: "",
|
||||
realName: "",
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
let result = await getUserWallet(); //预存款
|
||||
let res = await withdrawalSettingVO();
|
||||
this.walletNum = result.data.result.memberWallet;
|
||||
this.minPrice = res.data.result.minPrice;
|
||||
this.type = res.data.result.type;
|
||||
computed: {
|
||||
typeLabel() {
|
||||
if (this.type === "ALI") return "支付宝";
|
||||
if (this.type) return "微信";
|
||||
return "--";
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
const result = await getUserWallet();
|
||||
const res = await withdrawalSettingVO();
|
||||
this.walletNum = result.data.result.memberWallet;
|
||||
this.minPrice = res.data.result.minPrice;
|
||||
this.type = res.data.result.type;
|
||||
},
|
||||
|
||||
methods: {
|
||||
cashd() {
|
||||
this.price = this.price + "";
|
||||
|
||||
if (this.$u.test.amount(parseInt(this.price))) {
|
||||
let params = { price: this.price };
|
||||
if (this.type === 'ALI') {
|
||||
if (!this.connectNumber || !this.realName) {
|
||||
uni.showToast({
|
||||
title: "请输入真实姓名和第三方登录账号",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
params.connectNumber = this.connectNumber;
|
||||
params.realName = this.realName;
|
||||
}
|
||||
withdrawalApply(params).then((res) => {
|
||||
if (res.data.success) {
|
||||
uni.showToast({
|
||||
title: "提现成功!",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
const amount = Number(this.price);
|
||||
if (!this.$u.test.amount(parseInt(amount))) {
|
||||
uni.showToast({
|
||||
title: "请输入正确金额",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const params = { price: amount };
|
||||
if (this.type === "ALI") {
|
||||
if (!this.connectNumber || !this.realName) {
|
||||
uni.showToast({
|
||||
title: "请输入真实姓名和第三方登录账号",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
params.connectNumber = this.connectNumber;
|
||||
params.realName = this.realName;
|
||||
}
|
||||
|
||||
withdrawalApply(params).then((res) => {
|
||||
if (res.data.success) {
|
||||
uni.showToast({
|
||||
title: "提现成功!",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({ delta: 1 });
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
},
|
||||
handleAll() {
|
||||
this.price = this.walletNum;
|
||||
this.price = String(this.walletNum || "");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./style.scss";
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.readonly-value {
|
||||
margin-top: 20rpx;
|
||||
font-size: 32rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.amount-main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-top: 20rpx;
|
||||
padding-bottom: 16rpx;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.amount-left {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.currency {
|
||||
flex-shrink: 0;
|
||||
margin-right: 12rpx;
|
||||
font-size: 56rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.amount-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.amount-extra {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
margin-left: 24rpx;
|
||||
padding-top: 8rpx;
|
||||
}
|
||||
|
||||
.all-btn {
|
||||
font-size: 28rpx;
|
||||
color: $main-color;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.balance-tip {
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin-top: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
|
||||
.field-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.field-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
:deep(.amount-input .u-input),
|
||||
:deep(.field-input .u-input) {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.amount-input .u-input__content),
|
||||
:deep(.field-input .u-input__content) {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
:deep(.amount-input .u-input__content__field-wrapper__field) {
|
||||
height: 72rpx !important;
|
||||
min-height: 72rpx !important;
|
||||
font-size: 56rpx !important;
|
||||
font-weight: 600 !important;
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
:deep(.amount-input .u-input__content__field-wrapper__field--placeholder) {
|
||||
font-size: 32rpx !important;
|
||||
font-weight: 400 !important;
|
||||
color: #c0c4cc !important;
|
||||
}
|
||||
|
||||
:deep(.field-input .u-input__content__field-wrapper__field) {
|
||||
font-size: 28rpx !important;
|
||||
color: #666 !important;
|
||||
}
|
||||
|
||||
.submit {
|
||||
margin-top: 56rpx;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background: $light-color;
|
||||
color: #fff;
|
||||
border-radius: 44rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user