Prechádzať zdrojové kódy

订单页数据加载优化

@dongkboy 3 týždňov pred
rodič
commit
212ebf88f7

+ 43 - 24
pages/orders/orders1.vue

@@ -287,6 +287,13 @@
 				</view>
 			</template>
 		</uni-PopupMessage>
+		<!-- 自定义加载动画 -->
+		<u-overlay :show="loadingShow" style="background-color: rgba(255, 255, 255, 0.9);">
+			<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>
 	</view>
 </template>
 
@@ -301,6 +308,8 @@
 	export default {
 		data() {
 			return {
+				loadingShow: false, //loading
+				loadingText: "加载中", //加载文字
 				cloudPopupName: "", //选中搜索字段名称
 				fieldName: "", //搜索字段Field
 				SearchText: "",
@@ -468,12 +477,16 @@
 			}
 		},
 		async onShow() {
-			this.getDicType("insurance_type"); //车船税类型
-			await this.esmInsCompany();
-			await this.getsubOrdersList();
-			console.log(this.pageRequest);
-			console.log(this.cloudPopupName);
-			console.log(this.fieldName);
+			this.loadingShow = true;
+			try {
+				this.getDicType("insurance_type"); //车船税类型
+				await this.esmInsCompany();
+				await this.getsubOrdersList();
+				this.loadingShow = false;
+			} catch {
+				this.loadingShow = false;
+			}
+
 
 		},
 		onLoad() {},
@@ -852,24 +865,30 @@
 			},
 			// tabs状态切换
 			async tabClick(e) {
-				if (e.name == '全部') {
-					this.pageRequest.orderStatus = null;
-					this.statusCurrent = e.index;
-					this.pageRequest.parentId = '0';
-					this.pageRequest.isLargeOrder = '1';
-					await this.getsubOrdersList(1, 20);
-				} else {
-					this.pageRequest.orderStatus = e.value;
-					this.statusCurrent = e.index;
-					this.pageRequest.parentId = '1';
-					delete this.pageRequest.isLargeOrder
-					await this.getsubOrdersList(1, 20)
-				}
-				if (this.scrollTop > 0) {
-					uni.pageScrollTo({
-						selector: 'content-body', // 滚动到顶部
-						duration: 100, // 动画时长(ms)
-					});
+				this.loadingShow = true;
+				try {
+					if (e.name == '全部') {
+						this.pageRequest.orderStatus = null;
+						this.statusCurrent = e.index;
+						this.pageRequest.parentId = '0';
+						this.pageRequest.isLargeOrder = '1';
+						await this.getsubOrdersList(1, 20);
+					} else {
+						this.pageRequest.orderStatus = e.value;
+						this.statusCurrent = e.index;
+						this.pageRequest.parentId = '1';
+						delete this.pageRequest.isLargeOrder
+						await this.getsubOrdersList(1, 20)
+					}
+					if (this.scrollTop > 0) {
+						uni.pageScrollTo({
+							selector: 'content-body', // 滚动到顶部
+							duration: 100, // 动画时长(ms)
+						});
+					}
+					this.loadingShow = false;
+				} catch {
+					this.loadingShow = false;
 				}
 
 			},

+ 4 - 4
pages/quote/ePolicy.vue

@@ -1,8 +1,8 @@
 <template>
 	<view class="page">
-		<image class="back" :src="detailbackimg" mode=""></image>
+		<image class="ePolicy-back" :src="detailbackimg" mode=""></image>
 		<uni-NavBar headerTitle="电子保单" background="transparent" :isShared="false" :isSlot="false"></uni-NavBar>
-		<view class="tabs ">
+		<view class="ePolicy-tabs ">
 			<text v-for="(item,index) in tabslist" :key="index" @click="tabclick(item)"
 				:class="{active:tabsvalue===item.name}">{{item.name}}</text>
 		</view>
@@ -177,7 +177,7 @@
 <!--使用scss,只在本组件生效-->
 <style lang="scss" scoped>
 	/* 背景图 */
-	.back {
+	.ePolicy-back {
 		width: 100%;
 		height: 256rpx;
 		position: fixed;
@@ -186,7 +186,7 @@
 		z-index: 9999;
 	}
 
-	.tabs {
+	.ePolicy-tabs {
 		position: fixed;
 		top: 180rpx;
 		left: 0;

+ 2 - 2
pages/quote/modules/insuranceInfo.vue

@@ -126,7 +126,7 @@
 					</view>
 				</view>
 				<!-- 客户权益 -->
-				<view class="customerRights dis a-c mt-2" @click="customerRightsDetail">
+				<view class="customerRights dis a-c mt-2" @click="customerRightsDetail" v-if="insFeeOrders">
 					<text class="title">客户权益</text>
 					<text class="customerRights-price">¥{{insFeeOrders.availableAmount}}</text>
 					<u-icon name="arrow-right" color="#2B313D" size="14"></u-icon>
@@ -141,7 +141,7 @@
 				</view>
 			</view>
 		</view>
-		<view class="tab dis f-c">
+		<view class="tab dis f-c" v-if="insFeeOrders">
 			<view class="header-title dis a-c j-s"
 				style="background: linear-gradient( 180deg, #F3F9FF 0%, #FFFFFF 100%)">
 				<text>费用信息</text>

+ 2 - 0
style/zcm-main.css

@@ -1236,6 +1236,8 @@ uni-page {
 .footerfixed,
 .equity-dropdown-content,
 .paymentCode-back,
+.ePolicy-back,
+.ePolicy-tabs,
 .uni-navbar {
 	max-width: 375px;
 	margin: 0 auto;