1410 lines
44 KiB
Plaintext
1410 lines
44 KiB
Plaintext
<%@ 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> |