Notes

@using Mi_Web.Models
@{
LoginUser2 LoginUser = new LoginUser2();
}

<link type="text/css" rel="stylesheet" href="~/Content/css/mobile/buy/idx.css" />
<link type="text/css" rel="stylesheet" href="~/Content/css/mobile/buy/search.css" />

<style>
.nav-tabs > li > a {
padding: 10px 5px;
}

.m-list-obj-data {
font-size: 15px;
padding: 8px 0px !important;
}

[v-cloak] {
display: none;
}
</style>

<div id="app" class="has-top-ad">
@Html.Partial("_PartialTest")
<div data-role="page" class="l-page index" v-show="PageMode == 'Search'" v-cloak style="padding-top:50px">
<!-- ======================== l-main-content end ======================== -->
<div data-role="content" class="l-main-content">
<!-- ======================== tab content begin ======================== -->
<div data-role="fieldcontain" class="l-content">
<div class="m-tab-content">
<!-- ======================== tab data begin ======================== -->
<ul class="m-tab-content-bd">
<li data-role="list">
<div class="m-form-group m-form-group-icon">
<i class="m-icon m-icon-search"></i>
<input type="tel" name="houseNo" value="" v-model="SearchCondition.Keyword" class="m-form-control ng-house-no" placeholder="案名或部分地址">
</div>
</li>
{{TypeMode.selected}}/{{Price.selected}}/{{Ping.selected}}/{{Rm.selected}}
<multi-search ms-mode="one" ms-type="TypeMode" v-bind:ms-detail="TypeMode.detail" v-model="TypeMode.selected"></multi-search>
<multi-search ms-mode="multi" ms-type="Price" v-bind:ms-detail="Price.detail" v-model="Price.selected"></multi-search>
<multi-search ms-mode="multi" ms-type="Ping" v-bind:ms-detail="Ping.detail" v-model="Ping.selected"></multi-search>
<multi-search ms-mode="multi" ms-type="Rm" v-bind:ms-detail="Rm.detail" v-model="Rm.selected"></multi-search>
@*<li data-role="list" ng-class="itemClass(Area , 'area' , 'keyword')">
<a href="javascript:;" data-item="area" class="ng-tab-item ga_click_trace">
<em class="index-tab-title"><i class="m-icon m-icon-search"></i>區域</em>
<em class="index-tab-value">{{ Area.text }}<i class="m-icon m-icon-angle-right"></i></em>
</a>
<ul data-role="listview">
<li ng-class="{'is-hide' : Area.isShow}">
<a href="javascript:;" data-role="button" data-index="{{ $index }}" class="ng-tab-Choice ng-city" ng-class="searchChoiceClass('{{ $index }}' , Area.CityID)" ng-repeat="city in Area.Detail">{{ city.cityName }}</a>
</li>
<li ng-class="{'is-hide' : ! Area.isShow}">
<a href="javascript:;" data-role="button" class="index-tab-back ng-back ng-area-back"><i class="m-icon m-icon-angle-left"></i>{{ Area.CityText }}</a>
<span class="b-clearfix"></span>
<a href="javascript:;" data-role="button" data-index="{{ $index }}" class="ng-tab-Choice ng-area" ng-class="searchChoiceClass('{{$index}}' , Area.AreaID)" ng-repeat="area in Area.Detail[Area.CityID[0]].areaList">{{ area.areaName }}</a>
</li>
</ul>
</li>*@
@*<li data-role="list" ng-class="itemClass(TypeMode , 'typeMode' , 'keyword')">
<a href="javascript:;" data-item="typeMode" class="ng-tab-item ga_click_trace">
<em class="index-tab-title"><i class="m-icon m-icon-search"></i>用途</em>
<em class="index-tab-value">{{ TypeMode.text }}<i class="m-icon m-icon-angle-right"></i></em>
</a>
<ul data-role="listview">
<li>
<a href="javascript:;" data-role="button" data-index="" class="ng-tab-Choice ng-type-mode" ng-class="searchChoiceClass('' , TypeMode.ID)">全部用途</a>
<a href="javascript:;" data-role="button" data-index="住宅" class="ng-tab-Choice ng-type-mode" ng-class="searchChoiceClass('住宅' , TypeMode.ID)">住宅</a>
<a href="javascript:;" data-role="button" data-index="店面" class="ng-tab-Choice ng-type-mode" ng-class="searchChoiceClass('店面' , TypeMode.ID)">店面</a>
<a href="javascript:;" data-role="button" data-index="辦公" class="ng-tab-Choice ng-type-mode" ng-class="searchChoiceClass('辦公' , TypeMode.ID)">辦公</a>
<a href="javascript:;" data-role="button" data-index="住辦" class="ng-tab-Choice ng-type-mode" ng-class="searchChoiceClass('住辦' , TypeMode.ID)">住辦</a>
<a href="javascript:;" data-role="button" data-index="住店" class="ng-tab-Choice ng-type-mode" ng-class="searchChoiceClass('住店' , TypeMode.ID)">住店</a>
<a href="javascript:;" data-role="button" data-index="車位" class="ng-tab-Choice ng-type-mode" ng-class="searchChoiceClass('車位' , TypeMode.ID)">車位</a>
<a href="javascript:;" data-role="button" data-index="廠房" class="ng-tab-Choice ng-type-mode" ng-class="searchChoiceClass('廠房' , TypeMode.ID)">廠房</a>
<a href="javascript:;" data-role="button" data-index="土地" class="ng-tab-Choice ng-type-mode" ng-class="searchChoiceClass('土地' , TypeMode.ID)">土地</a>
<a href="javascript:;" data-role="button" data-index="其他" class="ng-tab-Choice ng-type-mode" ng-class="searchChoiceClass('其他' , TypeMode.ID)">其他</a>
</li>
</ul>
</li>


