<template> <div class="sign_in"> <div class="header"> <van-swipe class="my-swipe" indicator-color="white" v-if="baseInfo.coverList && baseInfo.coverList.length > 0"> <van-swipe-item v-for="n in baseInfo.coverList" :key="n.id"> <video v-if="n.cover_url.indexOf('.mp4') > -1" id="video" :src="n.cover_url" poster="" controls="controls" windowlessvideo="true" playsinline="true" webkit-playsinline="true" x5-playsinline="true" x-webkit-airplay="allow" width="100%" height="260px" type="video/mp4" ></video> <img v-if="n.cover_url.indexOf('.mp4') == -1" :src="n.cover_url" /> </van-swipe-item> </van-swipe> <img v-else src="@/assets/home/defCoure.jpg" alt="" /> </div> <div class="base_info"> <p class="base_title">{{ baseInfo.baseName }}</p> <div class="rate"> <van-rate v-model="baseInfo.baseScore" color="#FFCC00" :size="16" readonly /> <span>{{ baseInfo.baseScore }}</span> </div> <p class="address"> <van-icon name="location" class="icon" /> {{ baseInfo.address }} </p> <p class="phone"> <van-icon name="phone" class="icon" /> {{ baseInfo.phone }} </p> </div> <div class="select_student" @click="selectStudent"> <p class="select_tip">请选择需要打卡的孩子</p> <div class="student" v-if="selectedContact.travelerName"> <span>{{ selectedContact.travelerName }}</span> <van-icon name="close" class="icon" /> </div> <div class="student" v-else> <span>点击选择</span> </div> </div> <div class="btns" @click="getPosition">立即打卡</div> <van-popup v-model="failShow" round closeable :style="{ width: '80%' }"> <div class="success"> <img src="@/assets/tip1.png" alt="" /> <h3>打卡失败!</h3> <p>您当前所在的地理位置不在课程的打卡范围内!</p> </div> </van-popup> </div> </template> <script> export default { data() { return { baseInfo: '', list: [], baseId: '', userInfo: '', failShow: false, selectedContact: '', //选择的出行人 } }, mounted() { var userInfo = localStorage.getItem('userInfo') if (userInfo) { this.userInfo = JSON.parse(userInfo) } // 选择的出行人 let selectedContactArr = localStorage.getItem('selectedContactArr') if (selectedContactArr) { selectedContactArr = JSON.parse(selectedContactArr) this.selectedContact = selectedContactArr[0] } this.baseId = this.$route.query.qrresult this.GetStudyBaseDetail(this.baseId) }, methods: { AddSign() { this.$toast.loading({ message: '请求中...', }) this.yxAxios .get(`${this.yanxueUrl}/api/BaseManage/AddSign?userId=${this.selectedContact.travelerNum}&baseId=${this.baseId}`) .then((res) => { this.$toast.success('打卡签到成功') console.log(res.data) // alert('打卡签到成功:',JSON.stringify(res)) setTimeout(() => { this.$router.push({ name: 'Home' }) }, 1000) }) }, GetStudyBaseDetail(baseId) { this.$toast.loading({ message: '请求中...', }) this.yxAxios.get(`${this.yanxueUrl}/api/StudiesWap/GetStudyBaseDetail?userId=0&cs=绍兴市&id=${baseId}`).then((res) => { console.log(res.data) if (res.data.data) { this.$toast.clear() this.baseInfo = res.data.data } else { this.$toast.fail(res.data.message) } }) }, getPosition() { if (!this.selectedContact.travelerNum) { this.$toast('请选择需要打卡的孩子') return false } if (this.baseInfo.signLong == 0 && this.baseInfo.signLat == 0) { //基地没数坐标 this.AddSign() return false } var basePosition = [this.baseInfo.signLong, this.baseInfo.signLat] AMap.convertFrom(basePosition, 'baidu', function (status, result) { console.log(result) if (result.info === 'ok') { basePosition = [result.locations[0].lng, result.locations[0].lat] // Array.<LngLat> } }) this.$toast.loading({ message: '请求中...', }) this.getNowPosition((posi) => { //获取当前位置坐标 this.$toast.clear() if (posi) { var nowPosition = [posi.position.lng, posi.position.lat] var distance = AMap.GeometryUtil.distance(nowPosition, basePosition) console.log(parseInt(distance), nowPosition, basePosition) if (parseInt(distance) > 500) { this.failShow = true } else { // alert('定位小于500m') this.AddSign() } } else { // alert('getNowPosition没有返回') } }) }, getNowPosition: function (callback) { let mapObj = new AMap.Map('iCenter') mapObj.plugin('AMap.Geolocation', function () { let geolocation = new AMap.Geolocation({ enableHighAccuracy: true, //是否使用高精度定位,默认:true timeout: 10000, //超过10秒后停止定位,默认:无穷大 maximumAge: 0, //定位结果缓存0毫秒,默认:0 convert: true, //自动偏移坐标,偏移后的坐标为高德坐标,默认:true showButton: true, //显示定位按钮,默认:true buttonPosition: 'LB', //定位按钮停靠位置,默认:'LB',左下角 buttonOffset: new AMap.Pixel(0, 0), //定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20) showMarker: true, //定位成功后在定位到的位置显示点标记,默认:true showCircle: true, //定位成功后用圆圈表示定位精度范围,默认:true panToLocation: true, //定位成功后将定位到的位置作为地图中心点,默认:true zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false }) mapObj.addControl(geolocation) geolocation.getCurrentPosition() AMap.event.addListener(geolocation, 'complete', function (res) { // alert('返回定位信息:' + JSON.stringify(res)) console.log('返回定位信息:', res) callback(res) }) //返回定位信息 AMap.event.addListener(geolocation, 'error', function (res) { // alert('返回定位出错信息:' + JSON.stringify(res)) console.log('返回定位出错信息:', res) callback() }) //返回定位出错信息 }) }, // 选择孩子 selectStudent() { this.$router.push({ name: 'SelectContact', query: { limit: 1, hideParent: 1 } }) }, }, } </script> <style lang="scss" scoped> .sign_in { padding-bottom: 100px; .header { img { width: 100%; } } .base_info { width: 702px; margin: 0 auto; padding-top: 20px; .base_title { font-size: 34px; font-weight: bold; } .rate { margin-top: 20px; span { font-size: 30px; color: #ffcc00; margin-left: 30px; } } .address, .phone { font-size: 24px; color: #999; margin-top: 16px; .icon { color: #000; } } } .select_student { width: 702px; margin: 0 auto; margin-top: 30px; padding-top: 30px; border-top: 2px solid #d8d8d8; .select_tip { font-size: 30px; color: #999; } .student { position: relative; width: 532px; line-height: 78px; margin: 0 auto; margin-top: 24px; background: #f5f6fa; border-radius: 8px; font-size: 28px; text-align: center; .icon { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); } } } .btns { width: 702px; margin: 0 auto; margin-top: 100px; text-align: center; line-height: 90px; border-radius: 100px; font-size: 30px; background: #4092ff; color: #fff; } .success { padding: 40px 0; text-align: center; img { width: 30%; } h3 { font-size: 36px; } p { font-size: 30px; color: #999999; } } } </style>