chenkainan
1 year ago
26 changed files with 11907 additions and 0 deletions
@ -0,0 +1,5 @@ |
|||||
|
NODE_ENV='development' |
||||
|
# 请求域名前缀 |
||||
|
VUE_APP_URL='https://tongli.sz-trip.com' |
||||
|
# 打包后输出目录 |
||||
|
VUE_APP_OUTPUTDIR='dist_dev' |
||||
@ -0,0 +1,5 @@ |
|||||
|
NODE_ENV='production' |
||||
|
# 请求域名前缀 |
||||
|
VUE_APP_URL='https://tongli.sz-trip.com' |
||||
|
# 打包后输出目录 |
||||
|
VUE_APP_OUTPUTDIR='dist' |
||||
@ -0,0 +1,5 @@ |
|||||
|
NODE_ENV='production' |
||||
|
# 请求域名前缀 |
||||
|
VUE_APP_URL='https://tongli.sz-trip.com' |
||||
|
# 打包后输出目录 |
||||
|
VUE_APP_OUTPUTDIR='dist_test' |
||||
@ -0,0 +1,23 @@ |
|||||
|
.DS_Store |
||||
|
node_modules |
||||
|
/dist |
||||
|
|
||||
|
|
||||
|
# local env files |
||||
|
.env.local |
||||
|
.env.*.local |
||||
|
|
||||
|
# Log files |
||||
|
npm-debug.log* |
||||
|
yarn-debug.log* |
||||
|
yarn-error.log* |
||||
|
pnpm-debug.log* |
||||
|
|
||||
|
# Editor directories and files |
||||
|
.idea |
||||
|
.vscode |
||||
|
*.suo |
||||
|
*.ntvs* |
||||
|
*.njsproj |
||||
|
*.sln |
||||
|
*.sw? |
||||
@ -0,0 +1,5 @@ |
|||||
|
module.exports = { |
||||
|
presets: [ |
||||
|
'@vue/cli-plugin-babel/preset' |
||||
|
] |
||||
|
} |
||||
@ -0,0 +1,19 @@ |
|||||
|
{ |
||||
|
"compilerOptions": { |
||||
|
"target": "es5", |
||||
|
"module": "esnext", |
||||
|
"baseUrl": "./", |
||||
|
"moduleResolution": "node", |
||||
|
"paths": { |
||||
|
"@/*": [ |
||||
|
"src/*" |
||||
|
] |
||||
|
}, |
||||
|
"lib": [ |
||||
|
"esnext", |
||||
|
"dom", |
||||
|
"dom.iterable", |
||||
|
"scripthost" |
||||
|
] |
||||
|
} |
||||
|
} |
||||
File diff suppressed because it is too large
@ -0,0 +1,63 @@ |
|||||
|
{ |
||||
|
"name": "taihulake", |
||||
|
"version": "0.1.0", |
||||
|
"private": true, |
||||
|
"scripts": { |
||||
|
"serve": "vue-cli-service serve --open", |
||||
|
"build": "vue-cli-service build", |
||||
|
"test": "vue-cli-service build --mode test", |
||||
|
"lint": "vue-cli-service lint" |
||||
|
}, |
||||
|
"dependencies": { |
||||
|
"amfe-flexible": "^2.2.1", |
||||
|
"axios": "^1.3.2", |
||||
|
"core-js": "^3.8.3", |
||||
|
"html-webpack-plugin": "^5.5.1", |
||||
|
"moment": "^2.30.1", |
||||
|
"postcss-px2rem-exclude": "0.0.6", |
||||
|
"postcss-pxtorem": "^6.1.0", |
||||
|
"qs": "^6.11.0", |
||||
|
"vant": "^2.12.53", |
||||
|
"vue": "^2.6.14", |
||||
|
"vue-router": "^3.5.3", |
||||
|
"vuex": "^3.6.2", |
||||
|
"webpack-bundle-analyzer": "^4.8.0" |
||||
|
}, |
||||
|
"devDependencies": { |
||||
|
"@babel/core": "^7.12.16", |
||||
|
"@babel/eslint-parser": "^7.12.16", |
||||
|
"@vue/cli-plugin-babel": "~5.0.0", |
||||
|
"@vue/cli-plugin-eslint": "~5.0.0", |
||||
|
"@vue/cli-service": "~5.0.0", |
||||
|
"babel-plugin-import": "^1.13.6", |
||||
|
"eslint": "^7.32.0", |
||||
|
"eslint-plugin-vue": "^8.0.3", |
||||
|
"node-sass": "^4.14.1", |
||||
|
"postcss": "^8.4.45", |
||||
|
"postcss-loader": "^3.0.0", |
||||
|
"px2rem-loader": "^0.1.9", |
||||
|
"sass-loader": "^7.3.1", |
||||
|
"vue-template-compiler": "^2.6.14" |
||||
|
}, |
||||
|
"eslintConfig": { |
||||
|
"root": true, |
||||
|
"env": { |
||||
|
"node": true |
||||
|
}, |
||||
|
"extends": [ |
||||
|
"plugin:vue/essential", |
||||
|
"eslint:recommended" |
||||
|
], |
||||
|
"parserOptions": { |
||||
|
"parser": "@babel/eslint-parser" |
||||
|
}, |
||||
|
"rules": { |
||||
|
"no-mixed-spaces-and-tabs": 0 |
||||
|
} |
||||
|
}, |
||||
|
"browserslist": [ |
||||
|
"> 1%", |
||||
|
"last 2 versions", |
||||
|
"not dead" |
||||
|
] |
||||
|
} |
||||
@ -0,0 +1,16 @@ |
|||||
|
const autoprefixer = require('autoprefixer'); |
||||
|
const px2rem = require('postcss-pxtorem'); |
||||
|
|
||||
|
module.exports = { |
||||
|
plugins: [ |
||||
|
autoprefixer(), |
||||
|
px2rem({ |
||||
|
rootValue(res) { |
||||
|
return res.file.indexOf('vant') !== -1 ? 37.5 : 75 //换算基数,1rem相当于75px
|
||||
|
}, |
||||
|
unitPrecision: 5, //保留rem小数点多少位
|
||||
|
propList: ['*'], |
||||
|
minPixelValue: 12 //px小于12的不会被转换
|
||||
|
}) |
||||
|
] |
||||
|
} |
||||
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,24 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang=""> |
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0"> |
||||
|
<link rel="icon" href="<%= htmlWebpackPlugin.options.url %>favicon.ico"> |
||||
|
<title>地图</title> |
||||
|
<!-- 腾讯地图 --> |
||||
|
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=YVOBZ-MWJ3Z-34IXK-7J2GL-O33US-QLF5X"> |
||||
|
</script> |
||||
|
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> |
||||
|
<!-- 引入uniSDK --> |
||||
|
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script> |
||||
|
</head> |
||||
|
<body> |
||||
|
<noscript> |
||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript |
||||
|
enabled. Please enable it to continue.</strong> |
||||
|
</noscript> |
||||
|
<div id="app"></div> |
||||
|
<!-- built files will be auto injected --> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,59 @@ |
|||||
|
<template> |
||||
|
<div id="app"> |
||||
|
<keep-alive> |
||||
|
<router-view v-if="$route.meta.keepAlive"></router-view> |
||||
|
</keep-alive> |
||||
|
<router-view v-if="!$route.meta.keepAlive"></router-view> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'App', |
||||
|
mounted() { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
div { |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.flex-between { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.flex-around { |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.flex-center { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
/*单行隐藏*/ |
||||
|
.text-overflow { |
||||
|
overflow-x: hidden; |
||||
|
overflow-y: inherit; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
/* 两行隐藏 */ |
||||
|
.text-overflowRows { |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
-webkit-line-clamp: 2; |
||||
|
word-break: break-all; |
||||
|
display: -webkit-box; |
||||
|
-webkit-box-orient: vertical; |
||||
|
} |
||||
|
</style> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,91 @@ |
|||||
|
import Vue from 'vue' |
||||
|
/**引入axios*/ |
||||
|
import axios from "axios"; |
||||
|
/**引入参数处理*/ |
||||
|
// import Qs from 'qs';
|
||||
|
import {Dialog, Toast} from "vant"; |
||||
|
import store from '@/store'; |
||||
|
const http = axios.create({ |
||||
|
baseURL: process.env.VUE_APP_URL, |
||||
|
timeout: 6000 // 请求超时时间 当请求时间超过`秒还未取得结果时 提示用户请求超时
|
||||
|
}) |
||||
|
|
||||
|
//添加请求拦截器
|
||||
|
http.interceptors.request.use((config) => { |
||||
|
const token = store.state.user.userInfo.token; |
||||
|
config.headers['token'] = token |
||||
|
config.headers['Content-Type'] = 'application/json;charset=UTF-8' |
||||
|
// if(config.loading === true){
|
||||
|
Toast.loading({ |
||||
|
message: '加载中...', |
||||
|
forbidClick: true, |
||||
|
duration: 0 |
||||
|
}); |
||||
|
// }
|
||||
|
return config; |
||||
|
}, (error) => { |
||||
|
return Promise.reject(error); |
||||
|
}); |
||||
|
|
||||
|
// 添加响应拦截器
|
||||
|
http.interceptors.response.use(response => { |
||||
|
Toast.clear() |
||||
|
if(response.status === 200 || response.status === 1){ |
||||
|
return response.data; |
||||
|
} |
||||
|
},error => { |
||||
|
if(error.response && error.response.status){ |
||||
|
switch(error.response.status){ |
||||
|
case 401: |
||||
|
Dialog.confirm({ |
||||
|
title: '提示', |
||||
|
message: '请登录后操作', |
||||
|
confirmButtonText: '去登录' |
||||
|
}).then(() => { |
||||
|
// 登录操作
|
||||
|
}); |
||||
|
break; |
||||
|
case 404: |
||||
|
Toast.fail({ |
||||
|
type: "fail", |
||||
|
message: '网络繁忙，请刷新再试', |
||||
|
forbidClick: true, |
||||
|
duration: 2000 |
||||
|
}); |
||||
|
break; |
||||
|
default: |
||||
|
Toast.fail({ |
||||
|
type: "fail", |
||||
|
message: '网络繁忙，请刷新再试', |
||||
|
forbidClick: true, |
||||
|
duration: 2000 |
||||
|
}); |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
// 请求
|
||||
|
Vue.prototype.get = (params, url, loading) => { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
http.get(url, params, loading) |
||||
|
.then(res => { |
||||
|
resolve(res); |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
reject(err); |
||||
|
}); |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
Vue.prototype.post = (data, url, loading) => { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
http.post(url, data, loading) |
||||
|
.then(res => { |
||||
|
resolve(res); |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
reject(err); |
||||
|
}); |
||||
|
}) |
||||
|
} |
||||
@ -0,0 +1,55 @@ |
|||||
|
import { |
||||
|
validatenull |
||||
|
} from '@/libs/tools'; |
||||
|
|
||||
|
const keyName = '' + '-'; //随便写个自己的标识
|
||||
|
|
||||
|
//存储sessionStorage
|
||||
|
export const setStore = (params = {}) => { |
||||
|
let { |
||||
|
name, |
||||
|
content, |
||||
|
type, |
||||
|
} = params; |
||||
|
name = keyName + name |
||||
|
let obj = { |
||||
|
dataType: typeof(content), |
||||
|
content: content, |
||||
|
type: type, |
||||
|
datetime: new Date().getTime() |
||||
|
} |
||||
|
if (type) window.sessionStorage.setItem(name, JSON.stringify(obj)); |
||||
|
else window.localStorage.setItem(name, JSON.stringify(obj)); |
||||
|
} |
||||
|
|
||||
|
//获取sessionStorage
|
||||
|
export const getStore = (params = {}) => { |
||||
|
let { |
||||
|
name, |
||||
|
debug |
||||
|
} = params; |
||||
|
name = keyName + name |
||||
|
let obj = {}, |
||||
|
content; |
||||
|
obj = window.sessionStorage.getItem(name); |
||||
|
if (validatenull(obj)) obj = window.localStorage.getItem(name); |
||||
|
if (validatenull(obj)) return; |
||||
|
try { |
||||
|
obj = JSON.parse(obj); |
||||
|
} catch { |
||||
|
return obj; |
||||
|
} |
||||
|
if (debug) { |
||||
|
return obj; |
||||
|
} |
||||
|
if (obj.dataType == 'string') { |
||||
|
content = obj.content; |
||||
|
} else if (obj.dataType == 'number') { |
||||
|
content = Number(obj.content); |
||||
|
} else if (obj.dataType == 'boolean') { |
||||
|
content = eval(obj.content); |
||||
|
} else if (obj.dataType == 'object') { |
||||
|
content = obj.content; |
||||
|
} |
||||
|
return content; |
||||
|
} |
||||
@ -0,0 +1,18 @@ |
|||||
|
//判断是否为空
|
||||
|
export function validatenull(val) { |
||||
|
if (typeof val == 'boolean') { |
||||
|
return false; |
||||
|
} |
||||
|
if (typeof val == 'number') { |
||||
|
return false; |
||||
|
} |
||||
|
if (val instanceof Array) { |
||||
|
if (val.length == 0) return true; |
||||
|
} else if (val instanceof Object) { |
||||
|
if (JSON.stringify(val) === '{}') return true; |
||||
|
} else { |
||||
|
if (val == 'null' || val == null || val == 'undefined' || val == undefined || val == '') return true; |
||||
|
return false; |
||||
|
} |
||||
|
return false; |
||||
|
} |
||||
@ -0,0 +1,76 @@ |
|||||
|
export default { |
||||
|
install(Vue) { |
||||
|
Vue.prototype.util = { |
||||
|
// 格式化富文本
|
||||
|
formateRichText(str) { |
||||
|
if (!str) return ""; |
||||
|
var reg = new RegExp("<img", "g"); |
||||
|
str = str.replace(reg, "<img class='sz-xcx-fwb-img' width='100%'") |
||||
|
reg = new RegExp("<IMG", "g"); |
||||
|
str = str.replace(reg, "<img class='sz-xcx-fwb-img' width='100%'") |
||||
|
reg = new RegExp(" ", "g"); |
||||
|
str = str.replace(reg, '<span style="width: 8rpx;display: inline-block;"></span>') |
||||
|
reg = new RegExp("section", "g"); |
||||
|
str = str.replace(reg, 'div'); |
||||
|
reg = new RegExp("↵", "g"); |
||||
|
str = str.replace(reg, '<br />'); |
||||
|
str = str.replace(/<table/g, '<table border="1" cellspacing="0" style="border-collapse:collapse"') |
||||
|
return str; |
||||
|
}, |
||||
|
// 手机号验证规则
|
||||
|
mobileValid(val) { |
||||
|
return /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(val); |
||||
|
}, |
||||
|
// 身份证验证规则
|
||||
|
idNumberValid(val) { |
||||
|
return /^\d{17}(\d{1}|[X|x])$/.test(val); |
||||
|
}, |
||||
|
// 护照验证正则
|
||||
|
passportValid(val) { |
||||
|
return /^([a-zA-z]|[0-9]){5,17}$/.test(val); |
||||
|
}, |
||||
|
// 台胞证正则
|
||||
|
taiwanValid(val) { |
||||
|
return /^\d{8}|^[a-zA-Z0-9]{10}|^\d{18}$/.test(val); |
||||
|
}, |
||||
|
// 港澳通行证正则
|
||||
|
gangaoValid(val) { |
||||
|
return /^([A-Z]\d{6,10}(\(\w{1}\))?)$/.test(val); |
||||
|
}, |
||||
|
// 外国人永久居留证正则
|
||||
|
foreignerValid(val) { |
||||
|
return /(^[A-Za-z]{3})([0-9]{12}$)/.test(val); |
||||
|
}, |
||||
|
// 军官证正则
|
||||
|
officerValid(val) { |
||||
|
return /^[\u4E00-\u9FA5](字第)([0-9a-zA-Z]{4,8})(号?)$/.test(val); |
||||
|
}, |
||||
|
// 邮箱验证正则
|
||||
|
emailValid(val) { |
||||
|
return /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(val) |
||||
|
}, |
||||
|
// 获取路径参数
|
||||
|
getUrlPara(url) { |
||||
|
let arrUrl = url.split("?"); |
||||
|
let para = arrUrl[1]; |
||||
|
return para ? para.split('&') : false; |
||||
|
}, |
||||
|
openMap(item) { |
||||
|
uni.openLocation({ |
||||
|
longitude: item.lon, // 经度
|
||||
|
latitude: item.lat, //纬度
|
||||
|
name: item.address || item.title || item.name, // 位置名称
|
||||
|
address: item.address, //详细地址
|
||||
|
}) |
||||
|
}, |
||||
|
showImg(img) { |
||||
|
if(!img) return; |
||||
|
if (img.indexOf('https://') != -1 || img.indexOf('http://') != -1) { |
||||
|
return img; |
||||
|
} else { |
||||
|
return 'https://tongli.sz-trip.com' + img; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,30 @@ |
|||||
|
import Vue from 'vue' |
||||
|
import App from './App.vue' |
||||
|
import store from './store' |
||||
|
import '../src/libs/axios.js' // axios处理
|
||||
|
// 引入amfe-flexible做rem适配
|
||||
|
import "amfe-flexible" |
||||
|
import router from "./router" |
||||
|
|
||||
|
import utils from './libs/utils.js' |
||||
|
Vue.use(utils) |
||||
|
|
||||
|
import Vant from 'vant'; |
||||
|
import 'vant/lib/index.css'; |
||||
|
Vue.use(Vant); |
||||
|
|
||||
|
// Vue.prototype.ShowLoading = (title) => {
|
||||
|
// Vue.prototype.$toast.loading({
|
||||
|
// message: title ? title : '请求中',
|
||||
|
// forbidClick: true,
|
||||
|
// duration: 0
|
||||
|
// })
|
||||
|
// }
|
||||
|
|
||||
|
Vue.config.productionTip = false |
||||
|
|
||||
|
new Vue({ |
||||
|
store, |
||||
|
router, |
||||
|
render: h => h(App), |
||||
|
}).$mount('#app') |
||||
@ -0,0 +1,27 @@ |
|||||
|
import Vue from "vue"; |
||||
|
import VueRouter from "vue-router"; |
||||
|
import Index from "../views/Index.vue"; |
||||
|
|
||||
|
Vue.use(VueRouter); |
||||
|
|
||||
|
const routes = [{ |
||||
|
path: "/", |
||||
|
name: "index", |
||||
|
meta: {title: "首页", keepAlive: true}, |
||||
|
component: Index, |
||||
|
}, |
||||
|
{ |
||||
|
path: "/lineList", |
||||
|
name: "lineList", |
||||
|
meta: {title: "", keepAlive: true}, |
||||
|
component: () =>import("../views/LineList.vue"), |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
const router = new VueRouter({ |
||||
|
mode: "history", |
||||
|
base: process.env.BASE_URL, |
||||
|
routes, |
||||
|
}); |
||||
|
|
||||
|
export default router; |
||||
@ -0,0 +1,19 @@ |
|||||
|
import Vue from 'vue' |
||||
|
import Vuex from 'vuex' |
||||
|
import user from './modules/user' |
||||
|
|
||||
|
Vue.use(Vuex) |
||||
|
|
||||
|
export default new Vuex.Store({ |
||||
|
state: { |
||||
|
|
||||
|
}, |
||||
|
mutations: { |
||||
|
|
||||
|
}, |
||||
|
actions: {}, |
||||
|
modules: { |
||||
|
namespaced: true, // 为了解决不同模块命名冲突的问题
|
||||
|
user |
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,19 @@ |
|||||
|
import { setStore, getStore } from '@/libs/storage' |
||||
|
export default { |
||||
|
state: { |
||||
|
userInfo: getStore({ name: 'userInfo' }) || '', // 保存用户登录信息
|
||||
|
}, |
||||
|
mutations: { |
||||
|
changeUserInfo(state, data) { |
||||
|
state.userInfo = data |
||||
|
setStore({ name: 'userInfo', content: state.userInfo, type: 'session' }) |
||||
|
if(data && data.token)localStorage.setItem('userInfo', JSON.stringify(data)) |
||||
|
}, |
||||
|
}, |
||||
|
getters: { |
||||
|
|
||||
|
}, |
||||
|
actions: { |
||||
|
|
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,566 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div id="mapContainer" class="mapContainer"></div> |
||||
|
|
||||
|
<!-- 点位分类 --> |
||||
|
<div class="type-box"> |
||||
|
<div :class="['type-item',{'type-active': index == typeIndex}]" v-for="(item,index) in mapType" |
||||
|
@click="getSpotsByCategory(index)">{{item.name}}</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="area-box"> |
||||
|
<!-- 区域分类 --> |
||||
|
<div> |
||||
|
<div class="area-item area-items" @click="areaMore = !areaMore"> |
||||
|
<img :src="'https://static.ticket.sz-trip.com/yandu/images/map/'+ (areaMore ? 'topIcon.png' : 'bottomIcon.png')" |
||||
|
alt="" /> |
||||
|
{{areaMore ? '收起' : '展开'}} |
||||
|
</div> |
||||
|
<div v-if="areaMore"> |
||||
|
<div v-for="(item,index) in areaList" :key="index" |
||||
|
:class="['area-item',{'area-active':index == areaIndex}]" @click="changeArea(index)"> |
||||
|
{{item.name}} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 行程线路 --> |
||||
|
<div> |
||||
|
<div class="area-item area-items" @click="addLine"> |
||||
|
<img src="https://static.ticket.sz-trip.com/yandu/images/map/addLine.png" alt="" /> |
||||
|
添加<br>行程 |
||||
|
</div> |
||||
|
<div class="area-item area-items" @click="gotoLine"> |
||||
|
<img src="https://static.ticket.sz-trip.com/yandu/images/map/line.png" alt="" /> |
||||
|
线路<br>推荐 |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 详情弹框 --> |
||||
|
<van-popup v-model="detailShow" @close="audioPause" :overlay-style="{'background-color': 'rgba(0, 0, 0, 0)'}" |
||||
|
position="bottom" round> |
||||
|
<ProductDetail ref="detailRef" /> |
||||
|
</van-popup> |
||||
|
|
||||
|
<!-- 输入线路信息弹框 --> |
||||
|
<van-popup v-model="addLineShow" position="center" round> |
||||
|
<div class="addLine-box"> |
||||
|
添加行程 |
||||
|
<div class="addLine-item"> |
||||
|
线路名称: <input type="text" v-model="lineName" placeholder="请输入线路名称" /> |
||||
|
</div> |
||||
|
<div class="addLine-item"> |
||||
|
开始时间: <input type="text" v-model="lineDate" placeholder="请选择出发时间" readonly |
||||
|
@click="lineDateShow = true" /> |
||||
|
<img src="https://static.ticket.sz-trip.com/yandu/images/map/dateRight.png" alt=""> |
||||
|
</div> |
||||
|
<div class="addLine-btn flex-around"> |
||||
|
<div @click="addLineShow = false">取消</div> |
||||
|
<div @click="lineClick">下一步</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</van-popup> |
||||
|
|
||||
|
<!-- 日期选择 --> |
||||
|
<van-popup v-model="lineDateShow" round position="bottom"> |
||||
|
<van-datetime-picker v-model="currentDate" type="date" title="选择年月日" @confirm="lineDateConfirm" /> |
||||
|
</van-popup> |
||||
|
|
||||
|
<!-- 添加线路行程弹框 --> |
||||
|
<van-popup v-model="lineRouteShow" round position="bottom"> |
||||
|
<LineRoute :id="lineId" :lineDate="lineDate" ref="lineRouteRef" /> |
||||
|
</van-popup> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import moment from 'moment' |
||||
|
import ProductDetail from './compoents/productDetail' |
||||
|
import LineRoute from './compoents/lineRoute' |
||||
|
export default { |
||||
|
components: { |
||||
|
ProductDetail, |
||||
|
LineRoute |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
mapObj: null, |
||||
|
mapMarker: null, |
||||
|
basics: {}, |
||||
|
mapType: [], |
||||
|
typeIndex: -1, |
||||
|
areaList: [], |
||||
|
areaIndex: 0, |
||||
|
areaMore: true, |
||||
|
detailShow: false, // 详情弹框 |
||||
|
addLineShow: false, // 输入线路名称和日期弹框 |
||||
|
lineName: '', |
||||
|
lineDate: '', |
||||
|
lineDateShow: false, // 选择日期弹框 |
||||
|
currentDate: new Date(), |
||||
|
lineRouteShow: false, // 添加线路行程弹框 |
||||
|
lineAddStatus: false, // 点击添加行程时为true，地图景点图标改变为加号 |
||||
|
lineId: '', |
||||
|
maps: [], //热点 |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getAreaList() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取全部区域 |
||||
|
getAreaList() { |
||||
|
this.post({}, '/api/emap/get_map_list').then(res => { |
||||
|
this.areaList = res.data |
||||
|
if (res.data.length > 0) { |
||||
|
this.getAreaDetail() |
||||
|
this.getCategory() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 更改地图区域 |
||||
|
changeArea(index) { |
||||
|
this.areaIndex = index |
||||
|
this.getAreaDetail() |
||||
|
}, |
||||
|
// 根据code获取当前区域信息 |
||||
|
getAreaDetail() { |
||||
|
this.post({ |
||||
|
code: this.areaList[this.areaIndex].code |
||||
|
}, '/api/emap/get_init').then(res => { |
||||
|
this.basics = res.data |
||||
|
this.basics.center_poi = JSON.parse(this.basics.center_poi) |
||||
|
this.basics.lb_poi = JSON.parse(this.basics.lb_poi) |
||||
|
this.basics.rt_poi = JSON.parse(this.basics.rt_poi) |
||||
|
this.$nextTick(() => { |
||||
|
this.initMap() |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
// 根据code获取热点分类 |
||||
|
getCategory() { |
||||
|
this.post({ |
||||
|
code: this.areaList[this.areaIndex].code |
||||
|
}, '/api/emap/getByCategory').then(res => { |
||||
|
this.mapType = Array.from(res.data) |
||||
|
if(this.mapType.length > 0) this.getSpotsByCategory(0) |
||||
|
}) |
||||
|
}, |
||||
|
// 根据code、热点分类获取热点 |
||||
|
getSpotsByCategory(index) { |
||||
|
this.typeIndex = index |
||||
|
this.post({ |
||||
|
code: this.areaList[this.areaIndex].code, |
||||
|
category_id: this.mapType[this.typeIndex].id |
||||
|
},'/api/emap/getSpotsByCategory').then(res => { |
||||
|
console.log(res) |
||||
|
this.maps = res.data |
||||
|
// 移除原先点位 |
||||
|
this.clearMarkers() |
||||
|
if(this.maps.length > 0) this.setMarkers() |
||||
|
}) |
||||
|
}, |
||||
|
initMap() { |
||||
|
let centerLat = this.basics.center_poi[1] |
||||
|
let centerLon = this.basics.center_poi[0] |
||||
|
var center = new TMap.LatLng(this.basics.center_poi[1], this.basics.center_poi[0]) //设置中心点坐标 |
||||
|
var sw = new TMap.LatLng(this.basics.rt_poi[1], this.basics.rt_poi[0]); //东北角坐标, |
||||
|
var ne = new TMap.LatLng(this.basics.lb_poi[1], this.basics.lb_poi[0]); //西南角坐标, |
||||
|
var latlngBounds = new TMap.LatLngBounds(ne, sw); |
||||
|
// 初始化地图 |
||||
|
this.mapObj = new TMap.Map("mapContainer", { |
||||
|
center: center, |
||||
|
boundary: latlngBounds, |
||||
|
zoom: 12, // 地图默认缩放级别 |
||||
|
minZoom: 12, |
||||
|
maxZoom: 15, |
||||
|
showControl: true, // 是否显示地图上的控件 |
||||
|
// viewMode: '2D', // 地图视图模式，支持2D和3D，默认为3D。2D模式下俯仰角和旋转角度始终为0 |
||||
|
rotation: 0, //设置地图旋转角度 |
||||
|
}); |
||||
|
|
||||
|
this.mapObj.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM); // 移除缩放控件 |
||||
|
this.mapObj.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION); // 移除旋转控件 |
||||
|
|
||||
|
// 初始化瓦片 |
||||
|
// 瓦片图需要切好每个位置的图 |
||||
|
// x,y,z 为上图的坐标 |
||||
|
new TMap.ImageTileLayer({ |
||||
|
getTileUrl: function(x, y, z) { |
||||
|
console.log(x, y, z) |
||||
|
//拼接瓦片URL |
||||
|
let url = |
||||
|
`https://static.ticket.sz-trip.com/yandu/images/maps/` + |
||||
|
z + |
||||
|
"/" + |
||||
|
x + |
||||
|
"/" + |
||||
|
y + |
||||
|
".png"; |
||||
|
return url; |
||||
|
}, |
||||
|
tileSize: 256, //瓦片像素尺寸 |
||||
|
minZoom: 12, //显示自定义瓦片的最小级别 |
||||
|
maxZoom: 15, //显示自定义瓦片的最大级别 |
||||
|
visible: true, //是否可见 |
||||
|
zIndex: 5000, //层级高度（z轴） |
||||
|
opacity: 1, //图层透明度：1不透明，0为全透明 |
||||
|
map: this.mapObj, //设置图层显示到哪个地图实例中 |
||||
|
}); |
||||
|
|
||||
|
// 创建点聚合实例 |
||||
|
// this.markerCluster = new TMap.MarkerCluster({ |
||||
|
// id: "cluster", |
||||
|
// map: this.mapObj, |
||||
|
// enableDefaultStyle: true, // 是否启用默认样式 |
||||
|
// minimumClusterSize: 5, // 形成聚合簇的最小个数 |
||||
|
// geometries: [], // 点数组 |
||||
|
// zoomOnClick: true, |
||||
|
// gridSize: 60, |
||||
|
// averageCenter: true, |
||||
|
// }); |
||||
|
}, |
||||
|
// 地图打点 |
||||
|
setMarkers() { |
||||
|
// 聚合点点位 |
||||
|
// this.markerCluster.setGeometries([ |
||||
|
// { |
||||
|
// position: new TMap.LatLng(33.332682, 120.16451) |
||||
|
// }, |
||||
|
// { |
||||
|
// position: new TMap.LatLng(33.329281, 120.161117) |
||||
|
// } |
||||
|
// ]); |
||||
|
|
||||
|
let markers = [] |
||||
|
let labels = [] |
||||
|
this.maps.forEach(item => { |
||||
|
markers.push({ |
||||
|
"styleId": 'marker', |
||||
|
text: item.name, |
||||
|
position: new TMap.LatLng(item.poi_gcj02[1], item.poi_gcj02[0]) |
||||
|
}) |
||||
|
|
||||
|
labels.push({ |
||||
|
id: 'label', // 点图形数据的标志信息 |
||||
|
styleId: 'label', // 样式id |
||||
|
position: new TMap.LatLng(item.poi_gcj02[1], item.poi_gcj02[0]), // 标注点位置 |
||||
|
content: item.name, // 标注文本 |
||||
|
properties: { |
||||
|
// 标注点的属性数据 |
||||
|
title: 'label', |
||||
|
}, |
||||
|
}) |
||||
|
}) |
||||
|
|
||||
|
// 添加marker点 |
||||
|
this.multiMarker = new TMap.MultiMarker({ |
||||
|
id: 'marker-layer', |
||||
|
map: this.mapObj, |
||||
|
styles: { |
||||
|
"marker": new TMap.MarkerStyle({ |
||||
|
"width": 24, |
||||
|
"height": 30, |
||||
|
"src": 'https://static.ticket.sz-trip.com/yandu/images/map/scenic.png', |
||||
|
"src": this.util.showImg(this.mapType.find(i => {return i.id == this.maps[0].category_id}).icon_image) |
||||
|
}) |
||||
|
}, |
||||
|
// 点数组 |
||||
|
geometries: markers, |
||||
|
}) |
||||
|
|
||||
|
// 标记点点击事件 |
||||
|
this.multiMarker.on("click", this.markerClick) |
||||
|
|
||||
|
// 文本标记 |
||||
|
this.multiLabel = new TMap.MultiLabel({ |
||||
|
id: 'label-layer', |
||||
|
map: this.mapObj, |
||||
|
collisionOptions: { |
||||
|
sameSource: true, |
||||
|
}, //开启图层内部的文本标注碰撞 |
||||
|
styles: { |
||||
|
label: new TMap.LabelStyle({ |
||||
|
color: '#FFF', // 颜色属性 |
||||
|
size: 13, // 文字大小属性 |
||||
|
offset: { |
||||
|
x: 0, |
||||
|
y: 15 |
||||
|
}, // 文字偏移属性单位为像素 |
||||
|
angle: 0, // 文字旋转属性 |
||||
|
alignment: 'center', // 文字水平对齐属性 |
||||
|
verticalAlignment: 'middle', // 文字垂直对齐属性 |
||||
|
backgroundColor: 'rgba(0, 0, 0, .5)', |
||||
|
borderRadius: 7, |
||||
|
padding: '2px 8px', |
||||
|
}), |
||||
|
}, |
||||
|
geometries: labels, |
||||
|
}) |
||||
|
|
||||
|
// 标记文本点击事件 |
||||
|
// this.multiLabel.on("click", this.markerClick) |
||||
|
}, |
||||
|
// 移除点位 |
||||
|
clearMarkers() { |
||||
|
if (this.multiMarker) { |
||||
|
this.multiMarker.setMap(null); |
||||
|
this.multiMarker = null; |
||||
|
} |
||||
|
|
||||
|
if(this.multiLabel) { |
||||
|
this.multiLabel.setMap(null); |
||||
|
this.multiLabel = null; |
||||
|
} |
||||
|
}, |
||||
|
// 改变地图中心 |
||||
|
changeMapCenter() { |
||||
|
this.mapObj.panTo(new TMap.LatLng(33.37307, 120.18467)); |
||||
|
}, |
||||
|
// 标记点点击事件 |
||||
|
markerClick(evt) { |
||||
|
console.log(evt, evt.geometry.text) |
||||
|
if (this.lineAddStatus) { |
||||
|
//添加行程时 |
||||
|
this.$dialog.confirm({ |
||||
|
title: '', |
||||
|
message: '是否将' + evt.geometry.text + '加入行程?' |
||||
|
}).then(() => { |
||||
|
this.lineId = 1 |
||||
|
this.$refs.lineRouteRef.addLineList() |
||||
|
}).catch(() => { |
||||
|
|
||||
|
}) |
||||
|
} else { |
||||
|
this.detailShow = true |
||||
|
} |
||||
|
}, |
||||
|
// 路线规划 |
||||
|
gotoLine() { |
||||
|
// this.MultiPolyline = new TMap.MultiPolyline({ |
||||
|
// id: 'polyline-layer', |
||||
|
// map: this.mapObj, |
||||
|
// styles: { |
||||
|
// "style_blue": new TMap.PolylineStyle({ |
||||
|
// "width": 4, |
||||
|
// 'color': '#3777FF', //线填充色 |
||||
|
// 'borderWidth': 2, //边线宽度 |
||||
|
// 'borderColor': '#FFF', //边线颜色 |
||||
|
// 'lineCap': 'butt' //线端头方式 |
||||
|
// }) |
||||
|
// }, |
||||
|
// // 折线数据定义 |
||||
|
// geometries: [{ |
||||
|
// "id": 'style_blue', |
||||
|
// "styleId": 'style_blue', |
||||
|
// "paths": [new TMap.LatLng(33.347305, 120.136504), new TMap.LatLng(33.323448, |
||||
|
// 120.157053), new TMap.LatLng(33.338249, 120.1832)] |
||||
|
// }] |
||||
|
// }) |
||||
|
|
||||
|
this.$router.push({ |
||||
|
path: '/lineList', |
||||
|
query: { |
||||
|
code: this.areaList[this.areaIndex].code |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 关闭弹框后暂停音频 |
||||
|
audioPause() { |
||||
|
this.$refs.detailRef.audioPlay(false) |
||||
|
}, |
||||
|
// 添加线路 |
||||
|
addLine() { |
||||
|
this.lineName = '' |
||||
|
this.lineDate = '' |
||||
|
this.addLineShow = true |
||||
|
}, |
||||
|
// 确认日期 |
||||
|
lineDateConfirm() { |
||||
|
this.lineDate = moment(this.currentDate).format('YYYY-MM-DD') |
||||
|
this.lineDateShow = false |
||||
|
}, |
||||
|
// 输入线路名称和时间,下一步 |
||||
|
lineClick() { |
||||
|
if (this.lineName.trim().length == 0 || this.lineDate.trim().length == 0) { |
||||
|
this.$toast('请输入行程信息') |
||||
|
} else { |
||||
|
this.addLineShow = false |
||||
|
this.lineRouteShow = true |
||||
|
} |
||||
|
}, |
||||
|
// 点击添加行程、关闭添加行程弹框，改变景点标识图标 |
||||
|
addlineRoute(status) { |
||||
|
this.lineRouteShow = false |
||||
|
|
||||
|
if (status) { |
||||
|
// 更换marker样式方法 |
||||
|
this.multiMarker.setStyles({ |
||||
|
"marker": new TMap.MarkerStyle({ |
||||
|
"width": 24, |
||||
|
"height": 30, |
||||
|
"src": 'https://static.ticket.sz-trip.com/yandu/images/map/add.png' |
||||
|
}) |
||||
|
}) |
||||
|
|
||||
|
// 添加行程时为true |
||||
|
this.lineAddStatus = true |
||||
|
} else { |
||||
|
this.typeIndex = -1 |
||||
|
this.setMarkers(0) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
div { |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.mapContainer { |
||||
|
width: 100%; |
||||
|
height: 100vh; |
||||
|
} |
||||
|
|
||||
|
.type-box { |
||||
|
position: fixed; |
||||
|
z-index: 2000; |
||||
|
width: 723px; |
||||
|
height: 53px; |
||||
|
top: 22px; |
||||
|
left: 27px; |
||||
|
display: flex; |
||||
|
overflow-x: auto; |
||||
|
|
||||
|
.type-item { |
||||
|
padding: 0 26px; |
||||
|
line-height: 53px; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 13px; |
||||
|
font-weight: 500; |
||||
|
font-size: 27px; |
||||
|
color: #000000; |
||||
|
margin-right: 27px; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.type-active { |
||||
|
background: linear-gradient(130deg, #9EE4FE, #7FD491); |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.type-box::-webkit-scrollbar { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.area-box { |
||||
|
position: fixed; |
||||
|
z-index: 2000; |
||||
|
top: 153px; |
||||
|
right: 17px; |
||||
|
|
||||
|
&>div { |
||||
|
width: 87px; |
||||
|
height: auto; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 43px; |
||||
|
border: 2px solid #FFFFFF; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
&>div:last-child { |
||||
|
margin-top: 24px; |
||||
|
|
||||
|
.area-items { |
||||
|
height: 133px !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.area-item { |
||||
|
height: 93px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
text-align: center; |
||||
|
border-top: 1px solid #D8D8D8; |
||||
|
font-weight: 500; |
||||
|
font-size: 22px; |
||||
|
color: #666666; |
||||
|
} |
||||
|
|
||||
|
.area-items { |
||||
|
flex-direction: column; |
||||
|
justify-content: space-around; |
||||
|
height: 100px; |
||||
|
|
||||
|
img { |
||||
|
width: 38px; |
||||
|
height: 38px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.area-active { |
||||
|
background: linear-gradient(130deg, #9EE4FE, #7FD491); |
||||
|
color: #000000; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 线路弹框 |
||||
|
.addLine-box { |
||||
|
width: 673px; |
||||
|
height: 413px; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 27px; |
||||
|
padding: 32px 33px 0 37px; |
||||
|
font-weight: bold; |
||||
|
font-size: 40px; |
||||
|
color: #000000; |
||||
|
|
||||
|
.addLine-item { |
||||
|
font-weight: 400; |
||||
|
font-size: 29px; |
||||
|
margin-top: 40px; |
||||
|
|
||||
|
input { |
||||
|
outline: none; |
||||
|
border: none; |
||||
|
height: 27px; |
||||
|
width: 380px; |
||||
|
margin-left: 30px; |
||||
|
} |
||||
|
|
||||
|
input::placeholder { |
||||
|
color: #BEBEBE; |
||||
|
} |
||||
|
|
||||
|
img { |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.addLine-btn { |
||||
|
margin-top: 50px; |
||||
|
|
||||
|
div { |
||||
|
width: 233px; |
||||
|
line-height: 67px; |
||||
|
background: #EAEAEA; |
||||
|
border-radius: 13px; |
||||
|
text-align: center; |
||||
|
font-weight: 500; |
||||
|
font-size: 29px; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
div:last-child { |
||||
|
background: #71B580; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,100 @@ |
|||||
|
<template> |
||||
|
<div class="bg"> |
||||
|
<div class="item" v-for="(item,index) in list" :key="index"> |
||||
|
<img :src="util.showImg(item.image)" alt="" /> |
||||
|
|
||||
|
<div class="content"> |
||||
|
<div class="title">{{item.name}}</div> |
||||
|
<div class="subtitle">{{item.points.length}}个景点</div> |
||||
|
<div class="tags" v-if="item.goods_new_tag"> |
||||
|
<div class="tag" v-for="(tagItem,tagIndex) in item.goods_new_tag.split(',').slice(0,2)">{{tagItem}}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
list: [] |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getList() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 根据code获取推荐线路 |
||||
|
getList() { |
||||
|
this.post({ |
||||
|
code: this.$route.query.code |
||||
|
},'/api/emap/getLineByCode').then(res => { |
||||
|
this.list = res.data |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bg { |
||||
|
width: 100%; |
||||
|
min-height: 100vh; |
||||
|
background: #F7F7F7; |
||||
|
padding-top: 31px; |
||||
|
} |
||||
|
|
||||
|
.item { |
||||
|
width: 697px; |
||||
|
height: 240px; |
||||
|
background: #FFFFFF; |
||||
|
box-shadow: 0px 1px 16px 0px rgba(153,153,153,0.35); |
||||
|
border-radius: 20px; |
||||
|
margin: 0 auto 33px; |
||||
|
padding: 13px; |
||||
|
display: flex; |
||||
|
|
||||
|
img { |
||||
|
object-fit: cover; |
||||
|
width: 213px; |
||||
|
height: 213px; |
||||
|
border-radius: 13px; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
margin-left: 25px; |
||||
|
padding: 15px 0; |
||||
|
width: 410px; |
||||
|
|
||||
|
.title { |
||||
|
font-weight: bold; |
||||
|
font-size: 33px; |
||||
|
color: #111111; |
||||
|
} |
||||
|
|
||||
|
.subtitle { |
||||
|
margin-top: 8px; |
||||
|
font-weight: 500; |
||||
|
font-size: 27px; |
||||
|
color: #666666; |
||||
|
} |
||||
|
|
||||
|
.tags { |
||||
|
display: flex; |
||||
|
margin-top: 15px; |
||||
|
|
||||
|
.tag { |
||||
|
font-weight: 500; |
||||
|
font-size: 23px; |
||||
|
color: #71B580; |
||||
|
line-height: 40px; |
||||
|
border-radius: 5px; |
||||
|
border: 1px solid #69AF78; |
||||
|
padding: 0 12px; |
||||
|
margin-right: 13px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,245 @@ |
|||||
|
|
||||
|
<template> |
||||
|
<div class="bg"> |
||||
|
<div class="top"> |
||||
|
线路标题 |
||||
|
<span>{{lineDate}}</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="center"> |
||||
|
<div class="center-items flex-between" v-for="(item,index) in list" :key="index"> |
||||
|
<div class="center-line"></div> |
||||
|
<div class="center-num">{{index + 1}}</div> |
||||
|
<div class="center-item"> |
||||
|
<img :src="util.showImg(item.image)" class="center-img"> |
||||
|
<div class="center-content"> |
||||
|
<div class="title text-overflow">{{item.title}}{{index}}</div> |
||||
|
<div class="subtitle text-overflow">营业时间：{{item.open_time}}-{{item.close_time}}</div> |
||||
|
<div class="subtitle text-overflow">地址：{{item.address}}</div> |
||||
|
<div class="location" @click="util.openMap(item)"> |
||||
|
<img src="https://static.ticket.sz-trip.com/yandu/images/map/lineLocation.png" alt=""> |
||||
|
导航 |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<img src="https://static.ticket.sz-trip.com/yandu/images/map/delLine.png" alt="" @click="delLine(index)"> |
||||
|
</div> |
||||
|
|
||||
|
<div class="center-btns flex-between" @click="addLine"> |
||||
|
<div class="center-line" :style="{top: list.length == 0 ? '20px' : ''}" v-if="list.length == 0"></div> |
||||
|
<div class="center-num">{{list.length == 0 ? '1' : ''}}</div> |
||||
|
<div class="center-btn"> |
||||
|
+添加行程 |
||||
|
</div> |
||||
|
<div></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="btns flex-around"> |
||||
|
<div @click="submit(0)">取消</div> |
||||
|
<div @click="submit(1)">保存</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
props: ['id','lineDate'], |
||||
|
data() { |
||||
|
return { |
||||
|
list: [], |
||||
|
itemObj: { |
||||
|
image: '/uploads/20240826/a87488f6225789aa19dbb437671d388d.png', |
||||
|
title: '线路推荐-测试', |
||||
|
open_time: '', |
||||
|
close_time: '', |
||||
|
address: '地址' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
addLine() { |
||||
|
this.$parent.$parent.addlineRoute(1) |
||||
|
}, |
||||
|
addLineList() { |
||||
|
this.list.push(this.itemObj) |
||||
|
this.$parent.$parent.lineRouteShow = true |
||||
|
}, |
||||
|
// 删除线路 |
||||
|
delLine(index) { |
||||
|
this.list.splice(index,1) |
||||
|
}, |
||||
|
submit(status) { |
||||
|
if(status) { |
||||
|
// 确认 |
||||
|
}else { |
||||
|
// 取消 |
||||
|
this.$parent.$parent.addlineRoute(0) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bg { |
||||
|
width: 750px; |
||||
|
max-height: 60vh; |
||||
|
overflow-x: hidden; |
||||
|
overflow-y: auto; |
||||
|
padding: 40px 27px 180px 27px; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.top { |
||||
|
font-weight: 500; |
||||
|
font-size: 40px; |
||||
|
color: #000000; |
||||
|
|
||||
|
span { |
||||
|
font-weight: 400; |
||||
|
font-size: 24px; |
||||
|
color: #666666; |
||||
|
margin-left: 20px; |
||||
|
vertical-align: text-bottom; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.center { |
||||
|
height: 650px; |
||||
|
overflow-y: auto; |
||||
|
margin-top: 50px; |
||||
|
|
||||
|
.center-items { |
||||
|
position: relative; |
||||
|
padding-bottom: 27px; |
||||
|
|
||||
|
.center-item { |
||||
|
width: 573px; |
||||
|
height: 201px; |
||||
|
background: #FFFFFF; |
||||
|
box-shadow: 0px 0px 20px 0px rgba(142,142,142,0.3); |
||||
|
border-radius: 13px; |
||||
|
padding: 7px; |
||||
|
display: flex; |
||||
|
|
||||
|
.center-img { |
||||
|
width: 187px; |
||||
|
height: 187px; |
||||
|
border-radius: 7px; |
||||
|
} |
||||
|
|
||||
|
.center-content { |
||||
|
padding: 7px 0; |
||||
|
margin-left: 15px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
width: 344px; |
||||
|
|
||||
|
.title { |
||||
|
font-weight: bold; |
||||
|
font-size: 29px; |
||||
|
color: #333333; |
||||
|
width: 344px; |
||||
|
} |
||||
|
|
||||
|
.subtitle { |
||||
|
font-weight: 500; |
||||
|
font-size: 23px; |
||||
|
color: #666666; |
||||
|
width: 344px; |
||||
|
} |
||||
|
|
||||
|
.location { |
||||
|
font-weight: bold; |
||||
|
font-size: 23px; |
||||
|
color: #71B580; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-left: auto; |
||||
|
|
||||
|
img { |
||||
|
width: 32px; |
||||
|
height: 32px; |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
img { |
||||
|
width: 33px; |
||||
|
height: 33px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.center-btns { |
||||
|
position: relative; |
||||
|
|
||||
|
.center-btn { |
||||
|
width: 573px; |
||||
|
line-height: 73px; |
||||
|
background: #71B580; |
||||
|
border-radius: 13px; |
||||
|
text-align: center; |
||||
|
font-weight: 400; |
||||
|
font-size: 29px; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
div:last-child { |
||||
|
width: 33px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.center-num { |
||||
|
width: 38px; |
||||
|
line-height: 38px; |
||||
|
background: #71B580; |
||||
|
border-radius: 50%; |
||||
|
text-align: center; |
||||
|
font-weight: 500; |
||||
|
font-size: 32px; |
||||
|
color: #FFFFFF; |
||||
|
position: relative; |
||||
|
} |
||||
|
.center-line { |
||||
|
position: absolute; |
||||
|
width: 2px; |
||||
|
height: 100%; |
||||
|
background: #71B580; |
||||
|
top: 85px; |
||||
|
left: 18px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btns { |
||||
|
width: 750px; |
||||
|
height: 173px; |
||||
|
background: #FFFFFF; |
||||
|
box-shadow: 0px 0px 20px 0px rgba(142,142,142,0.3); |
||||
|
padding: 0 20px; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
|
||||
|
div { |
||||
|
width: 233px; |
||||
|
line-height: 67px; |
||||
|
background: #EAEAEA; |
||||
|
border-radius: 13px; |
||||
|
text-align: center; |
||||
|
font-weight: 400; |
||||
|
font-size: 27px; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
div:last-child { |
||||
|
background: #71B580; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,176 @@ |
|||||
|
|
||||
|
<template> |
||||
|
<div class="bg"> |
||||
|
<div class="top flex-between"> |
||||
|
标题标题 |
||||
|
<div class="top-btn" v-if="type">购买</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="img-box" v-if="type"> |
||||
|
<img src="https://tongli.sz-trip.com/uploads/20240912/bfc1df32e7bc7cd53781ef6671f88cda.png" alt="" /> |
||||
|
<img src="https://tongli.sz-trip.com/uploads/20240912/bfc1df32e7bc7cd53781ef6671f88cda.png" alt="" /> |
||||
|
<img src="https://tongli.sz-trip.com/uploads/20240912/bfc1df32e7bc7cd53781ef6671f88cda.png" alt="" /> |
||||
|
<img src="https://tongli.sz-trip.com/uploads/20240912/bfc1df32e7bc7cd53781ef6671f88cda.png" alt="" /> |
||||
|
<img src="https://tongli.sz-trip.com/uploads/20240912/bfc1df32e7bc7cd53781ef6671f88cda.png" alt="" /> |
||||
|
<img src="https://tongli.sz-trip.com/uploads/20240912/bfc1df32e7bc7cd53781ef6671f88cda.png" alt="" /> |
||||
|
</div> |
||||
|
|
||||
|
<div class="scenic-detail flex-between" :style="{marginTop: type ? '' : '0'}"> |
||||
|
<div class="scenic-left flex-between"> |
||||
|
<div class="text-overflow" v-if="type">营业时间：09：00-17：00</div> |
||||
|
<div :class="[type ? 'text-overflow' : 'text-overflowRows']">地址：盐城市盐都区学富镇周伙盐城市盐都区学富镇周伙</div> |
||||
|
</div> |
||||
|
<div class="scenic-right flex-between"> |
||||
|
<div v-if="type"> |
||||
|
<img src="https://static.ticket.sz-trip.com/yandu/images/map/pause.png" v-if="isAudioPlay" @click="audioPlay(false)"> |
||||
|
<img src="https://static.ticket.sz-trip.com/yandu/images/map/play.png" v-else @click="audioPlay(true)"> |
||||
|
<div>讲解</div> |
||||
|
</div> |
||||
|
<div v-else></div> |
||||
|
|
||||
|
<div @click="util.openMap()"> |
||||
|
<img src="https://static.ticket.sz-trip.com/yandu/images/map/navigation.png" alt=""> |
||||
|
<div>导航</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="scenic-content" v-if="type"> |
||||
|
简介: |
||||
|
<div> |
||||
|
草房子乐园是童话文学的IP实景还原，是国内较早儿童文学实景体验基地、较早乡野童话体验基地和儿童文学研学基地。致力于打造集旅游住宿、餐饮服务、休闲娱乐、文化传播、研学美育、亲子互动、青少年实践、爱心公益于一体的社会化服务新平台。研学赋能景区瞄准“研学+”新领域，建设标准化研学场景，葳蕤的田园风光，推出亲子研学个性化的消费体验产品和游玩项目 |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 音频讲解 --> |
||||
|
<audio src="" ref="audio" controls v-show="false"></audio> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
props: { |
||||
|
type: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
isAudioPlay: false, |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$refs.audio.src = "https://static.ticket.sz-trip.com/uploads/20220419/47fcfa763aa0d3283a2d47e3cce71428.mp3" |
||||
|
}, |
||||
|
methods: { |
||||
|
audioPlay(status) { |
||||
|
console.log(this.$refs.audio.paused) |
||||
|
if(status) { |
||||
|
this.$refs.audio.play() |
||||
|
this.isAudioPlay = true |
||||
|
}else { |
||||
|
this.$refs.audio.pause() |
||||
|
this.isAudioPlay = false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bg { |
||||
|
width: 750px; |
||||
|
max-height: 60vh; |
||||
|
overflow-x: hidden; |
||||
|
overflow-y: auto; |
||||
|
padding: 0 40px 40px; |
||||
|
} |
||||
|
.top { |
||||
|
height: 156px; |
||||
|
font-weight: 500; |
||||
|
font-size: 40px; |
||||
|
color: #000000; |
||||
|
|
||||
|
.top-btn { |
||||
|
width: 133px; |
||||
|
line-height: 59px; |
||||
|
background: #F74A57; |
||||
|
border-radius: 13px; |
||||
|
text-align: center; |
||||
|
font-size: 32px; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
} |
||||
|
.img-box { |
||||
|
overflow-x: auto; |
||||
|
display: flex; |
||||
|
overflow-x: auto; |
||||
|
|
||||
|
img { |
||||
|
width: 180px; |
||||
|
height: 180px; |
||||
|
border-radius: 27px; |
||||
|
margin-right: 27px; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
} |
||||
|
.img-box::-webkit-scrollbar { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.scenic-detail { |
||||
|
width: 670px; |
||||
|
height: 145px; |
||||
|
background: #E8F6EB; |
||||
|
border-radius: 13px; |
||||
|
margin-top: 36px; |
||||
|
padding: 30px 20px 30px 25px; |
||||
|
font-weight: 500; |
||||
|
font-size: 27px; |
||||
|
color: #000000; |
||||
|
|
||||
|
.scenic-left { |
||||
|
flex-direction: column; |
||||
|
align-items: left; |
||||
|
width: 450px; |
||||
|
height: 100%; |
||||
|
|
||||
|
div { |
||||
|
width: 450px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.scenic-right { |
||||
|
width: 150px; |
||||
|
font-weight: 500; |
||||
|
font-size: 24px; |
||||
|
color: #71B580; |
||||
|
|
||||
|
img { |
||||
|
width: 37px; |
||||
|
height: 37px; |
||||
|
margin-bottom: 5px; |
||||
|
} |
||||
|
|
||||
|
div { |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.scenic-content { |
||||
|
margin-top: 42px; |
||||
|
font-weight: bold; |
||||
|
font-size: 32px; |
||||
|
color: #000000; |
||||
|
|
||||
|
div { |
||||
|
font-weight: 500; |
||||
|
font-size: 27px; |
||||
|
color: #333333; |
||||
|
line-height: 44px; |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,79 @@ |
|||||
|
const path = require('path') // 引入path模块
|
||||
|
// const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
|
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; |
||||
|
|
||||
|
function resolve(dir) { |
||||
|
return path.join(__dirname, dir) // path.join(__dirname)设置绝对路径
|
||||
|
} |
||||
|
const { |
||||
|
defineConfig |
||||
|
} = require('@vue/cli-service') |
||||
|
module.exports = defineConfig({ |
||||
|
lintOnSave: false, // 关闭eslint校验
|
||||
|
transpileDependencies: true, |
||||
|
publicPath: '/', |
||||
|
// 将构建好的文件输出到哪里
|
||||
|
outputDir: process.env.VUE_APP_OUTPUTDIR, |
||||
|
// 放置生成的静态资源(js、css、img、fonts)的目录
|
||||
|
assetsDir: 'static', |
||||
|
// 指定生成的 index.html 的输出路径
|
||||
|
indexPath: 'index.html', |
||||
|
// 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度
|
||||
|
productionSourceMap: false, |
||||
|
// 是一个函数，允许对内部的 webpack 配置进行更细粒度的修改。
|
||||
|
chainWebpack: (config) => { |
||||
|
// 配置别名
|
||||
|
config.resolve.alias |
||||
|
.set('@', resolve('src')) |
||||
|
.set('assets', resolve('src/assets')) |
||||
|
.set('components', resolve('src/components')) |
||||
|
.set('views', resolve('src/views')) |
||||
|
|
||||
|
config.optimization.minimizer('terser').tap((args) => { |
||||
|
// 去除生产环境console
|
||||
|
args[0].terserOptions.compress.drop_console = true |
||||
|
return args |
||||
|
}) |
||||
|
}, |
||||
|
// 配置 Webpack 相关的配置项
|
||||
|
configureWebpack: config => { |
||||
|
// 配置 Webpack 插件
|
||||
|
// config.plugins.push(new HtmlWebpackPlugin({
|
||||
|
// template: './public/index.html'
|
||||
|
// }))
|
||||
|
if(process.env.NODE_ENV == 'production'){ |
||||
|
config.plugins.push(new BundleAnalyzerPlugin({ |
||||
|
analyzerMode: 'server', |
||||
|
analyzerHost: '127.0.0.1', |
||||
|
analyzerPort: 8888, //注意是否有端口冲突
|
||||
|
reportFilename: 'report.html', |
||||
|
defaultSizes: 'parsed', |
||||
|
openAnalyzer: true, |
||||
|
generateStatsFile: false, |
||||
|
statsFilename: 'stats.json', |
||||
|
statsOptions: null, |
||||
|
logLevel: 'info' |
||||
|
})) |
||||
|
} |
||||
|
}, |
||||
|
// 配置开发服务器
|
||||
|
// 本地项目运行时的环境配置
|
||||
|
devServer: { |
||||
|
host: 'localhost', |
||||
|
port: 8080, // 端口号
|
||||
|
https: false, |
||||
|
open: false, // 配置自动启动浏览器 open: 'Google Chrome'-默认启动谷歌
|
||||
|
hot: true, // 热更新
|
||||
|
|
||||
|
proxy: { |
||||
|
'/api': { |
||||
|
target: 'http://localhost:3000', // 要访问的跨域的域名
|
||||
|
ws: true, // 是否启用websockets
|
||||
|
changeOrigin: true, // 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样客户端端和服务端进行数据的交互就不会有跨域问题
|
||||
|
pathRewrite: { |
||||
|
'^/api': '' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
Loading…
Reference in new issue