public/themes/simpleboot3/friendship/friend_list.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_834805_0ml90wdq5hzm.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_750594_itt4qc4xfcg.css">
    <link rel="stylesheet" href="__INDEX__/css/base.css">
    <link rel="stylesheet" href="__INDEX__/css/swiper.min.css">
    <script type="text/javascript" src="__INDEX__/js/base.js"></script>
    <title>好友列表</title>
    <style>
        body,html{
            width:100%;
            height:100%;
            background: #fff;
        }
        .fri_list{
            width:7.5rem;
            height:1.2rem;
            padding: 0.2rem 0.32rem;
            display:flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #f5f5f5;
        }
        .friend{
            display:flex;
        }
        .friend_img{
            font-size: 0;
            width:0.8rem;
            height:0.8rem;
            border-radius: 50%;
        }
        .friend_img img{
            width:100%;
        }
        .friend_name{
            height:0.8rem;
            line-height: 0.8rem;
            margin-left: 0.32rem;
            color:#000000;
            font-size: 0.32rem;
        }
        .sendintegral{
            display:flex;
            color:#000000;
            font-size: 0.28rem;
        }
        .inter_img,.friend_inter{
            font-size: 0;
            width:0.3rem;
            height:0.3rem;
        }
        .inter_img{
            margin-right: 0.48rem;
        }
        .inter_img img,.friend_inter img{
            width:100%;
        }
        .head{
            display:flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.36rem 0.32rem;

        }
        .enterword{
            display:flex;
            width:5.26rem;
            height:0.6rem;
            line-height: 0.6rem;
            border-radius: 0.3rem;
            border:1px solid rgba(235,235,235,1);
        }
        .word{
            width:5rem;
            height:0.56rem;
            border:none;
            outline:none;
            margin-left: 0.1rem;
        }
        .icon-sousuo{
            font-size: 0.4rem;
            margin-left: 0.31rem;
        }
        .search_friend{
            width:1.4rem;
            height:0.6rem;
            background:#FE0A01;
            border-radius: 0.3rem;
            font-size: 0.32rem;
            color:#fff;
            text-align: center;
            line-height: 0.6rem;

        }
        /*赠送积分弹出层*/
        .sendwrapper{
            width:100%;
            height:100%;
            background-color: rgba(0,0,0,0.5);
            position:fixed;
            left:0;
            right:0;
            z-index: 5;
        }
        .sendpop{
            width:5.2rem;
            height:4.2rem;
            background: #ffffff;
            border-radius: 10px;
            position: absolute;
            z-index: 6;
            /*left:0.4rem;*/
            /*top: 3rem;*/
            top:40%;
            left:50%;
            transform: translate(-50%,-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
            padding-top: 0.36rem;
        }
        .remaininter{
            color:#1A1A1A;
            font-size: 0.28rem;
            margin: 0 auto;
        }
        .give{
            width:4.8rem;
            color:#1A1A1A;
            font-size: 0.28rem;
            font-weight: bold;
            text-align: left;
            margin-top: 0.35rem;
        }
        .enterinter{
            width:4.81rem;
            height:0.7rem;
            border:1px solid rgba(235,235,235,1);
            border-radius:0.05rem;
            font-size: 0;
            margin-top: 0.19rem;
        }
        .pleaseenter{
            width:4.6rem;
            height:0.6rem;
            border-radius:0.05rem;
            font-size: 0.28rem;
            color:#97A0A8;
            border:none;
            outline:none;
            padding-left: 0.23rem;

        }
        .attention{
            color: #97A0A8;
            font-size: 0.24rem;
            height:0.68rem;
            border-bottom: 1px solid #f5f5f5;
            padding: 0.1rem 0.18rem 0.24rem 0.18rem;
            margin-top: 0.1rem;
        }
        .sure{
            color:#FF0000;
            font-size: 0.32rem;
            padding: 0.31rem 1.91rem;
        }
        /*输入密码弹出层*/
        .passwordwrap{
            width:100%;
            height:100%;
            background-color: rgba(0,0,0,0.5);
            position:fixed;
            left:0;
            right:0;
            z-index: 5;
        }
        .passwordpop{
            width:5.2rem;
            height:2.84rem;
            background: #ffffff;
            border-radius: 10px;
            position: absolute;
            z-index: 6;
            /*left:0.4rem;*/
            /*top: 3rem;*/
            top:40%;
            left:50%;
            transform: translate(-50%,-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
            padding-top: 0.16rem;
        }
        .enterpassword{
            display:flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0;
            margin-top: 0.48rem;
        }
        .enterpassword li{
            width:0.8rem;
            height:0.8rem;
            list-style: none;
            border:1px solid rgba(153,153,153,1);
            text-align: center;
            border-right:0;
        }
        .enterpassword li:last-child{
            border-right:1px solid rgba(153,153,153,1) ;
        }
        .enterpassword li input{
            width:0.77rem;
            height:0.76rem;
            list-style: none;
            text-align: center;
            border:none;

        }
        .pleaseenterword{
            font-size: 0.32rem;
            color:#1A1A1A;
        }
        .icon-quxiao{
            width:5rem;
            color:#999999;
            font-size: 0.3rem;
            text-align: right;
        }
    </style>
</head>
<body>
<!--输入支付密码-->
<div class="passwordwrap" style="display:none">
    <div class="passwordpop">
        <p class="iconfont icon-quxiao"></p>
        <p class="pleaseenterword">输入支付密码</p>
        <ul class="enterpassword" id="wrap">
            <li>
                <input type="number" class="entercode">
            </li>
            <li>
                <input type="number" class="entercode">
            </li>
            <li>
                <input type="number" class="entercode">
            </li>
            <li>
                <input type="number" class="entercode">
            </li>
            <li>
                <input type="number" class="entercode">
            </li>
            <li>
                <input type="number" class="entercode">
            </li>
        </ul>
    </div>
</div>
<!--好友弹出层-->
<div class="sendwrapper" style="display:none">
    <div class="sendpop">
        <p class="remaininter">您还剩余200积分</p>
        <P class="give">赠送xxx好友积分</P>
        <div class="enterinter">
            <input type="text" class="pleaseenter" placeholder="输入赠送积分值"  >
        </div>
        <div class="attention">
            积分赠送属个人操作，赠送错误平台概不负责
        </div>
        <div class="sure">确定赠送</div>
    </div>
</div>
<div class="container">
    <form action="{:url('friendship/Friend/friendList')}" method="post">
    <div class="head">
        <div class="enterword">
            <p class="iconfont icon-sousuo"></p>
            <input type="text" name="keyword" class="word" value="{$keyword}">
        </div>
        <label for="SUBMIT"><p class="search_friend">搜索</p></label>
        <input id="SUBMIT" type="submit" style="display: none">
    </div>
    </form>
    <div class="friendlist">
        <volist name="list" id="vo">
        <div class="fri_list">
            <div class="friend">
                <p class="friend_img">
                    <img src="{$vo.avatar}" alt="">
                </p>
                <p class="friend_name">
                    {$vo.user_nickname}
                </p>
            </div>

            <div class="sendintegral">
                <p class="inter_img">
                    <img src="__INDEX__/img/jifen.png" alt="">
                </p>
                <P class="friend_inter" data-id="{$vo.friend_id}">
                    <img src="__INDEX__/img/jiahaoyou.png" alt="">
                </P>
            </div>
        </div>
        </volist>
    </div>

</div>
</body>
<script type="text/javascript" src="__INDEX__/js/jquery.min.js"></script>
<script>

    $(".pleaseenter").click(function(){
        window.event.stopPropagation();
    })
    $(".inter_img").click(function(){
        $(".sendwrapper").css("display","block");
    })
    $(".sendwrapper").click(function(){
        $(this).css("display","none")
    })
    //确定赠送
    $(".sure").click(function(){
        window.event.stopPropagation()
        $(".sendwrapper").css("display","none");
        $(".passwordwrap").css("display","block")
    })
    $(".icon-quxiao").click(function(){
        window.event.stopPropagation()
        $(".passwordwrap").css("display","none")
    })

    $(".friend_inter").click(function () {
        if(!window.confirm('是否添加此人为好友')) {
            return false;
        }else {
            $.ajax({
                url: "{:url('friendship/Friend/donateIntegral')}",
                data: {
                    friend_id: $(this).attr('data-id'),
                    total: 0
                },
                type: "POST",
                dataType: "JSON",

                success: function (data) {
                    if(data.status === true)
                    alert(data.msg);
                }
            })
        }
    })


    //输入的密码自动输入到下一个
    onload = function(){
        var arr=[];
        var str=""
        var txts = wrap.getElementsByClassName("entercode");
        console.log(txts)
        for(var i = 0; i<txts.length;i++){
            var t = txts[i];
            t.index = i;
            if(t.index>0){
                t.setAttribute("readonly", true);
            }
            t.onkeyup=function(){

                var regular = /\s+/g;
                if(regular.test(this.value)){
                    $(this).focus();
                }else if($(this).val()==""){
                    $(this).focus();
                }else{
                    console.log($(this).val());
                    arr.push($(this).val());
                    var next = this.index + 1;
                    if(next > txts.length - 1) return;
                    txts[next].removeAttribute("readonly");
                    txts[next].focus();
                }
            }
            if(t.index==5){
                t.onkeyup=function(){
                    arr.push($(this).val())
                    console.log(arr);
                    var str=arr[0]+arr[1]+arr[2]+arr[3]+arr[4]+arr[5];
                    console.log(str)
                }
            }

        }
        txts[0].removeAttribute("readonly");
    }
</script>
</html>