storevisit-ui-mobile/src/views/deviceOutside/storeGroup.vue

<template>
  <div>
    <!--        顶部条-->
    <van-nav-bar class="navBar" title="拜访" left-arrow @click-left="onClickLeft">
      <!--@click-right="uploadImgShowFn"-->
      <!--<template slot="right">-->
      <!--<van-icon name="photo-o" size="22px" color="#ccc" style="margin-right: 10px;" />-->
      <!--</template>-->
    </van-nav-bar>
    <!--        主体内容-->
    <div class="container">
      <div class="lineGrey"></div>
      <div class="card mt10">
        <div class="title f-blue">
          {{ storeName }}(<span style="color: #0057ba">{{ urlParameter.storeCode }}</span
          >)
        </div>
        <!--<div class="title">恒泰化工</div>-->
        <div class="info1" v-if="storeCategory != null">类型：{{ storeCategory }}</div>
        <div class="info1" v-if="addressLine != null">地址：{{ addressLine }}</div>
        <van-button
          type="info"
          style="background: rgb(0, 87, 186); color: #fff; margin: 10px 0; border-radius: 5px"
          size="small"
          plain
          class="centerBtn"
          @click="visitFn(urlParameter.storeCode)"
          >经营情况</van-button
        >
        <van-button
          type="info"
          style="
            background: rgb(0, 87, 186);
            color: #fff;
            margin: 10px;
            border-radius: 5px;
            float: right;
          "
          size="small"
          plain
          class="centerBtn"
          @click="onstopVisit">
          增加项目</van-button
        >
      </div>

      <div class="card">
        <div
          class="info"
          v-for="(item, index) in list"
          :key="index"
          @click="addStoreVisit(item, index)">
          <!--          <span class="must" v-show="item.isMust=='0'||item.isMust=='2'">*</span>-->
          <!--          <span class="must" v-show="item.isMust!='0'&&item.isMust!='2'">&nbsp;</span>-->
          <p style="width: 90%; margin: 0; line-height: 24px; display: inline-block">
            {{ item.answerValue }}
          </p>
          <p style="width: 90%; margin: 0; line-height: 14px; display: inline-block; color: #666">
            {{ item.startTime }}
          </p>
          <!--         -->
          <!--          <span  v-show="item.processKey!=null"><van-icon :name="sp" size="16"/></span>-->
          <span
            v-show="item.closeProject != 1"
            class="arrow"
            style="background-color: #fff; color: #444"
            ><van-icon name="arrow"
          /></span>
          <span v-show="item.closeProject == 1" class="arrow" style="background-color: #0057ba"
            ><van-icon name="success"
          /></span>
        </div>
      </div>
    </div>
    <div id="allmap"></div>
  </div>
</template>

