Skip to content

yanghanwen / wanda-vr

Go to a project
Commit 237a9597 by 白宇
Options

切正式

parent 8d3b952c
Showing with 138 additions and 83 deletions
index1.html deleted 100644 → 0
<!DOCTYPE html>
<html>
<head>
<title>度假到丹寨123</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="./libs/rem.js"></script>
<script src="./libs/jweixin-1.6.0.js"></script>
<script src="./libs/axios.min.js"></script>
<script src="./libs/helper.js"></script>
</head>
<script>
alert(1);
function _init_wx_jssdk() {
if (wx) {
// wx.onMenuShareTimeline({
wx.updateTimelineShareData({
title: '1223', // 分享标题
link: 'https://wanda-h5.bdideal.com/danzhai-holiday/index.html?123', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl:"https://wanda-h5.bdideal.com/danzhai-holiday/images/load/go.png", // 分享图标
success: function () {
// 设置成功
alert('设置成功');
},
});
}
}
WX_JSSDK_INIT({})
.then((wxEnv) => {
_init_wx_jssdk();
})
.catch((err) => {
alert('err')
console.log(err);
});
</script>
<body>
<div>234</div>
</body>
</html>
route.html
......@@ -11,6 +11,9 @@
<script src="./libs/rem.js"></script>
<script src="./libs/vue/vue.js"></script>
<script src="./libs/axios.min.js"></script>
<script src="./libs/hammer.js"></script>
<script src="https://lib.baomitu.com/lodash.js/4.17.19/lodash.min.js"></script>
<style>
html,body{
background:#000;
......@@ -70,7 +73,8 @@
.nav-item {
display: inline-block;
width: 1.14rem;
height: 1.85rem;
height: 1.65rem;
padding-top: .18rem;
margin-left: 0.42rem;
border-radius: 0.1rem;
overflow: hidden;
......@@ -402,6 +406,7 @@
</head>
<body>
<!--:style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}"-->
<div id="app1">
<div id="app" class="page-wrap" v-if="loadReady" :class="{fixed:showPoster}"
:style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}">
......@@ -416,7 +421,6 @@
<div class="nav-item__mtitle">{{item.title}}</div>
</div>
</div>
<div v-if="activeIdx===0" class="content">
<div class="content__text">
<div class="route-title">{{navs[activeIdx].title}}</div>
......@@ -573,7 +577,6 @@
</div>
</div>
</div>
<!--:style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}"-->
<div class="bottom" v-if="!showPoster">
<img @click="bindShareEvent" class="bottom__icon" src="./images/show/share.png"/>
......@@ -608,6 +611,7 @@
</div>
</div>
<canvas id="canvasEle"></canvas>
<script src="./libs/helper.js"></script>
<script>
......@@ -893,6 +897,31 @@ var vueInstance = new Vue({
},
created() {
this._init_func()
},
mounted(){
var that = this
var panleft = _.debounce(function(){
that.activeIdx ++
that.refreshShareText();
}, 300)
var panright = _.debounce(function(){
that.activeIdx = that.activeIdx - 1
that.refreshShareText();
}, 300)
var dom = document.querySelector('#app1')
var hammerTest = new Hammer(dom);
hammerTest.on('pan', function(ev) {
if (ev.additionalEvent == 'panleft') {
if(that.activeIdx != 2){
panleft()
}
}
if (ev.additionalEvent == 'panright') {
if(that.activeIdx != 0){
panright()
}
}
})
}
})
</script>
......
show.html
......@@ -7,14 +7,26 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<script src="./libs/rem.js?123123"></script>
<script src="./libs/helper.js"></script>
<script src="./libs/html2canvas.js"></script>
<script src="./libs/vue/vue.js"></script>
<script src="./libs/axios.min.js"></script>
<script src="./libs/axios.min.js"></script>
<link rel="stylesheet" href="./libs/swiper-bundle.min.css">
<script src="./libs/swiper-bundle.min.js"></script>
<style>
html,body{
background:#000;
}
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
width: 100%;
height: 100%;
}
#canvasEle{
position: fixed;
left: 200%;
......@@ -57,7 +69,7 @@
margin-top: 0.35rem;
width: 100%;
white-space: nowrap;
height: 1.85rem;
height: 2.05rem;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
......@@ -336,25 +348,35 @@
</style>
</head>
<body>
<div id="app" class="page-wrap" v-if="loadReady" :class="{fixed:showPoster}" :style="{backgroundImage:'url(./images/show/fupin.png)'}">
<div id="app" class="page-wrap" v-if="loadReady" :class="{fixed:showPoster}" :style="{backgroundImage:'url(./images/show/fupin.png)'}">
<div class="nav-list">
<div class="nav-list" ref=nav>
<div class="nav-item" v-for="(item,idx) in navs" :key="idx" :class="{active:idx===activeIdx}" @click="setActive(idx,item)">
<div class="nav-item__iconbox">
<img :src="item.small_image" class="nav-item__icon" />
</div>
<div class="nav-item__mtitle">{{item.title}}</div>
<div class="nav-item__mtitle" style="padding-bottom:.2rem;">{{item.title}}</div>
</div>
</div>
<div class="mtitle">
{{navs[activeIdx].title}}
</div>
<div class="thumb">
<img class="thumb__img" :src="navs[activeIdx].image" />
</div>
<div class="content">
<div class="content__text" v-html="navs[activeIdx].content"></div>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,index) in navs" :key="index">
<div class="mtitle">
{{navs[index].title}}
</div>
<div class="thumb">
<img class="thumb__img" :src="navs[index].image" />
</div>
<div class="content">
<div class="content__text" v-html="navs[index].content"></div>
</div>
</div>
</div>
</div>
<!--:style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}"-->
<div class="bottom" v-if="!showPoster" >
<img @click="bindShareEvent" class="bottom__icon" src="./images/show/share.png" />
......@@ -392,7 +414,8 @@
<canvas id="canvasEle"></canvas>
<script src="./libs/jweixin-1.6.0.js"></script>
<script>
var myswiper
var swiperStartType = 'nav' //swiper 触发方式 滑动 nav点击
var vueInstance = new Vue({
el:'#app',
data(){
......@@ -577,7 +600,13 @@ var vueInstance = new Vue({
// showModal()
},
async setActive(idx,initJsSdk=true){
swiperStartType = 'nav'
this.activeIdx = Number(idx)
try {
myswiper.slideTo(Number(idx))
} catch (error) {
}
//this.shareDesc = this.navs[this.activeIdx].content
this.curShareImg = this.navs[this.activeIdx].share_image;
if(initJsSdk)this.shareToFirends()
......@@ -586,9 +615,10 @@ var vueInstance = new Vue({
var category_id = getQueryByString(location.href,'id')
this.navs = await $get('/content/list?category_id='+category_id).then(res=>res.data).catch(err=>{throw err})
console.log(this.navs)
this.contentList = await $get('/travel/desc').then(res=>res.data).catch(err=>{throw err})
this.refreshShareText(true)
// var idx = getQueryByString(location.href,'idx')
// if(!isNaN(idx) && idx>=0){
......@@ -613,21 +643,41 @@ var vueInstance = new Vue({
})
this.loadReady = true
this.swiperInit()
setTimeout(() => {
this.generatePost();
}, 1000);
},
swiperInit(){
var that = this
setTimeout(function(){
myswiper = new Swiper('.swiper-container',{
on: {
slideChangeTransitionEnd: function(){
that.activeIdx = this.activeIndex ;
that.curShareImg = that.navs[this.activeIndex].share_image;
if (swiperStartType !== 'nav') that.$refs.nav.scrollLeft = 1.72 * (this.activeIndex-3) * $rem
},
touchMove: function(swiper,event){
//你的事件
swiperStartType = 'touchMove'
},
}
})
},100)
}
},
created(){
this._init_func()
}
},
mounted(){
},
})
</script>
<script src="./libs/rem.js"></script>
<script>
function createImgByAsync(url) {
return new Promise((resolve, reject) => {
......
travel.html
......@@ -7,9 +7,13 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<script src="./libs/rem.js"></script>
<script src="./libs/jweixin-1.6.0.js"></script>
<script src="./libs/helper.js"></script>
<script src="./libs/vue/vue.js"></script>
<script src="./libs/axios.min.js"></script>
<script src="./libs/hammer.js"></script>
<script src="https://lib.baomitu.com/lodash.js/4.17.19/lodash.min.js"></script>
<style>
html,body{
background:#000;
......@@ -64,7 +68,8 @@
.nav-item{
display: inline-block;
width: 1.14rem;
height: 1.85rem;
height: 1.65rem;
padding-top: 0.18rem;
margin-left: 0.42rem;
border-radius: 0.1rem;
overflow: hidden;
......@@ -338,8 +343,8 @@
</head>
<body>
<!--:style="{backgroundImage:'url('+navs[activeIdx].bg_image+')'}"-->
<div id="app" class="page-wrap" v-if="loadReady" :class="{fixed:showPoster}" :style="{backgroundImage:'url(./images/show/fupin.png)'}" >
<div id=app1>
<div id="app" class="page-wrap" v-if="loadReady" :class="{fixed:showPoster}" :style="{backgroundImage:'url(./images/show/fupin.png)'}">
<div class="nav-list">
<div class="nav-item" v-for="(item,idx) in navs" :key="idx" :class="{active:idx===activeIdx}" @click="setActive(idx,item)">
<div class="nav-item__iconbox">
......@@ -441,6 +446,7 @@
</div>
</div>
</div>
<canvas id="canvasEle"></canvas>
<script>
function createImgByAsync(url) {
......@@ -661,9 +667,7 @@ var vueInstance = new Vue({
{title:'客运',icon:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/cart.png',icona:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/cart-a.png',share_image:'https://wanda-static.bdideal.com/danzhai-holiday-test/danzhai-content-15993815184676.png',small_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E5%AE%A2%E8%BF%90.png',bg_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/bg.png',image:'./images/route/map.png'},
{title:'自驾',icon:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/zijia.png',icona:'https://wzw2020.oss-cn-beijing.aliyuncs.com/icon/zijia-a.png',share_image:'https://wanda-static.bdideal.com/danzhai-holiday-test/danzhai-content-15993815184676.png',small_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/%E8%87%AA%E9%A9%BE.png',bg_image:'https://wzw2020.oss-cn-beijing.aliyuncs.com/bg.png',image:'./images/route/map.png'},
]
// console.log(this.navs)
this.contentList = await $get('/travel/desc').then(res=>res.data).catch(err=>{throw err})
this.refreshShareText()
// var idx = getQueryByString(location.href,'idx')
// if(!isNaN(idx) && idx>=0){
......@@ -691,10 +695,33 @@ var vueInstance = new Vue({
},
created(){
this._init_func()
}
},
mounted(){
var that = this
var panleft = _.debounce(function(){
that.activeIdx ++
that.refreshShareText();
}, 300)
var panright = _.debounce(function(){
that.activeIdx = that.activeIdx - 1
that.refreshShareText();
}, 300)
var dom = document.querySelector('#app1')
var hammerTest = new Hammer(dom);
hammerTest.on('pan', function(ev) {
if (ev.additionalEvent == 'panleft') {
if(that.activeIdx != 3){
panleft()
}
}
if (ev.additionalEvent == 'panright') {
if(that.activeIdx != 0){
panright()
}
}
})
}
})
</script>
<script src="./libs/jweixin-1.6.0.js"></script>
<script src="./libs/rem.js"></script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment