Apq
/
FeHelper
oglindă de https://github.com/zxlie/FeHelper.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
							<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <title>二维码生成工具</title>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="../static/img/favicon.ico">
    <link rel="stylesheet" href="index.css" />
    <script type="text/javascript" src="../static/vendor/evalCore.min.js"></script>
    <script type="text/javascript" src="../static/vendor/vue/vue.js"></script>
</head>
<body>

    <div class="wrapper" id="pageContainer">
        <div class="panel panel-default" style="margin-bottom: 0px;">
            <div class="panel-heading">
                <h3 class="panel-title">
                    <span class="title-text-wrapper">
                        <a href="https://fehelper.com" target="_blank" class="x-a-high">
                            <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a><span class="title-text-wrapper-text">| {{codeType==='barcode'?'条形码':''}}{{codeType!=='barcode'?'二维码':''}}{{qrEncodeMode? '生成':'解码'}}器</span>
                    </span>
                    <span class="x-switch" ref="btnSwitch" @click="trans">切换为{{!qrEncodeMode? ' 二维码生成器 ' : ' 解码/扫码 '}}模式&gt;&gt;</span>
                    <a class="x-other-tools" @click="openOptionsPage($event)"><i class="icon-plus-circle"></i> 探索更多实用工具 <span class="tool-market-badge">工具市场</span></a>
                    <span class="x-donate-link" @click="openDonateModal($event)"><a href="#" id="donateLink"><i class="nav-icon">❤</i>&nbsp;打赏鼓励</a></span>
                </h3>
            </div>
        </div>

        <div class="panel-body mod-json">

            <div v-if="qrEncodeMode">
                <div class="qr-layout">
                    <!-- 左侧：文本输入区域 -->
                    <div class="qr-left">
                        <div class="section-title">输入内容</div>
                        <textarea class="form-control mod-textarea" id="codeSource" ref="codeSource" v-model="textContent" placeholder="在这里填写需要生成二维码的任意内容"></textarea>
                    </div>

                    <!-- 中间：操作区域 -->
                    <div class="qr-center">
                        <div class="section-title">参数设置</div>
                        <div class="control-panel">
                            <div class="control-item">
                                <label>类型：</label>
                                <select v-model="codeType" @change="convert()" class="x-select">
                                    <option value="qrcode">二维码</option>
                                    <option value="barcode">条形码</option>
                                </select>
                            </div>

                            <div class="control-item" v-show="codeType==='barcode'">
                                <label>格式：</label>
                                <select v-model="barcodeFormat" @change="convert()" class="x-select">
                                    <option value="CODE128">Code 128</option>
                                    <option value="CODE39">Code 39</option>
                                    <option value="EAN13">EAN-13</option>
                                    <option value="EAN8">EAN-8</option>
                                    <option value="UPC">UPC</option>
                                    <option value="ITF14">ITF-14</option>
                                </select>
                            </div>

                            <div class="control-item" v-show="codeType==='qrcode'">
                                <label>尺寸：</label>
                                <input name="opt_width" type="text" id="opt_width" v-model="qrSize" size="4" maxlength="4"/>
                            </div>
                            
                            <div class="control-item" v-show="codeType==='qrcode'">
                                <label>颜色：</label>
                                <input type="text" id="opt_fc" v-model="qrColor" size="10" />
                            </div>

                            <div class="control-item" v-show="codeType==='qrcode'">
                                <div class="radio ui-d-ib x-icons">
                                    图标：<label><input id="remove_icon" name="qr_icon" type="radio" value="no" v-model="useIcon" @click="convert()">不要</label>
                                    <label><input id="default_icon" name="qr_icon" type="radio" value="default" v-model="useIcon" @click="convert()">默认</label>
                                    <label><input id="upload_icon" name="qr_icon" type="radio" value="custom" v-model="useIcon" @click="$refs.fileBox.click()">上传</label>
                                </div>
                            </div>

                            <div class="control-item">
                                <button id="confirm_button" class="btn btn-success" @click="convert()">{{codeType==='barcode' ? '生成条形码' : '生成二维码'}}</button>
                            </div>
                        </div>
                    </div>

                    <!-- 右侧：结果预览区域 -->
                    <div class="qr-right">
                        <div class="section-title">
                            生成结果
                            <div class="action-buttons" v-if="showResult">
                                <button class="btn-action" id="copy_button" @click="copyQR">复制</button>
                                <button class="btn-action" id="download_button" @click="downloadQR">下载</button>
                            </div>
                        </div>
                        <div id="preview"><svg id="barcodeSvg" style="display:none"></svg></div>
                    </div>
                </div>
            </div>

            <!-- 二维码解码模式 -->
            <div class="qr-decoder-layout" v-if="!qrEncodeMode">
                <!-- 左侧：图片上传/预览 -->
                <div class="decoder-left">
                    <div class="section-title">上传或粘贴图片</div>
                    <div class="upload-panel" ref="panelBox">
                        <img id="decodePreview" alt="" :src="previewSrc" v-show="!!previewSrc.length">
                        <div class="upload-instructions" v-show="!previewSrc.length">
                            <a id="upload" href="#" ref="uploadBox" @click="$refs.fileBox.click()">选择图片</a>
                            <span class="drag-drop-text">或拖拽图片到这里</span>
                        </div>
                    </div>
                    <div class="decoder-tips tips">
                        1、支持<i>屏幕截图</i>后直接在此处粘贴进行解码<br/>
                        2、支持<i>复制文件、复制图片</i>在线地址在此处直接粘贴进行解码
                    </div>
                </div>

                <!-- 右侧：解码结果 -->
                <div class="decoder-right">
                    <div class="section-title">解码结果</div>
                    <textarea id="decodeResult" title="点击自动选择" placeholder="解码结果将显示在这里..." readonly ref="resultBox" @click="select()" v-model="resultContent" class="form-control mod-textarea"></textarea>
                </div>
            </div>

        </div>

        <div class="x-logo">
            <img src="../static/img/fe-48.png" alt="#" id="logo_default" ref="logoDefault"/>
            <img src="../static/img/fe-48.png" alt="#" id="logo" ref="logoCustom"/>

            <form action="#">
                <input type="file" id="file" ref="fileBox" accept=".jpg,.jpeg,.gif,.png,.bmp" @change="fileChanged($event)">
            </form>
        </div>
    </div>

    <script type="text/javascript" src="../static/vendor/jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../static/vendor/jquery/jquery.colorpicker.js"></script>
    <script type="text/javascript" src="../static/vendor/jquery/jquery.qrcode.min.js"></script>
    <script type="text/javascript" src="../static/vendor/zxing/zxing.min.js"></script>
    <script type="text/javascript" src="../static/vendor/jsbarcode/JsBarcode.all.min.js"></script>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>