图片右上角添加删除

一、css

    /*图片适用大小*/
    img { 
        width: 100%;
        height: 100%;
    }
    .imgAll li { /*图片容器position: relative属性*/
        width: 100px;
        height: 100px;
        border: solid 1px #ccc;
        margin: 8px 5px;
        float: left;
        position: relative;
        box-shadow: 0 0 10px #eee;
    }
    .delImg {
        position: absolute;
        top: -10px;
        right: -7px;
        width: 22px;
        height: 22px;
        background: #000;
        border-radius: 50%;
        display: block;
        text-align: center;
        line-height: 22px;
        color: #fff;
        font-weight: 700;
        font-style: normal;
        cursor: pointer;
        /* Rotate div */
        transform: rotate(45deg);
        -ms-transform: rotate(45deg); /* Internet Explorer */
        -moz-transform: rotate(45deg); /* Firefox */
        -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
        -o-transform: rotate(45deg); /* Opera */
    }

二、html

                        <ul class="imgAll">
                            <li>
                                <img class="cover-img" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzE0MHgxNDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNTEwYmJhZjQzYSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1MTBiYmFmNDNhIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQ0LjA1NDY4NzUiIHk9Ijc0LjUiPjE0MHgxNDA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" alt="..." class="radius">
                                <span class="delImg">+</span>
                            </li>
                            <li>
                                <img class="cover-img" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzE0MHgxNDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNTEwYmJhZjQzYSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1MTBiYmFmNDNhIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQ0LjA1NDY4NzUiIHk9Ijc0LjUiPjE0MHgxNDA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" alt="..." class="radius">
                                <span class="delImg">+</span>
                            </li>
                            <li>
                                <img class="cover-img" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzE0MHgxNDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNTEwYmJhZjQzYSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1MTBiYmFmNDNhIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQ0LjA1NDY4NzUiIHk9Ijc0LjUiPjE0MHgxNDA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" alt="..." class="radius">
                                <span class="delImg">+</span>
                            </li>
                            <li>
                                <img class="cover-img" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzE0MHgxNDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNTEwYmJhZjQzYSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1MTBiYmFmNDNhIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQ0LjA1NDY4NzUiIHk9Ijc0LjUiPjE0MHgxNDA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" alt="..." class="radius">
                                <span class="delImg">+</span>
                            </li>
                            <li>
                                <img class="cover-img" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzE0MHgxNDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNTEwYmJhZjQzYSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1MTBiYmFmNDNhIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQ0LjA1NDY4NzUiIHk9Ijc0LjUiPjE0MHgxNDA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" alt="..." class="radius">
                                <span class="delImg">+</span>
                            </li>
                            <li>
                                <img class="cover-img" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzE0MHgxNDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNTEwYmJhZjQzYSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1MTBiYmFmNDNhIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQ0LjA1NDY4NzUiIHk9Ijc0LjUiPjE0MHgxNDA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" alt="..." class="radius">
                                <span class="delImg">+</span>
                            </li>
                        </ul>

@using Webdiyer.WebControls.Mvc;
@model Webdiyer.WebControls.Mvc.PagedList<MyDB.Capital>

@{
    ViewBag.Title = "海外地产";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style>

    /*房源图片上传进度条*/
    .progress {
        position: absolute;
        top: 35%;
        left: 0;
        box-sizing: border-box;
        padding: 1px;
        width: 100%;
        border: none;
        border-radius: 3px;
        background-color: rgba(164, 159, 159, .5);
    }

    .bar {
        width: 0;
        height: 20px;
        border-radius: 3px;
        background-color: #03a9f4;
        -webkit-transition: width .6s ease;
        -o-transition: width .6s ease;
        transition: width .6s ease;
    }

    .percent {
        position: absolute;
        top: 3px;
        left: 33%;
        display: inline-block;
        color: #fff;
    }

    .progressBg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 5;
        display: none;
        width: 100%;
        height: 100%;
    }

    .sp_b {
        position: absolute;
        width: 1rem;
        height: 1rem;
        background: url('../../Images/delete.png') center no-repeat;
        background-size: cover;
    }
    /*图片适用大小*/
    img { 
        width: 100%;
        height: 100%;
    }
    .imgAll li { /*图片容器position: relative属性*/
        width: 100px;
        height: 100px;
        border: solid 1px #ccc;
        margin: 8px 5px;
        float: left;
        position: relative;
        box-shadow: 0 0 10px #eee;
    }
    .delImg {
        position: absolute;
        top: -10px;
        right: -7px;
        width: 22px;
        height: 22px;
        background: #000;
        border-radius: 50%;
        display: block;
        text-align: center;
        line-height: 22px;
        color: #fff;
        font-weight: 700;
        font-style: normal;
        cursor: pointer;
        /* Rotate div */
        transform: rotate(45deg);
        -ms-transform: rotate(45deg); /* Internet Explorer */
        -moz-transform: rotate(45deg); /* Firefox */
        -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
        -o-transform: rotate(45deg); /* Opera */
    }


