zy-wechat/pages/receipt_infopage/receipt_infopage.vue

<template>
  <view class="Receipt_infopage" v-if="Object.keys(infoDATA).length > 0">
    <view class="title">工单信息</view>
    <view class="page_item">
      <view class="page_item_top">
        <view class="page_item_top_L">
          <text class="L_text">单号:{{ infoDATA.gdcode }}</text>
          <view class="page_item_cont_start emergency1" v-if="infoDATA.emergencyType.value == 1">
            <text>
              <text class="cubeic-star icon_transport transport-shiwujiaoxing"></text>
              {{ infoDATA.emergencyType.name }}
            </text>
          </view>
          <view class="page_item_cont_start emergency" v-if="infoDATA.emergencyType.value == 2">
            <text>
              <text class="cubeic-star icon_transport transport-shiwujiaoxing"></text>
              {{ infoDATA.emergencyType.name }}
            </text>
          </view>
          <view class="page_item_cont_start emergencys" v-if="infoDATA.emergencyType.value == 3">
            <text>
              <text class="cubeic-star icon_transport transport-shiwujiaoxing"></text>
              {{ infoDATA.emergencyType.name }}
            </text>
          </view>
        </view>
        <view class="page_item_top_R">
          <!-- <text class="L_iocn">{{infoDATA.taskType.associationType.name}}</text> -->
          <text class="L_iocn" v-if="infoDATA.taskType.associationType.value == 'specimen'">标本</text>
          <text class="L_iocn" v-if="infoDATA.taskType.associationType.value == 'specimenPlan'">标本</text>
          <text class="L_iocn" v-if="infoDATA.taskType.associationType.value == 'drugsBag'">药品</text>
          <text class="L_iocn" v-if="infoDATA.taskType.associationType.value == 'jPBag'">静配</text>
          <text class="L_iocn" v-if="infoDATA.taskType.associationType.value == 'inspect'">患者陪检</text>
          <text class="L_iocn" v-if="infoDATA.taskType.associationType.value == 'patientTransport'">患者转运</text>
          <text class="L_iocn" v-if="infoDATA.taskType.associationType.value == 'other'">其他</text>
        </view>

        <view class="L"></view>
        <view class="R"></view>
      </view>
      <view class="page_item_cont">
        <view class="page_item_cont_T">
          <view class="page_item_cont_title">
            <text> <text class="starting">起</text> 点科室 </text>
            <text class="text_big">{{ infoDATA.startDept.dept }}</text>
          </view>
        </view>
        <view class="line"></view>
        <view class="page_item_cont_B">
          <view class="page_item_cont_title" v-for="(dept, index) of infoDATA.middleDept" :key="'ico' + index">
            <view v-if="infoDATA.taskType.associationType.value == 'inspect'">
              <text> <text class="End">检</text> 查科室 </text>
              <text class="text_big">{{ dept.dept }}</text>
              <view></view>
            </view>
          </view>
          <template v-if="infoDATA.taskType.associationType.value != 'inspect'">
            <view class="page_item_cont_title" v-for="(dept, i) of infoDATA.endDepts" :key="i">
              <view>
                <text> <text class="End">终</text> 点科室 </text>
                <text class="text_big">{{ dept.dept }}</text>
              </view>
            </view>
          </template>
          <view v-if="
              infoDATA.taskType.associationType.value == 'inspect' ||
              infoDATA.taskType.associationType.value == 'patientTransport'
            ">
            <!-- 待抢单 -->
            <text class="red" v-if="infoDATA.gdState.value == 2">请扫描患者腕带，或者请扫描科室码</text>
            <!-- 待到达 -->
            <text class="red" v-if="infoDATA.gdState.value == 4">请扫描患者腕带</text>
            <!-- 执行中 -->
            <text class="red" v-if="infoDATA.gdState.value == 8">请扫描检查科室码，并扫描患者腕带</text>
            <!-- 待送达 -->
            <text class="red" v-if="infoDATA.gdState.value == 5">请扫描终点科室码，并扫描患者腕带</text>
          </view>
        </view>
      </view>
      <view class="page_item_foot">
        <view class="page_item_foot_text">
          <text class="text1">状态</text>
          <text class="text2" v-if="
              !(
                infoDATA.gdState.value == 5 &&
                infoDATA.taskType.associationType.value == 'inspect'
              )
            ">{{ infoDATA.gdState.name }}</text>
          <text class="text2" v-if="
              infoDATA.gdState.value == 5 &&
              infoDATA.taskType.associationType.value == 'inspect'
            ">待送回</text>
        </view>
        <view class="page_item_foot_text">
          <text class="text1">执行人员</text>
          <text class="text2">{{ infoDATA.worker?infoDATA.worker.name:'-' }}</text>
        </view>
        <view class="page_item_foot_text" v-if="infoDATA.gdState.value == '2'">
          <text class="text1">预计响应时间</text>
          <text class="text2">{{ infoDATA.estimeResponseTime || 0 }}</text>
        </view>
        <view class="page_item_foot_text" v-if="infoDATA.gdState.value == '5'">
          <text class="text1" v-if="!(infoDATA.taskType.associationType.value == 'inspect')">预计送达时间</text>
          <text class="text1" v-if="infoDATA.taskType.associationType.value == 'inspect'">预计送回时间</text>
          <text class="text2">{{ infoDATA.estimeCompleteTime || 0 }}</text>
        </view>
        <view class="page_item_foot_text" v-if="infoDATA.gdState.value == '4'">
          <text class="text1">预计到达时间</text>
          <text class="text2">{{ infoDATA.estimateArriveTime || 0 }}</text>
        </view>
        <view class="page_item_foot_text">
          <text class="text1">创建时间</text>
          <text class="text2">{{ infoDATA.startTime }}</text>
        </view>
        <view class="page_item_foot_text" v-if="
            infoDATA.taskType.associationType.value == 'inspect' ||
            infoDATA.taskType.associationType.value == 'patientTransport'
          ">
          <text class="text1">床号</text>
          <text class="text2">{{
            infoDATA.patient ? infoDATA.patient.bedNum : "-"
          }}</text>
        </view>
        <view class="page_item_foot_text" v-if="
            infoDATA.taskType.associationType.value == 'inspect' ||
            infoDATA.taskType.associationType.value == 'patientTransport'
          ">
          <text class="text1">携带设备</text>
          <text class="text2">{{ infoDATA.goods || "暂无" }}</text>
        </view>
        <view class="page_item_foot_text" v-if="
            infoDATA.taskType.associationType.value == 'inspect' ||
            infoDATA.taskType.associationType.value == 'patientTransport'
          ">
          <text class="text1">患者姓名</text>
          <text class="text2">{{ infoDATA.patient.patientName }}({{
              infoDATA.patient.patientCode
            }})</text>
        </view>
        <view class="page_item_foot_text" v-if="
            (infoDATA.taskType.associationType.value == 'inspect' ||
            infoDATA.taskType.associationType.value == 'patientTransport')&&infoDATA.patient.careLevel
          ">
          <text class="text1">{{infoDATA.patient.careLevel.desc}}</text>
          <text class="text2"
            :class="[(infoDATA.patient.careLevel.value==0||infoDATA.patient.careLevel.value==1)?'red':'green']">{{infoDATA.patient.careLevel.name}}</text>
        </view>
        <view class="page_item_foot_text" v-if="
            (infoDATA.taskType.associationType.value == 'inspect' ||
            infoDATA.taskType.associationType.value == 'patientTransport')&&infoDATA.patient.illnessState
          ">
          <text class="text1">{{infoDATA.patient.illnessState.desc}}</text>
          <text class="text2"
            :class="{red:infoDATA.patient.illnessState.value==2||infoDATA.patient.illnessState.value==3}">{{infoDATA.patient.illnessState.name}}</text>
        </view>
        <view class="page_item_foot_text"
          v-if="
            (infoDATA.taskType.associationType.value == 'inspect' ||
            infoDATA.taskType.associationType.value == 'patientTransport')&&(infoDATA.isAccompany===1||infoDATA.isAccompany===0)">
          <text class="text1">陪同情况</text>
          <text class="text2"
            :class="{red:infoDATA.isAccompany===1}">{{ infoDATA.isAccompany===1?'需要医护陪同':'无需医护陪同'}}</text>
        </view>
      </view>
      <!-- 药包 -->
      <view class="page_item_info" v-if="infoDATA.taskType.associationType.value == 'drugsBag'">
        <text class="page_item_info_title">药包信息</text>
        <text class="text">#{{ infoDATA.drugs && infoDATA.drugs.packid }}</text>
      </view>
      <!-- 标本 -->
      <view class="page_item_info" v-if="
          infoDATA.taskType.associationType.value == 'specimen' ||
          infoDATA.taskType.associationType.value == 'specimenPlan'
        ">
        <view>
          <text class="page_item_info_title">标本信息</text>
          <text class="text">
            预计标本总数
            <text class="page_item_info_txt">{{
              infoDATA.expectReceiveNum || 0
            }}</text>
          </text>
        </view>
        <view v-for="spe in infoDATA.specimenSet" :key="spe.id" class="spe_list">
          <view>
            <text class="page_item_info_title">标本类型</text>
            <text class="text">{{ spe.stype ? spe.stype.name : "-" }}({{
                spe.urgent == 1 ? "急" : "普"
              }})</text>
          </view>
          <view>
            <text class="page_item_info_title">标本编码</text>
            <text class="text">{{ spe.scode }}</text>
          </view>
          <view>
            <text class="page_item_info_title">患者姓名</text>
            <text class="text">{{ spe.patientName }}</text>
          </view>
          <view>
            <text class="page_item_info_title">目标科室</text>
            <text class="text">{{
              spe.checkDept ? spe.checkDept.dept : "-"
            }}</text>
          </view>
        </view>
      </view>
      <!-- 静配 -->
      <view class="page_item_info" v-if="infoDATA.taskType.associationType.value == 'jPBag'">
        <text class="page_item_info_title">静配信息</text>
        <text class="text">#{{ infoDATA.staticDistri.packid }}</text>
      </view>
      <!-- 陪检 -->
      <view v-if="infoDATA.taskType.associationType.value == 'inspect'">
        <view class="page_item_info">
          <text class="page_item_info_title">检查信息</text>
        </view>
        <view id="infos" :animation="animationData">
          <view class="page_item_infos" v-for="(item, index) of infoDATA.checkList" :key="index">
            <view class="page_item_info2">
              <view class="page_item_foot_text">
                <text class="text1">检查科室</text>
                <text class="text2">{{ item.execDept?item.execDept.dept:'-' }}</text>
              </view>
              <view class="page_item_foot_text">
                <text class="text1">检查项</text>
                <text class="text2">{{ item.inspectName||'-' }}</text>
              </view>
              <view class="page_item_foot_text">
                <text class="text1">叫号信息</text>
                <text class="text2">{{ item.reservationNumber||'-' }}</text>
              </view>
              <view class="page_item_foot_text">
                <text class="text1">预约时间</text>
                <text class="text2">{{ item.yyTime || "-" }}</text>
              </view>
            </view>
          </view>
        </view>
        <view id="pulldown" @click="show('show')" v-if="showType == 'hiddle'">
          点击可查看检查详情
          <text class="cubeic-pulldown icon_transport transport-paixujiantouxia"></text>
        </view>
        <view id="pullup" @click="show('hiddle')" v-if="showType == 'show'">
          点击可收起检查详情
          <text class="cubeic-pullup icon_transport transport-paixujiantoushang"></text>
        </view>
      </view>
      <view class="page_item_info" v-if="infoDATA.workOrderRemark !== undefined">
        <view class="page_item_foot_text">
          <view class="text1">工单备注</view>
          <text class="text2">{{ infoDATA.workOrderRemark }}</text>
        </view>
      </view>
    </view>
    <view class="foot_btn2">
      <view class="btn2" @click="showAlert" v-if="infoDATA.gdState.value == 2">抢单</view>
      <!-- 如果不是静配，药配，标本配送,标本轮巡 -->
      <template
        v-if="((!infoDATA.worker)||(infoDATA.worker&&infoDATA.worker.id == currentUserId))&&infoDATA.gdState.value != 6&&infoDATA.gdState.value != 7&&infoDATA.gdState.value != 11">
        <view :class="[infoDATA.taskType.specialCloseButton == 1 ? 'btn3' : 'btn2']" @click="Scan_ss(infoDATA)" v-if="
          infoDATA.gdState.value != 2 &&
          infoDATA.taskType.associationType.value != 'jPBag' &&
          infoDATA.taskType.associationType.value != 'drugsBag' &&
          infoDATA.taskType.associationType.value != 'specimen' &&
          infoDATA.taskType.associationType.value != 'specimenPlan'
        " hover-class="seimin-btn-hover">扫一扫</view>
        <view :class="[infoDATA.taskType.specialCloseButton == 1 ? 'btn3' : 'btn2']" @click="photograph(infoDATA)" v-if="
          infoDATA.gdState.value != 2 &&
          infoDATA.taskType.associationType.value != 'jPBag' &&
          infoDATA.taskType.associationType.value != 'drugsBag' &&
          infoDATA.taskType.associationType.value != 'specimen' &&
          infoDATA.taskType.associationType.value != 'specimenPlan' &&
          infoDATA.taskType.associationType.value != 'other' &&
          infoDATA.gdState.value == 4
        " hover-class="seimin-btn-hover">拍照</view>
        <view class="btn3" @click="specialCloseClick()" v-if="
          infoDATA.gdState.value != 2 &&
          infoDATA.taskType.associationType.value != 'jPBag' &&
          infoDATA.taskType.associationType.value != 'drugsBag' &&
          infoDATA.taskType.associationType.value != 'specimen' &&
          infoDATA.taskType.associationType.value != 'specimenPlan' &&
          infoDATA.taskType.specialCloseButton == 1
        " hover-class="seimin-btn-hover">特殊情况关闭</view>
      </template>
      <!-- 如果不是患者陪检或患者转运或其他 -->
      <view :class="[infoDATA.taskType.specialCloseButton == 1 ? 'btn3' : 'btn2']" @click="Scan_s(infoDATA)" v-if="
          infoDATA.gdState.value != 2 &&
          infoDATA.taskType.associationType.value != 'patientTransport' &&
          infoDATA.taskType.associationType.value != 'inspect' &&
          infoDATA.taskType.associationType.value != 'other'
        " hover-class="seimin-btn-hover">扫一扫</view>
      <view class="btn3" @click="specialCloseClick()" v-if="
          infoDATA.gdState.value != 2 &&
          infoDATA.taskType.associationType.value != 'patientTransport' &&
          infoDATA.taskType.associationType.value != 'inspect' &&
          infoDATA.taskType.associationType.value != 'other' &&
          infoDATA.taskType.specialCloseButton == 1
        " hover-class="seimin-btn-hover">特殊情况关闭</view>
    </view>
    <!-- 弹窗 -->
    <showModel :title="models.title" :icon="models.icon" :disjunctor="models.disjunctor" :content="models.content"
      @know="know" :operate="models.operate" @ok="ok" @cancel="cancel" :textareaFlag="textareaFlag"
      @textareaInput="textareaInput"></showModel>
  </view>
</template>
<script>
  import showModel from "../../components/showModel/showModel.vue";
  import {
    get,
    post,
    SM,
    webHandle
  } from "../../http/http.js";
  import {
    photographTool
  } from "../../tools/photograph.js";
  export default {
    data() {
      return {
        currentUserId: 0,
        // 弹窗model
        models: {
          disjunctor: false,
        },
        showType: "hiddle",
        infoDATA: {},
        dataId: "",
        animationData: {},
        // 特殊情况关闭原因开关
        textareaFlag: false,
        textareaText: "",
      };
    },
    methods: {
      // 拍照
      photograph(data) {
        photographTool(data);
      },
      // 特殊情况输入文字
      textareaInput(value) {
        this.textareaText = value;
        if (value.trim().length >= 10) {
          this.models.operate = {
            ok: "确定",
            cancel: "取消",
          };
        } else {
          this.models.operate = {
            cancel: "取消",
          };
        }
      },
      // 特殊情况关闭按钮
      specialCloseClick() {
        this.textareaFlag = true;
        this.models = {
          title: "特殊情况关闭",
          disjunctor: true,
          content: "",
          icon: "",
          operate: {
            cancel: "取消",
          },
        };
      },
      ok() {
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        post("/workerOrder/specialCaseClose", {
          workOrderId: this.dataId,
          reason: this.textareaText.trim(),
        }).then((result) => {
          this.models.disjunctor = false;
          this.textareaFlag = false;
          this.textareaText = "";
          if (result.state == 200) {
            setTimeout(() => {
              uni.hideLoading();
              this.models = {
                disjunctor: true,
                content: "工单关闭成功",
                icon: "success",
                operate: {
                  know: "知道了",
                },
              };
            }, 100);
          } else {
            setTimeout(() => {
              uni.hideLoading();
              this.models = {
                disjunctor: true,
                content: "工单关闭失败",
                icon: "error",
                operate: {
                  know: "知道了",
                },
              };
            }, 100);
          }
        });
      },
      cancel() {
        this.models.disjunctor = false;
        this.textareaFlag = false;
        this.textareaText = "";
      },
      // 点击可查看检查详情
      show(type) {
        this.showType = type;
        if (type === "show") {
          //展开
          // 计算高度
          const query = uni.createSelectorQuery().in(this);
          query
            .selectAll(".page_item_infos")
            .boundingClientRect((data) => {
              let len = data.reduce((prev, current) => {
                return prev + current.height;
              }, 0);
              this.animation.height(len).step();
              this.animationData = this.animation.export();
            })
            .exec();
        } else if (type === "hiddle") {
          this.animation.height(0).step();
          this.animationData = this.animation.export();
        }
      },
      // 如果不是静配，药配，标本配送,标本轮巡
      // 扫码
      Scan_ss(data) {
        let isKs = 0;
        let ids = [];
        let id = data.id;
        ids.push(id);
        let list = {
          code: "",
          ids: ids,
        };
        let code = "";
        let type = "";
        SM().then((ress1) => {
          uni.showLoading({
            title: "加载中",
            mask: true,
          });
          //检验二维码的有效性
          post("/dept/scanning", {
            content: ress1,
          }).then((result) => {
            if (result.state == 200 || result.state == 201) {
              let ress = result.code;
              if (ress) {
                if (
                  data.gdState.value == "4" &&
                  data.taskType.associationType.value == "inspect"
                ) {
                  list.code = ress; //其他
                  type = "handleIns";
                }
                if (
                  (data.taskType.associationType.value == "other" &&
                    data.gdState.value == "4") ||
                  data.gdState.value == "5"
                ) {
                  code = ress; //其他=终点
                  type = "orderSign/" + code;
                  list = ids;
                  isKs = 1;
                }
                if (
                  (data.gdState.value == "5" &&
                    data.taskType.associationType.value == "inspect") ||
                  data.taskType.associationType.value == "patientTransport"
                ) {
                  code = ress; //患者转运--起点
                  type = "orderSign/" + code;
                  list = ids;
                  isKs = 1;
                }
                if (data.gdState.value == "8") {
                  code = ress; //患者陪检--检查
                  type = "orderSign/" + code;
                  list = ids;
                  isKs = 1;
                }
                if (
                  data.gdState.value == "4" &&
                  data.taskType.associationType.value == "patientTransport"
                ) {
                  list = {
                    code: ress, //患者转运--检查
                    ids: ids,
                  };
                  type = "handleTrans";
                }
                post("/workerOrder/" + type, list).then((res) => {
                  uni.hideLoading();
                  if (res) {
                    if (res.status == 200) {
                      if (
                        data.gdState.value == "4" &&
                        data.taskType.associationType.value == "other"
                      ) {
                        uni.navigateTo({
                          url: `../scanning_code/scanning_code?type=${data.taskType.associationType.value}&type1=${res.type}&id=${data.id}&deptCode=${code}&dept=${res.dept}`,
                        });
                      }
                      if (
                        data.gdState.value == "4" &&
                        data.taskType.associationType.value != "other"
                      ) {
                        uni.navigateTo({
                          url: `../scanning_Result/scanning_Result?type=${
                          data.taskType.associationType.value
                        }&type1=${res.type}&id=${data.id}&deptCode=${
                          list.code
                        }&patient=${res.patient}&patientCode=${
                          res.patientCode
                        }&deptName=${res.deptName}&bedNum=${
                          res.bedNum
                        }&status=${res.status}&msg=${
                          res.msg
                        }&model=${encodeURIComponent(JSON.stringify(res))}`,
                        });
                      }
                      if (data.gdState.value == "8") {
                        uni.navigateTo({
                          url: `../scanning_code/scanning_code?type=${data.taskType.associationType.value}&type1=${res.type}&id=${data.id}&deptCode=${code}&dept=${res.dept}`,
                        });
                      }
                      if (data.gdState.value == "5") {
                        uni.navigateTo({
                          url: `../scanning_code/scanning_code?type=${data.taskType.associationType.value}&type1=${res.type}&id=${data.id}&deptCode=${code}&dept=${res.dept}`,
                        });
                      }
                    } else {
                      if (res.type == "trans-ddd-1") {
                        //起点科室扫描腕带码失败
                        uni.navigateTo({
                          url: `../scanning_Result/scanning_Result?type=${data.taskType.associationType.value}&type1=${res.type}&id=${data.id}&status=600&msg=${res.msg}`,
                        });
                      } else {
                        uni.navigateTo({
                          url: `../scanning_Result/scanning_Result?type=${
                          data.taskType.associationType.value
                        }&type1=${res.type}&id=${data.id}&status=600&msg=${
                          res.msg
                        }&isKs=${isKs}&model=${encodeURIComponent(
                          JSON.stringify(res)
                        )}`,
                        });
                      }
                    }
                  } else {
                    uni.navigateTo({
                      url: `../scanning_Result/scanning_Result?id=${data.id}&status=600&msg=扫码失败！请扫描正确的二维码！&isKs=${isKs}`,
                    });
                  }
                });
              }
            } else {
              uni.hideLoading();
              uni.showToast({
                icon: "none",
                title: "请求失败！",
              });
            }
          });
        });
      },
      // 如果不是患者陪检或患者转运或其他
      // 扫码
      Scan_s(data) {
        let ids = [];
        let id = data.id;
        ids.push(id);
        let code = "";
        SM().then((ress1) => {
          uni.showLoading({
            title: "加载中",
            mask: true,
          });
          //检验二维码的有效性
          post("/dept/scanning", {
            content: ress1,
          }).then((result) => {
            if (result.state == 200 || result.state == 201) {
              let ress = result.code;
              if (ress) {
                code = ress;
                // 科室签到
                post("/workerOrder/orderSign/" + code, ids).then((res) => {
                  uni.hideLoading();
                  if (res.status == 200) {
                    // 跳转到扫描科室
                    // type1: res.type, //type类型
                    // id: data.id, //工单ID
                    // deptCode: code, //二维码
                    // dept: res.dept //科室名称
                    uni.navigateTo({
                      url: `../scanning_code/scanning_code?type=${data.taskType.associationType.value}&type1=${res.type}&id=${data.id}&deptCode=${code}&dept=${res.dept}`,
                    });
                  } else {
                    uni.navigateTo({
                      url: `../scanning_Result/scanning_Result?type=${data.taskType.associationType.value}&type1=${res.type}&id=${data.id}&status=600&msg=${res.msg}&isKs=1`,
                    });
                  }
                });
              }
            } else {
              uni.hideLoading();
              uni.showToast({
                icon: "none",
                title: "请求失败！",
              });
            }
          });
        });
      },
      // 抢单->知道了
      know() {
        this.models.disjunctor = false;
        uni.navigateTo({
          url: "../receiptpage/receiptpage",
        });
      },
      // 抢单
      showAlert() {
        get("/workerOrder/takeOrder/" + this.infoDATA.id).then((res) => {
          if (res.status == 200) {
            this.models = {
              disjunctor: true,
              content: "接单成功",
              icon: "success",
              operate: {
                know: "知道了",
              },
            };
          } else {
            uni.showToast({
              icon: "none",
              title: "请求失败！",
            });
          }
        });
      },
      // 请求详细页面的数据
      getInfo(id) {
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        get("/api/fetchData/workOrder/" + id).then((res) => {
          uni.hideLoading();
          if (res.status == 200) {
            this.infoDATA = res.data;
          } else {
            uni.showToast({
              icon: "none",
              title: "请求失败！",
            });
          }
        });
      },
    },
    onLoad(options) {
      this.currentUserId = uni.getStorageSync('userData').user.id;
      let id = options.id;
      this.dataId = id;
      this.getInfo(id);
      // 创建动画
      this.animation = uni.createAnimation({
        duration: 500,
        timingFunction: "ease",
      });
      // #ifdef APP-PLUS
      webHandle("no", "app");
      // #endif
      // #ifdef H5
      webHandle("no", "wx");
      // #endif
    },
    onUnload() {
      // 页面关闭后清空数据
      this.animationData = {};
    },
  };
