storevisit-ui-mobile/src/views/deviceWithin/index.vue

<template>
  <div class="bgcolor deviceWithin">
    <div class="navBarTOP">
      <!--        顶部条-->
      <van-nav-bar class="navBar" title="计划内">
        <template #right>
          <span @click="searchFn">筛选<van-icon name="arrow-down" /></span>
        </template>
      </van-nav-bar>
      <div class="searchDiv">
        <van-search
          v-model="storeName"
          left-icon="search"
          show-action
          placeholder="搜索名称/编号/地址">
          <template #action>
            <div @click="onSearch">搜索</div>
          </template>
        </van-search>
      </div>
      <!-- 隐藏高销额门店入口 -->
      <!-- <div style="background-color: #dfebf4; padding: 10px" v-if="mapShows">
        <div
          style="
            font-size: 16px;
            text-align: center;
            margin: 0 auto;
            width: 150px;
            text-decoration: underline;
            font-weight: bold;
            color: #222;
          "
          @click="goFn(1)">
          <img
            src="./../../assets/Icon/clcik.png"
            style="width: 22px; float: left; display: inline-block" />高销额门店推荐
        </div>
        <van-button
          round
          type="info"
          size="small"
          style="position: absolute; top: 108px; right: 10px; height: 28px"
          @click="goFn(1)"
          >去查看<van-icon name="arrow"
        /></van-button>
      </div> -->
      <div class="monthNow" v-show="calendarIsshow == false">
        <span class="month" @click="show = true">{{ timeData }}</span>
        <van-icon class="CalendarIcon" :name="timeico" @click="show = true" />
      </div>
    </div>
    <!--        主体内容-->
    <div class="container content" style="margin-top: 145px" @touchmove="handleTouch">
      <div class="cellcontent" v-for="(item, index) in list" :key="index">
        <van-cell>
          <div class="card">
            <div class="title">
              <template v-if="item.storeLabels">
                <!-- 金牌店ABC -->
                <img
                  class="JPABC"
                  :src="require('@/assets/Icon/storeA.png')"
                  v-if="item.storeLabels.storeA" />
                <img
                  class="JPABC"
                  :src="require('@/assets/Icon/storeB.png')"
                  v-if="item.storeLabels.storeB" />
                <img
                  class="JPABC"
                  :src="require('@/assets/Icon/storeC.png')"
                  v-if="item.storeLabels.storeC" />
                <img
                  class="JPABC"
                  :src="require('@/assets/Icon/storeD.png')"
                  v-if="item.storeLabels.storeD" />
                <img
                  class="JPABC"
                  :src="require('@/assets/Icon/storeE.png')"
                  v-if="item.storeLabels.storeE" />
              </template>
              <span @click="goOtherSystem(item)" :style="setStroeNameStyle(item)">
                <span>{{ item.storeName }}</span>
                (<span>{{ item.storeCode }}</span
                >)
              </span>
              <span class="btn" :data-clipboard-text="item.storeCode">
                <van-icon
                  :name="paste"
                  color="#ee0a24"
                  size="20"
                  style="top: 6px; margin-left: 4px" />
              </span>
              <!-- "approvalStatus": 1:已结案;0:未结案， -->
              <!-- "processApprovalStatus": 审批状态（0=未提交，1=已提交待审核，2=审批通过，3=审批拒绝） -->
              <template v-if="item.approvalStatus == 0">
                <span class="statusIcon submit" v-if="item.processApprovalStatus == 1">已提交</span>
                <span class="statusIcon noSubmit" v-if="item.processApprovalStatus == 0"
                  >未提交</span
                >
              </template>
            </div>
            <div class="info">
              类型：{{ item.storeCategory }} &nbsp;
              <el-popover popper-class="zpover zpover6" placement="bottom-start" trigger="click">
                <div>
                  <p>
                    本店经营品项指导:
                    <a @click="linkimg(item)" style="text-decoration: underline">点击查看</a>
                  </p>
                </div>
                <van-icon name="question-o" size="18" slot="reference" />
              </el-popover>
            </div>
            <div class="info" style="position: relative">
              联系人：{{ item.contactName }}
              <div style="position: absolute; bottom: 0; right: 14px">
                <el-popover
                  popper-class="zpover"
                  placement="bottom"
                  width="120"
                  trigger="click"
                  content="该客户为凤凰客户">
                  <div
                    v-if="item.storeLabels.fhCustomer"
                    class="visitStoreIco"
                    style="background-color: #fff"
                    slot="reference">
                    <van-icon :name="require('@/assets/Icon/fenghuangjihua.png')" size="26" />
                  </div>
                </el-popover>
                <el-popover popper-class="zpover zpover6" placement="bottom-start" trigger="click">
                  <div>
                    <p>
                      本店{{ timeData1 }}下单SKU数：<a
                        @click="linkList(item)"
                        style="text-decoration: underline"
                        >点击查看详情</a
                      >
                    </p>
                  </div>
                  <div
                    class="visitStoreIco"
                    v-if="item.storeLabels.zysslNums !== false"
                    style="background-color: #fff; position: relative"
                    slot="reference">
                    <p
                      style="
                        width: 100%;
                        position: absolute;
                        z-index: 1;
                        top: 0.2px;
                        width: 22px;
                        margin: 0;
                        margin-left: 3.6px;
                        text-align: center;
                        font-size: 12px;
                      ">
                      {{ item.storeLabels.zysslNums }}
                    </p>
                    <van-icon :name="ord" size="26" />
                  </div>
                </el-popover>
                <el-popover popper-class="zpover" placement="bottom" width="200" trigger="click">
                  <div v-if="item.storeLabels">
                    <p>已参加:</p>
                    <p v-for="tt in (item.storeLabels.targetOne + '').split(';')">
                      {{ tt }}
                    </p>
                  </div>
                  <div
                    class="visitStoreIco"
                    v-if="item.storeLabels.targetOne"
                    style="background-color: #fff"
                    slot="reference">
                    <van-icon :name="targetOne" size="26" />
                  </div>
                </el-popover>
                <el-popover popper-class="zpover" placement="bottom" width="120" trigger="click"
                          content="调色机7天未调色">
                          <div v-if="item.storeLabels.stopColorMixerSeven" class="visitStoreIco" style="background-color: #fff"
                            slot="reference">
                            <van-icon :name="Network" size="26" />
                          </div>
                        </el-popover>
                        <el-popover popper-class="zpover" placement="bottom" width="120" trigger="click"
                          content="调色机当月未调色">
                          <div v-if="item.storeLabels.stopColorMixerMonth" class="visitStoreIco"
                            style="background-color: #fff" slot="reference">
                            <van-icon :name="WiFi" size="26" />
                          </div>
                        </el-popover>
                <el-popover
                  popper-class="zpover"
                  placement="bottom"
                  width="200"
                  trigger="click"
                  content="同城店近60天未下单">
                  <div
                    v-if="item.storeLabels.fxNoOrder"
                    class="visitStoreIco"
                    style="background-color: #fff"
                    slot="reference">
                    <van-icon :name="order60" size="26" />
                  </div>
                </el-popover>
                <el-popover
                  popper-class="zpover"
                  placement="bottom"
                  width="200"
                  trigger="click"
                  content="金牌店近30天未下单">
                  <div
                    v-if="item.storeLabels.noOrder"
                    class="visitStoreIco"
                    style="background-color: #fff"
                    slot="reference">
                    <van-icon :name="order" size="26" />
                  </div>
                </el-popover>
                <el-popover
                  popper-class="zpover"
                  placement="bottom"
                  width="200"
                  trigger="click"
                  content="本店本月进过专业时时丽">
                  <div
                    v-if="item.storeLabels.zyssl"
                    class="visitStoreIco"
                    style="background-color: #ed5c68"
                    slot="reference">
                    专
                  </div>
                </el-popover>
                <el-popover
                  popper-class="zpover zpover1"
                  placement="bottom"
                  width="200"
                  trigger="click"
                  content="本店本月进过超好贴">
                  <div
                    v-if="item.storeLabels.chtczj"
                    class="visitStoreIco"
                    style="background-color: #0057ba"
                    slot="reference">
                    超
                  </div>
                </el-popover>
                <el-popover
                  placement="bottom"
                  popper-class="zpover zpover1 zpover1sb"
                  trigger="click"
                  :disabled="!item.userVisitTimesMap"
                  :content="'本店本月已拜访过' + item.storeLabels.visitTimes + '次'">
                  <div
                    v-if="item.storeLabels.visitTimes && item.storeLabels.visitTimes > 0"
                    class="visitStoreIco"
                    slot="reference"
                    style="background-color: #fff; position: relative">
                    <p
                      style="
                        width: 100%;
                        position: absolute;
                        z-index: 10;
                        top: -2px;
                        margin: 0;
                        text-align: center;
                        font-size: 12px;
                      ">
                      {{ item.storeLabels.visitTimes }}
                    </p>
                    <!-- A级金牌店拜访次数少于2 -->
                    <van-icon
                      :name="require('@/assets/ordernumRed.png')"
                      size="26"
                      v-if="
                        item.storeLabels.storeA &&
                        item.needVisitNum &&
                        item.storeLabels.visitTimes < item.needVisitNum
                      " />
                    <van-icon :name="require('@/assets/ordernum.png')" size="26" v-else />
                  </div>
                  <p style="text-align: center; background: #fff; color: #000; padding: 5px 0">
                    本店本月已拜访过{{ item.storeLabels.visitTimes }}次
                  </p>
                  <p
                    v-if="item.storeLabels.storeA && item.needVisitNum"
                    style="text-align: center; background: #fff; color: red; padding: 5px 0">
                    A级金牌店拜访标准：1月{{ item.needVisitNum }}次
                  </p>
                  <el-table :data="item.userVisitTimesMap" border max-height="180px">
                    <el-table-column label="业务员" prop="userName" />
                    <el-table-column label="拜访次数" prop="visitTimes" width="110px" />
                  </el-table>
                </el-popover>
              </div>
            </div>
            <div class="info" v-if="item.telephone" @click="buryingPointFn(item)">
              联系电话：<a
                style="color: #0057ba; font-weight: bold; text-decoration: underline"
                :href="'tel:' + item.telephone"
                >{{ item.telephone }}<van-icon name="phone"
              /></a>
            </div>
            <div class="info" v-if="item.addressLine">
              地址：{{ item.addressLine
              }}<img
                v-if="item.storeLonExist"
                style="width: 36px"
                :src="sbpmdh"
                @click="linkapp(item)" />
            </div>
            <!-- 潜在店不显示经销商 -->
            <template v-if="item.sfaStoreType.type != 'qzd'">
              <!-- 分销店 -->
              <template
                v-if="
                  item.sfaStoreType &&
                  item.sfaStoreType.type == 'fxd' &&
                  item.sfaStoreChainsContactList
                ">
                <div class="info" v-if="typeShow">
                  经销商：
                  <div class="TCFXListItem" v-for="(item, index) in item.sfaStoreChainsContactList">
                    <el-popover
                      popper-class="zpover zpoverStoreztype"
                      placement="bottom-start"
                      trigger="click">
                      <div>
                        <div>{{ item.chainCode }}</div>
                        <div>{{ item.chainName }}</div>
                      </div>
                      <div slot="reference" :key="index">
                        {{ item.categoryDescribe }}
                      </div>
                    </el-popover>
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="info" v-if="typeShow">经销商：{{ item.chainName }}</div>
              </template>
            </template>
            <!-- storeLonExist 门店是否存在经纬度 字段false=不显示导航和距离，true=显示 -->
            <div class="info" v-if="item.storeLonExist">距离：{{ Micrometer(item.distance) }}m</div>
            <div class="info" v-if="item.cntOrderAmtYear">
              门店销额(全年累计)：{{ Micrometer(item.cntOrderAmtYear) }}元
            </div>
          </div>
          <div
            class="statstext"
            v-if="item.stateString == '未拜访'"
            style="background-color: #ed5c68">
            未拜访
          </div>
          <div
            class="statstext"
            v-if="item.stateString == '拜访中'"
            style="background-color: white">
            <van-icon :name="times" color="#ee0a24" size="32" />
          </div>
          <div class="statstext" v-if="item.stateString == '已拜访'">已拜访</div>
          <div class="btnbox">
            <van-row>
              <van-col
                span="4"
                v-if="item.stateString != '已拜访' && item.visitAble && customerVisits"
                @click="storeVisit(item)">
                <img :src="call" style="margin: 0 auto; height: 15px; display: block" />
                <p style="text-align: center; margin: 0; font-size: 11px">进入拜访</p>
              </van-col>
              <van-col
                span="4"
                v-if="item.storeCategory == '公装经销商'"
                @click="projectOutVisit(item)">
                <img :src="xmgj" style="margin: 0 auto; height: 15px; display: block" />
                <p style="text-align: center; margin: 0; font-size: 11px">项目跟进</p>
              </van-col>
              <van-col
                span="4"
                v-if="
                  item.stateString != '已拜访' &&
                  item.visitAble &&
                  item.storeCategory != '公装经销商' &&
                  customerVisits
                "
                @click="abnormalVisit(item)">
                <img :src="yichang" style="margin: 0 auto; height: 15px; display: block" />
                <p style="text-align: center; margin: 0; margin-top: 1px; font-size: 11px">
                  异常拜访
                </p>
              </van-col>
              <van-col span="4" v-if="item.storeLabels.zysslNums !== false" @click="linkList(item)">
                <img
                  :src="require('@/assets/recommendicon.png')"
                  style="margin: 0 auto; height: 15px; display: block" />
                <p style="text-align: center; margin: 0; margin-top: 1px; font-size: 11px">
                  推荐下单
                </p>
              </van-col>
              <van-col span="4" v-else-if="item.showOrderButton" @click="orderFn(item)">
                <img :src="xiadan" style="margin: 0 auto; height: 15px; display: block" />
                <p style="text-align: center; margin: 0; margin-top: 1px; font-size: 11px">
                  去下单
                </p>
              </van-col>
              <van-col span="4" v-if="item.stateString == '已拜访'" @click="Visit(item)">
                <img :src="bfxx" style="margin: 0 auto; height: 15px; display: block" />
                <p style="text-align: center; margin: 0; margin-top: 1px; font-size: 11px">
                  拜访信息
                </p>
              </van-col>
              <van-col span="4" @click="visitFn(item)">
                <img :src="kehuxinxi" style="margin: 0 auto; height: 15px; display: block" />
                <p style="text-align: center; margin: 0; margin-top: 1px; font-size: 11px">
                  客户信息
                </p>
              </van-col>
            </van-row>
          </div>
        </van-cell>
        <div class="lineGrey"></div>
      </div>
      <p style="text-align: center; color: #888a8e" v-if="list.length > 0">--已经到底了--</p>
      <br />
      <van-empty description="暂无数据" v-if="list.length == 0" />
    </div>
    <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="计划日期"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="dateeconfirm"
        @cancel="show = false" />
    </van-popup>
    <!-- 筛选模块 -->
    <filtrate v-show="showFilter" :showFilter="showFilter" @closePopup="closePopup"></filtrate>
    <tab-bar tabBarActive="deviceWithin"></tab-bar>
  </div>
