zuel-itsm-3.0.2/src/views/IncidentNewList.vue

<template>
  <div class="bgColor">
    <div slot="content" class="scroll-wrapper">
      <div class="demo">
        <div class="header">事件列表</div>
        <div class="stateSearchWrap">
          <!-- <cube-select
            class="stateSearch"
            v-model="searchType"
            :options="searchsType"
            @change="typeChange()"
          ></cube-select>
          <cube-select
            class="stateSearch"
            v-model="searchState"
            :options="searchsState"
            @change="typeChange()"
          ></cube-select> -->
          <div class="stateSearch" @click="typeChange(tab)" v-for="tab in tabTypes" :key="tab.id" :class="{active: tabTypeIdActive == tab.id}">
            {{ tab.text }}（{{ tab.num }}）
            <div class="filter" v-if="tab.id == 2" @click.stop="showDrawer()" :class="{active: tabTypeIdActive == tab.id}"><i class="dash dash-shaixuan"></i></div>
          </div>
        </div>
        <div class="scroll-list-wrap">
          <cube-scroll
            ref="scroll"
            :data="items"
            :options="options"
            @pulling-down="onPullingDown"
            @pulling-up="onPullingUp"
          >
            <div class="conentBox" v-if="!loadShow && items.length">
              <div
                class="conent"
                v-for="item in items"
                :key="item.id"
                @click="toIncidentDetails(item)"
              >
                <div class="head">
                  <p>
                    <i class="iconfont icon-zuixinbaoxiu newPapir"></i>
                    事件编号：{{ item.incidentsign }}
                    <span
                      :class="{
                        btn: true,
                        daipingjia: item.state.name == '待评价',
                        daijiedan:
                          item.state.name == '待接单' &&
                          item.handlerUser &&
                          !item.candidateGroups,
                        daiqiangdan:
                          item.state.name == '待接单' &&
                          !item.handlerUser &&
                          item.candidateGroups,
                        chulizhong: item.state.name == '处理中',
                        yijiejue: item.state.name == '已解决',
                        yiguanbi: item.state.name == '已关闭',
                        chongxinzhipai: item.state.name == '重新指派'
                      }"
                      >{{
                        item.state.name == "待接单"
                          ? item.handlerUser && !item.candidateGroups
                            ? "待接单"
                            : "待抢单"
                          : item.state.name
                      }}</span
                    >
                  </p>
                </div>
                <div class="center">
                  <p class="desc">
                    <span class="fl">事件描述：</span>
                    <span
                      class="grayFont overflowEllipsis2"
                      v-html="item.description"
                    ></span>
                  </p>
                  <p v-if="valConfig == 1">
                    报修人 ：
                    <span class="grayFont">{{ item.requester?item.requester.name:'' }}</span>
                    <span @click.stop v-if="item.contactsInformation"
                      ><a :href="'tel:' + item.contactsInformation"
                        >(<i class="iconfont icon-shouji"></i
                        >{{ item.contactsInformation }})</a
                      ></span
                    >
                  </p>
                  <p v-if="valConfig == 2">
                    报修科室 ：
                    <span class="grayFont">{{
                      item.department ? item.department.dept : ""
                    }}</span>
                  </p>
                </div>
                <div class="bottom">
                  <span v-if="!item.place"></span>
                  <span
                    v-if="item.place"
                    style="width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
                    >{{ item.place.area.area }} {{ item.place.place }}
                    {{ item.houseNumber }}</span
                  >
                  <span>
                    <i v-if="item.callID" @click.stop="showAudio(item.callID)" class="dash dash-dianbohuifang"></i>
                    {{ item.acceptDate | timeFormat("MM-dd HH:mm") }}
                  </span>
                </div>
                <div class="btns">
                  <cube-form-group
                    class="sub-btn"
                    v-show="
                      (item.state.id === 1544 || item.state.id === 1543) &&
                        isAssign
                    "
                  >
                    <cube-button @click.stop="assign(item)">指派</cube-button>
                  </cube-form-group>
                  <cube-form-group
                    class="sub-btn"
                    v-show="item.state.id === 1544"
                  >
                    <cube-button @click.stop="addHandlerLog(item)"
                      >维修进度</cube-button
                    >
                  </cube-form-group>
                  <cube-form-group
                    class="sub-btn"
                     v-if="item.state.value != 1546 && !item.handlerUser && jurisdiction(item) && qiangdan(item)"
                  >
                    <cube-button @click.stop="subVali(item)"
                      >抢单</cube-button
                    >
                  </cube-form-group>
                </div>
              </div>
            </div>
            <template v-if="customPullDown" slot="pulldown" slot-scope="props">
              <div
                v-if="props.pullDownRefresh"
                class="cube-pulldown-wrapper"
                :style="props.pullDownStyle"
              >
                <div
                  v-show="props.beforePullDown"
                  class="before-trigger"
                  :style="{ paddingTop: props.bubbleY + 'px' }"
                >
                  <span
                    :class="{
                      rotate: props.bubbleY > pullDownRefreshThreshold - 40
                    }"
                    >↓</span
                  >
                </div>
                <div class="after-trigger" v-show="!props.beforePullDown">
                  <div v-show="props.isPullingDown" class="loading">
                    <cube-loading></cube-loading>
                  </div>
                  <div v-show="!props.isPullingDown" class="text">
                    <span class="refresh-text">更新成功</span>
                  </div>
                </div>
              </div>
            </template>
            <!-- <div class="wushuju" v-if="!loadShow && items.length === 0">
              <img src="./../../static/images/wushuju.svg" alt />
              <p>暂无事件</p>
            </div> -->
          </cube-scroll>
        </div>
      </div>
    </div>
    <load-ing v-show="loadShow"></load-ing>
    <!-- 指派弹窗 -->
    <showModel
      v-if="models.disjunctor"
      :title="models.title"
      :icon="models.icon"
      :disjunctor="models.disjunctor"
      @ok="ok"
      @cancel="cancel"
      :operate="models.operate"
      selectName="user"
    ></showModel>
    <!-- 新增维修记录弹窗 -->
    <showModel
      :title="models1.title"
      :icon="models1.icon"
      :disjunctor="models1.disjunctor"
      @ok="ok1"
      @cancel="cancel1"
      :operate="models1.operate"
      textName="textarea"
    ></showModel>
    <div class="mask" v-if="audioMask" @click="hideAudio()">
      <audio controls autoplay="autoplay" id="bgMusic">
        <source :src="audioSrc" type="audio/mpeg">
      </audio>
    </div>
    <seiminDrawer v-if="isShowDrawer" @close="closeDrawer" @confirm="confirmDrawer" :evt="evt"></seiminDrawer>
  </div>
