627 lines
15 KiB
Vue
627 lines
15 KiB
Vue
<template>
|
||
<view class="recharge">
|
||
<u-navbar @rightClick="handlerRecord" bgColor="#fff" :autoBack="true" :title="navTitle" :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">
|
||
<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].keyValue}}</view>
|
||
<image class="card-list-left-img" src="@/static/indexIMG/copyImg.png"
|
||
@click="copyCode(Accounts[0].keyValue)" />
|
||
</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[2].keyValue}}</view>
|
||
<image class="card-list-left-img" src="@/static/indexIMG/copyImg.png"
|
||
@click="copyCode(Accounts[2].keyValue)" />
|
||
</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[1].keyValue}}</view>
|
||
<image class="card-list-left-img" src="@/static/indexIMG/copyImg.png"
|
||
@click="copyCode(Accounts[1].keyValue)" />
|
||
</view>
|
||
</view>
|
||
<u-empty
|
||
:show="!Accounts.length"
|
||
:icon="emptyIcon"
|
||
text="未设置收款信息"
|
||
>
|
||
</u-empty>
|
||
<u-gap height="20rpx"></u-gap>
|
||
</view>
|
||
<!-- 充值类型 -->
|
||
<!-- <view class="recharge_box">
|
||
|
||
</view> -->
|
||
<!-- 上传 -->
|
||
<view class="recharge-box recharge-upload">
|
||
<view class="upload-title">
|
||
<u--form
|
||
:model="model1"
|
||
:rules="rules"
|
||
ref="uForm"
|
||
labelWidth="120"
|
||
>
|
||
<!-- <u-form-item
|
||
label="充值类型"
|
||
prop="form.type"
|
||
borderBottom
|
||
>
|
||
<u-radio-group
|
||
v-model="model1.form.type"
|
||
placement="row"
|
||
class="flex"
|
||
:disabled="isSelect"
|
||
@change="radioChange"
|
||
>
|
||
<u-radio
|
||
:customStyle="{marginRight: '18px'}"
|
||
v-for="(item, index) in radioList"
|
||
:key="index"
|
||
:label="item.name"
|
||
:name="item.value"
|
||
>
|
||
</u-radio>
|
||
</u-radio-group>
|
||
</u-form-item> -->
|
||
<u-form-item
|
||
label="汇款人"
|
||
prop="form.remitter"
|
||
borderBottom
|
||
>
|
||
<u--input
|
||
v-model="model1.form.remitter"
|
||
disabledColor="#ffffff"
|
||
placeholder="请输入汇款人姓名"
|
||
border="none"
|
||
></u--input>
|
||
</u-form-item>
|
||
<u-form-item
|
||
label="汇款金额"
|
||
prop="form.price"
|
||
borderBottom
|
||
>
|
||
<u--input
|
||
type="number"
|
||
v-model="model1.form.price"
|
||
disabledColor="#ffffff"
|
||
placeholder="请输入汇款金额"
|
||
border="none"
|
||
></u--input>
|
||
</u-form-item>
|
||
<u-form-item
|
||
label="汇款时间"
|
||
prop="form.remittanceDate"
|
||
borderBottom
|
||
@click="show = true; hideKeyboard()"
|
||
ref="item1"
|
||
>
|
||
<u--input
|
||
v-model="model1.form.remittanceDate"
|
||
disabled
|
||
disabledColor="#ffffff"
|
||
placeholder="请选择汇款时间"
|
||
border="none"
|
||
></u--input>
|
||
<u-icon
|
||
slot="right"
|
||
name="arrow-right"
|
||
></u-icon>
|
||
</u-form-item>
|
||
<u-form-item
|
||
label="上传打款凭证"
|
||
prop="form.credentials"
|
||
class="flex-column flex"
|
||
>
|
||
<view class="upload-box-img flex flex-center">
|
||
<image v-if="model1.form.credentials" class="upload-img" :src="model1.form.credentials" mode="" />
|
||
<image v-else class="upload-bg-img" :src="uploadBgIMG" mode="aspectFit" @tap="selectImg" />
|
||
</view>
|
||
</u-form-item>
|
||
<u-form-item
|
||
label=" "
|
||
borderBottom
|
||
>
|
||
<view class="upload-btn" @click="selectImg">上传凭证</view>
|
||
</u-form-item>
|
||
|
||
<u-form-item
|
||
label="备注"
|
||
prop="form.remark"
|
||
borderBottom
|
||
>
|
||
<u--input
|
||
v-model="model1.form.remark"
|
||
disabledColor="#ffffff"
|
||
placeholder="请输入备注"
|
||
border="none"
|
||
></u--input>
|
||
</u-form-item>
|
||
</u--form>
|
||
<!-- <input placeholder="请输入充值金额" type="number" v-model="money"> -->
|
||
|
||
</view>
|
||
</view>
|
||
<avatar @upload="myUpload" ref="avatar"></avatar>
|
||
<!-- 提交按钮 -->
|
||
<button class="btn" @tap="recharGe" :loading="confirmLoading">确认充值</button>
|
||
<!--页面加载动画-->
|
||
<u-datetime-picker
|
||
:show="show"
|
||
mode="datetime"
|
||
:closeOnClickOverlay="true"
|
||
@confirm="handlerConfirm"
|
||
@cancel="show = false"
|
||
@close="show = false"
|
||
:formatter="formatter"
|
||
></u-datetime-picker>
|
||
<!-- <rfLoading isFullScreen :loading="loading"></rfLoading> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import url from "@/common/http/url.js";
|
||
import upload from "@/common/http/upload.js";
|
||
import avatar from "@/components/yq-avatar/yq-avatar.vue";
|
||
import dayjs from 'dayjs'
|
||
export default {
|
||
components: { avatar },
|
||
data() {
|
||
return {
|
||
navTitle:'充值',
|
||
Accounts: [],
|
||
isSelect:false,
|
||
loading: false,
|
||
confirmLoading: false,
|
||
money: "",
|
||
emptyIcon: require('@/static/empty.png'),
|
||
uploadBgIMG: require('@/static/indexIMG/upload.png'),
|
||
uploadIMG: "",
|
||
cardList: [
|
||
|
||
],
|
||
radioValue:1,
|
||
radioList: [
|
||
{
|
||
name: '余额',
|
||
value: 2
|
||
},
|
||
{
|
||
name: '水果券',
|
||
value: 1
|
||
}
|
||
],
|
||
titleStyle: {
|
||
fontWeight: '700',
|
||
color: '#000'
|
||
},
|
||
model1: {
|
||
form: {
|
||
remitter: null,
|
||
remittanceDate: null,
|
||
credentials: null,
|
||
price: null,
|
||
remark: null,
|
||
type: 2
|
||
}
|
||
},
|
||
rules: {
|
||
'form.type': {
|
||
type: 'number',
|
||
required: true,
|
||
message: '请选择充值类型',
|
||
trigger: ['change']
|
||
},
|
||
'form.remitter': {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请输入汇款人',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
'form.price': {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请输入汇款金额',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
'form.remittanceDate': {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请选择汇款时间',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
'form.credentials': {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请上传汇款凭证',
|
||
trigger: ['blur', 'change']
|
||
}
|
||
},
|
||
show: false,
|
||
type: null
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
|
||
if (e.type == 1) {
|
||
uni.setNavigationBarTitle({
|
||
title: '转账'
|
||
})
|
||
}
|
||
if(e.radioIndex){
|
||
this.model1.form.type = Number( e.radioIndex)
|
||
this.navTitle = e.radioIndex == 1 ?'水果券充值':'余额充值'
|
||
console.log(this.model1.form.type,'console.log(e.radioIndex)')
|
||
}
|
||
if(e.noSelect) {
|
||
this.isSelect = true
|
||
}
|
||
this.getTopUpAccount()
|
||
},
|
||
onReady() {
|
||
//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
|
||
console.log('this.$refs.uForm', this.$refs.uForm)
|
||
this.$refs.uForm.setRules(this.rules)
|
||
},
|
||
// 下拉刷新
|
||
onPullDownRefresh() {
|
||
this.$store.dispatch('fetchAsset', {
|
||
that: this
|
||
})
|
||
setTimeout(() => {
|
||
// uni.stopPullDownRefresh();
|
||
}, 500)
|
||
},
|
||
// #ifndef MP
|
||
onNavigationBarButtonTap(e) {
|
||
console.log(e, 'eee')
|
||
},
|
||
// #endif
|
||
methods: {
|
||
radioChange () {
|
||
this.getTopUpAccount();
|
||
},
|
||
handlerRecord () {
|
||
uni.showActionSheet({
|
||
itemList: ['水果券', '余额'],
|
||
success:(res) => {
|
||
console.log('res', res);
|
||
let { tapIndex } = res;
|
||
if (tapIndex == 0) {
|
||
this.$navigateTo('/pages/user/balance/rechargeList?type=getRechargeFruitRecord')
|
||
} else {
|
||
this.$navigateTo('/pages/user/balance/rechargeList?type=getRechargeRecord')
|
||
}
|
||
}
|
||
})
|
||
},
|
||
handlerConfirm ({value, mode}) {
|
||
console.log(value)
|
||
this.model1.form.remittanceDate = dayjs(value).format("YYYY-MM-DD HH:mm:ss");
|
||
this.show = false
|
||
console.log('dayjs(value).format("YYYY-MM-DD")', dayjs(value).format("YYYY-MM-DD HH:mm:ss"))
|
||
},
|
||
selectImg(type){
|
||
// upload.showAvatarModal(this, 500, 500)
|
||
uni.chooseImage({
|
||
count: 1,
|
||
success: (res) => {
|
||
let tempFilePath = res.tempFilePaths[0]
|
||
upload.getOssSignature(tempFilePath, 13, 1).then(data=>{
|
||
upload.uploadImageOss(data).then(list=>{
|
||
let successCallBackParamsList = [{
|
||
resourceTemporaryUUID: list[0].resourceTemporaryUUID
|
||
}]
|
||
console.log('list=====', list)
|
||
this.model1.form.credentials = list[0].url
|
||
// if (this.applicationType===0){ // 头像
|
||
// this.examineAvatar = {
|
||
// ossUrl: list[0].url,
|
||
// status: 4
|
||
// }
|
||
// }
|
||
|
||
})
|
||
})
|
||
}
|
||
})
|
||
},
|
||
handlerRight () {
|
||
uni.navigateTo({
|
||
url: '/pages/mine/recharge/recored'
|
||
})
|
||
},
|
||
hideKeyboard () {
|
||
uni.hideKeyboard()
|
||
},
|
||
myUpload(rsp){
|
||
let _this = this
|
||
upload.getOssSignature(rsp.path, 13, 1).then(data=>{
|
||
upload.uploadImageOss(data).then(list=>{
|
||
let successCallBackParamsList = [{
|
||
resourceTemporaryUUID: list[0].resourceTemporaryUUID
|
||
}]
|
||
console.log('list=====', list)
|
||
this.model1.form.credentials = list[0].url
|
||
// if (this.applicationType===0){ // 头像
|
||
// this.examineAvatar = {
|
||
// ossUrl: list[0].url,
|
||
// status: 4
|
||
// }
|
||
// }
|
||
|
||
})
|
||
})
|
||
},
|
||
goPage (path) {
|
||
this.$navigateTo(path)
|
||
},
|
||
// 获取收款信息
|
||
getTopUpAccount() {
|
||
this.$http("GET", url.common.getTopUp, {
|
||
type: this.model1.form.type
|
||
}).then((res) => {
|
||
console.log('res====', res.data)
|
||
if (res.code == 200) this.Accounts = res.data.children;
|
||
console.log('this.Accounts', this.Accounts)
|
||
})
|
||
|
||
|
||
},
|
||
// 充值
|
||
async recharGe() {
|
||
this.$refs.uForm.validate().then(res => {
|
||
uni.$u.toast('校验通过')
|
||
}).catch(errors => {
|
||
return
|
||
})
|
||
if (this.model1.form.price <= 0) return this.$msg('充值金额必须大于0')
|
||
const _this = this;
|
||
this.confirmLoading = true
|
||
await this.$httpJson("POST", url.common.submitRecharge, this.model1.form)
|
||
.then(r => {
|
||
console.log(r, "rr");
|
||
this.$msg('充值申请已提交');
|
||
this.confirmLoading = false
|
||
_this.money = ''
|
||
_this.uploadIMG = ''
|
||
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 1000)
|
||
}).catch((err) => {
|
||
console.log('err', err)
|
||
});
|
||
},
|
||
formatter(type, value) {
|
||
if (type === 'year') {
|
||
return `${value}年`
|
||
}
|
||
if (type === 'month') {
|
||
return `${value}月`
|
||
}
|
||
if (type === 'day') {
|
||
return `${value}日`
|
||
}
|
||
return value
|
||
},
|
||
// 上传头像
|
||
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 {
|
||
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 {
|
||
width: 400rpx;
|
||
margin: 0 20upx;
|
||
background: #F8F9FB;
|
||
border-radius: 20upx 20upx 20upx 20upx;
|
||
// padding: 220upx 0;
|
||
}
|
||
|
||
.upload-img {
|
||
width: 400rpx;
|
||
height: 336rpx;
|
||
}
|
||
|
||
.upload-bg-img {
|
||
width: 100px;
|
||
height: 68px;
|
||
margin: 100upx 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: #000;
|
||
}
|
||
</style>
|