jp-youdian-Inspection/pages/team/teamAdd.vue

<template>
	<view>
		<u-navbar title="成员信息" title-color="#101010"></u-navbar>
		<view class="list">
			<view class="item">
				<view class="name">
					<span>*</span>成员姓名

				</view>
				<view class="value">
					<u-input v-model="addInfo.name" placeholder="请输入成员姓名"></u-input>
				</view>
			</view>
			<view class="item">
				<view class="name">
					<span>*</span>登录手机号

				</view>
				<view class="value">
					<u-input v-model="addInfo.phone"  placeholder="请输入登录手机号"></u-input>
				</view>
			</view>
			<view class="item">
				<view class="name">
					登录密码

				</view>
				<view class="value">
					<u-input placeholder="不填写默认123456" v-model="addInfo.password"></u-input>
				</view>
			</view>


		</view>
		<view class="floating-button">
			<view class="button" @click="submit">

				提交
			</view>

		</view>

	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/pagesTeam.js'

	export default {
		data() {
			return {
				addInfo: {
					roleName:"XJ"
				}
			};
		},
		methods:{
			submit(){
				if(!this.addInfo.name){
					uni.showToast({
						title:"请输入成员姓名"
					})
					 return
				}
				if(!this.addInfo.phone){
					uni.showToast({
						title:"请输入登录手机号"
					})
					 return
				}
				
			
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.adduser(this.addInfo).then((res) => {
					
					uni.showModal({
						title: '提示',
						showCancel: false,
						content: "操作成功",
						success: res1 => {
							if (res1.confirm) {
								uni.navigateBack()
							} else if (res1.cancel) {
								//('用户点击取消');
							}
						}
					})
				
					uni.hideLoading();
				
				}).catch(error => {
				
					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
				
				
			},
		}
	}
</script>

<style lang="scss">
	.jpmain {
		padding-bottom: 120rpx;
	}

	.list {
		background-color: rgba(255, 255, 255, 1);

		margin: 20rpx 0;

		.item:not(:last-child) {
			border-bottom: 2rpx solid rgba(232, 232, 232, 1);
		}

		.item {
			padding: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.name {
				width: 40%;
				font-size: 32rpx;
				color: #777777;

				span {
					color: red
				}

				white-space: pre;
			}

			.value {
				font-size: 32rpx;
				width: 60%;
				display: flex;
				justify-content: space-between;

				input::placeholder {
					color: #AAAAAA;
				}

				.img {
					width: 40rpx;
					height: 40rpx;

				}

				.textarea {
					background-color: rgba(241, 242, 245, 1);
					width: 100%;
					border-radius: 8rpx;
				}

			}
		}

		.item-plus {
			flex-direction: column;

			.value,
			.name {
				width: 100%;
			}

			.name {
				padding-bottom: 32rpx;
			}
		}
	}

	.floating-button {
		z-index: 999;
		position: fixed;
		bottom: 0;
		
		width: 100%;
		display: flex;
		height: 120rpx;
		justify-content: center;
		background-color: rgba(255, 255, 255, 1);

		.button {
			margin-top: 24rpx;
			border-radius: 50px;
			height: 80rpx;
			width: 80%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 12rpx;

			background-color: rgba(22, 119, 255, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 36rpx;
		}
	}
</style>