raolu
/
PC-application


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>上门服务代预约</title>
    <link rel="stylesheet" type="text/css" href="../../../css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/style.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/cross.css" />
    <link rel="stylesheet" href="../../../plugins/toastr/toastr.min.css" />
    <link rel="stylesheet" href="../../../plugins/element-ui/element-ui.css" />
    <link rel="stylesheet" type="text/css" href="../css/date.css" />
    <link rel="stylesheet" href="../css/common.css" />
    <style>
      #app {
        font-size: 14px;
      }
      .form-box {
        padding: 16px 20px 20px;
      }
      .form-item {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        padding: 4px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 44px;
      }
      .form-label {
      }
      .service-box {
        padding: 4px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      }
      .service-item {
        margin-left: 20px;
        margin-right: 10px;
        height: 24px;
      }
      .address-box {
        padding: 4px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      }
      .flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .reservation-btn {
        display: block;
        width: 300px;
        margin: 20px auto;
      }
      .no-service {
        text-align: center;
        line-height: 40px;
      }
      .required-icon{
        position: relative;
      }
      .required-icon::after{
        content: "*";
        position: absolute;
        left: -10px;
        color: #ed2d2d;
        top: 50%;
        transform: translateY(-50%);
      }
    </style>
  </head>
  <body>
    <div id="app" v-cloak>
      <div class="form-box">
        <div class="service-box">
          <div class="flex">
            <div class="form-label">本次预定的服务</div>
            <div class="form-value" style="cursor: pointer" @click="toSelectService">
              （已造
              <span style="color: #11b7f5">{{serviceList.length}}</span>
              项）
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
          <div class="service-list">
            <div class="service-item flex" v-for="item in serviceList">
              <div style="width: 300px">{{item.title}}</div>
              <div style="padding-left: 20px">x{{item.num}}</div>
              <div style="color: #ed2d2d">￥{{item.expense}}</div>
            </div>
            <div v-if="serviceList.length == 0" class="no-service">暂未选择服务</div>
          </div>
        </div>
        <div class="form-item">
          <div class="form-label">服务对象</div>
          <div class="form-value">{{patientInfo.name}}</div>
        </div>
        <div class="form-item">
          <div class="form-label">签约地区</div>
          <div class="form-value">{{patientInfo.townName}}</div>
        </div>
        <div class="form-item">
          <div class="form-label">联系方式</div>
          <div class="form-value">{{patientInfo.mobile}}</div>
        </div>
        <div class="address-box ">
          <div class="flex required-icon">
            <div>上门地址</div>
            <el-input v-model="serveAddress" placeholder="请输入上门地址" size="small" style="width: 200px" @change="getAddressPoint"></el-input>
          </div>
          <div id="map2" style="height: 200px; margin: 10px"></div>
        </div>
        <div class="service-box">
          <div class="form-label" style="height: 32px; line-height: 32px">请说明居民需要什么服务？</div>
          <el-input v-model="serveDesc" placeholder="请简要描述居民的病情..." type="textarea" :maxlength="100" :rows="3" resize="none"></el-input>
        </div>
        <div class="form-item">
          <div class="form-label required-icon">希望服务时间</div>
          <div class="form-value">
            <el-date-picker v-model="time" type="datetime" size="small" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"></el-date-picker>
          </div>
        </div>
        <div class="form-item">
          <div class="form-label required-icon">服务医生</div>
          <div class="form-value" style="width: 200px; text-align: right; cursor: pointer" @click="toSelectDoctor">
            {{doctor.name}}
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
      </div>
      <el-button type="primary" class="reservation-btn" @click="reservationFn">提交预约</el-button>
    </div>
    <!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=d2GXayjVT86kMvm5FRKvGgY0EjlXdRNx"></script> -->
    <script type="text/javascript" src="../../../js/api-map-baidu.lite.js"></script>
    <script type="text/javascript" src="../../../js/vue.js"></script>
    <script type="text/javascript" src="../../../js/jquery-2.2.4.js"></script>
    <script type="text/javascript" src="../../../js/es6-promise.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../../plugins/toastr/toastr.min.js"></script>
    <script type="text/javascript" src="../../../plugins/element-ui/element-ui.js"></script>
    <script type="text/javascript" src="../../../api/http-request.js"></script>
    <script type="text/javascript" src="../../../plugins/layer/layer.min.js"></script>
    <script type="text/javascript" src="../../../api/rehabilitation-api.js"></script>
    <script type="text/javascript" src="../../../api/recover_api.js"></script>
    <script type="text/javascript" src="../../../js/underscore-1.9.1.js"></script>
    <script type="text/javascript" src="../../../js/util.js" charset="utf-8"></script>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            patient: null,
            patientInfo: {},
            serveDesc: '',
            time: null,
            serviceList: [],
            bmap: null,
            serveAddress: null,
            marker: null,
            doctor: { name: '' },
            detailId: null,
            docInfo: null,
            serveLat: null,
            serveLon: null
          }
        },
        mounted() {
          this.patient = GetRequest().patient
          this.detailId = GetRequest().detailId
          this.docInfo = JSON.parse(localStorage.getItem('docInfo'))
          this.getPatientInfo()
          this.initMap()
        },
        methods: {
          toSelectService() {
            const vm = this
            // this.$message.warning('暂无可供选择的服务，请在下方直接描述您所需的服务')
            sessionStorage.setItem('serviceList', JSON.stringify(this.serviceList))
            top.layer.open({
              type: 2,
              area: ['600px', '800px'],
              shade: 0.5,
              title: '选择服务',
              fixed: true, //不固定
              maxmin: true,
              closeBtn: 1,
              // shift: 5,
              shadeClose: false, //点击遮罩关闭层
              content: `../../rehabilitation/html/serviceDialog.html`,
              end: function () {
                const val = sessionStorage.getItem('serviceList')

                if (val) {
                  sessionStorage.removeItem('serviceList')
                  vm.serviceList = JSON.parse(val)
                }
              }
            })
          },
          getPatientInfo() {
            const vm = this
            httpRequest.post('doctor/patient_label_info/patient', { data: { patient: this.patient } }).then(function (res) {
              vm.patientInfo = res.data
            })
          },
          initMap() {
            var vm = this
            // 初始化地图， 设置中心点坐标和地图级别
            vm.bmap = new BMap.Map('map2')
            const point = new BMap.Point(116.404, 39.915) // 创建点坐标
            vm.bmap.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和缩放级别
            // 添加缩放控件
            // var zoomCtrl = new BMap.ZoomControl({
            //   anchor: BMAP_ANCHOR_BOTTOM_RIGHT
            // })
            // vm.bmap.addControl(zoomCtrl)

            vm.marker = new BMap.Marker(point)
            vm.bmap.addOverlay(vm.marker)

            // vm.bmap.enableScrollWheelZoom()

            vm.bmap.addEventListener('click', function (e) {
              console.log(2)
              return
              vm.getAddress(e.point)
              vm.bmap.clearOverlays()
              vm.marker = new BMap.Marker(e.point) //中心点坐标红点
              vm.bmap.addOverlay(vm.marker) // 增加中心点坐标红点
              vm.bmap.centerAndZoom(new BMap.Point(e.point.lng, e.point.lat)) // 设置地图中心
            })
          },
          getAddress(center) {
            var vm = this
            var params = {
              ak: 'd2GXayjVT86kMvm5FRKvGgY0EjlXdRNx',
              output: 'json',
              coordtype: 'bd09ll',
              location: center.lat + ',' + center.lng
            }
            httpRequest.get('https://api.map.baidu.com/reverse_geocoding/v3/', { data: params }, function (res) {
              if (res.status == 0) {
                vm.serveAddress = res.result.formatted_address
              } else {
                vm.$message.warning('获取地址失败')
              }
            })
          },
          getAddressPoint() {
            var vm = this
            var params = {
              ak: 'd2GXayjVT86kMvm5FRKvGgY0EjlXdRNx',
              output: 'json',
              address: vm.serveAddress,
              city: '厦门市'
            }
            httpRequest.get('third/door/findAreaMap', { data: params }).then(function (res) {
              if (res.status == 200) {
                res = JSON.parse(res.data)
                if (res.status == 0) {
                  if (res.result.location) {
                    vm.bmap.clearOverlays()
                    vm.serveLat = res.result.location.lat
                    vm.serveLon = res.result.location.lng
                    vm.marker = new BMap.Marker(res.result.location) //中心点坐标红点
                    vm.bmap.addOverlay(vm.marker)
                    vm.bmap.centerAndZoom(new BMap.Point(res.result.location.lng, res.result.location.lat), 15) // 设置地图中心
                  }
                } else {
                  vm.$message.warning('获取坐标失败')
                }
              }
            })
          },
          toSelectDoctor() {
            const vm = this
            top.layer.open({
              type: 2,
              area: ['500px', '700px'],
              shade: 0.5,
              title: '选择服务',
              fixed: true, //不固定
              maxmin: true,
              closeBtn: 1,
              // shift: 5,
              shadeClose: false, //点击遮罩关闭层
              content: `../../rehabilitation/html/selectDoctor.html?patient=${this.patient}`,
              end: function () {
                const val = sessionStorage.getItem('selectDoctor')

                if (val) {
                  sessionStorage.removeItem('selectDoctor')
                  vm.doctor = JSON.parse(val)
                }
              }
            })
          },
          reservationFn() {
            const nowDate = new Date().getTime()
            const serviceDate = new Date(this.time).getTime()
            const vm = this
            if (!vm.serveAddress) {
              vm.$message.warning('请输入上门地址')
              return
            }
            if (!vm.time) {
              vm.$message.warning('请输入希望服务时间')
              return
            }
            if (!vm.doctor.name) {
              vm.$message.warning('请选择服务医生')
              return
            }
            if (nowDate >= serviceDate) {
              this.$message.warning('服务时间不能早于当前时间')
              return
            }
            const params = {
              dataJson: JSON.stringify({
                rehabilitationDetailId: this.detailId,
                patientCode: this.patient,
                patientName: this.patientInfo.name,
                doctorCode: vm.docInfo.code,
                doctorName: vm.docInfo.name,
                relationRecordType: 4,
                relationRecordCode: '',
                status: 0,
                node: '',
                relationRecordImg: ''
              })
            }

            const packageItemArr = []
            this.serviceList.forEach(function (item) {
              packageItemArr.push({
                type: 1,
                code: item.code,
                name: item.title,
                fee: item.expense,
                feeDiscount: 0,
                number: item.num,
                status: 1
              })
            })

            var param = {
              jsonData: JSON.stringify({
                order: {
                  proxyPatient: vm.docInfo.patient,
                  proxyPatientName: vm.docInfo.name,
                  proxyPatientPhone: vm.docInfo.mobile,
                  patient: vm.patient,
                  patientName: vm.patientInfo.name,
                  patientPhone: vm.patientInfo.mobile,
                  patientExpectedServeTime: vm.time,
                  serveDesc: vm.serveDesc,
                  serveTown: vm.patientInfo.townName,
                  serveAddress: vm.serveAddress,
                  serveLat: vm.serveLat,
                  serveLon: vm.serveLon,

                  doctor: vm.docInfo.doctor,
                  doctorName: vm.docInfo.name,
                  doctorType: vm.docInfo.jobName,
                  id: null, //重新派单增加orderId
                  relationCode: vm.detailId
                },
                deleteItemArr: [], ////重新派单编辑服务项需传原来服务项id
                packageItemArr: packageItemArr, //提交的服务项
                hospital: {
                  code: vm.docInfo.hospital
                }
              })
            }
            this.saveRehabilitationOperateRecord(params, param)
          },
          saveRehabilitationOperateRecord(params, param) {
            const vm = this
            var url = 'doctor/specialist/rehabilitation/saveRehabilitationOperateRecord'
            httpRequest.post(url, { data: params }).then(function (res) {
              if (res.status == 200) {
                var jsonData = JSON.parse(param.jsonData)
                jsonData.order.relationCode = res.data.id
                param.jsonData = JSON.stringify(jsonData)
                vm.createSend(param)
              } else {
                vm.$message.error(res.msg || '服务记录失败')
              }
            })
          },
          createSend(param) {
            const vm = this
            var url = 'doctor/serviceOrder/proxyCreate'
            httpRequest.post(url, { data: param }).then(function (res) {
              if (res.status == 200) {
                vm.$message.success('预约成功！')
              } else {
                vm.$message.error(res.msg)
              }
            })
          }
        }
      })
    </script>
  </body>
</html>