MingGaoApp_vue/MingGaoApp/pages/index/clockDetail.vue

<template>
	<view class="clock-details">
		<view class="clock-details__header">
			<view class="clock-details__title">
				<uni-icons type="location-filled" color="#fff"></uni-icons>
				<view class="text">
					{{address || '暂未获取到具体地址'}}
				</view>
			</view>
			<view class="clock-details__title fixed-width" @click="updateCurrentLocation">
				<uni-icons :type="isPendingLocation?'spinner-cycle':'loop'" color="#fff"></uni-icons>
				<view class="text">
					重新定位
				</view>
			</view>
		</view>
		<view class="clock-details__body">
			<view class="clock-details__img-container">
				<view class="clock-details__imgs">
					<view class="clock-details__img" v-for="item,index in urllist" :key="index+item">
						<view class="icon" @click="handleRemove(index)">
							<u-icon name="close" color="#fff"></u-icon>
						</view>
						<image :src="baseUrl+item" mode="aspectFit" class="img"></image>
					</view>
					<view class="clock-details__upload" @click="chooseImage" v-if="urllist.length<3">
						<u-icon size="20" name="plus" color="#409eff"></u-icon>
					</view>
				</view>
			</view>
			<view class="clock-details__area">
				<view class="clock-details__edit-icon" v-if="!isEdit" @click="isEdit=!isEdit">
					<uni-icons type="compose" color="#1B76FF"></uni-icons>
				</view>
				<u--textarea :focus="true" v-else v-model="message" placeholder="" :maxlength="200" autoHeight
					border="none">
				</u--textarea>
			</view>
		</view>
		<view class="clock-details__footer">
			<u-button type="primary" text="签到" @click="handleClockInSubmit"></u-button>
		</view>
		<!-- <ksp-image-cutter @ok="onok" @cancel="oncancle" :url="kpsurlL" :fixed="false" :blob="false" :maxWidth="500"
			:maxHeight="500"></ksp-image-cutter> -->
		<u-loading-page loading-text="加载中..." :loading="loading" font-size="16"></u-loading-page>
	</view>
</template>

