物业信息页面

2019/bj-zqzt/biz/css/base.css

@@ -2674,3 +2674,76 @@ button.add-others {
  padding-top: .15rem;
  padding-bottom: .15rem;
}
/* 物业详情 */
.ipu-form-item input[type="text"].low-floor {
  display: block;
  width: .29rem;
  height: .32rem;
  border:.01rem solid rgba(240,242,245,1);
  text-align:center;
  margin-right: .05rem;
  line-height: .32rem;
}
.ipu-form-item input[type="text"].high-floor {
  display: block;
  width: .29rem;
  height: .32rem;
  border:.01rem solid rgba(240,242,245,1);
  text-align:center;
  margin-left: .05rem;
  margin-right: .08rem;
  line-height: .32rem;
}
.pages-property-details.active .range-normal {
  display: none;
}
.pages-property-details.active .range-edit {
  display: flex;
}
.position-show {
  width: .29rem;
  height: .15rem;
  background:rgba(247,250,255,1);
  border-radius: .01rem;
  font-size: .1rem;
  font-weight:400;
  color:rgba(103,172,255,1);
  line-height:.15rem;
  margin-right: .105rem;
  text-align: center;
}
.position-level-show {
  width: .31rem;
  height: .15rem;
  background:rgba(246,248,255,1);
  border-radius: .01rem;
  font-size: .1rem;
  font-weight:400;
  color:rgba(138,163,255,1);
  line-height:.15rem;
  margin-right: .06rem;
  text-align: center;
}
.pages-property-details.active .person-normal {
  display: none;
}
.pages-property-details.active .person-edit {
  display: block;
}
.pages-property-details.active .property-position-edit {
  display: block;
}
.pages-property-details.active .property-position-level-edit {
  display: block;
}
.picture-flag {
  width: .16rem;
  height:.16rem;
  background: url(../img/picture-flag.png) center center no-repeat;
  background-size: contain;
  margin-right: .035rem;
}
.pages-property-details.active .form-btn {
  display: block;
}

2019/bj-zqzt/biz/js/building-details.js