<script>
import sp from './../../assets/sp.png';
import {
  endVisits,
  editDwellTime,
  suishenbangStoreSale,
  stopVisit,
  getProjectList,
} from '@/api/index';
import axios from 'axios';
export default {
  name: 'outstoreVisit',
  data() {
    return {
      notes: '',
      visitModel: '1',
      sp: sp,
      uploadshow: false,
      flag: true,
      questionsshow: false,
      uploadImgshow: false,
      imgs: [],
      uploadImages: [],
      uploadid1: 'uploadid1',
      uploadid2: 'uploadid2',
      iscuxiao: false,
      text: '',
      radio: '',
      uploadImgEditText: '编辑',
      isEdit: false,
      storeId: '',
      rdId: '',
      lat: '',
      lon: '',
      list: [],
      storeGroupId: '',
      addressLine: '',
      storeCategory: '',
      storeName: '',
      contactName: '',
      urlParameter: '',
      uType: '-1',
      orderUrl: null,
      location: {
        lat: '34.6174',
        lon: '112.44039',
      },
      address: '',
      showTime: '00:00:00:00',
      city: '',
      locationAccuracy: '',
      id: '89',
      startTime: null,
      timeN: null,
    };
  },
  created() {
    this.urlParameter = this.$route.query;
    this.storeId = this.$route.query.storeId + '';
    this.storeCode = this.$route.query.storeCode;
    this.rdId = this.$route.query.rdId + '';
    this.addressLine = this.$route.query.addressLine;
    this.storeCategory = this.$route.query.storeCategory;
    this.storeName = this.$route.query.storeName;
    this.contactName = this.$route.query.contactName;
    this.lat = this.$route.query.lat + '';
    this.lon = this.$route.query.lon + '';
    this.visitModel = this.$route.query.visitModel + '';
    this.uType = localStorage.getItem('uType');
  },

  activated() {
    this.urlParameter = this.$route.query;
    this.storeId = this.$route.query.storeId + '';
    this.storeCode = this.$route.query.storeCode;
    this.rdId = this.$route.query.rdId + '';
    this.addressLine = this.$route.query.addressLine;
    this.storeCategory = this.$route.query.storeCategory;
    this.storeName = this.$route.query.storeName + '';
    this.contactName = this.$route.query.contactName + '';
    this.lat = this.$route.query.lat + '';
    this.lon = this.$route.query.lon + '';
    this.list = [];
    this.visitModel = this.$route.query.visitModel + '';
    this.uType = localStorage.getItem('uType');
    if (localStorage.getItem('PGID') != null) {
      setTimeout(() => {
        this.addVisits();
        this.timeN = setInterval(this.animation, 16);
      });
    } else {
      setTimeout(() => {
        this.addVisits();
        this.timeN = setInterval(this.animation, 16);
      });
    }
  },
  methods: {
    animation() {
      //前时间减去上次开启时间减去暂停累计时间
      var times = new Date().getTime() - new Date(this.startTime).getTime();
      var house = Math.floor(times / 3600000); //毫秒转化为分钟
      var minutes = Math.floor(times / 60000 - house * 60); //毫秒转化为分钟
      var minutes1 = Math.floor(times / 60000); //毫秒转化为分钟
      var seconds = Math.floor((times - minutes1 * 60000) / 1000); //已知分钟将time减去分钟 除去1000得出 秒
      var ms = Math.floor((times - minutes1 * 60000 - seconds * 1000) / 10); //
      this.showTime =
        (house < 10 ? '0' + house : house) +
        ':' +
        (minutes < 10 ? '0' + minutes : minutes) +
        ':' +
        (seconds < 10 ? '0' + seconds : seconds) +
        ':' +
        (ms < 10 ? '0' + ms : ms);
    },
    // 结束拜访
    onstopVisit() {
      localStorage.removeItem('PGID');
      this.$router.push({
        path: '/projectOut',
        query: {
          storeId: this.$route.query.storeId,
          rdId: this.$route.query.rdId,
          lat: this.$route.query.lat,
          lon: this.$route.query.lon,
          visitId: null,
          pageType: 'out',
          addressLine: this.$route.query.addressLine,
          storeCategory: this.$route.query.storeCategory,
          storeName: this.$route.query.storeName,
          hisTime: this.$route.query.hisTime,
          contactName: this.$route.query.contactName,
          storeCode: this.$route.query.storeCode,
          tabVal: this.$route.query.tabVal,
          visitModel: '1',
          latNew: this.$route.query.lat,
          lonNew: this.$route.query.lon,
          PointSum: '0',
          closeProject: '0',
          marklat: this.$route.query.marklat,
          marklon: this.$route.query.marklon,
        },
      });
    },
    overbookingFn(val) {
      window.location.href = val;
      // window.location.href =process.env.VUE_APP_XD_LINK+"/home/SimulateLogin?username="+val+"&operator="+localStorage.getItem("loginName")+"&system=visit"
    },
    visitFn(val) {
      var that = this;
      suishenbangStoreSale({ storeCode: val }).then((res) => {
        if (res.code == 200) {
          if (res.data.num != '0') {
            window.location.href =
              process.env.VUE_APP_SSB_LINK + '/order/storeDetail/index?shopCode=' + val;
            f;
          } else {
            that.$toast(res.data.msg);
          }
        } else {
          that.$toast(res.msg);
        }
      });
    },
    getLocation() {
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      this.list = [];
      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,
          },
        })
        .then((response) => {
          if (response.status == 200) {
            loading1.clear();
            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) {
                  var location = that.CJ02BD(res.latitude, res.longitude);
                  that.location = location;
                  if (that.urlParameter.lat == '' || that.urlParameter.lat == null) {
                    that.lat = that.location.lat;
                    that.lon = that.location.lon;
                  }
                  let PointSum = that
                    .twoPointSum(that.lat, that.lon, location.lat, location.lon)
                    .toFixed(2);
                  if (PointSum > 500) {
                    that.visitModel = '5';
                    localStorage.setItem('visitModel', '5');
                    that.$dialog
                      .confirm({
                        confirmButtonText: '确定',
                        cancelButtonText: '重新定位',
                        title: '系统提示',
                        message: '距离本店距离差距太大',
                      })
                      .then(() => {
                        that.addVisits();
                      })
                      .catch(() => {
                        that.getLocation();
                      });
                  } else {
                    that.addVisits();
                  }
                },
                fail: function () {
                  that.$dialog
                    .alert({
                      message: 'GPS未开启',
                    })
                    .then(() => {
                      that.getLocation();
                    });
                },
              });
            });
          }
        });
    },
    addVisits() {
      this.startTime = new Date();
      var visitEntry = '';
      if (this.urlParameter.tabVal == '0') {
        visitEntry = '2';
      } else {
        visitEntry = '1';
      }
      if (this.$route.query.shopCode != undefined) {
        this.storeCode = this.$route.query.shopCode;
      }
      var that = this;
      var params = {
        storeId: that.storeId,
        storeCode: that.storeCode,
        visitEntry: visitEntry,
      };
      let loading2 = that.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      getProjectList(params).then((res) => {
        loading2.clear();
        if (res.code == 200) {
          that.notes = res.data.notes;
          that.list = res.data;
        } else {
          this.$toast(res.msg);
        }
      });
    },
    addStoreVisit(val, index) {
      localStorage.setItem('PGID', val.id);
      this.$router.push({
        path: '/projectOut',
        query: {
          storeId: this.storeId,
          storeCode: this.urlParameter.storeCode,
          visitId: val.id,
          addressLine: this.$route.query.addressLine,
          storeCategory: this.$route.query.storeCategory,
          storeName: this.$route.query.storeName,
          hisTime: this.$route.query.hisTime,
          contactName: this.$route.query.contactName,
          tabVal: this.$route.query.tabVal,
          stopTime: val.stopTime,
          ids: index,
          taskId: val.taskId,
          storeGroupId: this.storeGroupId,
          taskType: val.taskType,
          rdId: this.$route.query.rdId,
          photoType: val.photoType,
          lat: this.$route.query.lat,
          lon: this.$route.query.lon,
          visitSource: '1',
          visitModel: this.visitModel,
          locationCity: this.city,
          locationRemark: this.address,
          locationAccuracy: this.locationAccuracy,
          closeProject: val.closeProject,
          marklat: this.$route.query.marklat,
          marklon: this.$route.query.marklon,
        },
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onshouow() {
      this.uploadshow = false;
      this.questionsshow = false;
    },
    uploadImgEdit() {
      if (this.uploadImgEditText == '编辑') {
        this.uploadImgEditText = '完成';
      } else {
        this.uploadImgEditText = '编辑';
        this.uploadImgshow = false;
      }
    },
    deleteImg(index) {
      this.imgs.splice(index, 1);
    },
    questionClick(item) {
      console.log(item);
      if (item.isUpload) {
        this.uploadshow = true;
      } else if (item.isQuestion) {
        this.questionsshow = true;
      }
    },
    newimgarr1(val) {
      this.imgs = val;
    },
    uploadImgShowFn() {
      this.uploadImgshow = true;
      if (this.uploadImages.length <= 0) {
        this.uploadImgEditText = '';
      }
    },
    previewsImg(index) {
      ImagePreview({
        images: this.uploadImages,
        startPosition: index,
        onClose() {
          // do something
        },
      });
    },
  },
  destroyed() {
    this.timeN = null;
    clearInterval(this.timeN);
  },
};
</script>
<style lang="scss" scoped>
.container {
  margin-bottom: 10px;
  background-color: white;
  /*padding:0 16px;*/
}
.navBarOverlay {
  background: #fff;
}
.card {
  background: #fff;
  box-sizing: border-box;
  padding: 10px 16px;
  .title {
    line-height: 32px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }
  .subtitle {
    line-height: 24px;
    font-size: 14px;
    color: #7b7b7b;
    .status {
      float: right;
    }
  }
  .info {
    font-size: 14px;
    color: #484848;
    padding: 14px;
    border-bottom: 1px solid #f1f1f1;
    position: relative;
    .arrow {
      float: right;
      display: inline-block;
      height: 20px;
      width: 20px;
      line-height: 20px;
      text-align: center;
      border-radius: 50%;
      background: #0057ba;
      color: #fff;
      font-weight: bold;
      font-size: 14px;
      position: absolute;
      margin-top: -10px;
      right: 0;
      top: 50%;
    }
  }
  .info1 {
    font-size: 14px;
    color: #666;
    line-height: 18px;
    padding: 4px 0;
    position: relative;
    .arrow {
      float: right;
      display: inline-block;
      height: 20px;
      width: 20px;
      line-height: 20px;
      text-align: center;
      border-radius: 50%;
      background: #0057ba;
      color: #fff;
      font-weight: bold;
      font-size: 14px;
      margin-top: 9px;
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -10px;
    }
  }
}
.must {
  font-size: 18px;
  color: #f56c6c;
  margin-right: 2px;
}
.zw {
  display: inline-block;
  width: 7px;
  height: 100%;
}
.lineGrey {
  height: 10px;
  width: 100%;
  background: #f1f1f1;
}
.submitBtn {
  margin: 16px 0;
  font-size: 18px;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  .block {
    width: 100%;
    height: 100%;
    background-color: #fff;
    overflow: auto;
  }
}
.questionName {
  font-size: 16px;
  color: #484848;
  /*line-height: 40px;*/
  background: #f4f4f4;
  padding: 10px 15px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  justify-content: center;
  .text {
    flex: 9;
  }
}
.answerDiv {
  background: #fff;
  padding: 0 15px 10px;
  .answerItem {
    padding: 10px 0;
    border-bottom: 1px solid #dedede;
    .name {
      line-height: 36px;
      font-size: 14px;
      color: #8b8b8b;
    }
  }
}
.border {
  border: 1px solid #dedede;
}
.ht30 {
  height: 30px;
}
.bodrder-b {
  border-bottom: 1px solid #dedede;
}
.img-box {
  width: 50%;
  /*height: 100%;*/
  position: relative;
  padding: 10px;
  display: inline-block;
  i {
    position: absolute;
    right: 2px;
    top: 2px;
  }
  img {
    width: 100%;
    height: 100%;
  }
}
.imgNull {
  text-align: center;
  padding-top: 100px;
  i {
    color: #dedede;
  }
  div {
    padding-top: 30px;
    font-size: 18px;
    font-weight: bold;
  }
}
.card .f-blue {
  color: #0057ba;
}
</style>
<style>
.navBarOverlay .van-nav-bar__left .van-icon {
  color: #8b8b8b;
}
.navBarOverlay .van-nav-bar__right .van-nav-bar__text {
  color: #333;
}
.ht30 .van-radio__label {
  color: #8b8b8b;
}
.van-dialog__confirm,
.van-dialog__confirm:active {
  color: #0057ba;
}
#allmap {
  width: 20px;
  height: 20px;
  left: -1000px;
  position: relative;
}
</style>