<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/personal/index.css">
    <script src="/js/tailoring/jquery.min.js"></script>
    <script src="/js/tailoring/iscroll-zoom.js"></script>
    <script src="/js/tailoring/hammer.js"></script>
    <script src="/js/tailoring/lrz.all.bundle.js"></script>
    <script src="/js/tailoring/jquery.photoClip.js"></script>
    <script src="/layui/layui.js"></script>
    <script src="/js/qrcode.js"></script>
    <script src="/js/personal/even.js"></script>
    <script src="/js/personal/index.js"></script>
    <script src="/js/personal/function.js"></script>
    <script src="/js/translationVal.js"></script>
</head>
<body>
    <!-- 最大div -->
    <div class="div_user">
        <!-- 上侧信息 -->
        <div class="top_div">
            <!-- 左侧信息 -->
            <div class="message_div_left">
                <div class="left_div_title" data-locale="gerenxinxi">个人信息</div>
                <!-- 用户名称跟头像 -->
                <div class="user_img_name">
                    <!-- 头像 -->
                    <input type="file" id="file" style="display: none;" accept="image/*">
                    <img class="headpir_img" src="/images/morentouxiang.png"/>
                    <!-- 用户名称 -->
                    <div class="user_name">
                        <!-- 用户名称标题 -->
                        <div class="title_name_val" data-locale="nicheng">昵称</div>
                        <!-- 用户名称 -->
                        <div class="name_div_val">
                            <div></div>
                            <img src="/images/edit.png"/>
                        </div>
                    </div>
                </div>
                <!-- 用户手机号 -->
                <div class="phone_div">
                    <!-- 手机 -->
                    <div class="phoen_left">
                        <div class="phone_title" data-locale="shouji">手机</div>
                        <div class="phone_val"></div>
                        <div class="phone_update" data-locale="xiugai">修改</div>
                    </div>
                    <!-- 密码 -->
<!--                    <div class="phoen_right">-->
<!--                        <div class="pass_title">密码</div>-->
<!--                        <div class="pass_update">修改密码</div>-->
<!--                    </div>-->
                </div>
            </div>
            <!-- 右侧信息 -->
            <div class="message_div_right">
                <div class="left_div_title" style="margin-bottom: 42px;" data-locale="zhanghuxinxi">账户信息</div>
                <!-- 账户余额 -->
                <div class="account_div">
                    <div class="account_content">
                        <div class="balance_of" data-locale="zhanghuyue">账户余额</div>
                        <div class="blance_content">
                            <span>￥</span>
                            <p>0</p>
                        </div>
                    </div>
                    <div class="account_button">
                        <div class="button_account" data-locale="tixian" onclick="withdrawal(this)">提现</div>
                        <div class="button_account" data-locale="chongzhijine" onclick="topUp(this)">充值</div>
                    </div>
                </div>
                <!-- 分割样式 -->
                <div class="segmentation_div"></div>
                <!-- 报价权限余额 -->
                <div class="permissions_div">
                    <div class="account_content">
                        <div class="balance_of" data-locale="baojiadanquanxianyue">报价权限余额</div>
                        <div class="blance_content">
                            <p>0</p>
                            <span>次</span>
                        </div>
                    </div>
                    <div class="account_button">
                        <div class="button_account" data-locale="goumaiquanxian" onclick="buyPermissions()">购买权限</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 下侧信息 -->
        <div class="bottom_div">
            <div class="left_div_title" data-locale="shouzhimingxi">收支明细</div>
            <!-- 明细 -->
            <div class="bottom_content">
