试驾项目示例

已于 2023-12-01 14:11:19 修改
阅读量44 收藏
点赞数
分类专栏： VUE 文章标签： 前端 javascript java
于 2022-07-13 09:16:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46252229/article/details/125756619
版权 
<template>
  <div v-if="peoForm.taskState == 3 ||peoForm.taskState == 4 ">
    <!--    <span class="colorName">{{ peoForm.paperworkName }}</span>-->
    <!--&lt;!&ndash;    <span class="colorName">男</span>&ndash;&gt;-->
    <!--    <span class="colorName">{{ peoForm.customerPhone }}</span>-->
    <!--    <span class="colorName">{{ peoForm.carType }} {{peoForm.prop}}</span>-->
    <!--    <span class="colorName">{{ peoForm.xsScsjCarDetail.cph }}</span>-->
    <!--    <div>-->
    <!--      <span class="colorName" v-if="peoForm.driverWay == 1">试乘试驾 </span>-->
    <!--      <span class="colorName" v-if="peoForm.driverWay == 2">试乘不试驾 </span>-->
    <!--      <span  class="colorName">销售:{{ peoForm.saleName }}</span>-->
    <!--    </div>-->

    <div class="boxHeader" >
      <div class="title">任务详情</div>
      <div class="boxHeaderItem" v-if="peoForm.driverWay == 1">试驾类型 试驾</div>
      <div class="boxHeaderItem" v-if="peoForm.driverWay == 2">试驾类型 试乘</div>
      <div class="boxHeaderItem">客户信息 {{ peoForm.paperworkName }}  {{ peoForm.customerPhone }}</div>
      <div class="boxHeaderItem">意向车型 {{ peoForm.carType }}  {{ peoForm.prop }}</div>
      <div class="boxHeaderItem">销售顾问 {{ peoForm.saleName }}  {{ peoForm.saleCode }}</div>
      <div class="boxHeaderItem">试驾车辆 {{ peoForm.xsScsjCarDetail.cph }}</div>
    </div>
    <div class="boxCenter" v-if="newStartTaskDetail">

      <span class="title">起始里程</span>
      <input class="input" type="number" v-model="peoForm.xsScsjCarDetail.currentMileage" readonly>
      <span>公里</span>
    </div>
    <div class="boxCenter" v-if="newTaskDetail">
      <div class="title">结束里程</div>
      <input class="input" type="number" v-model="peoForm.taskEndMileage" @blur="blurLiCheng(peoForm.taskEndMileage)">
      <div>公里</div>

    </div>

    <div class="box" v-if="newStartTaskDetail">
      <div style="display:flex;flex-direction: column;justify-content: center;align-items: center;color: #c8c9cc"
           @click="renewSubmit(shijiaStartTime)">
        <div class="startDrive">
          <div class="yishijia"></div>
          <div class="yishijiaA">{{ shijiaStartTime }}</div>
          <div class="yishijiaB" style="color: #15B628">点击开始试驾</div>
        </div>
<!--        <div>请先填写里程</div>-->
      </div>

    </div>
    <div class="box" v-if="newTaskDetail">
      <div style="margin: -50px 0 0 0">
        <span class="yishijia" style="margin:0 20px">开始时间:  {{ parseTime(peoForm.taskStartDate, '{h}:{i}:{s}') }}</span>
        <span class="yishijia">开始里程：{{ peoForm.taskStartMileage }}</span>
      </div>
<!--      <div style="display:flex;flex-direction: column;justify-content: center;align-items: center;color: #c8c9cc"-->
<!--           @touchstart="gtouchstart()" @touchmove="gtouchmove()" @touchend="gtouchend() ">-->
<!--        <van-circle-->
<!--          v-model="currentRate"-->
<!--          :rate="rate"-->
<!--          :speed="100"-->
<!--          size="180px"-->

