wangyifang
/
dangxingjiaoyujidi-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

地图选择

Browse Source
master
lion 5 days ago
parent 3551b419d8
commit 4a4d951b36
6 changed files with 829 additions and 211 deletions
Show Stats Download Patch File Download Diff File

2
.env.development
Unescape View File

@ -2,6 +2,6 @@
ENV = 'development'
# base api
VUE_APP_BASE_API = 'https://leyitest.ali251.langye.net'
VUE_APP_BASE_API = 'https://leyiyuyue.szgmbwg.org.cn'
#VUE_APP_BASE_API = 'https://leyiyuyue.szgmbwg.org.cn'

1
package.json
Unescape View File

@ -51,6 +51,7 @@
"eslint": "6.7.2",
"eslint-plugin-vue": "6.2.2",
"html-webpack-plugin": "3.2.0",
"less": "^3.13.1",
"mockjs": "1.0.1-beta3",
"runjs": "4.3.2",
"sass": "1.26.8",

5
public/index.html
Unescape View File

@ -11,11 +11,10 @@
<script src="http://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script> -->
<script>
window._AMapSecurityConfig = {
securityJsCode: 'dbc95be996393c8c69e3958bb945ea08',
securityJsCode: '2d2023de7db0b240c0d6c7098ed1d402',
}
</script>
<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.11&key=53919608dd142b8d4498b43bfdef0792&plugin=AMap.PlaceSearch'></script>
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=f58a846dfaaae0d614c1a8aaa7aa123d&plugin=AMap.PlaceSearch,AMap.Geocoder,AMap.AutoComplete,AMap.CitySearch"></script>
</head>
<body>
<noscript>

618
src/components/InputMap/index.vue
Unescape View File

