<view class="page">
    <view class="page__hd">
        <view class="page__title">Qrcode</view>
        <view class="page__desc">二维码</view>
    </view>
    <view class="page__bd">
        <view class="sub-title">请输入文字，即时输入即时生成</view>
        <wux-cell-group>
            <wux-cell hover-class="none">
                <wux-textarea hasCount rows="3" placeholder="支持文本、网址和电子邮箱" maxlength="300" value="{{ value }}" controlled bind:change="onChange" />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="留白">
            <wux-cell hover-class="none">
                <wux-slider value="{{ [whiteSpace] }}" controlled showValue showMark step="10" min="0" max="20" bind:change="onSliderChange" />
            </wux-cell>
        </wux-cell-group>
        <view class="sub-title">提示：支持在微信中长按识别；同时，也支持点击图片进入保存页面长按图片可以保存</view>
        <view class="qrcode">
            <wux-qrcode
                id="qrcode"
                data="{{ value }}"
                fg-color="{{ fgColor }}"
                width="200"
                height="200"
                whiteSpace="{{ whiteSpace }}"
                showMenuByLongpress
                qrcodeStatus="{{ qrcodeStatus }}"
                bind:load="QRCodeLoad"
                bind:error="QRCodeError"
                bind:click="previewImage"
                bind:refresh="onRefresh"
            />
            <wux-button block type="light" bind:click="downloadQRCode">保存图片到系统相册</wux-button>
        </view>
    </view>
</view>
