manyi/static/1.0/tpl/qrcode.html

<div class="wrapper-md" ng-controller="qrCodeCtrl">

    <div class="open-browser" ng-show="showOpenBrowser">
    </div>
    <style>
        .multiple-input {
            padding-right: 0px;
        }

        .multiple-input input {
            padding-left: 3px;
            padding-right: 3px;
        }

        .open-browser {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 99999;
            width: 100%;
            height: 100%;
            background: url(/1.0/img/open_browser.jpg) no-repeat center center rgba(0, 0, 0, 0.4);
            background-size: cover;
        }
    </style>
    <div class="row">
        <div class="col-sm-4" style="max-width: 510px">
            <form name="qrCodeForm" class="form-horizontal form-validation">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <strong>二维码参数</strong>
                    </div>

                    <div class="panel-body">
                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 control-label">二维码尺寸</label>
                            <div class="col-xs-5 col-sm-4">
                                <div class="input-group">
                                    <input type="number" min="100" class="form-control m-b" placeholder="宽高(100-1000)"
                                           ng-model="condition.size"
                                           ui-validate="'$value >= 100&&$value <= 1000'" required>
                                    <span class="input-group-addon">px</span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 control-label">背景图片</label>
                            <div class="col-xs-4 col-sm-3 ">
                                <!--file是不支持ng-model的-->
                                <input type="file" id="backImgFile" class="hidden">
                                <div class="btn btn-default" onclick="$('#backImgFile').click();"><i
                                        class="fa fa-picture-o"></i> 选择背景
                                </div>
                            </div>
                            <div class="col-xs-4 col-sm-3">
                                <div class="checkbox">
                                    <label class="i-checks">
                                        <input type="checkbox" ng-model="condition.background"
                                               ng-true-value="true"
                                               ng-false-value="false">
                                        <i></i>
                                        需要
                                    </label>
                                </div>
                            </div>
                            <div class="col-xs-4 col-sm-3">
                                <img id="previewBackImg" ng-src="{{condition.backgroundPath}}"
                                     ng-class="{hide:!condition.background}"
                                     style="max-height: 32px;max-width: 100%">
                            </div>
                        </div>
                        <div class="form-group" ng-if="condition.background">
                            <label class="col-xs-12 col-sm-3 control-label">背景缩放</label>
                            <div class="col-xs-5 col-sm-4">
                                <div class="input-group">
                                    <input type="number" min=0 max=100 step="0.01" class="form-control m-b"
                                           placeholder="0-100"
                                           ng-model="condition.backgroundScale"
                                           ui-validate="'$value >= 0&&$value <= 100'" required>
                                    <span class="input-group-addon">%</span>
                                </div>
                            </div>
                            <div class="col-xs-4 col-sm-3">
                                {{condition.backWidth}}x{{condition.backHeight}}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 col-xs-12 control-label">二维码位置</label>
                            <div class="col-xs-5 col-sm-3 multiple-input">
                                <div class="input-group">
                                    <input type="number" class="form-control" placeholder="Left"
                                           ng-disabled="!condition.background"
                                           ng-model="condition.qrcodeLeft">
                                    <span class="input-group-addon">px</span>
                                </div>
                            </div>
                            <div class="col-xs-5 col-sm-3 multiple-input">
                                <div class="input-group">
                                    <input type="number" class="form-control" placeholder="Top"
                                           ng-disabled="!condition.background"
                                           ng-model="condition.qrcodeTop">
                                    <span class="input-group-addon">px</span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 control-label">中心图标</label>
                            <div class="col-xs-4 col-sm-3">
                                <input type="file" id="logoFile" class="hidden">
                                <div class="btn btn-default" onclick="$('#logoFile').click();"><i
                                        class="fa fa-picture-o"></i> 选择图标
                                </div>
                            </div>
                            <div class="col-xs-4 col-sm-3">
                                <div class="checkbox">
                                    <label class="i-checks">
                                        <input type="checkbox" ng-model="condition.logo" value="">
                                        <i></i>
                                        需要
                                    </label>
                                </div>
                            </div>
                            <div class="col-xs-4 col-sm-3">
                                <img id="previewLogo" ng-src="{{condition.logoPath}}" ng-class="{hide:!condition.logo}"
                                     style="max-height: 32px;max-width: 100%">
                            </div>

                        </div>
                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 control-label">图标尺寸</label>
                            <div class="col-xs-5 col-sm-4">
                                <div class="input-group">
                                    <input type="number" class="form-control" placeholder="宽高(20-100)"
                                           ng-model="condition.logoSize"
                                           ui-validate="'$value >= 20&&$value <= 100'" required>
                                    <span class="input-group-addon">px</span>
                                </div>
                            </div>
                        </div>

                        <div class="line line-dashed b-b line-lg pull-in"></div>
                        <div class="form-group " desc="网址">
                            <label class="col-xs-12 col-sm-3 control-label">网址</label>
                            <div class="col-xs-9 col-sm-6">
                                <input type="text" class="form-control" placeholder="http://www.washpayer.com"
                                       ng-model="condition.domain" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 control-label" tooltip="一般不用修改，否则影响扫码支付">子路径 <i
                                    class="glyphicon glyphicon-info-sign"></i></label>
                            <div class="col-xs-9 col-sm-6">
                                <input type="text" class="form-control" placeholder="/userLogin?l="
                                       ng-model="condition.pathname" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">编号风格</label>
                            <div class="col-sm-3">
                                <div id="colorPicker">
                                </div>
                            </div>
                        </div>

                        <div class="line line-dashed b-b line-lg pull-in"></div>
                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 control-label">生成方式</label>
                            <div class="col-xs-9 col-sm-9">
                                <div class="radio pull-left ">
                                    <label class="i-checks">
                                        <input type="radio" value="serial"
                                               ng-model="condition.dataMod">
                                        <i></i>
                                        连续模式
                                    </label>
                                </div>
                                <div class="radio pull-left m-l">
                                    <label class="i-checks">
                                        <input type="radio" value="batch"
                                               ng-model="condition.dataMod">
                                        <i></i>
                                        自定义输入
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div ng-if="condition.dataMod==='serial'">
                            <div class="form-group">
                                <label class="col-xs-12 col-sm-3 control-label">逻辑编号</label>
                                <div class="col-xs-4 col-sm-3 v-middle multiple-input">
                                    <input type="number" class="form-control " placeholder="开始"
                                           ng-model="condition.start"
                                           ui-validate="'$value<=condition.end'" ui-validate-watch=" 'condition.end'"
                                           ng-change="changeStart()"
                                           required>
                                </div>
                                <div style="float: left;padding-left: 5px;line-height: 34px;">-</div>
                                <div class="col-xs-4 col-sm-3 v-middle multiple-input" style="padding-left: 5px">
                                    <input type="number" class="form-control" placeholder="结束" ng-model="condition.end"
                                           ui-validate="'condition.start<=$value'"
                                           ui-validate-watch=" 'condition.start'"
                                           required>
                                </div>
                            </div>
                        </div>

                        <div ng-if="condition.dataMod==='batch'">
                            <div class="form-group">
                                <label class="col-xs-12 col-sm-3 control-label" tooltip="换行分割">逻辑编号 <i
                                        class="glyphicon glyphicon-info-sign"></i></label>
                                <div class="col-sm-7">
                                       <textarea ng-model="condition.logicalCodeList" style="height: 200px;"
                                                 class="form-control" placeholder="输入逻辑码，换行分割"></textarea>
                                </div>
                                <div class="col-sm-2">{{condition.logicalCodeList.split("\n").length}}行</div>
                            </div>
                        </div>

                        <div class="line line-dashed b-b line-lg pull-in"></div>
                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 control-label" tooltip="如蓝牙前缀B，一般设备无需设置">编号前缀 <i
                                    class="glyphicon glyphicon-info-sign"></i></label>
                            <div class="col-xs-4 col-sm-3">
                                <input type="text" class="form-control" placeholder=""
                                       ng-model="condition.prefix">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 control-label" tooltip="如充电桩的充电线路">子编号 <i
                                    class="glyphicon glyphicon-info-sign"></i></label>
                            <div class="col-xs-4 col-sm-3 multiple-input">
                                <input type="number" class="form-control" placeholder="开始"
                                       ng-model="condition.subStart"
                                       ng-disabled="!condition.subIndex"
                                       ui-validate="'$value<=condition.subEnd'"
                                       ui-validate-watch=" 'condition.subBnd'"
                                       required>
                            </div>
                            <div class="col-xs-4 col-sm-3 multiple-input">
                                <input type="number" class="form-control" placeholder="结束"
                                       ng-model="condition.subEnd"
                                       ng-disabled="!condition.subIndex"
                                       ui-validate="'condition.subStart<=$value'"
                                       ui-validate-watch=" 'condition.subStart'"
                                       required>
                            </div>
                            <div class="col-xs-4 col-sm-3 multiple-input">
                                <div class="checkbox">
                                    <label class="i-checks">
                                        <input type="checkbox" ng-model="condition.subIndex" value="">
                                        <i></i>
                                        启用
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="line line-dashed b-b line-lg pull-in"></div>
                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 control-label">文件名称</label>
                            <div class="col-xs-9 col-sm-6">
                                <input type="text" class="form-control" placeholder="文件名" ng-model="condition.fileName">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 control-label">文件格式</label>
                            <div class="col-xs-9 col-sm-9">
                                <div class="radio pull-left ">
                                    <label class="i-checks">
                                        <input type="radio" value="jpeg"
                                               ng-model="condition.fileSuffix">
                                        <i></i>
                                        jpeg
                                    </label>
                                </div>
                                <div class="radio pull-left m-l">
                                    <label class="i-checks">
                                        <input type="radio" value="png"
                                               ng-model="condition.fileSuffix">
                                        <i></i>
                                        png
                                    </label>
                                </div>
                            </div>
                        </div>

                    </div>
                    <footer class="panel-footer text-right bg-light lter">
                        <progressbar class="progress-striped m-b-sm" ng-show="pageStatus.progressShow"
                                     value="pageStatus.progress" type="success">{{pageStatus.progress}}% <span
                                ng-show="pageStatus.progressComplete">（已经全部生成，即将自动下载）</span></progressbar>

                        <button type="submit" class="btn btn-dark pull-left" ng-disabled="qrCodeForm.$invalid"
                                ng-click="savePlan()"><i class="fa fa-save"></i> 缓存方案
                        </button>

                        <button type="submit" class="btn btn-info" ng-disabled="qrCodeForm.$invalid"
                                ng-click="previewQRCode()"><i class="fa fa-qrcode"></i> 查看效果
                        </button>
                        <button type="submit" class="btn btn-success" ng-disabled="qrCodeForm.$invalid"
                                ng-click="getZip()"><i class="fa fa-download"></i> 生成并下载
                        </button>

                    </footer>
                </div>
            </form>
        </div>

        <div class=" col-sm-8 ">
            <div class="panel panel-default">
                <div class="panel-body form-horizontal">
                    <div class="form-group ">
                        <div class="col-sm-12 text-center">
                            <img id="previewImg" style="box-shadow: 0 0 4px #ccc;background: #fff" width="200"
                                 height="230"/>
                        </div>
                    </div>

                    <div class="form-group ">
                        <label class="col-sm-2 control-label">扫描结果</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="" readonly
                                   ng-model="previewData.url">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--加上modal-default从而重置modal的默认样子；使用原生的bootstrap模式，modal层是背板，点击modal会关闭。但是这里引入的bootstrap-modal插件，好像无法触发关闭事件，可能和版本有关。如果要完整功能，得优化下版本。。。-->
    <div class="modal fade in modal-default" id="browser_type_error" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        ×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        提示
                    </h4>
                </div>
                <div class="modal-body">
                    微信无法批量下载，请用浏览器打开该页面使用！
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-black" data-dismiss="modal">确定
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>