| | |
| | | <u-input v-model="form.obj" placeholder="请输入工作单位" /> |
| | | </u-form-item> |
| | | <u-form-item label="辖区" prop="xq" left-icon="account-fill" label-width="200" :required="true"> |
| | | <u-input v-model="form.xq" type="select" placeholder="请选择辖区" :border="true" @click="deplxq" /> |
| | | <u-select v-model="showxq" mode="mutil-column-auto" :list="listxq" @confirm="confirmxq"></u-select> |
| | | <u-input v-model="form.xq" type="select" placeholder="请选择辖区" :border="true" @click="mapShow = true" /> |
| | | <!-- <u-select v-model="showxq" mode="mutil-column-auto" :list="listxq" @confirm="confirmxq"></u-select> --> |
| | | </u-form-item> |
| | | <u-form-item label="性别" label-width="200" left-icon="man"> |
| | | <u-radio-group v-model="form.sex"> |
| | |
| | | </u-radio> |
| | | </u-radio-group> |
| | | </u-form-item> |
| | | <u-form-item label="是否人脸登录" label-width="240" left-icon="server-man"> |
| | | <u-radio-group v-model="radioValue"> |
| | | <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> |
| | | |
| | | <div v-show="mapShow" style="position: fixed; bottom: 0; left: 0; width: 100%; height: 60%; z-index: 111; border-radius: 15px;"> |
| | | <map style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude" :markers="marker" |
| | | :scale="scale" :polyline="polyline"> |
| | | </map> |
| | | |
| | | <div v-show="mapShow"> |
| | | <div class="login-map-bc" @click="mapShow = false"> |
| | | |
| | | </div> |
| | | <div class="login-map-content"> |
| | | <u-icon class="login-map-close" name="close" @click="mapShow = false"></u-icon> |
| | | <map style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude" :markers="marker" |
| | | :scale="scale" :polyline="polyline"> |
| | | </map> |
| | | </div> |
| | | </div> |
| | | |
| | | <u-button @click="mapShow = true">打开</u-button> |
| | |
| | | export default { |
| | | data() { |
| | | return { |
| | | radioList: [{ |
| | | name: '是', |
| | | disabled: false |
| | | }, |
| | | { |
| | | name: '否', |
| | | disabled: false |
| | | } |
| | | ], |
| | | radioValue: '否', |
| | | mapShow: false, |
| | | latitude: 28.68, //纬度 |
| | | longitude: 115.85, //经度 |
| | |
| | | froms: 'name', |
| | | requireds: true, |
| | | placeholder: '请输入姓名' |
| | | }, |
| | | { |
| | | title: '身份证', |
| | | img: 'fingerprint', |
| | | froms: 'carId', |
| | | requireds: true, |
| | | placeholder: '请输入身份证' |
| | | }, |
| | | { |
| | | title: '手机号', |
| | |
| | | // 可以单个或者同时写两个触发验证方式 |
| | | trigger: ['change', 'blur'], |
| | | }], |
| | | carId: [{ |
| | | required: true, |
| | | message: '请输入身份证', |
| | | // 可以单个或者同时写两个触发验证方式 |
| | | trigger: ['change', 'blur'], |
| | | }, |
| | | { |
| | | validator: (rule, value, callback) => { |
| | | return this.$u.test.idCard(value); |
| | | }, |
| | | message: '身份证号码不正确', |
| | | trigger: ['change', 'blur'], |
| | | } |
| | | ], |
| | | // phone: [{ |
| | | // required: false, |
| | | // message: '请输入手机号', |
| | |
| | | console.log('当前位置的纬度:' + res.latitude); |
| | | that.latitude = res.latitude |
| | | that.longitude = res.longitude |
| | | that.marker = [ |
| | | { |
| | | id: 0, |
| | | latitude: res.latitude, //纬度 |
| | | longitude: res.longitude, //经度 |
| | | iconPath: '/static/img/map/location.png', //显示的图标 |
| | | rotate: 0, // 旋转度数 |
| | | width: 20, //宽 |
| | | height: 20, //高 |
| | | title: '位置', //标注点名 |
| | | alpha: 1, //透明度 |
| | | } |
| | | ] |
| | | that.marker = [{ |
| | | id: 0, |
| | | latitude: res.latitude, //纬度 |
| | | longitude: res.longitude, //经度 |
| | | iconPath: '/static/img/map/location.png', //显示的图标 |
| | | rotate: 0, // 旋转度数 |
| | | width: 20, //宽 |
| | | height: 20, //高 |
| | | title: '位置', //标注点名 |
| | | alpha: 1, //透明度 |
| | | }] |
| | | } |
| | | }) |
| | | }, |
| | |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .login-map-bc { |
| | | position: fixed; |
| | | top: 0; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | z-index: 111; |
| | | background: rgba(0, 0, 0, .3); |
| | | } |
| | | |
| | | .login-map-content { |
| | | position: fixed; |
| | | bottom: 0; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 60%; |
| | | z-index: 111; |
| | | border-radius: 15px; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .login-map-close { |
| | | position: absolute; |
| | | top: 10px; |
| | | right: 10px; |
| | | width: 20px; |
| | | height: 20px; |
| | | z-index: 11; |
| | | } |
| | | .warp { |
| | | display: flex; |
| | | align-items: center; |