</template>
<script>
import seiminDrawer from "../custom/seiminDrawer.vue";
import showModel from "../components/showModel/showModel.vue";
import CubePage from "../components/cube-page.vue";
import SwitchOption from "../components/switch-option";
import InputOption from "../components/input-option";
import SelectOption from "../components/select-option";
import { formatDate } from "./../components/js/date.js";
import LoadIng from "./../views/loading.vue";
export default {
  data() {
    return {
      evt: null,
      isShowDrawer: false,
      tabTypeIdActive: 2,
      tabTypes: [
        {
          id: 1,
          text: "待接单",
          num: 0
        },
        {
          id: 2,
          text: "处理中",
          num: 0
        }
      ],
      audioSrc:'',//音频路径
      audioMask:false,//音频
      modelsData: null, //点击弹窗的那一项数据
      modelsData1: null, //点击弹窗的那一项数据
      // 弹窗model
      models: {
        disjunctor: false
      },
      models1: {
        disjunctor: false
      },
      isAssign: false, //是否有权限指派
      isAll: false, //是否显示全部事件
      loginUser: JSON.parse(localStorage.getItem("loginUser")),
      menu: JSON.parse(localStorage.getItem("menu")),
      valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
      items: [],
      pullDownRefresh: true,
      pullDownRefreshThreshold: 60,
      pullDownRefreshStop: 40,
      pullDownRefreshTxt: "更新成功",
      pullUpLoad: true,
      pullUpLoadThreshold: 0,
      pullUpLoadMoreTxt: "加载更多",
      pullUpLoadNoMoreTxt: "没有更多数据",
      customPullDown: true,
      candidateGroups: "",
      searchsType: [
        {
          text: "待我处理",
          value: "todo"
        },
        {
          text: "与我关联",
          value: "done"
        }
      ],
      searchsState:[],//状态列表
      searchType: "todo",
      searchState: 1544,
      type: "todo",
      isToday: "",
      sum: 10,
      idx: 0,
      stateClass: "",
      loadShow: true
    };
  },
  components: {
    CubePage,
    SwitchOption,
    InputOption,
    SelectOption,
    LoadIng,
    showModel,
    seiminDrawer,
  },
  computed: {
    options() {
      return {
        pullDownRefresh: this.pullDownRefreshObj,
        pullUpLoad: this.pullUpLoadObj,
        scrollbar: true
      };
    },
    pullDownRefreshObj: function() {
      return this.pullDownRefresh
        ? {
            threshold: parseInt(this.pullDownRefreshThreshold),
            txt: this.pullDownRefreshTxt
          }
        : false;
    },
    pullUpLoadObj: function() {
      return this.pullUpLoad
        ? {
            threshold: parseInt(this.pullUpLoadThreshold),
            txt: {
              more: this.pullUpLoadMoreTxt,
              noMore: this.pullUpLoadNoMoreTxt
            }
          }
        : false;
    }
  },
  methods: {
    // 确认侧边筛选框
    confirmDrawer(evt){
      console.log(evt);
      this.evt = evt;
      this.loadShow = true;
      this.items = [];
      this.idx = 0;
      this.sum = 10;
      this.getData();
    },
    // 关闭侧边筛选框
    closeDrawer(){
      this.isShowDrawer = false;
    },
    // 打开侧边筛选框
    showDrawer(){
      this.isShowDrawer = true;
    },
    qiangdan(incident){
      return this.menu.some(v => v.link == 'shijianliebiao_qiangdan');
    },
    jurisdiction(incident){
      return this.loginUser.group.some(v => v.id == incident.candidateGroups);
    },
    // 抢单
    subVali(incident) {
      //数据提交
      var that = this;
      this.$createDialog({
        type: 'confirm',
        icon: 'cubeic-alert',
        title: '提示',
        content: '是否抢单？',
        confirmBtn: {
          text: '确定',
          active: true,
          disabled: false,
          href: 'javascript:;'
        },
        cancelBtn: {
          text: '取消',
          active: false,
          disabled: false,
          href: 'javascript:;'
        },
        onConfirm: () => {
          that.$http
          .post(
            "service/bpm/bpm/claimAndCompletedTask/" + incident.taskId,
            { receive_code: "handler", userId: that.loginUser.id }
          )
          .then(function (res) {
            console.log(res.data);
            if (res.data.status == 200) {
              that
                .$createDialog({
                  type: "alert",
                  title: "抢单成功",
                  content: "点击返回首页",
                  icon: "cubeic-right",
                  onConfirm: (e, promptValue) => {
                    that.$router.push({ path: "/main" });
                  },
                })
                .show();
            }else{
              this.$createDialog({
                type: "alert",
                title: "系统错误,请稍后再试!",
                icon: "cubeic-wrong",
              }).show();
            }
          });
        },
        onCancel: () => {

        }
      }).show()

    },
    // 播放音频
    showAudio(callID){
      const toast = this.$createToast({
        txt: "Loading...",
        mask: true
      });
      toast.show();
      this.$http
        .post("service/bpm/data/fetchDataList/callrecord", {idx: 0, sum: 1, callrecord: {callAccept: callID}})
        .then(res => {
          toast.hide();
          if (res.data.status == 200) {
            res.data.list = res.data.list || [];
            if(res.data.list.length){
                this.audioMask = true;
                this.audioSrc = this.$host+res.data.list[0].recordingFileName;
            }
          }
        });
    },
    // 隐藏音频组件
    hideAudio(){
      this.audioMask=false;
    },
    //确定
    ok(selectUserId) {
      console.log(selectUserId);
      if (!selectUserId) {
        this.$createDialog({
          type: "alert",
          title: "请选择指派对象",
          icon: "cubeic-warn"
        }).show();
        return;
      }
      const toast = this.$createToast({
        txt: "Loading...",
        mask: true
      });
      toast.show();
      this.$http
        .post("service/bpm/bpm/delegateTask/" + this.modelsData.taskId, {
          assginee: selectUserId,
          incidentId: this.modelsData.assignee ? undefined : this.modelsData.id,
          processInstanceId: this.modelsData.processInstanceId,
        })
        .then(res => {
          toast.hide();
          this.models.disjunctor = false;
          if (res.status == 200) {
            this.$createDialog({
              type: "alert",
              title: "操作成功",
              icon: "cubeic-right",
              onConfirm: (e, promptValue) => {
                this.loadShow = true;
                this.items = [];
                this.idx = 0;
                this.getData();
              }
            }).show();
          } else {
            this.$createDialog({
              type: "alert",
              title: "系统错误,请稍后再试!",
              icon: "cubeic-wrong",
              onConfirm: (e, promptValue) => {
                this.loadShow = true;
                this.items = [];
                this.idx = 0;
                this.getData();
              }
            }).show();
          }
        });
    },
    //取消
    cancel() {
      this.models.disjunctor = false;
    },
    // 指派
    assign(item) {
      this.modelsData = item;
      this.models = {
        disjunctor: true,
        title: "指派对象",
        icon: "warn",
        operate: {
          ok: "确定",
          cancel: "取消"
        }
      };
    },
    //确定
    ok1(obj) {
      console.log(obj);
      if (!obj.maintenanceMode) {
        this.$createDialog({
          type: "alert",
          title: "请选择维修方式",
          icon: "cubeic-warn"
        }).show();
        return;
      }
      if (!obj.estimatedNumberOfDays) {
        this.$createDialog({
          type: "alert",
          title: "请选择预估天数",
          icon: "cubeic-warn"
        }).show();
        return;
      }
      if (!obj.textareaData.trim()) {
        this.$createDialog({
          type: "alert",
          title: "请填写维修记录",
          icon: "cubeic-warn"
        }).show();
        return;
      }
      const toast = this.$createToast({
        txt: "Loading...",
        mask: true
      });
      toast.show();
      this.$http
        .post("service/bpm/data/addData/operationLog", {
          operationLog: {
            opType: "handlerLog",
            opValue: obj.textareaData,
            extra1: this.modelsData1.id,
            repairType: obj.maintenanceMode,
            expectedDay: obj.estimatedNumberOfDays,
          }
        })
        .then(res => {
          toast.hide();
          this.models1.disjunctor = false;
          if (res.status == 200) {
            this.$createDialog({
              type: "alert",
              title: "操作成功",
              icon: "cubeic-right",
              onConfirm: (e, promptValue) => {
                this.loadShow = true;
                this.items = [];
                this.idx = 0;
                this.getData();
              }
            }).show();
          } else {
            this.$createDialog({
              type: "alert",
              title: "系统错误,请稍后再试!",
              icon: "cubeic-wrong",
              onConfirm: (e, promptValue) => {
                this.loadShow = true;
                this.items = [];
                this.idx = 0;
                this.getData();
              }
            }).show();
          }
        });
    },
    //取消
    cancel1() {
      this.models1.disjunctor = false;
    },
    // 新增维修记录
    addHandlerLog(item) {
      this.modelsData1 = item;
      this.models1 = {
        disjunctor: true,
        title: "新增维修记录",
        icon: "warn",
        operate: {
          ok: "确定",
          cancel: "取消"
        }
      };
    },
    getParamsState() {
      if (this.$route.params.type) {
        this.type = this.$route.params.type;
        this.isToday = this.$route.params.isToday;
        if (this.type === "todo") {
          this.searchType = "todo";
        } else if (this.type === "done") {
          this.searchType = "done";
        } else {
          this.searchType = "all";
        }
      }
      if(this.$route.params.status){
        this.searchState = this.$route.params.status ? Number(this.$route.params.status) : 0;
      }
    },
    typeChange(tab) {
      this.tabTypeIdActive = tab.id;
      if(tab.id == 1){
        this.searchState = 1543;
      }else if(tab.id == 2){
        this.searchState = 1544;
      }
      this.loadShow = true;
      this.items = [];
      this.idx = 0;
      this.sum = 10;
      this.getData();
    },
    toIncidentDetails(data) {
      console.log(1111111);
      console.log(data);
      var name = "";
      if (data.state.value == "pending") {
        if (data.handlerUser && !data.candidateGroups) {
          // 指派给人 接单
          name = "Order";
        } else if (data.candidateGroups && !data.handlerUser) {
          // 指派给组 抢单
          name = "GrabSheet";
        }
      } else if (data.state.value == "reassign") {
        name = "AgainAssign";
      } else if (data.state.value == "handler") {
        name = "Processing";
      } else if (data.state.value == "resolved") {
        name = "Solved";
      } else if (data.state.value == "close") {
        name = "Closed";
      }
      if(data.duty && data.duty.addSummary == 1 && name == "Processing"){
        // 责任科室【是否需要填写汇总单】开启，并且工单状态是处理中
        this.$router.push({
          path: `/summaryOrder/${data.id}/${data.processInstanceId}`
        });
      }else{
        this.$router.push({
          name: name,
          params: {
            data: data
          }
        });
      }
    },
    getNum(statusId) {
      let postData = {
        assignee: this.loginUser.id,
        candidateGroups: this.candidateGroups,
        searchType: this.searchType,
        idx: 0,
        sum: 1,
        incident: { temporary: true,statusId }
      };
      if(this.evt && this.evt.category.id){
        postData.incident.levelCategory = this.evt.category;
      }
      if(this.evt && this.evt.area.id){
        postData.incident.place = {
          area: this.evt.area
        }
      }
      if (this.isToday == "today") {
        postData.incident.acceptDate =
          formatDate(new Date(), "yyyy-MM-dd") + " 00:00:00";
        postData.incident.acceptDateEnd =
          formatDate(new Date(), "yyyy-MM-dd") + " 23:59:59";
      }
      if(this.searchType === 'all'){
        // 全部事件
        if(this.loginUser.duty){
            // 当前的所属责任科室
            postData.incident.duty = this.loginUser.duty;
        }else if(this.loginUser.branch){
            // 当前的所属院区
            postData.incident.branch = this.loginUser.branch.id;
        }
        this.$http
        .post("service/user/data/fetchDataList/incident", postData)
        .then((res) => {
          if(statusId == 1543){
            this.tabTypes[0].num = res.data.totalNum;
          }else if(statusId == 1544){
            this.tabTypes[1].num = res.data.totalNum;
          }
        });
      }else{
        this.$http
        .post("service/bpm/bpm/fetchTask/bpm_incident", postData)
        .then((res) => {
          if(statusId == 1543){
            this.tabTypes[0].num = res.data.resultCount;
          }else if(statusId == 1544){
            this.tabTypes[1].num = res.data.resultCount;
          }
        });
      }
    },

    getData() {
      let postData = {
        assignee: this.loginUser.id,
        candidateGroups: this.candidateGroups,
        searchType: this.searchType,
        idx: this.idx,
        sum: this.sum,
        incident: {
          temporary: true,
          statusId:this.searchState?this.searchState:undefined,
        }
      };
      if(this.evt && this.evt.category.id){
        postData.incident.levelCategory = this.evt.category;
      }
      if(this.evt && this.evt.area.id){
        postData.incident.place = {
          area: this.evt.area
        }
      }
      if (this.isToday == "today") {
        postData.incident.acceptDate =
          formatDate(new Date(), "yyyy-MM-dd") + " 00:00:00";
        postData.incident.acceptDateEnd =
          formatDate(new Date(), "yyyy-MM-dd") + " 23:59:59";
      }
      if(this.searchType === 'all'){
        // 全部事件
        if(this.loginUser.duty){
            // 当前的所属责任科室
            postData.incident.duty = this.loginUser.duty;
        }else if(this.loginUser.branch){
            // 当前的所属院区
            postData.incident.branch = this.loginUser.branch.id;
        }
        this.$http
        .post("service/user/data/fetchDataList/incident", postData)
        .then((res) => {
          if (res.data.list.length > 0) {
            for (var i = 0; i < res.data.list.length; i++) {
              delete res.data.list[i].handlingPersonnelUser;
              delete res.data.list[i].sendBackUser;
              delete res.data.list[i].colourInfo;
              if(res.data.list[i].acceptUser){
                res.data.list[i].acceptUser = {
                  id: res.data.list[i].acceptUser.id,
                  name: res.data.list[i].acceptUser.name,
                };
              }
              res.data.list[i].createTime = formatDate(
                new Date(res.data.list[i].createTime),
                "yyyy-MM-dd hh:mm"
              );
            }
            if (this.idx) {
              this.items = this.items.concat(res.data.list);
            } else {
              this.items = res.data.list;
            }
          } else {
            this.$refs.scroll.forceUpdate();
          }
          if(this.searchState == 1543){
            this.tabTypes[0].num = res.data.totalNum;
            this.getNum(1544);
          }else if(this.searchState == 1544){
            this.tabTypes[1].num = res.data.totalNum;
            this.getNum(1543);
          }
          this.loadShow = false;
        });
      }else{
        this.$http
        .post("service/bpm/bpm/fetchTask/bpm_incident", postData)
        .then((res) => {
          if (res.data.data.length > 0) {
            for (var i = 0; i < res.data.data.length; i++) {
              delete res.data.data[i].handlingPersonnelUser;
              delete res.data.data[i].sendBackUser;
              delete res.data.data[i].colourInfo;
              if(res.data.data[i].acceptUser){
                res.data.data[i].acceptUser = {
                  id: res.data.data[i].acceptUser.id,
                  name: res.data.data[i].acceptUser.name,
                };
              }
              res.data.data[i].createTime = formatDate(
                new Date(res.data.data[i].createTime),
                "yyyy-MM-dd hh:mm"
              );
            }
            if (this.idx) {
              this.items = this.items.concat(res.data.data);
            } else {
              this.items = res.data.data;
            }

          } else {
            this.$refs.scroll.forceUpdate();
          }
          if(this.searchState == 1543){
            this.tabTypes[0].num = res.data.resultCount;
            this.getNum(1544);
          }else if(this.searchState == 1544){
            this.tabTypes[1].num = res.data.resultCount;
            this.getNum(1543);
          }
          this.loadShow = false;
        });
      }
    },
    onPullingDown() {
      this.idx = 0;
      this.sum = 10;
      this.getData();
    },
    onPullingUp() {
      this.idx = this.idx + 1;
      this.getData();
    },
    // 获取事件状态
    getStateList(){
      this.$http
        .post("service/common/common/getDictionary", {"type":"list","key":"incident_status"})
        .then((res) => {
          this.searchsState = [{text:'全部',value:0},...res.data.map(v=>({text:v.name,value:v.id}))]
        });
    }
  },
  created() {
    var that = this;
    let menu = JSON.parse(localStorage.getItem("menu"));
    if (menu) {
      this.isAssign = menu.some(v => v.link == "shijianliebiao_assign");
      this.isAll = menu.some(v => v.link == "shijianliebiao_all");
      if(this.isAll){
        this.searchsType.unshift({
          text: "全部事件",
          value: "all"
        })
      }
    }
    that.loginUser.group.forEach(element => {
      that.candidateGroups += element.id + ",";
    });
    that.candidateGroups = that.candidateGroups.substring(
      0,
      that.candidateGroups.length - 1
    );
    this.getParamsState();
    this.loadShow = true;
    this.getData();
    this.getStateList();

    localStorage.removeItem("modelData");
    localStorage.removeItem("referenceInfo");
    localStorage.removeItem("order");
    localStorage.removeItem("model");
  }
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.mask{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  background: rgba(0,0,0,.5);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btns{
  display: flex;
  justify-content: space-between
  .sub-btn {
    margin:0 2px;
    flex:1;
    background: #ececec;
    .cube-btn {
      background-color: #005395 !important;
      border-radius: 8px
    }
  }
}
.scroll-list-wrap {
  height: calc(100vh - 2.72rem);
  border-radius: 5px;
  transform: rotate(0deg); // fix 子元素超出边框圆角部分不隐藏的问题
  overflow: hidden;
  padding-top: 1.76rem;
}

.foods-wrapper {
  .food-item {
    display: flex;

    /* padding: 18px */
    /* border-bottom: 1px solid rgba(7, 17, 27, 0.1) */
    /* border-top: 1px solid rgba(7, 17, 27, 0.1)!important */
    &:last-child {
      border-none();
      margin-bottom: 0;
    }

    .icon {
      flex: 0 0 57px;
      margin-right: 10px;
    }

    .food-content {
      flex: 1;

      .name {
        margin: 2px 0 8px 0;
        height: 14px;
        line-height: 14px;
        font-size: 14px;
        color: rgb(7, 17, 27);
      }

      .description, .extra {
        line-height: 10px;
        font-size: 10px;
        color: rgb(147, 153, 159);
      }

      .description {
        line-height: 12px;
        margin-bottom: 8px;
      }

      .extra {
        .count {
          margin-right: 12px;
        }
      }

      .price {
        font-weight: 700;
        line-height: 24px;

        .now {
          margin-right: 8px;
          font-size: 14px;
          color: rgb(240, 20, 20);
        }

        .old {
          text-decoration: line-through;
          font-size: 10px;
          color: rgb(147, 153, 159);
        }
      }

      .cartcontrol-wrapper {
        position: absolute;
        right: 0;
        bottom: 12px;

        .scroll-wrapper {
          .cube-pulldown-wrapper {
            .before-trigger {
              font-size: 30px;
              line-height: 30px;
              align-self: flex-end;

              span {
                display: inline-block;
                transition: all 0.3s;
                color: #666;

                &.rotate {
                  transform: rotate(180deg);
                }
              }
            }

            .after-trigger {
              .refresh-text {
                color: grey;
              }
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="less" scoped>
.cont {
  margin-top: 1.86rem;
}
.scroll-list-wrap {
  padding-top: 1.76rem;
}
.header {
  width: 100%;
  height: 0.88rem;
  line-height: 0.88rem;
  text-align: center;
  color: #fff;
  font-size: 0.37rem;
  background: linear-gradient(#2e2f32, #414246);
  position: fixed;
  top: 0;
  z-index: 6;
}
.stateSearchWrap{
  width: 100%;
  position: fixed;
  top: 0.88rem;
  z-index: 6;
  display: flex;
  .filter{
    color: #005395;
    position: absolute;
    width: 1rem;
    height: 0.88rem;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    right: 0;
    &.active{
      color: #fff;
    }
  }
  .stateSearch {
    flex: 1;
    text-align: center;
    height: 0.88rem;
    line-height: 0.88rem;
    padding: 0 0.24rem;
    font-size: 0.36rem;
    color: #333333;
    border-bottom: 0.08rem solid #e5e5e5;
    border-right: 0.08rem solid #e5e5e5;
    &.active{
      background-color: #005395 ;
      color: #fff;
    }
    &:last-of-type{
      border-right: none;
    }
  }
}
.bgColor {
  background-color: white;
}
.food-item {
  border-top: 0.16rem rgb(238, 238, 238) solid;
}
.food-content {
  border-top: 0.01rem rgb(223, 222, 222) solid;
  border-bottom: 0.01rem rgb(223, 222, 222) solid;
}
// .cube-select {
//   height: 0.88rem;
//   line-height: 0.88rem;
//   padding: 0 0.24rem;
//   font-size: 0.36rem;
//   color: #333333;
//   border-bottom: 0.08rem solid #e5e5e5;
// }
.title {
  display: flex;
  justify-content: space-between;
  height: 0.7rem;
  line-height: 0.7rem;
  border-top: 0.01rem rgb(223, 222, 222) solid;
  padding: 0 0.24rem;
  border-bottom: 0.01rem rgb(223, 222, 222) solid;
}
.title i {
  font-size: 0.32rem;
  color: #005395;
}
.title div:nth-child(1) {
  font-size: 0.32rem;
}
.title div:nth-child(1) span {
  display: inline-block;
  margin-left: 0.08rem;
}
.title div:nth-child(2) {
  padding: 0.05rem 0.3rem;
  /* border: 0.01rem rgb(0,0,255) solid; */
  border-radius: 16px;
  /* color: rgb(0,0,255); */
  height: 0.25rem;
  line-height: 0.25rem;
  margin-top: 0.15rem;
  font-size: 0.24rem;
}
.weishouli {
  color: #991f00;
  border: 0.01rem #991f00 solid;
  background-color: #f4e8e5;
}
.bushouli {
  color: #666666;
  background-color: #eeeeee;
  border: 0.01rem #666666 solid;
}
.chulizhong {
  color: #003057;
  background-color: #e5eaee;
  border: 0.01rem #003057 solid;
}
.daipingjia {
  color: #825b00;
  background-color: #f2eee5;
  border: 0.01rem #825b00 solid;
}
.yijiejue {
  color: #40a19c;
  background-color: #ebf5f5;
  border: 0.01rem #40a19c solid;
}
.yichehui {
  color: #48a843;
  background-color: #ecf6ec;
  border: 0.01rem #48a843 solid;
}
// .conent {
//   font-size: 0.28rem;
//   line-height: 0.39rem;
//   overflow: hidden;
//   display: -webkit-box;
//   -webkit-line-clamp: 2;
//   -webkit-box-orient: vertical;
//   word-break: break-all;
//   padding: 0 0.64rem;
//   margin: 0.24rem 0;
// }
.timeBox {
  display: flex;
  justify-content: space-between;
  font-size: 0.24rem;
  color: #999999;
  border-top: 0.01rem rgb(223, 222, 222) solid;
  height: 0.7rem;
  line-height: 0.7rem;
  padding: 0 0.24rem 0 0.64rem;
}
.wushuju {
  margin-top: 2.4rem;
  text-align: center;
  color: #999;
}
.wushuju img {
  width: 5.12rem;
  height: 2.84rem;
}
.conentBox {
  width: 100%;
  height: 100%;
  .conent {
    font-size: 0.32rem;
    font-weight: 400;
    line-height: 0.45rem;
    border-bottom: 0.16rem solid #e5e5e5;
    .head {
      border-bottom: 0.01rem solid #e6e6e6;
      p {
        padding: 0.24rem 0.48rem;
        i {
          color: #00559d;
        }
        .btn {
          float: right;
        }
      }
    }
    .center {
      color: #333333;
      border-bottom: 0.01rem solid #e6e6e6;
      padding: 0.24rem 0.48rem;
      p {
        &.desc {
          overflow: hidden;
          max-height: 0.88rem;
        }
        .grayFont {
          overflow-x: scroll;
          color: #666;
        }
      }
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      overflow: hidden;
      height: 0.86rem;
      border-bottom: 0.01rem solid #e6e6e6;
      font-size: 0.24rem;
      color: #999;
      padding: 0 0.24rem 0 0.48rem;
    }
  }
}
</style>