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>
|