sange-bridge/pages/share/index.vue

<template>
	<app-layout>
		<view class="container">
			<view class="header">
				<view class="bg"></view>
				<view class="info main-left cross-center">
					<view class="head-img">
						<u-image
								width="150"
								height="150"
								src="https://xiansin.oss-cn-shenzhen.aliyuncs.com/sange-bridge/images/sample.jpg"
								shape="circle"></u-image>
					</view>
					<view class="share-box dir-top-wrap">
						<view class="nickname">会员昵称</view>
						<view class="recommend">推荐人：大虎</view>
					</view>
				</view>
			</view>
			<view class="item-group dir-left-wrap">
				<view class="item-box dir-top-wrap cross-center main-center"
					  v-for="(item,index) in shareTool"
					  @click="handleItemClick(index)"
				>
					<view class="icon">
						<u-image
								width="90"
								height="90"
								mode="aspectFit"
								:src="item.icon"></u-image>
					</view>
					<view class="title">{{item.title}}</view>
				</view>
			</view>
		</view>

		<view class="qrcode-modal" :class="{show:qrCodeModal.show}">
			<view class="content">
				<view class="qrcode-modal-content dir-top-wrap cross-center">
					<view class="head-img">
						<u-image
								width="150"
								height="150"
								src="https://xiansin.oss-cn-shenzhen.aliyuncs.com/sange-bridge/images/sample.jpg"
								shape="circle"></u-image>
					</view>
					<view class="nickname">小星星</view>
					<u-line class="u-line" border-style="dashed" length="90%"></u-line>
					<view class="qrcode">
						<u-image
								width="350"
								height="350"
								src="https://xiansin.oss-cn-shenzhen.aliyuncs.com/sange-bridge/images/sample.jpg"
						></u-image>
					</view>
				</view>
				<u-button shape="circle"
						  @click="qrCodeModal.show = false"
						  hover-class="none"
						  :custom-style="{
					background:'linear-gradient(90deg, rgba(4,153,140,1) 0%, rgba(4,153,128,1) 100%, rgba(14,175,160,.5) 100%)',
					boxShadow: '0 0 20rpx rgba(13,239,250,.3)',
					borderColor:'none',
					color: '#ffffff',
					marginTop: '50rpx'}">确定</u-button>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import appLayout from "@/components/app-layout"
	export default {
		components:{
			appLayout,
		},
		data() {
			return {
				shareTool: [
					{icon:'/static/images/price.png',title:'佣金',url:'/pages/price/index'},
					{icon:'/static/images/withdraw.png',title:'佣金提现明细',url:'/pages/withdraw/index'},
					{icon:'/static/images/list.png',title:'推广列表',url:'/pages/share/list'},
					{icon:'/static/images/income.png',title:'收益列表',url:'/pages/income/index'},
					{icon:'/static/images/share.png',title:'推广分享',method: this.handleShare},
					{icon:'/static/images/qrcode.png',title:'推广二维码',url:'',method: this.handleQrCode},
				],
				qrCodeModal:{
					show: false
				}
			}
		},
		methods: {
			handleItemClick(index){
				let item = this.shareTool[index];
				if(typeof item.method === "function"){
					item.method();
				}else{
					this.$jump({url:item.url,type:'to'});
				}
			},
			handleQrCode(){
				this.qrCodeModal.show = true
			},
			handleShare(){
				this.$u.toast('推广分享')
			}
		}
	}
</script>
<style lang="scss" scoped>
	.container{
		padding: 0;
		.header{
			position: relative;
			padding: 0 30rpx;
			.bg{
				position: absolute;
				background: url("@/static/images/share-bg.png") no-repeat top;
				background-size: 100% 120%;
				background-position: 0 -10rpx;
				height: 240rpx;
				left: 0;
				top: 0;
				width: 750rpx;
				z-index: 0;
			}
			.info{
				height: 240rpx;
				position: relative;
				color: #ffffff;
				z-index: 1;
			}
			.share-box{
				padding: 0 30rpx;
				.nickname{
					font-size: 36rpx;
					padding: 6rpx 0;
				}
			}
		}

		.item-group{
			margin: 30rpx 0;
			.item-box{
				width: 330rpx;
				background: #ffffff;
				border-radius: 16rpx;
				margin-bottom: 30rpx;
				margin-left: 30rpx;
				height: 260rpx;
				.title{
					color: #455150;
					font-size: 28rpx;
					font-weight: bold;
					padding: 16rpx 0;
				}
			}
		}
	}
	.qrcode-modal{
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 100vh;
		background: rgba(0,0,0,.35);
		z-index: 999;
		display: none;
		animation: show-modal linear .5s;
		&.show{
			display: block;
		}
		.content{
			position: absolute;
			width: 600rpx;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			.qrcode-modal-content{
				position: relative;
				width: 100%;
				height: 50vh;
				background: url("@/static/images/share-qrcode-bg.png") no-repeat center;
				background-size: 100% 100%;
				.head-img{
					position: absolute;
					top: -75rpx;
				}
				.nickname{
					position: absolute;
					color: #ffffff;
					top: 11%;
					font-size: 36rpx;
				}
				.u-line{
					position: absolute;
					top: 28.55%;
				}
				.qrcode{
					position: absolute;
					top: 35%;
				}
			}
		}
	}
	@keyframes show-modal {
		0%{opacity: 0;}
		100%{opacity: 1;}
	}
</style>