分享一款基于aui框架的图文发布界面 [复制链接]

2019-7-22 16:19
兰州拉面 阅读:84 评论:0 赞:0
Tag:  aui;图文发布

本文出自APICloud官方论坛,
感谢论坛版主 川哥哥 的分享。

分享一款基于aui框架的图文发布界面,可以添加多张图可以删除,类似qq空间发布说说,没做服务器后端,只演示前端操作。
需要用到UIMediaScanner模块
图片描述

项目源码:
<!DOCTYPE html>
<html>

    <head>
            <meta charset="utf-8">
            <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
            <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
            <link rel="stylesheet" type="text/css" href="../css/aui.css" />
            <style>
                    .sm textarea {
                            color: #979797;
                            height: 6.4rem
                    }
                    .aui-list {
                            border-top: none;
                    }
                    @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
                            .aui-list {
                                    border: none;
                                    background-size: 100% 0px;
                            }
                    }
                    .aui-list .aui-list-item:active {
                            background-color: #FFFFFF;
                    }
                    .imglist {
                            width: 100%;
                            clear: both;
                            margin: 1rem auto;
                    }
                    .imglist img {
                            width: 4rem;
                            height: 4rem;
                    }
                    .add {
                            width: 4rem;
                            height: 4rem;
                            background: url(../res/add.png) no-repeat;
                            background-size: 100% 100%;
                            float: left;
                            margin-right: 1rem;
                    }
                    .addimg {
                            float: left;
                            height: 4rem;
                            width: 4rem;
                            margin-right: 1rem;
                            margin-bottom: 1rem;
                    }
                    .addimg img {
                            width: 4rem;
                            height: 4rem;
                    }
                    .addimg .x img {
                            width: 0.8rem;
                            height: 0.8rem;
                            position: relative;
                            top: -4.4rem;
                            left: -0.5rem;
                    }
                    /*遮罩层*/
                    .mask {
                            width: 100%;
                            height: 100%;
                            background: rgba(0, 0, 0, .5);
                            position: fixed;
                            top: 0;
                            left: 0;
                            z-index: 999;
                            display: none;
                    }
                    .alert {
                            width: 12rem;
                            height: 7.42rem;
                            border-radius: 0.2rem;
                            background: #fff;
                            font-size: 0.75rem;
                            text-align: center;
                            position: absolute;
                            left: 50%;
                            top: 50%;
                            margin-left: -6rem;
                            margin-top: -4.2rem;
                    }
                    .alert p:nth-child(1) {
                            line-height: 5rem;
                            border-bottom: 1px solid #EBEBEB;
                            font-size: 0.9rem;
                    }
                    .alert p:nth-child(2) span {
                            display: inline-block;
                            width: 49%;
                            height: 2.4rem;
                            line-height: 2.4rem;
                            float: left;
                            font-size: 0.8rem;
                    }
                    .cancel {
                            border-right: 1px solid #EBEBEB;
                            color: #00BB3D;
                    }
                    .sure {
                            color: #F60;
                    }

