yikangyang-wx/component/serviceArchive/service-archive.vue

<template>
	<view class="container" v-show="isShow">
		<u-popup v-model="isShow" mode="bottom" safe-area-inset-bottom :border-radius="0" height="100%">
			<view style="padding:34rpx 44rpx">
				<u-form :model="form" :rules="rules" ref="uForm1" label-width="140"
				:error-type="['toast']">
					<u-form-item label="姓名" prop="name" required>
						<u-input v-model="form.name" placeholder="请输入姓名"/>
					</u-form-item>
					<u-form-item label="身份证号" prop="idcard">
						<u-input v-model="form.idcard" placeholder="请输入身份证号" type="idcard" />
					</u-form-item>
					<u-form-item label="手机号" prop="mobile" required>
						<u-input v-model="form.mobile" placeholder="请输入手机号" type="number" />
					</u-form-item>
					<u-form-item label="有无行动能力" prop="is_move">
						<u-radio-group v-model="form.is_move" slot="right" active-color="#c20d12">
							<u-radio :name="1">有</u-radio>
							<u-radio :name="0">无</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="地址" prop="address" required>
						<u-input v-model="form.address" placeholder="请输入地址" type="textarea" />
						<view style="color:blue" @click="openMap">地图选点</view>
					</u-form-item>
					<u-form-item label="备注" prop="remark">
						<u-input v-model="form.remark" placeholder="请输入备注" />
					</u-form-item>
				</u-form>
			</view>
			<view class="archive-btn">
				<u-button shape="circle" ripple :custom-style="btnStyle1" @click="cancel">取消</u-button>
				
				<u-button shape="circle" ripple :custom-style="btnStyle" @click="save">确认</u-button>
				
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnStyle: {
					'background-image': 'linear-gradient(-90deg, #e26165 0%, #c10d12 94%, #c10d12 100%)',
					'font-weight': '500',
					'font-size': '28rpx',
					'color': '#fff',
					'width': '436rpx',
					'margin': '0 auto',
					'letter-spacing': '2rpx',
					'width':'80%'
				},
				btnStyle1: {
					'background-image': 'linear-gradient(-90deg, #ddd 0%, #ccc 94%, #eee 100%)',
					'font-weight': '500',
					'font-size': '28rpx',
					'color': '#fff',
					'width': '436rpx',
					'margin': '0 auto',
					'letter-spacing': '2rpx',
					'width':'80%'
				},
				isShow: false,
				form: {
					name: '',
					idcard:'',
					mobile:'',
					is_move:1,
					address:'',
					remark:''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}],
					// idcard: [{
					// 	required: true,
					// 	message: '请输入身份证号',
					// 	trigger: ['blur', 'change']
					// }, {
					// 	// 自定义验证函数，见上说明
					// 	validator: (rule, value, callback) => {
					// 		return this.$u.test.idCard(value);
					// 	},
					// 	message: '身份证号不正确',
					// 	// 触发器可以同时用blur和change
					// 	trigger: ['change', 'blur'],
					// }],
					mobile: [{
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}],
					address: [{
						required: true,
						message: '请输入地址',
						trigger: ['blur', 'change']
					}]
				}
			};
		},
		onReady() {
			this.$refs.uForm1.setRules(this.rules);
		},
		methods: {
			// 打开地图选点
			openMap(){
				console.log("chooseLocation")
				let that = this
				uni.chooseLocation({
				   success(res){
				   console.log("chooseLocationres",res)
					if (res.errMsg === 'chooseLocation:ok') {
						that.form.address = res.address
					  console.log('位置名称：' + res.name);
					  console.log('详细地址：' + res.address);
					  console.log('纬度：' + res.latitude);
					  console.log('经度：' + res.longitude);
					}
				   },
				   fail(err){
					   uni.showToast({
					   					title:'打开地图失败',
					   					icon:'none'
					   })
					   console.log("err",err)
				   }
				});
			},
			save() {
				
				this.$refs.uForm1.validate(valid => {
					let that = this
					if (valid) {
						console.log('验证通过');
						console.log("form",this.form)
						console.log("that.$u.api.userArchiveSave",that.$u.api.userArchiveSave)
						console.log("this.$u.api.userArchiveSave",this.$u.api.userArchiveSave)
						this.$u.api.userArchiveSave({
							...that.form
						}).then(res=>{
							uni.showToast({
								title:"更新成功",
								icon:'none',
								success() {
									that.isShow = false
									that.$emit("addSuccess",true)
								}
							})
						}).then(err=>{
							console.log("err",err)
						})
						
					} else {
						console.log('验证失败');
					}
				});
				
			},
			cancel(){
				this.$refs.uForm1.resetFields()
				this.form = {
					name: '',
					idcard:'',
					mobile:'',
					is_move:1,
					address:'',
					remark:''
				}
				this.isShow = false
			}
		}
	}
</script>

<style lang="scss">

</style>

<style lang="scss" scoped>
	page {
		background: #fff;
	}
	.container {
		// padding: 34rpx 44rpx;
		// margin: 34rpx 25rpx 95rpx;
		// border-radius: 10rpx;
		filter: drop-shadow(0 0 10rpx rgba(211, 211, 214, 0.3));
		background-color: #ffffff;
		height: 100vh;
		width: 100vw;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999;

		::v-deep .u-input__input {
			text-align: right;
		}
		.archive-btn{
			display: flex;
			align-items: center;
			justify-content: center;
			u-button{
				width:50%;
			}
		}
	}
</style>