distribution-uni/package1/staff/clock.vue

<template>
	<view>
		<view class="" v-if="peopleType=='1'">
			<view class="status">当前状态：{{value}}</view>
			<view class="clock-button" :class="{isClock:isClock}" type="success" @click="onClock">打卡</view>
		</view>
		<view class="" v-else>
			<uni-section class="mb-10" title="时间选择" type="line">
				<uni-datetime-picker v-model="range" type="daterange" />
			</uni-section>
			<uni-card title="打卡情况">
				<uni-list>
					<uni-list-item direction="row" v-for="(item , index) in staffList" :key="index">
						<template #body>
							<view class="tag-wrap">
								<view v-if="item.departmentTitle">
									<u-tag :text="item.departmentTitle" size="12" />
								</view>
							</view>
						</template>
						<template #header>
							<view class="avatar-wrap">
								<!-- <u-avatar :src="item.avatar" size="24">
								</u-avatar> -->
								<text class="staff-name">{{ item.nickname }}</text>
							</view>
						</template>
						<template #footer>
							<view style="font-size: 24rpx;">
								<text style="margin-right: 10px;">正常:20</text>
								<text style="margin-right: 10px;">迟到:<text style="color: red;">2</text></text>
								<text>早退:<text style="color: red;">3</text></text>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</uni-card>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				value: '未打卡',
				isClock: false,
				peopleType: '0',
				staffList:[]
			}
		},
		computed: mapState(['userId']),
		onLoad() {
			//明珠A  116.805796,38.335286
			//明珠D  116.806408,38.338111
			//明珠B  116.806913,38.336937
			//明珠C  116.80562,38.337177
			//明珠早市精品二合一给一个大的范围  116.810029,38.335321
			this.peopleType = uni.getStorageSync('type')
			if(this.peopleType == 0){
				this.getStaffList()
			}
			
		},
		methods: {
			getStaffList() {
				this.tui.request('/app/common/user/findAllUserByShopId', 'get', {}, false, false, true).then((res) => {
					if (res.code !== 200) return
					this.staffList = res.result
				})
			},
			onClock() {
				uni.getLocation({
					type: 'wgs84',
					isHighAccuracy:true,
					accuracy:'best',
					success: function (res) {

					}
				});
				// if (!this.isClock) {
				// 	this.tui.request("/app/clockIn/", "get", {
				// 		userId: this.userId
				// 	}, false, true).then((res) => {
				// 		if (res.code == 200) {
				// 			this.tui.toast('打卡成功', 2000, true)
				// 			this.value = '已打卡'
				// 			this.isClock = true
				// 		} else {
				// 			this.tui.toast(res.message)
				// 		}
				// 	})
				// }
			}
		}
	}
</script>

<style lang="scss">
	.status {
		font-size: 40upx;
		color: #333333;
		text-align: center;
		padding: 80upx;
	}

	.clock-button {
		width: 200upx;
		height: 200upx;
		line-height: 200upx;
		border-radius: 200upx;
		text-align: center;
		background-color: #5fd9ee;
		color: #fef0f0;
		font-size: 56upx;
		margin: 50upx auto;
	}

	.isClock {
		background: grey;
	}

	.tag-wrap {
		width: 100rpx;
		flex: 1;
		display: flex;

		view {
			margin: 0 2upx;
		}
	}

	.avatar-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24upx;
	}
</style>