<!--          layer-color="#e09a33"-->
<!--          class="startDriveB"-->
<!--        >-->
<!--          <div>-->
<!--            <div class="yishijia">已试驾</div>-->
<!--            <div class="yishijiaA">{{ callinTime }}</div>-->
<!--            <div class="yishijiaB">长按结束试驾</div>-->
<!--          </div>-->
<!--        </van-circle>-->
<!--&lt;!&ndash;        <div>请先填写里程</div>&ndash;&gt;-->
<!--      </div>-->

      <div style="display:flex;flex-direction: column;justify-content: center;align-items: center;color: #c8c9cc" @click="endSubmit">
        <van-circle
          v-model="currentRate"
          size="180px"
          layer-color="#e09a33"
          class="startDriveB"
        >
          <div>
            <div class="yishijia">已试驾</div>
            <div class="yishijiaA">{{ callinTime }}</div>
            <div class="yishijiaB">点击结束试驾</div>
          </div>
        </van-circle>
        <!--        <div>请先填写里程</div>-->
      </div>
    </div>
    <!--    <div class="btn" >{{callinTime}}</div>-->
    <!--    <div class="startDriveB" ">-->
    <!--      <div>{{ shijiaEndTime }}</div>-->
    <!--      <div>结束试驾</div>-->
    <!--    </div>-->
    <!--    <div class="countDown">距离结束还剩1天0小时4分钟</div>-->
  </div>
  <div class="newbox" v-else-if="peoForm.taskState == 2">
    协议已失效
  </div>
  <div class="newbox" v-else-if="peoForm.taskState == 5">
    试驾已完成
  </div>
  <div class="newbox" v-else-if="peoForm.taskState == 6">
    试驾已完成
  </div>
</template>

<script>

import CrudxsScsjTaskDetail from '@/api/CarDrive/drive'
import {Toast} from "vant";

