368 lines
11 KiB
Vue
368 lines
11 KiB
Vue
<template>
|
|
<view>
|
|
<view class="favourTitle">
|
|
<image class="favourTitle-img" src="https://card.ysd-bs.com/storage/materials/2021/09/01/favour_title.png" mode="widthFix"></image>
|
|
</view>
|
|
|
|
<view class="favourBack" v-if="typeArr[typeIndex]">
|
|
<image class="favourBack-img" src="https://card.ysd-bs.com/storage/materials/2021/09/01/favour_back.png" mode="widthFix"></image>
|
|
<view class="favourBack-cont-title">我的{{ typeArr[typeIndex].value }}</view>
|
|
<view class="favourBack-cont">
|
|
<view class="favourBack-cont-name">{{ typeArr[typeIndex].value }}</view>
|
|
<view class="favourBack-cont-number">
|
|
<text>{{ typeArr[typeIndex].key == 'silver' ? account.silver : account.drill }}</text>元
|
|
</view>
|
|
</view>
|
|
|
|
<view class="favourCont">
|
|
<view class="favourBlack">
|
|
<view class="favourCont-title">赠好友消费红包</view>
|
|
<form @submit="formSubmit">
|
|
<view class="favourCont-label">
|
|
<view class="favourCont-name">账户类型</view>
|
|
<picker class="favourCont-picker" :range="typeArr" :range-key="'value'" @change="typeBind">
|
|
<view class="tabs-text">
|
|
{{ typeArr[typeIndex].value }}
|
|
</view>
|
|
<image src="/static/icon/rightsArrow.png"></image>
|
|
</picker>
|
|
</view>
|
|
<view class="favourCont-label">
|
|
<view class="favourCont-name">好友手机号</view>
|
|
<view class="favourCont-check">
|
|
<input type="number" @input="bindKeyInput" placeholder="输入好友手机号" />
|
|
<view class="favourCont-check-btn" @tap="checkTel">校验号码</view>
|
|
</view>
|
|
</view>
|
|
<view class="favourCont-label">
|
|
<view class="favourCont-name">转账金额</view>
|
|
<input type="digit" name="amount" placeholder="请输入转账金额" />
|
|
</view>
|
|
<view class="favourCont-label">
|
|
<view class="favourCont-name">支付密码</view>
|
|
<input type="number" name="paypass" placeholder="请输入支付密码" password />
|
|
</view>
|
|
<button class="favourCont-btn" formType="submit" :disabled="disabled">立即转入</button>
|
|
</form>
|
|
</view>
|
|
<navigator class="favourCont-record" v-if="typeArr[typeIndex]" hover-class="none" :url="'/pages/account/account?type=' + typeArr[typeIndex].key"><text>赠予记录</text>
|
|
</navigator>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 校验手机号弹出 -->
|
|
<view class="popTel-back" v-if="popShow"></view>
|
|
<view class="popTel" v-if="popShow">
|
|
<view class="popTel-title">当前转入的账户信息</view>
|
|
<view class="popTel-cont">
|
|
<image class="popTel-head" :src="userInfo.avatar"></image>
|
|
<view class="popTel-name">{{ userInfo.nickname }}</view>
|
|
</view>
|
|
<view class="popTel-btn" @tap="popHide">知道了</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { transfers, ajaxTel, transfersForm } from '@/apis/interfaces/user'
|
|
export default {
|
|
data() {
|
|
return {
|
|
account : '', //账户积分
|
|
typeArr : [], //转账类型
|
|
typeIndex: 0, //转账下标
|
|
userInfo : '', //转账用户信息
|
|
mobile : '', //转账手机号
|
|
disabled : false, //支付按钮状态
|
|
popShow : false //校验弹出层
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
// 获取账户下拉列表
|
|
this.accountList();
|
|
},
|
|
methods: {
|
|
// 账户下拉列表
|
|
accountList() {
|
|
transfers().then(res=>{
|
|
this.account = res.account
|
|
this.typeArr = res.accounts
|
|
}).catch(err=>{})
|
|
},
|
|
|
|
// 账户下拉选择
|
|
typeBind(e) {
|
|
this.typeIndex = e.detail.value
|
|
},
|
|
|
|
// 转入的手机号
|
|
bindKeyInput(val){
|
|
this.mobile = val.detail.value
|
|
},
|
|
|
|
// 校验手机号码
|
|
checkTel() {
|
|
ajaxTel(this.mobile).then(res=>{
|
|
this.userInfo = res
|
|
this.popShow = !this.popShow
|
|
}).catch(err=>{})
|
|
},
|
|
|
|
// 关闭校验弹出
|
|
popHide() {
|
|
this.popShow = !this.popShow
|
|
},
|
|
|
|
// 提交表单
|
|
formSubmit(e) {
|
|
// 检查用户登录状态
|
|
const Paypass = uni.getStorageSync("hasPaypass")
|
|
if(Paypass == false) {
|
|
uni.showModal({
|
|
title : '提示',
|
|
content : '抱歉，您还没有设置支付密码',
|
|
success : res=> {
|
|
if (res.confirm) {
|
|
uni.navigateTo({
|
|
url: '/pages/payPassword/setup?source=favourUrl'
|
|
})
|
|
} else if (res.cancel) {}
|
|
}
|
|
})
|
|
return
|
|
}
|
|
let newAmount = e.detail.value.amount,
|
|
newMobile = this.mobile,
|
|
newPaypass = e.detail.value.paypass,
|
|
newType = this.typeArr[this.typeIndex].key
|
|
|
|
transfersForm({
|
|
mobile: newMobile,
|
|
type: newType,
|
|
amount: newAmount,
|
|
paypass: newPaypass
|
|
}).then(res=>{
|
|
this.disabled = true
|
|
uni.showToast({
|
|
title: '转入成功',
|
|
})
|
|
setTimeout(()=>{
|
|
uni.redirectTo({
|
|
url: "/pages/account/account?type=" + newType
|
|
})
|
|
},2000)
|
|
}) .catch(err=>{
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon:'none'
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background-color: #000000;
|
|
}
|
|
|
|
.favourTitle {
|
|
text-align: center;
|
|
margin: 40rpx 0;
|
|
}
|
|
|
|
.favourBack{
|
|
position: relative;
|
|
width: 100vw;
|
|
}
|
|
|
|
.favourBack-img {
|
|
width: 100vw;
|
|
display: block;
|
|
}
|
|
|
|
.favourBack-cont {
|
|
position: absolute;
|
|
top: 100rpx;
|
|
left: 0;
|
|
padding-left: 14%;
|
|
z-index: 1;
|
|
color: #606060;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.favourBack-cont-number {
|
|
color: #000000;
|
|
width: 100%;
|
|
margin-top: 20rpx;
|
|
text {
|
|
font-size: 50rpx;
|
|
font-weight: 600;
|
|
padding-right: 10rpx;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.favourBack-cont-title {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
.favourCont {
|
|
background-color: #ffffff;
|
|
padding: 40rpx 50rpx;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
border-radius: 5rpx 5rpx 0 0;
|
|
}
|
|
|
|
.favourBlack {
|
|
background-color: #e9e9e9;
|
|
padding: 40rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 45rpx;
|
|
}
|
|
|
|
.favourCont-record {
|
|
line-height: 90rpx;
|
|
text-align: center;
|
|
font-size: 34rpx;
|
|
}
|
|
|
|
.favourCont-title {
|
|
font-size: 45rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.favourCont-label {
|
|
display: flex;
|
|
margin-top: 40rpx;
|
|
font-size: 28rpx;
|
|
input {
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.favourCont-check,
|
|
.favourCont-picker,
|
|
.favourCont-label>input {
|
|
background-color: #c9c9c9;
|
|
display: flex;
|
|
width: calc(100% - 160rpx);
|
|
padding: 0 20rpx;
|
|
box-sizing: border-box;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
}
|
|
|
|
.favourCont-picker {
|
|
position: relative;
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 20rpx;
|
|
z-index: 2;
|
|
}
|
|
input {
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
}
|
|
}
|
|
|
|
.favourCont-check input,
|
|
.favourCont-picker input {
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
}
|
|
|
|
.favourCont-name {
|
|
width: 160rpx;
|
|
line-height: 80rpx;
|
|
}
|
|
|
|
|
|
.favourCont-check-btn {
|
|
width: 150rpx;
|
|
text-align: center;
|
|
background-color: #a1a1a1;
|
|
line-height: 60rpx;
|
|
height: 60rpx;
|
|
margin-top: 10rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.favourCont-btn {
|
|
width: 100% !important;
|
|
background-color: #dbc190;
|
|
margin-top: 40rpx;
|
|
border-radius: 60rpx;
|
|
}
|
|
|
|
.tabs-text {
|
|
width: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
padding-left: 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* 校验弹出层 */
|
|
.popTel-back {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
background: rgba(0, 0, 0, .7);
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: 10;
|
|
}
|
|
|
|
.popTel {
|
|
position: fixed;
|
|
left: 140rpx;
|
|
right: 140rpx;
|
|
top: 30%;
|
|
z-index: 11;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.popTel-title {
|
|
font-size: 32rpx;
|
|
background-color: #ff8e65;
|
|
color: #fff;
|
|
line-height: 80rpx;
|
|
}
|
|
|
|
.popTel-cont {
|
|
padding: 60rpx 0;
|
|
}
|
|
|
|
.popTel-head {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
margin: 0 auto 20rpx;
|
|
border: #ff8e65 solid 2rpx;
|
|
}
|
|
|
|
.popTel-btn {
|
|
border-top: 2rpx solid #dedede;
|
|
line-height: 90rpx;
|
|
color: #ff8e65;
|
|
font-size: 30rpx;
|
|
}
|
|
</style>
|