@@ -1,5 +1,5 @@
require(['jquery', 'ipuUI', 'echarts'], function ($, ipuUI, echarts) {
  $(function () {
  $.sizeReady(function () {
    var tab1 = ipuUI.tab(".ipu-tab-resource");
    var tab2 = ipuUI.tab(".ipu-tab-computer");
@@ -209,5 +209,16 @@ require(['jquery', 'ipuUI', 'echarts'], function ($, ipuUI, echarts) {
        addData(true);
      }
    }
    // 物业信息点击事件
    $(".property-information").on("click", ".property-item", function () {
      location.href="property-details.html"
    });
    // 资源 设备信息点击事件
    $(".resource-info").on("click", ".computer-room-item", function () {
    });
  });
});

2019/bj-zqzt/biz/js/property-details.js

@@ -0,0 +1,86 @@
require(['jquery', 'ipuUI'], function ($, ipuUI) {
  $(function () {
    // 编辑点击事件
    $(".tool-bar-edit").click(function () {
      if ($(".pages-property-details").hasClass("active")) {// 点击取消
        $(".pages-property-details").removeClass("active");
        $(this).text("编辑");
        $(".check-pic").text("查看");
        $(".item-value input").prop("readonly",true);
      } else { // 点击编辑
        $(".pages-property-details").addClass("active");
        $(this).text("取消");
        $(".range-edit input:eq(0)").val($(".range-normal span:eq(0)").text());
        $(".range-edit input:eq(1)").val($(".range-normal span:eq(2)").text());
        $(".person-edit").val($(".person-normal span").text());
        $(".property-position-edit input").val($(".position-show").text());
        $(".property-position-level-edit input").val($(".position-level-show").text());
        $(".check-pic").text("重新上传");
        $(".item-value input").prop("readonly",false);
      }
    });
    // 点击保存
    $(".common-btn").click(function () {
      $(".pages-property-details").removeClass("active");
      $(this).text("编辑");
      $(".range-normal span:eq(0)").text($(".range-edit input:eq(0)").val());
      $(".range-normal span:eq(2)").text($(".range-edit input:eq(1)").val());
      $(".person-normal span").text($(".person-edit").val());
      $(".position-show").text($(".property-position-edit input").val());
      $(".position-level-show").text($(".property-position-level-edit input").val());
      $(".check-pic").text("查看");
      $(".item-value input").prop("readonly",true);
    });
    // 手机号码点击
    $(".pages-property-details").on("click","#mobile-phone", function () {
      if (!$(".pages-property-details").hasClass("active")){
        console.log("打电话");
      }
    });
    // 座机点击
    $(".pages-property-details").on("click","#telephone", function () {
      if (!$(".pages-property-details").hasClass("active")){
        console.log("打座机");
      }
    });
    // 可营销证明
    $(".pages-property-details").on("click",".check-pic", function () {
      if ($(".pages-property-details").hasClass("active")){ // 上传
        $(".upload-pic-popup-slide").addClass("active");
      }else{ //查看
        console.log("查看图片");
      }
    });
    // 拍照
    $(".take-photo").click(function () {
    });
    // 从手机相册选择
    $(".pic-from-file").click(function () {
    });
    // 取消上传证件照片
    $(".take-photo-cancel").click(function () {
      $(".upload-pic-popup-slide").removeClass("active");
    });
    // 点空白区域关闭上传界面
    $(".upload-pic-popup-slide").click(function () {
      $(this).removeClass("active");
    });
    //点击其他地方不做处理
    $(".upload-pic-popup-slide .option-area").click(function () {
      return false;
    });
  });
});

2019/bj-zqzt/property-details.html

@@ -0,0 +1,174 @@
<!DOCTYPE html>
<html lang="en">
<head>
  <title>物业详情</title>
  <meta charset="utf-8">
  <!-- 宽度自动适配 -->
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0, user-scalable=no"/>
  <!-- 不识别页面上的数字为可拨打号码 -->
  <meta content="telephone=no" name="format-detection"/>
  <link rel="stylesheet" type="text/css" href="ipu/ui/css/ipuUI.css">
  <link rel="stylesheet" type="text/css" href="biz/css/base.css">
  <script src="ipu/lib/requirejs/require.min.js"></script>
  <script src="biz/js/require-config.js"></script>
  <script src="biz/js/property-details.js"></script>
</head>
<body class="pages-property-details">
<div class="ipu-flex-row ipu-flex-vertical">
  <div class="ipu-flex-col">
    <div class="ipu-toolbar">
      <a class="ipu-fn-left link-back ipu-flex ipu-flex-align-center" href="javascript:history.back(-1);">
        <div class="left-back"></div>
      </a>
      <h1 class="ipu-toolbar-title">1-9层物业</h1>
      <div class="tool-bar-edit main-blue">编辑</div>
    </div>
  </div>
  <div class="ipu-flex-col ipu-flex-col-auto">
    <div class="ipu-form-item common-border-top">
      <div class="ipu-flex common-border-bottom">
        <div class="item-key">物业名称：</div>
        <div class="item-value ipu-flex-col-auto">
          <input type="text" placeholder="请输入" value="葛洲坝物业管理有限公司" readonly/>
        </div>
      </div>
    </div>
    <div class="ipu-form-item">
      <div class="ipu-flex common-border-bottom">
        <div class="item-key">管理范围：</div>
        <div class="item-value ipu-flex-col-auto">
          <div class="range-normal ipu-flex ipu-flex-justify-end ipu-flex-align-center">
            <span>12</span>
            <span>-</span>
            <span>15</span>
            <span>层</span>
          </div>
          <div class="range-edit ipu-fn-hide ipu-flex ipu-flex-justify-end ipu-flex-align-center">
            <input class="low-floor" type="text" value="12"/>
            <span>-</span>
            <input class="high-floor" type="text" value="15"/>
            <span>层</span>
          </div>
        </div>
      </div>
    </div>
    <div class="ipu-form-item">
      <div class="ipu-flex common-border-bottom">
        <div class="item-key">物业规模：</div>
        <div class="item-value ipu-flex-col-auto">
          <input type="text" placeholder="请输入" value="8人" readonly/>
        </div>
      </div>
    </div>
    <div class="ipu-form-item">
      <div class="ipu-flex common-border-bottom">
        <div class="item-key">上级管理单位：</div>
        <div class="item-value ipu-flex-col-auto">
          <input type="text" placeholder="请输入" value="明月集团有限公司" readonly/>
        </div>
      </div>
    </div>
    <div class="ipu-form-item">
      <div class="ipu-flex common-border-bottom">
        <div class="item-key">物业联系人：</div>
        <div class="item-value ipu-flex-col-auto">
          <div class="person-normal ipu-flex ipu-flex-justify-end ipu-flex-align-center">
            <div class="position-show">门卫</div>
            <div class="position-level-show">二级</div>
            <span>曲晓</span>
          </div>
          <input class="person-edit ipu-fn-hide" type="text" placeholder="请输入" value="曲晓"/>
        </div>
      </div>
    </div>
    <div class="ipu-form-item property-position-edit ipu-fn-hide">
      <div class="ipu-flex common-border-bottom">
        <div class="item-key">职位：</div>
        <div class="item-value ipu-flex-col-auto">
          <input type="text" placeholder="请输入" value="门卫"/>
        </div>
      </div>
    </div>
    <div class="ipu-form-item property-position-level-edit ipu-fn-hide">
      <div class="ipu-flex common-border-bottom">
        <div class="item-key">职级：</div>
        <div class="item-value ipu-flex-col-auto">
          <input type="text" placeholder="请输入" value="二级"/>
        </div>
      </div>
    </div>
    <div class="ipu-form-item">
      <div class="ipu-flex common-border-bottom">
        <div class="item-key">手机号：</div>
        <div class="item-value ipu-flex-col-auto">
          <input id="mobile-phone" class="main-blue" type="text" placeholder="请输入" value="157 3678 8690" readonly/>
        </div>
      </div>
    </div>
    <div class="ipu-form-item">
      <div class="ipu-flex common-border-bottom">
        <div class="item-key">座机：</div>
        <div class="item-value ipu-flex-col-auto main-blue">
          <input id="telephone" class="main-blue" type="text" placeholder="请输入" value="010-8970  3789" readonly/>
        </div>
      </div>
    </div>
    <div class="ipu-form-item">
      <div class="ipu-flex common-border-bottom">
        <div class="item-key">拓展状态：</div>
        <div class="item-value ipu-flex-col-auto">
          <input type="text" placeholder="请输入" value="已签约" readonly/>
        </div>
      </div>
    </div>
    <div class="ipu-form-item">
      <div class="ipu-flex common-border-bottom">
        <div class="item-key">营销限制：</div>
        <div class="item-value ipu-flex-col-auto">
          <input type="text" placeholder="请输入" value="单客户线路价格不低于2万" readonly/>
        </div>
      </div>
    </div>
    <div class="ipu-form-item">
      <div class="ipu-flex common-border-bottom">
        <div class="item-key">可营销有效期：</div>
        <div class="item-value ipu-flex-col-auto">
          <input type="text" placeholder="请输入" value="2019-03-24 至 2021-03-24" readonly/>
        </div>
      </div>
    </div>
    <div class="ipu-form-item" style="margin-bottom: .29rem;">
      <div class="ipu-flex common-border-bottom">
        <div class="item-key">可营销证明：</div>
        <div class="item-value ipu-flex-col-auto">
          <div class="ipu-flex ipu-flex-justify-end ipu-flex-align-center">
            <div class="picture-flag"></div>
            <div class="check-pic main-blue">查看</div>
          </div>
        </div>
      </div>
    </div>
    <div class="form-btn ipu-fn-hide">
      <button class="ipu-btn common-btn">保存</button>
    </div>
  </div>
  <!--上传图片-->
  <div class="upload-pic-popup-slide">
    <div class="ipu-flex-row ipu-flex-vertical">
      <div class="ipu-flex-col ipu-flex-col-auto"></div>
      <div class="option-area ipu-flex-col ipu-flex ipu-flex-vertical ipu-flex-justify-end ipu-flex-align-center">
        <div class="take-photo">拍照</div>
        <div class="pic-from-file">从手机相册选择</div>
        <div class="divide-area"></div>
        <div class="take-photo-cancel">取消</div>
      </div>
    </div>
  </div>
</div>
</body>
</html>