mirror of
https://gitee.com/was666/as-editor-h5.git
synced 2024-10-06 04:22:08 +08:00
feat: 优化跳转功能
This commit is contained in:
‘Aos’
parent
ab0c3e50d8
commit
17581c366b
48
package-lock.json
generated
48
package-lock.json
generated
@ -3520,6 +3520,16 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/bindings": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
|
||||
"integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"file-uri-to-path": "1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/bluebird": {
|
||||
"version": "3.7.2",
|
||||
"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
|
||||
@ -6691,6 +6701,13 @@
|
||||
"webpack": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/file-uri-to-path": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
|
||||
"integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/filesize": {
|
||||
"version": "3.6.1",
|
||||
"resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
|
||||
@ -9345,6 +9362,13 @@
|
||||
"thenify-all": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/nan": {
|
||||
"version": "2.17.0",
|
||||
"resolved": "https://registry.npmjs.org/nan/-/nan-2.17.0.tgz",
|
||||
"integrity": "sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/nanomatch": {
|
||||
"version": "1.2.13",
|
||||
"resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
|
||||
@ -17306,6 +17330,16 @@
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"bindings": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
|
||||
"integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"file-uri-to-path": "1.0.0"
|
||||
}
|
||||
},
|
||||
"bluebird": {
|
||||
"version": "3.7.2",
|
||||
"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
|
||||
@ -19892,6 +19926,13 @@
|
||||
"schema-utils": "^2.5.0"
|
||||
}
|
||||
},
|
||||
"file-uri-to-path": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
|
||||
"integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"filesize": {
|
||||
"version": "3.6.1",
|
||||
"resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
|
||||
@ -21969,6 +22010,13 @@
|
||||
"thenify-all": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"nan": {
|
||||
"version": "2.17.0",
|
||||
"resolved": "https://registry.npmjs.org/nan/-/nan-2.17.0.tgz",
|
||||
"integrity": "sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"nanomatch": {
|
||||
"version": "1.2.13",
|
||||
"resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
|
||||
|
||||
20
src/App.vue
20
src/App.vue
@ -9,11 +9,12 @@ export default {
|
||||
provide() {
|
||||
return {
|
||||
reload: this.reload,
|
||||
productJump: this.productJump
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isRouterAlive: true,
|
||||
isRouterAlive: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -24,6 +25,21 @@ export default {
|
||||
this.isRouterAlive = true
|
||||
})
|
||||
},
|
||||
// 跳转事件
|
||||
productJump(res) {
|
||||
if (res.http) {
|
||||
switch (res.linktype) {
|
||||
case '10': // 内部链接
|
||||
this.$router.push({
|
||||
path: res.http.externalLink
|
||||
})
|
||||
break
|
||||
case '11': // 外部链接
|
||||
window.location.href = res.http.externalLink
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 判断是否为移动端
|
||||
@ -39,7 +55,7 @@ export default {
|
||||
html.style = 'font-size: 37.5px;width: 375px; margin: 0 auto;'
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
|
||||
@ -52,6 +52,7 @@
|
||||
<!-- 导航 -->
|
||||
<div
|
||||
class="navigationList"
|
||||
@click="goHttp(item)"
|
||||
v-for="(item, index) in datas.imageList"
|
||||
:key="index"
|
||||
:style="{
|
||||
@ -88,12 +89,18 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'graphicnavigation',
|
||||
inject: ['productJump'],
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
created(){
|
||||
console.log(this.datas,'--------graphicnavigation')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goHttp(res) {
|
||||
this.productJump(res)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
class="magiccube"
|
||||
:style="{
|
||||
'padding-left': datas.pageMargin + 'px',
|
||||
'padding-right': datas.pageMargin + 'px',
|
||||
'padding-right': datas.pageMargin + 'px'
|
||||
}"
|
||||
>
|
||||
<img
|
||||
@ -26,6 +26,7 @@
|
||||
>
|
||||
<img
|
||||
draggable="false"
|
||||
@click="goHttp(datas.imageList[index - 1])"
|
||||
:src="datas.imageList[index - 1].src"
|
||||
alt=""
|
||||
:style="{ padding: datas.imgMargin / 2 + 'px' }"
|
||||
@ -44,11 +45,16 @@
|
||||
class="rubiksCubeType1 rubiksCubeType"
|
||||
:style="{
|
||||
margin: datas.imgMargin / 10 + '%',
|
||||
width: 33.33 + '%',
|
||||
width: 33.33 + '%'
|
||||
}"
|
||||
>
|
||||
<!-- width: 33 - datas.imgMargin / 10 + '%', -->
|
||||
<img draggable="false" :src="datas.imageList[index - 1].src" alt="" />
|
||||
<!-- width: 33 - datas.imgMargin / 10 + '%', -->
|
||||
<img
|
||||
draggable="false"
|
||||
@click="goHttp(datas.imageList[index - 1])"
|
||||
:src="datas.imageList[index - 1].src"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -63,10 +69,15 @@
|
||||
class="rubiksCubeType2 rubiksCubeType"
|
||||
:style="{
|
||||
margin: datas.imgMargin / 10 + '%',
|
||||
width: 25 - datas.imgMargin / 10 + '%',
|
||||
width: 25 - datas.imgMargin / 10 + '%'
|
||||
}"
|
||||
>
|
||||
<img draggable="false" :src="datas.imageList[index - 1].src" alt="" />
|
||||
<img
|
||||
draggable="false"
|
||||
@click="goHttp(datas.imageList[index - 1])"
|
||||
:src="datas.imageList[index - 1].src"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -82,6 +93,7 @@
|
||||
>
|
||||
<img
|
||||
draggable="false"
|
||||
@click="goHttp(datas.imageList[index - 1])"
|
||||
:src="datas.imageList[index - 1].src"
|
||||
alt=""
|
||||
:style="{ padding: datas.imgMargin + 'px' }"
|
||||
@ -97,6 +109,7 @@
|
||||
<div class="rubiksCubeType hw" style="padding-top: 100%">
|
||||
<img
|
||||
draggable="false"
|
||||
@click="goHttp(datas.imageList[0])"
|
||||
:src="datas.imageList[0].src"
|
||||
alt=""
|
||||
style="height:300px"
|
||||
@ -108,10 +121,11 @@
|
||||
class=" hw imgone"
|
||||
v-for="index in 2"
|
||||
:key="index"
|
||||
style="padding-top: 150px;height:150px"
|
||||
style="padding-top: 150px"
|
||||
>
|
||||
<img
|
||||
draggable="false"
|
||||
@click="goHttp(datas.imageList[index])"
|
||||
:src="datas.imageList[index].src"
|
||||
alt=""
|
||||
style="height:150px"
|
||||
@ -129,6 +143,7 @@
|
||||
<div class="rubiksCubeType hw" style="display: block; padding-top: 50%">
|
||||
<img
|
||||
draggable="false"
|
||||
@click="goHttp(datas.imageList[0])"
|
||||
:src="datas.imageList[0].src"
|
||||
alt=""
|
||||
:style="{ 'padding-bottom': datas.imgMargin + 'px' }"
|
||||
@ -143,6 +158,7 @@
|
||||
>
|
||||
<img
|
||||
draggable="false"
|
||||
@click="goHttp(datas.imageList[index])"
|
||||
:src="datas.imageList[index].src"
|
||||
alt=""
|
||||
:style="{ padding: datas.imgMargin + 'px' }"
|
||||
@ -160,6 +176,7 @@
|
||||
<div class="rubiksCubeType hw" style="padding-top: 100%">
|
||||
<img
|
||||
draggable="false"
|
||||
@click="goHttp(datas.imageList[0])"
|
||||
:src="datas.imageList[0].src"
|
||||
alt=""
|
||||
style="height:300px"
|
||||
@ -171,11 +188,12 @@
|
||||
<div class="rubiksCubeType hw" style="padding-top: 150px">
|
||||
<img
|
||||
draggable="false"
|
||||
@click="goHttp(datas.imageList[1])"
|
||||
:src="datas.imageList[1].src"
|
||||
alt=""
|
||||
:style="{
|
||||
'padding-bottom': datas.imgMargin + 'px',
|
||||
'padding-left': datas.imgMargin + 'px',
|
||||
'padding-left': datas.imgMargin + 'px'
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
@ -193,12 +211,13 @@
|
||||
>
|
||||
<img
|
||||
draggable="false"
|
||||
@click="goHttp(datas.imageList[index + 1])"
|
||||
:src="datas.imageList[index + 1].src"
|
||||
alt=""
|
||||
style="height:150px"
|
||||
:style="{
|
||||
'padding-left': datas.imgMargin + 'px',
|
||||
'padding-top': datas.imgMargin + 'px',
|
||||
'padding-top': datas.imgMargin + 'px'
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
@ -214,8 +233,14 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'magiccube',
|
||||
inject: ['productJump'],
|
||||
props: {
|
||||
datas: Object,
|
||||
datas: Object
|
||||
},
|
||||
methods: {
|
||||
goHttp(res) {
|
||||
this.productJump(res)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showimageList() {
|
||||
@ -248,8 +273,8 @@ export default {
|
||||
return false
|
||||
|
||||
return true
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -322,7 +347,6 @@ export default {
|
||||
cursor: pointer;
|
||||
&.rubiksCubeType0 {
|
||||
width: 50%;
|
||||
// height: 200px;
|
||||
&:first-of-type {
|
||||
img {
|
||||
padding-left: 0 !important;
|
||||
@ -339,7 +363,6 @@ export default {
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
// height: 200px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,66 +1,71 @@
|
||||
<template>
|
||||
<div class="pictureads">
|
||||
<!-- 无图片 -->
|
||||
<div class="upload" v-if="!imageList[0]">
|
||||
<div class="upload" v-if="!datas.imageList[0]">
|
||||
<i class="iconfont icon-lunbotu"></i>
|
||||
</div>
|
||||
|
||||
<!-- 一行一个 -->
|
||||
<div
|
||||
v-if="imageList[0] && swiperType === 0"
|
||||
v-if="datas.imageList[0] && datas.swiperType === 0"
|
||||
class="type0"
|
||||
:style="{
|
||||
'padding-left': datas.pageMargin + 'px',
|
||||
'padding-right': datas.pageMargin + 'px',
|
||||
}"
|
||||
ref="swiper"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in imageList"
|
||||
v-for="(item, index) in datas.imageList"
|
||||
:key="index"
|
||||
class="imgLis"
|
||||
:style="{ 'margin-bottom': datas.imageMargin + 'px' }"
|
||||
ref="swiper"
|
||||
>
|
||||
<!-- 图片 -->
|
||||
<img
|
||||
:src="item.src"
|
||||
draggable="false"
|
||||
:style="{ 'border-radius': datas.borderRadius + 'px' }"
|
||||
@click="goHttp(item)"
|
||||
/>
|
||||
<!-- 图片标题 -->
|
||||
<p class="title" v-show="item.text ? true : false">{{ item.text }}</p>
|
||||
<p class="title" v-if="item.text ? true : false">{{ item.text }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 轮播组件 -->
|
||||
<div
|
||||
class="swiper-container"
|
||||
:class="swiperM"
|
||||
v-if="
|
||||
(imageList[0] && swiperType === 1) ||
|
||||
swiperType === 2 ||
|
||||
swiperType === 3
|
||||
(datas.imageList[0] && datas.swiperType === 1) ||
|
||||
datas.swiperType === 2 ||
|
||||
datas.swiperType === 3
|
||||
"
|
||||
ref="swiper"
|
||||
>
|
||||
<div
|
||||
:class="
|
||||
swiperType === 3 && imageList[0]
|
||||
datas.swiperType === 3 && datas.imageList[0]
|
||||
? 'type3 type1 swiper-wrapper type3H'
|
||||
: 'swiper-wrapper type1'
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="swiper-slide"
|
||||
v-for="(item, index) in imageList"
|
||||
v-for="(item, index) in datas.imageList"
|
||||
:key="index"
|
||||
ref="swiper"
|
||||
>
|
||||
<!-- 图片 -->
|
||||
<img
|
||||
:src="item.src"
|
||||
alt=""
|
||||
alt
|
||||
draggable="false"
|
||||
:style="{ 'border-radius': datas.borderRadius + 'px' }"
|
||||
/>
|
||||
<!-- 图片标题 -->
|
||||
<p class="title" v-show="item.text ? true : false">{{ item.text }}</p>
|
||||
<p class="title" v-if="item.text ? true : false">{{ item.text }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -82,56 +87,30 @@ export default {
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
inject: ['productJump'],
|
||||
data() {
|
||||
return {
|
||||
mySwiper: null,
|
||||
swiperM: 'swiper-container',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
/* 类型切换 */
|
||||
swiperType() {
|
||||
console.log(this.datas.swiperType, '----------------轮播类型')
|
||||
this.addSwiper()
|
||||
return this.datas.swiperType
|
||||
},
|
||||
/* 图片删除或者增加 */
|
||||
imageList() {
|
||||
this.addSwiper()
|
||||
console.log(this.datas.imageList.length, '-------轮播数量')
|
||||
return this.datas.imageList
|
||||
},
|
||||
/* 分页器类型切换 */
|
||||
pagingType() {
|
||||
this.addSwiper()
|
||||
return this.datas.pagingType
|
||||
},
|
||||
/* 一行个数 */
|
||||
rowindividual() {
|
||||
this.addSwiper()
|
||||
if (this.datas.swiperType === 1) {
|
||||
return 1
|
||||
} else {
|
||||
return this.datas.rowindividual
|
||||
}
|
||||
},
|
||||
/* 图片间距 */
|
||||
imageMargin() {
|
||||
this.addSwiper()
|
||||
if (this.datas.swiperType === 1) {
|
||||
return 0
|
||||
} else {
|
||||
return this.datas.imageMargin
|
||||
}
|
||||
},
|
||||
created(){
|
||||
console.log(this.datas,'-------pictureads')
|
||||
},
|
||||
watch: {
|
||||
pagingType() {},
|
||||
rowindividual() {},
|
||||
imageMargin() {},
|
||||
mounted() {
|
||||
this.addSwiper()
|
||||
this.swiperM =
|
||||
this.swiperM +
|
||||
Math.floor(Math.random() * 1000) +
|
||||
Math.floor(Math.random() * 1000)
|
||||
},
|
||||
methods: {
|
||||
goHttp(res) {
|
||||
this.productJump(res)
|
||||
},
|
||||
/* 创建轮播对象 */
|
||||
addSwiper() {
|
||||
let _this = this
|
||||
this.$nextTick(() => {
|
||||
if (this.datas.swiperType !== 0 && this.datas.imageList[0]) {
|
||||
if (this.mySwiper instanceof Array) {
|
||||
@ -142,25 +121,30 @@ export default {
|
||||
// 每次重新创建swiper前都要销毁之前存在的轮播 不然轮播会重复
|
||||
this.mySwiper.destroy()
|
||||
}
|
||||
|
||||
let params = {
|
||||
const params = {
|
||||
loop: true,
|
||||
autoplay: true,
|
||||
preventClicks: true,
|
||||
preventClicksPropagation: true,
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
type: this.pagingType,
|
||||
type: this.datas.pagingType,
|
||||
},
|
||||
on: {
|
||||
click: function () {
|
||||
let realIndex = this.realIndex
|
||||
_this.goHttp(_this.datas.imageList[realIndex])
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
if (this.datas.swiperType === 1 || this.datas.swiperType === 2) {
|
||||
params.slidesPerView = this.rowindividual
|
||||
params.spaceBetween = this.imageMargin
|
||||
if (this.datas.swiperType === 2) {
|
||||
params.slidesPerView = this.datas.rowindividual
|
||||
params.spaceBetween = this.datas.imageMargin
|
||||
} else if (this.datas.swiperType === 3) {
|
||||
params.slidesPerView = 1.3
|
||||
params.centeredSlides = true
|
||||
}
|
||||
|
||||
this.mySwiper = new Swiper('.swiper-container', params)
|
||||
this.mySwiper = new Swiper('.' + this.swiperM, params)
|
||||
} else {
|
||||
if (this.mySwiper instanceof Array) {
|
||||
this.mySwiper.forEach((element) => {
|
||||
|
||||
@ -2,19 +2,19 @@
|
||||
<div class="tabBar">
|
||||
<div v-if="datas.iconList.length !== 0" class="tabbar">
|
||||
<van-tabbar
|
||||
route
|
||||
v-model="active"
|
||||
:placeholder="true"
|
||||
:border="datas.isShowBorder"
|
||||
:active-color="datas.activeColor"
|
||||
:inactive-color="datas.inactiveColor"
|
||||
@change="changeTab"
|
||||
replace="true"
|
||||
>
|
||||
<van-tabbar-item
|
||||
v-for="(item, index) in datas.iconList"
|
||||
:key="index"
|
||||
:name="item.iconName"
|
||||
:dot="item.isDot"
|
||||
:to="item.http.externalLink"
|
||||
>
|
||||
<span>{{ item.iconText }}</span>
|
||||
<template #icon="props">
|
||||
@ -48,6 +48,7 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'tabBar',
|
||||
inject: ['productJump'],
|
||||
props: {
|
||||
datas: Object
|
||||
},
|
||||
@ -59,22 +60,24 @@ export default {
|
||||
|
||||
created() {
|
||||
console.log(this.datas, '--------------tabbar data created')
|
||||
document.querySelector('.phone-container').style.cssText =
|
||||
'padding-bottom: 50px'
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
methods: {},
|
||||
methods: {
|
||||
changeTab(index) {
|
||||
if (this.datas.iconList.length !== 0) {
|
||||
console.log(this.datas.iconList[index], '-----------changeTab datas')
|
||||
this.productJump(this.datas.iconList[index])
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
beforeDestroy() {
|
||||
document.querySelector('.phone-container').style.cssText =
|
||||
'padding-bottom: 0px'
|
||||
}
|
||||
beforeDestroy() {}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user