Selaa lähdekoodia

封装全局loading组件

@dongkboy 3 viikkoa sitten
vanhempi
commit
8207572a30

+ 25 - 0
components/global-loading/global-loading.vue

@@ -0,0 +1,25 @@
+<template>
+	<u-overlay :show="show" style="background-color: rgba(255, 255, 255, 0.6);z-index: 999999;">
+		<view class="dis f-c a-c j-c " style="height: 100%;">
+			<u-loading-icon></u-loading-icon>
+			<text style="color: #909399;" class="mt-1">{{ text }}</text>
+		</view>
+	</u-overlay>
+</template>
+
+<script>
+	export default {
+		name: 'global-loading',
+		props: {
+			show: {
+				type: Boolean,
+				default: false
+			},
+			// loading提示文字,页面可自定义传入
+			text: {
+				type: String,
+				default: '加载中'
+			}
+		}
+	}
+</script>

+ 1 - 6
pages/orders/orders1.vue

@@ -288,12 +288,7 @@
 			</template>
 		</uni-PopupMessage>
 		<!-- 自定义加载动画 -->
-		<u-overlay :show="loadingShow" style="background-color: rgba(255, 255, 255, 0.8);z-index: 999999;">
-			<view class="dis f-c a-c j-c " style="height: 100%;">
-				<u-loading-icon></u-loading-icon>
-				<text style="color: #909399;" class="mt-1">{{loadingText}}</text>
-			</view>
-		</u-overlay>
+		<global-loading :show="loadingShow" :text="loadingText"></global-loading>
 	</view>
 </template>
 

+ 1 - 6
pages/quote/paymentCode.vue

@@ -83,12 +83,7 @@
 		</view>
 		<!-- #endif -->
 		<!-- 自定义加载动画 -->
-		<u-overlay :show="loadingShow" style="background-color: rgba(255, 255, 255, 0.6);">
-			<view class="dis f-c a-c j-c " style="height: 100%;">
-				<u-loading-icon></u-loading-icon>
-				<text style="color: #909399;" class="mt-1">{{loadingText}}</text>
-			</view>
-		</u-overlay>
+		<global-loading :show="loadingShow" :text="loadingText"></global-loading>
 	</view>
 </template>
 <script>

+ 1 - 13
pages/quote/premiumCalc1.vue

@@ -382,13 +382,6 @@
 				</view>
 			</template>
 		</uni-Popup>
-		<!-- 自定义加载动画 -->
-		<u-overlay :show="loadingShow" style="background-color: rgba(255, 255, 255, 0.6);">
-			<view class="dis f-c a-c j-c " style="height: 100%;">
-				<u-loading-icon></u-loading-icon>
-				<text style="color: #909399;" class="mt-1">加载中</text>
-			</view>
-		</u-overlay>
 		<!-- 交强起保日期 -->
 		<u-datetime-picker :show="jqstartShow" v-model="jqstartvalue" mode="datetime" :formatter="formatter"
 			@cancel="jqstartShow = false" @close="jqstartShow = false" :closeOnClickOverlay="true" @confirm="jqstartconfirm"
@@ -398,12 +391,7 @@
 			@cancel="systartShow = false" @close="systartShow = false" :closeOnClickOverlay="true" @confirm="systartconfirm"
 			confirmText="确定"></u-datetime-picker>
 		<!-- 自定义加载动画 -->
-		<u-overlay :show="loadingShow" style="background-color: rgba(255, 255, 255, 0.6);">
-			<view class="dis f-c a-c j-c " style="height: 100%;">
-				<u-loading-icon></u-loading-icon>
-				<text style="color: #909399;" class="mt-1">{{ loadingText }}</text>
-			</view>
-		</u-overlay>
+		<global-loading :show="loadingShow" :text="loadingText"></global-loading>
 	</view>
 </template>
 

+ 1 - 6
pages/quote/quoteDetail.vue

@@ -270,12 +270,7 @@
 		<u-loading-page :loading="loading" style="z-index: 999999;" loading-text="核保中" bg-color="rgb(0 ,0 ,0 ,0.4)"
 			color="#fff"></u-loading-page>
 		<!-- 自定义加载动画 -->
-		<u-overlay :show="loadingShow" style="background-color: rgba(255, 255, 255, 0.6);">
-			<view class="dis f-c a-c j-c " style="height: 100%;">
-				<u-loading-icon></u-loading-icon>
-				<text style="color: #909399;" class="mt-1">{{loadingText}}</text>
-			</view>
-		</u-overlay>
+		<global-loading :show="loadingShow" :text="loadingText"></global-loading>
 	</view>
 </template>
 <script>

+ 1 - 6
pages/quote/quoteInfo.vue

@@ -118,12 +118,7 @@
 			@applicantInfoCallback="applicantInfoCallback" @InsuredInfoCallback="InsuredInfoCallback">
 		</uni-OCRUploadPopup>
 		<!-- 自定义加载动画 -->
