add:新增公共弹窗

components/success-popup.vue

+<template>
+	<view>
+		<u-popup :closeable='closeable' v-model="modalVisible" mode="center" width="673rpx" height="567rpx">
+			<view class="success-popup">
+				<image src="../static/imgs/ic_bay_01@2x.png" mode=""></image>
+				<p>上传成功</p>
+				<text>请在个人中心查看审核状态</text>
+				<view class="close" @click="close">知道了</view>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			visible: {
+				type: Boolean,
+				default: false
+			},
+			closeable: {
+				type: Boolean,
+				default: false
+			},
+		},
+		watch: {
+			visible: {
+				handler: function(val) {
+					this.modalVisible = val;
+				},
+				immediate: true
+			}
+		},
+		data() {
+			return {
+				modalVisible: false
+			};
+		},
+		methods: {
+			close() {
+				this.$emit('update:visible', false);
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.success-popup {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+
+		image {
+			width: 108rpx;
+			height: 108rpx;
+			margin: 83rpx 0 48rpx 0;
+		}
+
+		p {
+			font-size: 36rpx;
+			font-family: OpenSans;
+			font-weight: 500;
+			color: #333333;
+			line-height: 50rpx;
+		}
+
+		text {
+			font-size: 26rpx;
+			font-family: OpenSans;
+			font-weight: 400;
+			color: #999999;
+			line-height: 37rpx;
+			margin: 16rpx 0 69rpx 0;
+		}
+
+		.close {
+			width: 440rpx;
+			height: 74rpx;
+			background: #FFC915;
+			border-radius: 4rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 28rpx;
+			font-family: OpenSans;
+			font-weight: 600;
+			color: #000000;
+			line-height: 40rpx;
+		}
+	}
+</style>

pages/home/home.vue

@@ -121,7 +121,7 @@
 				</view>
 			</view>
 		</u-popup>
-		<u-popup v-model="showUpload" mode="bottom" border-radius="16" >
+		<u-popup v-model="showUpload" mode="bottom" border-radius="16">
 			<view class="upload-popup">
 				<view class="top">上传图片</view>
 				<view class="upload-main">
@@ -137,15 +137,8 @@
 				<view class="close" @click="showUpload=false">取消</view>
 			</view>
 		</u-popup>
-		<u-popup v-model="showSuccess" mode="center" width="673rpx" height="567rpx"  >
-			<view class="success-popup">
-				<image src="../../static/imgs/ic_bay_01@2x.png" mode=""></image>
-				<p>上传成功</p>
-				<text>请在个人中心查看审核状态</text>
-				<view class="close" @click="showSuccess=false">知道了</view>
-			</view>
-		</u-popup>
-		<lottery :show="showLottery"/>
+		<success-popup :visible.sync="showSuccess" />
+		<lottery :show="showLottery" />
 		<u-popup :closeable='true' v-model="showPay" mode="center" width="673rpx">
 			<view class="popup">
 				<view class="title">
@@ -163,19 +156,21 @@
 
 <script>
 	import pageHeader from '@/components/page-header.vue';
+	import successPopup from '@/components/success-popup.vue';
 	import lottery from '@/components/lottery.vue';
 	export default {
 		components: {
 			pageHeader,
-			lottery
+			lottery,
+			successPopup
 		},
 		data() {
 			return {
-				showPay:true,
-				showLottery:false,
+				showPay: false,
+				showLottery: false,
 				show: false,
-				showUpload:false,
-				showSuccess:false,
+				showUpload: false,
+				showSuccess: true,
 				src: 'https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF',
 				number: 0,
 			};
@@ -219,7 +214,7 @@
 						});
 					}
 				});
-			
+
 			},
 			startMove() {
 				// eslint-disable-next-line
@@ -240,47 +235,10 @@
 	.app {
 		background: #f5f7f9;
 		height: 100vh;
-		.success-popup {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			image{
-				width: 108rpx;
-				height: 108rpx;
-				margin: 83rpx 0 48rpx 0;
-			}
-			p {
-				font-size: 36rpx;
-				font-family: OpenSans;
-				font-weight: 500;
-				color: #333333;
-				line-height: 50rpx;
-			}
-			text{
-				font-size: 26rpx;
-				font-family: OpenSans;
-				font-weight: 400;
-				color: #999999;
-				line-height: 37rpx;
-				margin: 16rpx 0 69rpx 0;
-			}
-			.close {
-				width: 440rpx;
-				height: 74rpx;
-				background: #FFC915;
-				border-radius: 4rpx;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				font-size: 28rpx;			
-                font-family: OpenSans;
-				font-weight: 600;
-				color: #000000;
-				line-height: 40rpx;
-			}
-		}
-        .upload-popup {
+
+		.upload-popup {
 			background-color: #F5F5F5;
+
 			.close {
 				height: 114rpx;
 				background: #FFFFFF;
@@ -293,6 +251,7 @@
 				line-height: 49rpx;
 				margin-top: 10rpx;
 			}
+
 			.top {
 				padding: 32rpx 0 37rpx 0;
 				text-align: center;
@@ -304,20 +263,23 @@
 				border-bottom: 1rpx solid #DCDCDC;
 				background-color: #FFFFFF;
 			}
+
 			.upload-main {
 				padding: 53rpx 181rpx 58rpx 174rpx;
 				display: flex;
 				align-items: center;
 				justify-content: space-between;
 				background-color: #FFFFFF;
+
 				.item {
 					display: flex;
 					flex-direction: column;
-					font-size: 28rpx;				
-                    font-family: OpenSans;
+					font-size: 28rpx;
+					font-family: OpenSans;
 					font-weight: 600;
 					color: #333333;
 					line-height: 40rpx;
+
 					image {
 						width: 54rpx;
 						height: 48rpx;
@@ -326,8 +288,10 @@
 				}
 			}
 		}
+
 		.popup {
 			padding-bottom: 80rpx;
+
 			.pay-btn {
 				width: 590rpx;
 				height: 74rpx;
@@ -343,22 +307,26 @@
 				justify-content: center;
 				margin: 0 auto;
 			}
+
 			.pay {
 				margin-top: 54rpx;
 				margin-bottom: 65rpx;
 				display: flex;
 				flex-direction: column;
 				align-items: center;
-				p{
+
+				p {
 					font-size: 70rpx;
 					font-family: OpenSans;
 					color: #333333;
 					line-height: 96rpx;
 				}
+
 				text {
 					font-size: 26rpx;
 				}
 			}
+
 			.title {
 				padding: 30rpx 35rpx;
 				border-bottom: 1rpx solid #DCDCDC;

pages/upload/upload.vue

@@ -101,6 +101,9 @@
 	.app {
 		background-color: #FFFFFF;
 
+		.wrap {
+			padding: 40rpx;
+		}
 		.upload-popup {
 			background-color: #F5F5F5;