powerbank/pages/agentpages/shopguanli/member/chakan/index.vue

<template>
	<view class="page">
		<u-navbar title="查看会员" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
			height='38'></u-navbar>
        <view class="box">
        	<view class="listobj">
        		<view class="inp">
        			会员名额 <input type="text" placeholder="10" /> /人
        		</view>
				<view class="inp">
					免费次数 <input type="text" placeholder="10" /> /天
				</view>
				<view class="inp">
					免费时长 <input type="text" placeholder="10" /> 小时
				</view>
				<view class="addvip">
					<view class="">
						扫码添加
					</view>
					<view class="" @click="btnaddid">
						用ID添加VIP
					</view>
				</view>
				<view class="xian"></view>
				<view class="vipry">
					<view class="tit">
						VIP人员
					</view>
					<view class="listvip" v-for="(item,index) in 3" :key="index">
						<text>11111888856</text> <text style="text-decoration: underline;" @click="btndel">删除</text>
					</view>
				</view>
        	</view>
			<view class="baocun">
				保存
			</view>
			
			<!-- 弹窗 -->
			<view class="tanc" v-if="vipflag">
				<view class="tit">ID即为登录小程序的手机号</view>
				<input type="text" />
				<view class="xian"></view>
				<view class="anniu">
					<text @click="btnqx">取消</text> <text style="border-left: 1px solid #D8D8D8;color: #25CE88;">确定</text>
				</view>
			</view>
			<view class="mask" v-if="vipflag"></view>
			
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                vipflag:false,
			}
		},
		methods: {
            btndel(){
				uni.showModal({  
				    title: '提示',  
				    content: '确认删除该用户？',  
				    showCancel: true, 
				    cancelText: '取消',
				    confirmText: '确定',
				    success: function (res) {  
				        if (res.confirm) {  
				            console.log('用户点击了确定');  
				        } else if (res.cancel) {  
				            console.log('用户点击了取消');  
				        }  
				    }  
				});
			},
			btnaddid(){
				this.vipflag = true
			},
			btnqx(){
				this.vipflag = false
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg, #25CE88 0%, rgba(255, 255, 255, 0) 100%);
	}

	.page {
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
		.box{
			width: 750rpx;
			height: 1440rpx;
			background: #F4F5F7;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding-top: 40rpx;
			.mask{
				width: 750rpx;
				height: 100vh;
				background: #000000;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				opacity: 0.2;
				z-index: 1;
				position: fixed;
				top: 0;
				left: 0;
			}
			.tanc{
				width: 610rpx;
				height: 282rpx;
				background: #FFFFFF;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				position: fixed;
				top: 628rpx;
				left: 50%;
				transform:translateX(-50%);
				z-index: 2;
				.tit{
					width: 100%;
					text-align: center;
					margin-top: 28rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #3D3D3D;
				}
				input{
					width: 504rpx;
					height: 62rpx;
					background: #EEEEEE;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					margin: auto;
					margin-top: 22rpx;
					padding-left: 20rpx;
				}
				.xian{
					width: 610rpx;
					height: 2rpx;
					background: #D8D8D8;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					margin-top: 26rpx;
				}
				.anniu{
					display: flex;
					justify-content: space-between;
					height: 98rpx;
					text{
						padding: 24rpx;
						text-align: center;
						box-sizing: border-box;
						font-weight: 500;
						font-size: 36rpx;
						color: #3D3D3D;
						display: inline-block;
						width: 100%;
						height: 100rpx;
					}
				}
			}
			.baocun{
				width: 584rpx;
				height: 90rpx;
				background: linear-gradient( 270deg, #54DAA1 0%, #19CD82 100%);
				border-radius: 54rpx 54rpx 54rpx 54rpx;
				margin: auto;
				text-align: center;
				line-height: 90rpx;
				font-weight: 500;
				font-size: 40rpx;
				color: #FFFFFF;
				position: fixed;
				bottom:458rpx ;
				left: 50%;
				transform: translateX(-50%);
			}
			.listobj{
				width: 680rpx;
				height: 786rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin: auto;
				padding: 22rpx 48rpx;
				box-sizing: border-box;
				.vipry{
					margin-top: 106rpx;
					text-align: center;
					overflow-y: scroll;
					height: 220rpx;
					.tit{
						font-size: 32rpx;
						color: #3D3D3D;
					}
					.listvip{
						display: flex;
						justify-content: space-between;
						font-size: 28rpx;
						color: #808080;
						margin-top: 28rpx;
					}
				}
				.xian{
					width: 680rpx;
					height: 2rpx;
					background: #F0F0F0;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
				    position: fixed;
					left: 37rpx;
                    margin-top: 76rpx;
				 }
				.addvip{
					display: flex;
					justify-content: space-between;
					margin-top: 74rpx;
					view{
						width: 250rpx;
						height: 86rpx;
						background: #D8D8D8;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						text-align: center;
						line-height: 86rpx;
						font-size: 32rpx;
						color: #3D3D3D;
					}
				}
				.inp{
					display: flex;
					margin-top: 28rpx;
					font-size: 28rpx;
					color: #3D3D3D;
					line-height: 50rpx;
					input{
						width: 360rpx;
						height: 50rpx;
						margin-left: 20rpx;
						margin-right: 20rpx;
						background: #F0F0F0;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						padding-left: 14rpx;
					}
				}
			}
		}
	}
</style>