|
@@ -0,0 +1,281 @@
|
|
|
|
+<template>
|
|
|
|
+ <view class="login-wrapper" :style="colorStyle">
|
|
|
|
+ <view class="whiteBg">
|
|
|
|
+ <view class="list">
|
|
|
|
+ <view class="item">
|
|
|
|
+ <view class="acea-row row-middle">
|
|
|
|
+ <image src="../static/bankcard.png" style="width: 34rpx;" mode="widthFix"></image>
|
|
|
|
+ <input type="text" :placeholder="$t(`输入银行卡号`)" v-model="bank_code" />
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item">
|
|
|
|
+ <view class="acea-row row-middle">
|
|
|
|
+ <image src="../static/name.png" style="width: 34rpx;" mode="widthFix"></image>
|
|
|
|
+ <input type="text" :placeholder="$t(`姓名`)" v-model="payer_name" />
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item">
|
|
|
|
+ <view class="acea-row row-middle">
|
|
|
|
+ <image src="../static/bankcard.png" style="width: 34rpx; " mode="widthFix"></image>
|
|
|
|
+ <input type="text" :placeholder="$t(`身份证号`)" v-model="id_card" />
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item">
|
|
|
|
+ <view class="acea-row row-middle">
|
|
|
|
+ <image src="../static/phone_1.png" style="width: 24rpx; " mode="widthFix"></image>
|
|
|
|
+ <input type="text" :placeholder="$t(`输入手机号码`)" v-model="account" :maxlength="11" />
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item">
|
|
|
|
+ <view class="acea-row row-middle">
|
|
|
|
+ <image src="../static/code_2.png" style="width: 28rpx;" mode="widthFix"></image>
|
|
|
|
+ <input type="text" :placeholder="$t(`填写验证码`)" :maxlength="6" class="codeIput"
|
|
|
|
+ v-model="captcha" />
|
|
|
|
+ <button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''" @click="code">
|
|
|
|
+ {{ text }}
|
|
|
|
+ </button>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="logon" v-if="!bindCard" @click="loginMobile">{{$t(`绑定`)}}</view>
|
|
|
|
+ <view class="logon" v-else @click="cancelBind">{{$t(`取消签约`)}}</view>
|
|
|
|
+ <!-- TODO -->
|
|
|
|
+ </view>
|
|
|
|
+ <Verify @success="success" :captchaType="captchaType" :imgSize="{ width: '330px', height: '155px' }"
|
|
|
|
+ ref="verify"></Verify>
|
|
|
|
+ </view>
|
|
|
|
+</template>
|
|
|
|
+<script>
|
|
|
|
+ import sendVerifyCode from "@/mixins/SendVerifyCode";
|
|
|
|
+ import {
|
|
|
|
+ saveCardBind,
|
|
|
|
+ bindCardVerify,
|
|
|
|
+ getCodeApi,
|
|
|
|
+ getUserInfo,
|
|
|
|
+ getCardBindStatus,
|
|
|
|
+ bankCancel
|
|
|
|
+ } from "@/api/user";
|
|
|
|
+ import colors from '@/mixins/color.js';
|
|
|
|
+ import Verify from '../components/verify/index.vue';
|
|
|
|
+ export default {
|
|
|
|
+ name: "Login",
|
|
|
|
+ components: {
|
|
|
|
+ Verify
|
|
|
|
+ },
|
|
|
|
+ mixins: [sendVerifyCode,colors],
|
|
|
|
+ data: function() {
|
|
|
|
+ return {
|
|
|
|
+ bank_code: "",
|
|
|
|
+ id_card: "",
|
|
|
|
+ payer_name: "",
|
|
|
|
+ account: "",
|
|
|
|
+ password: "",
|
|
|
|
+ captcha: "",
|
|
|
|
+ type: "login",
|
|
|
|
+ // 用户信息
|
|
|
|
+ userInfo:{},
|
|
|
|
+ bindCard:false,
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ onLoad() {
|
|
|
|
+ this.getCardBindStatus();
|
|
|
|
+ this.getUserInfo();
|
|
|
|
+ },
|
|
|
|
+ mounted: function() {
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ // 解约
|
|
|
|
+ cancelBind(){
|
|
|
|
+ bankCancel().then(res => {
|
|
|
|
+ that.$util.Tips({
|
|
|
|
+ title: "签约已取消"
|
|
|
|
+ });
|
|
|
|
+ this.bindCard=false
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ /**
|
|
|
|
+ * 获取个人用户信息
|
|
|
|
+ */
|
|
|
|
+ getUserInfo: function() {
|
|
|
|
+ let that = this;
|
|
|
|
+ getUserInfo().then(res => {
|
|
|
|
+ that.userInfo = res.data;
|
|
|
|
+ that.bank_code=that.userInfo.bank_code;
|
|
|
|
+ that.id_card=that.userInfo.bank_id;
|
|
|
|
+ that.payer_name=that.userInfo.bank_name;
|
|
|
|
+ that.account=that.userInfo.bank_mobile;
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ success(data) {
|
|
|
|
+ this.$refs.verify.hide()
|
|
|
|
+ this.getCode(data);
|
|
|
|
+ },
|
|
|
|
+ code() {
|
|
|
|
+ let that = this
|
|
|
|
+ if (!that.account) return that.$util.Tips({
|
|
|
|
+ title: that.$t(`请填写手机号码`)
|
|
|
|
+ });
|
|
|
|
+ if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
|
|
|
|
+ title: that.$t(`请输入正确的手机号码`)
|
|
|
|
+ });
|
|
|
|
+ this.$refs.verify.show()
|
|
|
|
+ },
|
|
|
|
+ async loginMobile() {
|
|
|
|
+ let that = this;
|
|
|
|
+ if (!that.account) return that.$util.Tips({
|
|
|
|
+ title: that.$t(`请填写手机号码`)
|
|
|
|
+ });
|
|
|
|
+ if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
|
|
|
|
+ title: that.$t(`请输入正确的手机号码`)
|
|
|
|
+ });
|
|
|
|
+ if (!that.captcha) return that.$util.Tips({
|
|
|
|
+ title: that.$t(`请填写验证码`)
|
|
|
|
+ });
|
|
|
|
+ if (!/^[\w\d]+$/i.test(that.captcha)) return that.$util.Tips({
|
|
|
|
+ title: that.$t(`请输入正确的验证码`)
|
|
|
|
+ });
|
|
|
|
+ if (!that.payer_name) return that.$util.Tips({
|
|
|
|
+ title: that.$t(`请填写姓名`)
|
|
|
|
+ });
|
|
|
|
+ if (!that.bank_code) return that.$util.Tips({
|
|
|
|
+ title: that.$t(`请填写银行卡号`)
|
|
|
|
+ });
|
|
|
|
+ if (!that.id_card) return that.$util.Tips({
|
|
|
|
+ title: that.$t(`请填写身份证号`)
|
|
|
|
+ });
|
|
|
|
+ saveCardBind({
|
|
|
|
+ code: that.captcha,
|
|
|
|
+ })
|
|
|
|
+ .then(res => {
|
|
|
|
+ let data = res.data;
|
|
|
|
+ that.getCardBindStatus();
|
|
|
|
+ })
|
|
|
|
+ .catch(res => {
|
|
|
|
+ that.$util.Tips({
|
|
|
|
+ title: res
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ // 获取签约状态
|
|
|
|
+ getCardBindStatus(){
|
|
|
|
+ let that = this;
|
|
|
|
+ getCardBindStatus().then((e)=>{
|
|
|
|
+ console.log(e);
|
|
|
|
+ if(e.data.status=='02'){
|
|
|
|
+ that.$util.Tips({
|
|
|
|
+ title: "已签约"
|
|
|
|
+ });
|
|
|
|
+ that.bindCard = true;
|
|
|
|
+ }
|
|
|
|
+ }).catch((e)=>{
|
|
|
|
+ console.log(e);
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ async getCode(data) {
|
|
|
|
+ let that = this;
|
|
|
|
+ if (!that.account) return that.$util.Tips({
|
|
|
|
+ title: that.$t(`请填写手机号码`)
|
|
|
|
+ });
|
|
|
|
+ if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
|
|
|
|
+ title: that.$t(`请输入正确的手机号码`)
|
|
|
|
+ });
|
|
|
|
+ if (!that.payer_name) return that.$util.Tips({
|
|
|
|
+ title: that.$t(`请填写姓名`)
|
|
|
|
+ });
|
|
|
|
+ if (!that.bank_code) return that.$util.Tips({
|
|
|
|
+ title: that.$t(`请填写银行卡号`)
|
|
|
|
+ });
|
|
|
|
+ if (!that.id_card) return that.$util.Tips({
|
|
|
|
+ title: that.$t(`请填写身份证号`)
|
|
|
|
+ });
|
|
|
|
+ await bindCardVerify({
|
|
|
|
+ mobile: that.account,
|
|
|
|
+ payer_name: that.payer_name,
|
|
|
|
+ bank_code: that.bank_code,
|
|
|
|
+ id_card: that.id_card,
|
|
|
|
+ })
|
|
|
|
+ .then(res => {
|
|
|
|
+ this.sendCode()
|
|
|
|
+ that.$util.Tips({
|
|
|
|
+ title: '验证码已发送'
|
|
|
|
+ });
|
|
|
|
+ })
|
|
|
|
+ .catch(res => {
|
|
|
|
+ that.$util.Tips({
|
|
|
|
+ title: res
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ }
|
|
|
|
+ };
|
|
|
|
+</script>
|
|
|
|
+<style>
|
|
|
|
+ page {
|
|
|
|
+ background: #fff;
|
|
|
|
+ }
|
|
|
|
+</style>
|
|
|
|
+<style lang="scss">
|
|
|
|
+ .code img {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .acea-row.row-middle {
|
|
|
|
+ input {
|
|
|
|
+ margin-left: 20rpx;
|
|
|
|
+ display: block;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .login-wrapper {
|
|
|
|
+ padding: 30rpx;
|
|
|
|
+
|
|
|
|
+ .whiteBg {
|
|
|
|
+
|
|
|
|
+ .list {
|
|
|
|
+ border-radius: 16rpx;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+
|
|
|
|
+ .item {
|
|
|
|
+ border-bottom: 1px solid #F0F0F0;
|
|
|
|
+ background: #fff;
|
|
|
|
+
|
|
|
|
+ .row-middle {
|
|
|
|
+ position: relative;
|
|
|
|
+ padding: 16rpx 45rpx;
|
|
|
|
+
|
|
|
|
+ input {
|
|
|
|
+ flex: 1;
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ height: 80rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .code {
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 30rpx;
|
|
|
|
+ top: 50%;
|
|
|
|
+ color: var(--view-theme);
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
+ transform: translateY(-50%);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .logon {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 86rpx;
|
|
|
|
+ margin-top: 80rpx;
|
|
|
|
+ background-color: var(--view-theme);
|
|
|
|
+ border-radius: 120rpx;
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</style>
|