|
|
@@ -1,5 +1,44 @@
|
|
|
<template>
|
|
|
+
|
|
|
<view class="page">
|
|
|
+ <!-- #ifdef APP-PLUS||MP -->
|
|
|
+ <view class="content-box">
|
|
|
+ <u-form-item label="姓名"><u-input v-model="formData.deviceCode" /></u-form-item>
|
|
|
+ <view class="form-box">
|
|
|
+ <u-form :model="form" ref="uForm">
|
|
|
+ <u-form-item label="照片">
|
|
|
+ <view class="pictrue" @click.stop='uploadpic'>
|
|
|
+ <image :src='newAvatar ? newAvatar : userInfo.avatar'></image>
|
|
|
+ <image src='../../static/images/alter.png' class="alter"></image>
|
|
|
+ </view>
|
|
|
+ <!-- <u-input v-model="formData.deviceCode" @click.native.stop.prevent="uploadpic"/> -->
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="简介"><u-input v-model="form.intro" /></u-form-item>
|
|
|
+ <u-form-item label="性别"><u-input v-model="form.sex" type="select" /></u-form-item>
|
|
|
+ <u-form-item label="水果">
|
|
|
+ <u-checkbox-group>
|
|
|
+ <u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList" :key="index"
|
|
|
+ :name="item.name">
|
|
|
+ {{ item.name }}
|
|
|
+ </u-checkbox>
|
|
|
+ </u-checkbox-group>
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="味道">
|
|
|
+ <u-radio-group v-model="radio">
|
|
|
+ <u-radio v-for="(item, index) in radioList" :key="index" :name="item.name"
|
|
|
+ :disabled="item.disabled">
|
|
|
+ {{ item.name }}
|
|
|
+ </u-radio>
|
|
|
+ </u-radio-group>
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="开关"><u-switch slot="right" v-model="switchVal"></u-switch></u-form-item>
|
|
|
+ </u-form>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- #endif -->
|
|
|
+
|
|
|
<view class="content_box">
|
|
|
<van-field v-model="formData.deviceCode" readonly name="ID号" label="ID号" placeholder="ID号" />
|
|
|
<view class="content">
|
|
|
@@ -18,7 +57,6 @@
|
|
|
@change="formData.cardNumber = $event.detail" />
|
|
|
<van-field class="btn" readonly clickable name="picker" :value="formData.sexValue" label="性别"
|
|
|
placeholder="请选择性别">
|
|
|
- <!-- @click.native.stop.prevent="showPickerFn" -->
|
|
|
<template #button>
|
|
|
<image src="/static/img/arrow.png" mode=""></image>
|
|
|
</template>
|
|
|
@@ -30,7 +68,8 @@
|
|
|
</template>
|
|
|
</van-field>
|
|
|
<van-field v-model="formData.tel" name="手机号" label="手机号" placeholder="请输入手机号"
|
|
|
- :rules="[{ required: true, message: '请填写手机号' }]" @blur="telBlur" @change="formData.tel = $event.detail" />
|
|
|
+ :rules="[{ required: true, message: '请填写手机号' }]" @blur="telBlur"
|
|
|
+ @change="formData.tel = $event.detail" />
|
|
|
|
|
|
</van-form>
|
|
|
|
|
|
@@ -40,7 +79,6 @@
|
|
|
<van-popup :show="showCalendar" position="bottom">
|
|
|
<van-datetime-picker @cancel="showCalendar=false" @confirm="calendarConfirm" :value="currentDay"
|
|
|
type="date" :min-date="minDate" />
|
|
|
- <!-- :min-date="minDate" -->
|
|
|
</van-popup>
|
|
|
</view>
|
|
|
<van-field readonly class="btn" v-model="formData.relationValue" label="关系" clearable
|
|
|
@@ -49,7 +87,7 @@
|
|
|
<image src="/static/img/arrow.png" mode=""></image>
|
|
|
</template>
|
|
|
</van-field>
|
|
|
-
|
|
|
+
|
|
|
</view>
|
|
|
<view class="footer_btn">
|
|
|
<view class="footer" @click="bindEqu('formData')">
|
|
|
@@ -68,8 +106,45 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ form: {
|
|
|
+ name: '',
|
|
|
+ intro: '',
|
|
|
+ sex: ''
|
|
|
+ },
|
|
|
+ checkboxList: [{
|
|
|
+ name: '苹果',
|
|
|
+ checked: false,
|
|
|
+ disabled: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '雪梨',
|
|
|
+ checked: false,
|
|
|
+ disabled: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '柠檬',
|
|
|
+ checked: false,
|
|
|
+ disabled: false
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ radioList: [{
|
|
|
+ name: '鲜甜',
|
|
|
+ disabled: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '麻辣',
|
|
|
+ disabled: false
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ radio: '',
|
|
|
+ switchVal: false,
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
formData: {
|
|
|
- photo:'',
|
|
|
+ photo: '',
|
|
|
deviceCode: '',
|
|
|
nickName: '',
|
|
|
relationId: null,
|
|
|
@@ -78,8 +153,8 @@
|
|
|
sex: null, //1 男 2女
|
|
|
sexValue: '',
|
|
|
birthday: '',
|
|
|
- cardNumber:'',
|
|
|
- tel:''
|
|
|
+ cardNumber: '',
|
|
|
+ tel: ''
|
|
|
},
|
|
|
|
|
|
username: '',
|
|
|
@@ -154,16 +229,16 @@
|
|
|
icon: 'none'
|
|
|
})
|
|
|
} else if (cardNumber == '') {
|
|
|
- this.$util.Tips({
|
|
|
- title: '请填写证件号',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- } else if (tel == '') {
|
|
|
- this.$util.Tips({
|
|
|
- title: '请填写手机号',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- }else if (relationId == null) {
|
|
|
+ this.$util.Tips({
|
|
|
+ title: '请填写证件号',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ } else if (tel == '') {
|
|
|
+ this.$util.Tips({
|
|
|
+ title: '请填写手机号',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ } else if (relationId == null) {
|
|
|
this.$util.Tips({
|
|
|
title: '请选择与设备使用者关系',
|
|
|
icon: 'none'
|
|
|
@@ -229,16 +304,16 @@
|
|
|
} = this.parseIDCard(e.detail.value);
|
|
|
console.log('性别：', sexValue);
|
|
|
console.log('出生年月日：', birthday);
|
|
|
- this.$set(this.formData,'sex',sex)
|
|
|
- this.$set(this.formData,'sexValue',sexValue)
|
|
|
- this.$set(this.formData,'birthday',birthday)
|
|
|
+ this.$set(this.formData, 'sex', sex)
|
|
|
+ this.$set(this.formData, 'sexValue', sexValue)
|
|
|
+ this.$set(this.formData, 'birthday', birthday)
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- telBlur(e){
|
|
|
+ telBlur(e) {
|
|
|
if (!(/^1(3|4|5|7|8|9|6)\d{9}$/i.test(e.detail.value))) {
|
|
|
return this.$util.Tips({
|
|
|
- title: '请输入正确的手机号码！'
|
|
|
+ title: '请输入正确的手机号码！'
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
@@ -266,7 +341,7 @@
|
|
|
console.log('出生年月日：', formattedBirthday);
|
|
|
|
|
|
return {
|
|
|
- sex:sex,
|
|
|
+ sex: sex,
|
|
|
sexValue: sexValue,
|
|
|
birthday: formattedBirthday
|
|
|
};
|
|
|
@@ -313,6 +388,11 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
+ ::v-deep .u-form-item {
|
|
|
+ background-color: red;
|
|
|
+ padding: 20rpx !important;
|
|
|
+ }
|
|
|
+
|
|
|
.avatar_box {
|
|
|
height: 342rpx;
|
|
|
display: flex;
|
|
|
@@ -331,9 +411,40 @@
|
|
|
// padding: 60rpx 30rpx;
|
|
|
}
|
|
|
|
|
|
+ .content-box {
|
|
|
+ padding: 60rpx 30rpx;
|
|
|
+
|
|
|
+ .form-box {
|
|
|
+ margin-top: 30rpx;
|
|
|
+ .pictrue {
|
|
|
+ width: 96rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ position: relative;
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .alter {
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // .pictrue image {
|
|
|
+ // width: 100%;
|
|
|
+ // height: 100%;
|
|
|
+ // border-radius: 50%;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.content_box {
|
|
|
background-color: #F7F7F7;
|
|
|
- padding: 60rpx 30rpx;
|
|
|
+ padding: 60rpx 30rpx;
|
|
|
|
|
|
.btn {
|
|
|
image {
|
|
|
@@ -360,6 +471,7 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.footer_btn {
|
|
|
width: 100%;
|
|
|
height: 98rpx;
|
|
|
@@ -370,13 +482,13 @@
|
|
|
font-size: 32rpx;
|
|
|
padding: 32rpx;
|
|
|
box-sizing: border-box;
|
|
|
-
|
|
|
+
|
|
|
.footer {
|
|
|
background: #F35546;
|
|
|
border-radius: 9rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
|
|
|
::v-deep uni-image {
|
