235 lines
6.3 KiB
Vue
235 lines
6.3 KiB
Vue
<!-- 个人信息 -->
|
|
<template>
|
|
<view class="aircraft-setting">
|
|
<view class="setting-item">
|
|
<text><text>*</text>姓名</text>
|
|
<u-input v-model.trim="form.name" input-align="right"
|
|
placeholder="请输入姓名" :clearable="false" />
|
|
</view>
|
|
<view class="setting-item">
|
|
<text><text>*</text>手机号码</text>
|
|
<u-input v-model.number="form.phone" input-align="right"
|
|
placeholder="请输入手机号码" type="number" :clearable="false" />
|
|
</view>
|
|
<view class="setting-item">
|
|
<text><text>*</text>区域</text>
|
|
<u-input v-model="form.areaName" input-align="right" @click="handleClickPick('区域')"
|
|
placeholder="请选择区域" type="select" :clearable="false" />
|
|
</view>
|
|
<view class="setting-item">
|
|
<text>景区</text>
|
|
<u-input v-model="form.scenicName" input-align="right" @click="handleClickPick('景区')"
|
|
placeholder="请选择景区" type="select" :clearable="false" />
|
|
</view>
|
|
<view class="setting-item">
|
|
<text>入职时间</text>
|
|
<u-input v-model="form.hireDate" input-align="right" @click="showTime=true"
|
|
placeholder="请选择入职时间" type="select" :clearable="false" />
|
|
</view>
|
|
<view class="setting-save" @click="submit">保存</view>
|
|
<u-picker mode="selector" v-model="show" :default-selector="getDefaultSelector" :range="pickTitle==='区域'?areas:scenics"
|
|
range-key="name" confirm-color="#f7c04d" :title="pickTitle+'选择'" @confirm="handleChangePick"></u-picker>
|
|
<u-picker mode="time" v-model="showTime" :params="params" confirm-color="#f7c04d" title="入职时间选择"
|
|
@confirm="handleChangeTime" :default-time="form.hireDate"></u-picker>
|
|
<u-toast ref="uToast"></u-toast>
|
|
<Loading :show="loading" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
// #ifdef MP
|
|
options: {
|
|
styleIsolation: 'shared'
|
|
},
|
|
// #endif
|
|
data() {
|
|
return {
|
|
loading: true, // 加载
|
|
form:{
|
|
name: '',
|
|
phone: '',
|
|
areaId: '',
|
|
areaName: '',
|
|
scenicId: '',
|
|
scenicName: '',
|
|
hireDate: ''
|
|
},
|
|
// 入职时间选择显示参数
|
|
params: {
|
|
year: true,
|
|
month: true,
|
|
day: true,
|
|
hour: true,
|
|
minute: true,
|
|
second: true
|
|
},
|
|
// 区域列表
|
|
areas:[],
|
|
// 景区列表
|
|
scenics: [],
|
|
// 选择器标题
|
|
pickTitle: '区域',
|
|
// 显示选择器
|
|
show: false,
|
|
// 显示时间选择器
|
|
showTime: false,
|
|
// 用户信息
|
|
userMessage: this.$store.state.vuex_token === ''?{}:JSON.parse(this.$store.state.user_message),
|
|
isPilot: this.$store.state.user_type == 1,
|
|
}
|
|
},
|
|
computed:{
|
|
// 获取选择器默认值
|
|
getDefaultSelector(){
|
|
const isArea = this.pickTitle === '区域';
|
|
const arr = isArea ? this.areas : this.scenics;
|
|
const index = this.form[isArea?'areaId':'scenicId'];
|
|
return index?[arr.findIndex(item=>item.id === index)]:[0];
|
|
}
|
|
},
|
|
created() {
|
|
this.$nextTick(()=>{
|
|
this.init();
|
|
});
|
|
},
|
|
methods: {
|
|
// 初始化
|
|
async init(){
|
|
let resp = await this.$api.aSelfDetail(this.userMessage.id);
|
|
let res = await this.$api.allAreas();
|
|
if(!res){
|
|
this.$refs.uToast.show({type: 'error',title: "区域获取失败!"});
|
|
}else{
|
|
this.areas = res || [];
|
|
}
|
|
if(!resp){
|
|
this.$refs.uToast.show({type: 'error',title: "个人信息获取失败!"});
|
|
}else{
|
|
this.form = resp;
|
|
if(resp.areaId){
|
|
let resx = await this.$api.allScenicsByAreaId({areaId: this.form.areaId});
|
|
this.scenics = resx || [];
|
|
}
|
|
}
|
|
},
|
|
// 时间选择
|
|
handleChangeTime({year,month,day,hour,minute,second}){
|
|
this.form.hireDate = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
|
|
},
|
|
// 选择器值改变
|
|
async handleChangePick(index){
|
|
if(this.pickTitle === '区域'){
|
|
const val = this.areas[index[0]];
|
|
if(val.id === this.form.areaId) return;
|
|
this.form.areaId = val.id;
|
|
this.form.areaName = val.name;
|
|
this.form.scenicName = '';
|
|
this.form.scenicId = '';
|
|
let res = await this.$api.allScenicsByAreaId({areaId: val.id});
|
|
if(!res){
|
|
this.$refs.uToast.show({type: 'error',title: "景区获取失败!"});
|
|
}else{
|
|
this.scenics = res || [];
|
|
}
|
|
}else{
|
|
const val = this.scenics[index[0]];
|
|
this.form.scenicName = val.name;
|
|
this.form.scenicId = val.id;
|
|
}
|
|
},
|
|
// 点击下拉选择
|
|
handleClickPick(title){
|
|
if(title === '景区' && !this.form.areaId){
|
|
this.$refs.uToast.show({type: 'warning',title: "请选择区域！"});
|
|
return;
|
|
}
|
|
this.show = true;
|
|
this.pickTitle = title;
|
|
},
|
|
// 提交申请
|
|
async submit(){
|
|
const { name, phone, areaId } = this.form;
|
|
if(!name){
|
|
this.$refs.uToast.show({type: 'warning',title: "请填写姓名！"});
|
|
return;
|
|
}else if(!phone||!this.$u.test.mobile(phone)){
|
|
this.$refs.uToast.show({type: 'warning',title: "手机号格式错误！"});
|
|
return;
|
|
}else if(!areaId){
|
|
this.$refs.uToast.show({type: 'warning',title: "请选择区域！"});
|
|
return;
|
|
}else{
|
|
try{
|
|
this.loading = true;
|
|
delete this.form.password;
|
|
let res = await this.$api.aEditSelf(this.form);
|
|
this.$refs.uToast.show({type: 'success',title: "个人信息修改成功！"});
|
|
this.init();
|
|
}catch(e){
|
|
this.$refs.uToast.show({type: 'error',title: "个人信息修改失败！"});
|
|
}finally{
|
|
this.loading = false;
|
|
}
|
|
}
|
|
},
|
|
},
|
|
onLoad(options) {
|
|
try{
|
|
this.form = JSON.parse(this.$store.state.user_message);
|
|
}catch(e){
|
|
this.form = {};
|
|
}finally{
|
|
this.loading = false;
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.aircraft-setting {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
.setting-item{
|
|
padding: 24rpx 0;
|
|
margin: 0 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 2rpx solid #EBEDF0;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
text{
|
|
text{
|
|
margin-bottom: -20rpx;
|
|
color: #FE020E;
|
|
font-size: 32rpx;
|
|
margin-right: 8rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
.setting-save{
|
|
margin: auto 32rpx 52rpx;
|
|
border-radius: 40rpx;
|
|
background: #FBCB11;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: bold;
|
|
font-size: 30rpx;
|
|
color: #020202;
|
|
padding: 22rpx 0;
|
|
&:active{
|
|
margin: auto 42rpx 52rpx;
|
|
padding: 18rpx 0;
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
}
|
|
</style> |