yuanqu_ui/work/pages/clock/outside.nvue

<template>
	<view class="setbox">
		<map
			id="container"
			class="map"
			:latitude="center.lat"
			:longitude="center.lng"
			:markers="covers"
			scale="15"
			:style="'width: 750rpx;height:' + mapheight + 'px;'"
		></map>
		<view class="mapfot">
			<view class="txt" style="flex-direction: column;" v-if="isPhoto=='Y'">
				<view class="txta">
					<view><text class="txtaa">拍照</text></view>
					<image :src="photoimg" class="photoimg" @click="getphotoFn"></image>
				</view>
				<view class="imgsur" v-if="imgurlshow">
					<image :src='imgurlshow' class="txtimg" @click="getpreviewImage"></image>
				</view>
			</view>
			<view class="txt" style="align-items: flex-start;">
				<view><text class="txtaa">备注</text></view>
				<uni-easyinput class="input" :inputBorder="false" type="textarea" autoHeight  v-model="chitext"
					placeholder="请填写原因">
				</uni-easyinput>
			</view>
			<view>
				<view class="mapfott"><text class="mapfotta">当前位置</text></view>
				<view class="mapfotx">
					<image :src="adrimg" class="mapfotxi"></image>
					<view class="mapfotxa"><text class="mapfotxaa" v-if="address">{{address}}</text></view>
				</view>
			</view>
			<view class="mapfotn" @click="getPunchFnes"><text class="mapfotna">确认打卡</text></view>
		</view>
	</view>
</template>

