index.html 24.0 KB

原文件审查历史永久链接

<!DOCTYPE html>
<html lang="zh">
{include file="public/head"}
<!--图片上传-->
<script type="text/javascript" src="__CDN__/assets/store/js/fileupLoad/imgFileupload.js"></script>
<link rel="stylesheet" href="__CDN__/assets/store/js/fileupLoad/imgFileupload.css">
<!--swiper引入-->
<link rel="stylesheet" href="__CDN__/assets/store/js/Swiper-3.4.2/css/swiper.min.css">
<script type="text/javascript" src="__CDN__/assets/store/js/Swiper-3.4.2/js/swiper.min.js"></script>
<style>
    li{
        list-style-type: none;
    }
    .content{
        width: 100%;
        font-size: 0;
        background: rgba(249,249,249,1);
    }
    .content .titleImgContent{
        width: 100%;
        height: 146px;
    }
    .content .titleImgContent img{
        width: 100%;
        height: 100%;
    }

    /*主要内容区域样式*/
    .content .contentBox{
        width: 100%;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 25px;
        color: rgba(91,94,99,1);
        background: rgba(249,249,249,1);
        margin-bottom: 193px;
    }
    .content .contentBox .workerShowBox{
        width: 100%;
        height: 306px;
        margin-bottom: 12px;
        background: rgba(255,255,255,1);
    }
    .content .contentBox .workerShowBox .workerShowMain{
        width: 1200px;
        height: 306px;
        margin: 0 auto;
    }
    .content .contentBox .workerShowBox .workerShowMain .workerShowList{
        position: relative;
        height: 234px;
    }
    .content .contentBox .workerShowBox .workerShowMain .workerShowList .swiper-container{
        width: 1100px;
        height: 100%;
    }
    .content .contentBox .workerShowBox .workerShowMain .workerShowList .swiper-container .swiper-wrapper .swiper-slide{
        padding: 0 5px;
    }
    .content .contentBox .workerShowBox .workerShowMain .workerShowList .swiper-container .swiper-wrapper .swiper-slide p{
        width: 100%;
        height: 20px;
        line-height: 20px;
        text-align: center;
        margin-top: 10px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(6,18,30,1);
    }
    .swiper-scrollbar{
        height: 0!important;
    }
    .swiper-button-next, .swiper-button-prev{
        width: 26px;
        height: 26px;
        background-size: 26px;
        -webkit-background-size: 26px;
    }
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev{
        background-image: url("/assets/store/images/right_icon.png");
    }
    .swiper-button-prev, .swiper-container-rtl .swiper-button-next{
        background-image: url("/assets/store/images/left_icon.png");
    }
    .swiper-slide img {
        width: 175px;
        height: 175px;
    }

    /*title样式*/
    .titleBox{
        width: 1200px;
        height: 62px;
        line-height: 62px;
        margin-bottom: 10px;
    }
    .titleBox span:first-child{
        display: inline-block;
        float: left;
        width: 6px;
        height: 20px;
        margin-top: 21px;
        background: rgba(0,159,142,1);
        border-radius: 2px;
    }
    .titleBox span:last-child{
        height: 22px;
        line-height: 22px;
        float: left;
        margin-top: 20px;
        padding-left: 12px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(0,159,142,1);
    }

    /*维修师傅详细介绍样式*/
    .content .contentBox .personalShowBox{
        width: 100%;
        background: rgba(255,255,255,1);
    }
    .content .contentBox .personalShowBox .personalShowMain{
        width: 1200px;
        min-height: 100px;
        margin: 0 auto;
        padding-bottom: 50px;
    }

    /*在线客服按钮样式*/
    .rightButtons{
        position: fixed;
        width: 64px;
        top: 400px;
        right: 0;
        background: rgba(0,159,142,1);
    }
    .rightButtons span{
        display: block;
        width: 48px;
        margin: 0 auto;
        border-top: 1px solid rgba(255,255,255,1);
    }
    .rightButtons a{
        display: block;
        width: 64px;
        height: 64px;
        text-align: center;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight:500;
        color: rgba(255,255,255,1);
    }
    .rightButtons a img{
        display: block;
        margin: 10px auto 8px auto;
    }

    /*我要维修弹窗样式*/
    .modal-dialog{
        width: 423px;
        height: 709px;
    }
    .modal-header{
        height: 80px;
        border: 0;
    }
    .modal-body{
        padding: 10px 24px 20px 24px;
        max-height: none;
    }
    .modal-title{
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(6,18,30,1);
    }
    form{
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color:rgba(61,68,77,1);
    }
    form .form-group{
        width: 100%;
        height: 54px;
        margin: 0 0 12px 0;
    }
    form .desBox{
        height: 124px;
    }
    form .form-group .form-control{
        width: 100%;
        height: 100%;
        box-shadow: none;
    }
    form .form-group:nth-child(3),form .form-group:nth-child(5){
        position: relative;
    }
    form .form-group:nth-child(3) span{
        display: inline-block;
        position: absolute;
        top: 15px;
        right: 20px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(140,145,152,1);
    }
    form .form-group:nth-child(5) span{
        display: inline-block;
        position: absolute;
        top: 35px;
        left: 12px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 22px;
        color: rgba(140,145,152,1);
    }
    form p{
        height: 22px;
        padding-left: 9px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 22px;
        color: rgba(6,18,30,1);
    }
    form button{
        width: 100%;
        height: 51px;
        border: 0!important;
        background: rgba(0,159,142,1)!important;
        border-radius: 2px!important;
        font-size: 18px!important;
        font-family: PingFang SC;
        font-weight: 400!important;
        color: rgba(255,255,255,1)!important;
    }
    form .imgBox{
        margin-bottom: 20px;
    }

    /*placeholser样式*/
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        font-size: 16px!important;
        font-family: PingFang SC!important;
        font-weight: 500!important;
        color: rgba(6,18,30,1)!important;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
        font-size: 16px!important;
        font-family: PingFang SC!important;
        font-weight: 500!important;
        color: rgba(6,18,30,1)!important;
    }
    input:-ms-input-placeholder, textarea:-ms-input-placeholder {
        font-size: 16px!important;
        font-family: PingFang SC!important;
        font-weight: 500!important;
        color: rgba(6,18,30,1)!important;
    }
    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
        font-size: 16px!important;
        font-family: PingFang SC!important;
        font-weight: 500!important;
        color: rgba(6,18,30,1)!important;
    }
    /*上传图片重置*/
    .imgFileUploade{
        padding: 0 0 16px 0;
    }
