yfs/package/mine/ti-qu.vue
2025-04-21 13:30:16 +08:00

623 lines
13 KiB
Vue

<!--
* @Date: 2023-12-20 17:33:04
* @LastEditTime: 2024-01-17 11:30:11
* @Description: content
-->
<template>
<view class="content">
<uni-nav-bar
title="提取记录"
color="#fff"
leftIcon="left"
backgroundColor="transparent"
:border="false"
:statusBar="true"
:fixed="true"
@clickLeft="$c.back()"
></uni-nav-bar>
<mescroll-body
ref="mescrollRef"
@init="mescrollInit"
@down="downCallback"
@up="getList"
:down="downOption"
:up="upOption"
>
<!-- <view class="row">
<view class="left">
<view class="title-color">提取金额</view>
</view>
</view>
<view class="input-box">
<input v-model.number="money" placeholder="输入提取金额" />
</view>
<view class="tip">
荷包金额剩余: {{ userInfo.money2 }}
<text @click="doAll">全部提出</text>
</view>
<view class="row">
<view class="left">
<view class="title-color">提取方式</view>
</view>
<view class="right">
<view
class="type"
v-for="(item, i) in tiType"
:key="i"
@click="changeTiType(i)"
>
<view class="check icon">
<image
v-if="tiTypeCur == i"
:src="$img('/static/img/check1_act.png')"
lazy-load
></image>
<image
v-else
:src="$img('/static/img/check1.png')"
lazy-load
></image>
</view>
{{ item.title }}
</view>
</view>
</view>
<template v-if="tiType[tiTypeCur].id == 2">
<view class="input-box">
<view class="label">姓名:</view>
<input v-model="name" placeholder="请输入姓名" />
</view>
<view class="input-box">
<view class="label">账号:</view>
<input v-model="account" placeholder="请输入账号" />
</view>
</template>
<template v-if="tiType[tiTypeCur].id == 3">
<view class="input-box">
<view class="label">开户行:</view>
<input v-model="bank" placeholder="请输入开户行" />
</view>
<view class="input-box">
<view class="label">姓名:</view>
<input v-model="name" placeholder="请输入姓名" />
</view>
<view class="input-box">
<view class="label">账号:</view>
<input v-model="account" placeholder="请输入账号" />
</view>
</template>
<view v-if="pageData" class="tip">
<text>{{ pageData.withdraw_money }}</text>
起提,每笔手续费需付
<text>{{ pageData.withdraw_money_sxf }}</text>
荷包金额,当日最高可提取
<text>{{ pageData.max_money }}</text>
</view>
<view @click="isAgree = !isAgree" class="agree">
<view class="icon">
<image
v-if="isAgree"
:src="$img1('common/check_act.png')"
lazy-load
></image>
<image v-else :src="$img1('common/check.png')" lazy-load></image>
</view>
<view class="agree-r">
我已阅读并同意
<text @click.stop="$c.to({ url: '/pages/guize/guize?type=4' })">
《用户协议》
</text>
<text @click.stop="$c.to({ url: '/pages/guize/guize?type=5' })">
《隐私政策》
</text>
</view>
</view>
<view class="submit" @click="$c.noDouble(doSubmit)">立即提取</view>
<view class="row">
<view class="left">
<view class="title-color">提取记录</view>
</view>
</view> -->
<view class="log">
<view class="log-item" v-for="(item, i) in listData" :key="i">
<view class="item-l">
<view class="title">
{{ item.status_text }}
<text v-if="item.reason">({{ item.reason }})</text>
</view>
<view class="time">{{ item.addtime }}</view>
</view>
<view class="item-money">{{ item.tal_money }}</view>
</view>
</view>
</mescroll-body>
</view>
</template>
<script>
export default {
data() {
return {
// 下拉刷新的配置(可选, 绝大部分情况无需配置)
downOption: {
auto: false
},
// 上拉加载的配置(可选, 绝大部分情况无需配置)
upOption: {
auto: true,
page: {
size: 15 // 每页数据的数量,默认10
}
},
money: '',
qrCode: '',
name: '',
account: '',
bank: '',
listData: [],
userInfo: uni.getStorageSync('userinfo'),
qrCodePath: '',
tiType: [
{
id: 2,
title: '支付宝'
},
{
id: 3,
title: '银行卡'
}
],
tiTypeCur: 0,
pageData: '',
lastTi: {},
isAgree: false
}
},
onShow() {
this.getUserInfo()
},
methods: {
changeTiType(i) {
this.tiTypeCur = i
const curId = this.tiType[i].id
const target = this.lastTi[curId]
if (target) {
this.name = target.name
this.account = target.number
this.bank = target.bank
} else {
this.name = ''
this.account = ''
}
},
downCallback() {
this.money = ''
this.mescroll.resetUpScroll()
this.mescroll.scrollTo(0, 0)
this.getUserInfo()
},
/**
* @description: 获取列表
* @param {*} num
* @param {*} size
* @return {*}
*/
getList({ num, size }) {
this.req({
url: 'withdraw_log',
data: {
page: num
},
Loading: true,
success: res => {
if (res.status == 1) {
if (num == 1) {
this.listData = []
}
this.pageData = res.data
this.listData = this.listData.concat(res.data.list)
this.mescroll.endByPage(res.data.list.length, res.data.last_page)
let lastTi = {}
if (res.data.zhifubao)
lastTi[res.data.zhifubao.type] = res.data.zhifubao
if (res.data.yinhangka)
lastTi[res.data.yinhangka.type] = res.data.yinhangka
this.lastTi = lastTi
this.changeTiType(this.tiTypeCur)
}
}
})
},
doSubmit() {
if (!this.money) {
this.$c.toast({
title: '请输入金额'
})
return
}
if (!this.name) {
this.$c.toast({
title: '姓名不能为空'
})
return
}
if (!this.account) {
this.$c.toast({
title: '账号不能为空'
})
return
}
if (this.tiType[this.tiTypeCur].id == 3) {
if (!this.bank) {
this.$c.toast({
title: '开户行不能为空'
})
return
}
}
if (!this.isAgree) {
return this.$c.toast({
title: '请阅读并同意《用户协议》和《隐私政策》'
})
}
this.req({
url: 'withdraw',
data: {
money: this.money,
type: this.tiType[this.tiTypeCur].id,
name: this.name,
number: this.account,
bank: this.bank
},
success: res => {
if (res.status == 1) {
this.$c.toast({
title: res.msg,
duration: 1500,
success: () => {
this.getUserInfo()
this.downCallback()
}
})
}
}
})
},
upImg() {
let that = this
uni.chooseImage({
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
count: 1,
success: ({ tempFilePaths, tempFiles }) => {
uni.uploadFile({
url: that.siteBaseUrl + 'picture',
filePath: tempFilePaths[0],
name: 'file',
success: e => {
let res = JSON.parse(e.data)
if (res.status == 1) {
this.qrCode = res.data.imgurl
this.qrCodePath = res.data.path
}
}
})
},
fail: error => {}
})
},
doAll() {
this.money = this.userInfo.money2 * 1
},
getUserInfo() {
this.req({
url: 'user',
data: {},
success: res => {
if (res.status == 1) {
this.userInfo = res.data.userinfo
uni.setStorageSync('userinfo', res.data.userinfo)
}
}
})
}
}
}
</script>
<style lang="scss">
.content {
padding: 0 30rpx 30rpx;
.row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 30rpx;
.left {
display: flex;
align-items: center;
font-size: 28rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffffff;
.title-color {
font-size: 32rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
}
.desc {
font-size: 26rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #dddddd;
}
}
.right {
display: flex;
align-items: center;
font-size: 24rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffffff;
.to-rule {
font-size: 24rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #d0d1ff;
}
.right-icon {
width: 32rpx;
height: 32rpx;
}
.type {
display: flex;
align-items: center;
.check {
width: 40rpx;
height: 32rpx;
margin-right: 10rpx;
}
font-size: 28rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffffff;
}
.type + .type {
margin-left: 40rpx;
}
}
}
.input-box {
margin-top: 30rpx;
height: 80rpx;
border: 1px solid #d0d1ff;
box-sizing: border-box;
padding: 0 20rpx;
display: flex;
align-items: center;
.label {
padding: 0 20rpx;
// border-right: 1rpx solid #ccc;
font-size: 28rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #fff;
}
input {
flex: 1;
font-size: 28rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #fff;
}
}
.tip {
margin-top: 10rpx;
font-size: 24rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #dddddd;
text {
padding: 0 10rpx;
color: #d0d1ff;
}
}
.pic {
margin-top: 30rpx;
width: 200rpx;
height: 200rpx;
border-radius: 20rpx;
border: 1rpx solid #d0d1ff;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
.up {
width: 100%;
height: 100%;
position: relative;
&::before,
&::after {
content: '';
width: 4rpx;
height: 40rpx;
background: #d0d1ff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
&::after {
transform: translate(-50%, -50%) rotate(90deg);
}
}
}
.agree {
display: flex;
padding: 40rpx 0 0;
.icon {
width: 32rpx;
height: 32rpx;
}
.agree-r {
flex: 1;
word-wrap: break-word;
word-break: break-all;
padding-left: 20rpx;
line-height: 32rpx;
font-size: 26rpx;
color: #9d9d9d;
text {
color: #d0d1ff;
}
}
}
.submit {
margin: 30rpx 0 0;
width: 100%;
height: 80rpx;
background: linear-gradient(90deg, #2dcbff 0%, #ff95fb 100%);
border-radius: 40rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 32rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #222222;
}
.log {
padding: 1rpx 10rpx 0;
.log-item {
padding: 30rpx 0;
display: flex;
align-items: center;
border-bottom: 1rpx solid #333;
.item-l {
flex: 1;
padding-right: 30rpx;
.title {
font-size: 28rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffffff;
text {
font-size: 24rpx;
padding-left: 20rpx;
}
}
.time {
margin-top: 6rpx;
font-size: 25rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #cccccc;
}
}
.item-money {
font-size: 32rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffffff;
}
}
}
}
</style>