export default {
  components: {},
  name: 'personadd',
  data () {
    return {
      gradientColor: {
        '0%': '#FF736E',
        '100%': '#FF736E'
      },
      timer: '',
      callinTime: 0,
      currentRate: 0,
      rate: 0,
      newStartTaskDetail: false,
      newTaskDetail: false,
      peoForm: {
        xsScsjCarDetail: {}
      },
      shijiaStartTime: null,
      shijiaEndTime: null,
      logding: false
    }
  },

  methods: {
    // 过来的查询
    gettablelist (par) {
      CrudxsScsjTaskDetail.list(par).then(res => {
        this.peoForm = res.content[0]
        this.peoForm.taskEndMileage = ''
        // this.kaihsi = res.content[0].taskStartMileage
        if (res.content[0].taskState == 3) {
          this.newStartTaskDetail = true
          this.newTaskDetail = false
        } else if (res.content[0].taskState == 4) {
          this.newTaskDetail = true
          this.newStartTaskDetail = false
          const nowTime = new Date().getTime()
          const taskStartDate = res.content[0].taskStartDate

          // let clinTime = this.calculateDiffTime(taskStartDate, nowTime)
          const clinTime = this.getdate(nowTime - taskStartDate)
          const newlinTime = clinTime.split('-')
          this.start2(true, newlinTime)
        } else {
          this.newStartTaskDetail = false
          this.newTaskDetail = false
        }
      })
    },
    // 检测结束里程
    blurLiCheng (val) {
      if (val) {
        if (val < this.peoForm.taskStartMileage) {
          this.peoForm.taskEndMileage = null
          this.$toast('结束里程不允许小于开始里程')
          return false
        } else if (val > Number(this.peoForm.taskStartMileage) + 200) {
          this.peoForm.taskEndMileage = null
          this.$toast('输入里程有误，请重新输入')
          return false
        }else if(val == Number(this.peoForm.taskStartMileage)) {
          this.peoForm.taskEndMileage = null
          this.$toast('结束里程与开始里程不允许相同请检查【结束时里程】是否正确！')
        }
      }
    },
    // 开始试驾
    renewSubmit () {
      const obj = JSON.stringify(this.peoForm)
      const data = JSON.parse(obj)
      data.taskStartMileage = this.peoForm.xsScsjCarDetail.currentMileage
      data.taskState = 4 // 试驾中
      this.logding = true
      if(data.xsScsjCarDetail.carState == 1) {
        CrudxsScsjTaskDetail.edit(data).then(res => {
          if (res.taskState == 4) {
            this.newTaskDetail = true
            this.start(true)
          }

          this.logding = false
          this.$toast('提交成功!')
          // this.$router.push('/personList')
          this.gettablelist({ id: res.id })
          // this.$router.push({name:'personadd',params: {id:res.id}})
        })
      }else {
        Toast('非空闲车辆，无法试驾')
      }

    },
    // 结束试驾
    endSubmit () {
      const obj = JSON.stringify(this.peoForm)
      if (!this.peoForm.taskEndMileage) {
        this.$toast('请输入结束里程')
        return false
      }
      if (this.peoForm.taskEndMileage > Number(this.peoForm.taskEndMileage) + 200) {
        this.peoForm.taskEndMileage = null
        this.$toast('输入里程有误，请重新输入')
        return false
      }
      if (this.peoForm.taskEndMileage == this.peoForm.taskStartMileage) {
        this.peoForm.taskEndMileage = null
        this.$toast('结束里程与开始里程不允许相同请检查【结束时里程】是否正确！')
        return false
      }
      const data = JSON.parse(obj)
      data.taskState = 5 // 试驾完成
      this.logding = true
      this.$dialog.confirm({
        title: '提示',
        message:
          '是否确认结束试驾',
      }).then(() => {
        CrudxsScsjTaskDetail.edit(data).then(res => {
          this.logding = false
          this.$toast('提交成功!')
          this.$router.push('/personList')
        }).catch(c => {
          this.logding = false
        })
      }).catch(() => {

      });


    },
    gtouchstart () {

      if (!this.peoForm.taskEndMileage) {
        this.rate = 0
        this.$toast('请输入结束里程')
        return false
      }
      if (this.peoForm.taskEndMileage > Number(this.peoForm.taskEndMileage) + 200) {
        this.rate = 0
        this.peoForm.taskEndMileage = null
        this.$toast('结束里程与开始里程不允许相同请检查【结束时里程】是否正确！')
        return false
      }
      if (this.peoForm.taskEndMileage == this.peoForm.taskStartMileage) {
        this.rate = 0
        this.peoForm.taskEndMileage = null
        this.$toast('结束里程与开始里程不允许相同')
        return false
      }
      this.rate = 1000
      this.timeOutEvent = setTimeout(() => {
        this.timeOutEvent = 0
        // 真正长按后应该执行的内容
        this.endSubmit()
        // alert("长按事件触发发");
      }, 1000)// 这里设置定时器，定义长按500毫秒触发长按事件，时间可以自己改，个人感觉500毫秒非常合适
      return false
    },

    // 如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
    gtouchmove () {
      clearTimeout(this.timeOutEvent)// 清除定时器
      this.timeOutEvent = 0
      // alert("取消了");
      this.rate = 0
    },

    // 手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
    gtouchend () {
      clearTimeout(this.timeOutEvent)// 清除定时器
      if (this.timeOutEvent !== 0) {
        // 这里写要执行的内容（尤如onclick事件）
        this.rate = 0
        // this.$toast("长按结束结束试驾");
      }
      return false
    },

    start (bolean) {
      const _this = this
      let hour, minute, second
      hour = minute = second = 0
      if (bolean === true) {
        _this.timer = setInterval(function () {
          if (second >= 0) {
            second = Number(second)  + 1
          }
          if (second >= 60) {
            second = 0
            minute = Number(minute)  + 1
          }
          if (minute >= 60) {
            minute = 0
            hour = Number(hour) + 1
          }
          _this.callinTime = hour + '时' + minute + '分' + second + '秒'
        }, 1000)
      } else {
        window.clearInterval(_this.timer)
      }
    },

    // 开始计多少时间
    start2 (bolean, newlinTime) {
      const _this = this
      let hour, minute, second
      // hour = minute = second = 0
      hour = Number(newlinTime[0])
      minute = Number(newlinTime[1])
      second = Number(newlinTime[2])
      if (bolean === true) {
        _this.timer = setInterval(function () {
          if (second >= 0) {
            second = Number(second) + 1
          }
          if (second >= 60) {
            second = 0
            minute = Number(minute) + 1
          }
          if (minute >= 60) {
            minute = 0
            hour =Number(hour) + 1
          }
          _this.callinTime = hour + '时' + minute + '分' + second + '秒'
        }, 1000)
      } else {
        window.clearInterval(_this.timer)
      }
    },
    // 计算两个时间戳
    getdate (period) {
      var yearLevelValue = 365 * 24 * 60 * 60 * 1000
      var monthLevelValue = 30 * 24 * 60 * 60 * 1000
      var dayLevelValue = 24 * 60 * 60 * 1000
      var hourLevelValue = 60 * 60 * 1000
      var minuteLevelValue = 60 * 1000
      var secondLevelValue = 1000

      function getDifference (period) {
        /** *****计算出时间差中的年、月、日、天、时、分、秒*******/
        var year = parseInt(getYear(period))
        var month = parseInt(getMonth(period - year * yearLevelValue))
        var day = parseInt(getDay(period - year * yearLevelValue - month * monthLevelValue))
        var hour = parseInt(getHour(period - year * yearLevelValue - month * monthLevelValue - day * dayLevelValue))
        var minute = parseInt(getMinute(period - year * yearLevelValue - month * monthLevelValue - day * dayLevelValue - hour * hourLevelValue))
        var second = parseInt(getSecond(period - year * yearLevelValue - month * monthLevelValue - day * dayLevelValue - hour * hourLevelValue - minute * minuteLevelValue))
        var result = ''
        if (year != 0) result = result + year + '年'
        if (month != 0) result = result + month + '月'
        if (day != 0) result = result + day + '天'
        result =   hour + '-' + minute + '-' + second

        function getYear (period) {
          // Math.floor()
          return Math.floor(parseInt(period) / yearLevelValue)
        }

        function getMonth (period) {
          return Math.floor(parseInt(period) / monthLevelValue)
        }

        function getDay (period) {
          return Math.floor(parseInt(period) / dayLevelValue)
        }

        function getHour (period) {
          return Math.floor(parseInt(period) / hourLevelValue)
        }

        function getMinute (period) {
          return Math.floor(parseInt(period) / minuteLevelValue)
        }

        function getSecond (period) {
          return Math.floor(parseInt(period) / secondLevelValue)
        }

        return result
      }

      return getDifference(period)
    }

    // 时间戳转换成时间
  },

  created () {

  },
  mounted () {
    setInterval(() => {
      this.shijiaStartTime = this.parseTime(new Date(), '{h}:{i}:{s}')
      this.shijiaEndTime = this.parseTime(new Date(), '{h}:{i}:{s}')
    }, 1000)

    const query = this.$route.params
    if (query.id != 0) {
      console.log('9999')
      this.gettablelist({
        id: query.id
      })
    } else {
      this.form.orgId = this.$store.getters.user.orgId
      this.syname = this.$store.getters.user.username
    }
  }
}
</script>

