添加防抖，提交限制

pages/index/lineDraw/lineDraw.vue

@@ -1,11 +1,13 @@
 <template>
 	<view>
+		
 		<view class="button-box">
-			<view><input v-model="lineName" placeholder="请输入线路名称" /></view>
+			
 			<button size="mini" type="primary" @click="getLocations">开始记录</button>
 			<button size="mini" type="primary" @click="stopLocation">停止记录</button>
-			<button size="mini" type="primary" @click="uploadData">提交记录</button>
+			<button size="mini" :disabled="canClick" type="primary" @click="uploadData">提交记录</button>
 		</view> 
+		<view class="line-box"><input v-model="lineName" placeholder="请输入线路名称" /></view>
 			<map :scale="3" :longitude="lon" :latitude="lat" style="width: 100%; height:100vh" :polyline="locationss"></map>
 		
 	</view>
@@ -15,8 +17,9 @@
 	export default {
 		data() {
 			return {
+				canClick:false,
 				arrs:[],
-				lineName:"",
+				lineName:null,
 				lon: 114.57,
 				lat: 38.04,
 				locationss: [
@@ -26,25 +29,27 @@
 						width: 10,
 						arrowLine: true
 					},
-					{
-						points: [
-							{ latitude: 38.044231770833335, longitude: 115.56865288628472 },
-							{ latitude: 39.044231770833335, longitude: 116.56865288628472 },
-							{ latitude: 40.044231770833335, longitude: 117.56865288628472 },
-							{ latitude: 41.044231770833335, longitude: 118.56865288628472 },
-							{ latitude: 42.044231770833335, longitude: 119.56865288628472 },
-							{ latitude: 43.044231770833335, longitude: 120.56865288628472 }
-						],
-						width: 10,
-						color: '#00aa29',
-						arrowLine: true
-					}
+					// {
+					// 	points: [
+					// 		{ latitude: 38.044231770833335, longitude: 115.56865288628472 },
+					// 		{ latitude: 39.044231770833335, longitude: 116.56865288628472 },
+					// 		{ latitude: 40.044231770833335, longitude: 117.56865288628472 },
+					// 		{ latitude: 41.044231770833335, longitude: 118.56865288628472 },
+					// 		{ latitude: 42.044231770833335, longitude: 119.56865288628472 },
+					// 		{ latitude: 43.044231770833335, longitude: 120.56865288628472 }
+					// 	],
+					// 	width: 10,
+					// 	color: '#00aa29',
+					// 	arrowLine: true
+					// }
 				],
 			};
 		},
 		methods:{
 			getLocations() {
 				let this_ = this;
+				this_.arrs = []
+				this_.locationss[0].points = []
 				uni.startLocationUpdate({
 					success: function (res) {
 						console.log(res, '开启小程序接收位置消息成功');
@@ -75,13 +80,37 @@
 			stopLocation() {
 				let this_ = this;
 				uni.stopLocationUpdate({
-					success: (res) => console.log('关闭成功', this_.locationss),
+					success: (res) =>{
+						console.log('关闭成功', this_.locationss)
+					} ,
 					fail: (err) => console.error('关闭失败：', err),
 					complete: (msg) => console.log('调用开启小程序接收位置消息 API 完成')
 				});
 			},
+			clearMap(){
+				let this_ = this;
+				this_.arrs = []
+				this_.locationss[0].points = []
+				this_.locationss = [...this_.locationss];
+			},
 			uploadData(){
 				let that = this;
+				if(that.lineName == null){
+					uni.showToast({
+						title:'名称不能为空!',
+						icon:'error'
+					})
+					return false
+				}
+				console.log(that.arrs)
+				if(that.arrs.length==0){
+					uni.showToast({
+						title:'还没开始记录线路!',
+						icon:'error'
+					})
+					return false
+				}
+				that.canClick = true
 				let line = JSON.stringify(this.arrs);
 				uni.request({
 					header: { 'Content-Type': 'application/json' },
@@ -94,7 +123,12 @@
 					success: (res) => {
 						uni.showToast({
 							title: `保存成功`
+							
 						});
+						setTimeout(()=>{
+							that.canClick=false
+							that.clearMap()
+						},3000)
 					}
 				});
 			}
@@ -109,6 +143,17 @@
 	position: fixed;
 	z-index: 999;
 	width: 100%;
+	top: 200rpx;
+}
+.line-box{
+	position: fixed;
+	line-height: 40rpx;
+	z-index: 999;
+	width: 60%;
+	left: 5%;
+	padding: 5rpx 10rpx;
 	top: 100rpx;
+	background-color: #d6d6d6;
+	color: #333;
 }
 </style>