You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
282 lines
7.9 KiB
282 lines
7.9 KiB
<template>
|
|
<view class="wrap">
|
|
<view class="stabar"></view>
|
|
<view class="mainwrap">
|
|
<view class="topcont">
|
|
<img :src="topImg"></img>
|
|
</view>
|
|
<view class="banbox">
|
|
<swiper style="height: 100%;" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
|
|
<swiper-item v-for="(item, i) in swiperList" :key="i">
|
|
<navigator style="height: 100%;" class="swiper-item">
|
|
<img :src="item"></img>
|
|
</navigator>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="itembox">
|
|
<span v-for="(item,i) in sceneList" :key="i" @click="navClickHandler(item)"><img :src="item.uploadPath" class="scene-img"></image></span>
|
|
</view>
|
|
<view class="middleContent" v-if="showTitle">
|
|
<view v-html="content"></view>
|
|
</view>
|
|
</view>
|
|
<view class="footbox">
|
|
<tabbar :page="page"></tabbar>
|
|
</view>
|
|
|
|
|
|
<!-- <view class="index-background">
|
|
<image :src="topImg"></image>
|
|
</view>
|
|
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
|
|
<swiper-item v-for="(item, i) in swiperList" :key="i">
|
|
<navigator class="swiper-item">
|
|
<image :src="item"></image>
|
|
</navigator>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class="scene-list">
|
|
<view class="scene-item" v-for="(item,i) in sceneList" :key="i" @click="navClickHandler(item)">
|
|
<image :src="item" class="scene-img"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<tabbar :page="page"></tabbar> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tabbar from "@/components/tabbar/tabbar.vue";
|
|
import { mapMutations, mapState } from 'vuex'
|
|
export default {
|
|
|
|
data() {
|
|
return {
|
|
page: "",
|
|
//顶部图片
|
|
topImg: "",
|
|
leftImg: "",
|
|
rightImg: "",
|
|
//轮播图数据列表
|
|
swiperList: [],
|
|
//场景入口
|
|
sceneList: [],
|
|
x:0,
|
|
showTitle:true,
|
|
y:0,
|
|
content:""
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState('m_user', ['token'])
|
|
},
|
|
onLoad(options) {
|
|
this.checkLogin();
|
|
if (this.token != "") {
|
|
this.getSwiperList();
|
|
this.getLocation();
|
|
this.getContent();
|
|
this.timer = setTimeout(() => {
|
|
this.showTitle = false
|
|
clearTimeout(this.timer)
|
|
}, 5000)
|
|
}
|
|
},
|
|
onShow() {
|
|
this.page= "home"
|
|
if (this.token != "") {
|
|
this.getSwiperList();
|
|
}
|
|
},
|
|
onPullDownRefresh() {
|
|
this.getSwiperList();
|
|
},
|
|
methods: {
|
|
|
|
async getSwiperList() {
|
|
const {
|
|
data: res
|
|
} = await uni.$http.post('/small/customImage/listAll',{page:"home"})
|
|
if (!res.success) return uni.$showMsg()
|
|
|
|
res.data.forEach(item => {
|
|
item.uploadPath = uni.$http.baseUrl + item.uploadPath
|
|
if (item.position === "top") {
|
|
this.topImg = item.uploadPath
|
|
} else if (item.position.indexOf("banner") !=-1) {
|
|
this.swiperList.push(item.uploadPath)
|
|
} else if (item.position.indexOf("bottom-left") !=-1) {
|
|
const obj = {uploadPath:item.uploadPath,isOpen:item.status}
|
|
this.sceneList[0] = obj
|
|
}else if (item.position.indexOf("bottom-right-top") !=-1){
|
|
const obj = {uploadPath:item.uploadPath,isOpen:item.status}
|
|
this.sceneList[1] = obj
|
|
}
|
|
})
|
|
|
|
// uni.$showMsg('数据请求成功！')
|
|
},
|
|
async getContent() {
|
|
|
|
const {
|
|
data: res
|
|
} = await uni.$http.post('/small/project/text/listAll',{type:3})
|
|
if (!res.success) return uni.$showMsg()
|
|
|
|
res.data.forEach(item=>{
|
|
this.content = item.content
|
|
|
|
})
|
|
},
|
|
navClickHandler(item) {
|
|
uni.navigateTo({
|
|
url: '/subpkg/list/list?isOpen='+item.isOpen
|
|
})
|
|
},
|
|
checkLogin() {
|
|
if(this.token === "") {
|
|
uni.reLaunch({
|
|
url: '/subpkg/login/login',
|
|
})
|
|
}
|
|
},
|
|
getLocation () {
|
|
let that = this
|
|
// 获取用户是否开启 授权获取当前的地理位置、速度的权限。
|
|
uni.getSetting({
|
|
success (res) {
|
|
console.log(res)
|
|
|
|
// 如果没有授权
|
|
if (!res.authSetting['scope.userLocation']) {
|
|
// 则拉起授权窗口
|
|
uni.authorize({
|
|
scope: 'scope.userLocation',
|
|
success () {
|
|
//点击允许后--就一直会进入成功授权的回调 就可以使用获取的方法了
|
|
uni.getLocation({
|
|
type: 'wgs84',
|
|
success: function (res) {
|
|
that.x = res.longitude
|
|
that.y = res.latitude
|
|
console.log(res)
|
|
console.log('当前位置的经度：' + res.longitude)
|
|
console.log('当前位置的纬度：' + res.latitude)
|
|
// uni.showToast({
|
|
// title: '当前位置的经纬度：' + res.longitude + ',' + res.latitude,
|
|
// icon: 'none'
|
|
// })
|
|
}, fail (error) {
|
|
console.log('失败', error)
|
|
}
|
|
})
|
|
},
|
|
fail (error) {
|
|
//点击了拒绝授权后--就一直会进入失败回调函数--此时就可以在这里重新拉起授权窗口
|
|
console.log('拒绝授权', error)
|
|
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '若点击不授权，将无法使用位置功能',
|
|
cancelText: '不授权',
|
|
cancelColor: '#999',
|
|
confirmText: '授权',
|
|
confirmColor: '#f94218',
|
|
success (res) {
|
|
console.log(res)
|
|
if (res.confirm) {
|
|
// 选择弹框内授权
|
|
uni.openSetting({
|
|
success (res) {
|
|
console.log(res.authSetting)
|
|
}
|
|
})
|
|
} else if (res.cancel) {
|
|
// 选择弹框内 不授权
|
|
console.log('用户点击不授权')
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
// 有权限则直接获取
|
|
uni.getLocation({
|
|
type: 'wgs84',
|
|
success: function (res) {
|
|
that.x = res.longitude
|
|
that.y = res.latitude
|
|
console.log(res)
|
|
console.log('当前位置的经度：' + res.longitude)
|
|
console.log('当前位置的纬度：' + res.latitude)
|
|
// uni.showToast({
|
|
// title: '当前位置的经纬度：' + res.longitude + ',' + res.latitude,
|
|
// icon: 'none'
|
|
// })
|
|
}, fail (error) {
|
|
uni.showToast({
|
|
title: '请勿频繁调用！',
|
|
icon: 'none',
|
|
})
|
|
console.log('失败', error)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
},
|
|
components: {tabbar}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import url("@/static/base_css.css");
|
|
.middleContent {
|
|
position: absolute;
|
|
top: 45%;
|
|
left: 50%;
|
|
z-index: 9999;
|
|
-webkit-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
padding: 30rpx;
|
|
width: 400rpx;
|
|
height: 300rpx;
|
|
background-color: #c0b9e1;
|
|
border-radius: 10px;
|
|
opacity: 0.9;
|
|
}
|
|
// .index-background {
|
|
// image {
|
|
// height: 270rpx;
|
|
// width: 100%;
|
|
// }
|
|
// }
|
|
|
|
// swiper {
|
|
// height: 630rpx;
|
|
|
|
// .swiper-item,
|
|
// image {
|
|
// width: 100%;
|
|
// height: 100%;
|
|
// border-radius: 4px;
|
|
// }
|
|
// }
|
|
|
|
|
|
// .scene-list {
|
|
// display: flex;
|
|
// justify-content: space-around;
|
|
// margin: 5px 0;
|
|
// }
|
|
|
|
// .scene-img {
|
|
// width: 358rpx;
|
|
// height: 290rpx;
|
|
// border-radius: 8px;
|
|
// }
|
|
</style>
|