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 footerOtherMargin">
      <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" v-if="
              !(
                infoDATA.gdState.value == 5 &&
                infoDATA.taskType.associationType.value == 'inspect'
              )
            ">{{ infoDATA.gdState.name }}</text>
          <text class="L_iocn" v-if="
              infoDATA.gdState.value == 5 &&
              infoDATA.taskType.associationType.value == 'inspect'
            ">待送回</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.taskType.associationType.name }}</text>
        </view>
        <view class="page_item_foot_text">
          <text class="text1">任务类型</text>
          <text class="text2">{{ infoDATA.taskType.taskName }}<template
              v-if="infoDATA.goodsRemark">-{{infoDATA.goodsRemark}}</template></text>
        </view>
        <view class="page_item_foot_text" v-if="infoDATA.taskType.associationType.value==='inspect'">
          <text class="text1">是否半程陪检</text>
          <text class="text2">{{ infoDATA.isHalfInspect===1?'是':'否' }}</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">
          <text class="text1">预约时间</text>
          <text class="text2" v-if="infoDATA.taskType.associationType.value == 'inspect'">{{ infoDATA.yyTime }}</text>
          <text class="text2"
            v-if="infoDATA.taskType.associationType.value == 'patientTransport'">{{ infoDATA.yyjdTime|yyTimeFilter }}</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_info" style="padding: 0;" v-if="infoDATA.workOrderRemark !== undefined">
          <view class="page_item_foot_text">
            <view class="text1">工单备注</view>
            <view class="text2" style="float: none;word-break: break-all;">{{ infoDATA.workOrderRemark }}</view>
          </view>
        </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>
          <text class="text"
            v-if="infoDATA.gdState.value == 5 || infoDATA.gdState.value == 6 || infoDATA.gdState.value == 7">
            扫描接收
            <text class="page_item_info_txt">{{scanReception}}</text>
          </text>
          <text class="text" v-if="infoDATA.gdState.value == 6 || infoDATA.gdState.value == 7">
            实际送达
            <text class="page_item_info_txt">{{actualDelivery}}</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 v-if="spe.bedNum">({{spe.bedNum}})</text></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?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 class="page_item_foot_text"
                v-show="item.inspectState.value==1||item.inspectState.value==2||item.inspectState.value==4">
                <view class="btn" @click.stop="remove(item)">移除</view>
              </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>
    <view class="foot_btn2 footerPadding">
      <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']" 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">
          <smallScreen :sData="infoDATA" :sType="1">扫码</smallScreen>
        </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']" 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">
        <smallScreen :sData="infoDATA" :sType="2">扫码</smallScreen>
      </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 class="btn3" @click="viewSpecimen(infoDATA)" v-if="
          infoDATA.taskType.associationType.value == 'specimen' ||
          infoDATA.taskType.associationType.value == 'specimenPlan'
        " 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>
    <!-- 弹窗 -->
    <showModel :title="models1.title" :icon="models1.icon" :disjunctor="models1.disjunctor" :content="models1.content"
      @know="know1" :operate="models1.operate" @ok="ok1" @cancel="cancel1"></showModel>
  </view>
</template>
<script>
  import smallScreen from "../../components/smallScreen/smallScreen.vue";
  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 {
        scanReception: 0,
        actualDelivery: 0,
        currentUserId: 0,
        // 弹窗model
        models: {
          disjunctor: false,
        },
        // 弹窗model1
        models1: {
          disjunctor: false,
        },
        currentInspect: null,
        showType: "show",
        infoDATA: {},
        dataId: "",
        animationData: {},
        // 特殊情况关闭原因开关
        textareaFlag: false,
        textareaText: "",
      };
    },
    filters: {
      // 自定义管道 yyTime
      yyTimeFilter: function(data) {
        if (data) {
          let nDate = null;
          if (typeof data == 'string') {
            let arr = data.split(/[-:\s]/);
            nDate = new Date(
              arr[0] - 0,
              arr[1] - 1,
              arr[2] - 0,
              arr[3] - 0,
              arr[4] - 0,
              0
            );
          } else if (typeof data == 'number') {
            nDate = new Date(data);
          }
          const month = (nDate.getMonth() + 1).toString().padStart(2, 0);
          const date = nDate.getDate().toString().padStart(2, 0);
          const hour = nDate.getHours().toString().padStart(2, 0);
          const minute = nDate.getMinutes().toString().padStart(2, 0);
          return `${month}-${date} ${hour}:${minute}`;
        } else {
          return "-";
        }
      },
    },
    methods: {
      // 查看标本
      viewSpecimen(workOrder) {
        uni.navigateTo({
          url: `../specimenDetail/specimenDetail?workOrderId=${workOrder.id}&associationTypeValue=${workOrder.taskType.associationType.value}`,
        });
      },
      // 移除检查->知道了
      know1() {
        this.models1.disjunctor = false;
        // this.getInfo(this.dataId);
        //baba
        uni.navigateTo({
          url: '../receiptpage/receiptpage',
        });
      },
      // 移除检查->确定
      ok1() {
        this.models1.disjunctor = false;
        let postData = {
          gdId: this.infoDATA.id,
          inspectId: this.currentInspect.id,
        };
        uni.showLoading({
          title: '移除中',
          mask: true,
        })
        post('/workerOrder/removeInspectByOderId', postData).then(res => {
          uni.hideLoading();
          if (res.state == 200) {
            this.models1 = {
              disjunctor: true,
              content: "移除成功",
            };
          } else {
            uni.showToast({
              icon: "none",
              title: "移除失败",
            });
          }
        })
      },
      // 移除检查->取消
      cancel1() {
        this.models1.disjunctor = false;
      },
      // 移除
      remove(item) {
        this.currentInspect = item;
        this.models1 = {
          disjunctor: true,
          content: "是否移除该检查信息",
          icon: "warn",
          operate: {
            ok: "确定",
            cancel: "取消",
          },
        };
      },
      // 拍照
      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) {
            uni.hideLoading();
            this.models = {
              disjunctor: true,
              content: "工单关闭成功",
              icon: "success",
              operate: {
                know: "知道了",
              },
            };
          } else {
            uni.hideLoading();
            this.models = {
              disjunctor: true,
              content: "工单关闭失败",
              icon: "error",
              operate: {
                know: "知道了",
              },
            };
          }
        });
      },
      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();
        }
      },
      // 抢单->知道了
      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;
            // 计算高度
            setTimeout(() => {
              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();
            }, 500)
          } else {
            uni.showToast({
              icon: "none",
              title: "请求失败！",
            });
          }
        });
      },
      // 请求详细页面的数据
      getInfoBySpecimen(id) {
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        post("/api/getWechatItem", {
          id
        }).then((res) => {
          uni.hideLoading();
          if (res.state == 200) {
            this.actualDelivery = res.actualDelivery;
            this.scanReception = res.scanReception;
            this.infoDATA = res.data;
            // 计算高度
            setTimeout(() => {
              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();
            }, 500)
          } else {
            uni.showToast({
              icon: "none",
              title: "请求失败！",
            });
          }
        });
      },
    },
    onLoad(options) {
      console.log(options, 'options');
      this.currentUserId = uni.getStorageSync('userData').user.id;
      let id = options.id;
      this.dataId = id;
      if (
        options.associationTypeValue == 'specimen' ||
        options.associationTypeValue == 'specimenPlan'
      ) {
        this.getInfoBySpecimen(id);
      } else {
        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;
      background: #fff;
      border-radius: 8rpx;
      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 #666;
        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 #666;
          position: absolute;
          top: 82rpx;
          left: 40rpx;
        }

        .lines {
          height: 40%;
          width: 2rpx;
          border-left: 2rpx solid #666;
          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 #666;
        border-bottom: 2rpx dashed #666;
        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 #666;

          .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;
            margin-right: 8rpx;
          }
        }
      }

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

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

        .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;

            &:last-of-type {
              margin-bottom: 0;
            }

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

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

            .btn {
              height: 66rpx;
              width: 132rpx;
              margin: 0 auto;
              background-color: #49b856;
              color: #fff;
              border-radius: 8rpx;
              font-size: 32rpx;
              margin-top: 20rpx;
              text-align: center;
            }
          }
        }
      }

      #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,
      .btn3 {
        height: 66rpx;
        flex: 1;
        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>