<li data-role="list" ng-class="itemClass(Price , 'price' , 'keyword')">
<a href="javascript:;" data-item="price" class="ng-tab-item ga_click_trace">
<em class="index-tab-title"><i class="m-icon m-icon-search"></i>總價</em>
<em class="index-tab-value">{{ Price.text }}<i class="m-icon m-icon-angle-right"></i></em>
</a>
<ul data-role="listview">
<li>
<a href="javascript:;" data-role="button" data-index="" data-value="" class="ng-tab-Choice ng-price" ng-class="searchChoiceClass('' , Price.ID)">不限</a>
<a href="javascript:;" data-role="button" data-index="{{ $index }}" data-value="{{ price.value }}" class="ng-tab-Choice ng-price" ng-class="searchChoiceClass('{{ $index }}' , Price.ID)" ng-repeat="price in Price.Detail" ng-bind-html="price.price"></a>
</li>
</ul>
</li>
<li data-role="list" ng-class="itemClass(Ping , 'ping' , 'keyword')">
<a href="javascript:;" data-item="ping" class="ng-tab-item ga_click_trace">
<em class="index-tab-title"><i class="m-icon m-icon-search"></i>建坪</em>
<em class="index-tab-value">{{ Ping.text }}<i class="m-icon m-icon-angle-right"></i></em>
</a>
<ul data-role="listview">
<li>
<a href="javascript:;" data-role="button" data-index="" data-value="" class="ng-tab-Choice ng-ping" ng-class="searchChoiceClass('' , Ping.ID)">不限</a>
<a href="javascript:;" data-role="button" data-index="{{ $index }}" data-value="{{ ping.value }}" class="ng-tab-Choice ng-ping" ng-class="searchChoiceClass('{{ $index }}' , Ping.ID)" ng-repeat="ping in Ping.Detail" ng-bind-html="ping.ping"></a>
</li>
</ul>
</li>
<li data-role="list" class="" ng-class="itemClass(Rm , 'rm' , 'keyword')">
<a href="javascript:;" data-item="rm" class="ng-tab-item ga_click_trace">
<em class="index-tab-title"><i class="m-icon m-icon-search"></i>房數</em>
<em class="index-tab-value ng-binding">{{ Rm.text }}<i class="m-icon m-icon-angle-right"></i></em>
</a>
<ul data-role="listview">
<li>
<a href="javascript:;" data-role="button" data-index="" data-value="" class="ng-tab-Choice ng-rm is-curr" ng-class="searchChoiceClass('' , Rm.ID)">不限</a>
<a href="javascript:;" data-role="button" data-index="0" data-value="1-1" class="ng-tab-Choice ng-rm" ng-class="searchChoiceClass('0' , Rm.ID)">1房</a>
<a href="javascript:;" data-role="button" data-index="1" data-value="2-2" class="ng-tab-Choice ng-rm" ng-class="searchChoiceClass('1' , Rm.ID)">2房</a>
<a href="javascript:;" data-role="button" data-index="2" data-value="3-3" class="ng-tab-Choice ng-rm" ng-class="searchChoiceClass('2' , Rm.ID)">3房</a>
<a href="javascript:;" data-role="button" data-index="3" data-value="4-4" class="ng-tab-Choice ng-rm" ng-class="searchChoiceClass('3' , Rm.ID)">4房</a>
<a href="javascript:;" data-role="button" data-index="4" data-value="5-" class="ng-tab-Choice ng-rm" ng-class="searchChoiceClass('4' , Rm.ID)">5房以上</a>
</li>
</ul>
</li>*@
<li>
</li>
</ul>
<!-- ======================== tab data Area end ======================== -->
</div>
<div class="m-button-group m-button-group-icon">
<a href="javascript:;" data-role="button" class="m-button m-button-primary m-button-xl" v-on:click="ChangeCaseMode(1)"><i class="m-icon m-icon-search"></i>找房子</a>
</div>
</div>
<!-- ======================== tab content end ======================== -->
</div>
</div>

