universal-wechat-uniapp-241007/components/user/sharePopup.vue

<template>
	<uv-popup ref="popup" :round="30">

		<view class="page">
			<view class="UniversalWall">
				<view class="logo">
					<image src="/static/image/logo.jpg" mode="aspectFill"></image>
				</view>
				<view class="wall">
					瑶都万能墙
				</view>
				<view class="invite">
					<button open-type="share">
						<uv-icon name="attach"></uv-icon>
						邀请好友
					</button>
				</view>
			</view>
			
			<view class="vip">
				
				<view class="title">
					{{ headInfo.vip.keyName }}
				</view>
				
				<uv-parse :content="headInfo.vip.keyDetails"></uv-parse>
				
				<view class="uni-color-btn"
				@click="submit">
					开通￥{{ headInfo.vip.keyValue }}
				</view>
				
			</view>
		</view>

	</uv-popup>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {}
		},
		computed : {
			...mapState(['headInfo']),
		},
		methods: {
			open() {
				this.$refs.popup.open('bottom')
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		border-radius: 15rpx;
		padding: 20rpx;
		.vip{
			.uni-color-btn{
				width: 80%;
			}
		}
		
		.UniversalWall {
			height: 100%;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			.wall {
				font-size: 30rpx;
				letter-spacing: 2px;
				color: black;
			}

			.invite {
				margin-left: auto;
				button {
					background-color: white;
					font-size: 30rpx;
					display: flex;
					width: 200rpx;
					justify-content: center;
					align-items: center;
					border-radius: 20rpx !important;
					padding: 0 !important;
					margin: 0 !important;
				}

			}

			.logo {
				width: 120rpx;
				height: 120rpx;
				margin: 20rpx;
				image {
					width: 100%;
					height: 100%;
					border-radius: 15rpx;
				}
			}
		}

	}
</style>