<script>
	import self from "@/utils/location.js"
	import {getRecordList,getPunchFn,getPunchputFn} from "@/api/work/check.js"
	import amapFile from '@/plugins/amap-wx.js';
	import {uploadPhoto} from "@/api/system/user.js"
	import config from '@/config.js'
	const baseUrl = config.baseUrl
	// #ifdef APP
	var myAmapFun = new amapFile.AMapWX({
		key: 'ccbe52b1ec5f66295fa4609c90a819b7',
		batch: true
		});
	// #endif
	export default{
		data(){
			return{
				serimg:require("@/work/static/clock/serch.png"),
				adrimg:require("@/work/static/clock/adress.png"),
				photoimg: require("@/work/static/clock/photo.png"),
				place:{
					lng:'',
					lat:'',
				},
				address:'',
				kaTime:'',
				kaYear:'',
				kaMonth:'',
				kaDay:'',
				kaWeek:'',
				gettime:'',
				timefn:'',
				isPhoto:'N',
				dakatype:'',
				recordList:[],
				mapheight:0,
				mapContext:'',
				covers: [{
					latitude: '',
					longitude: '',
					iconPath: require("@/work/static/clock/map.png"),
					anchor:{x: 0.5, y: 0.5}
				}],
				mapimg:require("@/work/static/clock/map.png"),
				center:{
					lng:'',
					lat:'',
				},
				location:'',
				imgurl:'',
				imgurlshow:'',
				//打卡参数
				formData: {
					"userId": '',
					"deptId": '',
					"ancestors":'',
					"deptName": "",
					"userName": "",
					"ancestors": "",
					"kaLog": "",
					"kaLat": "",
					"kaYear": "",
					"kaMonth": "",
					"kaDay": "",
					"kaWeek": "",
					"kaTime": "",
					"kaSort": "",
					"kaTimeAmIn": "", //打卡时间 -上午上班
					"kaTimeAmOut": "",
					"kaTimePmIn": "",
					"kaTimePmOut": "",
					"kaAddressAmIn": "", //打卡地点 上午上班
					"kaAddressAmOut": "",
					"kaAddressPmIn": "",
					"kaAddressPmOut": "",
					"kaTypeAmIn": "", //打卡类别-上午上班 1正常 2:迟到 3:外勤 4:早退
					"kaTypeAmOut": "",
					"kaTypesPmIn": "",
					"kaTypePmOut": "",
					"remarkAmIn": "", //备注 上午上班
					"remarkAmOut": "",
					"remarkPmIn": "",
					"remarkPmOut": "",
					"kaType": "",
					"kaStatus": "1", //打卡状态 1正常 2:异常
				},
				chitext:'',
			}
		},
		onLoad(e) {
			// this.isPhoto=e.isPhoto;
			// this.dakatype=e.dakatype;
			this.getcreateMap()
			// #ifdef H5
			this.center.lng=117.211954;
			this.center.lat=31.839676;
			this.covers = [];
			this.covers = [{
				latitude: '31.839676',
				longitude: '117.211954',
				iconPath: this.mapimg,
				anchor:{x: 0.5, y: 0.5}
			}]
			// #endif
		},
		onUnload() {
			clearInterval(this.timefn)
		},
		mounted() {
			this.formData.userId= this.$store.state.user.userId;
			this.formData.deptId= this.$store.state.user.deptId;
			this.formData.ancestors=this.$store.state.user.ancestors;
			this.formData.deptName=this.$store.state.user.deptName
			this.formData.userName=this.$store.state.user.userName
			this.getinfo()
			this.getlocation()
			// this.getRecordList();
			this.gettimeFn();
		},
		methods:{
			getcreateMap(){
				//mapId 就是你在 map 标签中定义的 id
				this.mapContext = uni.createMapContext('container', this);
			},
			// 获取当前屏幕信息
			getinfo(){
				var that=this;
				uni.getSystemInfo({
					success(e) {
						that.mapheight=e.windowHeight;
					},
				})
			},
			getCity(latitude, longitude) {
				var that = this;
				that.location = `${longitude},${latitude}`
			
				myAmapFun.getRegeo({
				//如果经纬度有问题会导致不进入回调方法，从而报错
					location: that.location,
					success: function(e) {
						//成功回调
						that.address='';
						that.address = e[0].regeocodeData.formatted_address; //详细地址
					},
					fail: function(info) {
						//失败回调
						console.log(info)
					}
				})
			},
			// 获取定位
			getlocation(){
				var that = this;
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						that.center.lng=res.longitude;
						that.center.lat=res.latitude;
						that.covers = [];
						that.covers = [{
							latitude: res.latitude,
							longitude: res.longitude,
							iconPath: that.mapimg,
							anchor:{x: 0.5, y: 0.5}
						}]
						// #ifdef H5
						var adr= address.province+address.city+address.district+address.street+address.streetNum+address.poiName
						// that.address=res.longitude
						that.address=adr
						// #endif
						// #ifdef APP
			
						that.getCity(res.latitude,  res.longitude)
						// #endif
			
					},
					fail: function(red) {
						uni.showToast({
							title:"获取定位失败"
						})
					},
				})
			},
			gettimeFn() {
				var that = this;
				that.time()
				that.timefn = setInterval(function() {
					that.time()
				}, 1000)
			},
			getRecordList() {
				var params = {
					deptId: this.$store.state.user.deptId,
					userId: this.$store.state.user.userId,
					kaTime: this.kaTime
				}
				getRecordList(params).then(res => {
					if (res.code == 200) {
						this.recordList=res.rows;
						if(res.rows.length){
							this.formData=res.rows[0]
						}
					} else {
						this.$modal.confirm(res.msg)
					}
				})
				// this.$toast("登录中，请耐心等待...")
			},
			// 打卡
			getPunchFnes(){
				var that=this;
				uni.redirectTo({
					url: '/work/pages/clock/success?tit=外勤打卡'
				});
				return
				
				if(that.isPhoto=='Y'&&!that.imgurl){
					uni.showToast({
						title:'请拍照上传',
						icon:'none'
					})
					return
				}
				var params=this.formData;
				params.kaTime=this.kaTime;
				params.kaYear=this.kaYear;
				params.kaMonth=this.kaMonth;
				params.kaDay=this.kaDay;
				params.kaWeek=this.kaWeek;
				params.deptName=this.$store.state.user.deptName
				params.userName=this.$store.state.user.name
				params.kaStatus=2
				var imgurl=this.imgurl;
				if(this.dakatype==1){
					params.kaTimeAmIn=this.gettime;
					params.kaAddressAmIn=this.address;
					params.kaAmInPhoto=imgurl;
					params.kaTypeAmIn=3
					params.kaSort=1;
				}else if(this.dakatype==2){
					params.kaSort=2;
					params.kaTimeAmOut=this.gettime;
					params.kaAddressAmOut=this.address;
					params.kaTypeAmOut=3
					params.kaAmOutPhoto=imgurl;
				}else if(this.dakatype==3){
					params.kaSort=3;
					params.kaTypePmIn=3
					params.kaTimePmIn=this.gettime;
					params.kaAddressPmIn=this.address;
					params.kaPmInPhoto=imgurl;
				}else{
					params.kaSort=4;
					params.kaTypePmOut=3
					params.kaTimePmOut=this.gettime;
					params.kaAddressPmOut=this.address;
					params.kaPmOutPhoto=imgurl;
				}
				if (this.recordList.length) {
					var len = this.recordList.length - 1
					params["recordId"] = this.recordList[0].recordId;
					// // 覆盖打卡
					getPunchputFn(params).then(res => {
						if (res.code == 200) {
							// 打卡成功
							// this.getRecordList()
							uni.redirectTo({
								url: '/work/pages/clock/success?tit=外勤打卡'
							});
						} else {
							this.$toast(res.msg)
						}
					})
				
				} else {
					params["recordId"] = '';
					getPunchFn(params).then(res => {
						if (res.code == 200) {
							// 打卡成功
							// this.getRecordList()
							uni.redirectTo({
								url: '/work/pages/clock/success?tit=外勤打卡'
							});
						} else {
							that.$modal.msgError(res.msg)
						}
					})
				}
			},
			time() {
				var date = new Date();
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				var d = date.getDate();
				var h = date.getHours();
				var min = date.getMinutes();
				var s = date.getSeconds();
				var week = date.getDay(); //获取当前星期X(0-6,0代表星期天)
				var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
				var yearStr = y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d) 
				var timeStr = (h < 10 ? ('0' + h) : h) + ':' + (min < 10 ? ('0' + min) : min) + ':' + (s < 10 ? (
					'0' + s) : s);
				this.kaTime = yearStr;
				this.kaYear = y;
				this.kaMonth = m < 10 ? "0" + m : m;
				this.kaDay = d < 10 ? "0" + d : d;
				this.kaWeek = week;
				this.gettime = timeStr
				// 年,月,日, 星期几 时分秒
			},
			getpreviewImage(e){
				var urlArr=[];
				urlArr[0]=this.imgurlshow;
				uni.previewImage({
							urls: urlArr,
							success: function(data) {
								console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
								},
							fail: function(err) {
								console.log(err.errMsg);
							}
				});
			},
			// 拍照
			getphotoFn(){
				var that=this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //拍照
					success: function (res) {
						const tempFilePaths = res.tempFilePaths;
						// 文件上传
						let data = {name: 'file', filePath: res.tempFilePaths[0]}
						uploadPhoto(data).then(response => {
							that.imgurlshow=baseUrl+response.fileName;
							that.imgurl=response.fileName;
							// if(!that.chiflag){
							// 	that.getPunchFnes()
							// }
						})
					}
				});
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	// .maptop{width:684rpx;height: 84rpx;background: #FFFFFF;box-shadow: 0px 0px 12rpx 0px rgba(75,75,75,0.35);border-radius: 6rpx;position: fixed;left: 34rpx;right: 34rpx;top: 24rpx;display: flex;align-items: center;padding: 0 32rpx;box-sizing: border-box;
	// image{width: 36rpx;height: 38rpx;margin-right: 16rpx;flex: 0 0 auto;}
	// input{font-size: 26rpx;color: #666666;flex: 1;}
	// }
