525 lines
12 KiB
Vue
525 lines
12 KiB
Vue
<template>
|
||
<view class="my-sign">
|
||
<view class="mySignItem">
|
||
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
|
||
<view class="mySignIndex">
|
||
<u--form labelWidth="150rpx" :model="dataUser" :rules="rules" ref="uForm" labelAlign="left">
|
||
<u-form-item label="用户类型:" prop="personType" borderBottom @click="show = true">
|
||
<!-- closeOnClickOverlay="true" -->
|
||
<u-action-sheet @select="radioChanges" @close="show = false" closeOnClickAction="true"
|
||
:actions="radiolist" :show="show"></u-action-sheet>
|
||
<view class="dataUserunit" :style="{color: dataUser.personType ||'#c2cad2'}"
|
||
v-model="dataUser.personType">{{dataUser.personType || "请输入用户类型"}}</view>
|
||
<view class="HiddenEse">
|
||
<text class="iconoscope"></text>
|
||
</view>
|
||
</u-form-item>
|
||
<u-form-item label="姓名:" prop="name" borderBottom>
|
||
<u--input clearable placeholder="请输入姓名" v-model="dataUser.name"></u--input>
|
||
</u-form-item>
|
||
<u-form-item @click="titleClick" label="部门:" prop="title" borderBottom v-if="showradio">
|
||
<view class="dataUserunit" :style="{color: dataUser.title ||'#c2cad2'}" name="unit"
|
||
v-model="dataUser.title">{{dataUser.title || "请输入部门"}}</view>
|
||
<u-picker itemHeight="75" @confirm="titleConfrm" :show="showtitle" :columns="titleSelect"
|
||
keyName="label" @cancel="showtitle = false" @close="showtitle = false"></u-picker>
|
||
</u-form-item>
|
||
|
||
<u-form-item @click="showpickerClick" label="派出所:" prop="Localpolice" borderBottom v-if="showradio">
|
||
<view class="dataUserunit" :style="{color: dataUser.Localpolice ||'#c2cad2'}" name="unit"
|
||
v-model="dataUser.Localpolice">{{dataUser.Localpolice || "请输入派出所"}}</view>
|
||
<u-picker itemHeight="75" @confirm="pickerConfrm" :show="showpicker" :columns="columns"
|
||
keyName="label" @cancel="showpicker = false" @close="showpicker = false"></u-picker>
|
||
</u-form-item>
|
||
<u-form-item label="单位:" prop="unit" borderBottom v-if="showradio && Publicfalse"
|
||
@click="unitClick">
|
||
<view class="dataUserunit" :style="{color: dataUser.unit ||'#c2cad2'}" name="unit"
|
||
v-model="dataUser.unit">{{dataUser.unit || "请输入所属单位"}}</view>
|
||
<u-picker itemHeight="75" @confirm="pickerUnitClick" :show="showunit" :columns="unitColums"
|
||
keyName="label" @cancel="showunit = false" @close="showunit = false"></u-picker>
|
||
</u-form-item>
|
||
</u--form>
|
||
</view>
|
||
<!-- 登录 -->
|
||
<view class="anniu">
|
||
<u-button @click="submit" v-if="showradio" class="butn" text="注册" color="#4e87ff"></u-button>
|
||
<slot v-else>
|
||
<u-button @click="submitLogin(dataUser)" class="butn" type="primary" text="登录"
|
||
color="#4e87ff"></u-button>
|
||
</slot>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapMutations,
|
||
mapGetters
|
||
} from 'vuex';
|
||
import {
|
||
postAddLogin,
|
||
postLogin,
|
||
getBoroughList,
|
||
getstationList,
|
||
getstationbase
|
||
} from '@/api/login';
|
||
import {
|
||
customTotast
|
||
} from '@/utils/index';
|
||
export default {
|
||
data() {
|
||
return {
|
||
dataUser: {
|
||
personType: '',
|
||
name: '',
|
||
title: '',
|
||
id: '',
|
||
Localpolice: '',
|
||
unit: ''
|
||
},
|
||
fields: [],
|
||
columns: [], //派出所控制
|
||
unitColums: [], //单位
|
||
showradio: true,
|
||
showpicker: false, //派出所控制
|
||
showunit: false, //单位控制
|
||
showPopup: false, // 弹层控制
|
||
show: false,
|
||
schoolInformation: {},
|
||
radiolist: [{
|
||
value: 'volunteer',
|
||
name: '志愿者'
|
||
}, {
|
||
value: 'guarder',
|
||
name: '保安人员'
|
||
},
|
||
// {
|
||
// value: 'policeman',
|
||
// name: '警务人员'
|
||
// },
|
||
{
|
||
value: 'school.manager',
|
||
name: '教育部门'
|
||
},
|
||
{
|
||
value: 'police.manager',
|
||
name: '公安部门'
|
||
}
|
||
],
|
||
Publicfalse: true,
|
||
rules: {
|
||
name: [{
|
||
required: true,
|
||
message: '请输入用户名',
|
||
trigger: ['blur', 'change']
|
||
}],
|
||
Localpolice: [{
|
||
required: true,
|
||
message: '请选择派出所',
|
||
trigger: ['blur', 'change']
|
||
}],
|
||
unit: [{
|
||
required: true,
|
||
message: '请选择学校单位',
|
||
trigger: ['blur', 'change']
|
||
}],
|
||
id: [{
|
||
required: true,
|
||
message: '请输入账号',
|
||
trigger: ['blur', 'change']
|
||
}],
|
||
},
|
||
Public: undefined,
|
||
showtitle: false,
|
||
titleSection:[
|
||
[ '公安分局','内保大队','派出所']
|
||
],
|
||
title2Section:[
|
||
['区教育局','区教育局安保科','学校老师','学校保安']
|
||
]
|
||
};
|
||
},
|
||
|
||
computed: {
|
||
// 拿取vuex里的数据
|
||
...mapGetters({
|
||
getopenid: 'openid/getopenid'
|
||
}),
|
||
titleSelect(){
|
||
return this.dataUser.personType === '公安部门'? this.titleSection:this.title2Section
|
||
}
|
||
|
||
},
|
||
created() {},
|
||
onShow() {
|
||
|
||
},
|
||
onLoad() {},
|
||
methods: {
|
||
...mapMutations({
|
||
updateList: 'users/updateList',
|
||
schoolList: 'users/schoolList',
|
||
}),
|
||
// 志愿者切换
|
||
radioChanges(val) {
|
||
if (val.value == 'police.manager') {
|
||
this.Public = {
|
||
remark: '公安机关',
|
||
brigade: "长沙芙蓉区",
|
||
level: "1",
|
||
borough: '公安机关'
|
||
}
|
||
} else {
|
||
this.Public = {
|
||
remark: '教育局',
|
||
brigade: "长沙芙蓉区",
|
||
level: "1",
|
||
borough: '教育局'
|
||
}
|
||
}
|
||
this.BoroughList(); // 派出所列表数据
|
||
this.dataUser.personType = val.value;
|
||
if (this.dataUser.personType == 'school.manager') {
|
||
this.showradio = true;
|
||
this.dataUser = {
|
||
personType: val.name,
|
||
id: '',
|
||
name: '',
|
||
title:''
|
||
};
|
||
} else if (this.dataUser.personType == 'police.manager') {
|
||
this.showradio = true;
|
||
this.dataUser = {
|
||
personType: val.name,
|
||
id: '',
|
||
name: '',
|
||
title:''
|
||
};
|
||
} else if (this.dataUser.personType == 'guarder') {
|
||
this.showradio = true;
|
||
this.dataUser = {
|
||
personType: val.name,
|
||
id: '',
|
||
name: '',
|
||
title:''
|
||
};
|
||
} else {
|
||
this.showradio = false;
|
||
this.dataUser = {
|
||
personType: val.name,
|
||
id: '',
|
||
name: '',
|
||
title:''
|
||
};
|
||
}
|
||
},
|
||
onLogin() {
|
||
// uni.navigateTo({
|
||
// url: `/pages/login/index`
|
||
// });
|
||
// setTimeout(() => {
|
||
// this.$refs.uForm.clearValidate();
|
||
// }, 900);
|
||
},
|
||
// 部门
|
||
titleClick() {
|
||
if (this.dataUser.personType !== '') {
|
||
this.showtitle = true
|
||
} else {
|
||
uni.showToast({
|
||
title: '请先选择用户类型'
|
||
});
|
||
}
|
||
|
||
},
|
||
titleConfrm(e){
|
||
this.dataUser.title = e.value[0]
|
||
this.showtitle = false
|
||
},
|
||
// 注册
|
||
submit() {
|
||
this.$refs.uForm
|
||
.validate()
|
||
.then((res) => {
|
||
let TypeListArr = this.dataUser.personType == '教育部门' ? 'school.manager' : this.dataUser
|
||
.personType == '公安部门' ?
|
||
'police.manager' : this.dataUser.personType == '保安人员' ? 'guarder' : '';
|
||
console.log(TypeListArr);
|
||
const data = {
|
||
personType: TypeListArr,
|
||
name: this.dataUser.name,
|
||
id: this.getopenid,
|
||
title:this.dataUser.title,
|
||
brigade: '长沙芙蓉区',
|
||
borough: this.dataUser.Localpolice,
|
||
station: this.dataUser.unit
|
||
};
|
||
postAddLogin(data).then((res) => {
|
||
uni.showLoading({
|
||
title: '正在注册中....'
|
||
});
|
||
this.updateList(res)
|
||
setTimeout(() => {
|
||
uni.showToast({
|
||
title: '注册成功',
|
||
icon: 'success'
|
||
});
|
||
uni.hideLoading();
|
||
postLogin({
|
||
id: this.getopenid,
|
||
password: ''
|
||
}).then((resopen) => {
|
||
uni.showLoading({
|
||
title: '正在登陆中...'
|
||
});
|
||
this.updateList(resopen.data)
|
||
this.schoolList(this.schoolInformation)
|
||
setTimeout(() => {
|
||
uni.hideLoading();
|
||
customTotast({
|
||
title: '登录成功',
|
||
icon: 'success'
|
||
})();
|
||
uni.switchTab({
|
||
url: `/pages/index/index`
|
||
});
|
||
}, 1000);
|
||
}).catch((error) => {
|
||
uni.showToast({
|
||
title: '注册成功账号待审核',
|
||
icon: 'none',
|
||
mask: true,
|
||
success() {
|
||
setTimeout(() => {
|
||
uni.navigateTo({
|
||
url: `/pages/login/index`
|
||
});
|
||
}, 500)
|
||
}
|
||
});
|
||
|
||
})
|
||
}, 1000);
|
||
}).catch((err) => {
|
||
console.log(err);
|
||
})
|
||
})
|
||
.catch((errors) => {
|
||
uni.$u.toast('校验失败');
|
||
});
|
||
},
|
||
// 志愿者不用掉接口 直接登录
|
||
submitLogin(e) {
|
||
const elist = {
|
||
id: "",
|
||
name: e.name,
|
||
personType: e.personType == "志愿者" ? 'volunteer' : '',
|
||
}
|
||
this.updateList(elist);
|
||
if (e.name !== '') {
|
||
uni.switchTab({
|
||
url: `/pages/index/index`
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: '用户名不能为空'
|
||
});
|
||
}
|
||
},
|
||
// 获取派出所列表
|
||
BoroughList() {
|
||
const that = this;
|
||
const dataLIst = {
|
||
brigade: '长沙芙蓉区'
|
||
};
|
||
getBoroughList(dataLIst)
|
||
.then((res) => {
|
||
res.data.unshift(this.Public)
|
||
console.log(res.data);
|
||
let matter = res.data
|
||
.filter((v) => v.remark && v.borough)
|
||
.map((res) => ({
|
||
id: res.borough,
|
||
label: res.remark
|
||
}));
|
||
that.columns = [matter];
|
||
console.log(that.columns);
|
||
})
|
||
.catch((error) => {});
|
||
},
|
||
// 派出所
|
||
showpickerClick() {
|
||
if (this.dataUser.personType !== '') {
|
||
this.showpicker = true;
|
||
} else {
|
||
uni.showToast({
|
||
title: '请先选择用户类型'
|
||
});
|
||
}
|
||
|
||
},
|
||
// 触发点击事件
|
||
pickerConfrm(e) {
|
||
console.log(1121313121,e);
|
||
if (e.value && e.value.length >= 1) {
|
||
if (e.value[0].label === '公安机关' || e.value[0].label === '教育局') {
|
||
this.Publicfalse = false
|
||
} else {
|
||
this.Publicfalse = true
|
||
}
|
||
this.dataUser.Localpolice = e.value[0].label;
|
||
|
||
}
|
||
this.fields = e.value[0].label;
|
||
this.showpicker = false;
|
||
this.dataUser.unit = ''
|
||
},
|
||
// 单位
|
||
unitClick() {
|
||
console.log(this.dataUser.Localpolice);
|
||
if (this.dataUser.Localpolice !== '') {
|
||
this.stationList();
|
||
this.showunit = true;
|
||
} else {
|
||
uni.showToast({
|
||
title: '请先选择派出所'
|
||
});
|
||
}
|
||
|
||
|
||
},
|
||
// 单位
|
||
stationList() {
|
||
const that = this;
|
||
const unitList = {
|
||
brigade: '长沙芙蓉区',
|
||
borough: that.fields
|
||
};
|
||
getstationList(unitList)
|
||
.then((res) => {
|
||
let matterunit = res.data
|
||
.filter((v) => v.nickname && v.name)
|
||
.map((res) => ({
|
||
id: res.name,
|
||
label: res.nickname
|
||
}));
|
||
that.unitColums = [matterunit];
|
||
})
|
||
.catch((error) => {});
|
||
},
|
||
|
||
// 单位触发确定
|
||
pickerUnitClick(e) {
|
||
// if (this.dataUser.Localpolice !== '') {
|
||
if (e.value.length > 0) {
|
||
console.log(11111);
|
||
this.dataUser.unit = e.value[0].label;
|
||
getstationbase({
|
||
name: this.dataUser.unit
|
||
}).then((respone) => {
|
||
this.schoolInformation = respone.data
|
||
})
|
||
}
|
||
this.showunit = false;
|
||
this.$refs.uForm.clearValidate();
|
||
// }
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.mySignItem {
|
||
padding: 0;
|
||
margin: 0;
|
||
background-color: #e9eef4;
|
||
overflow: hidden;
|
||
height: 100vh;
|
||
|
||
.mySignIndex {
|
||
margin: 30rpx 0 0 0;
|
||
position: relative;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.HiddenEse {
|
||
position: absolute;
|
||
top: 16px;
|
||
right: -30px;
|
||
width: 118rpx;
|
||
height: 70rpx;
|
||
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.iconoscope {
|
||
width: 6px;
|
||
height: 6px;
|
||
display: inline-block;
|
||
/* line-height: 20px; */
|
||
border: solid 2px #c2c2c2;
|
||
margin-left: 10px;
|
||
transform: rotate(45deg);
|
||
border-bottom: white;
|
||
border-left: white;
|
||
margin-bottom: 2px;
|
||
}
|
||
}
|
||
|
||
.anniu {
|
||
overflow: hidden;
|
||
margin: 50rpx 20rpx 20rpx;
|
||
}
|
||
|
||
.annius {
|
||
margin-top: 30rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.dataUserunit {
|
||
padding-left: 16rpx;
|
||
}
|
||
|
||
.acquire {
|
||
position: relative;
|
||
}
|
||
|
||
.button {
|
||
position: absolute;
|
||
top: 7px;
|
||
right: -80px;
|
||
width: 64px;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
font-size: 11px;
|
||
border: none;
|
||
color: #ccc;
|
||
outline: none;
|
||
background-color: transparent;
|
||
border: 1px solid none;
|
||
margin-left: 0;
|
||
margin-right: 10px;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
|
||
/deep/.u-form-item {
|
||
line-height: 70rpx;
|
||
position: relative;
|
||
}
|
||
|
||
/deep/.u-form-item__body__right {
|
||
padding: 0rpx 150rpx 0 0;
|
||
}
|
||
|
||
/deep/ .u-form-item__body__left {
|
||
margin-left: 40rpx;
|
||
}
|
||
|
||
/deep/.u-form-item__body__right__message {
|
||
margin-left: 206rpx !important;
|
||
}
|
||
}
|
||
</style> |