scott
/
crm


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552
							{extend name="public/layout" /} {block name="title"}消息管理{/block} {block
name="body"}
<style>
  .layui-fluid {
    display: block;
    box-shadow: 0 0 4px 0 #b6cade;
    border-radius: 5px;
    margin: 15px;
    background-color: #ffffff;
  }
  .layui-table thead tr,
  .layui-table-header {
    background-color: #d8e6f1 !important;
  }
  .cardheader {
    padding-left: 10px;
  }
  .layui-btn-primary {
    color: #249efb;
    border: 1px solid #249efb;
  }
  .layui-btn-primary:hover {
    background-color: #e3f7ff;
    color: #249efb;
  }
  .layui-btn-xs,
  .layui-btn-xs:hover {
    border: 1px solid #249efb;
    background-color: #fff;
    color: #249efb;
    padding: 0px 10px;
  }
  .layui-btn-danger,
  .layui-btn-danger:hover {
    color: #ff5722;
    background-color: #fff;
    border: 1px solid #ff5722;
    padding: 0px 10px;
  }
  .layui-card-body {
    padding: 0px;
  }
  .lay_tab {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #f2f2f2;
    box-sizing: border-box;
    padding: 0px 10px;
  }
  .lay_tab_box {
    float: left;
    width: 90%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }
  .lay_tab_box > div {
    height: 100%;
    display: inline-block;
    padding: 0px 15px;
    line-height: 40px;
    cursor: pointer;
    user-select: none;
    position: relative;
  }
  .layActive {
    color: #249efb;
  }
  .layActive::after {
    content: " ";
    width: 20px;
    height: 4px;
    border-radius: 2px;
    background-color: #249efb;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
  }
  .lay_right {
    float: right;
    width: 9%;
    height: 100%;
    line-height: 40px;
    text-align: right;
  }
  .lay_right > div {
    display: inline;
    cursor: pointer;
  }
  .addItem {
    padding: 3px 15px;
    border: 1px solid #999999;
    border-radius: 4px;
    cursor: pointer;
  }
  .layBase {
    padding-bottom: 10px;
  }
  .layrelative {
    position: relative;
    width: 100%;
  }
  .layAbsolute {
    position: absolute;
    width: 100%;
    height: 200px;
    background-color: #fff;
    left: 0px;
    top: 0px;
    z-index: 99;
    border-bottom: 1px solid #f8f8f8;
    box-shadow: 0px 2px 3px 1px rgba(125,125,125, 0.1);
    box-sizing: border-box;
    padding: 10px 20px;
  }
  .tips {
    padding: 4px 0px;
  }
  .leveltips {
    box-sizing: border-box;
    padding: 2px 0px;
    padding-left: 97px;
  }
  .numType {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    margin-top: 20px;
    overflow-y: auto;
  }
  .boxNumber {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0px 15px;
    padding-left: 0px;
  }
  .boxItem {
    padding: 20px 10px;
    display: inline;
    white-space: nowrap;
  }
  .chatType {
    font-size: 20px;
    color: #333333;
    margin: 0px 0px;
  }
  .chatType1 {
    font-size: 12px;
    color: #333333;
    margin: 0px 5px;
    margin-left: 10px;
  }
  .layui-icon-return {
    transform: rotate(180deg);
    margin: 0px 5px;
  }
  .closeIcon {
    width: 60px;
    height: 25px;
    position: absolute;
    top: 10px;
    right: 10px;
    text-align: center;
    line-height: 25px;
    border: 1px solid #249efb;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
  }
  .layclose {
    position: absolute;
    top: -12px;
    right: -3px;
    z-index: 99;
    color: #999999 !important;
  }
  .kh {
    font-size: 25px;
  }
  .lineH {
    display: inline-block;
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background-color: #333;
    margin-right: 5px;
    position: relative;
    top: 4px;
  }
  .mt15 {
    margin-top: 10px;
  }
</style>

