星油企业版
This commit is contained in:
caolc
372
BagMoney/pages/oilCards/oilCards.vue
Normal file
372
BagMoney/pages/oilCards/oilCards.vue
Normal file
@@ -0,0 +1,372 @@
|
||||
<template>
|
||||
<view>
|
||||
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
|
||||
<block slot="backText">返回</block>
|
||||
<block slot="content">油卡中心</block>
|
||||
</cu-custom>
|
||||
<view class="" v-show="accountStatus">
|
||||
<view class="placeholder bg-main-oil">
|
||||
|
||||
</view>
|
||||
<view class="move-top">
|
||||
|
||||
<view class="flex radius margin my-shadow position-re">
|
||||
<view class="basis-sm text-center padding bg-gradual-black">
|
||||
我的油卡
|
||||
</view>
|
||||
<view class="basis-lg padding bg-white">
|
||||
总余额：<text class="text-red">{{userTotal.oilCardTotalPrice|moneyFormat}}元</text><text class="cu-tag yu-tag-right position-ab sm">{{cardList.length>0?cardList.length:1}}张</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="flex radius margin my-shadow position-re">
|
||||
<view class="basis-sm text-center padding bg-gradual-black">
|
||||
自营公司油卡
|
||||
</view>
|
||||
<view class="basis-lg padding bg-white">
|
||||
余额：400.00 元
|
||||
<text class="cu-tag yu-tag-right position-ab sm">1张</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex radius margin my-shadow position-re">
|
||||
<view class="basis-sm text-center padding bg-gradual-black">
|
||||
三方公司油卡
|
||||
</view>
|
||||
<view class="basis-lg padding bg-white">
|
||||
总余额：<text class="text-red">{{userTotal.oilCardTotalPrice|moneyFormat}}元</text>
|
||||
<text class="cu-tag yu-tag-right position-ab sm">{{cardList.length-1>0?cardList.length-1:1}}张</text>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class=" margin-bottom-lg">
|
||||
<swiper class="screen-swiper square-dot" @change="cardSwiper" :indicator-dots="true" :circular="true" :autoplay="false"
|
||||
interval="5000" duration="500">
|
||||
<swiper-item v-for="(item,index) in cardList" :key="index" :class="cardCur==index?'cur':''">
|
||||
<!-- <image :src="imgURL+ (item.type=='zs'?'card-zs.png':'card-other.png')" mode="aspectFill">
|
||||
</image> -->
|
||||
<oil-card :card="item"></oil-card>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
<view class="transactions padding-top solid-top margin my-shadow radius margin-top">
|
||||
<view class="" v-if="cardList[cardCur].shareCompanyQuota==1">
|
||||
<view class="text-center ">
|
||||
<view class="text-red padding-bottom-sm text-bold text-lg">
|
||||
共享企业余额
|
||||
</view>
|
||||
|
||||
<text class="text-grey">单日加油额度：{{cardList[cardCur].orderAmountToplimit}}元；单日加油升数额度：{{cardList[cardCur].orderVolumeToplimit}}L</text>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="text-center padding">
|
||||
<!-- <view class="text-red text-bold text-lg">
|
||||
{{userTotal.oilCardTotalPrice|moneyFormat}}元
|
||||
</view> -->
|
||||
|
||||
<text class="">交易记录</text>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="cu-list menu" v-if="cardList[cardCur].historyList.length>0">
|
||||
<view class="cu-item" v-for="detail in cardList[cardCur].historyList" :key="detail.id">
|
||||
<view class="content padding-tb-sm">
|
||||
|
||||
<view class="text-gray text-sm">
|
||||
{{detail.createTime}}
|
||||
</view>
|
||||
<view>
|
||||
{{detail.billTypeName + ' '}}{{ detail.occurAmount|moneyFormat}}元
|
||||
</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<text class="text-black">{{detail.occurAmount|moneyFormat}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<my-empty v-else :marginTopExtra="false"></my-empty>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-white">
|
||||
<uni-load-more :status="loadStatus"></uni-load-more>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import oilCard from '../../components/oil-card/oil-card.vue'
|
||||
import accountApi from '@/api/account.js'
|
||||
export default {
|
||||
components: {
|
||||
oilCard
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadStatus: 'load',
|
||||
userTotal: {},
|
||||
historyList: [],
|
||||
accountStatus: uni.getStorageSync('accountStatus'),
|
||||
imgURL: this.global.imgURL,
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
bgColor: 'bg-gradual-blue',
|
||||
text: '油卡卡10086',
|
||||
type: 'zs'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
bgColor: 'bg-gradual-purple',
|
||||
text: '油卡卡123454',
|
||||
type: 'other'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
bgColor: 'bg-gradual-green',
|
||||
text: '油卡卡896671',
|
||||
type: 'other'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
bgColor: 'bg-gradual-orange',
|
||||
text: '油卡卡567651',
|
||||
type: 'other'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
bgColor: 'bg-gradual-pink',
|
||||
text: '油卡卡454565651',
|
||||
type: 'other'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
bgColor: 'bg-gradual-red',
|
||||
text: '油卡卡154645645',
|
||||
type: 'other'
|
||||
},
|
||||
],
|
||||
dotStyle: false,
|
||||
towerStart: 0,
|
||||
direction: '',
|
||||
cardList: [{
|
||||
historyList: [],
|
||||
currentPage: 1,
|
||||
loadStatus: 'more'
|
||||
}],
|
||||
currentPage: 1
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
this.getCards()
|
||||
this.getTotalOilCardInfo()
|
||||
this.TowerSwiper('swiperList');
|
||||
},
|
||||
onLoad(option) {
|
||||
this.getCards()
|
||||
this.getTotalOilCardInfo()
|
||||
this.TowerSwiper('swiperList');
|
||||
// 初始化towerSwiper 传已有的数组名即可
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.cardList[this.cardCur].loadStatus == 'more') {
|
||||
setTimeout(() => {
|
||||
this.getMoneyDetail(this.cardList[this.cardCur],this.cardCur)
|
||||
}, 100)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '到底啦',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
getAmount() {
|
||||
accountApi.getTotalOilCardInfo().then(res => {
|
||||
if (res.code == 20000) {
|
||||
this.userTotal = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
getTotalOilCardInfo() {
|
||||
accountApi.getTotalOilCardInfo().then(res => {
|
||||
if (res.code == 20000) {
|
||||
this.userTotal = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
getMoneyDetail(card, index) {
|
||||
let data2 = {
|
||||
currentPage: this.cardList[index].currentPage,
|
||||
index: this.cardList[index].historyList.length ? this.cardList[index].historyList.length : 0,
|
||||
pageSize: 20,
|
||||
params: {
|
||||
id: card.id,
|
||||
oilCardType: card.oilCardType
|
||||
}
|
||||
}
|
||||
console.log('++++++++++++++')
|
||||
console.log(data2)
|
||||
console.log('++++++++++++++')
|
||||
accountApi.getOilCardRecordByPage(data2).then(res => {
|
||||
console.log('++++++++++++++')
|
||||
console.log(res)
|
||||
console.log('++++++++++++++')
|
||||
if (res.code == 20000) {
|
||||
if (res.data.list.length < 20) {
|
||||
this.cardList[index].loadStatus = 'nomore'
|
||||
} else {
|
||||
this.cardList[index].loadStatus = 'more'
|
||||
this.cardList[index].currentPage++
|
||||
}
|
||||
// this.cardList[index].historyList = []
|
||||
|
||||
if(this.cardList[index].currentPage!==1){
|
||||
this.cardList[index].historyList = this.cardList[index].historyList.concat(res.data.list)
|
||||
} else{
|
||||
this.cardList[index].historyList = res.data.list
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
getCards() {
|
||||
accountApi.getUserAccount().then(res => {
|
||||
if (res.code == 20000) {
|
||||
if (res.data.length > 0) {
|
||||
this.cardList = res.data
|
||||
this.cardList.forEach(item => {
|
||||
this.$set(item,'currentPage',1)
|
||||
this.$set(item,'loadStatus','more')
|
||||
this.$set(item,'historyList',[])
|
||||
})
|
||||
console.log(this.cardList)
|
||||
setTimeout(() => {
|
||||
this.getMoneyDetail(this.cardList[0], 0)
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
DotStyle(e) {
|
||||
this.dotStyle = e.detail.value
|
||||
},
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
this.getMoneyDetail(this.cardList[this.cardCur], this.cardCur)
|
||||
},
|
||||
// towerSwiper
|
||||
// 初始化towerSwiper
|
||||
TowerSwiper(name) {
|
||||
let list = this[name];
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
|
||||
list[i].mLeft = i - parseInt(list.length / 2)
|
||||
}
|
||||
this.swiperList = list
|
||||
},
|
||||
|
||||
// towerSwiper触摸开始
|
||||
TowerStart(e) {
|
||||
this.towerStart = e.touches[0].pageX
|
||||
|
||||
},
|
||||
|
||||
// towerSwiper计算方向
|
||||
TowerMove(e) {
|
||||
this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
|
||||
},
|
||||
|
||||
// towerSwiper计算滚动
|
||||
TowerEnd(e) {
|
||||
let direction = this.direction;
|
||||
let list = this.swiperList;
|
||||
if (direction == 'right') {
|
||||
let mLeft = list[0].mLeft;
|
||||
let zIndex = list[0].zIndex;
|
||||
for (let i = 1; i < this.swiperList.length; i++) {
|
||||
this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
|
||||
this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
|
||||
}
|
||||
this.swiperList[list.length - 1].mLeft = mLeft;
|
||||
this.swiperList[list.length - 1].zIndex = zIndex;
|
||||
} else {
|
||||
let mLeft = list[list.length - 1].mLeft;
|
||||
let zIndex = list[list.length - 1].zIndex;
|
||||
for (let i = this.swiperList.length - 1; i > 0; i--) {
|
||||
this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
|
||||
this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
|
||||
}
|
||||
this.swiperList[0].mLeft = mLeft;
|
||||
this.swiperList[0].zIndex = zIndex;
|
||||
}
|
||||
this.direction = ""
|
||||
this.swiperList = this.swiperList
|
||||
},
|
||||
},
|
||||
filters: {
|
||||
moneyFormat(value) {
|
||||
if (value) {
|
||||
return value.toFixed(2)
|
||||
} else {
|
||||
return '0.00'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.boxsingForCard{
|
||||
position: relative;
|
||||
}
|
||||
.inCard{
|
||||
position: absolute;
|
||||
right: 11%;
|
||||
bottom: 17%;
|
||||
width: 140rpx;
|
||||
height: 55rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
color: red;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.tower-swiper .tower-item {
|
||||
transform: scale(calc(0.5 + var(--index) / 10));
|
||||
margin-left: calc(var(--left) * 100upx - 150upx);
|
||||
z-index: var(--index);
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
width: 750upx;
|
||||
min-height: 115rpx;
|
||||
}
|
||||
|
||||
.move-top {
|
||||
margin-top: -110rpx;
|
||||
}
|
||||
|
||||
.yu-tag-right {
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-radius: 0 0 0 12px;
|
||||
background-color: #FF6D6E !important;
|
||||
color: #fff;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.inner-card {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.opacity-half {
|
||||
opacity: 0.2;
|
||||
}
|
||||
</style>
|
||||
542
BagMoney/pages/oilCards/oliout.vue
Normal file
542
BagMoney/pages/oilCards/oliout.vue
Normal file
@@ -0,0 +1,542 @@
|
||||
<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>
|
||||
289
BagMoney/pages/reCharge/reCharge.vue
Normal file
289
BagMoney/pages/reCharge/reCharge.vue
Normal file
@@ -0,0 +1,289 @@
|
||||
<template>
|
||||
<view>
|
||||
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
|
||||
<block slot="backText">返回</block>
|
||||
<block slot="content">油卡中心</block>
|
||||
</cu-custom>
|
||||
<view class="">
|
||||
<view class="placeholder bg-main-oil">
|
||||
|
||||
</view>
|
||||
<view class="move-top">
|
||||
<view class="" v-for="item in cardList" :key="item.accountCardCode">
|
||||
<oil-card :card="item"></oil-card>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="g-shadow padding margin radius">
|
||||
<text class=" padding-left text-df">充值金额</text>
|
||||
<view class="cu-form-group">
|
||||
<input type="digit" placeholder="请输入金额" v-model="reChargeMoney" name="input"></input>
|
||||
<view class="text-xxl">元</view>
|
||||
</view>
|
||||
<view class="grid col-3 padding-sm">
|
||||
<view v-for="(item,index) in checkbox" class="padding-xs" :key="index">
|
||||
<button class="cu-btn red lg block" :class="item.checked?'bg-red':'line-red'" @tap="ChooseCheckbox"
|
||||
:data-value="item.value"> {{item.name}}
|
||||
<view class="cu-tag sm round" :class="item.checked?'bg-white text-red':'bg-red'"
|
||||
v-if="item.hot">HOT</view>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="transactions margin radius">
|
||||
<view class="bottom-btn padding-top-lg">
|
||||
<button class="text-center bg-red text-block" @tap="reCharge">立即充油</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-modal" :class="modalName=='success'?'show':''">
|
||||
<view class="cu-dialog">
|
||||
<view class="cu-bar bg-white justify-end">
|
||||
<view class="content">充油金额到账成功</view>
|
||||
<view class="action" @tap="modalName=''">
|
||||
<text class="cuIcon-close text-red"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding-bottom-lg">
|
||||
<view class="bg-img padding-left padding-right flex align-center"
|
||||
:style="'background-image: url('+imgURL+'recharge-success.png);'">
|
||||
<view class="padding-xl text-left text-white">
|
||||
<view class=" text-bold">
|
||||
<!-- <text v-show="cardList[0].oilCardType==2">
|
||||
直属油卡
|
||||
</text>
|
||||
<text v-show="cardList[0].oilCardType==3">
|
||||
外请油卡
|
||||
</text>
|
||||
<text v-show="cardList[0].oilCardType==1">
|
||||
个人油卡
|
||||
</text> -->
|
||||
</view>
|
||||
<view class="padding-bottom-xs padding-top-lg card-color padding-bottom text-xxl">
|
||||
{{cardList[0].accountCardCode|cardNoFormat}}
|
||||
</view>
|
||||
<view class="padding-bottom-xs text-sm text-black text-ABC">
|
||||
<!-- {{card.companyName}} -->
|
||||
Personal oil card
|
||||
</view>
|
||||
|
||||
<view class="padding-xs text-lg">
|
||||
<text class="text-sm">账户余额:</text>
|
||||
<text class="text-xl text-bold padding-left-xs" v-if="cardList[0].shareCompanyQuota==1">
|
||||
共享余额
|
||||
</text>
|
||||
<text class="text-sm padding-left-xs" v-else>
|
||||
{{lastMoney|moneyFormat}} 元
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-center">
|
||||
此时余额为 <text class="text-red padding text-lg text-bold">{{lastMoney|moneyFormat}}元</text>
|
||||
<view class="">
|
||||
如有疑问，请联系在线客服
|
||||
</view>
|
||||
<view class="padding margin padding-bottom-0 margin-bottom-0 padding-top-0">
|
||||
<button @tap="backIndex" class=" line-red">关闭</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import accountApi from '@/api/account.js'
|
||||
import oilCard from '../../components/oil-card/oil-card.vue'
|
||||
export default {
|
||||
components: {
|
||||
oilCard
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cooling: false,
|
||||
modalName: '',
|
||||
imgURL: this.global.imgURL,
|
||||
cardCur: 0,
|
||||
checkbox: [{
|
||||
value: 100,
|
||||
name: '100元',
|
||||
checked: false,
|
||||
hot: false,
|
||||
}, {
|
||||
value: 200,
|
||||
name: '200元',
|
||||
checked: false,
|
||||
hot: false,
|
||||
}, {
|
||||
value: 500,
|
||||
name: '500元',
|
||||
checked: false,
|
||||
hot: false,
|
||||
}, {
|
||||
value: 1000,
|
||||
name: '1000元',
|
||||
checked: false,
|
||||
hot: false,
|
||||
}, {
|
||||
value: 2000,
|
||||
name: '2000元',
|
||||
checked: false,
|
||||
hot: false,
|
||||
}, {
|
||||
value: 5000,
|
||||
name: '5000元',
|
||||
checked: false,
|
||||
hot: false,
|
||||
}],
|
||||
|
||||
reChargeMoney: '',
|
||||
cardList: [],
|
||||
lastMoney: '',
|
||||
outTradeNo: '' // 商户订单号
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.getCards()
|
||||
// 初始化towerSwiper 传已有的数组名即可
|
||||
},
|
||||
filters:{
|
||||
moneyFormat(value) {
|
||||
if (value) {
|
||||
return value.toFixed(2)
|
||||
} else {
|
||||
return '0.00'
|
||||
}
|
||||
},
|
||||
cardNoFormat(value) {
|
||||
if (value) {
|
||||
return value.replace(/(.{4})/g,'$1 ')
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
reCharge() {
|
||||
if (!this.cooling) {
|
||||
this.cooling = true
|
||||
let payData = {
|
||||
openId: uni.getStorageSync('openid'),
|
||||
unionId: uni.getStorageSync('unionid'),
|
||||
appId: "wx7a939c19b270cc3d",
|
||||
rechargeSource: 'WECHAT_APPETS',
|
||||
rechargeAmount: this.reChargeMoney + '',
|
||||
createSource: 'XOIL_DRIVER_COMPANY_WECHAT_APPLET',
|
||||
payCode: 'WECHAT_MP',
|
||||
}
|
||||
accountApi.getUserPayInfo(payData).then(res => {
|
||||
if (res.code == 20000) {
|
||||
let reqPay = res.data.baseWxOrderVo
|
||||
this.outTradeNo = res.data.outTradeNo
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay',
|
||||
...reqPay,
|
||||
success: (res) => {
|
||||
this.getPayStatus(this.outTradeNo)
|
||||
this.getLastMoney()
|
||||
this.getCards()
|
||||
// console.log('success:' + JSON.stringify(res));
|
||||
},
|
||||
fail: function(err) {
|
||||
// console.log('fail:' + JSON.stringify(err));
|
||||
},
|
||||
complete: () => {
|
||||
this.cooling = fasle
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}else{
|
||||
uni.showToast({
|
||||
icon:'none',
|
||||
title:'操作频繁'
|
||||
})
|
||||
}
|
||||
},
|
||||
backIndex() {
|
||||
uni.navigateBack({
|
||||
|
||||
})
|
||||
},
|
||||
getLastMoney() {
|
||||
// 查最新余额
|
||||
accountApi.getCustomerAccount().then(res => {
|
||||
if (res.code == 20000) {
|
||||
this.lastMoney = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
getPayStatus(id) {
|
||||
accountApi.pollingPayResult(id).then(res => {
|
||||
if (res.code == 20000) {
|
||||
// 提示到账成功
|
||||
this.modalName = 'success'
|
||||
}
|
||||
})
|
||||
},
|
||||
getCards() {
|
||||
accountApi.getUserAccount().then(res => {
|
||||
if (res.code == 20000) {
|
||||
this.cardList = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
ChooseCheckbox(e) {
|
||||
let items = this.checkbox;
|
||||
let values = e.currentTarget.dataset.value;
|
||||
this.reChargeMoney = values
|
||||
for (let i = 0, lenI = items.length; i < lenI; ++i) {
|
||||
if (items[i].value == values) {
|
||||
items[i].checked = !items[i].checked;
|
||||
} else {
|
||||
items[i].checked = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tower-swiper .tower-item {
|
||||
transform: scale(calc(0.5 + var(--index) / 10));
|
||||
margin-left: calc(var(--left) * 100upx - 150upx);
|
||||
z-index: var(--index);
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
width: 750upx;
|
||||
min-height: 115rpx;
|
||||
}
|
||||
|
||||
.move-top {
|
||||
margin-top: -110rpx;
|
||||
}
|
||||
|
||||
.yu-tag-right {
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-radius: 0 0 0 12px;
|
||||
background-color: #FF6D6E !important;
|
||||
color: #fff;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.inner-card {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.opacity-half {
|
||||
opacity: 0.2;
|
||||
}
|
||||
.card-color{
|
||||
color: #F5E558;
|
||||
}
|
||||
</style>
|
||||
67
BagMoney/pages/wallet/record/record.vue
Normal file
67
BagMoney/pages/wallet/record/record.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<view class="page-content my-bg">
|
||||
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
|
||||
<block slot="backText">返回</block>
|
||||
<block slot="content">转入记录</block>
|
||||
</cu-custom>
|
||||
|
||||
<view class="margin bg-white radius main-money ">
|
||||
<view class="padding-xs flex align-center" @tap="copy">
|
||||
<view class="flex-sub text-center padding-top">
|
||||
<view class="text-center">星油余额</view>
|
||||
<view class=" text-xxl padding-top-xs">
|
||||
<text class="text-price text-red ">
|
||||
80.00
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding margin-left margin-right flex flex-direction">
|
||||
<button class="cu-btn bg-main-oil oil-main-btn-color oil-main-color lg">
|
||||
转入
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="margin">
|
||||
<view class="padding-top flex padding-left-xs padding-bottom">
|
||||
<view class="flex-sub">
|
||||
<text>最近的五笔交易</text>
|
||||
</view>
|
||||
<view class="flex-sub text-right padding-right-xs">
|
||||
<text class="text-gray">更多</text>
|
||||
|
||||
<text class="cuIcon-right text-gray"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-list menu">
|
||||
<view class="cu-item">
|
||||
<view class="content">
|
||||
微信充值
|
||||
</view>
|
||||
<view class="action">
|
||||
￥ 0.20
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-content {
|
||||
min-height: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user