<!--                <div class="content_div_font">-->
<!--                    <div class="date_detail">2022-06-20</div>-->
<!--                    <div class="content_detail">户外活动·自然探索.蒙元文化体验|全境内蒙古-草原、沙漠、火山自然景观探索体验，内蒙古蒙元文化、历史探索体验</div>-->
<!--                    <div class="amount_detail">￥4360</div>-->
<!--                </div>-->
            </div>
        </div>
    </div>
    <!-- 充值 -->
    <div class="top_up_div">
        <div class="balance_of_show">
            <div class="balance_of_font" data-locale="zhanghuyue">账户余额</div>
            <div class="balance_of_val">0.00</div>
            <div class="cumulative_num">累计充值0次</div>
        </div>
        <!-- 自定义金额 -->
        <div class="custom_amount">
            <span data-locale="zaixianchongzhi">在线充值</span>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="text" data-locale="zidingyishurujine" name="totalFee" lay-verify="title" autocomplete="off" placeholder="自定义金额输入" class="layui-input">
                </div>
            </div>
        </div>
        <!-- 选择金额 -->
        <div class="select_amount">
            <div class="select_amount_val" data-locale="200yuan" value="200" onclick="selectAmout(this)">200元</div>
            <div class="select_amount_val" data-locale="500yuan" value="500" onclick="selectAmout(this)">500元</div>
            <div class="select_amount_val" data-locale="600yuan" value="600" onclick="selectAmout(this)">600元</div>
            <div class="select_amount_val" data-locale="800yuan" value="800" onclick="selectAmout(this)">800元</div>
            <div class="select_amount_val" data-locale="1000yuan" value="1000" onclick="selectAmout(this)">1000元</div>
        </div>
        <!-- 选择支付方式 -->
        <div class="mode_of_payment">
            <div class="pay_div_mode wx_pay select_pay_click" onclick="selectPay(this)">
                <img src="/images/personal/weixinzhifu.png"/>
                <span data-locale="weixinzhifu">微信支付</span>
                <div><i class="layui-icon">&#xe605;</i></div>
            </div>
            <div class="pay_div_mode wx_pay" onclick="selectPay(this)">
                <img src="/images/personal/zfb.png"/>
                <span>支付宝</span>
                <div></div>
            </div>
        </div>
        <div class="qr-code-div">
            <div id="qrcode"></div>
        </div>
        <div class="button_top_up">
            <div class="top-up-button" data-locale="lijichongzhi" onclick="onblurEle()">立即充值</div>
        </div>
    </div>
    <!-- 购买报价单次数 -->
    <div class="quotation_number">
        <div class="balance_of_show">
            <div class="balance_of_font" data-locale="zhanghuyue">账户余额</div>
            <div class="balance_of_val">0.00</div>
            <div class="cumulative_num quotation_num" data-locale="baojiadandanjia">报价单单价</div>
        </div>
        <!-- 自定义金额 -->
        <div class="custom_amount">
            <span data-locale="zaixianchongzhi">在线充值</span>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="text" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                           name="offerNum" data-locale="zidingyiquanxiancishushuru" lay-verify="title" autocomplete="off" placeholder="自定义权限次数输入" class="layui-input">
                </div>
            </div>
        </div>
        <!-- 选择金额 -->
        <div class="select_amount">
            <div class="select_amount_val select_number_val select_amount_val_click" value="2" onclick="selectAmout(this)">
                <div class="number_of_div">
                    <span>2</span>
                    <span class="small_font_size" data-locale="ci">次</span>
                </div>
                <div class="amount_number_val">
                    <span>￥10</span>
                </div>
            </div>
            <div class="select_amount_val select_number_val" value="6" onclick="selectAmout(this)">
                <div class="number_of_div">
                    <span>6</span>
                    <span class="small_font_size" data-locale="ci">次</span>
                </div>
                <div class="amount_number_val">
                    <span>￥10</span>
                </div>
            </div>
            <div class="select_amount_val select_number_val" value="8" onclick="selectAmout(this)">
                <div class="number_of_div">
                    <span>8</span>
                    <span class="small_font_size" data-locale="ci">次</span>
                </div>
                <div class="amount_number_val">
                    <span>￥10</span>
                </div>
            </div>
            <div class="select_amount_val select_number_val" value="10" onclick="selectAmout(this)">
                <div class="number_of_div">
                    <span>10</span>
                    <span class="small_font_size" data-locale="ci">次</span>
                </div>
                <div class="amount_number_val">
                    <span>￥10</span>
                </div>
            </div>
            <div class="select_amount_val select_number_val" value="12" onclick="selectAmout(this)">
                <div class="number_of_div">
                    <span>12</span>
                    <span class="small_font_size" data-locale="ci">次</span>
                </div>
                <div class="amount_number_val">
                    <span>￥10</span>
                </div>
            </div>
        </div>
        <!-- 选择支付方式 -->
        <div class="mode_of_payment">
            <div class="pay_div_mode wx_pay select_pay_click" onclick="payType(this)">
                <img src="/images/personal/yuezhifu.png"/>
                <span data-locale="yuezhifu">余额支付</span>
                <div><i class="layui-icon">&#xe605;</i></div>
            </div>
            <div class="pay_div_mode wx_pay" onclick="payType(this)">
                <img src="/images/personal/weixinzhifu.png"/>
                <span data-locale="weixinzhifu">微信支付</span>
                <div></div>
            </div>
            <div class="pay_div_mode wx_pay" onclick="payType(this)">
                <img src="/images/personal/zfb.png"/>
                <span>支付宝</span>
                <div></div>
            </div>
        </div>
        <!-- 微信支付二维码 -->
        <div class="qrcode_ok_div" style="float: left; width: 100%;">
            <div id="qrcode_ok"></div>
        </div>
        <div class="button_top_up">
            <div class="top-up-button blance_button" data-locale="lijichongzhi" onclick="balanceOfOk()">立即充值</div>
        </div>
    </div>
    <!-- 截取 -->
    <div class="van-popup van-popup--center van-pop-transparent" style="z-index: 2001; height: auto;">
        <div class="cropper-wrapper" data-v-63ddb62e="">
            <div class="cropper" data-v-63ddb62e="">
                <div class="cut_div" id="clipArea"></div>
            </div>
            <div class="btn-group" data-v-63ddb62e="">
                <button type="button" class="button__component cancel-btn" data-v-63ddb62e=""
                        data-v-wave-boundary="true" style="--63dea0b6:24px;" data-locale="quxiao">取消
                    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="btn__component-loading"
                         style="display: none;">
                        <path fill="currentColor"
                              d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"></path>
                    </svg>
                </button>
                <button id="clipBtn" type="button" class="button__component" data-v-63ddb62e="" data-v-wave-boundary="true"
                        style="--63dea0b6:24px; position: relative;" data-v-wave-count-internal="1" data-locale="queding">确定
                    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="btn__component-loading"
                         style="display: none;">
                        <path fill="currentColor"
                              d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"></path>
                    </svg>
                </button>
            </div>
        </div>
    </div>
</body>
</html>