<script>
	import * as taskService from '@/service/task.js';
	import {
		Debounce
	} from "@/util/anitthro.js";
	import {
		pullAt
	} from 'lodash-es';

	export default {
		data() {
			return {
				isEdit: false,
				// latitude: 39.909,
				// longitude: 116.39742,
				latitude: 0,
				longitude: 0,
				address: '',
				taskID: '',
				message: "",
				logs: [],
				kpsurlL: '',
				urllist: [],
				loading: false,
				isPendingLocation: false,
			};
		},
		onLoad(options) {
			console.warn('clock detail ', options)
			this.message = '';
			this.urllist = [];
			this.taskID = options.taskID;
		},
		mounted() {
			console.log('mounted clock detail')
			this.updateCurrentLocation();
		},
		methods: {
			updateCurrentLocation() {
				console.log('updateCurrentLocation ')
				if (this.isPendingLocation) {
					return
				}

				this.isPendingLocation = true;
				uni.getLocation({
					type: 'gcj02',
					// altitude: true, // 高度
					geocode: true,
					success: (res) => {
						console.warn(res, 'get location')
						console.log('当前位置的经度1：' + res.longitude);
						console.log('当前位置的纬度1：' + res.latitude);

						this.logs.push(`center-position:当前位置的经度${res.longitude};当前位置的纬度${res.latitude}`)

						this.latitude = res.latitude;
						this.longitude = res.longitude;

						if (res.address) {
							const {
								country,
								province,
								city,
								district,
								street,
								streetNum,
								poiName
							} = res.address || {};
							this.address = province + city + district + street + streetNum + poiName;
						}
					},
					fail(err) {
						console.warn(err, 'get location error')
					},
					complete: () => {
						console.log('complete get location')
						this.isPendingLocation = false;
					}
				});
			},
			validate() {
				if (!this.address) {
					throw new Error('请重新获取下定位信息');
				}

				if (!this.taskID) {
					throw new Error('请返回重新进行打卡操作');
				}

				if (!this.latitude && !this.longitude) {
					throw new Error('请重新获取下定位信息');
				}

				if (!this.urllist.length) {
					throw new Error('请先拍摄图片再进行打卡');
				}

				if (!this.message) {
					throw new Error('请输入内容');
				}
			},
			// 签到提交
			handleClockInSubmit() {
				try {
					this.validate();
				} catch (error) {
					return uni.$u.toast(error.message);
				}

				this.loading = true;
				console.log(this.urllist, '------------- clock in submit')
				const payload = {
					task_id: this.taskID,
					message: this.message,
					img_list: JSON.stringify(this.urllist),
					address: this.address,
					lng: this.longitude,
					lat: this.latitude
				}
				console.warn(payload, 'clock in data');
				taskService.addTaskClockInData(payload).then(res => {
					uni.$u.toast('打卡成功');
					// TODO 返回上一页
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					})
				}).finally(() => {
					this.loading = false;
				})
			},
			chooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
					success: (res) => {
						console.log(res)
						// this.urllist.push(res.tempFilePaths[0])
						// this.kpsurlL = res.tempFilePaths[0]
						
						this.onok({path:res.tempFilePaths[0]})
					}
				});
			},
			handleRemove(index) {
				console.log(index, 'handle remove', this.urllist)
				if (index !== undefined) {
					// pullAt(this.urllist, index)
					this.urllist.splice(index, 1)
					console.log(this.urllist, 'remove finished ')
				}
			},
			oncancle() {
				this.kpsurlL = ""
			},
			onok(ev) {
				this.loading = true;
				Debounce(() => {
					uni.uploadFile({
						url: this.baseUrl +
							'/api/api_gateway?method=monitor_manage.cbd_manage.add_img', //仅为示例，非真实的接口地址
						filePath: ev.path,
						name: 'img_file',
						success: (uploadFileRes) => {
							console.log(JSON.parse(uploadFileRes.data).data.src)
							this.urllist.push(JSON.parse(uploadFileRes.data).data.src)
							console.log(this.urllist, ' upload file')
							this.kpsurlL = ""
							
							this.loading = false;
						},
						complete() {
							console.log('上传完成 1355566')
							this.loading = false;
						}
					});
				}, 1000)()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.clock-details {
		&__header {
			height: 320rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			background-image: url(~@/static/image/task/clock.png);
			background-size: 100%;
			background-repeat: no-repeat;

		}

		&__title {
			// width: 0;
			flex: 1 1 auto;
			padding: 48rpx 24rpx;
			display: flex;
			align-items: flex-start;
			font-size: 12px;
			line-height: 18px;
			color: #FFFFFF;

			.text {
				margin-left: 10rpx;
			}

			&.fixed-width {
				width: 140rpx;
				flex: 0 0 auto;
			}
		}

		&__upload {
			width: 144rpx;
			height: 144rpx;
			border: 1px dashed #409eff;
			display: flex;
			justify-content: space-around;
			margin-left: 32rpx;
			margin-bottom: 30rpx;
		}

		&__img-container {
			border-bottom: 1px solid rgba(151, 151, 151, 0.09);
			// @include hairline-bottom(rgba(151, 151, 151, 0.09));
		}

		&__imgs {
			position: relative;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			padding: 40rpx 0;
			margin-left: -32rpx;
		}

		&__img {
			flex: 0 0 auto;
			width: 198rpx;
			height: 198rpx;
			margin-left: 32rpx;
			margin-bottom: 30rpx;
			position: relative;

			.img {
				width: 100%;
				height: 100%;
			}

			.icon {
				position: absolute;
				top: -20rpx;
				right: -20rpx;
				z-index: 9;
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				display: flex;
				justify-content: space-around;
				background-color: red;
			}
		}

		&__body {
			min-height: 600rpx;
			padding: 0 24rpx;
			margin: -156rpx 24rpx 0;
			border-radius: 16rpx;
			background-color: #fff;
		}

		&__area {
			font-size: 12px;
			line-height: 18px;
			color: #656565;
			font-weight: 400;
		}

		&__edit-icon {
			padding: 24rpx 0;
		}

		&__footer {
			position: fixed;
			left: 76rpx;
			right: 76rpx;
			bottom: 110rpx;
		}
	}
</style>
<style>
	page {
		background: #F7F8FB;
	}
</style>