86 lines
2.2 KiB
Vue
86 lines
2.2 KiB
Vue
|
<template>
|
|||
|
|
<view class="main">
|
|||
|
|
<view class="top flex flex-center flex-column">
|
|||
|
|
<text class="font46 title">绑定支付宝</text>
|
|||
|
|
<text class="font32">请绑定姓名本人的支付宝账号</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="form">
|
|||
|
|
<view class="form-item flex flex-align-center">
|
|||
|
|
<text class="label font32">姓名：</text>
|
|||
|
|
<input type="text" placeholder="真实姓名" :disabled="isView" v-model="paymentInfo.name">
|
|||
|
|
</view>
|
|||
|
|
<view class="form-item flex flex-align-center">
|
|||
|
|
<text class="label font32">账号：</text>
|
|||
|
|
<input type="text" placeholder="支付宝账号" :disabled="isView" v-model="paymentInfo.account">
|
|||
|
|
</view>
|
|||
|
|
<view class="form-item flex flex-column">
|
|||
|
|
<text class="font32">收款二维码：</text>
|
|||
|
|
<view class="flex flex-center add" v-if="!imgUrl" @tap="selectImg">
|
|||
|
|
<text class="iconfont icon"></text>
|
|||
|
|
</view>
|
|||
|
|
<image :src="imgUrl" mode="" v-if="imgUrl" @tap="selectImg"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="form-item flex flex-align-center" v-if="!isView">
|
|||
|
|
<text class="label font32">密码：</text>
|
|||
|
|
<input type="password" placeholder="登录密码" v-model="password">
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<button type="primary" class="bg-base" v-if="!isView" :loading="loading" :disabled="loading" @tap="onSave">确定</button>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import mix from "./mix.js"
|
|||
|
|
export default {
|
|||
|
|
mixins: [mix],
|
|||
|
|
data(){
|
|||
|
|
return {
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
onSave() {
|
|||
|
|
if (!this.paymentInfo.name) return this.$msg("请输入姓名")
|
|||
|
|
if (!this.paymentInfo.account) return this.$msg("请输入支付宝账号")
|
|||
|
|
if (!this.imgUrl) return this.$msg("请上传支付宝收款码")
|
|||
|
|
this.onSubmit()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
page{
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
.main{
|
|||
|
|
padding: 30rpx 50rpx;
|
|||
|
|
.top{
|
|||
|
|
margin-top: 40rpx;
|
|||
|
|
.title{
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.form{
|
|||
|
|
margin-top: 100rpx;
|
|||
|
|
&-item{
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
border-bottom: 2rpx solid #eee;
|
|||
|
|
margin-bottom: 50rpx;
|
|||
|
|
.label{
|
|||
|
|
width: 120rpx;
|
|||
|
|
}
|
|||
|
|
.add{
|
|||
|
|
width: 300rpx;
|
|||
|
|
height: 300rpx;
|
|||
|
|
border: 2rpx solid #cdcdcd;
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
.icon{
|
|||
|
|
font-size: 60rpx;
|
|||
|
|
color: #cdcdcd;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|