<body>
  <div class="layui-fluid">
    <div class="lay_tab">
        <div class="lay_tab_box">
            {volist name="list" id="vo" key="k"}
            <div {if $k == 1} class="layActive" {/if} data-index="{$k}" data-id="{$vo.id}" data-price="{$vo.service_price}">{$vo.package_name}
              <i data-id="{$vo.id}" class="layui-icon layui-icon-close-fill layclose"></i>
            </div>
            {/volist}
            <span class="addItem">+</span>
        </div>
        <div class="lay_right">
          <div id="countType">计算方式<i class="layui-icon layui-icon-tips" style="margin-left: 5px;position: relative;top:1px;"></i></div>
        </div>
    </div>
    <div class="layrelative layui-hide">
      <div class="layAbsolute">
        <div class="tips"><span class="lineH"></span>计算方式：所包含项目单价集合*服务费（服务费按照百分比收取）+ 设计费</div>
        <div class="tips mt15"><span class="lineH"></span>计算方式示例：房屋信息：四室两厅一厨两卫    套内面积150m²</div>
        <div class="leveltips">包含项目：瓷砖、门、基装及辅料、卫浴、吊顶、橱柜......</div>
        <div class="numType">
          <div class="boxNumber">
            <span class="kh">(</span>
            <div class="boxItem">【瓷砖单价】*面积</div>
            <div class="chatType">+</div>
            <div class="boxItem">【基装及辅料】*面积</div>
            <div class="chatType">+</div>
            <div class="boxItem">【吊顶】*面积</div>
            <div class="chatType">+</div>
            <div class="boxItem">【卫浴单价】*2</div>
            <div class="chatType">+</div>
            <div class="boxItem">【门单价】*3</div>
            <div class="chatType">+</div>
            <div class="boxItem">【橱柜】</div>
            <div class="chatType">+</div>
            <div class="boxItem" style="font-weight: 700;">···</div>
            <span class="kh">)</span>
          </div>
          <div class="chatType1">X</div>
          <div class="boxItem">服务费</div>
          <div class="chatType">+</div>
          <div class="boxItem">设计费</div>
          <i class="layui-icon layui-icon-return" style="font-size: 15px;font-weight: 600;color: #333333;"></i>
          <div class="boxItem">装修预算</div>
        </div>
        <div class="closeIcon">隐藏</div>
      </div>
    </div>
    <div class="layui-card">
      <div class="layui-card-body">
        <div class="layui-row">
          <div class="layui-col-md12 layui-col-xs12 layui-col-sm12">
            <div
              class="layui-tab layui-tab-brief"
              lay-filter="component-tabs-hash"
            >
              <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layBase">服务费基数:<span id="service_price"></span></div>
                  <div>
                    <button
                      class="layui-btn layuiadmin-btn-admin layui-btn-primary"
                      data-type="operate"
                    >
                      添加项目
                    </button>
                  </div>
                  <table
                    id="operater"
                    lay-filter="operater"
                    style="margin-top: 15px"
                  ></table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  {/block} {block name="js"}
  <script type="text/html" id="op">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
      编辑
    </a>
    <a class="layui-btn layui-btn-normal layui-btn-xs layui-btn-danger" lay-event="del">
      删除
    </a>
  </script>
  <script type="text/html" id="rule">
    {{# if(d.rule){ }}
    {{# if(d.rule == 1){ }}
    <span>单价*套内建筑面积</span>
    {{# }else if(d.rule == 2){ }}
    <span>单价*建筑面积</span>
    {{# }else if(d.rule == 3){ }}
    <span>单价*卧室数</span>
    {{# }else if(d.rule == 4){ }}
    单价*卫生间数
    {{# }else if(d.rule == 5){ }}
    单价*厨房数
    {{# }else if(d.rule == 6){ }}
    固定价
    {{# }else if(d.rule == 7){ }}
    单价*客厅数
    {{# } }}
    {{# }else{ }}
    <span style="color: #cccccc;">无</span>
    {{# } }}
</script>
  <script>
    layui
      .config({
        base: "__LAYUI__/",
        urlbase: "/sys",
      })
      .extend({
        index: "lib/index", //主入口模块
      })
      .use(["index", "table", "element"], function () {
        var $ = layui.$,
          table = layui.table,
          form = layui.form,
          mealId = "";
        
        let lastMeal = sessionStorage.getItem("PRICEMEALIDNUMBER");
        let lastIndex = sessionStorage.getItem("PRICEMEALIDINDEX");
        if (lastMeal && lastIndex) {
          let idxs = parseInt(lastIndex) - 1;
          mealId = lastMeal;
          $(".lay_tab_box div").eq(idxs).addClass("layActive").siblings().removeClass("layActive");
          sessionStorage.removeItem("PRICEMEALIDNUMBER");
          sessionStorage.removeItem("PRICEMEALIDINDEX");
        }

        $(".lay_tab_box div").click(function() {
          mealId = $(this).prop("dataset").id;
          let key = $(this).prop("dataset").index;
          sessionStorage.setItem("PRICEMEALIDINDEX", key);
          sessionStorage.setItem("PRICEMEALIDNUMBER", mealId);
          let service_price = $(this).prop("dataset").price;
          $(this).addClass("layActive").siblings().removeClass("layActive");
          $("#service_price").text(service_price);
          //执行重载
          table.reload('operater', {where: {id: mealId}});
        })

        $("#countType").click(function() {
          $(".layrelative").toggleClass("layui-hide");
        })

        $(".closeIcon").click(function() {
          $(".layrelative").addClass("layui-hide");
        })

        $(".layclose").click(function() {
          let id = $(this).prop("dataset").id;
          layer.confirm('确定删除此数据？', { title: ['信息', 'color:#333333;background-color:#D8E6F1;'], }, function (index) {
                $.ajax({
                    type: 'post',
                    url: "{:url('renovate_price_seet/del_package')}",
                    data: { id: id },
                    success: function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg, {
                                anim: 0, time: 1000
                            }, function () {
                              //执行重载
                              location.reload();
                            });
                        } else {
                            layer.msg(res.msg, {
                                anim: 6, time: 1000
                            });
                        }
                    }
                });
            });
        })

        $(".lay_tab_box div").dblclick(function() {
          mealId = $(this).prop("dataset").id;
          let key = $(this).prop("dataset").index;
          sessionStorage.setItem("PRICEMEALIDINDEX", key);
          sessionStorage.setItem("PRICEMEALIDNUMBER", mealId);
          layer.open({
              type: 2,
              title: ["编辑套餐", "color:#333333;background-color:#D8E6F1;"],
              content: '{:url("renovate_price_seet/add_renovate_package")}?id=' + mealId,
              resize: false,
              area: ["40%", "60%"],
              btn: ['保存', '取消'],
              yes: function (index, layero) {
                //点击确认触发 iframe 内容中的按钮提交
                var submit = layero.find('iframe').contents().find("#layuiadmin-community-submit");
                submit.click();
              },
              end: function() {
                location.reload();
              }
            });
        })
        
        setFirstSelect();
        function setFirstSelect() {
          let tagDiv = $(".lay_tab_box div");
          if (tagDiv.length && !(lastMeal && lastIndex)) {
            mealId = $(".lay_tab_box div").eq(0).prop("dataset").id;
            var price = $(".lay_tab_box div").eq(0).prop("dataset").price;
            $("#service_price").text(price);
          }
        }

        table.render({
          elem: "#operater",
          url: '{:url("renovate_price_seet/package_itemlist")}',
          page: false,
          height: "full-140",
          where: {id: mealId},
          cols: [
            [
              {
                align: "center",
                field: "name",
                title: "项目名称",
              },
              {
                align: "center",
                field: "rule",
                title: "价格类型",
                templet: '#rule'
              },
              {
                field: 'price',
                title: '单价',
              },
              {
                field: 'discount_price',
                title: '优惠价格',
              },
              {
                title: "操作",
                width: 240,
                align: "center",
                fixed: "right",
                toolbar: "#op",
              },
            ],
          ],
          text: "对不起，加载出现异常！",
        });

        var active = {
          operate: function () {
            if (!mealId) {
              layer.msg('请先添加套餐！');
              return;
            }
            layer.open({
              type: 2,
              title: ["添加项目", "color:#333333;background-color:#D8E6F1;"],
              content: '{:url("renovate_price_seet/add_package_item")}?pid=' + mealId,
              resize: false,
              area: ["40%", "55%"],
              btn: ['确认提交', '取消'],
              yes: function (index, layero) {
                //点击确认触发 iframe 内容中的按钮提交
                var submit = layero.find('iframe').contents().find("#layuiadmin-community-submit");
                submit.click();
              },
              end: function() {
                //执行重载
                table.reload('operater', {where: {pid: mealId}});
              }
            });
          },
        };

        $(".addItem").click(function() {
            layer.open({
              type: 2,
              title: ["添加套餐", "color:#333333;background-color:#D8E6F1;"],
              content: '{:url("renovate_price_seet/add_renovate_package")}',
              resize: false,
              area: ["40%", "60%"],
              btn: ['确认提交', '取消'],
              yes: function (index, layero) {
                //点击确认触发 iframe 内容中的按钮提交
                var submit = layero.find('iframe').contents().find("#layuiadmin-community-submit");
                submit.click();
              },
              end: function() {
                location.reload();
              }
            });
        })

        $(".layui-btn.layuiadmin-btn-admin").on("click", function () {
          var type = $(this).data("type");
          active[type] ? active[type].call(this) : "";
        });

        table.on("tool(operater)", function (obj) {
          if (obj.event == "edit") {
            layer.open({
              type: 2,
              title: ["编辑项目", "color:#333333;background-color:#D8E6F1;"],
              content: '{:url("renovate_price_seet/add_package_item")}?id=' + obj.data.id,
              resize: false,
              area: ["40%", "55%"],
              btn: ['确认提交', '取消'],
              yes: function (index, layero) {
                //点击确认触发 iframe 内容中的按钮提交
                var submit = layero.find('iframe').contents().find("#layuiadmin-community-submit");
                submit.click();
              },
              end: function() {
                //执行重载
                table.reload('operater', {where: {pid: mealId}});
              }
            });
          }
          if (obj.event == "del") {
            layer.confirm('确定删除此数据？', { title: ['信息', 'color:#333333;background-color:#D8E6F1;'], }, function (index) {
                $.ajax({
                    type: 'post',
                    url: "{:url('renovate_price_seet/del_packitem')}",
                    data: { id: obj.data.id },
                    success: function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg, {
                                anim: 0, time: 1000
                            }, function () {
                              //执行重载
                              table.reload('operater', {where: {pid: mealId}});
                            });
                        } else {
                            layer.msg(res.msg, {
                                anim: 6, time: 1000
                            });
                        }
                    }
                });
            });
          }
        });
      });
  </script>
  {/block}
</body>