<style scoped>
.title {
  font-size: 20px;
  margin: 6px;
}

.colorName {
  border: #6ddc6d 1px solid;
  color: rgba(125, 152, 85, 0.96);
  margin: 10px;
}

.startDrive {
  border-radius: 50%;
  width: 4rem;
  height: 4rem;
  background: #ffffff;
  border: #c78637 6px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  animation: glow 1200ms ease-out infinite alternate;

}

.startDriveB {
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  background: #ffffff;
  /*border: #e09a33 6px solid ;*/
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  animation: glowb 1200ms ease-out infinite alternate;

  　　-webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  background: #FFFFFF;
  padding: 10px;
  margin: 10px;
  border-radius: 10px;
  height: 300px;
}

.boxHeader {
  background: #FFFFFF;
  padding: 3px 5px;
  margin: 10px;
  border-radius: 10px;
  height: 260px;
}

.boxHeaderItem {
  font-size: 18px;
  color: #949598;
  margin: 10px;
}

.boxCenter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  padding: 10px;
  margin: 10px;
  border-radius: 10px;
  height: 40px;
}

@keyframes glow {
  0% {
    border-color: #41de41;
    box-shadow: 0 0 5px #41de41, inset 0 0 5px #41de41, 0 0px 0 #41de41;
  }

  100% {
    border-color: #1bc71b;
    box-shadow: 0 0 2px #48c448, inset 0 0 10px #41de41, 0 0 0 #1bc71b;
  }
}

@keyframes glowb {
  0% {
    border-color: #ded641;
    box-shadow: 0 0 2px #dcd77c, inset 0 0 10px #ece46d, 0 0 0 #ded641;
  }

  100% {
    border-color: #d0c71c;
    box-shadow: 0 0 2px #dcd77c, inset 0 0 10px #ece46d, 0 0 0 #ded641;
  }
}

* {

}
.input {
  padding: 10px 0;
  font-size: 18px;
  font-weight: bold;
  padding-left: 10px;
  width: 60%;
}
.yishijia {
  margin: 10px 0;
  font-size: 16px;
  color: #c8c9cc;
}
.yishijiaA {
  font-size: 20px;
  color: #110c0c;
  font-weight: bolder;
}
.yishijiaB {
  margin: 10px 0;
  font-size: 16px;
  color: #e09a33;
}

.newbox {
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #19c205;

}
</style>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值