</style>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 海外地产 <span class="c-gray en">&gt;</span> @ViewBag.Title <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:Refresh();" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
    <div class="text-c">
        <form id="searchForm" action="@Url.Content("~/Capital/CapitalList")" method="get">
            <input type="text" name="keyword" id="keyword" placeholder=" 地产名称" style="250px" class="input-text">
            <button name="" id="searchBtn" class="btn btn-success" type="submit"><i class="Hui-iconfont">&#xe665;</i> 搜索</button>
        </form>
    </div>
    <div id="addSection" class="cl pd-5 bg-1 bk-gray mt-20">
        <span class="l">
            @*<a href="javascript:;" onclick="datadel()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a>*@
            @Html.Link("AddCapital", "Capital", "<i class="Hui-iconfont">&#xe600;</i> 添加海外地产", new { @class = "btn btn-primary radius popadd" }, "javascript:void(0);")
        </span>
    </div>
    <div class="mt-20" id="MVCpager">
        @Html.Partial("_OverseasLandList", Model)
    </div>
</div>

<!--地产Start-->
<div class="wap-container" id="app">
    <div class="container ui-sortable">
        <div class="page-container" id="addPanel" style="display:none;">
            <div class="form form-horizontal responsive" novalidate="novalidate">

                <div class="row cl">
                    <form id="form1">
                        <label class="form-label col-xs-3">房源图片：</label>
                        <div class="formControls col-xs-6">
                            <span class="btn-upload form-group">
                                <input class="input-text upload-url" type="text" name="uploadfile-2" id="uploadfile-2" readonly style="200px">
                                <a href="javascript:void();" class="btn btn-primary upload-btn"><i class="Hui-iconfont">&#xe642;</i> 浏览文件</a>
                                <input type="file" id="upfile" multiple name="file-2" class="input-file">
                            </span>
                        </div>
                        <div class="formControls col-xs-2" style="margin-top:1.5%;">
                            @* 上传图片进度条 *@
                            <div class="progressBg">
                                <div class="progress">
                                    <div class="bar"></div>
                                    <div class="percent" style="font-size:14px">0%</div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="row cl">
                    <label class="form-label col-xs-3"></label>
                    <div class="formControls col-xs-8">
                        <ul class="imgAll">
                            <template v-for="(item,index) in ImageList">
                                <li>
                                    <img class="cover-img" v-bind:src="item" alt="..." class="radius">
                                    <span class="delImg" v-on:click="DeleteImg(item)">+</span>
                                </li>
                            </template>

                            <span v-for="(item,index) in ImageList">
                                <img class="thumb" v-bind:src="item"><b class="sp_b" v-on:click="DeleteImg(item)"></b>
                            </span>

                        </ul>
                    </div>
                </div>
                <div class="row clearfix">
                    <label class="form-label col-xs-3">所在区域：</label>
                    <div class="formControls col-xs-8">
                        <span class="select-box">
                            <select class="select" v-model="selectedArea">
                                <option disabled value="">请选择</option>
                                <template v-for='(Area,index) in AreaList'>
                                    <option v-bind:value="Area.value"> {{ Area.text }}</option>
                                </template>
                            </select>
                        </span>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-3">房源标题：</label>
                    <div class="formControls col-xs-8">
                        <input type="text" class="input-text" placeholder="请输入房源标题" name="website" id="website">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-3">房源地址：</label>
                    <div class="formControls col-xs-8">
                        <input type="text" class="input-text" placeholder="请输入房源地址" name="website" id="website">
                    </div>
                </div>
                <div class="row clearfix">
                    <label class="form-label col-xs-3">房源类型：</label>
                    <div class="formControls col-xs-8">
                        <span class="select-box">
                            <select class="select" v-model="selectedHouseType" size="1" name="city">
                                <option disabled value="">请选择</option>
                                <template v-for='(HouseType,index) in HouseTypeList'>
                                    <option v-bind:value="HouseType.value"> {{ HouseType.text }}</option>
                                </template>
                            </select>
                        </span>
                    </div>
                </div>
                <div class="row clearfix">
                    <label class="form-label col-xs-3">物业类别：</label>
                    <div class="formControls col-xs-8">
                        <span class="select-box">
                            <select class="select" v-model="selectedPropertyClass" size="1" name="city">
                                <option disabled value="">请选择</option>
                                <template v-for='(PropertyClass,index) in PropertyClassList'>
                                    <option v-bind:value="PropertyClass.value"> {{ PropertyClass.text }}</option>
                                </template>
                            </select>
                        </span>
                    </div>
                </div>
                <div class="row clearfix">
                    <label class="form-label col-xs-3">装修状况：</label>
                    <div class="formControls col-xs-8">
                        <span class="select-box">
                            <select class="select" v-model="selectedDecoration" size="1" name="city">
                                <option disabled value="">请选择</option>
                                <template v-for='(Decoration,index) in DecorationList'>
                                    <option v-bind:value="Decoration.value"> {{ Decoration.text }}</option>
                                </template>
                            </select>
                        </span>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-3">均价：</label>
                    <div class="formControls col-xs-8">
                        <input type="text" class="input-text" placeholder="请输入均价" name="website" id="website">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-3">
                        房源介绍：
                    </label>
                    <div class="formControls col-xs-8">
                        <textarea cols="" rows="" class="textarea" name="beizhu" id="beizhu" placeholder="房源介绍"></textarea>
                    </div>
                </div>
                <div class="row clearfix">
                    <label class="form-label col-xs-3">房源特色：</label>
                    <div class="formControls col-xs-8">
                        <span class="select-box">
                            <select class="select" v-model="selectedFeature" size="1" name="city">
                                <option disabled value="">请选择</option>
                                <template v-for='(Feature,index) in FeatureList'>
                                    <option v-bind:value="Feature.value"> {{ Feature.text }}</option>
                                </template>
                            </select>
                        </span>
                    </div>
                </div>

                @*<my-list v-bind:list="HouseTypeList"
                    type-name="房源类型"
                    v-bind:isshowtype="IsShowHouseType"
                    v-on:closetype="CloseHouseType"
                    v-on:selectedtypename="SelectItemHouseType"></my-list>*@

                <div class="row cl">
                    <label class="form-label col-xs-3">面积(平米)：</label>
                    <div class="formControls col-xs-8">
                        <input type="text" class="input-text" autocomplete="off" placeholder="请输入面积" name="password2" id="password2">
                    </div>
                </div>
                <div class="row clearfix">
                    <label class="form-label col-xs-3">户型：</label>
                    <div class="formControls col-xs-8">
                        <span class="select-box">
                            <select class="select" v-model="selectedRoomType" size="1" name="city">
                                <option disabled value="">请选择</option>
                                <template v-for='(RoomType,index) in RoomTypeList'>
                                    <option v-bind:value="RoomType.value"> {{ RoomType.text }}</option>
                                </template>
                            </select>
                        </span>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-3">房型图片：</label>
                    <div class="formControls col-xs-8">
                        <span class="btn-upload form-group">
                            <input class="input-text upload-url" type="text" name="uploadfile-2" id="uploadfile-2" readonly style="200px">
                            <a href="javascript:void();" class="btn btn-primary upload-btn"><i class="Hui-iconfont">&#xe642;</i> 浏览文件</a>
                            <input type="file" multiple name="file-2" class="input-file">
                        </span>
                    </div>
                </div>
                <div class="row cl">
                    <div class="col-xs-7 col-xs-offset-3">
                        <input type="hidden" name="OrderNum" />
                        <input class="btn btn-primary radius btn_ok" type="submit" value="提交">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--添加资方End-->
