b2894lxlx/yunxinwei-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化绑定功能按钮显示

Browse Source
This commit is contained in:
geng.tang@qq.com
2024-01-10 13:45:57 +08:00
parent a1d0e825ef
commit e954472f26
12 changed files with 795 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

421
pages/withdraw/withdraw.vue Normal file
View File

@@ -0,0 +1,421 @@
<template>
<view class="container">
<!-- <block v-if="applyVerifyStatus"> -->
<view class="form">
<u-form :model="form" ref="uForm" :rules="rules" label-width="170rpx">
<u-gap height="10" bgColor="#f3f3f3"></u-gap>
<view class="block">
<u-form-item label="提现金额" prop="amount" borderBottom>
<view class="amount">
<u-input v-model="form.amount" maxlength="20" :disabled="isEdit" @input="onInput"
:placeholder="`可提现金额￥${form.money ? form.money : 0}`" />
<text class="all" @click="onAll(form.money)">全部提现</text>
</view>
</u-form-item>
<!-- <u-form-item prop="serviceFee" borderBottom v-if="form.amount > 0">
<span class="service-fee" v-if="form.amount <= form.money">本次提现手续费￥{{ (form.amount * 0.035).toFixed(2) }}, 实际到账￥{{ (form.amount - (form.amount * 0.035)).toFixed(2) }}</span>
<span class="service-err" v-else>可提现金额不足</span>
</u-form-item> -->
</view>
<u-gap height="10" bgColor="#f3f3f3"></u-gap>
<view class="block">
<u-form-item label="收款方式" borderBottom @click="showCardType">
<view class="card-type">
<span class="service-fee">{{ cardType }}</span>
<u-icon name="arrow-right" size="18" color="#999999"></u-icon>
</view>
</u-form-item>
<u-form-item label="支付宝姓名" prop="alipayName" borderBottom v-if="cardType == '支付宝'">
<u-input v-model="form.alipayName" maxlength="20" :disabled="isEdit" placeholder="支付宝姓名" />
</u-form-item>
<u-form-item label="支付宝账号" prop="alipayAccount" borderBottom v-if="cardType == '支付宝'">
<u-input v-model="form.alipayAccount" maxlength="20" :disabled="isEdit" placeholder="支付宝账号" />
</u-form-item>
<!-- <u-form-item label="银行开户名" prop="bankName" borderBottom v-if="cardType == '银行卡'">
<u-input v-model="form.bankName" maxlength="20" :disabled="isEdit" placeholder="银行开户名" />
</u-form-item>
<u-form-item label="银行开户名" prop="bankAccount" borderBottom v-if="cardType == '银行卡'">
<u-input v-model="form.bankAccount" maxlength="20" :disabled="isEdit" placeholder="银行卡开户名" />
</u-form-item>
<u-form-item label="银行卡号" prop="bankCard" borderBottom v-if="cardType == '银行卡'">
<u-input v-model="form.bankCard" maxlength="20" :disabled="isEdit" placeholder="银行卡号" />
</u-form-item> -->
</view>
<u-gap height="10" bgColor="#f3f3f3"></u-gap>
<view class="block">
<!-- <view class="desc-title">提现说明：手续费<text class="service-err">3.5%</text></view> -->
<view class="desc">提交成功后可<text @click="gotoLog">点击这里</text>查看打款进度</view>
<!-- <view class="photo">
<image src="https://file.wsdns.cn/20230619/29a8c790211a46529fbbb66ee8d223d5.png"
mode="widthFix"></image>
</view> -->
</view>
</u-form>
</view>
<!-- <view class="agree-text" @click="onRadio">
<label>
<radio value="index" :checked="!disabled" />同意平台收集个人信息
</label>
<u-gap height="20"></u-gap>
<view class="xieyi" @click.stop="gotoUserProtocal">《用户协议》</view>
<u-gap height="20"></u-gap>
<view class="xieyi" @click.stop="gotoUserPrivate">《隐私政策》</view>
</view> -->
<view class="btn-wrapper">
<!-- <u-button :text="submitText" color="linear-gradient(to bottom, #9E1A91, #4D0868)" :disabled="isEdit || disabled"
shape="circle" @click="handleSubmit()"></u-button> -->
<u-button shape="circle" type="primary" @click="handleSubmit">申请提现</u-button>
</view>
<!-- </block> -->
</view>
</template>
<script>
import { addWithdraw } from '@/websoft/api/merchant.js'
import { getUser } from '@/websoft/api/user.js'
// import * as LoginApi from '@/api/login.js'
const userId = uni.getStorageSync('userId')
export default {
data() {
return {
form: {
amount: undefined,
money: undefined,
alipayName: '',
alipayAccount: '',
cardType: 20, // 打款方式 10微信 20支付宝 30银行卡
},
cardType: '支付宝',
fileList1: [],
disabled: true,
// 临时图片 (用于上传)
tempFile: null,
isEdit: false,
rules: {
'alipayName': {
type: 'string',
required: true,
message: '请填写支付宝姓名',
trigger: ['blur', 'change']
},
'alipayAccount': {
type: 'string',
required: true,
message: '请填写支付宝账号',
trigger: ['blur', 'change']
},
'amount': {
type: 'number',
required: true,
message: '请填写提现金额',
trigger: ['blur', 'change'],
// 自定义验证函数，见上说明
validator: (rule, value, callback) => {
if(value > this.form.money){
callback(uni.$u.$error('可提现金额不足'));
}
},
}
},
submitText: '提交申请',
// applyVerifyStatus: false
}
},
async onLoad() {
// await LoginApi.applyVerifyStatusMp().then(res => {
// console.log('res: ',res);
// console.log('res.data: ',res.data);
// this.applyVerifyStatus = false
// // #ifdef APP-PLUS || H5
// if(res.data == 0){
// this.applyVerifyStatus = true
// }
// // #endif
// // #ifdef MP-WEIXIN
// if(res.data == 0){
// this.applyVerifyStatus = true
// }
// // #endif
// })
this.getData()
},
onReady() {
//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
this.$refs.uForm.setRules(this.rules)
},
methods: {
getData() {
// const app = this
// MerchantApi.listMerchant({
// userId
// }).then(res => {
// if (res.data) {
// app.form = res.data[0]
// }
// })
const { form } = this
const app = this
getUser().then(res => {
if( res.code == 0 && res.data.username != 'www') {
console.log("获取用户信息: ",res.data);
app.form.money = res.data.balance
app.isLogin = true
}else{
app.isLogin = false
}
})
},
onRadio() {
this.disabled = !this.disabled
},
showCardType() {
const app = this
if(this.isEdit == true){
return false;
}
const itemList = ['支付宝','银行卡'];
uni.showActionSheet({
itemList,
success: ({tapIndex}) => {
app.cardType = itemList[tapIndex]
}
})
},
onInput(){
const { form } = this
this.disabled = false
if(form.amount > form.money){
this.disabled = true
}
},
onAll(money){
this.form.amount = money
// this.disabled = false
},
// 新增图片
async afterRead(event) {
console.log("event: ", event);
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
let lists = [].concat(event.file)
let fileListLen = this[`fileList${event.name}`].length
lists.map((item) => {
this[`fileList${event.name}`].push({
...item,
status: 'uploading',
message: '上传中'
})
})
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(lists[i].url)
let item = this[`fileList${event.name}`][fileListLen]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result.url,
thumb: result.thumbUrl
}))
fileListLen++
}
},
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
UploadApi.uploadFile({
filePath: url,
fileType: 'image',
name: 'file',
header: {
Authorization: uni.getStorageSync('AccessToken')
},
}).then(result => {
setTimeout(() => {
resolve(result.data)
}, 1000)
}).catch(err => {
console.log("err: ", err);
})
})
},
// 删除图片
deletePic(event) {
if (this.isEdit == true) {
return false;
}
this[`fileList${event.name}`].splice(event.index, 1)
},
// 确认修改
async handleSubmit() {
const app = this
const { form,cardType } = this
if(app.form.amount > app.form.money){
app.$error('可提现金额不足')
return false
}
if(app.form.amount == 0){
app.$error('提现金额不正确')
return false
}
if(cardType === '支付宝'){
app.form.cardType = 20
} else if(cardType === '银行卡'){
app.form.cardType = 30
}
// if (app.disabled) return
// uni.showLoading({
// mask: true,
// title: "正在验证"
// })
addWithdraw(app.form).then(result => {
if(result.code == 0){
app.$success('提现申请成功')
app.getData()
app.form.amount = undefined
}
else {
app.$error(result.message)
}
}).catch(err => {
console.log(err)
app.$error(err.message)
}).finally(() => {
uni.hideLoading()
})
},
gotoLog(){
uni.navigateTo({
url:'log/log'
})
},
gotoUserProtocal(){
uni.navigateTo({
url:'../pages/article/detail/detail?id=114'
})
},
gotoUserPrivate(){
uni.navigateTo({
url:'../pages/article/detail/detail?id=115'
})
}
}
}
</script>
<style lang="scss" scoped>
page {
background-color: #f3f3f3;
}
.container {
.form {
background-color: #ffffff;
}
.block {
margin: auto;
width: 700rpx;
font-size: 28rpx;
.upload {
width: 360rpx;
margin: 0 auto;
padding: 20rpx 0;
justify-content: center;
/* .id-card-upload {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin: 10rpx auto;
color: #cccccc;
border: 5rpx dashed #d9d9d9;
border-radius: 20rpx;
width: 360rpx;
height: 220rpx;
.photograph {
width: 60rpx;
}
}*/
}
.desc-title {
line-height: 3rem;
}
.desc {
color: #999999;
padding-top: 20rpx;
padding-bottom: 20rpx;
text {
color: #AB1581;
}
}
.card-type{
display: flex;
justify-content: space-between;
}
}
}
.btn-wrapper {
background: none;
width: 360rpx;
margin: 50rpx auto;
display: flex;
justify-content:center;
padding: 0 20rpx;
}
.service-fee{
// line-height: 2rem;
color: #AB1581;
}
.service-err{
line-height: 2rem;
color: #ff0000;
}
.amount{
width: 534rpx;
position: relative;
.all{
position: absolute;
top: 5rpx;
right: 20rpx;
font-size: 26rpx;
color: #AB1581;
z-index: 100;
}
}
.agree-text {
margin-left: 20rpx;
padding-top: 20rpx;
text-align: left;
width: 750rpx;
font-size: 26rpx;
/* .item {
display: flex;
align-items: center;
justify-content: center;
image {
width: 30rpx;
height: 30rpx;
margin-right: 10rpx;
}
} */
.xieyi {
color: rgba(75, 13, 99, 1);
// text-decoration:underline;
}
}
</style>