</style>

    </head>
    <body>
            <header class="aui-bar aui-bar-nav">
                    <a class="aui-btn aui-pull-left"> <span class="aui-iconfont aui-icon-left"></span>  返回</a>
                    <div class="aui-title">
                            新生指引
                    </div>
                    <a class="aui-pull-right" >发 表</a>
            </header>
            <div class="aui-card-list">
                    <div class="aui-content aui-margin-b-15">
                            <ul class="aui-list aui-form-list">
                                    <li class="aui-list-item">
                                            <div class="aui-list-item-inner sm">
                                                    <textarea id="sm" placeholder="说点什么吧" ></textarea>
                                            </div>
                                    </li>
                                    <li class="aui-list-item">
                                            <div class="imglist">
                                                    <div class="add" onclick="upimg()"></div>
                                            </div>
                                            <div class="mask">
                                                    <div class="alert">
                                                            <p>
                                                                    确定要删除这张图片吗?
                                                            </p>
                                                            <p>
                                                                    <span class="cancel">取消</span>
                                                                    <span class="sure">确定</span>
                                                            </p>
                                                    </div>
                                            </div>
                                    </li>
                            </ul>
                            <ul class="aui-list aui-list-in">
                                    <li class="aui-list-item">
                                            <div class="aui-list-item-label-icon">
                                                    <i class="aui-iconfont aui-icon-location aui-text-success"></i>
                                            </div>
                                            <div class="aui-list-item-inner">
                                                    <div class="aui-list-item-title">
                                                            地址
                                                    </div>
                                                    <div class="aui-list-item-right">
                                                            <input type="checkbox" checked class="aui-switch"  id="ts">
                                                    </div>
                                            </div>
                                    </li>
                            </ul>
                    </div>
            </div>
    </body>
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript">
            apiready = function() {
                    $api.fixStatusBar($api.dom('.aui-bar'));
            };
            function upimg() {
                    api.actionSheet({
                            title : '上传照片',
                            cancelTitle : '取消',
                            buttons : ['拍照', '相册']
                    }, function(ret, err) {
                            if (ret) {
                                    getPicture(ret.buttonIndex);
                            }
                    });
            }
            function getPicture(sourceType) {
                    if (sourceType == 1) {
                            api.getPicture({
                                    sourceType : 'camera',
                                    encodingType : 'png',
                                    mediaValue : 'pic',
                                    allowEdit : false,
                                    saveToPhotoAlbum : false
                            }, function(ret, err) {
                                    var imgs = $api.dom(".imglist");
                                    var imgList = document.getElementsByClassName("addimg");
                                    if (!ret.data.length) {
                                    } else {
                                            if (imgList.length >= 6) {
                                                    api.toast({
                                                            msg : '不能再添加啦',
                                                            duration : 3000,
                                                            location : 'bottom'
                                                    });
                                            } else {
                                                    var dcc = document.createElement("div");
                                                    dcc.setAttribute("class", "addimg");
                                                    dcc.setAttribute("onclick", "yichu(this)");
                                                    dcc.innerHTML = '<div onclick="yichu(this)"><img src="' + ret.data + '"/><div class="x" ><img src="../res/x.png"/></div></div>';
                                                    prependChild(dcc, imgs)
                                            }
                                    }
                            });
                    } else if (sourceType == 2) {
                            var obj = api.require('UIMediaScanner');
                            obj.open({
                                    type : 'picture',
                                    column : 4,
                                    max : 6,
                                    classify : true,
                                    sort : {
                                            key : 'time',
                                            order : 'desc'
                                    },
                                    texts : {
                                            stateText : '已选择*项',
                                            cancelText : '取消',
                                            finishText : '完成'
                                    },
                                    styles : {
                                            bg : '#fff',
                                            mark : {
                                                    icon : '',
                                                    position : 'top_right',
                                                    size : 28
                                            },
                                            nav : {
                                                    bg : '#eee',
                                                    stateColor : '#000',
                                                    stateSize : 16,
                                                    cancleBg : 'rgba(0,0,0,0)',
                                                    cancelColor : '#000',
                                                    cancelSize : 16,
                                                    finishBg : 'rgba(0,0,0,0)',
                                                    finishColor : '#000',
                                                    finishSize : 16
                                            }
                                    }
                            }, function(ret) {
                                    var imgs = $api.dom(".imglist");
                                    var imgList = document.getElementsByClassName("addimg");
                                    if (ret.eventType == 'cancel') {
                                    } else if (ret.list.length > 0) {
                                            if (imgList.length >= 6) {
                                                    api.toast({
                                                            msg : '不能再添加啦',
                                                            duration : 3000,
                                                            location : 'bottom'
                                                    });
                                            } else {
                                                    for (var i = 0; i < ret.list.length; i++) {
                                                            var dcc = document.createElement("div");
                                                            dcc.setAttribute("class", "addimg");
                                                            dcc.setAttribute("onclick", "yichu(this)");
                                                            dcc.innerHTML = '<img src="' + ret.list[i].thumbPath + '"/><div class="x" ><img src="../res/x.png"/></div>';
                                                            prependChild(dcc, imgs)
                                                    }
                                            }
                                    }
                            });
                    }
            }
            function yichu(el) {
                    $api.css($api.dom(".mask"), 'display:block');
                    $api.dom(".cancel").onclick = function() {
                            $api.css($api.dom(".mask"), 'display:none');
                    };
                    $api.dom(".sure").onclick = function() {
                            $api.css($api.dom(".mask"), 'display:none');
                            $api.remove(el);
                    };
            }
            function prependChild(html, el) {
                    if (el.hasChildNodes()) {
                            el.insertBefore(html, el.firstChild);
                    } else {
                            el.appendChild(html);
                    }
            }

</script>
</html>
复制代码


我来说两句
您需要登录后才可以评论 登录 | 立即注册
facelist
所有评论(0)
领先的中文移动开发者社区
18620764416
7*24全天服务
意见反馈:1294855032@qq.com

扫一扫关注我们

Powered by Discuz! X3.2© 2001-2019 Comsenz Inc.( 粤ICP备15117877号 )