app-grassland/pages/lssjgl/lssjgl.vue

<template>
	<view class="sjgl">
		<uni-notice-bar color="#2979FF" background-color="#EAF2FF" text="在无网络环境时上报的数据将存储在此处,进入到有网络的环境时进行统一上报。" />

		<uni-notice-bar v-if="networkType==='none'" text="当前无法连接网络,无法进行数据上报。                                    " />
		
		<view v-for="(item,i) in datas">
			<uni-card style="padding: 0;">
				<view style="padding: 10px;">
					<custom-attr label="上报时间" :value="item.saveTime"></custom-attr>
					<custom-attr label="上报内容" :value="item.reason"></custom-attr>
					<custom-attr label="上报位置" :value="item.geom"></custom-attr>
				</view>
				<view style="margin-top: 10px;">
					<uni-row>
						<uni-col :span="24">
							<button style="color: #e64340;" @click="delItem(i)">
								移除
							</button>
						</uni-col>
					</uni-row>
				</view>
			</uni-card>
		</view>
		<view v-if="datas.length===0" style="text-align: center;color: #666;margin: 24px;">
			<text>无临时数据</text>
		</view>
		<button v-if="datas.length!==0 && networkType!=='none'" class="submit-btn" type="primary" @click="submit"
			:loading="submiting">上报所有数据</button>
	</view>
</template>

<script>
	import helper from '../../common/helper'
	export default {
		data() {
			return {
				datas: [],
				submiting: false,
				token: '',
				successDatas: [],
				networkType: null
			}
		},
		onLoad() {
			uni.getStorage({
				key: 'token',
				success: (resp) => {
					this.token = resp.data;
				},
				fail(err) {},
				complete: () => {}
			});

			uni.getNetworkType({
				success: (res) => {
					this.networkType = res.networkType;
				}
			});
		},
		onShow(e) {
			console.log('onshow', e)
			uni.getStorage({
				key: 'sbsjTemp',
				success: (resp) => {
					this.datas = resp.data;
				},
				fail(err) {},
				complete: () => {}
			})
		},
		methods: {
			_uploadFiles(index, paths, callback, resultUrls) {
				if (!resultUrls) {
					resultUrls = []
				}
				if (paths[index]) {
					uni.uploadFile({
						url: `${helper.serverUrl}/system/oss/upload`,
						method: 'POST',
						header: {
							Authorization: `Bearer ${this.token}`
						},
						files: [{
							uri: paths[index]
						}],
						// name: 'file',
						success: (resp) => {
							let data = resp.data;
							if (typeof(resp.data) === 'string') {
								data = JSON.parse(resp.data);
							}
							resultUrls.push(data.data.url)
							this._uploadFiles(++index, paths, callback, resultUrls);
						},
						fail(resp) {
							this._uploadFiles(++index, paths, callback, resultUrls);
						},
						complete: () => {}
					})
				} else {
					callback(resultUrls);
				}
			},
			_submit(index, callback, successDatas) {
				if (!successDatas) {
					successDatas = [];
				}
				if (this.datas[index]) {
					console.log(this.datas[index].imgPaths)
					this._uploadFiles(0, this.datas[index].imgPaths, (urls) => {
						console.log(urls);
						uni.request({
							url: `${helper.serverUrl}/ffzy/ffzy`,
							method: 'POST',
							data: {
								geom: this.datas[index].geom,
								img: urls.join(','),
								reason: this.datas[index].reason
							},
							header: {
								Authorization: `Bearer ${this.token}`
							},
							success: (resp) => {
								if (resp.data.code === 200) {
									successDatas.push(this.datas[index]);
								}
								this._submit(++index, callback, successDatas)
							},
							fail: () => {
								this._submit(++index, callback, successDatas)
							},
							complete: () => {}
						})

					})
				} else {
					callback(successDatas);
				}
			},
			submit() {
				if (this.datas.length === 0) {
					return;
				}
				this.submiting = true;
				this._submit(0, (successDatas) => {
					this.datas = this.datas.filter(item => {
						return successDatas.indexOf(item) === -1;
					})
					this.submiting = false;

					uni.setStorage({
						data: this.datas,
						key: 'sbsjTemp'
					})
				});
			},
			delItem(index) {
				uni.showModal({
					title: '提示',
					content: '确定删除该条数据？',
					success: (e) => {
						if (e.confirm) {
							this.datas.splice(index, 1);
							uni.setStorage({
								data: this.datas,
								key: 'sbsjTemp'
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	.submit-btn {
		height: 64px;
		background: linear-gradient(-90deg, #01C4B4, #01DC7F);
		border-radius: 47px;
		font-weight: 400;
		font-size: 30px;
		color: #FFFFFF;
		margin-top: 36px;
		line-height: 64px;
		margin: 16px;
		margin-top: 36px;
	}

	.img-btn {
		width: 16px;
		height: 16px;
		margin-right: 2px;
	}

	.sjgl>>>.uni-card__content {
		padding: 0 !important;
	}

	.sjgl>>>.uni-card {
		padding: 0 !important;
	}
</style>