<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html lang="en" data-dpr="1">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="keywords" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <c:set var="ctx" value="${pageContext.request.contextPath}" scope="request"/>
    <c:set var="resourcePath" value="${ctx}/resources" scope="request"/>
    <script type="text/javascript">
        var ctx = "${ctx}"; //上下文路径
        var resourcePath = "${resourcePath}";
        document.writeln('<script type="text/javascript" src="' + resourcePath + '/js/global.js?d=' + new Date().getTime() + '" ><\/script>');
    </script>
    <title>支付即好友</title>
    <link rel="stylesheet" href="${resourcePath}/css/h5.css">
    <link rel="stylesheet" href="${resourcePath}/css/h5-common.css">
    <style type="text/css">.mint-popup-bottom[data-v-8cd1bb9c] {
        -webkit-transform: translate3d(-50%, 0, 0) !important
    }

    .mint-indicator-wrapper[data-v-8cd1bb9c] {
        -webkit-transform: translate(-50%, -50%);
        z-index: 999
    }

    #app[data-v-8cd1bb9c], body[data-v-8cd1bb9c], html[data-v-8cd1bb9c] {
        font-size: 5.973px;
        font-size: .37333333rem;
        height: 100%;
        color: #333;
        -webkit-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

    body[data-v-8cd1bb9c], html[data-v-8cd1bb9c], input[data-v-8cd1bb9c], textarea[data-v-8cd1bb9c] {
        font-family: PingFangSC-Regular, Helvetica, sans-serif
    }

    input[data-v-8cd1bb9c], textarea[data-v-8cd1bb9c] {
        background-color: #fff
    }

    input[data-v-8cd1bb9c], li[data-v-8cd1bb9c], ol[data-v-8cd1bb9c], textarea[data-v-8cd1bb9c], ul[data-v-8cd1bb9c] {
        padding: 0;
        border: 0;
        margin: 0
    }

    .tc[data-v-8cd1bb9c] {
        text-align: center
    }

    .tr[data-v-8cd1bb9c] {
        text-align: right
    }

    .tl[data-v-8cd1bb9c] {
        text-align: left
    }

    .c4b[data-v-8cd1bb9c] {
        color: #4b4b4b
    }

    .c000[data-v-8cd1bb9c] {
        color: #000
    }

    .c333[data-v-8cd1bb9c] {
        color: #333
    }

    .c666[data-v-8cd1bb9c] {
        color: #666
    }

    .c999[data-v-8cd1bb9c] {
        color: #999
    }

    .cccc[data-v-8cd1bb9c] {
        color: #ccc
    }

    .cddd[data-v-8cd1bb9c] {
        color: #ddd
    }

    .c9b9b[data-v-8cd1bb9c] {
        color: #9b9b9b
    }

    .cblue[data-v-8cd1bb9c] {
        color: #3089f7
    }

    .cred[data-v-8cd1bb9c] {
        color: red
    }

    .cora[data-v-8cd1bb9c] {
        color: #faa800
    }

    .cbase[data-v-8cd1bb9c] {
        color: #ff721f
    }

    .cfff[data-v-8cd1bb9c] {
        color: #fff
    }

    .bfff[data-v-8cd1bb9c] {
        background-color: #fff
    }

    .bbase[data-v-8cd1bb9c] {
        background-color: #ff721f
    }

    .fl[data-v-8cd1bb9c] {
        float: left
    }

    .fr[data-v-8cd1bb9c] {
        float: right
    }

    .mt10[data-v-8cd1bb9c] {
        margin-top: 4.266px;
        margin-top: .26666667rem
    }

    .ml15[data-v-8cd1bb9c] {
        margin-left: 6.4px;
        margin-left: .4rem
    }

    .mr15[data-v-8cd1bb9c] {
        margin-right: 6.4px;
        margin-right: .4rem
    }

    .mt15[data-v-8cd1bb9c] {
        margin-top: 6.4px;
        margin-top: .4rem
    }

    .mb15[data-v-8cd1bb9c] {
        margin-bottom: 6.4px;
        margin-bottom: .4rem
    }

    .pl15[data-v-8cd1bb9c] {
        padding-left: 6.4px;
        padding-left: .4rem
    }

    .pr15[data-v-8cd1bb9c] {
        padding-right: 6.4px;
        padding-right: .4rem
    }

    .pt15[data-v-8cd1bb9c] {
        padding-top: 6.4px;
        padding-top: .4rem
    }

    .pb15[data-v-8cd1bb9c] {
        padding-bottom: 6.4px;
        padding-bottom: .4rem
    }

    .mt30[data-v-8cd1bb9c] {
        margin-top: 12.8px;
        margin-top: .8rem
    }

    .mb30[data-v-8cd1bb9c] {
        margin-bottom: 12.8px;
        margin-bottom: .8rem
    }

    .fz12[data-v-8cd1bb9c] {
        font-size: 5.12px;
        font-size: .32rem
    }

    .fz13[data-v-8cd1bb9c] {
        font-size: 5.546px;
        font-size: .34666667rem
    }

    .fz14[data-v-8cd1bb9c] {
        font-size: 5.973px;
        font-size: .37333333rem
    }

    .fz15[data-v-8cd1bb9c] {
        font-size: 6.4px;
        font-size: .4rem
    }

    .fz16[data-v-8cd1bb9c] {
        font-size: 6.826px;
        font-size: .42666667rem
    }

    .fz18[data-v-8cd1bb9c] {
        font-size: 7.68px;
        font-size: .48rem
    }

    .fz20[data-v-8cd1bb9c] {
        font-size: 8.533px;
        font-size: .53333333rem
    }

    .fz22[data-v-8cd1bb9c] {
        font-size: 9.386px;
        font-size: .58666667rem
    }

    .fz24[data-v-8cd1bb9c] {
        font-size: 10.24px;
        font-size: .64rem
    }

    .fz32[data-v-8cd1bb9c] {
        font-size: 13.653px;
        font-size: .85333333rem
    }

    .fz36[data-v-8cd1bb9c] {
        font-size: 15.36px;
        font-size: .96rem
    }

    .block[data-v-8cd1bb9c] {
        display: block
    }

    b[data-v-8cd1bb9c], dfn[data-v-8cd1bb9c], em[data-v-8cd1bb9c] {
        font-style: normal;
        font-weight: 400
    }

    .font-DINAlternate[data-v-8cd1bb9c] {
        font-family: DINAlternate-Bold, PingFangSC-Regular, Helvetica, sans-serif
    }

    .arr_r[data-v-8cd1bb9c] {
        position: relative
    }

    .arr_r[data-v-8cd1bb9c]:after {
        content: "";
        position: absolute;
        z-index: 80;
        right: 6.4px;
        right: .4rem;
        top: 50%;
        width: 6px;
        height: 6px;
        border: 1px solid #c7c7cc;
        border-width: 2px 2px 0 0;
        transform: translateY(-50%) rotate(45deg)
    }

    .shadow[data-v-8cd1bb9c] {
        box-shadow: 0 8px 25px 0 #eaebec
    }

    .ellips[data-v-8cd1bb9c] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .ellips_line2[data-v-8cd1bb9c], .ellips_line3[data-v-8cd1bb9c] {
        display: -webkit-box;
        overflow: hidden
    }

    .ellips_line2[data-v-8cd1bb9c] {
        -webkit-line-clamp: 2
    }

    .ellips_line3[data-v-8cd1bb9c] {
        -webkit-line-clamp: 3
    }

    .to-check[data-v-8cd1bb9c] {
        position: relative
    }

    .to-check.checked[data-v-8cd1bb9c]:before {
        content: "";
        position: absolute;
        top: 50%;
        right: 6.4px;
        right: .4rem;
        width: 6.4px;
        width: .4rem;
        height: 3.2px;
        height: .2rem;
        border: 2px solid #ff721f;
        border-width: 0 0 2px 2px;
        transform: translateY(-50%) rotate(-45deg)
    }

    .ui-page[data-v-8cd1bb9c] {
        position: relative;
        max-width: 256px;
        max-width: 16rem;
        min-height: 100%;
        background-color: #f7f7f7;
        padding-top: 1px;
        margin: -1px auto 0
    }

    .ui-page[data-v-8cd1bb9c]:after {
        content: "";
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: -1;
        background-color: #f7f7f7
    }

    button[data-v-8cd1bb9c] {
        font-size: 6.4px;
        font-size: .4rem;
        border-radius: 1px;
        background-color: #ff721f
    }

    button.disabled[data-v-8cd1bb9c] {
        opacity: .4
    }

    .mebtn[data-v-8cd1bb9c] {
        width: 100%;
        padding: 0 6.4px;
        padding: 0 .4rem
    }

    input[data-v-8cd1bb9c]::-webkit-input-placeholder {
        color: #ccc
    }

    [data-v-8cd1bb9c]:-moz-placeholder, [data-v-8cd1bb9c]::-moz-placeholder {
        color: #ccc
    }

    [data-v-8cd1bb9c]:-ms-input-placeholder {
        color: #ccc
    }

    [class*=mint-tab-container][data-v-8cd1bb9c] {
        visibility: visible;
        position: static;
        opacity: 1
    }

    .loading-txt[data-v-8cd1bb9c] {
        width: 76.8px;
        width: 4.8rem
    }

    .loading-txt em[data-v-8cd1bb9c] {
        display: block;
        margin: 4.266px auto;
        margin: .26666667rem auto
    }

    .loading-txt .txt[data-v-8cd1bb9c] {
        margin-bottom: 2.56px;
        margin-bottom: .16rem
    }

    .v-input-clear[data-v-8cd1bb9c] {
        position: absolute;
        right: -4.266px;
        right: -.26666667rem;
        top: 50%;
        display: none;
        z-index: 9;
        padding: 4.266px;
        padding: .26666667rem;
        background-color: #fff;
        transform: translateY(-50%)
    }

    .v-input-clear.active[data-v-8cd1bb9c] {
        display: block
    }

    .v-input-clear .icon-font[data-v-8cd1bb9c] {
        display: block;
        color: #ccc;
        font-size: 7.68px;
        font-size: .48rem
    }

    .popup-container .popup-title[data-v-8cd1bb9c] {
        font-weight: 700
    }

    .popup-container .popup-btns .btn[data-v-8cd1bb9c] {
        color: #ff721f
    }

    .flex[data-v-8cd1bb9c] {
        display: -ms-flexbox;
        display: flex
    }

    .flex .flex-li[data-v-8cd1bb9c], .flex li[data-v-8cd1bb9c] {
        -ms-flex: 1;
        flex: 1
    }

    .i-warn-red[data-v-8cd1bb9c] {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAAXNSR0IArs4c6QAAAkNJREFUSA29Vj1PVEEUvWdYA72dFkJCQkGhkJjQECpqTbQyWuhPcMFYUFjYyUfCbyDSYEJvZWhIiDEWmlCxFkBla8Tdfdcz897O7L7F2XkE3yS7e+fOOffMx92ZC0lo+vLOnAAPRWVRILdF9ZajAWf0ndJ3QN8+Nn98GRUOMYA2px6L6FsGm4nh/BhwLII1bJzseV/JuFRQV2amJLt4T7GFEj6xi0Mx40+wfnxSJgwJ6urkkmT6gVt1swyu1If8FINHeNf61M8bEHRiXfnIld3oB13dRlvGZLlf1Au6bdTfR6NXxiCQHU6CXH1KfCM6IbtSTNzvba/xYHtmKdto5BU2Wi/4eU7ua8//l2FjunzIAU6wyMa0BDH61cfGWLC98zJDF3IN6W0HUz+1dbCib2aP5FcH0rloptLc30tkD7o6PS/d9ud0okXyHF2rnFzzRrLOg5xc4RvyjejvFRg5lLeVYaIsViICW0yYOWy27nGl25W41DLubqzEMrse3pBge2fE4D3MFRYXcQQ3MNTQP76vjWB7Z8SgVvgfRnDXNgQot5RPTH3t3CbNaW161LJJc1CbILVs0uzXJkgt48oC91L/Z1lqWK0iS7GWLNfOQmajzx4ZINdw5LwGYVmQ0gzCzdTNgh3l4rBX54THkzWIpDzAmaxrc/Iu49sH+FlUxw66B5ixi+ZffNuvo8QI50FBV3uwBnGzKmZ05R+7slI9Y2MNCFqHE2UNQivtTC1pqJFr65hSxWZhA1ta5tVWCA8JX2Op/xc+6NDNayMwOQAAAABJRU5ErkJggg==) no-repeat;
        background-size: 20px 20px
    }

    .i-checked[data-v-8cd1bb9c], .i-unchecked[data-v-8cd1bb9c] {
        position: relative;
        display: inline-block;
        width: 16px;
        height: 16px;
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDMyIDMyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA1MC4yICg1NTA0NykgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+5Y2P6K6u5Yu+L+WLvjwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSLljY/orq7li74v5Yu+IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNMjguNDQ0NDQ0NCwwIEwzLjU1NTU1NTU2LDAgQzEuNiwwIDAsMS42IDAsMy41NTU1NTU1NiBMMCwyOC40NDQ0NDQ0IEMwLDMwLjQgMS42LDMyIDMuNTU1NTU1NTYsMzIgTDI4LjQ0NDQ0NDQsMzIgQzMwLjQsMzIgMzIsMzAuNCAzMiwyOC40NDQ0NDQ0IEwzMiwzLjU1NTU1NTU2IEMzMiwxLjYgMzAuNCwwIDI4LjQ0NDQ0NDQsMCBMMjguNDQ0NDQ0NCwwIFogTTEyLjQ0NDQ0NDQsMjQuODg4ODg4OSBMMy41NTU1NTU1NiwxNi4zNDE4ODAzIEw2LjA0NDQ0NDQ0LDEzLjk0ODcxNzkgTDEyLjQ0NDQ0NDQsMjAuMTAyNTY0MSBMMjUuOTU1NTU1Niw3LjExMTExMTExIEwyOC40NDQ0NDQ0LDkuNTA0MjczNSBMMTIuNDQ0NDQ0NCwyNC44ODg4ODg5IEwxMi40NDQ0NDQ0LDI0Ljg4ODg4ODkgWiIgaWQ9IuWLvuS4iiIgZmlsbD0iI0ZGNzIxRiI+PC9wYXRoPgogICAgPC9nPgo8L3N2Zz4=) no-repeat;
        background-size: 16px auto
    }

    .i-unchecked[data-v-8cd1bb9c] {
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDMyIDMyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA1MC4yICg1NTA0NykgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+5Y2P6K6u5Yu+L+acquWLvjwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSLljY/orq7li74v5pyq5Yu+IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBmaWxsLW9wYWNpdHk9IjAuMyI+CiAgICAgICAgPHBhdGggZD0iTTI4LjQ0NDQ0NDQsMCBMMy41NTU1NTU1NiwwIEMxLjYsMCAwLDEuNiAwLDMuNTU1NTU1NTYgTDAsMjguNDQ0NDQ0NCBDMCwzMC40IDEuNiwzMiAzLjU1NTU1NTU2LDMyIEwyOC40NDQ0NDQ0LDMyIEMzMC40LDMyIDMyLDMwLjQgMzIsMjguNDQ0NDQ0NCBMMzIsMy41NTU1NTU1NiBDMzIsMS42IDMwLjQsMCAyOC40NDQ0NDQ0LDAgTDI4LjQ0NDQ0NDQsMCBaIE0xMi40NDQ0NDQ0LDI0Ljg4ODg4ODkgTDMuNTU1NTU1NTYsMTYuMzQxODgwMyBMNi4wNDQ0NDQ0NCwxMy45NDg3MTc5IEwxMi40NDQ0NDQ0LDIwLjEwMjU2NDEgTDI1Ljk1NTU1NTYsNy4xMTExMTExMSBMMjguNDQ0NDQ0NCw5LjUwNDI3MzUgTDEyLjQ0NDQ0NDQsMjQuODg4ODg4OSBMMTIuNDQ0NDQ0NCwyNC44ODg4ODg5IFoiIGlkPSLmsqHli77kuIoiIGZpbGw9IiNGRjcyMUYiPjwvcGF0aD4KICAgIDwvZz4KPC9zdmc+)
    }

    .model-container .key-body[data-v-8cd1bb9c] {
        padding-bottom: 1.493px;
        padding-bottom: .09333333rem;
        background-color: #d2d5db
    }

    .model-container .key-body ul.number li[data-v-8cd1bb9c] {
        height: 14.933px;
        height: .93333333rem;
        line-height: 14.933px;
        line-height: .93333333rem;
        padding: 3.626px 0;
        padding: .22666667rem 0;
        width: 31%;
        margin: 0 1.7% 1.7% 0;
        border-radius: 5px;
        background-color: #fff;
        box-shadow: 0 1px 0 0 #898a8d
    }

    .model-container .key-body ul.number li[data-v-8cd1bb9c]:nth-child(3n-2) {
        margin-left: 1.7%
    }

    .model-container .key-body ul.number li[data-v-8cd1bb9c]:before {
        content: none
    }

    .model-container .key-body ul.number li.key-back[data-v-8cd1bb9c], .model-container .key-body ul.number li.key-null[data-v-8cd1bb9c] {
        background-color: #d2d5db;
        box-shadow: none
    }

    .model-container .key-body ul.number li.key-back[data-v-8cd1bb9c]:active {
        opacity: .5
    }

    .freeMask[data-v-8cd1bb9c] {
        background-color: transparent
    }

    .vx-header + .scroll-wrapper[data-v-8cd1bb9c] {
        top: 0
    }

    @keyframes lighter-data-v-8cd1bb9c {
        0% {
            background-color: #000
        }
        50% {
            background-color: #000
        }
        51% {
            background-color: transparent
        }
        to {
            background-color: transparent
        }
    }

    @keyframes rotater-data-v-8cd1bb9c {
        0% {
            -webkit-transform: rotate(0)
        }
        to {
            -webkit-transform: rotate(1turn)
        }
    }

    .get-money-activity[data-v-8cd1bb9c] {
        padding: 6.4px;
        padding: .4rem;
        text-align: center;
        background-color: #fff
    }

    .get-money-activity .get-money-title[data-v-8cd1bb9c] {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
        justify-content: space-between;
        font-size: 5.973px;
        font-size: .37333333rem;
        line-height: 7.04px;
        line-height: .44rem;
        margin-top: 5.546px;
        margin-top: .34666667rem;
        font-family: PingFangSC-Regular
    }

    .get-money-activity .get-money-title .one[data-v-8cd1bb9c] {
        color: #333
    }

    .get-money-activity .get-money-title .two[data-v-8cd1bb9c] {
        color: #ff7728
    }

    .get-money-activity .money[data-v-8cd1bb9c] {
        text-align: left;
        color: #333;
        font-size: 13.653px;
        font-size: .85333333rem;
        line-height: 18.773px;
        line-height: 1.17333333rem;
        font-family: DINAlternate-Bold
    }

    .get-money-activity .money-desc[data-v-8cd1bb9c] {
        font-family: PingFangSC-Regular;
        color: #333;
        font-size: 5.973px;
        font-size: .37333333rem;
        line-height: 8.533px;
        line-height: .53333333rem;
        margin-top: 5.333px;
        margin-top: .33333333rem;
        margin-bottom: 5.333px;
        margin-bottom: .33333333rem;
        text-align: left
    }

    .get-money-activity .money-list[data-v-8cd1bb9c] {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-pack: start;
        justify-content: flex-start
    }

    .get-money-activity .money-list li[data-v-8cd1bb9c] {
        width: 45.866px;
        width: 2.86666667rem;
        height: 23.253px;
        height: 1.45333333rem;
        line-height: 23.253px;
        line-height: 1.45333333rem;
        font-size: 11.093px;
        font-size: .69333333rem;
        color: #333;
        border: 1px solid #bcbcbc;
        font-family: DINAlternate-Bold;
        border-radius: .10666667rem;
        margin-bottom: 4.693px;
        margin-bottom: .29333333rem
    }

    .get-money-activity .money-list li[data-v-8cd1bb9c]:nth-child(3n-1) {
        margin-left: 4.693px;
        margin-left: .29333333rem;
        margin-right: 4.693px;
        margin-right: .29333333rem
    }

    .get-money-activity .money-list li span[data-v-8cd1bb9c] {
        font-size: 8.96px;
        font-size: .56rem
    }

    .get-money-activity .money-list .li-disabled[data-v-8cd1bb9c] {
        color: #dfdfdf
    }

    .get-money-activity .money-list .li-actived[data-v-8cd1bb9c] {
        color: #ff7728;
        border: 1px solid #ff7728;
        background-color: rgba(255, 119, 40, .1)
    }

    .get-money-activity .get-money-desc[data-v-8cd1bb9c] {
        font-family: PingFangSC-Regular;
        color: #333;
        font-size: 5.973px;
        font-size: .37333333rem;
        line-height: 9.386px;
        line-height: .58666667rem;
        margin-top: 2.133px;
        margin-top: .13333333rem;
        margin-bottom: 12.8px;
        margin-bottom: .8rem;
        text-align: left
    }

    .get-money-activity .button-disabled[data-v-8cd1bb9c], .get-money-activity .money-button[data-v-8cd1bb9c] {
        width: 100%;
        height: 18.773px;
        height: 1.17333333rem;
        line-height: 18.773px;
        line-height: 1.17333333rem;
        font-size: 6.826px;
        font-size: .42666667rem;
        border-radius: .02666667rem;
        color: #fff;
        font-family: PingFangSC-Medium;
        font-weight: 700
    }

    .get-money-activity .button-disabled[data-v-8cd1bb9c] {
        background-color: rgb(253, 117, 100)
    }

    .get-money-activity .money-button[data-v-8cd1bb9c] {
        background-color: #ff7728
    }

    .get-money-activity .money-exchange-link[data-v-8cd1bb9c] {
        width: 100%;
        height: 42.666px;
        height: 2.66666667rem;
        margin-top: 6.4px;
        margin-top: .4rem
    }

    .get-money-activity .money-exchange-link img[data-v-8cd1bb9c] {
        width: 100%;
        height: 100%
    }</style>
    <style>
        #app, body, html {
            font-size: 5.973px;
            font-size: .37333333rem;
            height: 100%;
            color: #333;
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            -ms-user-select: none;
            user-select: none
        }

        #app {
            background-color: #F5F5F5;
        }

        .title-img img {
            width: 100%;
        }

        .title-img {
            text-align: center;
            background-color: #FFFFFF;
        }

        .qrcode {
            margin-top: 10px;
            width: 100%;
            background-color: #FFFFFF;
        }

        .qrcode-img {
            text-align: center;
        }

        .qrcode-title {
            width: 80%;
            font-size: .5333rem;
            font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
            font-weight: 700;
            padding-bottom: 10px;
            padding-top: 10px;
            padding-left: 10px;
        }

        .qrcode-img img {
            width: 70%;
            height: 200px;
        }

        .qrcode-p {
            margin-top: 10px;
        }

        .title-p {
            margin-top: 10px;
            color: #A9A9A9;
            padding-left: 15px;
            font-size: 0.3777rem;
        }

        .qrcode-body {
            display: flex;
            justify-content: space-between;
            line-height: 45px;
            margin-left: 10px;
        }

        .q-title {
            font-size: .53333rem;
            font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
            font-weight: 700;
        }

        .bq {
            color: #ef5151;
            font-size: 0.3777rem;
            margin-right: 10px;
        }

        /*.label{
            border: 1px solid #ef5151;
            margin-top: 10px;
            line-height: 30px;
            width: 50%;
            text-align: center;
            border-radius: 3px;
            margin-left: 10px;
        }*/
        .label {
            position: relative;
            width: 49%;
            overflow: hidden;
            text-align: center;
            border: 1px solid #ef5151;
            border-radius: 5px;
            margin-bottom: 10px;
            z-index: 88;
            line-height: 1.022rem;
            /*margin: 10px 10px 0 10px;*/

        }

        /*.label:before{
            position: absolute;
            display: block;
            border-top: 16px solid #ef5151;
            border-left: 16px solid transparent;
            right: 0;
            top: 0;
            content: "";
            z-index: 101;
        }*/
        .label:after {
            content: '✔';
            display: block;
            height: 0px;
            width: 0px;
            position: absolute;
            bottom: 0;
            right: 0;
            color: #fff;
            /**对号大小*/
            line-height: 8px;
            border: 10px solid;
            border-color: transparent #FF3333 #FF3333 transparent;
            /*height: 0;
            visibility: hidden;*/
        }

        .pox:after {
            height: 0;
            visibility: hidden;
        }

        .q-t {
            color: #A9A9A9;
            padding-left: 10px;
            font-size: 0.3777rem;
        }

        .title-float {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }

        .case {
            padding: 0 10px 0 10px;
        }

        .case img {
            width: 100%;
        }

        p {
            line-height: 25px;
        }

        .add {
            margin-top: -10px;
        }

        .save-btn {
            color: #FFFFFF;
            background-color: #ef5151;
            line-height: 0.999rem;
            width: 60%;
            font-size: 15px;
            text-align: center;
            border-radius: 10px;
            margin-left: 20%;
            display: flex;
        }

        .del-img {
            width: 15px;
            height: 15px;
            z-index: 100;
            position: absolute;
            top: -1px;
            right: -1px;
        }

        .save-btn-item {
            width: 50%;
        }

        .item-upload {
            border-right: 1px solid #FFF;
        }

        .qrcode-wechat {
            font-size: .5rem;
        }

        .dialog-tips {
            box-shadow: rgb(136 136 136) 5px 5px 5px;
        }
    </style>
