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/storeVisit/distributionShopDetail?shopCode=" + val +
                "&indexTab=2&visitId="+that.visitId+"&lon="+that.lon+"&lat="+that.lat+"&rdId="+that.rdId+"&storeCategory="+that.storeCategory+"&storeId="+that.storeId+"&storeName="+that.storeName+"&addressLine="+that.addressLine
          }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>