caoliancun
/
MP_XOIL_company_new
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
111
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 Commits
6 Branches
0 Tags
4.3 MiB
 
 
 
 
Tag: Branch: Tree: 74d32fa0a7
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '74d32fa0a7'
${ noResults }
MP_XOIL_company_new/BagMoney/pages/oilCards/oliout.vue

542 lines
15 KiB
Raw Blame History

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