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>
|