patrol-gamble-mobile/index/index.vue

<template>
	<view class="content">




		<view class="tabbar">
			<view @click="getShow = true">
				<img src="../static/get.png" alt="">
				<p>上班打卡</p>
			</view>
			<view>
				<img src="../static/address.png" alt="">
				<p>签到点打卡</p>
			</view>
			<view>
				<img src="../static/up.png" alt="">
				<p>问题上报</p>
			</view>
			<view>
				<img src="../static/resolve.png" alt="">
				<p>问题处理</p>
			</view>
		</view>
		<view class="get">
			<u-popup v-model="getShow" mode="bottom" :close-icon-size="20" :border-radius="20" :closeable="true"
				:custom-style="getStyle">
				<view class="getwrap">
					<view>当前时间：{{getNowTime(date)}}</view>
					<view class="getinfo">请确认时间和地点，再打卡</view>
					<view @click="openGetConfirmShow" class="getcircle">{{getStatus?'上班打卡':'下班打卡'}}</view>
					<view class="getaddress">
						<img src="../static/dw.png" alt="">
						{{address}}
					</view>
				</view>

			</u-popup>
		</view>
		<view class="getConfirm">
			<u-modal :show-title="false" v-model="getConfirmShow" 
			:content="getConfirmContent"
			:show-cancel-button="true"
			@confirm="getConfirm"></u-modal>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				getShow: false,
				getConfirmShow:false,
				getConfirmContent:"是否确认上班打卡？",
				getStatus:true,
				getStyle: {
					left: "10rpx",
					right: "10rpx",
					bottom: "10rpx",
					width: "auto",
					borderRadius: "20rpx"
				},
				date: new Date().toISOString(),
				latitude: "",
				longitude: "",
				address: ""
			}
		},


		onReady() {
			let that = this
			uni.getLocation({
				type: "wgs84",
				geocode: true,
				success(res) {
					var loc = null
					console.log(typeof(window.android))
					if (typeof(window.android) != undefined && typeof(window.android) != "undefined") {
						loc = window.android.getLocInfo();
					}
					if (loc) {
						that.latitude = JSON.parse(loc).lat;
						that.longitude = JSON.parse(loc).lon;
					} else {
						that.latitude = res.latitude;
						that.longitude = res.longitude;
					}

					let _latlog = that.gcoord.transformFromWGSToGCJ(that.latitude, that.longitude);
					console.log(_latlog)
					const url =
						"https://apis.map.qq.com/ws/geocoder/v1/?key=PCBBZ-2Y4L5-V6AIY-Q2LHL-FSGLT-ZRBL6&location=" +
						_latlog.latitude + "," + _latlog.longitude + "&output=jsonp"
					that.$jsonp(
						url
					).then(re => {
						that.address = re.result.formatted_addresses.recommend
					})

				}
			})

		},
		onLoad() {
			let that = this;
			setInterval(function() {
				that.date = Date.parse(new Date());
			}, 1000);

		},

		methods: {
			getNowTime(time) {
				let date = new Date(time);
				let weekDay = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
				let year = date.getFullYear();
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				let weekDays = weekDay[date.getDay()]
				return year + "-" + month + "-" + day + "  " + hours + ":" + minutes + ":" + seconds + "  " + weekDays;
			},
			openGetConfirmShow(){
				this.getShow = false
				this.getConfirmShow = true
			},
			getConfirm(){
				this.getStatus = false
				this.getConfirmShow = false
				this.getConfirmContent = "是否确认下班打卡？"
			}
		}
	}
</script>
<style scoped>
	.content {}

	.tabbar {
		position: fixed;
		left: 20rpx;
		right: 20rpx;
		bottom: 20rpx;
		/* margin:30rpx; */
		padding: 20rpx 20rpx;
		background-color: #fff;
		border-radius: 40rpx;
		border: 1px solid #ddd;
		display: flex;
		justify-content: space-between;
		text-align: center;
	}

	.tabbar img {
		width: 50rpx;
		height: 50rpx
	}

	.tabbar p {
		font-size: 28rpx;
	}

	.get {
		margin: 20rpx;
		text-align: center;
	}

	.getwrap {
		padding: 60rpx;
		padding-bottom: 0rpx;
	}

	.getwrap view {
		margin-bottom: 20rpx;
	}

	.getwrap .getinfo {
		color: #000;
		font-size: 32rpx;
	}

	.getwrap .getcircle {
		width: 200rpx;
		height: 200rpx;
		border-radius: 200rpx;
		background-color: deepskyblue;
		line-height: 200rpx;
		color: #fff;
		font-size: 36rpx;
		box-shadow: 0 0 0px 4px lightskyblue;
		margin: 30rpx auto;
	}

	.getwrap img {
		width: 36rpx;
		vertical-align: sub;
		margin-right: 10rpx;
	}
</style>