clockIn-wechat-uniapp-241018/pages/subPack/projectManage/projectManage.vue

<template>
	<view class="page">
		<uni-nav-bar dark :fixed="true" shadow background-color="var(--main-color)" status-bar left-icon="left"
		title="项目管理" @clickLeft="$utils.navigateBack" />
		
		<view class="list">
			<view class="item"
			:key="item.id"
			v-for="(item, index) in list">
				<view class="Work-List">
					<view class="label">
						项目名：
					</view>
					<view class="text">
						{{ item.name }}
					</view>
				</view>
				<view class="Work-List">
					<view class="label">
						当前团队：
					</view>
					<view class="text">
						{{ item.teamId_dictText }}
					</view>
				</view>
				<view class="Work-List">
					<view class="label">
						打卡地址：
					</view>
					<view class="text">
						{{ item.address }}
					</view>
				</view>
				<view class="Work-List">
					<view class="label">
						维度：
					</view>
					<view class="text">
						{{ item.lat }}
					</view>
				</view>
				<view class="Work-List">
					<view class="label">
						经度：
					</view>
					<view class="text">
						{{ item.lon }}
					</view>
				</view>
				<view class="btns">
					<view class="btn"
					@click="openChooseLocation(item)">
						设置打卡地点
					</view>
				</view>
			</view>
		</view>
		
		
		<uv-action-sheet 
		ref="actionSheet"
		:actions="actions" 
		@select="select"
		@close="close">
		</uv-action-sheet>
	</view>
</template>

<script>
	import mixinsList from '@/mixins/list.js'
	export default {
		mixins: [mixinsList],
		data() {
			return {
				mixinsListApi : 'clockProjectList',
				actions : [
					// {
					// 	name:'当前位置附近',
					// },
					{
						name:'项目位置附近',
						type : 'form'
					},
					{
						name:'印度尼西亚',
						lat : -6.1942,
						lon : 106.82156,
					},
					{
						name:'美国（纽约）',
						lat: 42.6511674,
						lon: -73.754968,
					},
				],
				form : {},
			}
		},
		methods: {
			openChooseLocation(item){
				this.form = item
				this.$refs.actionSheet.open()
			},
			select(e){
				if(e.lat && e.lon){
					uni.chooseLocation({
						longitude : e.lon, //经度
						latitude : e.lat, //纬度
						success : res => this.setAddress(res)
					})
				}else if(e.type == 'form' && this.form.lat && this.form.lon){
					uni.chooseLocation({
						longitude : this.form.lon, //经度
						latitude : this.form.lat, //纬度
						success : res => this.setAddress(res)
					})
				}else{
					uni.chooseLocation({
						success : res => this.setAddress(res)
					})
				}
			},
			setAddress(res){
				this.$api('clockProjectLocation', {
					id : this.form.id,
					lat : res.latitude,
					lon : res.longitude,
					address : res.address,
				},res => {
					if(res.code == 200){
						this.getData()
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						})
					}
				})
			},
			close(){},
		}
	}
</script>

<style scoped lang="scss">
.page{
	.list{
		.item{
			box-shadow: 0 0 10rpx 10rpx #00000009;
			border-radius: 25rpx;
			padding: 15rpx;
			background-color: #fff;
			font-size: 28rpx;
			position: relative;
			margin: 20rpx;
			.Work-List{
				display: flex;
				padding: 20rpx 0rpx;
				.label{
					width: 150rpx;
					flex-shrink: 0;
				}
				.text{
					flex: 1;
				}
			}
			.btns{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.btn{
					border-radius: 20rpx;
					padding: 20rpx;
					margin: 10rpx;
					background: $uni-color;
					color: #fff;
					text-align: center;
					font-size: 24rpx;
				}
			}
		}
	}
}
</style>