</template>

<script>
import Network from '@/assets/Network.png';
import WiFi from '@/assets/WiFi.png';
import tabBar from '@/components/tabBar';
import times from '@/assets/Icon/times.png';
import order60 from '@/assets/order60.png';
import targetOne from '@/assets/targetOne.png';
import visitTimes from '@/assets/visitTimes.png';
import ord from '@/assets/ord.png';
import timeico from '@/assets/Icon/datatims.png';
import sbpmdh from '@/assets/sbpmdh.png';
import {
  getUserInPlanList,
  checkVisit,
  addVisitsPosition,
  mobileReposition,
  buryingPoint,
  ProductItemImge,
} from '@/api/index';
import axios from 'axios';
import paste from '@/assets/paste.png';
import order from '@/assets/order.png';
import call from '@/assets/call.png';
import jiarujihua from '@/assets/jiarujihua.png';
import kehuxinxi from '@/assets/kehuxinxi-2.png';
import xiadan from '@/assets/xiadan.png';
import yichang from '@/assets/yichang.png';
import bfxx from '@/assets/bfxx.png';
import xmgj from '@/assets/xmgj.png';
import { getOrderUrlByStoreId } from '@/api/inventory';
import { checkStoreAddressByStoreCode } from '@/api/visitstore';
import { getPosition, getTicketFun } from '@/utils/TXApiFun';
import filtrate from '@/components/filtrate';
export default {
  name: 'deviceWithin',
  components: { tabBar, filtrate },
  data() {
    return {
    Network: Network,
      WiFi: WiFi,
      xmgj: xmgj,
      bfxx: bfxx,
      yichang: yichang,
      xiadan: xiadan,
      kehuxinxi: kehuxinxi,
      jiarujihua: jiarujihua,
      call: call,
      times: times,
      timeico: timeico,
      order60: order60,
      sbpmdh: sbpmdh,
      ord: ord,
      timeData1: '',
      targetOne: targetOne,
      paste: paste,
      visitTimess: visitTimes,
      show: false,
      cont: 0,
      timer: null,
      flag: true,
      order: order,
      defaultDate: new Date(),
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      showPopoverVNUM: [],
      showPopoverC: [],
      showPopoverZ: [],
      currentDate: new Date(),
      searchValue: '',
      calendarIsshow: false,
      tabVal: 'insidePlan',
      list: [],
      loading: false,
      finished: false,
      mapShows: false,
      typeShow: false,
      storeName: '',
      timeData: '',
      genDate: '',
      listActive: null,
      query: '',
      lat: '',
      lon: '',
      storeType: '',
      endShow: false,
      visitEndId: '',
      customerVisits: true,
      // 筛选模块
      showFilter: false,
      filterParams: {},
    };
  },
  watch: {
    $route(to, from) {
      if (from.path == '/deviceWithin/index' && to.path == '/storeVisitpage') {
        localStorage.setItem('startTime', new Date());
      }
    },
  },
  activated() {
    this.query = this.$route.query;
    this.timeData = this.parseTime(new Date(), '{yy}-{mm}-{dd}');
    this.storeName = localStorage.getItem('deviveStoreName');
    this.getMonth();
    // 授权
    getTicketFun().then(() => {
      this.getUserInPlanList();
    });
  },
  mounted() {
    // 解决iOS 上拉边界下拉出现白色空白
    let node = document.getElementsByClassName('deviceWithin')[0];
    node.addEventListener(
      'touchmove',
      (e) => {
        if (e._isScroller) return;
        e.preventDefault();
      },
      {
        passive: false,
      }
    );
  },
  methods: {
    closePopup(flag, filterParams) {
      this.showFilter = false;
      if (flag) {
        this.filterParams = filterParams;
        this.onSearch();
      }
    },
    searchFn() {
      this.showFilter = true;
    },
    handleTouch(e) {
      e._isScroller = true;
    },
    linkapp(val) {
      var poind = this.gcj02BD(val.lat, val.lon);
      let url = window.location.href;
      let that = this;
      let wx = this.wx;
      let qiyeData;
      const instance = axios.create();
      instance.defaults.headers.common['userId'] = localStorage.getItem('loginName');
      instance
        .get(process.env.VUE_APP_BASE_API + 'mobile/wx/ticket', {
          params: {
            url: url,
            agent: 1,
          },
        })
        .then((response) => {
          if (response.status == 200) {
            qiyeData = response.data.data;
            wx.agentConfig({
              corpid: qiyeData.appId, // 必填，企业微信的corpid，必须与当前登录的企业一致
              agentid: qiyeData.agentId, // 必填，企业微信的应用id （e.g. 1000247）
              timestamp: qiyeData.timestamp, // 必填，生成签名的时间戳
              nonceStr: qiyeData.nonceStr, // 必填，生成签名的随机串
              signature: qiyeData.signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
              jsApiList: ['launchMiniprogram'], //必填，传入需要使用的接口名称
              success: function (res) {
                wx.invoke(
                  'launchMiniprogram',
                  {
                    appid: 'wx238bbb5f6d958414',
                    path:
                      'pages/relayStation/relayStation?latitude=' +
                      poind.lat +
                      '&longitude=' +
                      poind.lon +
                      '&name=' +
                      val.addressLine,
                  },
                  function (res) {
                    if (res.err_msg == 'launchMiniprogram:ok') {
                    } else {
                    }
                  }
                );
              },
              fail: function (res) {
                if (res.errMsg.indexOf('function not exist') > -1) {
                  alert('版本过低请升级');
                }
              },
            });
          }
        });
    },
    orderFn(val) {
      buryingPoint({
        systemModel: '计划内',
        buryingPointType: 1,
        buryingPointValue: val.storeName + '(' + val.storeCode + ')',
        buryingPointName: '去下单',
        buryingPointPosition: '计划内',
      });
      getOrderUrlByStoreId({
        storeId: val.storeId,
        from: 'inPlan',
      }).then((res) => {
        if (res.code == 200 && res.data) {
          window.location.href = res.data;
        } else {
          this.Toast({
            message: res.msg,
            duration: 5000,
          });
        }
      });
    },
    linkList(val) {
      this.$router.push({
        path: '/pItem',
        query: {
          id: val.storeId,
          detilId: 'a',
          from: 'inPlan',
          storeCode: val.storeCode,
          showOrderButton: val.showOrderButton,
        },
      });
    },
    linkimg(val) {
      ProductItemImge({ storeId: val.storeId }).then((response) => {
        if (response.code == 200) {
          if (response.data != undefined) {
            window.open(response.data);
          } else {
            this.$toast(response.msg);
          }
        } else {
          this.$dialog.alert({
            title: '系统提示',
            message: res.msg,
          });
        }
      });
    },
    getMonth() {
      // 获取当前日期
      var currentDate = new Date();
      // 获取当前月份
      var currentMonth = currentDate.getMonth();

      // 获取当前年份
      // var currentYear = currentDate.getFullYear();

      var previousMonthDate1 = new Date();
      if (currentDate.getDate() == 1) {
        previousMonthDate1.setMonth(currentMonth - 1);
      } else {
      }
      var previousMonth1 = previousMonthDate1.getMonth();
      var previousYear1 = previousMonthDate1.getFullYear();

      // 计算前三个月的年份和月份
      var previousMonthDate = new Date();
      if (currentDate.getDate() == 1) {
        previousMonthDate.setMonth(currentMonth - 3);
      } else {
        previousMonthDate.setMonth(currentMonth - 2);
      }
      1;
      var previousMonth = previousMonthDate.getMonth();
      var previousYear = previousMonthDate.getFullYear();

      //前三个月
      if (previousYear1 == previousYear) {
        var formattedPreviousMonth1 = previousYear1 + '-' + (previousMonth1 + 1);
        // 格式化年份和月份
        var formattedPreviousMonth = previousYear + '-' + (previousMonth + 1);
        this.timeData1 =
          formattedPreviousMonth.split('-')[1] + '-' + formattedPreviousMonth1.split('-')[1] + '月';
      } else {
        var formattedPreviousMonth1 = previousYear1 + '年' + (previousMonth1 + 1) + '月';
        // .toString().padStart(2, '0');
        // 格式化年份和月份
        var formattedPreviousMonth = previousYear + '年' + (previousMonth + 1) + '月';
        this.timeData1 = formattedPreviousMonth + '-' + formattedPreviousMonth1;
      }
    },
    Visit(val) {
      this.$router.push({
        path: '/historicalDetails',
        query: {
          visitId: val.visitId,
          storeId: val.storeId,
          storeCode: val.storeCode,
        },
      });
    },
    dateeconfirm() {
      this.show = false;
      this.genDate = this.parseTime(this.currentDate, '{yy}-{mm}-{dd}');
      this.timeData = this.parseTime(this.currentDate, '{yy}-{mm}-{dd}');
      this.getUserInPlanList();
    },
    dataFn() {
      this.genDate = this.parseTime(new Date(), '{yy}-{mm}-{dd}');
      this.timeData = this.parseTime(new Date(), '{yy}-{mm}-{dd}');
      this.getUserInPlanList();
    },
    buryingPointFn(val) {
      buryingPoint({
        systemModel: '计划内',
        buryingPointType: 1,
        buryingPointValue: val.telephone,
        buryingPointName: '点击电话',
        buryingPointPosition: val.storeName + '(' + val.storeCode + ')',
      });
    },
    getUserInPlanList() {
      localStorage.setItem('outvstoreName', '');
      localStorage.setItem('outvchainName', '');
      localStorage.removeItem('outvstoreLabelTypes');
      localStorage.removeItem('outvstoreCategoryList');
      localStorage.setItem('outvchainCode', '');
      localStorage.setItem('outvstoreName', '');
      localStorage.setItem('outvsortType', '');
      localStorage.setItem('outsortParam', '');
      localStorage.setItem('lat', '');
      localStorage.setItem('lon', '');
      this.list = [];
      var postType = localStorage.getItem('postType');
      this.customerVisits = localStorage.getItem('customerVisits');
      if (localStorage.getItem('postType') == 'JZ' || localStorage.getItem('postType') == 'GZ') {
        this.mapShows = false;
      } else {
        this.mapShows = true;
      }
      if (postType == 'GZ') {
        this.typeShow = false;
      } else {
        this.typeShow = true;
      }
      this.storeType = localStorage.getItem('storeType');
      this.endShow = false;
      this.toastLoading(0, '加载中...', true);
      localStorage.removeItem('visitId');
      getPosition(true, true)
        .then((res) => {
          let { TXisBD } = res;
          this.getUserInPlanListFun(TXisBD);
        })
        .catch((error) => {
          this.getUserInPlanListFun();
          // this.$dialog.alert({
          //   message: error,
          // });
        });
    },
    getUserInPlanListFun(TXisBD) {
      getUserInPlanList({
        storeName: this.storeName.trim(),
        genDate: this.genDate,
        lat: TXisBD ? TXisBD.lat : '',
        lon: TXisBD ? TXisBD.lon : '',
        ...this.filterParams,
      }).then((res) => {
        this.toastLoading().clear();
        if (res.code == 200) {
          this.list = res.data;
          this.list.forEach((item) => {
            if (item.stateString.indexOf('拜访中') != -1) {
              this.endShow = true;
              this.visitEndId = item.visitId;
              return;
            }
          });
        } else {
          this.$toast.fail(res.msg);
        }
      });
    },
    storeVisit(val) {
      if (val.visitSource && val.visitSource == 2) {
        this.$toast('请先取消异常拜访后再进入正常拜访！');
        return;
      }
      var that = this;
      localStorage.removeItem('visitId');
      checkVisit({ storeId: val.storeId }).then((res) => {
        // buryingPoint({
        //   systemModel: '计划内',
        //   buryingPointType: 1,
        //   buryingPointValue: val.storeName + '(' + val.storeCode + ')',
        //   buryingPointName: '进店拜访',
        //   buryingPointPosition: '计划内',
        // });
        if (res.code == 200 || val.stateString.indexOf('拜访中') != -1) {
          if (localStorage.getItem('loginType') == 'cs') {
            var lat = '';
            var lon = '';
            if (val.lat == '' || val.lat == null) {
              lat = '31.2517820000';
              lon = '120.5593090000';
            } else {
              lat = val.lat;
              lon = val.lon;
            }
            this.$router.push({
              path: '/storeVisitpage',
              query: {
                storeId: val.storeId,
                rdId: val.rdId,
                lat: lat,
                lon: lon,
                visitId: val.visitId,
                pageType: 'out',
                addressLine: val.addressLine,
                storeCategory: val.storeCategory,
                storeName: val.storeName,
                hisTime: val.hisTime,
                contactName: val.contactName,
                storeCode: val.storeCode,
                tabVal: this.tabVal,
                visitModel: '1',
                latNew: '31.2517820000',
                lonNew: '120.5593090000',
                PointSum: 0,
                marklat: lat,
                marklon: lon,
                from: 'inPlan',
              },
            });
            localStorage.setItem('startTime', new Date());
            localStorage.setItem('ORGName', val.deptName);
            localStorage.setItem('chainNameR', val.storeName);
          } else {
            if (that.flag) {
              that.flag = false;
              that.timer = null;
              that.timer = setTimeout(() => {
                that.flag = true;
              }, 2000);
              if (val.stateString.indexOf('拜访中') != -1) {
                that.$router.push({
                  path: '/storeVisitpage',
                  query: {
                    storeId: val.storeId,
                    rdId: val.rdId,
                    lat: val.lat,
                    lon: val.lon,
                    visitId: val.visitId,
                    addressLine: val.addressLine,
                    storeCategory: val.storeCategory,
                    storeName: val.storeName,
                    contactName: val.contactName,
                    genDate: val.hisTime,
                    storeCode: val.storeCode,
                    visitModel: '1',
                    latNew: val.lat,
                    lonNew: val.lon,
                    PointSum: '0',
                    marklat: val.lat,
                    marklon: val.lon,
                    from: 'inPlan',
                  },
                });

                localStorage.setItem('startTime', new Date());
                localStorage.setItem('ORGName', val.deptName);
                localStorage.setItem('chainNameR', val.storeName);
              } else {
                getPosition()
                  .then((res) => {
                    let { TXisBD, resData } = res;
                    this.lat = TXisBD.lat;
                    this.lon = TXisBD.lon;
                    localStorage.setItem('lat', this.lat);
                    localStorage.setItem('lon', this.lon);
                    this.checkStoreAddressByStoreCodeFun(val, TXisBD, resData);
                  })
                  .catch((error) => {
                    this.$dialog.alert({
                      message: error,
                    });
                  });
              }
            }
          }
        } else {
          this.$dialog.alert({
            title: '系统提示',
            message: res.msg,
          });
        }
      });
    },
    checkStoreAddressByStoreCodeFun(val, location, res) {
      checkStoreAddressByStoreCode({
        storeCode: val.storeCode,
        lon: location.lon,
        lat: location.lat,
      }).then((response) => {
        // loading1.clear();
        if (val.lat == '' || val.lat == null) {
          this.lat = location.lat;
          this.lon = location.lon;
        }
        // let PointSum = this.twoPointSum(this.lat, this.lon, location.lat, location.lon).toFixed(2);
        let PointSumval = this.twoPointSum(
          location.lat,
          location.lon,
          location.lat,
          location.lon
        ).toFixed(2);
        // GZ:工装店铺 直接进入拜访
        if (localStorage.getItem('postType') == 'GZ') {
          localStorage.setItem('startTime', new Date());
          localStorage.setItem('ORGName', val.deptName);
          localStorage.setItem('chainNameR', val.storeName);
          this.toSuishenbangOutstoreVisit(res, val, location, PointSumval);
          return;
        }
        // 门店校验 地址不通过
        if (response.code != 200) {
          // updateAddress : ，1：同城AB+金牌,去修改地址;2:非金牌店铺，非同城店铺偏差过大不允许拜访，可以重置定位;0非金牌店铺，非同城店铺 位置信息不存在 可以继续拜访
          if (response.data.updateAddress == 0) {
            // 非金牌店铺，非同城店铺 位置信息不存在 可以继续拜访
            this.$dialog
              .confirm({
                confirmButtonText: '确定拜访',
                cancelButtonText: '取消拜访',
                title: '系统提示',
                message:
                  '该客户没有经纬度，此次拜访会保存定位点作为客户经纬度，下次拜访时判断是否偏差过大。',
                closeOnClickOverlay: true,
              })
              .then(() => {
                this.toSuishenbangOutstoreVisit(res, val, location, PointSumval);
              });
          } else if (response.data.updateAddress == 1) {
            // 同城AB+金牌,去修改地址
            // addressUpdateTimesOver: true=已经达到最大次数，不让修改; false=没有达到可以修改
            if (!response.data.addressUpdateTimesOver) {
              this.$dialog
                .confirm({
                  title: '系统提示',
                  message: response.msg + '请立即修改后再拜访',
                  messageAlign: 'left',
                  confirmButtonText: '立即修改',
                  cancelButtonText: '取消',
                })
                .then(() => {
                  this.$router.push({
                    path: '/storeDetail',
                    query: {
                      id: val.storeId,
                      type: 'address',
                      storeAddressId: val.storeAddressId,
                    },
                  });
                });
            } else {
              this.$dialog.confirm({
                title: '系统提示',
                message: '已经达到最大修改次数',
                messageAlign: 'left',
                confirmButtonText: '确定',
              });
            }
          } else if (response.data.updateAddress == 2) {
            // 1.非金牌店铺，非同城店铺 位置偏差过大 重置经纬度
            this.resetCoord(res, val, location, PointSumval);
            return;
          }
        } else {
          // 门店编码校验门店地址通过 进入拜访
          this.toSuishenbangOutstoreVisit(res, val, location, PointSumval);
        }
      });
    },
    // 重置经纬度
    resetCoord(res, val, location, PointSumval) {
      this.$dialog
        .confirm({
          confirmButtonText: '初始化定位',
          cancelButtonText: '取消拜访',
          title: '系统提示',
          message: '偏差过大，不允许拜访。可修改本店定位.',
          closeOnClickOverlay: true,
        })
        .then(() => {
          mobileReposition({
            storeId: val.storeId,
            lat: location.lat,
            lon: location.lon,
          }).then((response) => {
            if (response.code == 200) {
              this.$dialog
                .alert({
                  title: '系统提示',
                  message: '本信息定位已更新成功!',
                })
                .then(() => {
                  this.toSuishenbangOutstoreVisit(res, val, location, PointSumval);
                });
              localStorage.setItem('startTime', new Date());
              localStorage.setItem('ORGName', val.deptName);
              localStorage.setItem('chainNameR', val.storeName);
            } else {
              this.$toast(response.msg);
            }
          });
        })
        .catch(() => {});
    },
    // 进入拜访 router.push
    toSuishenbangOutstoreVisit(res, val, location, PointSumval) {
      addVisitsPosition({
        storeId: val.storeId,
        visitsId: '',
        lon: res.longitude,
        lat: res.latitude,
        sourceLon: location.lon,
        sourceLat: location.lat,
        positionDesc: '',
        accuracy: res.accuracy,
      }).then(() => {
        this.$router.push({
          path: '/storeVisitpage',
          query: {
            storeId: val.storeId,
            rdId: val.rdId,
            lat: location.lat,
            lon: location.lon,
            visitId: val.visitId,
            addressLine: val.addressLine,
            storeCategory: val.storeCategory,
            storeName: val.storeName,
            contactName: val.contactName,
            genDate: val.hisTime,
            storeCode: val.storeCode,
            visitModel: '1',
            latNew: location.lat,
            lonNew: location.lon,
            PointSum: PointSumval,
            marklat: res.latitude,
            marklon: res.longitude,
            from: 'inPlan',
          },
        });
      });
    },
    projectOutVisit(val) {
      localStorage.setItem('tabVal', this.tabVal);
      localStorage.removeItem('visitId');
      // checkVisit({storeId:val.storeId}).then(res=>{
      //   if(res.code==200||val.stateString.indexOf("拜访中")!=-1){
      if (localStorage.getItem('loginType') == 'cs') {
        var lat = '';
        var lon = '';
        if (val.lat == '' || val.lat == null) {
          lat = '31.2517820000';
          lon = '120.5593090000';
        } else {
          lat = val.lat;
          lon = val.lon;
        }
        this.$router.push({
          path: '/storeGroup',
          query: {
            storeId: val.storeId,
            rdId: val.rdId,
            lat: lat,
            lon: lon,
            visitId: val.visitId,
            pageType: 'out',
            addressLine: val.addressLine,
            storeCategory: val.storeCategory,
            storeName: val.storeName,
            hisTime: val.hisTime,
            contactName: val.contactName,
            storeCode: val.storeCode,
            tabVal: this.tabVal,
            visitModel: '1',
            latNew: '31.2517820000',
            lonNew: '120.5593090000',
            PointSum: 0,
            marklat: lat,
            marklon: lon,
          },
        });
        localStorage.setItem('startTime', new Date());
        localStorage.setItem('ORGName', val.deptName);
        localStorage.setItem('chainNameR', val.storeName);
      } else {
        if (this.flag) {
          this.flag = false;
          this.timer = null;
          let that = this;
          this.timer = setTimeout(() => {
            this.flag = true;
          }, 2000);
          if (val.stateString.indexOf('拜访中') != -1) {
            localStorage.setItem('startTime', new Date());
            localStorage.setItem('ORGName', val.deptName);
            localStorage.setItem('chainNameR', val.storeName);
            that.$router.push({
              path: '/storeGroup',
              query: {
                storeId: val.storeId,
                rdId: val.rdId,
                lat: val.lat,
                lon: val.lon,
                visitId: val.visitId,
                pageType: 'out',
                addressLine: val.addressLine,
                storeCategory: val.storeCategory,
                storeName: val.storeName,
                hisTime: val.hisTime,
                contactName: val.contactName,
                storeCode: val.storeCode,
                tabVal: that.tabVal,
                visitModel: '1',
                latNew: val.lat,
                lonNew: val.lon,
                PointSum: '0',
                marklat: val.lat,
                marklon: val.lon,
              },
            });
          } else {
            let loading1 = this.$toast.loading({
              duration: 0,
              message: '加载中...',
              forbidClick: true,
            });
            let url = window.location.href;
            let wx = this.wx;
            let qiyeData;
            const instance = axios.create();
            instance.defaults.headers.common['userId'] = localStorage.getItem('loginName');
            instance
              .get(process.env.VUE_APP_BASE_API + 'mobile/wx/ticket', {
                params: {
                  url: url,
                },
              })
              .then((response) => {
                if (response.status == 200) {
                  this.cont = 3;
                  var flat = true;
                  var times = setInterval(() => {
                    this.cont--;
                    if (this.cont == '0') {
                      if (flat) {
                        loading1.clear();
                        clearInterval(times);
                        that.$dialog
                          .alert({
                            message: '定位失败，请开启企微定位权限',
                          })
                          .then(() => {});
                      } else {
                        clearInterval(times);
                      }
                    }
                  }, 1000);
                  qiyeData = response.data.data;
                  wx.config({
                    beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: qiyeData.appId, // 必填，企业微信的corpID
                    timestamp: qiyeData.timestamp, // 必填，生成签名的时间戳
                    nonceStr: qiyeData.nonceStr, // 必填，生成签名的随机串
                    signature: qiyeData.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
                    jsApiList: ['ready', 'getLocation'], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
                  });
                  wx.ready(function () {
                    wx.getLocation({
                      type: 'gcj02',
                      success: function (res) {
                        flat = false;
                        loading1.clear();
                        var location = that.CJ02BD(res.latitude, res.longitude);
                        if (val.lat == '' || val.lat == null) {
                          that.lat = location.lat;
                          that.lon = location.lon;
                        }
                        let PointSum = that
                          .twoPointSum(that.lat, that.lon, location.lat, location.lon)
                          .toFixed(2);
                        if (val.lat == '' || val.lat == null) {
                          if (localStorage.getItem('postType') != 'GZ') {
                            that.$dialog
                              .confirm({
                                confirmButtonText: '确定拜访',
                                cancelButtonText: '取消拜访',
                                title: '系统提示',
                                message:
                                  '该信息没有经纬度，此次拜访会保存定位点作为信息经纬度，下次拜访时判断是否偏差过大。',
                                closeOnClickOverlay: true,
                              })
                              .then(() => {
                                that.$router.push({
                                  path: '/storeGroup',
                                  query: {
                                    storeId: val.storeId,
                                    rdId: val.rdId,
                                    lat: that.lat,
                                    lon: that.lon,
                                    visitId: val.visitId,
                                    pageType: 'out',
                                    addressLine: val.addressLine,
                                    storeCategory: val.storeCategory,
                                    storeName: val.storeName,
                                    contactName: val.contactName,
                                    hisTime: val.hisTime,
                                    storeCode: val.storeCode,
                                    tabVal: that.tabVal,
                                    visitModel: '1',
                                    latNew: location.lat,
                                    lonNew: location.lon,
                                    PointSum: PointSum,
                                    marklat: res.latitude,
                                    marklon: res.longitude,
                                  },
                                });
                              });
                          } else {
                            that.$router.push({
                              path: '/storeGroup',
                              query: {
                                storeId: val.storeId,
                                rdId: val.rdId,
                                lat: that.lat,
                                lon: that.lon,
                                visitId: val.visitId,
                                pageType: 'out',
                                addressLine: val.addressLine,
                                storeCategory: val.storeCategory,
                                storeName: val.storeName,
                                contactName: val.contactName,
                                hisTime: val.hisTime,
                                storeCode: val.storeCode,
                                tabVal: that.tabVal,
                                visitModel: '1',
                                latNew: location.lat,
                                lonNew: location.lon,
                                PointSum: PointSum,
                                marklat: res.latitude,
                                marklon: res.longitude,
                              },
                            });
                          }
                        } else {
                          that.$router.push({
                            path: '/storeGroup',
                            query: {
                              storeId: val.storeId,
                              rdId: val.rdId,
                              lat: that.lat,
                              lon: that.lon,
                              visitId: val.visitId,
                              pageType: 'out',
                              addressLine: val.addressLine,
                              storeCategory: val.storeCategory,
                              storeName: val.storeName,
                              contactName: val.contactName,
                              hisTime: val.hisTime,
                              storeCode: val.storeCode,
                              tabVal: that.tabVal,
                              visitModel: '1',
                              latNew: location.lat,
                              lonNew: location.lon,
                              PointSum: PointSum,
                              marklat: res.latitude,
                              marklon: res.longitude,
                            },
                          });
                        }
                        localStorage.setItem('startTime', new Date());
                        localStorage.setItem('ORGName', val.deptName);
                        localStorage.setItem('chainNameR', val.storeName);
                        addVisitsPosition({
                          storeId: val.storeId,
                          visitsId: '',
                          lon: res.longitude,
                          lat: res.latitude,
                          sourceLon: location.lon,
                          sourceLat: location.lat,
                          positionDesc: '',
                          accuracy: res.accuracy,
                        });
                      },
                      fail: function () {
                        loading1.clear();
                        that.$dialog.alert({
                          message: 'GPS未开启',
                        });
                      },
                    });
                  });
                  wx.error(function (res) {
                    loading1.clear();
                    that.$dialog
                      .alert({
                        message: '定位失败，请开启企微定位权限',
                      })
                      .then(() => {});
                  });
                }
              });
          }
        }
      }
      // }
      // })
    },
    abnormalVisit(val) {
      localStorage.removeItem('visitId');
      checkVisit({ storeId: val.storeId }).then((res) => {
        buryingPoint({
          systemModel: '计划内',
          buryingPointType: 1,
          buryingPointValue: val.storeName + '(' + val.storeCode + ')',
          buryingPointName: '异常拜访',
          buryingPointPosition: '计划内',
        });
        if (res.code == 200 || val.stateString.indexOf('拜访中') != -1) {
          if (localStorage.getItem('loginType') == 'cs') {
            var lat = '';
            var lon = '';
            if (val.lat == '' || val.lat == null) {
              lat = '31.2517820000';
              lon = '120.5593090000';
            } else {
              lat = val.lat;
              lon = val.lon;
            }
            this.$router.push({
              path: '/abnormalVisit',
              query: {
                storeId: val.storeId,
                rdId: val.rdId,
                lat: lat,
                lon: lon,
                visitId: val.visitId,
                pageType: 'out',
                addressLine: val.addressLine,
                storeCategory: val.storeCategory,
                storeName: val.storeName,
                hisTime: val.hisTime,
                contactName: val.contactName,
                storeCode: val.storeCode,
                tabVal: this.tabVal,
                visitModel: '3',
                latNew: '31.2517820000',
                lonNew: '120.5593090000',
                PointSum: 0,
                marklat: lat,
                marklon: lon,
              },
            });
            localStorage.setItem('startTime', new Date());
            localStorage.setItem('ORGName', val.deptName);
            localStorage.setItem('chainNameR', val.storeName);
          } else {
            getPosition()
              .then((res) => {
                let { TXisBD, resData } = res;
                this.lat = TXisBD.lat;
                this.lon = TXisBD.lon;
                localStorage.setItem('lat', this.lat);
                localStorage.setItem('lon', this.lon);
                console.log('异常拜访=' + this.lat);
                console.log('异常拜访=' + this.lon);
                let PointSum = this.twoPointSum(
                  TXisBD.lat,
                  TXisBD.lon,
                  TXisBD.lat,
                  TXisBD.lon
                ).toFixed(2);
                this.$router.push({
                  path: '/abnormalVisit',
                  query: {
                    storeId: val.storeId,
                    rdId: val.rdId,
                    lat: this.lat,
                    lon: this.lon,
                    visitModel: localStorage.getItem('postType') != 'GZ' ? '5' : '3',
                    visitId: val.visitId,
                    genDate: val.genDate,
                    storeCode: val.storeCode,
                    latNew: location.lat,
                    lonNew: location.lon,
                    PointSum: PointSum,
                    marklat: resData.latitude,
                    marklon: resData.longitude,
                  },
                });
                localStorage.setItem('startTime', new Date());
                localStorage.setItem('ORGName', val.deptName);
                localStorage.setItem('chainNameR', val.storeName);
                addVisitsPosition({
                  storeId: val.storeId,
                  visitsId: '',
                  lon: resData.longitude,
                  lat: resData.latitude,
                  sourceLon: location.lon,
                  sourceLat: location.lat,
                  positionDesc: '',
                  accuracy: resData.accuracy,
                });
              })
              .catch((error) => {
                this.$dialog.alert({
                  message: error,
                });
              });
          }
        } else {
          this.$dialog.alert({
            title: '系统提示',
            message: res.msg,
          });
        }
      });
    },
    compareDate(dateTime1) {
      var formatDate1 = Date.parse(dateTime1);
      var formatDate2 = Date.parse(this.parseTime(new Date(), '{yy}-{mm}-{dd}'));
      if (formatDate1 == formatDate2) {
        return true;
      } else {
        return false;
      }
    },
    visitFn(val) {
      buryingPoint({
        systemModel: '计划内',
        buryingPointType: 1,
        buryingPointValue: val.storeName + '(' + val.storeCode + ')',
        buryingPointName: '客户信息',
        buryingPointPosition: '计划内',
      });
      if (val.sfaStoreType.type == 'qzd') {
        // 竞品店/潜在店
        this.$router.push({
          path: '/competingStoresDetail',
          query: { id: val.storeId },
        });
      } else if (/^FSQ/.test(val.storeCode)) {
        // FSQ 仿石漆服务商
        this.$router.push({
          path: '/FSQStoreDetail',
          query: { id: val.storeId },
        });
        return;
      } else if (val.designerStore) {
        // designerStore 是否为设计师招募门店，true-是，false-否
        this.$router.push({
          path: '/addDesignerDetail',
          query: { id: val.storeId },
        });
        return;
      } else {
        this.$router.push({
          path: '/storeDetail',
          query: { id: val.storeId, detilId: 'a' },
        });
      }
    },
    goFn() {
      this.$router.push({
        path: '/topStore',
      });
    },
    formLink() {
      this.$router.push('/storeVisit/questions');
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onSearch() {
      localStorage.setItem('deviveStoreName', this.storeName);
      this.getUserInPlanList();
    },
    handelChange(date) {
      var dateF = this.parseTime(date.$d, '{yy}-{mm}-{dd}');
      this.timeData = dateF;
      this.genDate = dateF;
      this.getUserInPlanList();
    },
    onLoad() {
      this.getUserInPlanList();
    },
    listClick(val) {
      this.listActive = val;
    },
    setStroeNameStyle(item) {
      // 家装或工装 approvalStatus:是否结案 0：未结案，1：已结案
      if (
        (item.sfaStoreType && (item.sfaStoreType.jz || item.sfaStoreType.gz)) ||
        item.approvalStatus == null ||
        item.approvalStatus == 0
      ) {
        return {};
      } else {
        return { color: '#0057ba', 'text-decoration': 'underline' };
      }
    },
    // 跳转好帮手门店详情
    goOtherSystem(item) {
      // 家装或工装 approvalStatus:是否结案 0：未结案，1：已结案
      if (
        (item.sfaStoreType && (item.sfaStoreType.jz || item.sfaStoreType.gz)) ||
        item.approvalStatus == null ||
        item.approvalStatus == 0
      ) {
        return false;
      }
      if (item.storeCode) {
        window.location.href =
          process.env.VUE_APP_SSB_LINK + '/order/storeDetail/index?shopCode=' + item.storeCode;
      } else {
        this.$dialog.alert({
          message: '缺少门店code',
        });
      }
    },
  },
};
</script>
<style lang="scss">
.van-dialog__confirm,
.van-dialog__confirm:active {
  color: #0057ba;
}
.searchDiv {
  .van-search {
    background: #fff;
  }
  .van-search__action {
    font-size: 14px;
    color: #0057ba;
    font-weight: bold;
    background: #f1f1f1;
    border-bottom-right-radius: 60px;
    border-top-right-radius: 60px;
    border: 1px solid #c1c1c1;
    padding: 0 20px;
  }
  .van-search--show-action {
    padding-right: 12px;
  }
  .van-search__content {
    border: 1px solid #c1c1c1;
    border-bottom-left-radius: 60px;
    border-top-left-radius: 60px;
    background: #f1f1f1;
    border-right: 0;
  }
}
</style>
<style lang="scss" scoped>
.bgcolor {
  background-color: #f5f5f5;
}
.container {
  padding-bottom: 50px;
}
.monthNow {
  height: 48px;
  line-height: 48px;
  text-align: center;
  font-weight: bold;
  padding: 0 15px;
  box-sizing: border-box;
  background-color: #f5f5f5;
  font-size: 16px;
  .CalendarIcon {
    font-size: 24px;
    color: #0057ba;
    position: relative;
    top: 6px;
    margin-left: 10px;
  }
}
.card {
  padding: 10px 16px;
  box-sizing: border-box;
  .title {
    font-size: 15px;
    font-weight: bold;
    color: #333;
    line-height: 22px;
    padding-right: 52px;
    /*word-break: break-all;*/
    .JPABC {
      width: 20px;
      position: relative;
      top: 4px;
      margin-right: 3px;
    }
    .statusIcon {
      padding: 3px;
      font-size: 12px;
      margin: 0 3px;
      color: #fff;
      display: inline-block;
      height: 20px;
      line-height: 16px;
      vertical-align: -1px;
    }
    .submit {
      background: #ffba13;
    }
    .noSubmit {
      background: #f11818;
    }
  }
  .info {
    font-size: 14px;
    color: #909090;
    line-height: 26px;
  }
}
.navBarTOP {
  position: fixed;
  width: 100%;
  z-index: 2;
  top: 0;
}
.cellcontent .centerBtn {
  margin: 0 auto 10px;
  display: block;
  width: 92%;
  border-radius: 5px;
  color: #0057ba;
  border: 1px solid #0057ba;
}
.cellcontent .centerBtn1 {
  background-color: #0057ba;
  color: #fff;
}
.btnbox {
  padding-top: 14px;
  border-top: 1px solid #eee;
  margin: 0 10px;
}
.cellcontent .centerBtn2 {
  margin: 0 auto 10px;
  display: block;
  width: 92%;
  color: #0057ba;
  border-radius: 5px;
  padding: 0;
}
.statstext {
  background-color: #0057ba;
  position: absolute;
  right: 0;
  top: 6px;
  padding: 2px 6px 2px 12px;
  border-bottom-left-radius: 60px;
  border-top-left-radius: 60px;
  color: #fff;
}
.lineGrey {
  height: 10px;
  width: 100%;
  background: #f1f1f1;
}
.cellcontent .van-cell {
  padding: 10px 0;
}
.statstext .van-icon__image {
  height: 0.7em;
}
.visitStoreIco {
  float: left;
  float: left;
  width: 26px;
  text-align: center;
  background-color: #ffba13;
  color: #fff;
  border-radius: 100%;
  margin-left: 14px;
  line-height: 26px;
  height: 26px;
}
.tipsTitle {
  padding: 5px 0;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
}
.deviceWithin {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .content {
    flex: 1;
    overflow-y: auto;
  }
  .tabBar {
    height: 50px;
  }
  .JPVisitNum {
    position: relative;
    top: -26px;
    font-size: 10px;
  }
  .TCFXListItem {
    display: inline-block;
    border: 1px solid #ccc;
    padding: 3px 5px;
    margin: 0 5px;
    border-radius: 6px;
  }
}
</style>