@section Scripts{
    @{
        Html.RegisterMvcPagerScriptResource();
    }
    <script type="text/javascript" src="/HUI/lib/My97DatePicker/4.8/WdatePicker.js"></script>
    <script type="text/javascript" src="/HUI/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
    <script type="text/javascript" src="/HUI/lib/jquery.validation/1.14.0/validate-methods.js"></script>
    <script type="text/javascript" src="/HUI/lib/jquery.validation/1.14.0/messages_zh.js"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/vue.js")"></script>
    <script type="text/javascript">
        $(function () {
            $(".popadd").click(function () {
                layer.open({
                    type: 1,
                    area: ['60%', '80%'],
                    fix: false, //不固定
                    maxmin: false,
                    shade: 0.4,
                    title: "添加资方",
                    content: $("#addPanel")
                });

            });
            //
            //上传房源图片
            $(document).on("change", "#upfile", function () {
                //if (!picVility(document.getElementById("upfile").value)) {
                //    alert("只能上传GIF,JPG,JPEG,BMP   文件,请重新选择！");
                //    return;
                //}

                var rFilter = /^(image/jpeg|image/png|image/gif|image/bmp|image/jpg)$/i;
                var msg = "*.gif,*.jpg,*.jpeg,*.png,*.bmp";
                if (this.files.length <= 0) {
                    alert("请选择图片");
                    return;
                }
                var oFile;
                for (var i = 0; i < this.files.length; i++) {
                    oFile = this.files[i];
                    if (!rFilter.test(oFile.type)) {
                        alert("第" + (i + 1) + "张图片格式错误~请选择格式为" + msg + "的图片~");
                        return;
                    } else if (oFile.size > 10485760) {
                        alert("最大只能上传10M的图片，第" + (i + 1) + "张图片大于10M");
                        return;
                    }
                }
                if (vm.ImageList.length + this.files.length > 16) {
                    alert("最多只能上传16张房源图片！");
                    return;
                }

                $("#form1").ajaxSubmit({
                    url: "/OverseasLand/Upload",
                    type: "Post",
                    beforeSend: function () {
                        $(".bar").width("0%");
                        $(".percent").html("0%");
                        $(".progressBg").show();
                        $(".dye_word,.dye_img").hide();
                        //console.log("上传图片前，初始化...");

                    },
                    uploadProgress: function (event, position, total, percentComplete) {
                        var percentVal = percentComplete + '%';
                        $(".bar").width(percentVal)
                        $(".percent").html(percentVal);
                        //console.log(percentVal, position, total);
                    },
                    success: function (data) {
                        $(".progressBg").hide();
                        $(".dye_word,.dye_img").show();
                        $(".bar").width("0%")
                        $(".percent").html("0%");
                        if (data.IsSuccess) {
                            //vm.ImageList.push(data.Text);
                            var imgList = JSON.parse(data.Text);
                            $.each(imgList, function (index, item) {
                                vm.ImageList.push(item);
                            });
                        }
                        else {
                            ShowMsg("系统繁忙，请稍后再试！");
                        }
                    }
                });
            });

            //$("#addForm").validate({
            //    rules: {
            //        Name: {
            //            required: true,
            //            minlength: 2,
            //            maxlength: 30
            //        },
            //        Mobile: {
            //            required: true,
            //            isMobile: true
            //        },
            //        ExpiryDate: {
            //            required: true,
            //            minlength: 10
            //        },
            //    },
            //    messages: {
            //        Name: { required: "必填", minlength: "不能小于2个字符" },
            //        Mobile: { required: "必填", email: "手机格式不正确" },
            //        ExpiryDate: { required: "必填", minlength: "不能小于10个字符" },
            //    },
            //    onkeyup: false,
            //    //focusCleanup: true,
            //    success: "valid",
            //    submitHandler: function (form) {
            //        //$("#addForm").ajaxSubmit()
            //        $("#addForm").ajaxSubmit({
            //            type: 'post',
            //            //url: "xxxxxxx",
            //            success: function (data) {
            //                if (data.IsSuccess) {
            //                    layer.msg('添加成功！', { icon: 1, time: 1000 }, function () {
            //                        location.reload();
            //                    });
            //                }
            //                else {
            //                    layer.msg(data.Message, { icon: 0, time: 1000 });
            //                }
            //            },
            //            error: function (XmlHttpRequest, textStatus, errorThrown) {
            //                layer.msg('发生错误，操作失败!', { icon: 1, time: 2000 });
            //            }
            //        });
            //        //var index = parent.layer.getFrameIndex(window.name);
            //        //parent.$('.btn-refresh').click();
            //        //parent.layer.close(index);
            //    }
            //});
        });
        var vm = new Vue({
            el: '#app',
            data: {
                ImageList: [],//图片列表
                AreaList: [], //区域类型
                HouseTypeList: [],//房源类型
                PropertyClassList: [],//物业类别
                DecorationList: [],//装修
                FeatureList: [],//房源特色
                RoomTypeList: [],//添加主力户型-房型
                selectedArea: "",//选择区域类型
                selectedHouseType: "",//选择房源类型
                selectedPropertyClass: "",//选择物业类别
                selectedDecoration: "",//选择装修
                selectedFeature: "",//选择房源特色
                selectedRoomType: "",//选择主力户型-房型
            },
            methods: {
                //函数
                initLoad: function () {
                    var self = this;
                    $.getJSON("/OverseasLand/InitAddData", { houseCategory: 1 }, function (result) {
                        console.log("result:" + result);
                        if (result.IsSuccess) {
                            //1、区域类型
                            if (result.ResultData.AreaList != null) {
                                array = [];
                                result.ResultData.AreaList.map(function (item, index) {
                                    self.$set(item, "Selected", false);
                                    array.push({
                                        value: item.AreaID,
                                        text: item.AreaName,
                                        checked: item.Selected
                                    });
                                });
                                self.AreaList = array;
                            }
                            //2、房源类型
                            if (result.ResultData.HouseTypeList != null) {
                                var array = [];
                                result.ResultData.HouseTypeList.map(function (item, index) {
                                    self.$set(item, "Selected", false);
                                    array.push({
                                        value: item.TypeID,
                                        text: item.TypeName,
                                        Selected: item.Selected
                                    });
                                });
                                self.HouseTypeList = array;
                            }
                            //3、物业类别
                            if (result.ResultData.PropertyClassList != null) {
                                array = [];
                                result.ResultData.PropertyClassList.map(function (item, index) {
                                    self.$set(item, "Selected", false);
                                    array.push({
                                        value: item.ID,
                                        text: item.Name,
                                        Selected: item.Selected
                                    });
                                });
                                self.PropertyClassList = array;
                            }
                            //4、装修
                            if (result.ResultData.DecorationList != null) {
                                array = [];
                                result.ResultData.DecorationList.map(function (item, index) {
                                    self.$set(item, "Selected", false);
                                    array.push({
                                        value: item.ID,
                                        text: item.Name,
                                        Selected: item.Selected
                                    });
                                });
                                self.DecorationList = array;
                            }
                            //5、房源特色
                            if (result.ResultData.FeatureList != null) {
                                array = [];
                                result.ResultData.FeatureList.map(function (item, index) {
                                    self.$set(item, "Selected", false);
                                    array.push({
                                        value: item.FeatureID,
                                        text: item.FeatureName,
                                        Selected: item.Selected
                                    });
                                });
                                self.FeatureList = array;
                            }
                            //6、添加主力户型-房型
                            if (result.ResultData.RoomTypeList != null) {
                                array = [];
                                result.ResultData.RoomTypeList.map(function (item, index) {
                                    self.$set(item, "Selected", false);
                                    array.push({
                                        value: item.ID,
                                        text: item.Name,
                                        Selected: item.Selected
                                    });
                                });
                                self.RoomTypeList = array;
                            }
                        }
                    });
                }, DeleteImg: function (data) {
                    console.log("this.ImageList-1:" + this.ImageList);
                    this.ImageList.splice(this.ImageList.indexOf(data), 1);
                    console.log("this.ImageList-2:" + this.ImageList);
                },
            }, created() {
                //Vue 初始化的默认载入事件
                this.initLoad();
                //this.options.push({ value: "用户3", text: "新选项3", checked: false });
            },
        });
    </script>
}