yanzong_qianduan/pages/news1/jinqun.vue

<template>
	<view class="jinqun" :style="{background:`url(${$picUrl}/static/jinqun-bg1.png)`}"
		style="background-size: 100% 100%;text-align: center;">
		<view class="image-box">
			<!-- mode="heightFix" -->
			<image :src="cityInfo.group_share_img" show-menu-by-longpress='true' class="image" bindtap="clickImg"></image>
		</view><addShuiyin />
	</view>
</template>

<script>
	import * as newFunApi from '@/api/newFun'
	export default {
		data() {
			return {
				cityInfo: {}
			}
		},
		onReady() {
			this.getList();
		},
		methods: {
			async getList() {
				let {
					status,
					message,
					data
				} = await newFunApi.getStoreInfo({});
				if (status == 200) {
					this.cityInfo = data
				}
			},
			clickImg() {
				this.onShareAppMessage()
			}
		},
		/**
		 * 分享当前页面
		 */
		onShareAppMessage() {
			return {
				title: "进社群领取更多福利",
				imageUrl: this.cityInfo.group_share_img
			}
		},

		/**
		 * 分享到朋友圈
		 * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
		 * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
		 */
		onShareTimeline() {
			return {
				title: "进社群领取更多福利",
				imageUrl: this.cityInfo.group_share_img
			}
		}
	}
</script>
<style>
	page {
		width: 100% !important;
		height: 100%;
		background-color: #E2b257;
	}
</style>
<style lang="scss" scoped>
	.jinqun {
		.image-box {
			overflow: hidden;
			width: 335rpx;
			height: 335rpx;
			margin: 485rpx auto 0 auto;
			.image {
				width: 100%;
				height: 100%;
			}
		}

		overflow: hidden;
		height:100%;
		// position: relative;
		background-repeat: no-repeat;
		background-size: cover;
		height: 1325rpx;

		.flag {
			position: absolute;
			top: 0;
			left: 0;

			.flagContent {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 96px;
					height: auto;
				}

				text {
					position: absolute;
					font-size: 32upx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #E92214;
				}
			}
		}

		.topicText {
			font-size: 80upx;
			font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
			font-weight: 400;
			text-align: center;
			background: linear-gradient(180deg, #FFFFFF 0%, #FAE0BC 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			padding-top: 150upx;
		}

		.subTopicText {

			font-size: 50upx;
			font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			-webkit-background-clip: text;
			// -webkit-text-fill-color: transparent;
			margin-top: 20upx;
		}

		.qcode {
			width: 400upx;
			height: 300upx;
			margin: 160upx auto;
			border: 1px solid red;

			image {
				width: 100%;
				height: 140%;
			}
		}

		.submitBtn {
			width: 340upx;
			height: 90upx;
			background: linear-gradient(180deg, #FEE6A8 0%, #FCC96E 100%);
			border-radius: 39px 39px 39px 39px;
			opacity: 1;
			font-size: 40upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #E92214;
			line-height: 90upx;
			text-align: center;
			margin: 0 auto;
			position: relative;

			button {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
				opacity: 0;
			}
		}

		.fuli {
			margin: 60upx;
			background-color: #fff;
			border-radius: 14upx;

			.fuliTitle {
				width: 137px;
				height: 35px;
				background: #3A393E;
				opacity: 1;
				margin: 0 auto;
				border-radius: 0 0 20px 20px;
				color: #FFFFFF;
				text-align: center;
				line-height: 35px;
				font-size: 32upx;
			}

			.fuliContent {
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding: 50upx 0;

				.fuliItem {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					image {
						height: 100upx;
						width: auto;
					}

					text {
						font-size: 28upx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #E92214;
						margin-top: 12upx;
					}
				}
			}

		}
	}
</style>