user-lm

pages/user/user.vue

@@ -83,15 +83,15 @@
 					<image class="oitem-image" src="../../static/user/u1.png" mode=""></image>
 					<view class="oitem-font">我的好友</view>
 				</view>
-				<view class="oitem" @click="openKf()">
+				<view class="oitem" @click="openTc('popupkf')">
 					<image class="oitem-image" src="../../static/user/u2.png" mode=""></image>
 					<view class="oitem-font">联系客服</view>
 				</view>
-				<view class="oitem" @click="opentj()">
+				<view class="oitem" @click="openTc('popuptj')">
 					<image class="oitem-image" src="../../static/user/u3.png" mode=""></image>
 					<view class="oitem-font">我的邀请人</view>
 				</view>
-				<view class="oitem" @click="navTo('/pages/order/order?state=3')">
+				<view class="oitem" @click="openTc('popupcz')">
 					<image class="oitem-image" src="../../static/user/u5.png" mode=""></image>
 					<view class="oitem-font">开通联盟</view>
 				</view>
@@ -107,14 +107,14 @@
 				<view class="tit">
 					联系客服
 				</view>
-				<image src="../../static/user/kf.png" mode=""></image>
+				<image src="../../static/user/kf.png" mode="" class="kf"></image>
 				<view class="wx">
 					客服VX:{{kf}}
 				</view>
 				<view class="btn" @click="comfirm(kf)">
 					复制微信
 				</view>
-				<image src="../../static/user/close.png" mode="" class="close" @click="cancel"></image>
+				<image src="../../static/user/close.png" mode="" class="close" @click="closeTc('popupkf')"></image>
 			</view>
 		</uni-popup>
 		<uni-popup ref="popuptj" type="center">
@@ -133,7 +133,38 @@
 				<view class="btn" @click="comfirm(kf)">
 					复制ID号
 				</view>
-				<image src="../../static/user/close.png" mode="" class="close" @click="closetj()"></image>
+				<image src="../../static/user/close.png" mode="" class="close" @click="closeTc('popuptj')"></image>
+			</view>
+		</uni-popup>
+		<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>
 			</view>
 		</uni-popup>
 	</view>
@@ -179,6 +210,32 @@
 		},
 		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
+					}
+				],
 				kf: '18967672398',
 				// #ifdef APP
 				wgtinfo: {
@@ -519,24 +576,16 @@
 			closeQd() {
 				this.$refs.popupqd.close();
 			},
-			// 打开客服
-			openKf() {
-				this.$refs.popupkf.open();
-			},
-			// 关闭客服
-			cancel() {
-				this.$refs.popupkf.close();
-			},
-			opentj() {
-				this.$refs.popuptj.open()
+			openTc(name) {
+				this.$refs[name].open()
 			},
-			closetj() {
-				this.$refs.popuptj.close()
+			closeTc(name) {
+				this.$refs[name].close()
 			}
 		}
 	};
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 	.container {
 		background-image: url('../../static/user/user-bg.png');
 		background-size: 100% 100%;
@@ -815,7 +864,7 @@
 			text-align: center;
 			padding-top: 10rpx;
 		}
-		image {
+		.kf {
 			width: 249rpx;
 			height: 245rpx;
 			display: block;
@@ -825,7 +874,9 @@
 			width: 125rpx;
 			height: 125rpx;
 			border-radius: 50%;
+			display: block;
 			margin:80rpx auto 25rpx;
+			
 		}
 		.id {
 			text-align: center;
@@ -861,4 +912,81 @@
 			margin: auto;
 		}
 	}
+	.popup-box1 {
+		width: 633rpx;
+		height: 1076rpx;
+		background-image: url('../../static/user/b-tc.png');
+		.tit {
+			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;
+		}
+		.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;
+			}
+		}
+		.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;
+				}
+			}
+		}
+		.btn {
+			margin-top: 35rpx;
+		}
+	}
 </style>