|
|
@@ -73,12 +73,14 @@
|
|
|
:disabled="isRoomEnd"
|
|
|
/>
|
|
|
</a-form-item>
|
|
|
+
|
|
|
<a-form-item label="位置" name="map">
|
|
|
<a-input
|
|
|
- v-model:value.trim="current.visitPassword"
|
|
|
- :placeholder="t('room.form.titleplaceHolder')"
|
|
|
- :maxlength="15"
|
|
|
+ v-model:value.trim="current.location"
|
|
|
+ placeholder=""
|
|
|
+ :maxlength="50"
|
|
|
show-count
|
|
|
+ id="location"
|
|
|
:disabled="isRoomEnd"
|
|
|
/>
|
|
|
<div style="margin: 10px 0"></div>
|
|
|
@@ -110,6 +112,28 @@
|
|
|
:disabled="isRoomEnd"
|
|
|
/>
|
|
|
</a-form-item>
|
|
|
+
|
|
|
+ <a-form-item
|
|
|
+ label="头像"
|
|
|
+ name="title"
|
|
|
+ :rules="[{ required: true, message: '' }]"
|
|
|
+ >
|
|
|
+ <a-upload
|
|
|
+ v-model:file-list="avatarFile"
|
|
|
+ name="file"
|
|
|
+ action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
|
|
+ :headers="{
|
|
|
+ authorization: 'authorization-text'
|
|
|
+ }"
|
|
|
+ @change="handleAvatarChange"
|
|
|
+ >
|
|
|
+ <div class="add-item-icon">
|
|
|
+ <a-button shape="circle" class="button" type="primary">
|
|
|
+ <plus-outlined class="add-room-icon" />
|
|
|
+ </a-button>
|
|
|
+ </div>
|
|
|
+ </a-upload>
|
|
|
+ </a-form-item>
|
|
|
<!-- <h4>{{ t('room.form.selectScene') }}</h4> -->
|
|
|
<a-form-item
|
|
|
:label="t('room.form.addScene')"
|
|
|
@@ -296,6 +320,8 @@ import { addAuthUser } from '@/api'
|
|
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
|
|
|
import { useScript } from '@/hook/useScript'
|
|
|
import { onMounted } from 'vue'
|
|
|
+import type { UploadChangeParam } from 'ant-design-vue'
|
|
|
+
|
|
|
dayjs.extend(duration)
|
|
|
// const titleValidator = ref({
|
|
|
// validator: (_, value) =>
|
|
|
@@ -326,6 +352,9 @@ export default defineComponent({
|
|
|
const isRoomEnd = computed(() => props.room?.roomStatus === 2)
|
|
|
const { getLocale } = useLocale()
|
|
|
const { t } = useI18n()
|
|
|
+
|
|
|
+ const avatarFile = ref([])
|
|
|
+
|
|
|
const returnLocale = computed(() => {
|
|
|
if (unref(getLocale).includes('zh')) {
|
|
|
return 'zh'
|
|
|
@@ -482,26 +511,81 @@ export default defineComponent({
|
|
|
// const center = [120.262337, 30.178285]
|
|
|
const map = new AMap.Map(unref(mapRef), {
|
|
|
zoom: 15,
|
|
|
+ resizeEnable: true
|
|
|
// center: center,
|
|
|
- viewMode: '3D',
|
|
|
- resizeEnable: true,
|
|
|
- floorControl: true,
|
|
|
- showIndoorMap: true
|
|
|
- })
|
|
|
-
|
|
|
- AMap.plugin('AMap.Geocoder', function () {
|
|
|
- var geocoder = new AMap.Geocoder({
|
|
|
- city: '全国' // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
|
|
|
- })
|
|
|
- console.log('geocoder', geocoder)
|
|
|
+ // viewMode: '3D',
|
|
|
+ // resizeEnable: true,
|
|
|
+ // floorControl: true,
|
|
|
+ // showIndoorMap: true
|
|
|
})
|
|
|
- console.log('map', map)
|
|
|
+ AMap.plugin(
|
|
|
+ [
|
|
|
+ 'AMap.Scale',
|
|
|
+ 'AMap.Geocoder',
|
|
|
+ 'AMap.Toolbar',
|
|
|
+ 'AMap.AutoComplete',
|
|
|
+ 'AMap.PlaceSearch',
|
|
|
+ 'AMap.Geolocation'
|
|
|
+ ],
|
|
|
+ function () {
|
|
|
+ const autoOptions = {
|
|
|
+ city: '珠海',
|
|
|
+ input: 'location'
|
|
|
+ }
|
|
|
+ const autocomplete = new AMap.Autocomplete(autoOptions)
|
|
|
+ const placeSearch = new AMap.PlaceSearch({
|
|
|
+ city: '珠海', // 默认城市，一定要有，不然没有放大效果
|
|
|
+ map: map // 地图，选中会有放大功能，绑定上面创建的地图即可
|
|
|
+ })
|
|
|
+ AMap.Event.addListener(autocomplete, 'select', function (e: any) {
|
|
|
+ placeSearch.search(e.poi.name)
|
|
|
+ console.log('location', e.poi.location) // 获取选中的的地址的经纬度
|
|
|
+ })
|
|
|
+ var geolocation = new AMap.Geolocation({
|
|
|
+ // 是否使用高精度定位，默认：true
|
|
|
+ enableHighAccuracy: true,
|
|
|
+ // 设置定位超时时间，默认：无穷大
|
|
|
+ timeout: 10000,
|
|
|
+ // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
|
|
|
+ buttonOffset: new AMap.Pixel(10, 20),
|
|
|
+ // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
|
|
|
+ zoomToAccuracy: true,
|
|
|
+ // 定位按钮的排放位置, RB表示右下
|
|
|
+ buttonPosition: 'RB'
|
|
|
+ })
|
|
|
+
|
|
|
+ geolocation.getCurrentPosition()
|
|
|
+ AMap.Event.addListener(geolocation, 'complete', onComplete)
|
|
|
+ AMap.Event.addListener(geolocation, 'error', onError)
|
|
|
+
|
|
|
+ function onComplete(data: any) {
|
|
|
+ console.log('data', data)
|
|
|
+ // data是具体的定位信息
|
|
|
+ }
|
|
|
+
|
|
|
+ function onError(data: any) {
|
|
|
+ console.log('data', data)
|
|
|
+ // 定位出错
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
|
initMap()
|
|
|
})
|
|
|
|
|
|
+ const handleAvatarChange = (info: UploadChangeParam) => {
|
|
|
+ if (info.file.status !== 'uploading') {
|
|
|
+ console.log(info.file, info.fileList)
|
|
|
+ }
|
|
|
+ if (info.file.status === 'done') {
|
|
|
+ message.success(`${info.file.name} file uploaded successfully`)
|
|
|
+ } else if (info.file.status === 'error') {
|
|
|
+ message.error(`${info.file.name} file upload failed.`)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
return {
|
|
|
handleNickRegex,
|
|
|
returnLocale,
|
|
|
@@ -529,7 +613,9 @@ export default defineComponent({
|
|
|
ExclamationCircleOutlined,
|
|
|
onRangeChange,
|
|
|
onCancel,
|
|
|
- mapRef
|
|
|
+ mapRef,
|
|
|
+ avatarFile,
|
|
|
+ handleAvatarChange
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
@@ -696,4 +782,17 @@ export default defineComponent({
|
|
|
margin: 0;
|
|
|
}
|
|
|
}
|
|
|
+.add-item-icon {
|
|
|
+ width: 120px;
|
|
|
+ height: 120px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border: 1px solid #ebedf0;
|
|
|
+ .button {
|
|
|
+ background: linear-gradient(144deg, #00aefb 0%, #0076f6 100%);
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
gemercheung