新增：文章详情自定义广告

common/styles/app.base.scss

@@ -36,3 +36,120 @@
 		transform: rotateZ(360deg);
 	}
 }
+
+// 自定义广告
+
+.ad-card {
+	position: relative;
+	box-sizing: border-box;
+	padding: 24rpx;
+	box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.03);
+	background-color: #ffffff;
+	border-radius: 12rpx;
+
+	&.is-lr {
+		display: flex;
+		.ad-card_tip {
+			top: initial;
+			left: 288rpx;
+			bottom: 24rpx;
+			// right: 160rpx;
+			padding: 4rpx 20rpx;
+			background-color: transparent;
+			border: 2rpx solid #607d8b;
+			color: #607d8b;
+		}
+		.ad-card_cover {
+			width: 240rpx;
+			height: 180rpx;
+			animation: adLinkAni 1s ease-in-out infinite;
+		}
+		.ad-card_info {
+			width: 0;
+			flex-grow: 1;
+			padding-left: 24rpx;
+			&-title {
+				margin-top: 0;
+				width: 100%;
+				font-size: 30rpx;
+			}
+			&-link {
+				top: initial;
+				// right: 150rpx;
+				bottom: 0;
+				transform: scale(1);
+			}
+		}
+	}
+
+	&_tip {
+		position: absolute;
+		left: 36rpx;
+		top: 36rpx;
+		display: inline-flex;
+		box-sizing: border-box;
+		border-radius: 6rpx;
+		padding: 4rpx 10rpx;
+		background-color: rgba(0, 0, 0, 0.3);
+		color: #ffffff;
+		font-size: 24rpx;
+		z-index: 2;
+	}
+	&_cover {
+		width: 100%;
+		height: 300rpx;
+		border-radius: 6rpx;
+	}
+	&_info {
+		display: flex;
+		flex-direction: column;
+		box-sizing: border-box;
+		position: relative;
+		&-title {
+			width: calc(100% - 120rpx);
+			font-size: 28rpx;
+			font-weight: bold;
+			margin-top: 8rpx;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			color: #333;
+		}
+		&-desc {
+			margin-top: 6rpx;
+			font-size: 24rpx;
+			color: #616161;
+			line-height: 1.8;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			display: -webkit-box;
+			-webkit-box-orient: vertical;
+			-webkit-line-clamp: 2;
+		}
+		&-link {
+			position: absolute;
+			right: 0;
+			top: 6rpx;
+			display: inline-flex;
+			box-sizing: border-box;
+			border-radius: 6rpx;
+			padding: 4rpx 10rpx;
+			border: 2rpx solid #03a9f4;
+			color: #03a9f4;
+			font-size: 24rpx;
+			transform: scale(0.93);
+			// animation: adLinkAni 0.8s ease-in-out infinite;
+		}
+	}
+}
+@keyframes adLinkAni {
+	0% {
+		transform: scale(1);
+	}
+	50% {
+		transform: scale(1.02);
+	}
+	100% {
+		transform: scale(1);
+	}
+}

config/ad.config.template.js

@@ -15,6 +15,16 @@ export default {
 	},
 	// 文章详情广告
 	articleDetail: {
-		use: false, // 是否启用
+		// 微信广告/dclound申请的广告
+		use: true,
+
+		// 自定义广告
+		custom: {
+			use: true,
+			cover: 'https://b.925i.cn/uni_halo/uni_halo_ad_cover.png',
+			title: 'uni-halo 正式开源啦，欢迎来使用和体验！',
+			content: '基于 uni-app + halo1.x API 实现一款现代化的开源博客 / CMS 系统API开发的多端应用。功能包括：前台博客系统 和 后台管理系统，同时满足浏览和管理两端合一的需求，真正实现一个应用实现博客浏览和后台管理。',
+			url: 'https://uni-halo.925i.cn'
+		}
 	}
 }

pagesA/article-detail/article-detail.vue

@@ -83,7 +83,7 @@
 					:copyByLongPress="true"
 				/>
 
-				<!-- 广告区域 -->
+				<!-- 广告区域：微信/decloud申请 -->
 				<view v-if="haloAdConfig.articleDetail.use" class="ad-wrap mt-24 mb-24 ">
 					<!-- #ifdef MP-WEIXIN -->
 					<ad v-if="haloAdConfig.unitId" :unit-id="haloAdConfig.unitId"></ad>
@@ -93,6 +93,17 @@
 					<!-- #endif -->
 				</view>
 
+				<!-- 广告区域：自定义广告位 -->
+				<view class="ad-card" v-if="haloAdConfig.articleDetail.custom.use">
+					<text class="ad-card_tip">广告</text>
+					<image class="ad-card_cover" :src="haloAdConfig.articleDetail.custom.cover" mode="scaleToFill"></image>
+					<view class="ad-card_info">
+						<view class="ad-card_info-title">{{ haloAdConfig.articleDetail.custom.title }}</view>
+						<view class="ad-card_info-desc">{{ haloAdConfig.articleDetail.custom.content }}</view>
+						<view v-if="haloAdConfig.articleDetail.custom.url" class="ad-card_info-link" @click="fnToWebview(haloAdConfig.articleDetail.custom)">立即查看</view>
+					</view>
+				</view>
+
 				<!-- 版权声明 -->
 				<view v-if="copyright.use" class="copyright-wrap bg-white mt-24 pa-24 round-4">
 					<view class="copyright-title text-weight-b">版权声明</view>
@@ -684,6 +695,16 @@ export default {
 					}
 				}, 1000);
 			};
+		},
+		fnToWebview(data) {
+			uni.navigateTo({
+				url:
+					'/pagesC/website/website?data=' +
+					JSON.stringify({
+						title: data.title,
+						url: data.url
+					})
+			});
 		}
 	}
 };