xc/pages/user/lm.vue

<template>
	<view class="content">
		<image src="../../static/user/lm/lm-bg.png" mode="widthFix" class="lm-bg"></image>
		<view class="lm-btn flex">
			<image src="../../static/user/lm/join.png" mode="" class="btn-1" @click="openTc('popupcz')"></image>
			<image src="../../static/user/lm/vip.png" mode="" class="btn-1" @click="openTc('popupvip')"></image>
		</view>
		<view class="title">
			联盟列表
		</view>
		<view class="item flex" v-for="item in 10">
			<image src="" mode="" class="logo"></image>
			<view class="name clamp">
				上海本地联盟上海本地联盟上海本地联盟上海本地联盟
			</view>
			<view class="val">
				203人
			</view>
		</view>
		<uni-popup ref="popupcz" type="center">
			<view class="popup-box popup-box1">
				<view class="tit">
					成为城主
				</view>
				<view class="jj">
					成为城主后可以随时解除城主身份，取消后<br>7个工作日内若无任何经济纠纷，<br>质押的矿石将退回。
				</view>
				<view class="item flex" v-for="(item,index) in lmList">
					<image :src="'../../static/user/lm' + index + '.png'" mode="" class="logo"></image>
					<view class="dec">
						<text>{{item.level}}</text>{{item.dec}}
					</view>
					<view class="check">
						<image src="../../static/user/select.png" mode="" class="schecked" v-if="item.checked"></image>
						<view class="nocheck" v-else>
							
						</view>
					</view>
				</view>
				<view class="yue">
					<image src="../../static/index/index/icon01.png" mode=""></image>
					<view class="">
						 拥有矿石 <text>10000</text> 个，开通需 <text>10000</text> 个
					</view>
				</view>
				<view class="btn">
					确认开通
				</view>
				<image src="../../static/user/close.png" mode="" class="close" @click="closeTc('popupcz')"></image>
			</view>
		</uni-popup>
		<uni-popup ref="popupvip" type="center">
			<view class="popup-box1 popup-box2">
				<view class="tit">
					开通VIP
				</view>
				<image src="../../static/user/lm/huanguan.png" mode="" class="hg"></image>
				
				<view class="tit" style="letter-spacing: 0;">
					会员VIP
				</view>
				<view class="gg">
					购买VIP免除广告30天
				</view>
				<view class="yue">
					<image src="../../static/index/index/icon01.png" mode=""></image>
					<view class="">
						 拥有矿石 <text>10000</text> 个，开通需 <text>10000</text> 个
					</view>
				</view>
				<view class="btn">
					确认开通
				</view>
				<image src="../../static/user/close.png" mode="" class="close" @click="closeTc('popupvip')"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lmList: [
					{
						level: '领主',
						dec: '（质押 10 万矿石 获得转赠手续费 5%）',
						id: 1,
						checked: false
					},
					{
						level: '一级城主',
						dec: '（质押 3 万矿石 获得转赠手续费 3% , 获得 2 级城主转赠收费 10%）',
						id: 1,
						checked: false
					},
					{
						level: '二级城主',
						dec: '（质押 1万矿石 获得转赠手续费 2%, 由 1 级城主推荐获得 3 级城主转赠手续费收益)',
						id: 1,
						checked: false
					},
					{
						level: '三级城主',
						dec: '（质押 5000矿石 获得转赠手续费 2% , 由 2 级城主推荐）',
						id: 1,
						checked: false
					}
				],
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		onReachBottom() {
			
		},
		onReady() {
			
		},
		methods: {
			openTc(name) {
				this.$refs[name].open()
			},
			closeTc(name) {
				this.$refs[name].close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.lm-bg {
		width: 100%;
		vertical-align: middle;
	}
	.item {
		width: 718rpx;
		height: 151rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin:0 auto 22rpx;
		padding: 0 52rpx 0 28rpx;
		font-weight: bold;
		font-size: 29rpx;
		color: #222222;
		.logo {
			width: 95rpx;
			height: 95rpx;
			border-radius: 10rpx;
			background-color: #f9f9f9;
			flex-shrink: 0;
		}
		.name {
			flex-grow: 1;
			padding-left: 22rpx;
		}
		.val {
			font-size: 25rpx;
			color: #222222;
			flex-shrink: 0;
		}
	}
	.lm-btn {
		padding: 28rpx;
		background-color: #fff;
		.btn-1 {
			width: 336rpx;
			height: 162rpx;
			border-radius: 20rpx;
		}
	}
	.title {
		font-weight: 800;
		font-size: 29rpx;
		color: #222222;
		padding: 10rpx 0 20rpx 35rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
	}
	.popup-box1 {
		width: 633rpx;
		height: 1076rpx;
		background-image: url('../../static/user/b-tc.png');
		background-size: 100% 100%;
		position: relative;
		.tit {
			font-weight: bold;
			font-size: 44rpx;
			color: #222222;
			text-align: center;
			padding-top: 10rpx;
			letter-spacing: 10rpx;
		}
		.jj {
			padding: 70rpx 60rpx 30rpx 65rpx;
			font-weight: bold;
			font-size: 22rpx;
			color: #000000;
			line-height: 31rpx;
			text-align: center;
			letter-spacing: 5rpx;
		}
		
		.item {
			width: 536rpx;
			height: 114rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin:20rpx auto;
			padding: 0 18rpx 0 24rpx;
			.logo {
				width: 70rpx;
				height: 68rpx;
				flex-shrink: 0;
			}
			.dec {
				flex-shrink: 0;
				width: 335rpx;
				text {
					font-weight: 800;
					font-size: 27rpx;
					color: #000000;
				}
				font-size: 20rpx;
				color: #969696;
			}
			.check {
				flex-shrink: 0;
				.schecked {
					width: 40rpx;
					height: 40rpx;
				}
				.nocheck {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					border: 2px solid #3C4192;
				}
			}
		}
		
		.close {
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			left: 0;
			right: 0;
			bottom: -110rpx;
			margin: auto;
		}
	}
	.btn {
		width: 330rpx;
		line-height: 77rpx;
		background: linear-gradient(268deg, rgba(113,87,185,0.99), #8667C3, #7258B9);
		border-radius: 10rpx;
		margin:35rpx auto 0;
		text-align: center;
		font-weight: bold;
		font-size: 35rpx;
		color: #FFFFFF;
	}
	.yue {
		display: flex;
		width: 100%;
		justify-content: center;
		image {
			width: 43rpx;
			height: 34rpx;
			margin: 0;
		}
		view {
			padding-left: 10rpx;
		}
		font-weight: bold;
		font-size: 25rpx;
		color: #222222;
		text-align: center;
		text {
			color: #3C4192;
		}
	}
	.popup-box2 {
		width: 633rpx;
		height: 823rpx;
		background-image: url('../../static/user/lm/tc-vip.png');
		.hg {
			width: 256rpx;
			height: 234rpx;
			display: block;
			margin:68rpx auto 35rpx;
		}
		.gg {
			font-weight: bold;
			font-size: 29rpx;
			color: #000000;
			text-align: center;
			padding-bottom: 58rpx;
		}
	}
</style>