.mapfot /deep/ .uni-easyinput__content-textarea{min-height: 84rpx;margin: 0;} 
.mapfot{position: fixed;left: 34rpx;right: 34rpx;bottom: 24rpx;background: #FFFFFF;
box-shadow: 0px 0px 12rpx 0px rgba(75,75,75,0.35);
border-radius: 6rpx;padding: 40rpx 32rpx 32rpx;min-height:300rpx;}
.mapfott{margin-bottom: 28rpx;}
.mapfotta{font-size: 28rpx;font-weight: bold;color: #343434;}
.mapfotx{display: flex;margin-bottom: 32rpx;flex-direction: row;min-height: 70rpx;}
.mapfotxi{width: 26rpx;height: 28rpx;flex: 0 0 auto;margin-right: 12rpx;}
.mapfotxa{flex: 1;line-height: 32rpx;}
.mapfotxaa{font-size: 26rpx;color: #343434;}
.photoimg{width: 46rpx;height: 40rpx;}
.txta{display: flex;align-items: center;width: 610rpx;justify-content: space-between;margin-bottom: 20rpx;flex-direction: row;}
.imgsur{width: 100%;padding-left: 80rpx;}			
.txtimg{width: 80rpx;height: 80rpx;margin: 0 12rpx 12rpx 0;}
.mapfotn{width: 610rpx;height:76rpx;background: #1678ff;border-radius: 6rpx;display: flex;align-items: center;justify-content: center;}
.mapfotna{font-size: 28rpx;color: #FFFFFF;}
.txt {
			display: flex;
			align-items: center;
			margin-bottom: 28rpx;
			flex-direction: row;
		}
.txtaa {font-size: 28rpx;color: #343434;font-weight: bold;flex: 0 0 auto;margin-right: 20rpx;}
.input {font-size: 28rpx;flex: 1;text-align: right;}
</style>