</head>

<body>
<div id="app" style="font-size: 12px;">
    <div class="title-img">
        <img src="${resourcePath}/images/title.png">
    </div>
    <div class="qrcode">
        <div class="qrcode-body">
            <div class="q-title">1.上传微信二维码</div>
            <c:if test="${not empty qrCodeUrl}">
                <div class="bq" id="clear">清空</div>
            </c:if>
        </div>

        <div class="qrcode-img">
            <div>
                <c:choose>
                    <c:when test="${not empty qrCodeUrl}">
                        <img src="${qrCodeUrl}" height="136px" id="qrcodeImg"/>
                    </c:when>
                    <c:otherwise>
                        <img src="${resourcePath}/images/example.jpg" height="136px" id="qrcodeImg"/>
                    </c:otherwise>
                </c:choose>

            </div>
            <div class="qrcode-wechat" style="display: ${not empty wechat ? 'black':'none'}">
                <label>微信号：<span id="wechatNumTxt">${wechat}</span></label>
            </div>

            <div class="qrcode-p">
                <input accept="image/*" type="file" id="uploadIMG" onchange="btnUploadFile(event)"
                       style="display: none"/>
                <div class="save-btn">
                    <div class="save-btn-item item-upload" id="showImg">上传二维码</div>
                    <div class="save-btn-item" id="inputWx">填写微信号</div>
                </div>
            </div>
        </div>
        <br/>
        <div class="title-p">
            <p>营销策略：客户付款完即可看到老板微信从而添加好友，帮助商户维系老客户，提升复购率；更可以通过建立福利群，搭建商户的私域流量，提高营业额。</p>
        </div>
        <br/>
        <div class="qrcode-body">
            <div class="q-title">2.添加引导话术,吸引客户加好友</div>
            <div class="bq" onclick="updateLabel(this)">管理话术</div>
        </div>
        <div>
            <div class="q-title-p">
                <p class="q-t">选择或添加标签(最多选择1个)，将和二维码一起展示</p>
            </div>
        </div>
        <div style="padding: 20px" id="label">
            <div class="title-float">
                <c:if test="${not empty guideLabel}">
                    <c:forEach items="${guideLabel}" var="label" varStatus="index">
                        <c:choose>
                            <c:when test="${ not empty checkCommonId}">
                                <div class="label ${label.id == checkCommonId ? '' : 'pox'}" data-type="common"
                                     data-id="${label.id}" pox="${label.id == checkCommonId ? '0' : '1'}">
                                    <div onclick="check(this)">
                                            ${label.name}
                                    </div>
                                </div>
                            </c:when>
                            <c:otherwise>
                                <div class="label ${label.status == 1 ? '' : 'pox'}" data-type="common"
                                     data-id="${label.id}" pox="${label.status == 1 ? '0' : '1'}">
                                    <div onclick="check(this)">
                                            ${label.name}
                                    </div>
                                </div>
                            </c:otherwise>
                        </c:choose>

                    </c:forEach>
                </c:if>
                <c:if test="${not empty mGlist}">
                    <c:forEach items="${mGlist}" var="label" varStatus="index">
                        <div class="label ${label.status == 1 ? '' : 'pox'}" data-type="merchant" data-id="${label.id}"
                             pox="${label.status == 1 ? '0' : '1'}">
                            <div>
                                <img class="del-img" onclick="deleteLabel(this)" style="display: none"
                                     src="${resourcePath}/images/icon-del-1.png"/>
                            </div>
                            <div onclick="check(this)">
                                    ${label.name}
                            </div>
                        </div>
                    </c:forEach>
                </c:if>
            </div>
            <div class="label pox add" onclick="addLabel()"
                 style="display: flex;justify-content: center;max-height: 40px;">
                <div style="margin-top: 5px;"><img width="20px" height="20px"
                                                   src="${resourcePath}/images/icon-add.png"/></div>
                <div>添加话术</div>
            </div>
        </div>
        <div>
            <div class="qrcode-title">3.案例</div>
            <div class="case">
                <div style="color: #A9A9A9;font-size: .3888rem">
                    <p>
                        私域流量：客户扫码完如下图引导话术加老板微信，通过微信群、朋友圈了解商户最新的特价商品，福利活动，通过线上门店外卖点餐，增加商户销售渠道，提高营业额。
                    </p>
                </div>
                <div style="margin-top: 20px;">
                    <img src="${resourcePath}/images/case.png">
                </div>
            </div>
        </div>
    </div>
