<template>
    <view class="content">
        <form @submit="issueForm" class="take">
            <view class="take-label">
                <view class="item">
                    <view class="name">
                        <image src="@/static/icons/takeIcon_04.png" mode="widthFix"></image>手机号码
                    </view>
                    <view class="time">{{username}}</view>
                </view>
                <view class="item">
                    <view class="name">
                        <image src="@/static/icons/takeIcon_05.png" mode="widthFix"></image>姓名
                    </view>
                    <input class="entry" maxlength="4" type="text" name="name" placeholder="请输入真实姓名" />
                </view>
                <view class="item">
                    <view class="name">
                        <image src="@/static/icons/takeIcon_06.png" mode="widthFix"></image>银行卡
                    </view>
                    <input class="entry" type="idcard" name="card_no" placeholder="请输入银行卡" />
                </view>
                <view class="item">
                    <view class="name">
                        <image src="@/static/icons/takeIcon_07.png" mode="widthFix"></image>打款凭证
                    </view>
                    <view class="issueNew" @click="openImg()">
                        <image class="issueNew-icon" :src="voucher.showpath || '/static/imgs/cover_img.png'" mode="aspectFill"></image>
                        <view class="issueNew-text">请上传打款凭证图</view>
                    </view>
                </view>
            </view>
            <view class="userdata-btn">
            	<button class="issue-btn" form-type="submit" size="mini" :disabled="disabled">提交审核</button>
            </view>
        </form>
    </view>
</template>

<script>
    import { memberOpen } from '@/apis/interfaces/member'
    import { userIndex } from '@/apis/interfaces/user'
    import { uploads } from '@/apis/interfaces/uploading'
    export default {
    	data() {
    		return {
                username: '',   //用户手机号
                seeData : {
                    name    : '',
                    card_no : ''
                },
                voucher :{      //打款凭证
                    showpath: '',
                    path	: ''
                },
                disabled : false ,// 提交按钮状态
    		}
    	},
    	onShow() {
    	    userIndex().then(res => {
                this.username = res.username
    	    }).catch(err => {
    	    	uni.showToast({
    	    		title: err.message,
    	    		icon: "none"
    	    	})
    	    })
    	},
    	methods: {
            // 上传图片
            openImg(){
            	uni.chooseImage({
            		count	: 1,
            		success	: path => {
            			uploads([{
            				uri : path.tempFilePaths[0]
            			}]).then(res => {
            				this.voucher = {
            					showpath: res.url[0],
            					path: res.path[0]
            				}
            			}).catch(err => {
            				uni.showToast({
            					title: err.message,
            					icon : 'none'
            				})
            			})
            		}
            	})
            },
            
            // 提交表单
            issueForm(e) {
                let value    = e.detail.value;
                let data = {
                    name    : value.name,
                    card_no : value.card_no,
                    cover   : this.voucher.path
                }
                memberOpen(data).then(res => {
                    this.disabled = true
                    this.$Router.push({ name: 'User' });
                }).catch(err => {
                	uni.showToast({
                		title: err.message,
                		icon : 'none'
                	})
                })
            }
    	}
    }
</script>

<style lang="scss" scoped>
    .content {
        background-color: #f4f4f4;
    }
    .take-label {
        padding: $padding $padding 0;
        box-sizing: border-box;
        border-bottom: 160rpx solid transparent;
        .item {
            padding: $padding - 10 $padding - 10 $padding;
            box-sizing: border-box;
            background-color: #FFFFFF;
            border-bottom: 2rpx solid #f3f3f3;
            position: relative;
            font-size: $title-size-lg;
            margin-bottom: $margin;
            border-radius: $radius;
            .name {
                display: flex;
                flex: 1;
                image {
                    width: 44rpx;
                    height: 44rpx;
                    margin-right: 15rpx;
                }
            }
            .time {
                color: $text-gray;
                position: absolute;
                right: $padding;
                top: $padding - 6;
            }
            .entry {
                margin-top: $margin - 10;
                background-color: #f4f4f4;
                font-size: $title-size-lg;
                padding: 0 $padding;
                height: 84rpx;
                line-height: 84rpx;
                box-sizing: border-box;
                border-radius: $radius-sm;
                color: $text-gray;
                width: 100%;
            }
            .issueNew {
                text-align: center;
                margin-top: 20rpx;
                .issueNew-icon {
                    width: 200rpx;
                    height: 200rpx;
                }
                .issueNew-text {
                    font-size: $title-size-m;
                    color: $text-gray;
                }
            }
        }
    }
    
    /* 按钮 */
    .userdata-btn {
        width: 100%;
        box-sizing: border-box;
        padding: 30rpx;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 99;
        right: 0;
        background: white;
        .issue-btn {
            background: #1d37e2;
            text-align: center;
            color: white;
            height: 90rpx;
            line-height: 90rpx;
            font-size: 34rpx;
            font-weight: normal;
            width: 100%;
            margin: 0;
            padding: 0;
            border-radius: 10rpx;
            &[disabled] {
                background: #1d37e2 !important;
                color: #fff !important;
            }
        }
    }
</style>