</script>
<style lang="less">
  .Receipt_infopage {
    padding: 0 20rpx;
    overflow: hidden;

    .red {
      color: red !important;
      font-weight: bold !important;
    }

    .green {
      color: #49b856 !important;
      font-weight: bold !important;
    }

    .title {
      font-size: 48rpx;
      margin-top: 24rpx;
      margin-bottom: 24rpx;
      text-align: center;
    }

    .page_item {
      margin-top: 16rpx;
      margin-bottom: 124rpx;
      min-height: 356rpx;
      background: #fff;
      border-radius: 8rpx;
      overflow: hidden;
      padding: 0 16rpx;
      border: 2rpx solid #e5e9ed;

      .L {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        background: #f9fafb;
        position: relative;
        left: -50rpx;
        top: 66rpx;
      }

      .R {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        background: #f9fafb;
        position: relative;
        float: right;
        right: -50rpx;
        top: 26rpx;
      }

      .starting {
        width: 50rpx;
        height: 50rpx;
        color: #fff;
        background: #49b856;
        display: inline-block;
        border-radius: 50%;
        text-align: center;
        line-height: 46rpx;
        font-size: 32rpx;
        margin-right: 6rpx;
      }

      .End {
        width: 50rpx;
        height: 50rpx;
        color: #fff;
        background: #39b199;
        display: inline-block;
        border-radius: 50%;
        text-align: center;
        line-height: 46rpx;
        font-size: 32rpx;
        margin-right: 6rpx;
      }

      .page_item_top {
        height: 86rpx;
        border-bottom: 2rpx dashed #e5e9ed;
        padding: 0 16rpx;

        .page_item_top_L {
          height: 100%;
          float: left;
          line-height: 88rpx;

          .emergencys {
            background: #ff3b53 !important;
            width: 124rpx !important;
          }

          .emergency {
            background: #ff3b53 !important;
          }

          .emergency1 {
            background: #49b856 !important;
          }

          .page_item_cont_start {
            text-align: center;
            height: 44rpx;
            width: 104rpx;
            line-height: 44rpx;
            border-radius: 8rpx;
            background: #49b856;
            color: #fff;
            display: inline-block;
            font-size: 28rpx;

            .cubeic-star {
              margin-right: 8rpx;
            }
          }

          .L_time {
            color: #6cc076;
            font-size: 32rpx;
          }

          .L_text {
            font-size: 32rpx;
            display: inline-block;
            font-weight: 700;
            margin-right: 16rpx;
          }
        }

        .page_item_top_R {
          height: 60rpx;
          float: right;
          padding-top: 20rpx;
          font-size: 32rpx;
          position: absolute;
          right: 50rpx;

          .L_iocn {
            display: inline-block;
            height: 52rpx;
            line-height: 48rpx;
            color: rgb(7, 134, 60);
            font-size: 36rpx;
            font-weight: 700;
          }
        }
      }

      .page_item_cont {
        min-height: 180rpx;
        // max-height: 424rpx;
        padding: 0 16rpx;
        text-align: left;
        position: relative;

        .text_big {
          font-size: 32rpx;
          position: absolute;
          right: 16rpx;
          font-weight: 700;
          margin-top: 10rpx;
        }

        .text_big2 {
          font-size: 32rpx;
          position: absolute;
          right: 16rpx;
          font-weight: 700;
        }

        .line {
          height: 20rpx;
          width: 2rpx;
          border-left: 2rpx solid #e5e9ed;
          position: absolute;
          top: 82rpx;
          left: 40rpx;
        }

        .lines {
          height: 40%;
          width: 2rpx;
          border-left: 2rpx solid #e5e9ed;
          position: absolute;
          top: 23%;
          left: 36rpx;
        }

        .page_item_cont_T {
          padding-top: 28rpx;
          font-size: 28rpx;

          .page_item_cont_title {
            height: 100%;
            font-size: 32rpx;
          }
        }

        .page_item_cont_B {
          padding-top: 28rpx;
          margin-bottom: 28rpx;

          .page_item_cont_title {
            height: 60rpx;
            font-size: 32rpx;
          }

          .page_item_cont_title1 {
            height: 60rpx;
            line-height: 60rpx;
            font-size: 32rpx;
            padding-left: 64rpx;
          }
        }
      }

      .page_item_foot {
        border-top: 2rpx dashed #e5e9ed;
        border-bottom: 2rpx dashed #e5e9ed;
        padding: 28rpx 16rpx;
        text-align: left;

        .page_item_foot_text {
          font-size: 32rpx;
          margin-bottom: 20rpx;

          .text1 {
            color: rgb(102, 102, 102);
          }

          .text2 {
            float: right;
            font-weight: 700;
          }
        }
      }

      .page_item_info {
        padding: 20rpx 16rpx;
        text-align: left;
        line-height: 60rpx;
        font-size: 32rpx;

        .spe_list {
          padding: 32rpx 0;
          border-top: 2rpx solid #e5e9ed;

          .page_item_info_title {
            color: #666;
          }
        }

        .page_item_info_title {
          font-weight: 700;
        }

        .text {
          float: right;
          font-weight: 700;

          .page_item_info_txt {
            color: #49b856;
            margin-left: 8rpx;
          }
        }
      }

      #infos {
        height: 0;
        overflow: hidden;
      }

      .page_item_infos {
        padding-bottom: 20rpx;
        border-bottom: 2rpx dashed #e5e9ed;

        .page_item_info2 {
          text-align: left;
          line-height: 60rpx;
          font-size: 32rpx;
          padding-left: 16rpx;

          .page_item_foot_text {
            font-size: 32rpx;
            margin-bottom: 20rpx;

            .text1 {
              color: rgb(102, 102, 102);
            }

            .text2 {
              float: right;
              font-weight: 700;
            }
          }
        }
      }

      #pulldown {
        color: #49b856;
        font-size: 36rpx;
        height: 60rpx;
        text-align: center;

        .cubeic-pulldown {
          font-size: 48rpx;
          position: relative;
          bottom: 6rpx;
        }
      }

      #pullup {
        color: #49b856;
        font-size: 36rpx;
        height: 60rpx;
        text-align: center;

        .cubeic-pullup {
          font-size: 48rpx;
          position: relative;
          top: 12rpx;
        }
      }
    }

    .foot_btn2 {
      position: fixed;
      bottom: 0;
      right: 20rpx;
      left: 20rpx;
      line-height: 66rpx;
      height: 100rpx;
      border-top: 2rpx solid #e5e9ed;
      background: #f9fafb;
      display: flex;
      justify-content: space-between;

      .btn2 {
        height: 66rpx;
        width: 100%;
        margin: 0 1%;
        background-image: linear-gradient(to right, #72c172, #3bb197);
        color: #fff;
        border-radius: 8rpx;
        font-size: 32rpx;
        margin-top: 16rpx;
        text-align: center;
      }

      .btn3 {
        height: 66rpx;
        width: 48%;
        margin: 0 1%;
        background-image: linear-gradient(to right, #72c172, #3bb197);
        color: #fff;
        border-radius: 8rpx;
        font-size: 32rpx;
        margin-top: 16rpx;
        text-align: center;
      }
    }
  }
</style>