</style>
<style>
    .box {
        display: flex;
    }
    .imgClick {
        width: 150px!important;
        height: 96px!important;
        font-size: 0;
        position: relative;
        background: url(/assets/store/images/idCardBoxFileupload.png) no-repeat;
    }
    .imgClick input {
        display: flex;
        width: 150px;
        height: 96px;
        opacity: 0;
        /*position: absolute;*/
        top: 0;
        left: 0;
    }
    .images{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding-left:0!important;
        padding-right: 0!important;
    }
    .images_content {
        display: flex;
        flex-wrap: wrap;
    }
    .imagesItem{
        width:150px!important;
        height:96px!important;
        font-size: 0;
        display:flex;
        align-items: center;
        position: relative;
        /*padding: 0 10px 0 0!important;*/
    }
    .imagesItem img{
        width:100%;
        height:100%;
    }
    .closeImage{
        position: absolute;
        top: -5px;
        right: 5px;
        width: 18px!important;
        height: 18px!important;
        background: rgba(197, 197, 197, 1);
        border-radius: 50%;
        padding: 0!important;
        font-size: 16px;
        text-align: center;
        line-height: 18px;
        color: #efefef;
        font-style: normal;
        cursor: pointer;
        z-index: 777;
    }
</style>
<body>
{include file="public/header"}
<!--主要内容-->
<div class="content">
    {include file="public/nav"}
    <!--标题图片-->
    <div class="titleImgContent">
        <img src="__CDN__/assets/store/images/repairImg.png" alt="img">
    </div>
    <!--主要内容-->
    <div class="contentBox">
        <!--维修师傅展示-->
        <div class="workerShowBox">
            <div class="workerShowMain">
                <div class="titleBox">
                    <span></span>
                    <span>维修师傅简介</span>
                </div>
                <div class="workerShowList">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            {volist name="maintainer" id="vo"}
                            <div class="swiper-slide">
                                <img src="{$vo.thumbnail}" alt="img">
                                <p>{$vo.name}</p>
                            </div>
                            {/volist}
                        </div>
                    </div>
                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </div>
        </div>

        <!--维修师傅个人介绍-->
        <div class="personalShowBox">
            <div class="personalShowMain">
                <div class="titleBox">
                    <span></span>
                    <span>维修服务</span>
                </div>
                <div id="personalShowText">
                    {$maintain.content}
                </div>
            </div>
        </div>
    </div>
</div>

<!--右侧功能按钮-->
<div class="rightButtons">
    <a href="tencent://message/?uin={$site.service_qq}&Site=baidu.com&Menu=yes">
        <img src="__CDN__/assets/store/images/onlineService.png" alt="onlineService">
        在线客服
    </a>
    <span></span>
    <a href="javascript:void(0);" onclick="showModel()">
        <img src="__CDN__/assets/store/images/wrench_icon.png" alt="onlineService">
        我要维修
    </a>