-		<u-overlay :show="loadingShow" style="background-color: rgba(255, 255, 255, 0.6);">
-			<view class="dis f-c a-c j-c " style="height: 100%;">
-				<u-loading-icon></u-loading-icon>
-				<text style="color: #909399;" class="mt-1">{{loadingText}}</text>
-			</view>
-		</u-overlay>
+		<global-loading :show="loadingShow" :text="loadingText"></global-loading>
 	</view>
 </template>
 

+ 2 - 7
pages/quote/quoteRecordDetail.vue

@@ -563,12 +563,7 @@
 			@copyLink="copyLink" @saveToAlbum="saveToAlbum" @closeModal="shareShow = false">
 		</uni-share>
 		<!-- 自定义加载动画 -->
-		<u-overlay :show="loadingShow" style="background-color: rgba(255, 255, 255, 0.6);">
-			<view class="dis f-c a-c j-c " style="height: 100%;">
-				<u-loading-icon></u-loading-icon>
-				<text style="color: #909399;" class="mt-1">{{loadingText}}</text>
-			</view>
-		</u-overlay>
+		<global-loading :show="loadingShow" :text="loadingText"></global-loading>
 	</view>
 </template>
 <script>
@@ -810,7 +805,7 @@
 					const navDelay = 1000; //成功后「正在前往支付页面」展示时长(毫秒)
 					// 查询前:loading「查询支付码中」转1秒再请求接口
 					await new Promise(resolve => setTimeout(resolve, preDelay));
-					let qrCode = await this.$http.get('/order/qrCode/getQrCode?orderNo=' + this.ordersNo);
+					let qrCode = await this.$http.get('/order/qrCode/getQrCode?orderNo=' + encodeURIComponent(this.ordersNo));
 					if (qrCode.code == '200') {
 						// 成功后:loading文字改为"正在前往支付页面",再转1秒后跳转
 						this.loadingText = "正在前往支付页面";

+ 1 - 6
pages/quote/selectInsuranceCompany.vue

@@ -55,12 +55,7 @@
 			</view>
 		</view>
 		<!-- 自定义加载动画 -->
-		<u-overlay :show="loadingShow" style="background-color: rgba(255, 255, 255, 0.6);">
-			<view class="dis f-c a-c j-c " style="height: 100%;">
-				<u-loading-icon></u-loading-icon>
-				<text style="color: #909399;" class="mt-1">{{loadingText}}</text>
-			</view>
-		</u-overlay>
+		<global-loading :show="loadingShow" :text="loadingText"></global-loading>
 	</view>
 </template>
 

+ 1 - 6
pages/reward/benefitPackage.vue

@@ -149,12 +149,7 @@
 		<uni-areaCascadePicker :show="addressPickershow" @confirm="addressConfirm" @close="areaCascadeClose"
 			@cancel="addressPickershow = false"></uni-areaCascadePicker>
 		<!-- 自定义加载动画 -->
-		<u-overlay :show="loadingShow" style="background-color: rgba(255, 255, 255, 0.6);">
-			<view class="dis f-c a-c j-c " style="height: 100%;">
-				<u-loading-icon></u-loading-icon>
-				<text style="color: #909399;" class="mt-1">{{ loadingText }}</text>
-			</view>
-		</u-overlay>
+		<global-loading :show="loadingShow" :text="loadingText"></global-loading>
 	</view>
 </template>
 

+ 1 - 6
pages/reward/benefitSingleItem.vue

@@ -169,12 +169,7 @@
 		<uni-areaCascadePicker :show="addressPickershow" @confirm="addressConfirm" @close="areaCascadeClose"
 			@cancel="addressPickershow = false"></uni-areaCascadePicker>
 		<!-- 自定义加载动画 -->
-		<u-overlay :show="loadingShow" style="background-color: rgba(255, 255, 255, 0.6);">
-			<view class="dis f-c a-c j-c " style="height: 100%;">
-				<u-loading-icon></u-loading-icon>
-				<text style="color: #909399;" class="mt-1">{{ loadingText }}</text>
-			</view>
-		</u-overlay>
+		<global-loading :show="loadingShow" :text="loadingText"></global-loading>
 	</view>
 </template>
 

+ 1 - 6
pages/reward/customerBenefit.vue

@@ -229,12 +229,7 @@
 			</template>
 		</uni-Popup>
 		<!-- 自定义加载动画 -->
-		<u-overlay :show="loadingShow" style="background-color: rgba(255, 255, 255, 0.6);">
-			<view class="dis f-c a-c j-c " style="height: 100%;">
-				<u-loading-icon></u-loading-icon>
-				<text style="color: #909399;" class="mt-1">{{loadingText}}</text>
-			</view>
-		</u-overlay>
+		<global-loading :show="loadingShow" :text="loadingText"></global-loading>
 	</view>
 </template>