</div>

<div class="popup-container dialog-body active"
     style="display: none;box-shadow: 5px 5px 20px #888888;border-radius: 5px;">
    <div class="popup"><!---->
        <div class="popup-body">
            名称：<input type="text" id="labelInput" maxlength="12" placeholder="最多输入12个字符">
        </div>
        <div class="popup-btns" style="display: flex;justify-content:space-around;">
            <div style="width: 50%" onclick="hide(this)">
                <span style="color: rgba(0,0,0,.5)" class="btn btn-positive">取消</span>
            </div>
            <div style="width: 50%">
                <span class="btn btn-positive" onclick="confirm('label')">确认</span>
            </div>
        </div>
    </div>
</div>

<div class="popup-container dialog-body-wechat active"
     style="display: none;box-shadow: 5px 5px 20px #888888;border-radius: 5px;">
    <div class="popup"><!---->
        <div class="popup-body">
            微信号：<input type="text" id="wechatNum" maxlength="50" placeholder="请填写微信号">
        </div>
        <input type="hidden" id="id" maxlength="50" value="${id}">
        <div class="popup-btns" style="display: flex;justify-content:space-around;">
            <div style="width: 50%" onclick="hide(this)">
                <span style="color: rgba(0,0,0,.5)" class="btn btn-positive">取消</span>
            </div>
            <div style="width: 50%">
                <span class="btn btn-positive" onclick="confirm('wechat')">确认</span>
            </div>
        </div>
    </div>
