377 lines
8.7 KiB
Vue
377 lines
8.7 KiB
Vue
<template>
|
||
<view class="recharge">
|
||
<u-navbar @rightClick="handlerRight" leftIconColor="#fff" bgColor="#3c96f3" :autoBack="true" title="充值" :placeholder="true" :titleStyle="titleStyle">
|
||
<view slot="right" class="button">
|
||
充值记录
|
||
</view>
|
||
</u-navbar>
|
||
<!-- 头部 -->
|
||
<view class="recharge-box recharge-card">
|
||
<view class="card-title">请直接转账到以下对公账户</view>
|
||
<view class="card-list" v-if="Accounts.length>0">
|
||
<view class="card-list-item">
|
||
<image class="card-list-left-img" src="@/static/indexIMG/recharge-icon3.png" mode="" />
|
||
<view class="card-list-text">{{Accounts[0].dictLabel}}：{{Accounts[0].dictValue}}</view>
|
||
<image class="card-list-left-img" src="@/static/indexIMG/copyImg.png"
|
||
@click="copyCode(Accounts[0].dictValue)" />
|
||
</view>
|
||
|
||
<view class="card-list-item">
|
||
<image class="card-list-left-img" src="@/static/indexIMG/recharge-icon1.png" mode="" />
|
||
<view class="card-list-text">{{Accounts[1].dictLabel}}：{{Accounts[1].dictValue}}</view>
|
||
<image class="card-list-left-img" src="@/static/indexIMG/copyImg.png"
|
||
@click="copyCode(Accounts[1].dictValue)" />
|
||
</view>
|
||
|
||
<view class="card-list-item">
|
||
<image class="card-list-left-img" src="@/static/indexIMG/recharge-icon2.png" mode="" />
|
||
<view class="card-list-text">{{Accounts[2].dictLabel}}：{{Accounts[2].dictValue}}</view>
|
||
<image class="card-list-left-img" src="@/static/indexIMG/copyImg.png"
|
||
@click="copyCode(Accounts[2].dictValue)" />
|
||
</view>
|
||
</view>
|
||
<u-empty
|
||
:show="!Accounts.length"
|
||
:icon="emptyIcon"
|
||
text="未设置收款信息"
|
||
>
|
||
</u-empty>
|
||
<u-gap height="20rpx"></u-gap>
|
||
</view>
|
||
<!-- 上传 -->
|
||
<view class="recharge-box recharge-upload">
|
||
<view class="upload-title">
|
||
<input placeholder="请输入充值金额" type="number" v-model="money">
|
||
<view class="upload-btn" @tap="uploadImage">上传凭证</view>
|
||
</view>
|
||
<view class="upload-box-img">
|
||
<image v-if="uploadIMG" class="upload-img" :src="uploadIMG" mode="aspectFit" />
|
||
<image v-else class="upload-bg-img" :src="uploadBgIMG" mode="aspectFit" @tap="uploadImage" />
|
||
</view>
|
||
|
||
</view>
|
||
<!-- 提交按钮 -->
|
||
<button class="btn" @tap="recharGe" :loading="confirmLoading">确认充值</button>
|
||
<!--页面加载动画-->
|
||
<!-- <rfLoading isFullScreen :loading="loading"></rfLoading> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
upload,
|
||
rechargeMoney,
|
||
getBlBankAccount
|
||
} from "@/api/system/user.js"
|
||
import { toast } from '@/utils/common.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
assetType:5,
|
||
Accounts: [],
|
||
loading: false,
|
||
confirmLoading: false,
|
||
money: "",
|
||
emptyIcon: require('@/static/empty.png'),
|
||
uploadBgIMG: require('@/static/indexIMG/upload.png'),
|
||
uploadIMG: "",
|
||
cardList: [{
|
||
leftIcon: require('@/static/indexIMG/recharge-icon1.png'),
|
||
rightIcon: require('@/static/indexIMG/copyImg.png'),
|
||
title: "公司账号",
|
||
content: "110946777910101",
|
||
},
|
||
{
|
||
leftIcon: require('@/static/indexIMG/recharge-icon2.png'),
|
||
rightIcon: require('@/static/indexIMG/copyImg.png'),
|
||
title: "开户银行",
|
||
content: "招商银行北京分行十里河支行",
|
||
},
|
||
{
|
||
leftIcon: require('@/static/indexIMG/recharge-icon3.png'),
|
||
rightIcon: require('@/static/indexIMG/copyImg.png'),
|
||
title: "公司名称",
|
||
content: "中亿华商有限公司",
|
||
},
|
||
|
||
],
|
||
titleStyle: {
|
||
fontWeight: '700',
|
||
color: '#fff'
|
||
}
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
if(options && options.assetType){
|
||
this.assetType = options.assetType
|
||
}
|
||
this.getTopUpAccount()
|
||
},
|
||
|
||
// 下拉刷新
|
||
onPullDownRefresh() {
|
||
this.$store.dispatch('fetchAsset', {
|
||
that: this
|
||
})
|
||
setTimeout(() => {
|
||
// uni.stopPullDownRefresh();
|
||
}, 500)
|
||
},
|
||
// #ifndef MP
|
||
onNavigationBarButtonTap(e) {
|
||
console.log(e, 'eee')
|
||
},
|
||
// #endif
|
||
methods: {
|
||
handlerRight () {
|
||
uni.navigateTo({
|
||
url: '/pages/licai/mine/recharge/recored?assetType='+this.assetType
|
||
})
|
||
},
|
||
// 获取收款信息
|
||
async getTopUpAccount() {
|
||
const res = await getBlBankAccount()
|
||
if (res.code == 200) this.Accounts = res.data
|
||
},
|
||
// 充值
|
||
async recharGe() {
|
||
|
||
const _this = this;
|
||
if (!_this.money) {
|
||
return toast('请填写充值金额');
|
||
}
|
||
if (!_this.uploadIMG) {
|
||
return toast('请上传充值凭证');
|
||
}
|
||
this.confirmLoading = true
|
||
await rechargeMoney({
|
||
price: _this.money,
|
||
credentials: _this.uploadIMG,
|
||
assetType:this.assetType
|
||
})
|
||
.then(r => {
|
||
console.log(r, "rr");
|
||
toast('充值申请已提交');
|
||
this.confirmLoading = false
|
||
_this.money = ''
|
||
_this.uploadIMG = ''
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 1000)
|
||
});
|
||
},
|
||
// 上传头像
|
||
uploadImage() {
|
||
|
||
// 从相册选择图片
|
||
const _this = this;
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sizeType: ['original'],
|
||
sourceType: ['album'],
|
||
success: function(res) {
|
||
uni.showLoading({title:"上传中"})
|
||
_this.handleUploadFile(res.tempFilePaths);
|
||
},
|
||
fail:function() {
|
||
uni.hideLoading()
|
||
}
|
||
});
|
||
},
|
||
// 上传凭证
|
||
async handleUploadFile(data) {
|
||
const _this = this;
|
||
const filePath = data.path || data[0];
|
||
let res = await upload(filePath)
|
||
console.log(res)
|
||
_this.uploadIMG = res.msg
|
||
// _this.profileInfo.head_portrait = r.url;
|
||
// _this.handleUpdateInfo(_this.profileInfo);
|
||
uni.hideLoading()
|
||
|
||
},
|
||
// 复制邀请码
|
||
copyCode(data1) {
|
||
// #ifdef H5
|
||
let tempInput = document.createElement("input");
|
||
tempInput.type = "text";
|
||
tempInput.id = "copyTempInput";
|
||
tempInput.value = data1;
|
||
tempInput.style.width = "1px";
|
||
tempInput.style.height = "1px";
|
||
tempInput.style.opacity = 0.1;
|
||
document.body.appendChild(tempInput);
|
||
tempInput.select();
|
||
document.execCommand("Copy");
|
||
uni.showToast({
|
||
title: "复制成功",
|
||
});
|
||
setTimeout(() => {
|
||
tempInput.remove();
|
||
}, 2000);
|
||
// #endif
|
||
/**
|
||
* 小程序端 和 app端的复制逻辑
|
||
*/
|
||
//#ifndef H5
|
||
let content = data1
|
||
|
||
uni.setClipboardData({
|
||
data: data1,
|
||
success: function() {
|
||
uni.showToast({
|
||
title: "复制成功",
|
||
});
|
||
},
|
||
fail: function(err) {
|
||
console.log(err, 'err')
|
||
}
|
||
});
|
||
//#endif
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.recharge {
|
||
height: calc(100vh - 40px);
|
||
padding: 22upx;
|
||
background-color: #F0F0F1;
|
||
|
||
.recharge-box {
|
||
background: #FFFFFF;
|
||
box-shadow: 0upx 3upx 15upx 1upx rgba(201, 208, 220, 0.3);
|
||
border-radius: 20upx 20upx 20upx 20upx;
|
||
}
|
||
|
||
// 头部卡片
|
||
.recharge-card {
|
||
.card-title {
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 38upx;
|
||
font-weight: 700;
|
||
color: #333333;
|
||
padding: 22upx 0;
|
||
border-bottom: 1upx solid #F0F0F1;
|
||
;
|
||
}
|
||
|
||
.card-list {
|
||
padding: 20upx 24upx;
|
||
|
||
.card-list-item {
|
||
padding-bottom: 18upx;
|
||
|
||
&:last-child {
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.card-list-left-img {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
.card-list-text {
|
||
flex: 1;
|
||
padding-left: 12upx;
|
||
font-size: 30upx;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
.card-list-right-img {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
// 上传
|
||
.recharge-upload {
|
||
margin-top: 20upx;
|
||
text-align: center;
|
||
padding-bottom: 20upx;
|
||
|
||
.upload-title {
|
||
position: relative;
|
||
text-align: left;
|
||
padding: 20upx;
|
||
|
||
input {
|
||
background: #F2F4F8;
|
||
border-radius: 50upx 50upx 50upx 50upx;
|
||
font-size: 32upx;
|
||
height: 90upx;
|
||
padding-right: 200upx;
|
||
padding-left: 35upx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
.upload-btn {
|
||
z-index: 99;
|
||
position: absolute;
|
||
right: 35upx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
border-radius: 90upx 90upx 90upx 90upx;
|
||
border: 1upx solid #0076FF;
|
||
font-size: 32upx;
|
||
padding: 8upx 25upx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #0076FF;
|
||
}
|
||
}
|
||
|
||
.upload-box-img {
|
||
margin: 0 20upx;
|
||
background: #F8F9FB;
|
||
border-radius: 20upx 20upx 20upx 20upx;
|
||
// padding: 220upx 0;
|
||
}
|
||
|
||
.upload-img {
|
||
width: 100%;
|
||
height: 380px;
|
||
}
|
||
|
||
.upload-bg-img {
|
||
width: 100px;
|
||
height: 68px;
|
||
margin: 245upx 0;
|
||
}
|
||
}
|
||
|
||
// 充值按钮
|
||
.btn {
|
||
margin-top: 20upx;
|
||
background: #0076FF;
|
||
border-radius: 40upx;
|
||
font-size: 32upx;
|
||
text-align: center;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
|
||
.uni-button:after {
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
}
|
||
.button {
|
||
color: #FFFFFF;
|
||
}
|
||
</style>
|