@ -0,0 +1,618 @@
<template>
<div class="input-map">
<el-input
ref="main"
readonly
:value="displayAddress"
:placeholder="placeholder"
clearable
@clear="handleClear"
>
<el-button slot="append" @click="handleShow">选择</el-button>
</el-input>
<el-dialog
title="选择地点"
:visible.sync="box"
width="80%"
append-to-body
modal-append-to-body
:close-on-click-modal="false"
@opened="handleDialogOpened"
@closed="handleDialogClosed"
>
<div v-if="box" class="input-map__content">
<div class="input-map__search-row">
<input
ref="searchInput"
v-model="keyword"
class="input-map__search"
type="text"
placeholder="输入关键字搜索地点"
@keydown.enter.prevent="searchKeyword"
/>
<el-button type="primary" native-type="button" :loading="searching" @click="searchKeyword">搜索</el-button>
</div>
<div class="input-map__layout">
<div :id="containerId" class="input-map__container"></div>
<div class="input-map__result">
<div
class="input-map__tip"
:class="'input-map__tip--' + statusType"
>{{ statusText }}</div>
<div
v-for="(item, index) in searchResults"
:key="index"
class="input-map__result-item"
@click="selectSearchResult(item)"
>
<div class="input-map__result-name">{{ item.name }}</div>
<div class="input-map__result-address">{{ formatPoiAddress(item) }}</div>
</div>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="box = false">取 消</el-button>
<el-button type="primary" @click="handleSubmit">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
let mapInstanceSeed = 0
function withTimeout(promise, ms, message) {
return new Promise((resolve, reject) => {
const timer = setTimeout(() => {
reject(new Error(message))
}, ms)
promise.then(
(value) => {
clearTimeout(timer)
resolve(value)
},
(err) => {
clearTimeout(timer)
reject(err)
}
)
})
}
export default {
name: 'InputMap',
props: {
value: {
type: Array,
default: () => []
},
placeholder: {
type: String,
default: '请选择地图'
},
params: {
type: Object,
default: () => ({})
},
city: {
type: String,
default: '苏州'
}
},
data() {
mapInstanceSeed += 1
const uid = mapInstanceSeed
return {
keyword: '',
address: '',
poi: {},
marker: null,
map: null,
placeSearch: null,
autoComplete: null,
box: false,
mapReady: false,
searching: false,
searchResults: [],
statusText: '输入关键字后点击搜索',
statusType: 'info',
initPromise: null,
containerId: `map__container_${uid}`
}
},
computed: {
displayAddress() {
return this.value && this.value[2] ? this.value[2] : ''
},
longitude() {
return this.value && this.value[0] ? this.value[0] : ''
},
latitude() {
return this.value && this.value[1] ? this.value[1] : ''
},
mapOptions() {
const options = Object.assign({}, this.params)
delete options.city
return options
}
},
watch: {
value: {
handler(val) {
if (val && val.length && val[2]) {
this.address = val[2]
this.keyword = val[2]
}
},
immediate: true,
deep: true
}
},
methods: {
setStatus(text, type) {
this.statusText = text
this.statusType = type || 'info'
},
showToast(message, type) {
if (this.$message) {
this.$message({
type: type || 'info',
message,
zIndex: 10000
})
}
},
formatPoiAddress(item) {
if (!item) {
return '暂无地址'
}
if (item.address && String(item.address).length) {
return item.address
}
const parts = [item.pname, item.cityname, item.adname].filter(Boolean)
return parts.length ? parts.join('') : '暂无地址'
},
handleShow() {
if (this.$refs.main) {
this.$refs.main.blur()
}
this.searchResults = []
this.setStatus('输入关键字后点击搜索', 'info')
this.box = true
},
handleDialogOpened() {
this.$nextTick(() => {
this.ensureReady().catch((err) => {
console.error('地图初始化失败', err)
this.setStatus('地图初始化失败：' + (err.message || '请刷新页面后重试'), 'error')
this.showToast('地图初始化失败，请刷新页面后重试', 'error')
})
})
},
handleDialogClosed() {
this.destroyMap()
},
handleClear() {
this.poi = {}
this.keyword = ''
this.searchResults = []
this.setStatus('输入关键字后点击搜索', 'info')
this.$emit('input', ['', '', ''])
},
handleSubmit() {
if (!this.poi.longitude || !this.poi.latitude) {
this.setStatus('请先选择地点', 'warning')
this.showToast('请先选择地点', 'warning')
return
}
this.$emit('input', [
this.poi.longitude,
this.poi.latitude,
this.poi.formattedAddress || this.address
])
this.box = false
},
getLngLat(location) {
if (!location) {
return { lng: '', lat: '' }
}
if (typeof location.getLng === 'function') {
return { lng: location.getLng(), lat: location.getLat() }
}
return {
lng: location.lng || location.R || '',
lat: location.lat || location.P || location.Q || ''
}
},
setSelectedPoi(poi, formattedAddress) {
const location = this.getLngLat(poi.location)
if (!location.lng || !location.lat) {
return
}
this.poi = {
formattedAddress: formattedAddress || poi.name || poi.address || this.keyword,
longitude: location.lng,
latitude: location.lat
}
this.address = this.poi.formattedAddress
this.keyword = this.poi.formattedAddress
this.addMarker(location.lng, location.lat)
},
selectSearchResult(item) {
this.setSelectedPoi(item, item.name)
this.setStatus('已选择：' + item.name, 'success')
},
addMarker(lng, lat) {
if (!this.map || !window.AMap) {
return
}
this.clearMarker()
this.marker = new window.AMap.Marker({
position: [lng, lat]
})
this.marker.setMap(this.map)
this.map.setCenter([lng, lat])
},
clearMarker() {
if (this.marker) {
this.marker.setMap(null)
this.marker = null
}
},
loadPlugin(name, options) {
const opts = Object.assign({ optional: false, timeout: 8000 }, options)
return new Promise((resolve, reject) => {
if (!window.AMap) {
if (opts.optional) {
resolve(false)
return
}
reject(new Error('高德地图脚本未加载'))
return
}
const ctorName = name.replace(/^AMap\./, '')
if (window.AMap[ctorName]) {
resolve(true)
return
}
let settled = false
const finish = (ok) => {
if (settled) {
return
}
settled = true
clearTimeout(timer)
if (ok || opts.optional) {
resolve(ok)
} else {
reject(new Error(name + ' 插件加载超时'))
}
}
const timer = setTimeout(() => finish(false), opts.timeout)
try {
window.AMap.plugin([name], () => finish(!!window.AMap[ctorName]))
} catch (err) {
finish(false)
}
})
},
getAddress(lng, lat) {
this.loadPlugin('AMap.Geocoder').then(() => {
const geocoder = new window.AMap.Geocoder({})
geocoder.getAddress([lng, lat], (status, result) => {
if (status === 'complete' && result.info === 'OK') {
this.setSelectedPoi({
location: { lng, lat },
name: result.regeocode.formattedAddress
}, result.regeocode.formattedAddress)
}
})
}).catch((err) => {
console.error('逆地理编码失败', err)
})
},
getSearchErrorInfo(status, result) {
let info = (result && result.info) || status || '未知错误'
if (status === 'error' && !(result && result.info)) {
info = 'Key 日调用量可能已超限，请登录高德控制台检查配额'
}
if (info === 'USER_DAILY_QUERY_OVER_LIMIT') {
info = 'Key 日调用量已超限，请登录高德控制台查看配额'
}
if (info === 'USERKEY_PLAT_NOMATCH') {
info = 'Key 类型不正确，请使用 Web端(JS API) 类型的 Key'
}
if (info === 'INVALID_USER_SCODE') {
info = '安全密钥(securityJsCode)配置不正确'
}
return info
},
createPlaceSearch() {
if (this.placeSearch) {
return this.placeSearch
}
if (!window.AMap || !window.AMap.PlaceSearch) {
throw new Error('PlaceSearch 插件不可用')
}
this.placeSearch = new window.AMap.PlaceSearch({
city: this.city,
citylimit: false,
pageSize: 10
})
return this.placeSearch
},
initAutoComplete() {
if (!window.AMap || !window.AMap.AutoComplete) {
return
}
const inputEl = this.$refs.searchInput
if (!inputEl || this.autoComplete) {
return
}
try {
this.autoComplete = new window.AMap.AutoComplete({
city: this.city,
input: inputEl
})
this.autoComplete.on('select', (e) => {
const poi = e.poi || {}
if (poi.name) {
this.keyword = poi.name
this.searchKeyword()
}
})
} catch (err) {
console.warn('AutoComplete 初始化失败，可手动搜索', err)
}
},
initSearch() {
return withTimeout(
this.loadPlugin('AMap.PlaceSearch').then(() => {
this.createPlaceSearch()
this.mapReady = true
// 输入联想为可选能力，加载失败不影响手动搜索
this.loadPlugin('AMap.AutoComplete', { optional: true, timeout: 3000 })
.then((loaded) => {
if (loaded) {
this.initAutoComplete()
}
})
}),
10000,
'搜索组件初始化超时，请关闭弹窗后重试'
)
},
initMap() {
return new Promise((resolve, reject) => {
if (!window.AMap) {
reject(new Error('高德地图脚本未加载'))
return
}
const containerEl = document.getElementById(this.containerId)
if (!containerEl) {
reject(new Error('地图容器未就绪'))
return
}
if (this.map) {
this.clearMapInstance()
}
const center = this.longitude && this.latitude
? [this.longitude, this.latitude]
: [120.62582, 31.302402]
this.map = new window.AMap.Map(this.containerId, Object.assign({
zoom: 13,
center
}, this.mapOptions))
this.map.on('click', (e) => {
const lng = e.lnglat.lng || e.lnglat.R
const lat = e.lnglat.lat || e.lnglat.P || e.lnglat.Q
this.getAddress(lng, lat)
})
setTimeout(() => {
if (this.map && typeof this.map.resize === 'function') {
this.map.resize()
}
this.initSearch()
.then(() => {
if (this.longitude && this.latitude) {
this.addMarker(this.longitude, this.latitude)
}
resolve()
})
.catch(reject)
}, 300)
})
},
ensureReady() {
if (this.mapReady && this.placeSearch && this.map) {
return Promise.resolve()
}
if (this.initPromise) {
return this.initPromise
}
this.initPromise = withTimeout(
this.initMap(),
15000,
'地图初始化超时，请关闭弹窗后重试'
)
.catch((err) => {
this.mapReady = false
throw err
})
.finally(() => {
this.initPromise = null
})
return this.initPromise
},
doPlaceSearch(keyword) {
return new Promise((resolve, reject) => {
const search = this.createPlaceSearch()
const timer = setTimeout(() => {
reject(new Error('搜索请求超时，请检查网络或高德 Key 配置'))
}, 10000)
search.search(keyword, (status, result) => {
clearTimeout(timer)
if (status === 'complete' && result.poiList && result.poiList.pois && result.poiList.pois.length) {
this.searchResults = result.poiList.pois
this.setStatus('找到 ' + this.searchResults.length + ' 个结果', 'success')
resolve()
return
}
if (status === 'complete') {
this.searchResults = []
this.setStatus('未找到相关地点，请更换关键字', 'warning')
resolve()
return
}
const info = this.getSearchErrorInfo(status, result)
this.searchResults = []
reject(new Error(info))
})
})
},
searchKeyword() {
const keyword = (this.keyword || '').trim()
if (!keyword) {
this.setStatus('请输入搜索关键字', 'warning')
this.showToast('请输入搜索关键字', 'warning')
return
}
if (this.searching) {
return
}
this.searching = true
this.searchResults = []
this.setStatus('搜索中...', 'info')
this.ensureReady()
.then(() => {
if (this.map && typeof this.map.resize === 'function') {
this.map.resize()
}
return this.doPlaceSearch(keyword)
})
.catch((err) => {
const message = (err && err.message) || '搜索失败，请稍后重试'
this.setStatus(message, 'error')
this.showToast(message, 'error')
})
.finally(() => {
this.searching = false
})
},
clearMapInstance() {
if (this.placeSearch) {
this.placeSearch.clear()
this.placeSearch = null
}
this.autoComplete = null
this.clearMarker()
if (this.map) {
this.map.destroy()
this.map = null
}
},
destroyMap() {
this.mapReady = false
this.searching = false
this.searchResults = []
this.initPromise = null
this.setStatus('输入关键字后点击搜索', 'info')
this.clearMapInstance()
}
}
}
</script>
<style lang="scss">
.input-map {
&__search-row {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
&__search {
flex: 1;
height: 40px;
padding: 0 15px;
border: 1px solid #dcdfe6;
border-radius: 4px;
font-size: 14px;
box-sizing: border-box;
outline: none;
&:focus {
border-color: #409eff;
}
}
&__layout {
display: flex;
height: 450px;
gap: 10px;
}
&__container {
flex: 1;
height: 100%;
min-width: 0;
}
&__result {
width: 300px;
height: 100%;
overflow-y: auto;
background: #fff;
border: 1px solid #ebeef5;
box-sizing: border-box;
}
&__tip {
padding: 16px;
font-size: 13px;
text-align: center;
line-height: 1.6;
word-break: break-all;
&--info {
color: #909399;
}
&--success {
color: #67c23a;
}
&--warning {
color: #e6a23c;
}
&--error {
color: #f56c6c;
}
}
&__result-item {
padding: 12px 14px;
border-bottom: 1px solid #f0f0f0;
cursor: pointer;
&:hover {
background: #f5f7fa;
}
}
&__result-name {
font-size: 14px;
color: #303133;
margin-bottom: 4px;
}
&__result-address {
font-size: 12px;
color: #909399;
line-height: 1.5;
}
}
</style>

412
src/views/active/activity.vue
Unescape View File

@ -55,7 +55,7 @@
</el-pagination>
</div>
</div>
</div>
</div>
<!-- 选择预约时段设置 -->
<el-dialog title="预约时段" :visible.sync="showRules" width="60%">
<el-form :model="currentVisit" :rules="rules" ref="form" label-position="right" :label-width="formLabelWidth">
@ -71,14 +71,14 @@
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10" :offset="2">
<el-form-item label="特殊时段" prop="special">
<el-select v-model="specialVisitid" @change="changeSpecialVisit" placeholder="请选择特殊时段" style="width:100%">
<el-option v-for="item in specialVisitList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10" :offset="2">
<el-form-item label="特殊时段" prop="special">
<el-select v-model="specialVisitid" @change="changeSpecialVisit" placeholder="请选择特殊时段" style="width:100%">
<el-option v-for="item in specialVisitList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-table :data="visitInfo" height="400" class="v-table" style="width: 100%;margin-bottom: 20px;">
@ -130,72 +130,72 @@
<el-form-item label="活动名称" prop="name">
<el-input v-model="form.name" placeholder="请填写活动名称" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="10" :offset="4">
<el-form-item label="预定截止" prop="end_plan">
<el-date-picker style="width:100%" v-model="form.end_plan" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择预定截止时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="活动时间" prop="dateRange">
<el-date-picker style="width:100%" v-model="dateRange" type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="活动开始日期"
end-placeholder="活动结束日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="24">
<div class="table-tree tableswidth">
<div style="display: flex;justify-content: space-between;margin-right: 20px;margin-bottom: 10px;">
<div style="font-size: 18px;color: #303133;">活动场次</div>
<Button type="primary" @click="addRow()" size="small" style="margin-left: 10px;" ghost>新增</Button>
</div>
<el-table :data="form.numbers_list" height="200" class="v-table" style="width: 100%;margin-bottom: 20px;">
<el-table-column type="index" align="center">
</el-table-column>
<el-table-column prop="name" label="活动名称">
<template slot-scope="scope">
<el-input v-model="scope.row.name" placeholder="请填写活动名称" autocomplete="off"></el-input>
</template>
</el-table-column>
<el-table-column prop="start_time" label="活动时间">
<template slot-scope="scope">
<el-date-picker style="width:100%" v-model="scope.row.dateRange" type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="活动开始日期"
end-placeholder="活动结束日期">
</el-date-picker>
</template>
</el-table-column>
<el-table-column prop="end_time" label="预定截止">
<template slot-scope="scope">
<el-date-picker style="width:100%" v-model="scope.row.end_plan" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择预定截止时间">
</el-date-picker>
</template>
</el-table-column>
<el-table-column prop="total" label="总人数">
<template slot-scope="scope">
<el-input v-model="scope.row.total" placeholder="请填写总人数(0为不限制)" autocomplete="off"></el-input>
</template>
</el-table-column>
<el-table-column prop="total" label="预约时段">
<template slot-scope="scope">
<el-button type="primary" @click="openVisit(scope.$index)">
{{form.numbers_list[scope.$index].time?form.numbers_list[scope.$index].time:currentVisit.text}}
</el-button>
</template>
</el-table-column>
<el-table-column label="操作" width="120px" align="center">
<template slot-scope="scope">
<el-input style="display: none;" type="hidden" v-model="scope.row.id"></el-input>
<Button type="error" @click="delRow(scope.$index,scope.row.id)" size="small" style="margin-left: 10px;"
ghost>删除</Button>
</template>
</el-table-column>
</el-table>
</div>
</el-col>
<el-col :span="10" :offset="4">
<el-form-item label="预定截止" prop="end_plan">
<el-date-picker style="width:100%" v-model="form.end_plan" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择预定截止时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="活动时间" prop="dateRange">
<el-date-picker style="width:100%" v-model="dateRange" type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="活动开始日期"
end-placeholder="活动结束日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="24">
<div class="table-tree tableswidth">
<div style="display: flex;justify-content: space-between;margin-right: 20px;margin-bottom: 10px;">
<div style="font-size: 18px;color: #303133;">活动场次</div>
<Button type="primary" @click="addRow()" size="small" style="margin-left: 10px;" ghost>新增</Button>
</div>
<el-table :data="form.numbers_list" height="200" class="v-table" style="width: 100%;margin-bottom: 20px;">
<el-table-column type="index" align="center">
</el-table-column>
<el-table-column prop="name" label="活动名称">
<template slot-scope="scope">
<el-input v-model="scope.row.name" placeholder="请填写活动名称" autocomplete="off"></el-input>
</template>
</el-table-column>
<el-table-column prop="start_time" label="活动时间">
<template slot-scope="scope">
<el-date-picker style="width:100%" v-model="scope.row.dateRange" type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="活动开始日期"
end-placeholder="活动结束日期">
</el-date-picker>
</template>
</el-table-column>
<el-table-column prop="end_time" label="预定截止">
<template slot-scope="scope">
<el-date-picker style="width:100%" v-model="scope.row.end_plan" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择预定截止时间">
</el-date-picker>
</template>
</el-table-column>
<el-table-column prop="total" label="总人数">
<template slot-scope="scope">
<el-input v-model="scope.row.total" placeholder="请填写总人数(0为不限制)" autocomplete="off"></el-input>
</template>
</el-table-column>
<el-table-column prop="total" label="预约时段">
<template slot-scope="scope">
<el-button type="primary" @click="openVisit(scope.$index)">
{{form.numbers_list[scope.$index].time?form.numbers_list[scope.$index].time:currentVisit.text}}
</el-button>
</template>
</el-table-column>
<el-table-column label="操作" width="120px" align="center">
<template slot-scope="scope">
<el-input style="display: none;" type="hidden" v-model="scope.row.id"></el-input>
<Button type="error" @click="delRow(scope.$index,scope.row.id)" size="small" style="margin-left: 10px;"
ghost>删除</Button>
</template>
</el-table-column>
</el-table>
</div>
</el-col>
<el-col :span="10">
<el-form-item label="所属区域" prop="area">
@ -214,13 +214,13 @@
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10" >
<el-form-item label="地址" prop="address">
<avue-input-map :params="mapparams" placeholder="请选择地图" v-model="mapform"></avue-input-map>
</el-form-item>
</el-col>
</el-col>
<el-col :span="10" >
<el-form-item label="地址" prop="address">
<input-map :params="mapparams" city="苏州" placeholder="请选择地图" v-model="mapform"></input-map>
</el-form-item>
</el-col>
<el-col :span="10" :offset="4">
<el-form-item label="关联内容" prop="con">
@ -276,23 +276,23 @@
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="7" :offset="1">
<el-form-item class="longtext" label="个人最大预定数量" prop="person_max_count">
<el-input v-model="form.person_max_count" placeholder="请填写个人最大预定数量" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="7" :offset="1">
<el-form-item class="longtext" label="团队最大预定数" prop="team_max_count">
<el-input v-model="form.team_max_count" placeholder="请填写团队最大预定数" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="7" :offset="1">
<el-form-item class="longtext" label="团队最小预定数" prop="team_min_count">
<el-input v-model="form.team_min_count" placeholder="请填写团队最小预定数" autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="7" :offset="1">
<el-form-item class="longtext" label="个人最大预定数量" prop="person_max_count">
<el-input v-model="form.person_max_count" placeholder="请填写个人最大预定数量" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="7" :offset="1">
<el-form-item class="longtext" label="团队最大预定数" prop="team_max_count">
<el-input v-model="form.team_max_count" placeholder="请填写团队最大预定数" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="7" :offset="1">
<el-form-item class="longtext" label="团队最小预定数" prop="team_min_count">
<el-input v-model="form.team_min_count" placeholder="请填写团队最小预定数" autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item class='nextlabel' label="海报图(建议上传图片宽度750px)" prop="cover">
<el-upload action="/api/admin/upload-file" list-type="picture-card" :file-list="coverlist" ref="pictureUpload"
@ -370,7 +370,7 @@
<script>
import LxHeader from "@/components/LxHeader/index.vue";
import Tinymce from '@/components/Tinymce'
import AvueMap from 'avue-plugin-map'
import InputMap from '@/components/InputMap/index.vue'
import {
getToken
} from '@/utils/auth'
@ -380,22 +380,22 @@
save,
del,
get,
chanStatus,
chanStatus,
delNum
} from "../../api/active/activity.js";
import {
listvisit,
get as getVisit
} from "../../api/resource/visitresource.js";
import {
listvisitspecial,
get as getSpecialVisit
} from "../../api/resource/visitresource.js";
import {
listvisitspecial,
get as getSpecialVisit
} from "../../api/resource/visitspecial.js";
export default {
components: {
LxHeader,
Tinymce,
AvueMap
InputMap
},
data() {
return {
@ -469,26 +469,26 @@
}, {
id: 2,
value: "成年人"
},
},
// {
// id: 3,
// value: "初中生"
// }, {
// id: 4,
// value: "高中生"
// },
// },
{
id: 5,
value: "不限"
}]
},
mapparams: {
zoom: 11,
zoom: 11
},
mapform: [],
form: {
person_max_count:8,
team_max_count:100,
form: {
person_max_count:8,
team_max_count:100,
team_min_count:8,
name: "",
area: "",
@ -509,7 +509,7 @@
banners_list: [],
join_type: 0,
numbers_list: [{
name: "",
name: "",
dateRange:"",
start_time: "",
end_time: "",
@ -519,17 +519,17 @@
rule_id: "",
time: ""
}],
},
// 选择预约
currentVisit:{
text:"选择预约时段"
},
// 选择预约
currentVisit:{
text:"选择预约时段"
},
visitList: [], // 预约时段列表
visitInfo: [], // 预约时段详情
visitid: "",
specialVisitid: "",
visitid: "",
specialVisitid: "",
specialVisitList: [],
showRules: false,
showRules: false,
dateRange: "",
showTime: "",
@ -634,12 +634,12 @@
this.form.address = newVal[2];
}
},
methods: {
methods: {
// 增加活动场次
addRow() {
var len = this.form.numbers_list.length;
this.form.numbers_list.push({
name: "",
name: "",
dateRange:"",
start_time: "",
end_time: "",
@ -649,49 +649,49 @@
rule_id: "",
time: ""
});
},
},
// 删除活动场次
delRow(index,id) {
var that = this
if (id) {
delNum(id).then(response => {
that.$Message.success('删除成功');
that.form.numbers_list.splice(index, 1);
}).catch(error => {
console.log(error)
reject(error)
})
} else {
this.form.rules_list.splice(index, 1);
var that = this
if (id) {
delNum(id).then(response => {
that.$Message.success('删除成功');
that.form.numbers_list.splice(index, 1);
}).catch(error => {
console.log(error)
reject(error)
})
} else {
this.form.rules_list.splice(index, 1);
}
},
// 打开预约时段
openVisit(index){
this.showRules=true
this.currentVisit.index = index
},
},
// 打开预约时段
openVisit(index){
this.showRules=true
this.currentVisit.index = index
},
// 获取预约时段规则
changeVisit(val) {
console.log("visit", val)
console.log("visit", val)
this.specialVisitid = ""
getVisit(val).then(res => {
this.visitInfo = res.rules
})
},
// 获取特殊预约时段规则
changeSpecialVisit(val) {
console.log("Specialvisit", val)
this.visitid = ""
getSpecialVisit(val).then(res => {
this.visitInfo = res.rules
})
},
// 选择 预约时段
chooseVisit(val){
this.form.numbers_list[this.currentVisit.index]['rule_id'] = val.id
this.form.numbers_list[this.currentVisit.index]['time'] = val.start_time + "-" + val.end_time
this.showRules = false
console.log("this.form.numbers_list",this.form.numbers_list)
},
// 获取特殊预约时段规则
changeSpecialVisit(val) {
console.log("Specialvisit", val)
this.visitid = ""
getSpecialVisit(val).then(res => {
this.visitInfo = res.rules
})
},
// 选择 预约时段
chooseVisit(val){
this.form.numbers_list[this.currentVisit.index]['rule_id'] = val.id
this.form.numbers_list[this.currentVisit.index]['time'] = val.start_time + "-" + val.end_time
this.showRules = false
console.log("this.form.numbers_list",this.form.numbers_list)
},
initLoad() {
var that = this;
@ -722,7 +722,7 @@
this.visitList = res.data;
}).catch(error => {
})
})
listvisitspecial({
page: 1,
page_size: 999,
@ -740,12 +740,12 @@
that.form = result;
that.dateRange = [result.start_time, result.end_time];
that.mapform = [result.longitude, result.latitude, result.address]
console.log(that.dateRange);
let numArr = []
for(var k of result.numbers){
k.dateRange = [k.start_time,k.end_time]
numArr.push(k)
}
console.log(that.dateRange);
let numArr = []
for(var k of result.numbers){
k.dateRange = [k.start_time,k.end_time]
numArr.push(k)
}
that.form.numbers_list = numArr
// that.showTime = result.start_time.substring(11, result.start_time.length);
// that.form.end_time = result.end_time.substring(11, result.end_time.length);
@ -786,46 +786,46 @@
},
submitForm(formName) {
var that = this;
this.form.start_time = this.dateRange[0];
this.form.end_time = this.dateRange[1];
if (!this.form.start_time || !this.form.end_time) {
that.$message.error('请选择活动时间');
return false;
}
//比较预约截止不能大于活动开始时间
// let checktime = that.compareDate(that.form.start_time, that.form.end_plan);
// if (!checktime) {
// that.$message.error('截止时间不能晚于开始时间');
// return false;
// }
let upTotal = 0
if(that.form.numbers_list.length==0){
that.$message.error('请填写活动场次');
return false;
}
for(var k of that.form.numbers_list){
console.log(!k.name)
if(!k.name){
that.$message.error('请填写活动场次名称');
return false;
}
k.start_time = k.dateRange[0];
k.end_time = k.dateRange[1];
k.date= this.$moment(k.dateRange[0]).format("YYYY-MM-DD");
if (!k.start_time || !k.end_time) {
that.$message.error('请选择活动场次时间');
return false;
}
let checktime = that.compareDate(k.start_time, k.end_plan);
if (!checktime) {
that.$message.error('截止时间不能晚于开始时间');
return false;
}
upTotal += parseInt(k.total)
}
var that = this;
this.form.start_time = this.dateRange[0];
this.form.end_time = this.dateRange[1];
if (!this.form.start_time || !this.form.end_time) {
that.$message.error('请选择活动时间');
return false;
}
//比较预约截止不能大于活动开始时间
// let checktime = that.compareDate(that.form.start_time, that.form.end_plan);
// if (!checktime) {
// that.$message.error('截止时间不能晚于开始时间');
// return false;
// }
let upTotal = 0
if(that.form.numbers_list.length==0){
that.$message.error('请填写活动场次');
return false;
}
for(var k of that.form.numbers_list){
console.log(!k.name)
if(!k.name){
that.$message.error('请填写活动场次名称');
return false;
}
k.start_time = k.dateRange[0];
k.end_time = k.dateRange[1];
k.date= this.$moment(k.dateRange[0]).format("YYYY-MM-DD");
if (!k.start_time || !k.end_time) {
that.$message.error('请选择活动场次时间');
return false;
}
let checktime = that.compareDate(k.start_time, k.end_plan);
if (!checktime) {
that.$message.error('截止时间不能晚于开始时间');
return false;
}
upTotal += parseInt(k.total)
}
that.form.total = upTotal
@ -843,8 +843,8 @@
"upload_id": m.upload_id
});
}
that.form.banners_list = listUrl;
console.log("this.form",this.form)
that.form.banners_list = listUrl;
console.log("this.form",this.form)
// return
this.$refs[formName].validate((valid) => {
if (valid) {
@ -1016,4 +1016,4 @@
width: 100% !important;
text-align: left;
}
</style>
</style>

2
vue.config.js
Unescape View File

@ -25,7 +25,7 @@ module.exports = {
* Detail: https://cli.vuejs.org/config/#publicpath
*/
publicPath: '/admin/',
outputDir: '/Users/mac/Documents/朗业/2022/l-乐益预约/service',
outputDir: '/Users/mac/Documents/朗业/2022/l-乐益预约/yuyue/public/admin',
assetsDir: 'static',
css: {
loaderOptions: { // 向 CSS 相关的 loader 传递选项

Write Preview
Loading…
Cancel
Save