add_repair_frm.html 14.4 KB
<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>填写故障_frm</title>
      <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
      <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
      <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
      <style>
          html,
          body{
            background: #F4F6F9;
          }
      </style>
  </head>
  <body>
    <div class="repair-info-panel">
      <div class="repair-info-inside-panel">
        <!-- <div class="aui-row aui-row-flex padding-top-21">
          <div class="aui-col aui-col-span-12 aui-row-flex-start">
            <span class="repair-measure-obj">设备类型</span>
          </div>
          <div class="aui-col aui-col-span-12 aui-row-flex-end" tapmode onclick="chooseDeviceType();">
            <span class="repair-measure-obj" style="color:rgba(174,184,206,1);margin-right:0.5rem;" id="device_type_inputed">请选择</span>
            <i class="repair-down-sign"></i>
          </div>
        </div>
        <div class="repair-panel-line margin-top-21"></div> -->
        <div class="aui-row aui-row-flex padding-top-21">
          <div class="aui-col aui-col-span-12 aui-row-flex-start">
            <span class="repair-measure-obj">设备型号</span>
          </div>
          <div class="aui-col aui-col-span-12 aui-row-flex-end" tapmode onclick="chooseDeviceModel();">
            <span class="repair-measure-obj" style="color:rgba(174,184,206,1);margin-right:0.5rem;" id="device_model_inputed">请选择</span>
            <i class="repair-down-sign"></i>
          </div>
        </div>
        <div class="repair-panel-line margin-top-21"></div>                
        <div class="aui-row aui-row-flex padding-top-21">
          <div class="aui-col aui-col-span-12 aui-row-flex-start">
            <span class="repair-measure-obj">设备编号</span>
          </div>
          <div class="aui-col aui-col-span-12 aui-row-flex-end" tapmode onclick="chooseImei();">
            <span class="repair-measure-obj" style="color:rgba(174,184,206,1);margin-right:0.5rem;" id="device_imei_inputed">请选择</span>
            <i class="repair-down-sign"></i>
          </div>
        </div>
        <div class="repair-panel-line margin-top-21"></div>
        <div class="aui-row aui-row-flex padding-top-21">
          <div class="aui-col aui-col-span-12 aui-row-flex-start">
            <span class="repair-measure-obj">故障分类</span>
          </div>
          <div class="aui-col aui-col-span-12 aui-row-flex-end" tapmode onclick="chooseType();">
            <span class="repair-measure-obj" style="color:rgba(174,184,206,1);margin-right:0.5rem;" id="device_type_inputed">请选择</span>
            <i class="repair-down-sign"></i>
          </div>
        </div>
        <div class="repair-panel-line margin-top-21"></div>
        <div class="aui-row aui-row-flex padding-top-21">
          <div class="aui-col aui-col-span-12 aui-row-flex-start">
            <span class="repair-measure-obj">设备所在地址</span>
          </div>
          <div class="aui-col aui-col-span-12 aui-row-flex-end" tapmode onclick="choosePosition();">
            <span class="repair-measure-obj" style="color:rgba(174,184,206,1);margin-right:0.5rem;" id="device_address_inputed">请选择</span>
            <i class="repair-down-sign"></i>
          </div>
        </div>
        <div class="repair-panel-line margin-top-21"></div>
        <div class="aui-row aui-row-flex padding-top-21">
          <div class="aui-col aui-col-span-7 aui-row-flex-start">
            <span class="repair-measure-obj">完善详细地址</span>
          </div>
          <div class="aui-col aui-col-span-17 aui-row-flex-end">
            <input id="detail_address" class="aui-input" placeholder="请输入详细地址" type="text" maxlength="15" style="height:1.26rem;text-align:right;font-weight:500;color:rgba(91,127,248,1);font-size:14px;" >
          </div>
        </div>
        <div class="repair-panel-line margin-top-21"></div>
        <div class="aui-row aui-row-flex padding-top-21">
          <div class="aui-col aui-col-span-6 aui-row-flex-start">
            <span class="repair-measure-obj">联系电话</span>
          </div>
          <div class="aui-col aui-col-span-18 aui-row-flex-end">
            <input id="connect_tel" class="aui-input" placeholder="我们将与您联系" type="tel" maxlength="15" style="height:1.26rem;text-align:right;font-weight:500;color:rgba(91,127,248,1);font-size:14px;" >
          </div>
        </div>
        <div class="repair-panel-line margin-top-21"></div>
        <div class="aui-row aui-row-flex padding-top-21" style="height:98px;">
          <div class="aui-col aui-col-span-6 aui-row-flex-start">
            <span class="repair-measure-obj" style="margin-top:1.3rem;">问题描述</span>
          </div>
          <div class="aui-col aui-col-span-18 aui-row-flex-end" style="margin-top:1.1rem;">
            <textarea rows="4" maxlength="50" id="detail_qa" placeholder="为了方便于分析定位问题,请详细描述故障信息" style="height:auto;font-weight:500;color:rgba(91,127,248,1);font-size:14px;"></textarea>
          </div>
        </div>
        <div style="height:21px;"></div>
      </div>
    </div>
    <div class="confirm-btn" tapmode onclick="handleAddRepair();">提交</div>
  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/common.js"></script>
  <script type="text/javascript" src="../../script/addr.js"></script>
  <script type="text/javascript" src="../../script/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="../../script/ctrl.js"></script>
  <script type="text/javascript">
      var imeis = [];
      var UIActionSelector;
      var token;
      var types = [];
      var userId;
      var province,city;
      var productInfos
      apiready = function(){
        api.parseTapmode();
        token = api.getPrefs({sync: true,key: 'userToken'});
        userId = api.getPrefs({sync: true,key: 'userID'});
        // var deviceList = $api.getStorage('devices');

        UIActionSelector = api.require('UIActionSelector');

        getIssueType();

        if (api.pageParam.isAdd) {
          api.toast({msg: '提交成功,我们将会尽快为您处理!'});
        }

        api.addEventListener({
            name: 'changeRepairType'
        }, function(ret, err){
          if( ret ){
            $api.html($api.byId('device_type_inputed'), ret.value.curSelect);
          }
        });

      };

      function choosePosition() {

        UIActionSelector.open({
            datas: subjson,
            layout: {
                row: 5,
                col: 2,
                height: 30,
                size: 12,
                sizeActive: 14,
                rowSpacing: 5,
                colSpacing: 10,
                maskBg: 'rgba(0,0,0,0.2)',
                bg: '#fff',
                color: '#888',
                colorActive: '#f00',
                colorSelected: '#f00'
            },
            animation: true,
            cancel: {
                text: '取消',
                size: 12,
                w: 90,
                h: 35,
                bg: '#5B7FF8',
                bgActive: '#ccc',
                color: '#FFFFFF',
                colorActive: '#fff'
            },
            ok: {
                text: '确定',
                size: 12,
                w: 90,
                h: 35,
                bg: '#5B7FF8',
                bgActive: '#ccc',
                color: '#FFFFFF',
                colorActive: '#fff'
            },
            title: {
                text: '设备地址',
                size: 14,
                h: 44,
                bg: '#eee',
                color: '#000000'
            },
            fixedOn: api.frameName
        }, function(ret, err) {
          if (ret && ret['eventType'] == "ok") {
              province = ret['level1'];
              city = ret['level2'];
              $api.html($api.byId('device_address_inputed'), ret['level1'] + ' ' + ret['level2']);
              province = ret['level1'];
              city = ret['level2'];
          }
        });
      }

      async function chooseImei() {
        var imeis_ = [];

        var listParams = {
          user_id: userId,
          params: {},
          type: "",
          imei: "",
          limit: 10000,
          page: 1
        }
        let deviceType = $api.html($api.byId('device_model_inputed'));
        if (deviceType == "请选择") {
          api.toast({msg: '请先选择产品型号!',duration: 2000,location: 'bottom'});
          return;
        }else {
          for (let i = 0; i < productInfos.data.List.length; i++) {
            const e = productInfos.data.List[i];
            if (e.remark == deviceType) {
              listParams.type = e.id
            }
          }
        }
        
        var user_perference = await get_product_perference(userId)
        let userPreferenceList = user_perference.data
        for (let i = 0; i < userPreferenceList.length; i++) {
          const productPref = JSON.parse(userPreferenceList[i]);
          const prefList = []
          productPref.data_index.forEach(d => {
            prefList.push('"'+d+'"')
          });
          
          eval('listParams.params["' + productPref.name +'"]=[' + prefList + ']')
        }
        
        let deviceListRes = await get_bind_list_data(listParams)
        let deviceList = deviceListRes.data.list.rows
        let deviceList_ = []
        for (let i = 0; i < deviceList.length; i++) {
          const l = deviceList[i];
          
          deviceList_.push(deviceList[i].imei)
        }
        api.actionSheet({
            title: '请选择设备编号',
            cancelTitle: '取消',
            buttons: deviceList_
        }, function(ret, err){
            if( ret ){
              if (ret.buttonIndex != deviceList_.length+1) {
                $api.html($api.byId('device_imei_inputed'), deviceList_[ret.buttonIndex-1]);
              }
            }
        }); 
        
      }

      async function chooseDeviceModel() {
        productInfos = await get_product_type_list()
        let deviceType_ = [];
        for (let i = 0; i < productInfos.data.List.length; i++) {
          deviceType_.push(productInfos.data.List[i].remark)
        }
        
        api.actionSheet({
            title: '请选择设备型号',
            cancelTitle: '取消',
            buttons: deviceType_
        }, function(ret, err){
            if( ret ){
              if (ret.buttonIndex != productInfos.data.List.length+1) {
                $api.html($api.byId('device_model_inputed'), productInfos.data.List[ret.buttonIndex-1].remark);
              }
            }
        });        
      }

      function getIssueType() {
        $.ajax({
            url: HOST + '/iot_api/v2/app/get_issue_type',
            type: 'GET',
            dataType: 'json',
            headers: {
                'Content-Type': 'application/json;charset=utf-8',
                'token': token
            },
            success: function(ret) {
              if (ret.code == 0) {
                types = ret.data;
              }
            },
            error: function() {
              api.toast({msg: ERR_MSG,duration: 2000,location: 'bottom'});
            }
        });
      }

      function chooseType() {
        api.openFrame({
            name: 'repair_tools',
            url: './repair_tools.html',
            rect: {
                x: 0,
                y: api.pageParam.h,
                w: api.winWidth,
                h: api.winHeight-api.pageParam.h
            },
            pageParam: {
                typeList: types
            },
            bounces: false,
            animation: {
                type:"fade",                //动画类型(详见动画类型常量)
                subType:"from_bottom",       //动画子类型(详见动画子类型常量)
                duration:300                //动画过渡时间,默认300毫秒
            }
        });



      }

      function handleAddRepair() {
        var imeiCode = $api.html($api.byId('device_imei_inputed'));
        if (!imeiCode || imeiCode == '请输入设备编号') {
          api.toast({msg: '请输入设备编号'});
          return;
        }
        var deviceType = $api.html($api.byId('device_type_inputed'));
        if (!deviceType || deviceType == '请选择') {
          api.toast({msg: '请选择故障类型'});
          return;
        }
        var deviceAddress = $api.html($api.byId('device_address_inputed'));
        if (!deviceAddress || deviceAddress == '请选择') {
          api.toast({msg: '请选择设备地址'});
          return;
        }
        var detailAddress = $api.val($api.byId('detail_address'));
        if (!detailAddress || detailAddress == '') {
          api.toast({msg: '请填写设备详细地址'});
          return;
        }
        var connectTel = $api.val($api.byId('connect_tel'));
        if (!connectTel || connectTel == '') {
          api.toast({msg: '请填写您的手机号'});
          return;
        }
        if (!checkPhone(connectTel)) {
          api.toast({msg: '手机格式有误!'});
          return;
        }
        var detailQa = $api.val($api.byId('detail_qa'));
        if (!detailQa || detailQa == '') {
          api.toast({msg: '请填写故障详细描述'});
          return;
        }

        //开始提交
        $.ajax({
            url: HOST + '/iot_api/v2/app/create_issue',
            type: 'POST',
            dataType: 'json',
            headers:{
                'Content-Type':'application/json;charset=utf-8',
                'token': token
            },
            data: JSON.stringify({
                imei: imeiCode,
                user_id: userId,
                phone: connectTel,
                type: deviceType,
                province: province,
                city: city,
                content: detailQa,
                address: detailAddress
            }),
            success: function(ret) {
              if (ret.code == 0) {
                api.sendEvent({
                    name: 'reloadAddRepairFrame',
                });
              }
            },
            error: function() {
              api.toast({msg: ERR_MSG,duration: 2000,location: 'bottom'});
            }
        });

      }
  </script>
</html>