543 lines
15 KiB
Vue
543 lines
15 KiB
Vue
<template>
|
||
<view class="oliout">
|
||
<cu-custom style="" class="main-totextbar bg-main-oil" :backCard = 'true' :isBack="true" bgColor="bg-main-oil">
|
||
<block slot="backText">返回</block>
|
||
<block slot="content">油卡转出</block>
|
||
</cu-custom>
|
||
<view class="olibgclass"></view>
|
||
<view :style="'background-image: url('+imgURL+ ');'" class="new_card">
|
||
<view class="new_card_flexone">
|
||
<text>外请公司油卡</text>
|
||
</view>
|
||
<view class="new_card_flexone">
|
||
<text style="font-size: 44rpx; ">{{handle(cardData.accountCardCode)}}</text>
|
||
</view>
|
||
<view style="" class="new_card_flexone company">
|
||
<text>{{cardData.companyName}}</text>
|
||
</view>
|
||
<view style="position: relative;" class="new_card_flexone">
|
||
<text style="">账户余额： <text style="font-size: 36rpx;font-weight: 600;">{{cardData.balance}}</text>
|
||
元</text>
|
||
</view>
|
||
</view>
|
||
<view class="card_body" style="">
|
||
<view class="company_phone" style="">
|
||
<view class="new_input">
|
||
<text style="margin-right: 10rpx;" class="cuIcon-search"></text>
|
||
<input v-model="seachPhone" style="width: 80%;" placeholder="请输入对方手机号" type="number" />
|
||
</view>
|
||
<text @click="searchFn">搜索</text>
|
||
</view>
|
||
<view>
|
||
<view v-if="tip" class="card_tiop">请认真核对对方手机号码姓名，一旦转出无法追回</view>
|
||
<view v-if="!tip" style="color: red;" class="card_tiop">请输入正确手机号格式</view>
|
||
<view class="name_card" style="">
|
||
<view v-if="giveData!==null" class="company_user"
|
||
:style="'background-image: url('+(giveData.headPhoto?giveData.headPhoto:'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-xq/default-avator.png')+ ');'">
|
||
</view>
|
||
<view v-if="giveData!==null" style="margin-left: 20rpx;">
|
||
<view class="newcard_title">{{giveData.userName}} <text
|
||
v-if="giveData.createUser">（{{giveData.createUser}}）</text> </view>
|
||
<view>{{giveData.phone}}</view>
|
||
</view>
|
||
<view style="margin: 0 auto; color:#999999;" v-if="giveData===null">{{seachText}}</view>
|
||
</view>
|
||
<view style="padding: 15rpx 15rpx; 0 15rpx">
|
||
<view class="newcard_title">转出金额</view>
|
||
<view style="display: flex; align-items: center; ">
|
||
<text style="font-size: 80rpx;">
|
||
￥
|
||
</text>
|
||
<input v-model="sendData.occurAmount" class="card_input" style=" margin-left: 10rpx;"
|
||
:placeholder=" '最多可以转出'+ cardData.balance + '元'" type="digit" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="width: 90vw; margin: 0 auto;">
|
||
<view class="newcard_title zc">
|
||
转出说明
|
||
<view class="tiao"></view>
|
||
</view>
|
||
<view class="text" style="">1、转出油费实时到账，本页非任何法律文件，转出钱请认真核对
|
||
转出人，转出金额，如遇纠纷问题，请联系当事人解决处理。 </view>
|
||
</view>
|
||
<button @click="open" class="oliout_butten" style="">立即转出</button>
|
||
<!-- 弹窗 uini ui -->
|
||
<uni-popup @change='changefn' ref="popup" type="center">
|
||
<view v-if="giveData!==null" class="poput_tip">
|
||
<view :style="'background-image: url('+popupbg+ ');'" class="popup_header">短信身份验证</view>
|
||
<view style="margin: 20rpx auto;width: 90%;">转出验证：本次转出需要短信确认，验证码 已发送至您的手机 {{phoneHandle(this.phone)}}</view>
|
||
<xt-verify-code class="code" v-model="verifyCode" @confirm="confirm"></xt-verify-code>
|
||
<button @click="send" class="oliout_butten"
|
||
style="width:60%; border-radius: 50rpx;">{{time===0?'重新发送验证码':time+'S'}}
|
||
</button>
|
||
</view>
|
||
</uni-popup>
|
||
<uni-popup ref="popupt" type="center">
|
||
<view class="poput_tip">
|
||
<view :style="'background-image: url('+popupbg+ ');'" class="popup_header">温馨提示</view>
|
||
<view style="margin: 20rpx auto;width: 90%;text-align: center;">
|
||
<view class="container_img">
|
||
<image class="success_img" src="../../../static/img/success.png"></image>
|
||
</view>
|
||
转出成功!
|
||
</view>
|
||
<button @click="close" class="oliout_butten" style="width:60%; border-radius: 50rpx;">确认</button>
|
||
</view>
|
||
</uni-popup>
|
||
<uni-popup ref="dialog" type="dialog">
|
||
<uni-popup-dialog mode="base" message="成功消息" :duration="2000" :before-close="true" @close="dialogClose"
|
||
@confirm="dialogClose">{{errText}}</uni-popup-dialog>
|
||
</uni-popup>
|
||
<!-- <uni-popup ref="tip" type="dialog">
|
||
<uni-popup-dialog mode="base" message="成功消息" :duration="2000" :before-close="true" @close="dialogClose"
|
||
@confirm="dialogClose">发送成功</uni-popup-dialog>
|
||
</uni-popup> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import accountApi from '@/api/account.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
imgURL: 'https://xoi-support.oss-cn-hangzhou.aliyuncs.com/web/cuscomtrac/card.png',
|
||
popupbg: 'https://xoi-support.oss-cn-hangzhou.aliyuncs.com/web/cuscomtrac/popupbg.png',
|
||
seachText: "",
|
||
verifyCode: '',
|
||
value: '',
|
||
time: 0,
|
||
seachPhone: '',
|
||
userPhone: '',
|
||
balance: 980.50,
|
||
errText:'',
|
||
cardData: '',
|
||
giveData: null,
|
||
tip: true,
|
||
phone:'',
|
||
sendData: {
|
||
giveCustomerId: '', //赠送司机ID （与givePhone二选一必填）
|
||
givePhone: '', //赠送司机手机（与giveCustomerId二选一必填）
|
||
companyId: '', //公司id
|
||
code: '', //短信验证码
|
||
verifyCodeToken: '', //验证码Token
|
||
occurAmount: '' ,//交易金额（不得小于定义最小金额）,
|
||
createSource:'XOIL_DRIVER_WECHAT_APPLET',
|
||
billType:'OIL_DONATION',
|
||
payerCustomerId:''
|
||
}
|
||
}
|
||
},
|
||
onLoad(card) {
|
||
if (card) {
|
||
this.cardData = JSON.parse(card.card)
|
||
console.log(this.cardData,'-------------------')
|
||
}
|
||
this.phone = uni.getStorageSync('user').userPhone
|
||
},
|
||
methods: {
|
||
/*
|
||
this.$refs.(弹窗绑定的ref).open() 打开
|
||
this.$refs.(弹窗绑定的ref).close() 关闭
|
||
*/
|
||
//校验手机号
|
||
isPoneAvailable(poneInput) {
|
||
var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
|
||
if (!myreg.test(poneInput)) {
|
||
if (poneInput == '') {
|
||
this.tip = true
|
||
}
|
||
return false;
|
||
} else {
|
||
this.tip = true
|
||
return true;
|
||
}
|
||
},
|
||
//搜索函数
|
||
searchFn() {
|
||
/*
|
||
this.giveData绑定的值
|
||
this.giveData.globalEnabl 0 是已停用
|
||
this.seachText 提示文字
|
||
this.seachPhone 搜索的手机号
|
||
*/
|
||
//校验手机号
|
||
if (this.isPoneAvailable(this.seachPhone)) {
|
||
//搜索前清空
|
||
this.giveData = null
|
||
//手机号没问题请求接口
|
||
accountApi.getByPhone(this.seachPhone).then(res => {
|
||
console.log(res, '---')
|
||
//赠送对象赋值
|
||
if (res.data === null) {
|
||
//如果返回的是null 在下一步发送转账请求的时候 后台会自动创建 一个账号 前台做一个假数据 给赠送对象一些默认值
|
||
this.giveData = {}
|
||
this.giveData.userName = '将为您创建一个新的账号'
|
||
this.giveData.phone = this.seachPhone
|
||
this.giveData.headPhoto =
|
||
'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-xq/default-avator.png'
|
||
} else {
|
||
// 如果有数据 给数据绑定的值 赋值，设置提示 如果停用，清空搜索对象，修改提示文字
|
||
this.giveData = res.data
|
||
if (this.giveData.globalEnable === 0) {
|
||
this.seachText = '用户已停用'
|
||
this.giveData = null
|
||
}
|
||
else {
|
||
this.seachText = '亲暂无搜索记录哦~~'
|
||
}
|
||
}
|
||
})
|
||
} else {
|
||
//如果手机号校验不通过 清空搜索对象
|
||
this.giveData = null
|
||
this.tip = false
|
||
}
|
||
},
|
||
//卡号数据格式处理函数
|
||
handle(e) {
|
||
return e.replace(/(.{4})/g, '$1 ')
|
||
},
|
||
//手机号处理函数
|
||
phoneHandle(e) {
|
||
return e.substr(0,3)+"****"+e.substr(7);
|
||
},
|
||
//关闭弹窗函数
|
||
dialogClose() {
|
||
this.$refs.dialog.close()
|
||
},
|
||
//监听弹窗状态函数
|
||
changefn(e) {
|
||
console.log(e, '监听')
|
||
},
|
||
//开始记时函数
|
||
timefn() {
|
||
/*
|
||
this.time 时间值
|
||
this.time --
|
||
*/
|
||
if (this.time !== 0) {
|
||
this.time--
|
||
setTimeout(() => {
|
||
this.timefn()
|
||
}, 1000)
|
||
}
|
||
},
|
||
//发送验证码函数
|
||
send() {
|
||
//如果计时器不等于 0 back 否则进入下一步
|
||
if (this.time === 0) {
|
||
this.verifyCode = ''
|
||
this.sendData.verifyCodeToken=''
|
||
let phone = uni.getStorageSync('user').userPhone
|
||
// 调用接口
|
||
accountApi.giveCard({
|
||
phone: phone
|
||
}).then(res => {
|
||
// 接口返回2000 正常 表明验证码已经发送
|
||
// if (res.code === 20000) {
|
||
// 开启设置计时器时间
|
||
console.log(res,'验证')
|
||
this.time = 60
|
||
//获取验证码token
|
||
this.sendData.verifyCodeToken = res.data.verifyCodeToken
|
||
// 开启计时器
|
||
this.timefn()
|
||
// 打开提示
|
||
this.$refs.popup.open('center')
|
||
// }else{
|
||
// this.$refs.popup.open('center')
|
||
// }
|
||
})
|
||
|
||
} else {
|
||
uni.showToast({
|
||
title: '请等待'+this.time+'秒后再转账',
|
||
icon: "none"
|
||
})
|
||
return
|
||
}
|
||
},
|
||
// 校验 验证码 发送转账请求
|
||
givefn(e) {
|
||
/*
|
||
userData : 登录用户数据;
|
||
giveData : 转出对象参数;
|
||
cardData:卡参数
|
||
拿到需要的值 companyId accountCardCode code
|
||
拷贝一份 发送的参数 因为不拷贝一份数据，第二次会报错
|
||
合并数据
|
||
回显数据
|
||
*/
|
||
console.log(e,'givefn')
|
||
let userData = uni.getStorageSync('user')
|
||
console.log(this.giveData, '转出对象参数')
|
||
console.log(userData, '用户数据参数')
|
||
console.log(this.cardData, '卡参数')
|
||
// 拷贝
|
||
let sen = JSON.parse(JSON.stringify(this.sendData));
|
||
// 合并数据
|
||
({companyId:sen.companyId,accountCardCode:sen.accountCardCode} = this.cardData);
|
||
({id:sen.payerCustomerId}=userData);
|
||
// 数据key的操作
|
||
if(this.giveData.id===undefined){
|
||
sen.givePhone = this.giveData.phone
|
||
delete sen.giveCustomerId
|
||
}else{
|
||
sen.giveCustomerId = this.giveData.id
|
||
delete sen.givePhone
|
||
}
|
||
console.log('处理好的对象',sen)
|
||
accountApi.oilCustomerAccountRecord(sen).then(res=>{
|
||
if(res.code===20000){
|
||
this.$refs.popup.close()
|
||
this.$refs.popupt.open('center')
|
||
this.time=0
|
||
accountApi.getUserAccount().then(res=>{
|
||
// 回显
|
||
res.data.forEach(itme=>{
|
||
if(this.cardData.id===itme.id){
|
||
this.cardData = Object.assign(this.cardData,itme)
|
||
}
|
||
})
|
||
})
|
||
}
|
||
})
|
||
// this.sendData.code = e
|
||
// this.sendData.companyId = this.cardData.companyId
|
||
// this.giveData
|
||
//
|
||
},
|
||
//打开弹窗 转number
|
||
open() {
|
||
/*
|
||
this.sendData.occurAmount 交易金额（不得小于定义最小金额）
|
||
this.giveData 转出对象参数
|
||
判断 金额不能为空，金额为数字，金额不为为0，金额不能大于余额，转出人不能为空
|
||
this.errText 报错提示
|
||
*/
|
||
console.log( Number(this.sendData.occurAmount))
|
||
if(this.sendData.occurAmount === ''|| Number(this.sendData.occurAmount)<5){
|
||
this.errText = '转出金额不能为空或不能低于五元'
|
||
this.$refs.dialog.open()
|
||
return
|
||
}
|
||
if(isNaN(Number(this.sendData.occurAmount))){
|
||
this.errText = '请输入正确金额'
|
||
this.$refs.dialog.open()
|
||
return
|
||
}
|
||
if(Number(this.cardData.balance)<Number(this.sendData.occurAmount)){
|
||
this.errText = '转出金额不能大于卡余额'
|
||
this.$refs.dialog.open()
|
||
return
|
||
}
|
||
if(this.giveData == null){
|
||
this.errText = '转出人不能为空'
|
||
this.$refs.dialog.open()
|
||
return
|
||
}
|
||
if(this.seachPhone!==this.giveData.phone){
|
||
this.errText = '检测到搜索手机号有变动，请先确认转出人'
|
||
this.$refs.dialog.open()
|
||
this.searchFn()
|
||
return
|
||
}
|
||
//条件符合转number
|
||
this.sendData.occurAmount = Number(this.sendData.occurAmount)
|
||
// 打开发送验证码弹窗
|
||
this.send()
|
||
|
||
},
|
||
//验证码填写完毕的回调
|
||
confirm(e) {
|
||
// this.givefn(e)
|
||
console.log('confirm',e)
|
||
if(this.sendData.verifyCodeToken===''){
|
||
this.verifyCode=''
|
||
return
|
||
}else{
|
||
this.sendData.code = e
|
||
this.givefn(e)
|
||
}
|
||
|
||
},
|
||
//关闭弹窗
|
||
close() {
|
||
this.$refs.popupt.close()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.poput_tip {
|
||
width: 85vw;
|
||
height: 40vh;
|
||
background-color: #F8F8F8;
|
||
border-radius: 15rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.success_img {
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
|
||
.container_img {
|
||
height: 100rpx;
|
||
width: 100rpx;
|
||
overflow: hidden;
|
||
border-radius: 50%;
|
||
margin: 0 auto;
|
||
margin-top: 50rpx;
|
||
margin-bottom: 25rpx;
|
||
}
|
||
|
||
.xt__verify-code .xt__input-ground .xt__box-box.data-v-e4b72d00 {
|
||
height: 100rpx !important;
|
||
}
|
||
|
||
.xt__verify-code {
|
||
width: 90% !important;
|
||
margin: 0 auto !important;
|
||
|
||
}
|
||
|
||
.popup_header {
|
||
height: 20%;
|
||
width: 100%;
|
||
background-color: #FE0505;
|
||
color: white;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-size: 100% 30vh;
|
||
}
|
||
|
||
.text {
|
||
color: #666666;
|
||
font-size: 23rpx;
|
||
margin-top: 15rpx;
|
||
}
|
||
|
||
.oliout_butten {
|
||
width: 90vw;
|
||
margin: 0 auto;
|
||
background-color: #FE0505;
|
||
margin-top: 60rpx;
|
||
color: #F0F0F0;
|
||
}
|
||
|
||
.card_input {
|
||
width: 80%;
|
||
height: 80rpx;
|
||
font-size: 40rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.company_user {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background-color: #FF6D6E;
|
||
border-radius: 50rpx;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.company_phone {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
}
|
||
|
||
.company {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.oliout .bg-main-oil {
|
||
background-color: #FE0505 !important;
|
||
}
|
||
|
||
.name_card {
|
||
display: flex;
|
||
height: 250rpx;
|
||
align-items: center;
|
||
padding: 15rpx;
|
||
border-bottom: 1px solid #F0F0F0;
|
||
}
|
||
|
||
.tiao {
|
||
height: 5px;
|
||
width: 100%;
|
||
background: -webkit-linear-gradient(left, rgb(254, 5, 5, 1), rgb(254, 5, 5, .2), rgb(254, 5, 5, 0));
|
||
}
|
||
|
||
.zc {
|
||
width: max-content;
|
||
/* border-image: linear-gradient(to left, rgb(254,5,5,0),rgb(254,5,5,.2),rgb(254,5,5,1)) 1; */
|
||
|
||
}
|
||
|
||
.newcard_title {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.card_tiop {
|
||
border-bottom: 1px solid #F0F0F0;
|
||
padding: 20rpx 15rpx;
|
||
color: #999999;
|
||
font-size: 25rpx;
|
||
}
|
||
|
||
.card_body {
|
||
width: 90vw;
|
||
margin: 30rpx auto;
|
||
border: 1px solid #F0F0F0;
|
||
border-radius: 20rpx;
|
||
box-shadow: 0 0 5px 3px #F0F0F0;
|
||
padding: 25rpx;
|
||
}
|
||
|
||
.new_input {
|
||
width: 80%;
|
||
display: flex;
|
||
align-items: center;
|
||
border: 1px solid #f0f0f0;
|
||
padding: 15rpx;
|
||
}
|
||
|
||
.new_card_flexone {
|
||
width: 100%;
|
||
height: max-content;
|
||
}
|
||
|
||
.new_card {
|
||
width: 90vw;
|
||
height: 20vh;
|
||
position: relative;
|
||
background-color: #FE0505;
|
||
margin: 0 auto;
|
||
margin-top: 50rpx;
|
||
z-index: 99;
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
border-radius: 50rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 40rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.olibgclass {
|
||
position: absolute;
|
||
z-index: 1;
|
||
background-color: #FE0505;
|
||
width: 100vw;
|
||
height: 12vh;
|
||
border-radius: 0 0 35% 35%;
|
||
}
|
||
</style>
|