<template> <view class="signIn-wrap"> <!-- 门店名称 --> <view class="module-con first-con"> <text class="info-tit">门店名称:</text> <view class="info-main"> <text class="location-addr">{{ stores && stores.name }}</text> </view> </view> <!-- 定位 --> <view class="module-con"> <text class="info-tit">当前位置:</text> <view class="info-main" @click="getLocation"> <text class="location-addr">{{ location }}</text> <u-icon name="map" color="#2979ff" size="34" class="location-icon"></u-icon> </view> </view> <!-- 拍照签到 --> <view class="module-con"> <text class="info-tit">拍照签到:</text> <view class="info-main"> <view class="photograph-con" @click="photograph ? null : goPhotograph()"> <u-icon v-show="photograph" name="close-circle-fill" color="#fa3534" size="50" class="close-circle-icon" @click="cancelPhotograph"></u-icon> <u-icon v-show="!photograph" name="camera" color="#bfbfbf" size="60" class="photograph-icon"></u-icon> <u-image v-show="photograph" width="100%" height="100%" :src="photograph" @click="previewPictures"></u-image> </view> </view> </view> <u-button type="primary" class="submit-btn" @click="signInFun">签到并开始巡店</u-button> </view> </template> <script> import { clzConfirm, saveImgToAliOss } from '@/libs/tools.js'; import { validTaskPosition } from '@/api/task.js'; export default { data() { return { stores: null, // 门店信息 location: '', // 当前位置地址 photograph: '', // 拍照临时地址 position: null // 位置信息 }; }, onShow() { this.init(); }, onLoad(opts) { this.stores = JSON.parse(opts.item); }, methods: { // 初始化 init() { this.getLocation(); }, // 获取当前位置 getLocation() { const _this = this; uni.getLocation({ type: 'gcj02', geocode: true, success: function(res) { console.log(res); _this.position = res; _this.location = res.address.province + res.address.city + res.address.district + res.address.street + res.address.streetNum +'靠近' + res.address.poiName // console.log(_this.location, '城市编码 ', res.address.cityCode) }, fail: function(error){ console.log(error) if(JSON.parse(error.errMsg.replace('getLocation:fail ','')).message){ uni.showToast({ icon: 'none', title: JSON.parse(error.errMsg.replace('getLocation:fail ','')).message }) } } }); }, // 签到拍照 goPhotograph() { const _this = this; uni.chooseImage({ count: 1, //最多可以选择的图片张数,默认9 sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有 sourceType: ['camera'], //album 从相册选图,camera 使用相机,默认二者都有 success: function(res) { // tempFilePaths 图片的本地文件路径列表,tempFiles 图片的本地文件列表,每一项是一个 File 对象 console.log(JSON.stringify(res.tempFilePaths)); saveImgToAliOss(res.tempFilePaths[0],function(ret){ console.log(ret) _this.photograph = ret.data }) } }); }, // 预览签到图 previewPictures() { const photograph = [this.photograph]; uni.previewImage({ urls: photograph }); }, // 删除签到图 cancelPhotograph() { setTimeout(() => { this.photograph = ''; }, 500); }, // 签到 signInFun() { if(!this.position || !this.position.latitude || !this.position.longitude){ uni.showToast({ icon: 'none', title: '位置获取失败,请重新定位后再进行签到' }) return }else if(!this.photograph){ uni.showToast({ icon: 'none', title: '请拍照后再进行签到' }) return } // 存储当前签到信息 this.$u.vuex('vuex_sceneTaskSignIn',{ inspectorPositionAddr: '', inspectorPositionPhotoBasePath:'', inspectorPositionPhotoPath: this.photograph }) // 判断是否超出签到范围 validTaskPosition({ storeId: this.stores.id, point: { lat: this.position.latitude, lng: this.position.longitude, } }).then(res => { if (res.status == 200) { // 跳转开始巡店 let item = this.stores // 重新开始巡店 if(item.taskId&&item.restart){ uni.navigateTo({ url: '/pages/shopTour/shopTour?storeId=' + item.id + '&taskId='+ item.taskId + '&restart=1&types=scene' }) }else{ // 首次巡店 uni.navigateTo({ url: '/pages/shopTour/shopTour?storeId=' + item.id + '&types=scene' }) } } else { uni.showToast({ icon: 'none', title: res.message }) } }); }, } }; </script> <style lang="scss" scoped> page { background-color: #f8f8f8; height: calc(100vh - 44px); } .signIn-wrap { height: 100%; background-color: #f8f8f8; .module-con { padding: 0 30upx 20upx; .info-main { margin-top: 14upx; padding: 20upx; border-radius: 12upx; background-color: #fff; .location-icon { padding-left: 10upx; vertical-align: bottom; } .photograph-con { border: 2upx dashed #bfbfbf; border-radius: 12upx; width: 160upx; height: 160upx; text-align: center; position: relative; .photograph-icon { display: inline-block; padding-top: 48upx; } .close-circle-icon { background-color: #fff; border-radius: 50%; position: absolute; right: -23upx; top: -23upx; z-index: 9; } } } } .first-con { padding-top: 30upx; } .submit-btn { width: 80%; margin-top: 50upx; } } </style>