jp-charge/pagesFinance/user/addOwnerInformation.vue

<template>
	<view>
		<ujp-navbar :title="id!=0?'编辑':'新增'">
			
			<view slot="right"  @click="infodelete()"
			v-if="id!=0"
			style="margin-right: 20px;">
				<span class="delete"  >删除</span>
			</view>
		</ujp-navbar>
				<u-keyboard ref="uKeyboard" 
				 @change="valChange" @backspace="backspace"
				mode="car" v-model="show"></u-keyboard>

		<view class="ower-infos">
			
			<view class="infos-item">
				<view class="title">
					手机号码<text class="asterisk">*</text>
				</view>
				<view class="content">
					
					<u-input  v-model="obj.phone" placeholder="请填写手机号码"  />
					
				</view>
				
			</view>
			<view class="infos-item">
				<view class="title">
					用户姓名
				</view>
				<view class="content">
					
					<u-input  v-model="obj.userName" placeholder="请填写车主姓名"  />
				</view>
				
			</view>
			<view class="infos-item border-none">
				<view class="title">
					车牌号码
				</view>
				<view class="content" @click="show=true">
					
					{{obj.carNum?obj.carNum:'请填写车牌号码'}}
					
				</view>
				
			</view>
			
		</view>
		
		<u-button type="primary" @click="submit()">保存</u-button>
	</view>
</template>

<script>
	import * as API from '@/apis/finance.js'
	import {
		checkPhone
	} from '@/utils'
	export default {
		data() {
			return {
				show:false,
				value:'',
					uuid:'',
					id:"",
					platform:"",
					obj:{
						platform:"",
						userName:"",
						phone:"",
						carNum:"",
						vipUserId:"",
					}
			}
		},
		onReady() {
			
			if(this.id!=0){
				
				this.getInfo()
			}
		
					
		},
		onLoad(op) {
			this.platform=op.p
			this.id=op.id
			this.uuid=op.uuid;
			
		},
		methods: {
			// 按键被点击(点击退格键不会触发此事件)
						valChange(val) {
							// 将每次按键的值拼接到value变量中，注意+=写法
							this.value += val;
							console.log(this.value);
							this.obj.carNum=this.value
						},
						// 退格键被点击
						backspace() {
							// 删除value的最后一个字符
							if(this.value.length) this.value = this.value.substr(0, this.value.length - 1);
							console.log(this.value);
							this.obj.carNum=this.value
						},
						
			infodelete(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				this.obj.platform=this.platform
				API.vipUserDelete(this.obj).then((res) => {
						uni.hideLoading()	
					this.carhelp.set("addOwnerInformation",{
						uuid:this.uuid,
						selectObj:this.obj
					})
					uni.showModal({
						showCancel:false,
						title: '提示',
						content: '操作成功',
						success: function (res) {
							
							uni.navigateBack({
								
							})
						}
					});
							
				}).catch(error => {
					uni.showToast({
							
						title: error
					})
				})
			},
			submit(){
				
				if(!this.obj.phone){
					uni.showToast({				
						title: "请填写手机号码"
					})
					return  false
				}
				var checkPhoneResult = checkPhone(this.obj.phone);
						
				if (checkPhoneResult !== true) {
					uni.showToast({
						title: checkPhoneResult,
					})
					return;
				}
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				this.obj.platform=this.platform
				API.vipUserSave(this.obj).then((res) => {
						uni.hideLoading()	
					this.carhelp.set("addOwnerInformation",{
						uuid:this.uuid,
						selectObj:this.obj
					})
					uni.showModal({
						showCancel:false,
						title: '提示',
						content: '操作成功',
						success: function (res) {
							
							uni.navigateBack({
								
							})
						}
					});
							
				}).catch(error => {
					uni.showToast({
							
						title: error
					})
				})
			},
			getInfo(){
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.vipUserDetails({
					vipUserId:this.id,
				
				}).then((res) => {
							
					this.obj=res.data.vipUser;
					this.obj.vipUserId=this.id
					
					uni.hideLoading()
							
				}).catch(error => {
					uni.showToast({
							
						title: error
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f3f4f7;
	}
	.ower-infos{
		background-color: #fff;
		padding-left: 16px;
		.border-none{
			border: none !important;
		}
		.infos-item{
			padding: 14px 0;
			display: flex;
			border-bottom: 1px solid #BABABA ;
			.title{
				width: 30%;
				font-size: 16px;
				color: #7d7d7d;
				.asterisk{
					color: #EE3138;
				}
			}
			.content{
				color: rgba(172, 172, 172, 100);
				font-size: 16px;
			}
		}
	}
	.u-btn{
		background-color: rgba(0, 90, 217, 100);
		margin: 16px;
		height: 44px;
		line-height: 44px;
		font-size: 18px
	}
	.delete{
		color: rgba(238, 49, 56, 100);
		font-size: 16px;
	}
</style>