修改 弹出框 显示效果

src/view/home.vue

@@ -56,13 +56,17 @@
 	         	<picker :data='addressData' :columns=3 v-model='addressValue' @on-change='change' ref="picker1"></picker>
 	        </div>
 	    </popup>
+	    <div class="Loading-box">
+	    	<loading v-model="showLoading" text="loading"></loading>
+	    </div>
+	    
 	</div>
 </template>
 
 <script>
 	import homeApi from "../models/home-model.js";
 	import Swiper from '@/common/swiper';
-	import { Alert, Toast,Popup,Picker } from "vux";
+	import { Alert, Toast,Popup,Picker,Loading } from "vux";
 	import routerFooter from "../components/nav-bottom";
 	export default {
 		data() {
@@ -85,14 +89,16 @@
 			      	pagination: {
             			el: '.swiper-pagination'
           			}
-			    }
+			    },
+			    showLoading: true,
 			};
 		},
 		components: {
 			Toast,
 			Popup,
 			Picker,
-			routerFooter
+			routerFooter,
+			Loading
 		},
 		watch: {
 			
@@ -117,13 +123,15 @@
 		      	this.addressValue = name
 		   	},
 		   	getGoodsList (){
-		   		
+		   		let that = this
+		   		that.showLoading = true
 		   		var params = {
 		   			"merchantNo": this.merchantNo,
 		   			"selectedDistrictId": this.districtId
 		   		}
 		   	//	console.log(params)
 		   		homeApi.getGoods(params).then(res => {
+		   			that.showLoading = false
 					if ( res.code == 0 ){
 						this.bannerImgList = res.response.bannerImgList
 						this.promotionImgList =  res.response.promotionImgList[0] || {};
@@ -250,9 +258,11 @@
 .home .page-content .banner {
 	max-height: 3rem;
 	position: relative;
+	-webkit-overflow-scrolling: touch;
 }
 .home .page-content .banner > div {
 	max-height: 3rem;
+	-webkit-overflow-scrolling: touch;
 }
 .home .page-content .banner a {
 	display: block;
@@ -398,7 +408,11 @@
 }
 .swiper-pagination {
 	width: 100%;
-	bottom: 0;
+	height: 0.3rem;
+	bottom: 0.15rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 .swiper-pagination span {
 	width: 0.2rem;
@@ -408,4 +422,13 @@
 .swiper-pagination-bullet-active {
 	background: #5a5a5a;
 }
+.Loading-box .weui-toast {
+	width: 100%;
+	min-height: 100% !important;
+	overflow: hidden;
+	top: 0;
+}
+.Loading-box .weui-icon_toast.weui-loading {
+	margin-top: 75%;
+}
 </style>

src/view/poster.vue

@@ -22,6 +22,9 @@
 	         	<picker :data='addressData' :columns=3 v-model='addressValue' @on-change='change' ref="picker1"></picker>
 	        </div>
 	    </popup>
+	    <div class="Loading-box">
+	    	<loading v-model="showLoading" text="loading"></loading>
+	    </div>
 	</div>
 </template>
 
@@ -43,7 +46,8 @@
 				addressData: [],
 				addressValue: [],
 				no: "",
-				sourceType : ""
+				sourceType : "",
+				showLoading: false,
 			};
 		},
 		components: {
@@ -101,18 +105,15 @@
 				})
 			},
 			createPoster (){
-				//console.log(111,this.authorizeSrc)
 				if ( !this.isAuthorize ){
 					location.href = this.authorizeSrc
 					return;
 				}
-				this.$vux.loading.show({
-				 	text: 'Loading'
-				})
+				this.showLoading = true
 				var merchantNo = this.merchantNo
 				posterApi.createPoster(merchantNo).then(res => {
 					setTimeout(()=>{
-						this.$vux.loading.hide()
+						this.showLoading = false
 					},500)
 					if ( res.code == 0 ){
 		   				this.imgSrc = res.response
@@ -121,13 +122,12 @@
 						if ( res.code == 666 ){
 							setTimeout(function(){
 								location.href = '/mall/web/user/login'
-							},3000)
+							},2000)
 						}
 					}
 				})
 			},
-			getPoster2 (){
-				
+			getPoster2 (){				
 				posterApi.getPoster2(this.no).then(res => {
 					if ( res.code == 0 ){
 						this.authorizeSrc = res.data.oauthUrl || ''
@@ -151,23 +151,21 @@
 						if ( res.code == 667 ){
 							setTimeout(function(){
 								location.href = '/mall/web/user/login'
-							})
+							},2000)
 						}
 					}
 				})
 			},
-			createPoster2 (){
+			createPoster2 (){				
 				if ( !this.isAuthorize ){
 					location.href = this.authorizeSrc
 					return;
 				}
 				var no = this.no
-				this.$vux.loading.show({
-				 	text: 'Loading'
-				})
+				this.showLoading = true
 				posterApi.createPoster2({"couponNo":no}).then(res => {
 					setTimeout(()=>{
-						this.$vux.loading.hide()
+						this.showLoading = false
 					},500)
 					if ( res.code == 0 ){
 		   				this.imgSrc = res.response
@@ -175,7 +173,7 @@
 						this.$vux.toast.text(res.msg,"middle");
 						if ( res.code == 666 ){
 							setTimeout(function(){
-								location.href = '/mall/web/user/login'
+							//	location.href = '/mall/web/user/login'
 							})
 						}
 					}
@@ -313,11 +311,14 @@
 	position: fixed;
 	z-index: 100;
 }
-.weui-toast {
-	max-width: 3.5rem !important;
-	max-height: 3.5rem !important;
-	min-height: 3.5em !important;
+.Loading-box .weui-toast {
+	width: 100%;
+	min-height: 100% !important;
 	overflow: hidden;
+	top: 0;
+}
+.Loading-box .weui-icon_toast.weui-loading {
+	margin-top: 75%;
 }
 
 </style>