</div>

<!--我要维修模态窗-->
<div class="modal fade" id="repairInfoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    <img src="__CDN__/assets/store/images/close_icon.png" alt="close">
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    我要维修
                </h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <input type="text" class="form-control" id="userName" placeholder="姓名">
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" id="phoneNum" placeholder="手机号">
                    </div>
                    <div style="display: flex;">
                        <div class="form-group">
                            <select id="province" class="form-control" placeholder="请选择省份">
                                <option value="">请选择</option>
                                {foreach name="$province" item="p"}
                                <option value="{$p.id}">{$p.name}</option>
                                {/foreach}
                            </select>
                        </div>
                        <div class="form-group">
                            <select id="city" class="form-control" placeholder="请选择城市">
                                <option value="">请选择</option>
                                <!--{foreach name="$city" item="c"}
                                <option value="{$c.id}">{$c.name}</option>
                                {/foreach}-->
                            </select>
                        </div>
                        <div class="form-group">
                            <select id="county" class="form-control" placeholder="请选择省份">
                                <option value="">请选择</option>
                                <!--{foreach name="$county" item="c"}
                                <option value="{$c.id}">{$c.name}</option>
                                {/foreach}-->
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" id="addressDetail" placeholder="详细地址">
                    </div>
                    <div class="form-group desBox">
                        <textarea  class="form-control" id="demandDes" placeholder="需求描述" onfocus="textareaFocus()" onblur="textareaBlur()"></textarea>
<!--                        <span id="textareaTips" onclick="textareaTipsClick()">告诉我们如何为你提供帮助</span>-->
                    </div>
                    <p>上传图片</p>
                    <div class="uploadBox imgBox" style="width: 100%;">
                        <!--<img src="images/repairModalImg.png" alt="img">-->
                        <div class="box">
                            <div class="images">
                                <div class="images_content">
                                    <div class="imgClick">
                                        <input type="file" name="file" multiple id="refundBox"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-submit">发送</button>
                </form>
            </div>
        </div>
    </div>
