129 lines
3.7 KiB
Vue
129 lines
3.7 KiB
Vue
<template>
|
|
<view>
|
|
<uni-forms ref="depositForm" :modelValue="depositFormData" :rules="depositFormRules">
|
|
<uni-forms-item name="pay_ordid">
|
|
<text class="uni-subtitle">{{ $t('form.receipt.label') }}</text>
|
|
<uni-easyinput trim="all" primaryColor="#29BBE4" v-model="depositFormData.pay_ordid"></uni-easyinput>
|
|
</uni-forms-item>
|
|
<view class="imgUploadWrapper">
|
|
<uni-forms-item name="remittance_img">
|
|
<text class="uni-subtitle">{{ $t('form.receiptImg.label') }}</text>
|
|
<uni-file-picker ref="remittance_img" v-model="remittanceImg" file-mediatype="image" mode="grid" :limit="1" @select="(e) => select(e, 'remittance_img')" />
|
|
<view style="max-width: 140px">
|
|
<Progress :progress="remittance_img_progress" :error="remittance_img_error" />
|
|
</view>
|
|
<view style="color: #29bbe4">{{ $t('deposit.uploadCredentialsTip') }}</view>
|
|
</uni-forms-item>
|
|
</view>
|
|
<view>
|
|
<button class="primaryButton" type="button" @click="back">
|
|
{{ $t('form.previousStep') }}
|
|
</button>
|
|
<button class="secondaryButton" style="margin-top: 10px" type="button" :disabled="btnLoading" @click="handleSaveDeposit">
|
|
<image v-show="btnLoading" src="/static/loadingCircle.svg" mode="aspectFit" style="width: 16px; height: 16px"></image>
|
|
{{ $t('form.submitAudit') }}
|
|
</button>
|
|
</view>
|
|
</uni-forms>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getDepositDataById, saveDepositData } from '@/services/capital/deposit.ts';
|
|
import { imgUpload } from '@/services/common.ts';
|
|
export default {
|
|
name: 'UploadCredentials',
|
|
props: {
|
|
depositData: {
|
|
type: Object,
|
|
required: true,
|
|
default: () => ({})
|
|
},
|
|
back: {
|
|
type: Function,
|
|
default: () => {}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
btnLoading: false,
|
|
remittanceImg: undefined,
|
|
remittance_img_progress: 100,
|
|
remittance_img_error: false,
|
|
depositFormData: {},
|
|
depositFormRules: {
|
|
remittance_img: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
errorMessage: this.$t('form.receiptImg.required')
|
|
}
|
|
]
|
|
}
|
|
}
|
|
};
|
|
},
|
|
methods: {
|
|
async select(e, field) {
|
|
this[`${field}_progress`] = 0;
|
|
this[`${field}_error`] = false;
|
|
let step = 1;
|
|
const timer = setInterval(() => {
|
|
if (this[`${field}_progress`] > 85) {
|
|
step = 0.1;
|
|
} else if (this[`${field}_progress`] > 35) {
|
|
step = 0.8;
|
|
} else if (this[`${field}_progress`] > 15) {
|
|
step = 0.4;
|
|
}
|
|
if (this[`${field}_progress`] + step > 98) {
|
|
clearInterval(timer);
|
|
return;
|
|
}
|
|
this[`${field}_progress`] += step;
|
|
}, 34);
|
|
this.$refs[field].files[0].progress = 100;
|
|
const res = await imgUpload(e);
|
|
if (res && res.code === 0) {
|
|
this[`${field}_progress`] = 100;
|
|
this.depositFormData[field] = res.data?.imgNameList?.[0];
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: this.$t('common.success.uploadSuccess')
|
|
});
|
|
} else {
|
|
this[`${field}_error`] = true;
|
|
this.$cusModal.showModal({
|
|
type: 'message',
|
|
status: 'warning',
|
|
contentText: res.msg ?? this.$t('common.error.uploadError')
|
|
});
|
|
}
|
|
},
|
|
async handleSaveDeposit() {
|
|
this.$refs.depositForm.validate().then(async (fields) => {
|
|
console.log('fields==>', fields);
|
|
this.btnLoading = true;
|
|
const res = await saveDepositData({ ...fields, id: this.depositData?.obj?.goldInId, status: 0 });
|
|
this.btnLoading = false;
|
|
if (res && res.code === 0) {
|
|
uni.redirectTo({
|
|
url: `/pages/capital/deposit/success/index?pageTitle=${this.$t('deposit.depositType.scan')}`
|
|
});
|
|
} else {
|
|
this.$cusModal.showModal({
|
|
type: 'message',
|
|
status: 'warning',
|
|
contentText: res.msg ?? this.$t('common.error.sysError')
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import './index.scss';
|
|
</style>
|