|
|
<template>
|
|
|
<view class="container">
|
|
|
|
|
|
<view class="wifi-data">
|
|
|
<view class="wifi-icon">
|
|
|
<u-icon color="#ffffff" name="wifi" size="30"></u-icon>
|
|
|
</view>
|
|
|
<view class="wifi-datas" color="#2979ff">
|
|
|
<view class="wifi-name">{{wifiForm.wifiName}}</view>
|
|
|
<view class="wifi-hot">
|
|
|
<text class="hot-text">快速连接</text>
|
|
|
<text class="hot-icon">.</text>
|
|
|
<text class="hot-text">无需密码</text>
|
|
|
<text class="hot-icon">.</text>
|
|
|
<text class="hot-text">保护隐私</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="wifi-success" v-if="!showBtn">
|
|
|
WI-FI连接成功
|
|
|
</view>
|
|
|
|
|
|
<u-button type="primary" text="一键连接WI-FI" @click="handleLinkwifi()" v-if="showBtn"></u-button>
|
|
|
<u-popup :show="show" mode="bottom">
|
|
|
<view class="video-container">
|
|
|
<view class="video-btns" :style="{paddingTop:statusBarHeight+'rpx'}">
|
|
|
<view class="second" v-show="countdown > 0">{{countdown}} 后连接WI-FI</view>
|
|
|
<view class="second" v-show="countdown == 0">已获得奖励</view>
|
|
|
<view class="close" @click="handleClose()">关闭</view>
|
|
|
</view>
|
|
|
<video id="video-box" v-if="show" :src="baseUrl + posterForm.videoPath" :autoplay="true"
|
|
|
:controls="false" @timeupdate="changeTimeupdate" @play="play"></video>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
getShanghu,
|
|
|
getPoster,
|
|
|
addNetHistory,
|
|
|
addPosterHistory,
|
|
|
getNet
|
|
|
} from '@/api/index.js'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
baseUrl: getApp().globalData.config.baseUrl,
|
|
|
showBtn: true,
|
|
|
show: false,
|
|
|
urlPath: '',
|
|
|
statusBarHeight: 0,
|
|
|
countdown: 0,
|
|
|
videoCurrentTime: 0, //视频播放时间
|
|
|
time: null,
|
|
|
wifiForm: {},
|
|
|
posterForm: {},
|
|
|
platform: null,
|
|
|
}
|
|
|
},
|
|
|
onLoad(option) {
|
|
|
// #ifdef MP-WEIXIN
|
|
|
let sys = uni.$u.sys()
|
|
|
this.statusBarHeight = sys.statusBarHeight + 44
|
|
|
// #endif
|
|
|
if (option.posterId) {
|
|
|
this.getNetinfo(option.posterId)
|
|
|
} else {
|
|
|
uni.showToast({
|
|
|
title: '获取网络信息失败！',
|
|
|
icon: 'error'
|
|
|
})
|
|
|
}
|
|
|
|
|
|
// this.getNetinfo(11)
|
|
|
},
|
|
|
methods: {
|
|
|
//根据微信扫小程序码进入首页拿到网络id查询网络详情
|
|
|
getNetinfo(netId) {
|
|
|
getNet(netId).then(response => {
|
|
|
this.wifiForm = response.data
|
|
|
})
|
|
|
},
|
|
|
|
|
|
//一键连接(提示用户连接WIFI需要看广告)
|
|
|
handleLinkwifi() {
|
|
|
let that = this
|
|
|
uni.showModal({
|
|
|
title: '温馨提示',
|
|
|
content: '连接WIFI需要观看一段视频广告，是否确认？',
|
|
|
success: (res) => {
|
|
|
if (res.confirm) {
|
|
|
// 根据当前网络的商户Id查询商户信息，然后根据商户信息中的广告id查到商户的广告
|
|
|
getShanghu(that.wifiForm.shanghuId).then(shanghu => {
|
|
|
getPoster(shanghu.data.posterId).then(poster => {
|
|
|
that.posterForm = poster.data
|
|
|
that.countdown = that.posterForm.duration
|
|
|
that.show = true
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
//记录历史广告
|
|
|
setPosterHistory() {
|
|
|
let data = {
|
|
|
posterId: this.posterForm.id,
|
|
|
posterName: this.posterForm.posterName,
|
|
|
startTime: this.posterForm.startTime,
|
|
|
endTime: this.posterForm.endTime,
|
|
|
videoPath: this.posterForm.videoPath,
|
|
|
shanghuId: this.wifiForm.shanghuId
|
|
|
}
|
|
|
addPosterHistory(data)
|
|
|
},
|
|
|
// 开始播放
|
|
|
play() {
|
|
|
this.enableTimer() //启用计时器
|
|
|
this.setPosterHistory()
|
|
|
},
|
|
|
//计时器
|
|
|
enableTimer() {
|
|
|
this.time = setInterval(() => {
|
|
|
if (this.countdown > 0) {
|
|
|
this.countdown--
|
|
|
} else {
|
|
|
clearInterval(this.time)
|
|
|
this.handleClose()
|
|
|
}
|
|
|
}, 1000)
|
|
|
},
|
|
|
//视频播放进度
|
|
|
changeTimeupdate(e) {
|
|
|
this.videoCurrentTime = e.detail.currentTime
|
|
|
|
|
|
},
|
|
|
//关闭弹窗
|
|
|
handleClose() {
|
|
|
this.show = false
|
|
|
console.log(Math.ceil(this.videoCurrentTime), this.posterForm.duration, Math.ceil(this.videoCurrentTime) >=
|
|
|
this
|
|
|
.posterForm.duration)
|
|
|
if (Math.ceil(this.videoCurrentTime) >= this.posterForm.duration) {
|
|
|
//证明已经看过视频时间
|
|
|
this.handleWifi()
|
|
|
} else {
|
|
|
uni.showToast({
|
|
|
title: '连接WI-FI失败!',
|
|
|
icon: 'error'
|
|
|
})
|
|
|
this.countdown = this.posterForm.duration
|
|
|
this.videoCurrentTime = 0
|
|
|
}
|
|
|
clearInterval(this.time)
|
|
|
},
|
|
|
|
|
|
//判断当前机器是否支持连接WIFI
|
|
|
handleWifi() {
|
|
|
uni.showLoading({
|
|
|
title: '连接中'
|
|
|
})
|
|
|
let that = this
|
|
|
uni.getSystemInfo({
|
|
|
success: function(res) {
|
|
|
var system = '';
|
|
|
that.platform = res.platform
|
|
|
if (res.platform == 'android') system = parseInt(res.system.substr(8));
|
|
|
if (res.platform == 'ios') system = parseInt(res.system.substr(4));
|
|
|
if (res.platform == 'android' && system < 6 || res.platform == 'ios' && system <
|
|
|
11.2) {
|
|
|
uni.showToast({
|
|
|
title: '手机版本不支持',
|
|
|
icon: 'error',
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
that.startWifi();
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
//初始化 Wi-Fi 模块
|
|
|
startWifi() {
|
|
|
var that = this
|
|
|
uni.startWifi({
|
|
|
success: function() {
|
|
|
//请求成功连接Wifi
|
|
|
that.Connected();
|
|
|
},
|
|
|
fail: function(res) {
|
|
|
uni.showToast({
|
|
|
title: '初始化WIFI失败！',
|
|
|
icon: 'error'
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
linkWifi() {
|
|
|
addNetHistory({
|
|
|
netId: this.wifiForm.id,
|
|
|
netName: this.wifiForm.netName,
|
|
|
wifiName: this.wifiForm.wifiName,
|
|
|
wifiPass: this.wifiForm.wifiPass,
|
|
|
shanghuId: this.wifiForm.shanghuId
|
|
|
})
|
|
|
uni.showToast({
|
|
|
title: '连接成功',
|
|
|
icon: 'success'
|
|
|
})
|
|
|
this.showBtn = false
|
|
|
},
|
|
|
|
|
|
Connected() {
|
|
|
var that = this
|
|
|
uni.connectWifi({
|
|
|
SSID: this.wifiForm.wifiName, //wifi名
|
|
|
password: this.wifiForm.wifiPass, //wifi密码
|
|
|
success: function(res) {
|
|
|
if (that.platform == 'ios') {
|
|
|
uni.getConnectedWifi({
|
|
|
partialInfo: true,
|
|
|
success: function(reult) {
|
|
|
console.log('成功', reult, that.wifiForm.wifiName)
|
|
|
if (reult.wifi.SSID == that.wifiForm.wifiName) {
|
|
|
that.linkWifi()
|
|
|
} else {
|
|
|
uni.showToast({
|
|
|
title: '连接失败！',
|
|
|
icon: "error"
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
fail: function(error) {
|
|
|
uni.showToast({
|
|
|
title: '连接失败！',
|
|
|
icon: "error"
|
|
|
})
|
|
|
console.log('失败', error)
|
|
|
}
|
|
|
})
|
|
|
|
|
|
} else {
|
|
|
that.linkWifi()
|
|
|
}
|
|
|
|
|
|
},
|
|
|
fail: function(err) {
|
|
|
uni.showToast({
|
|
|
title: '连接失败',
|
|
|
icon: 'error'
|
|
|
})
|
|
|
},
|
|
|
|
|
|
})
|
|
|
},
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
page {
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
.container {
|
|
|
height: 100%;
|
|
|
background-color: #F6F7F8;
|
|
|
box-sizing: border-box;
|
|
|
padding: 25rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.wifi-data {
|
|
|
border-radius: 16rpx;
|
|
|
background-color: #ffffff;
|
|
|
box-sizing: border-box;
|
|
|
padding: 20rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
.wifi-icon {
|
|
|
height: 100rpx;
|
|
|
width: 100rpx;
|
|
|
border-radius: 50%;
|
|
|
background: $u-primary;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
.wifi-datas {
|
|
|
box-sizing: border-box;
|
|
|
padding-left: 20rpx;
|
|
|
|
|
|
.wifi-name {
|
|
|
font-size: 28rpx;
|
|
|
font-weight: bold;
|
|
|
color: #333;
|
|
|
margin-bottom: 6px;
|
|
|
}
|
|
|
|
|
|
.wifi-hot {
|
|
|
color: #9DA2AB;
|
|
|
|
|
|
.hot-text {
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.hot-icon {
|
|
|
margin: 0 10rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.wifi-success {
|
|
|
border-radius: 16rpx;
|
|
|
background-color: #ffffff;
|
|
|
box-sizing: border-box;
|
|
|
padding: 40rpx 20rpx;
|
|
|
color: #32B78B;
|
|
|
font-size: 28rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.video-container {
|
|
|
width: 100%;
|
|
|
position: relative;
|
|
|
|
|
|
#video-box {
|
|
|
height: 100vh;
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.video-btns {
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
z-index: 100;
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
box-sizing: border-box;
|
|
|
padding: 0 20rpx;
|
|
|
|
|
|
&>view {
|
|
|
border: 1px solid #ccc;
|
|
|
color: white;
|
|
|
font-size: 24rpx;
|
|
|
border-radius: 25rpx;
|
|
|
box-sizing: border-box;
|
|
|
padding: 8rpx 20rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style> |