</div>
{include file="public/footer"}
<!--begin:提示弹层-->
<div class="toast">提示框</div>
<div class="bg"></div>
<script>
    $(function () {
        initSwiper();
    });
    //初始化swiper
    function initSwiper() {
        var mySwiper = new Swiper ('.swiper-container', {
            loop: true,
            slidesPerView: 6,
            // 如果需要分页器
            // pagination: '.swiper-pagination',
            // 如果需要前进后退按钮
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            // 如果需要滚动条
            // scrollbar: '.swiper-scrollbar',
        })
    }

    //更换省份
    $("#province").on("change",function(){
        var province_id2 = $(this).val();
        getCity(province_id2);
        getCounty();
    });

    //更换城市
    $("#city").on("change",function(){
        var city_id2 = $(this).val();
        getCounty(city_id2);
    });

    //获取省份
    function getProvince(pid = 0,select_id = 0){
        $.ajax({
            url:"{:url('index/sundry/get_area')}",
            type:"POST",
            data:{"pid":pid,'level':1},
            success:function (res) {
                console.log(res);
                var html = "<option value=\"\">请选择</option>";
                if(res.code == 1){
                    $(res.data).each(function (key1, vo) {
                        var is_select = "";
                        if(select_id == vo.id){
                            is_select = "selected";
                        }
                        html += "<option value=\""+vo.id+"\" "+is_select+">"+vo.name+"</option>";
                    });
                }
                console.log(html);
                $('#province').html(html);
            },
            error:function (res) {
                toast('与服务器断开连接')
            }
        })
    }

    //获取城市
    function getCity(province_id2, select_id = 0){
        $.ajax({
            url:"{:url('index/sundry/get_area')}",
            type:"POST",
            data:{"pid":province_id2,'level':2},
            success:function (res) {
                console.log(res);
                var html = "<option value=\"\">请选择</option>";
                if(res.code == 1){
                    $(res.data).each(function (key1, vo) {
                        var is_select = "";
                        if(select_id == vo.id){
                            is_select = "selected";
                        }
                        html += "<option value=\""+vo.id+"\" "+is_select+">"+vo.name+"</option>";
                    });
                }
                console.log(html);
                $('#city').html(html);
            },
            error:function (res) {
                toast('与服务器断开连接')
            }
        })
    }

    //获取区/县
    function getCounty(city_id2, select_id = 0){
        $.ajax({
            url:"{:url('index/sundry/get_area')}",
            type:"POST",
            data:{"pid":city_id2,'level':3},
            success:function (res) {
                console.log(res);
                var html = "<option value=\"\">请选择</option>";
                if(res.code == 1){
                    $(res.data).each(function (key1, vo) {
                        var is_select = "";
                        if(select_id == vo.id){
                            is_select = "selected";
                        }
                        html += "<option value=\""+vo.id+"\" "+is_select+">"+vo.name+"</option>";
                    });
                }
                $('#county').html(html);
            },
            error:function (res) {
                toast('与服务器断开连接')
            }
        })
    }
    //我要维修
    function showModel() {
        $('#repairInfoModal').modal();
    }

    //文本域获得焦点
    function textareaFocus() {
        $('#textareaTips').hide();
    }

    //文本域失去焦点
    function textareaBlur() {
        if($('#demandDes').val() == ''){
            $('#textareaTips').show();
        }
    }

    //文本域提示点击
    function textareaTipsClick() {
        $('#demandDes').click();
    }
    var img = [];
    //上传手持身份证照片
    $('body').on('change', '#refundBox', function () {
        var self = $(this);
        var filePath = self.val();
        var fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
        console.log(filePath);
        // 检查是否是图片
        if (filePath == '') {
            toast('未选择任何图片');
            return false;
        }
        if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
            toast('上传错误,文件格式必须为：png/jpg/jpeg');
            return false;
        }
        var files = this.files;
        var img_length = img.length;
        var files_length = files.length;
        if((img_length + files_length) > 5) {
            toast('文件总数不可超过5张');
            return false;
        }
        upload(files,self);
    });
    //上传图片
    function upload(files,self){
        $(files).each(function (key, file) {
            console.log(file);
            var formdata = new FormData();
            formdata.append("file", file);
            $.ajax({
                url: "{:url('api/common/upload')}",
                type: "POST",
                data: formdata,
                cache: false,
                processData: false, // 不处理发送的数据，因为data值是Formdata对象，不需要对数据做处理
                contentType: false, // 不设置Content-type请求头
                success: function (res) {
                    console.log(res);
                    if (res.code == 1) {
                        var html = '<div class="imagesItem">\n' +
                            '                                    <img src="'+res.data.url+'" alt="">\n' +
                            '                                    <div class="closeImage">×</div>\n' +
                            '                                </div>';
                        img.push(res.data.url);
                        $('.imgClick').before(html);
                        // self.parent().prev().append(html);
                        // idCardImgFileArr.push(res.data.url);
                    }
                },
                error: function(res){
                    toast('与服务器断开连接');
                }
            });
        });
    }
    //删除图片
    $('.images').on('click', '.closeImage', function () {
        $(this).parent().remove();
        var src = $(this).prev().attr('src');
        var pos = $.inArray(src,img);
        img.splice(pos,1);
        $('#refundBox').val('');
        console.log(img);
    });
    // 提交退款申请
    var is_allow = true;
    $('.btn-submit').click(function () {
        var name = $('#userName').val();
        var phone = $('#phoneNum').val();
        var province = $('#province option:selected').text();
        var city = $('#city option:selected').text();
        var county = $('#county option:selected').text();
        var address = $('#addressDetail').val();
        var content = $('#demandDes').val();
        var images = img.join(',');
        if(name.length == 0) {
            toast('请填写姓名');
            return false;
        }
        if(phone.length == 0) {
            toast('请填写手机号');
            return false;
        }
        if(province.length == 0) {
            toast('请选择省');
            return false;
        }
        if(city.length == 0) {
            toast('请选择市');
            return false;
        }
        if(county.length == 0) {
            toast('请选择区/县');
            return false;
        }
        if(address.length == 0) {
            toast('请填写详细地址');
            return false;
        }
        if(content.length == 0) {
            toast('请填写需求描述');
            return false;
        }
        var data = {
            name: name,
            phone: phone,
            province: province,
            city: city,
            county: county,
            address: address,
            content: content,
            thumbnail: images
        };
        if(is_allow) {
            is_allow = false;
            $.ajax({
                type: "post",
                url: "{:url('maintain_submit')}",
                data: data,
                dataType: "json",
                success: function (e) {
                    if(e.code == 1) {
                        toast(e.msg,1500,1);
                    } else {
                        toast(e.msg);
                    }
                },
                error: function (e) {
                    console.log(e);
                    toast('网络错误，请重试');
                },
                complete: function () {
                    is_allow = true;
                }
            });
        }
    });
    //提示弹层
    function toast(msg='玩命加载中~',time=2000, location = 0){
        $('.toast').text(msg);
        $('.toast').fadeToggle();
        $('.bg').show();
        setTimeout(function(){
            $('.toast').fadeToggle();
            $('.bg').hide();
            if(location == 1) {
                window.location.reload();
            }
        },time);
    }
</script>
</body>
</html>