分享展位

pages/shareCardPage/shareCardPage.vue

@@ -12,14 +12,29 @@
 				<image class="icon_share_copy" src="../../static/icons/icon_copy.png" mode=""></image>
 				<text class="share_txt">复制发圈</text>
 			</view>
-			<image class="shareCard" :src="shareUrl" mode="widthFix"></image>
-			
+			<image v-if="shareUrl" class="shareCard" :src="shareUrl" mode="widthFix"></image>
+			<view class="shareCard" v-else>
+				<image style="width: 100%;height: 100%;"  src="../../static/icons/share_img_zhanwei.png" mode="widthFix"></image>
+				<view class="share_card_loading">
+					<view class="loader">
+						<svg class="circular" viewBox="25 25 50 50">
+							<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
+						</svg>
+					</view>
+					
+					正在为您加载分享图
+				</view>
+			</view>
 		</view>
 		
 		<view class="share_copy_txt">
 			长按图片保存至本地
 		</view>
 		
+		<view class="share_copy_notice">
+			友情提醒，认证业主并通过后再分享才会产生相应的收益
+		</view>
+		
 	</view>
 </template>
 
@@ -177,6 +192,19 @@
 			width: 490rpx;
 			margin-top: 10rpx;
 			margin-bottom: 30rpx;
+			position: relative;
+			.share_card_loading{
+				position: absolute;
+				left: 50%;
+				top: 50%;
+				transform: translate(-50%,-50%);
+				font-size: 24rpx;
+				font-family: Verdana, Verdana-Regular;
+				font-weight: 400;
+				text-align: center;
+				color: #919191;
+				
+			}
 		}
 		
 	}
@@ -189,5 +217,92 @@
 		color: #ffffff;
 		margin-top: 40rpx;
 	}
+	
+	.share_copy_notice{
+		font-size: 22rpx;
+		font-family: Verdana, Verdana-Regular;
+		font-weight: 400;
+		text-align: center;
+		color: #919191;
+	}
+	
+	.loader {
+		position: relative;
+		margin: 0 auto;
+		width: 70rpx;
+		height: 70rpx;
+		top: 50%;
+		transform: translateY(-50%);
+	
+		&:before {
+			content: '';
+			display: block;
+			padding-top: 100%;
+		}
+	}
+	
+	.circular {
+		animation: rotate 2s linear infinite;
+		height: 100%;
+		transform-origin: center center;
+		width: 100%;
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		margin: auto;
+	}
+	
+	.path {
+		stroke-dasharray: 1, 200;
+		stroke-dashoffset: 0;
+		animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+		stroke-linecap: round;
+	}
+	
+	@keyframes rotate {
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+	
+	@keyframes dash {
+		0% {
+			stroke-dasharray: 1, 200;
+			stroke-dashoffset: 0;
+		}
+	
+		50% {
+			stroke-dasharray: 89, 200;
+			stroke-dashoffset: -35rpx;
+		}
+	
+		100% {
+			stroke-dasharray: 89, 200;
+			stroke-dashoffset: -124rpx;
+		}
+	}
+	
+	@keyframes color {
+	
+		100%,
+		0% {
+			stroke: #919191;
+		}
+	
+		40% {
+			stroke: #919191;
+		}
+	
+		66% {
+			stroke: #919191;
+		}
+	
+		80%,
+		90% {
+			stroke: #919191;
+		}
+	}
 
 </style>