<div data-role="page" class="l-page is-fixed list" v-show="PageMode == 'List'" v-cloak style="padding-top:50px">
<div data-role="content" class="l-main-content">
<!-- ======================== search list begin ======================== -->
<div class="l-content">
<div v-for="(x, index) in objects.item">
<a v-bind:href="x.CaseUrl" data-role="button" class="m-list-obj ng-obj-list" target="_blank" rel="noreferrer" v-if="objects.item.length !== 0">
<div class="m-list-obj-bd" style="height:50px">
<div class="m-list-obj-data">
<h2 class="m-list-obj-name">{{ x.CaseName }}<span style="color:lightgreen" v-if="x.CaseDown != ''"> (下架)</span></h2>
<span class="m-list-obj-price" style="max-width:40%">
<em class="m-list-obj-prefix">NT$</em>
<em class="m-list-obj-prefix" style="text-decoration:line-through" v-if="x.PriceChangeDate != '' && x.OrigPrice != '' && x.OrigPrice != x.TotalPrice">{{ x.OrigPrice }}萬</em>
<em class="m-list-obj-num">{{ x.TotalPrice }}</em>
<em class="m-list-obj-postfix">萬</em>
</span>
</div>
</div>
<div class="m-list-obj-ft">
<span class="m-list-obj-data">
<em class="m-list-obj-address">{{ x.SimpAddress }}</em>
</span>
<span class="m-list-obj-data">
<span class="m-list-obj-level" style="width:40%">
<em>建坪</em>
<em>{{ x.BuildPin }}坪</em>
</span>
<span class="m-list-obj-year">
<em>地坪</em>
<em>{{ x.LandPin }}坪</em>
</span>
<span class="m-list-obj-pattern">
<em>格局</em>
<em>{{ x.Rm }}房(室)<span v-if="x.LivingRm">{{ x.LivingRm }}廳</span><span v-if="x.BathRm">{{ x.BathRm }}衛</span></em>
</span>
</span>
<span class="m-list-obj-data" style="height:35px">
<span class="m-list-obj-level" style="width:100%">
<em>來源</em>
<em v-if="x.CaseSystem != ''">{{ x.CaseSystem.substr(0,1) }}X{{ x.CaseSystem.substr(2,x.CaseSystem.length) }}<span v-if="x.CaseFrom != '591'"> 仲介</span></em>
<em v-if="x.CaseSystem == ''">未知</em>
</span>
</span>
<span class="m-list-obj-data" style="height:35px">
<span class="m-list-obj-level" style="width:35%">
<em>上架</em>
<em>{{ x.KeyinDate }}</em>
</span>
<span class="m-list-obj-year" v-if="SearchCondition.CaseMode == '3'" style="width:30%">
<em>下架</em>
<em>{{ x.ModifyDate }}</em>
</span>
<span class="m-list-obj-year" v-if="SearchCondition.CaseMode == '4'" style="width:30%">
<em>價變</em>
<em>{{ x.PriceChangeDate }}</em>
</span>
<span class="m-list-obj-pattern">
<em></em>
<em></em>
</span>
</span>
</div>
</a>
<button class="btn btn-warning" style="width:100%" v-on:click="WebCaseFa(x.idx, x.FaIdx, index)"><i class="m-icon" style="font-size:25px" v-bind:class="x.FaIdx > 0 ? 'm-icon-heart' : 'm-icon-heart-o'"></i></button>
</div>

<pagination v-bind:records="objects.totalnum" v-bind:per-page="10" v-on:paginate="setPage"></pagination>

<div class="m-button-group list-more-button" v-if="objects.item.length === 0">
<h2 class="m-button">查無資料</h2>
</div>
<!-- ======================== btn more begin ======================== -->
<div class="m-button-group list-more-button" v-if="objects.item.length > 0">
<!-- {{ objects.page }}/{{ objects.total }} -->
<a href="javascript:;" data-role="button" class="m-button ng-obj-more" v-on:click="GetMoreData">載入更多</a>
</div>
<!-- ======================== btn more end ======================== -->
</div>
<!-- ======================== search list end ======================== -->
</div>
</div>
</div>