更新
This commit is contained in:
xiaozhiyong
240
components/transBlock/index.vue
Normal file
240
components/transBlock/index.vue
Normal file
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<view>
|
||||
<uni-popup ref="indexPopup" type="bottom">
|
||||
<view class="trans-block">
|
||||
<view class="title">请输入赠卡金额</view>
|
||||
<text>￥</text><input v-model="params.occurAmount" class="uni-input" type="digit"
|
||||
:placeholder=" '最多可以赠送'+ info.balance + '元'" />
|
||||
<button @click="sendTextMessage">确认赠卡</button>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<uni-popup ref="smscodePopup" type="center">
|
||||
<view class="poput_tip">
|
||||
<view :style="'background-image: url('+popupbg+ ');'" class="popup_header">短信身份验证</view>
|
||||
<view style="margin: 20rpx auto;width: 90%;">转出验证：本次转出需要短信确认，验证码 已发送至您的手机
|
||||
{{phoneHandle(this.user.userPhone)}}
|
||||
</view>
|
||||
<xt-verify-code class="code" v-model="params.code" @confirm="submit"></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="successPopupt" 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="$refs.successPopupt.close()" class="oliout_butten"
|
||||
style="width:60%; border-radius: 50rpx;">确认</button>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import serve from '@/api/account.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
popupbg: 'https://xoi-support.oss-cn-hangzhou.aliyuncs.com/web/cuscomtrac/popupbg.png',
|
||||
time: 0,
|
||||
price: '',
|
||||
info: {},
|
||||
user: uni.getStorageSync('user') || {},
|
||||
params: {
|
||||
occurAmount: '',
|
||||
code: '',
|
||||
verifyCodeToken: '',
|
||||
billType: 'OIL_DONATION',
|
||||
createSource: 'XOIL_DRIVER_WECHAT_APPLET',
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
_open(item) {
|
||||
if (item) {
|
||||
console.log('itemitemitemitem', item)
|
||||
this.params.occurAmount = ''
|
||||
this.info = item
|
||||
this.$refs.indexPopup.open()
|
||||
}
|
||||
},
|
||||
sendTextMessage() {
|
||||
if (!this.submitCheck()) return
|
||||
|
||||
if (this.time === 0) {
|
||||
this.params.code = ''
|
||||
this.params.verifyCodeToken = ''
|
||||
serve.giveCard({
|
||||
phone: this.user.userPhone
|
||||
}).then(res => {
|
||||
this.time = 60
|
||||
this.params.verifyCodeToken = res.data.verifyCodeToken
|
||||
this.timefn()
|
||||
this.$refs.smscodePopup.open()
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
submitCheck() {
|
||||
let {
|
||||
occurAmount
|
||||
} = this.params
|
||||
if (!occurAmount) {
|
||||
uni.showToast({
|
||||
title: '请输入赠送金额',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (occurAmount > this.info.balance) {
|
||||
uni.showToast({
|
||||
title: '超过最多赠送金额',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (occurAmount < 5) {
|
||||
uni.showToast({
|
||||
title: '赠送金额不可低于5元',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
return true
|
||||
},
|
||||
submit() {
|
||||
let {
|
||||
giveCustomerId, //收款方
|
||||
companyId, //付款方
|
||||
accountCardCode //付款方
|
||||
} = this.info
|
||||
|
||||
serve.oilCustomerAccountRecord({
|
||||
giveCustomerId,
|
||||
givePhone: '',
|
||||
companyId,
|
||||
payerCustomerId: this.user.id,
|
||||
accountCardCode,
|
||||
...this.params
|
||||
}).then(res => {
|
||||
this.$refs.indexPopup.close()
|
||||
this.$refs.smscodePopup.close()
|
||||
this.$refs.successPopupt.open()
|
||||
this.$emit('reloadCard')
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
phoneHandle(e) {
|
||||
return e.substr(0, 3) + "****" + e.substr(7);
|
||||
},
|
||||
|
||||
timefn() {
|
||||
if (this.time !== 0) {
|
||||
this.time--
|
||||
setTimeout(() => {
|
||||
this.timefn()
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.poput_tip {
|
||||
width: 85vw;
|
||||
height: 40vh;
|
||||
background-color: #F8F8F8;
|
||||
border-radius: 15rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.popup_header {
|
||||
height: 20%;
|
||||
width: 100%;
|
||||
background-color: #FE0505;
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-size: 100% 30vh;
|
||||
}
|
||||
|
||||
.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;
|
||||
// }
|
||||
|
||||
.oliout_butten {
|
||||
width: 90vw;
|
||||
margin: 0 auto;
|
||||
background-color: #FE0505;
|
||||
margin-top: 60rpx;
|
||||
color: #F0F0F0;
|
||||
}
|
||||
|
||||
.trans-block {
|
||||
padding: 54rpx 43rpx 0 63rpx;
|
||||
width: 100%;
|
||||
height: 679rpx;
|
||||
background: #FFF;
|
||||
border-radius: 15rpx 15rpx 0 0;
|
||||
|
||||
.title {
|
||||
margin-bottom: 35rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 550;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
>text {
|
||||
position: relative;
|
||||
top: -10rpx;
|
||||
font-size: 42rpx;
|
||||
font-weight: 550;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
>input {
|
||||
display: inline-block;
|
||||
margin-left: 10rpx;
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
>button {
|
||||
margin-top: 320rpx;
|
||||
width: 441rpx;
|
||||
height: 89rpx;
|
||||
color: #fff;
|
||||
font-size: 34rpx;
|
||||
text-align: center;
|
||||
background: #FF6700;
|
||||
border-radius: 10rpx
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user