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;">
		<image :src="cityInfo.group_share_img" style="padding-top: 70%; width: 350rpx;height: 380rpx;" show-menu-by-longpress='1' bindtap="clickImg"></image>
</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 lang="scss" scoped>

.jinqun{
	height:100%;
	position: relative;
	
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 100vh;
	.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>