</div>

<div class="backdrop-container active" style="display: none;"></div>
<div class="popup-container dialog-tips active" style="display: none;">
    <div class="popup"><!---->
        <div class="popup-body dialog-tips-html"></div>
        <div class="popup-btns" id="popup-btns" onclick="hide(this)"><span class="btn btn-positive">确定</span></div>
    </div>
</div>

<div class="popup-container dialog-tips2 active" style="display: none;">
    <div class="popup"><!---->
        <div class="popup-body dialog-tips2-html"></div>
        <div class="popup-btns" style="display: flex;justify-content:space-around;">
            <div style="width: 50%" onclick="hide(this)">
                <span style="color: rgba(0,0,0,.5)" class="btn btn-positive">取消</span>
            </div>
            <div style="width: 50%">
                <span class="btn btn-positive" onclick="clearData()">确认</span>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">

    $("#clear").on('click', () => {
        var id = $("#id").val();
        if (id == "") {
            showMask()
            $(".dialog-tips").show();
            $(".dialog-tips-html").html("请先上传二维码");
            return;
        }

        showMask()
        $(".dialog-tips2").show();
        $(".dialog-tips2-html").html("确认清除微信信息");
    });

    $("#inputWx").on('click', () => {
        var id = $("#id").val();
        if (id == "") {
            showMask()
            $(".dialog-tips").show();
            $(".dialog-tips-html").html("请先上传二维码");
            return;
        }

        showMask()
        $("#wechatNum").val("");
        $(".dialog-body-wechat").show();
    })

    function showMask() {
        $(".backdrop-container").show()
    }

    function hideMask() {
        $(".backdrop-container").hide()
    }

    function clearData() {
        var url = ctx + "/merchant/wechat/clear";
        $.post(url, {token: '${token}'}, function (res) {
            if (res.code == 200) {
                location.reload();
            } else {
                alert(res.message);
            }
        });
    }

    function deleteLabel(obj) {
        var dom = $(obj).parent().parent();
        if (dom.attr("class").indexOf("pox") < 0) {
            showMask()
            $(".dialog-tips").show();
            $(".dialog-tips-html").html("不能删除已选中的！");
            return;
        }
        var url = ctx + "/merchant/guide/remove";
        $.post(url, {token: '${token}', id: dom.attr("data-id")}, function (res) {
            if (res.code == 200) {
                dom.remove();
            } else {
                alert(res.message);
            }
        })
    }

    function updateLabel(obj) {
        $(".del-img").each(function (k, v) {
            if ($(v).attr("style").indexOf("none") > 0) {
                $(v).show();
            } else {
                $(v).hide();
            }
        })
    }

    function addLabel() {
        showMask()
        $("#labelInput").val("");
        $(".dialog-body").show();
    }

    function confirm(type) {
        var labelName = $("#labelInput").val();
        var wechatNum = $("#wechatNum").val();
        var params = {};
        var url = "";
        if (type == "label") {
            if (labelName == "") {
                alert("名称不能为空！")
                return;
            }
            params.name = labelName;
            url = ctx + "/merchant/guide/add";
        } else if (type == "wechat") {
            if (wechatNum == "") {
                alert("微信号不能为空！")
                return;
            }
            var id = $("#id").val();
            params.wechat = wechatNum;
            params.id = id;
            url = ctx + "/merchant/wechat/add";
        }
        params.token = '${token}';
        $.post(url, params, function (res) {
            if (res.code == 200) {
                hide();
                if (type == "label") {
                    addLabelHtml(labelName, res.data);
                } else {
                    alert("添加成功");
                    $(".qrcode-wechat").show();
                    $("#wechatNumTxt").html(wechatNum);
                }
            } else {
                alert(res.message);
            }
        })
    }

    function addLabelHtml(name, data) {
        var html = '<div class="label pox" data-type="merchant" data-id="' + data.id + '" pox="1"><div><img  class="del-img" onclick="deleteLabel(this)" src="' + resourcePath + '/images/icon-del-1.png" style="display: none"  /></div><div onclick="check(this)">' + name + '</div></div>';
        $(".title-float").append(html);
    }

    function hide(obj) {
        hideMask()
        //$(obj).parentsUntil(".popup-container").hide();
        $('.active').hide();
    }

    function check(obj) {
        var dom = $(obj).parent("div");
        var id = dom.attr("data-id");
        var type = dom.attr("data-type");
        var pox = dom.attr("pox");
        if (pox === "0") {
            alert("至少选择一项");
            return;
        }
        if (pox === "0" || pox == undefined) {
            $(".label").each(function (k, v) {
                $(v).addClass("pox");
                $(v).attr("pox", "1");
            })
            dom.addClass("pox");
            dom.attr("pox", "1");
        } else {
            $(".label").each(function (k, v) {
                $(v).addClass("pox");
                $(v).attr("pox", "1");
            })
            dom.removeClass("pox");
            dom.attr("pox", "0");
        }
        var url = ctx + "/merchant/guide/save";
        $.post(url, {token: '${token}', id: id, type: type}, function (res) {
            if (res.code == 200) {
            } else {
                alert(res.message);
            }
        })
    }

    $("#showImg").click(function () {
        $("#uploadIMG").click();
    });

    function btnUploadFile(e) {
        //获取图片文件
        var imgFile = e.target.files[0];
        //后缀选取
        if (!/\/(?:jpeg|jpg|png|bmp)/i.test(imgFile.type)) {
            alert("图片格式不支持，只支持后缀为jpg,jpeg,png,bmp等格式");
            return;
        }

        var suffix = imgFile.name.split(".")[1];
        // uploadImg(suffix, imgFile);

        compress(e.target.files[0], suffix, uploadImg)
    }

    var uploadImg = function ajaxFormData(suffix, imgFile) {
        var upload = '${upload}';
        var data = JSON.parse(upload);
        /*data.OSSAccessKeyId = $('#accessid').val();
        data.policy = $('#policy').val();
        data.signature = $('#signature').val();
        data.expire = $('#expire').val();
        data.success_action_status = $('#success_action_status').val();
        data.callBack = $("#key2_callBack").val();
        data.key = key;*/
        var url = data.host;
        var formData = new FormData();
        formData.append("OSSAccessKeyId", data.accessid);
        formData.append("policy", data.policy);
        formData.append("signature", data.signature);
        formData.append("success_action_status", "200");
        formData.append("callBack", data.callBack);
        formData.append("key", data.key + "." + suffix);
        formData.append("file", imgFile);
        $.ajax({
            url: url,
            type: "POST",
            data: formData,
            dataType: "json",
            processData: false,
            contentType: false,
            success: function (res) {
                if (res.code == 200) {
                    $.post(ctx + '/merchant/qrCode/upload', {token: '${token}', photoUrl: res.url}, function (data) {
                        if (data.code == 200) {
                            let res = data.data;
                            //异步读取文件
                            var reader = new FileReader();
                            reader.onload = function (evt) {
                                //替换url
                                $("#qrcodeImg").attr("src", evt.target.result);
                            }
                            reader.readAsDataURL(imgFile);
                            $("#id").val(res.id);
                        } else {
                            alert("上传失败");
                        }
                    })
                }
            },
            error: function (xhr) {
                alert("上传失败")
            }
        })
    }
