From 267c2b5ba9c6c3334f54fd5648296ffe13452216 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 18 Nov 2022 10:13:32 +0800
Subject: [PATCH] 1
---
/dev/null | 166 -------------------------------------------------------
1 files changed, 0 insertions(+), 166 deletions(-)
diff --git "a/src/components/mobileActivity\346\227\247\347\232\204\346\262\241\345\272\225\345\233\276/index.vue" "b/src/components/mobileActivity\346\227\247\347\232\204\346\262\241\345\272\225\345\233\276/index.vue"
deleted file mode 100644
index 556856b..0000000
--- "a/src/components/mobileActivity\346\227\247\347\232\204\346\262\241\345\272\225\345\233\276/index.vue"
+++ /dev/null
@@ -1,504 +0,0 @@
-<template>
- <!-- 活动弹窗没有底图备份
-mobileActivity
- -->
- <div
- id="mobileActivity"
- :style="{ height: height + 'px' }"
- :class="[openValue ? 'isOpens' : 'notOpens']"
- v-if="showActivity"
- >
- <div class="mobileActivity_heard">
- <div class="mobileActivity_title">活动标题：{{ hdTitle }}</div>
- <div class="mobileActivity_close" @click="closeActivity">
- <i class="el-icon-close"></i>
- </div>
- </div>
- <div class="mobileActivity_in">
- <!-- <el-button type="primary" @click="init">open</el-button>
- <el-button type="success" @click="closeInit">close</el-button>-->
- <div class="mobileActivity_insmall">
- <!-- <img :src="imgs" alt="" class="mobileActivity_insmallimg" /> -->
- <el-image
- class="mobileActivity_insmallimg"
- :src="useData.url"
- :preview-src-list="useData.srcList"
- ></el-image>
- <div class="mobileActivity_insmallxiangqing">
- <div
- class="mobileActivity_insmallxiangqingIn"
- v-for="(item, index) in useData.smallData"
- :key="index"
- >
- <span class="mobileActivity_insmallxiangqingIn_s">{{ item.lable }}</span>
- : {{ item.value }}
- </div>
- </div>
- </div>
- <div class="mobileActivity_detailed">
- <div
- class="mobileActivity_detailedIn"
- v-for="(item, index) in useData.detailedData"
- :key="index"
- >
- <span class="mobileActivity_insmallxiangqingIn_s">{{ item.lable }}</span>
- : {{ item.value }}
- </div>
- </div>
- </div>
- <div class="mobileActivity_coutrol" :style="{ bottom: bottom + 'px' }">
- <ul>
- <li
- v-for="(item, index) in leftNavData"
- :key="index"
- @click="mobileActivityCoutrolClick(item)"
- v-show="!item.notShow"
- >
- <img :src="item.img" alt />
- <span>{{ item.label }}</span>
- </li>
- </ul>
- </div>
- </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import moveWindow from './move'
-export default {
- name: 'mobileActivity没底图',
- computed: {
- ...mapGetters([
- 'showActivity',
- 'showActivityData'
- // 'drawALineLayerMany',
- // 'drawAPointLayerMany'
- ])
- },
- data () {
- const heig = 135
- const bottom = 150
- return {
- useHeight: heig,
- height: heig,
- useBottom: bottom,
- bottom: bottom,
- openValue: false,
- domMove: null,
- start: 0,
- end: 0,
- hdTitle: '',
- // url: "",
- // srcList: [],
- useData: {},
- leftNavData: [
- {
- flag: true,
- label: '线路',
- // img: "/zhjg/img/leftnav/tag.png",
- img: '/zhjg/img/leftnav/tag-checked.png',
- normal: '/zhjg/img/leftnav/tag.png',
- checked: '/zhjg/img/leftnav/tag-checked.png',
- imgSrc: 'https://map.hit.edu.cn/images/tarrow_xq.png',
- // imgSrc: "/zhjg/img/mobile/pink.png",
- layer: 'drawALineLayerMany'
- },
- {
- flag: true,
- label: '标点',
- img: '/zhjg/img/leftnav/way-checked.png',
- normal: '/zhjg/img/leftnav/way.png',
- checked: '/zhjg/img/leftnav/way-checked.png',
- imgSrc: '/zhjg/img/mobile/green.png',
- layer: 'drawAPointLayerMany'
- }
- // {
- // flag: false,
- // label: "实景",
- // img: "/zhjg/img/leftnav/scene.png",
- // normal: "/zhjg/img/leftnav/scene.png",
- // checked: "/zhjg/img/leftnav/scene-checked.png",
- // layer: "sceneLayer",
- // imgSrc: "/zhjg/img/leftnav/map-panorama.png",
- // // imgSrc: "/zhjg/img/mobile/blue.png",
- // },
- ]
- }
- },
- watch: {
- // openValue() {
- // if (this.openValue) {
- // let windowHeight = document.body.clientHeight;
- // this.height = windowHeight / 2;
- // } else {
- // this.height = this.useHeight;
- // }
- // },
- showActivity () {
- if (this.showActivity) {
- this.inToInit() // 初始化
- this.hdTitle = this.showActivityData.name
-
- // new窗口对象
- const that = this
- const windowHeight = document.body.clientHeight
- this.doData(this.showActivityData) // 使用数据
- // 获取最大高度避免数据过少，空格多
- // let heard = document.querySelector(".mobileActivity_heard");
- // let ins = document.querySelector(".mobileActivity_in");
- // console.log(heard, ins, 77777);
- this.checkDom('querySelector', '.mobileActivity_heard', (head) => {
- this.checkDom('querySelector', '.mobileActivity_in', (ins) => {
- console.log((head.offsetHeight + ins.offsetHeight) / 4)
- doit(head.offsetHeight + ins.offsetHeight)
- })
- })
- // return;
- const doit = (maxheights) => {
- this.domMove = new moveWindow({
- id: 'mobileActivity',
- minHeight: that.useHeight,
- maxHeight: maxheights || windowHeight / 2,
- critical: maxheights / 4,
- fn: function (res) {
- that.height = +res.height
- that.bottom = +res.height + 15
- // console.log(+res.height, "=======");
- if (res.state != 'on') {
- that.openValue = res.state
- }
- }
- })
- this.domMove.init()
- // console.log(this.domMove);
- // 转移···添加点和线
- const addressOur = this.changeData(
- this.useData.query,
- 'addressname',
- 'address'
- )
- const lxOur = this.changeData(this.useData.query, 'lxname', 'lx')
- // console.log(addressOur, lxOur);
- that.$store.dispatch('MSET_DRAWALINELAYERMANY', [
- lxOur,
- addressOur,
- this.useData.query,
- function () {
- that.domMove.opens(false, true)
- }
- ])
- }
- }
- }
- },
- mounted () { },
- methods: {
- inToInit () {
- // 初始化
- this.openValue = false
- this.height = this.useHeight
- this.bottom = this.useBottom
- for (const k in this.leftNavData) {
- this.leftNavData[k].flag = true
- this.leftNavData[k].img = this.leftNavData[k].checked
- }
- },
- // 处理主数据
- doData (val) {
- const srcList = val.opendata.tpurl.split(',')
- this.useData = {
- data: val,
- url: srcList[0],
- srcList: srcList,
- smallData: [
- {
- lable: '主办方',
- value: val.opendata.sponsor
- },
- {
- lable: '承办方',
- value: val.opendata.undertake
- }
- ],
- detailedData: [
- {
- lable: '活动时间',
- value: val.opendata.time
- },
- {
- lable: '活动详情',
- value: val.opendata.context
- }
- ],
- query: {
- name: val.opendata.hdname,
- bgImg: val.opendata.tpurl,
- from: '活动',
- websiteUrl: val.opendata.websiteurl,
- telePhone: val.opendata.telephone,
- introduce: val.opendata.context,
- video: val.opendata.videourl,
- // buts: ["定位"],
- // 活动添加的字段
- addressname: val.opendata.addressname.split(';'),
- address: val.opendata.address.split(';'),
- lxname: val.opendata.lxname.split(';'),
- lx: val.opendata.lx.split(';'),
- lntLat: [
- val.opendata.address.split(';')[0].split(',')[0],
- val.opendata.address.split(';')[0].split(',')[1]
- ],
- panoramaurl: val.opendata.panoramaurl // 全景
- }
- }
- },
- // 启动监听事件
- init () {
- this.domMove.init()
- },
- // 关闭监听事件
- closeInit () {
- this.domMove.closeInit()
- },
- // 控制线路和点的显影
- mobileActivityCoutrolClick (item) {
- item.flag = !item.flag
- if (item.flag == true) {
- item.img = item.checked
- } else {
- item.img = item.normal
- }
- this.$store.commit('showLineOrPoint', {
- layer: item.layer,
- flag: item.flag
- })
- },
- changeData (data, name, value) {
- const arr = []
- for (const k in data[name]) {
- arr.push({
- name: data[name][k],
- value:
- name == 'lxname'
- ? data[value][k]
- .split('(')[1]
- .split(')')[0]
- .split(',')
- .join(';')
- .split(' ')
- .join(',')
- : [+data[value][k].split(',')[0], +data[value][k].split(',')[1]]
- })
- }
- return arr
- },
- closeActivity () {
- this.$store.commit('set_showActivity', { state: false })
- if (this.domMove) {
- this.closeInit()
- }
- // 关闭路线和点的图层
- this.$store.commit('removePolylineMany')
- // 关闭随地图弹窗
- this.$store.dispatch('closeMobileWindowsDom')
- // 显示右侧栏
- this.$store.commit('SET_SeeAndNotSee', true)
- },
- checkDom (methods, name, fn) {
- // 声明定时器
- var timer = null
- // 检查dom是否执行完成
- function checkDom () {
- // let dom = that.$refs[name];
- const dom = document[methods](name)
- if (dom) {
- // 执行dom加载完成后的操作
- // 清除定时器
- if (!timer) {
- clearTimeout(timer)
- }
- if (fn) {
- // 回调函数
- fn(dom)
- } else {
- return dom
- }
- } else {
- // 自我调用
- timer = setTimeout(checkDom, 100)
- }
- }
- // 首次执行
- checkDom()
- }
- }
-}
-</script>
-
-<style lang="scss">
-#mobileActivity {
- position: fixed;
- bottom: 0px;
- left: 0px;
- width: 100%;
- // height: 50px;
- background-color: #fff;
- z-index: 999;
- transition: height 0.1s;
- border-radius: 15px 15px 0 0;
- .mobileActivity_heard {
- height: 35px;
- border-radius: 15px 15px 0 0;
- width: 100%;
- background-color: #409eff;
- color: #fff;
- border-bottom: 1px solid rgba($color: #acacac, $alpha: 0.5);
- box-shadow: 0 0px 10px -3px rgba($color: #acacac, $alpha: 0.5);
- .mobileActivity_title {
- width: 100%;
- height: 100%;
- line-height: 35px;
- text-indent: 1rem;
- }
- .mobileActivity_close {
- position: absolute;
- right: 5px;
- top: 5px;
- font-size: 25px;
- }
- }
- .mobileActivity_in {
- width: 100%;
- height: auto;
- overflow: hidden;
- padding-bottom: 5px;
- .mobileActivity_insmall {
- background-color: #fff;
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: space-around;
- .mobileActivity_insmallimg {
- width: 90px;
- height: 90px;
- }
- .mobileActivity_insmallxiangqing {
- width: calc(100% - 110px);
- height: 94px;
- display: flex;
- align-items: center;
- justify-content: space-around;
- flex-direction: column;
- .mobileActivity_insmallxiangqingIn {
- width: 100%;
- }
- }
- }
- .mobileActivity_detailed {
- background-color: rgba(202, 202, 202, 0.2);
- padding: 3px 0 0 0;
- width: 100%;
- height: 100%;
- box-sizing: border-box;
- .mobileActivity_detailedIn {
- background-color: #fff;
- box-sizing: border-box;
- width: 100%;
- padding: 5px;
- margin: 0 0 3px 0;
- }
- }
- .mobileActivity_insmallxiangqingIn_s {
- font-weight: 600;
- }
- }
-}
-
-.notOpens {
- &::after {
- content: '';
- display: block;
- width: 20px;
- height: 4px;
- background-color: rgba(202, 202, 202, 1);
- position: absolute;
- top: -9px;
- left: calc(50% - 10px);
- border-radius: 5px;
- }
-}
-
-.isOpens {
- &::after {
- content: '';
- display: block;
- width: 13px;
- height: 4px;
- background-color: rgba(202, 202, 202, 1);
- position: absolute;
- top: -9px;
- left: calc(50% - 12px);
- border-radius: 5px;
- transform: rotate(30deg);
- }
- &::before {
- content: '';
- display: block;
- width: 13px;
- height: 4px;
- background-color: rgba(202, 202, 202, 1);
- position: absolute;
- top: -9px;
- left: calc(50% - 4px);
- border-radius: 5px;
- transform: rotate(-30deg);
- }
-}
-.mobileActivity_coutrol {
- position: fixed;
- bottom: 150px;
- left: 0px;
- z-index: 200;
- background-color: #fff;
- border-radius: 0 17px 17px 0;
- transition: all 0.18s;
- ul {
- position: relative;
- top: 3px;
- }
- li {
- margin-bottom: 6px;
- font-weight: 400;
- display: block;
- width: 80px;
- height: 30px;
- line-height: 30px;
- background-color: #fff;
- border-radius: 15px;
- text-align: center;
- font-size: 0;
- cursor: pointer;
-
- img {
- position: relative;
- transition: all 0.5s;
- width: 24px;
- height: 24px;
- vertical-align: middle;
- margin-right: 10px;
- image-rendering: -moz-crisp-edges;
- image-rendering: -o-crisp-edges;
- image-rendering: -webkit-optimize-contrast;
- image-rendering: crisp-edges;
- -ms-interpolation-mode: nearest-neighbor;
- }
-
- span {
- display: inline-block;
- vertical-align: middle;
- font-size: 14px;
- color: #2f2f2f;
- }
- }
-}
-</style>
diff --git "a/src/components/mobileActivity\346\227\247\347\232\204\346\262\241\345\272\225\345\233\276/move.js" "b/src/components/mobileActivity\346\227\247\347\232\204\346\262\241\345\272\225\345\233\276/move.js"
deleted file mode 100644
index 1f5f2b6..0000000
--- "a/src/components/mobileActivity\346\227\247\347\232\204\346\262\241\345\272\225\345\233\276/move.js"
+++ /dev/null
@@ -1,166 +0,0 @@
-class moveWindow {
- constructor(data) {
- this.id = data.id;
- this.start = 0;
- this.end = 0;
- this.domHeight = 0;
- this.domMove = null;
- this.openValue = false;
- this.useHeight = data.minHeight;
- this.maxHeight = data.maxHeight;
- this.height = data.minHeight;
- this.critical = data.critical;
- let that = this;
- this.fn =
- data.fn ||
- function (res) {
- console.log("未设置回调函数");
- console.log(res);
- };
-
- this.ListenerTouchmove = function (window) {
- let moseHeight = window.changedTouches[0].clientY;
- // let windowHeight = document.body.clientHeight; //屏幕宽度
- let endOn = moseHeight;
- let cha = +that.domHeight + that.start - +endOn;
- if (cha >= that.maxHeight) {
- cha = that.maxHeight;
- } else if (cha <= that.useHeight) {
- cha = that.useHeight;
- }
- let d = {
- state: "on",
- height: cha,
- };
- that.fn(d);
- };
- this.ListenerTouchstart = function (window) {
- let moseHeight = window.changedTouches[0].clientY;
- that.start = moseHeight;
- that.domHeight = document
- .getElementById(that.id)
- .style.cssText.split("px")[0]
- .split("height:")[1];
- };
- this.ListenerTouchend = function (window) {
- let moseHeight = window.changedTouches[0].clientY;
- that.end = moseHeight;
- let cha, states;
- if (that.end >= that.start) {
- states = false; //方向
- cha = that.end - that.start;
- } else {
- states = true; //方向
- cha = that.start - that.end;
- }
- if (cha >= that.critical) {
- //高
- that.opens(states, true); //程度
- } else if (cha < that.critical) {
- //低
- that.opens(states, false); //程度
- }
- };
- return this;
- }
- //启动监听事件
- init() {
- // this.domMove = document.getElementById(this.id);
- let that = this;
- this.checkDom(that.id, (dom) => {
- //检测是否有dom
- that.domMove = dom;
- that.domMove.addEventListener("touchmove", that.ListenerTouchmove);
- // 结束位置靠滑动距离判断
- that.domMove.addEventListener("touchstart", that.ListenerTouchstart);
- that.domMove.addEventListener("touchend", that.ListenerTouchend);
- });
- }
- //关闭监听事件
- closeInit() {
- this.domMove = document.getElementById(this.id);
- this.domMove.removeEventListener("touchmove", this.ListenerTouchmove);
- // 结束位置靠滑动距离判断
- this.domMove.removeEventListener("touchstart", this.ListenerTouchstart);
- this.domMove.removeEventListener("touchend", this.ListenerTouchend);
- }
- //输出事件
- opens(val, chengdu) {
- if (chengdu) {
- this.openValue = val;
- if (val) {
- this.height = this.maxHeight;
- } else {
- this.height = this.useHeight;
- }
- } else {
- this.height = this.domHeight;
- }
- let d = {
- state: this.openValue,
- height: this.height,
- };
- // console.log(val, this.height);
- this.fn(d);
- }
- changeHeight() {
- //抛出切换方法
- this.openValue = !this.openValue;
- if (this.openValue) {
- this.height = this.maxHeight;
- } else {
- this.height = this.useHeight;
- }
- let d = {
- state: this.openValue,
- height: this.height,
- };
- // console.log(val, this.height);
- this.fn(d);
- }
- checkDom(name, fn) {
- // 声明定时器
- var timer = null;
- // 检查dom是否执行完成
- function checkDom() {
- // let dom = that.$refs[name];
- let dom = document.getElementById(name);
- if (dom) {
- // 执行dom加载完成后的操作
- // 清除定时器
- if (!timer) {
- clearTimeout(timer);
- }
- if (fn) {
- //回调函数
- fn(dom);
- return;
- } else {
- return dom;
- }
- } else {
- // 自我调用
- timer = setTimeout(checkDom, 100);
- }
- }
- // 首次执行
- checkDom();
- }
- // 结束位置是一半判断
- // domMove.addEventListener("touchend", function (window) {
- // let moseHeight = window.changedTouches[0].clientY;
- // let windowHeight = document.body.clientHeight;
- // let cha = windowHeight - moseHeight;
- // console.log(cha, "最后位置");
- // let centerPoint =
- // (windowHeight / 2 - +that.useHeight) / 2 + +that.useHeight;
- // if (cha >= centerPoint) {
- // cha = windowHeight / 2;
- // } else if (cha < centerPoint) {
- // cha = that.useHeight;
- // }
- // that.height = cha;
- // });
-}
-
-export default moveWindow;
--
Gitblit v1.9.3