</script>
<script type="text/javascript">
    !function (a, b) {
        function c() {
            var b = f.getBoundingClientRect().width;
            b / i > 540 && (b = 540 * i);
            var c = b / 10;
            f.style.fontSize = c + "px", k.rem = a.rem = c
        }

        var d, e = a.document,
            f = e.documentElement,
            g = e.querySelector('meta[name="viewport"]'),
            h = e.querySelector('meta[name="flexible"]'),
            i = 0,
            j = 0,
            k = b.flexible || (b.flexible = {});
        if (g) {
            var l = g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
            l && (j = parseFloat(l[1]), i = parseInt(1 / j))
        } else if (h) {
            var m = h.getAttribute("content");
            if (m) {
                var n = m.match(/initial\-dpr=([\d\.]+)/),
                    o = m.match(/maximum\-dpr=([\d\.]+)/);
                n && (i = parseFloat(n[1]), j = parseFloat((1 / i).toFixed(2))), o && (i = parseFloat(o[1]), j = parseFloat((
                    1 / i).toFixed(2)))
            }
        }
        if (!i && !j) {
            var p = (a.navigator.appVersion.match(/android/gi), a.navigator.appVersion.match(/iphone/gi)),
                q = a.devicePixelRatio;
            i = p ? q >= 3 && (!i || i >= 3) ? 3 : q >= 2 && (!i || i >= 2) ? 2 : 1 : 1, j = 1 / i
        }
        if (f.setAttribute("data-dpr", i), !g)
            if (g = e.createElement("meta"), g.setAttribute("name", "viewport"), g.setAttribute("content",
                "initial-scale=" + j + ", maximum-scale=" + j + ", minimum-scale=" + j + ", user-scalable=no"), f
                .firstElementChild) f.firstElementChild.appendChild(g);
            else {
                var r = e.createElement("div");
                r.appendChild(g), e.write(r.innerHTML)
            }
        a.addEventListener("resize", function () {
            clearTimeout(d), d = setTimeout(c, 300)
        }, !1), a.addEventListener("pageshow", function (a) {
            a.persisted && (clearTimeout(d), d = setTimeout(c, 300))
        }, !1), "complete" === e.readyState ? e.body.style.fontSize = 12 * i + "px" : e.addEventListener(
            "DOMContentLoaded",
            function () {
                e.body.style.fontSize = 12 * i + "px"
            }, !1), c(), k.dpr = a.dpr = i, k.refreshRem = c, k.rem2px = function (a) {
            var b = parseFloat(a) * this.rem;
            return "string" == typeof a && a.match(/rem$/) && (b += "px"), b
        }, k.px2rem = function (a) {
            var b = parseFloat(a) / this.rem;
            return "string" == typeof a && a.match(/px$/) && (b += "rem"), b
        }
    }(window, window.lib || (window.lib = {}));

    // 对图片进行压缩
    function compress(fileObj, suffix, callback){
        var fileSize = parseFloat(parseInt(fileObj['size'])/1024/1024).toFixed(2);
        if ( typeof (FileReader) === 'undefined') {
            console.log("当前浏览器内核不支持base64图标压缩");
            callback(suffix, fileObj);
        } else {
            var reader = new FileReader();
            reader.onload = function (e) { //要先确保图片完整获取到，这是个异步事件
                var image = new Image();
                image.src = e.target.result;
                image.onload = function(){
                    if (fileSize <= 0.2) {
                        callback(suffix, fileObj);
                        return;
                    }

                    //定义画布的大小，也就是图片压缩之后的像素
                    var square = image.width / image.height;
                    console.log("文件大小：" + fileSize);
                    console.log("比例：" + square);
                    var canvas = document.createElement('canvas'); //创建canvas元素
                    var context = canvas.getContext('2d');

                    var imageHeight;
                    var imageWidth;

                    var maxHeight = 1000;
                    if (image.height < maxHeight) {
                        imageHeight = image.height;
                        imageWidth = image.width;
                    } else {
                        imageHeight = maxHeight;
                        imageWidth = Math.round(square * maxHeight) ;
                    }

                    canvas.width = imageWidth;
                    canvas.height = imageHeight;
                    context.clearRect(0, 0, imageWidth, imageHeight); //在给定矩形内清空一个矩形
                    context.drawImage(this, 0, 0, imageWidth, imageHeight);
                    var data = canvas.toDataURL('image/jpeg', 0.6);
                    //压缩完成执行回调
                    var blobData = dataURLToBlob(data)
                    callback(suffix, blobData);
                };
            };
            reader.readAsDataURL(fileObj);
        }
    }

    function dataURLToBlob(dataurl) {
        console.log('datarul', dataurl)
        let arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n)
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
        }
        return new Blob([u8arr], { type: mime })
    }
</script>
</html>