|
|
<template>
|
|
|
<view class="container" style="padding:25rpx;">
|
|
|
|
|
|
<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">jichuang_5G</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">
|
|
|
WI-FI连接成功
|
|
|
</view>
|
|
|
|
|
|
<!-- <u-button type="primary" text="一键连接WI-FI" @click="handleCode()"></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}} 后获得奖励</view>
|
|
|
<view class="second" v-show="countdown == 0">已获得奖励</view>
|
|
|
<view class="close" @click="handleClose()">关闭</view>
|
|
|
</view>
|
|
|
<video id="video-box" v-if="show" :src="urlPath" :autoplay="true" :controls="false"
|
|
|
@timeupdate="changeTimeupdate"></video>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
findById,
|
|
|
getShanghu,
|
|
|
getPoster,
|
|
|
addNetHistory,
|
|
|
addPosterHistory
|
|
|
} from '@/api/index.js'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
baseUrl: getApp().globalData.config.baseUrl,
|
|
|
pathData: '',
|
|
|
urlPath: '',
|
|
|
time: null,
|
|
|
countdown: 5,
|
|
|
videoCurrentTime: 0,
|
|
|
show: false,
|
|
|
from: {},
|
|
|
statusBarHeight: 20,
|
|
|
shanghuId: null,
|
|
|
posterData: {},
|
|
|
}
|
|
|
},
|
|
|
onLoad(option) {
|
|
|
// #ifdef MP-WEIXIN
|
|
|
let sys = uni.$u.sys()
|
|
|
this.statusBarHeight = sys.statusBarHeight + 44
|
|
|
// #endif
|
|
|
// if (option.shanghuId) {
|
|
|
// this.shanghuId = option.shanghuId
|
|
|
|
|
|
// //根据码信息（shanghuId）获取WIFI信息，
|
|
|
// this.getFindbyid()
|
|
|
// } else {
|
|
|
// uni.showToast({
|
|
|
// title: '获取网络信息失败！',
|
|
|
// icon: 'error'
|
|
|
// })
|
|
|
// }
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
handleCode() {
|
|
|
uni.scanCode({
|
|
|
success: (res) => {
|
|
|
console.log('二维码信息', res)
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
//获取WIFI信息
|
|
|
getFindbyid() {
|
|
|
findById(this.shanghuId).then(res => {
|
|
|
this.from = {
|
|
|
wifiName: res.data.wifiName,
|
|
|
wifiPass: res.data.wifiPass
|
|
|
}
|
|
|
//提示用户需要看广告才能链接
|
|
|
this.lookPoster()
|
|
|
})
|
|
|
},
|
|
|
//看广告
|
|
|
lookPoster() {
|
|
|
let _this = this
|
|
|
uni.showModal({
|
|
|
title: '温馨提示',
|
|
|
content: '连接WIFI需要观看一段视频广告，是否确认？',
|
|
|
success: (res) => {
|
|
|
if (res.confirm) {
|
|
|
//查询商户的信息从而拿到广告视频路径
|
|
|
getShanghu(_this.shanghuId).then(shanghu => {
|
|
|
//广告id
|
|
|
let posterId = shanghu.data.posterId
|
|
|
//获取广告信息
|
|
|
getPoster(posterId).then(poster => {
|
|
|
_this.posterData = {
|
|
|
posterId: poster.data.id,
|
|
|
shanghuId: _this.shanghuId,
|
|
|
posterName: poster.data.posterName,
|
|
|
startTime: poster.data.startTime,
|
|
|
endTime: poster.data.endTime,
|
|
|
videoPath: poster.data.videoPath,
|
|
|
}
|
|
|
//视频路径
|
|
|
_this.urlPath = this.baseUrl + poster.data
|
|
|
.videoPath;
|
|
|
_this.show = true
|
|
|
//打开弹窗就播放视频了所以启用计时器
|
|
|
_this.EnableTimer()
|
|
|
})
|
|
|
})
|
|
|
} else {
|
|
|
uni.showToast({
|
|
|
title: '连接失败',
|
|
|
icon: 'error'
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
// 计时器
|
|
|
EnableTimer() {
|
|
|
this.time = setInterval(() => {
|
|
|
if (this.countdown > 0) {
|
|
|
this.countdown--
|
|
|
} else {
|
|
|
clearInterval(this.time)
|
|
|
}
|
|
|
}, 1000)
|
|
|
},
|
|
|
// 视频进度
|
|
|
changeTimeupdate(event) {
|
|
|
let {
|
|
|
currentTime,
|
|
|
duration
|
|
|
} = event.detail
|
|
|
this.videoCurrentTime = currentTime
|
|
|
},
|
|
|
//关闭弹窗
|
|
|
handleClose() {
|
|
|
this.show = false
|
|
|
if (this.videoCurrentTime >= 5) {
|
|
|
//链接WIFI
|
|
|
this.handleWifi()
|
|
|
} else {
|
|
|
uni.showToast({
|
|
|
title: '获取奖励失败',
|
|
|
icon: 'error'
|
|
|
})
|
|
|
this.countdown = 5
|
|
|
this.videoCurrentTime = 0
|
|
|
}
|
|
|
// 清除计时器
|
|
|
clearInterval(this.time)
|
|
|
//存广告历史
|
|
|
addPosterHistory(this.posterData)
|
|
|
},
|
|
|
handleWifi: function() {
|
|
|
let that = this
|
|
|
uni.getSystemInfo({
|
|
|
success: function(res) {
|
|
|
var system = '';
|
|
|
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) {
|
|
|
wx.showToast({
|
|
|
title: '手机版本不支持',
|
|
|
icon: 'error',
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
if (res.platform == 'ios' && system < 11.2) {
|
|
|
wx.showToast({
|
|
|
title: '手机版本不支持',
|
|
|
icon: 'error'
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
//2.初始化 Wi-Fi 模块
|
|
|
that.startWifi();
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
//初始化 Wi-Fi 模块
|
|
|
startWifi: function() {
|
|
|
var that = this
|
|
|
uni.startWifi({
|
|
|
success: function() {
|
|
|
//请求成功连接Wifi
|
|
|
that.Connected();
|
|
|
},
|
|
|
fail: function(res) {
|
|
|
uni.showToast({
|
|
|
title: '初始化WIFI失败！',
|
|
|
icon: 'error'
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
Connected: function() {
|
|
|
var that = this
|
|
|
uni.connectWifi({
|
|
|
SSID: this.from.wifiName, //wifi名
|
|
|
BSSID: '',
|
|
|
password: this.from.wifiPass, //wifi密码
|
|
|
success: function(res) {
|
|
|
addNetHistory({
|
|
|
shanghuId: _this.shanghuId,
|
|
|
wifiName: this.from.wifiName,
|
|
|
wifiPass: this.from.wifiPass,
|
|
|
isTrue: that.videoCurrentTime >= 5 ? 1 : 2
|
|
|
}).then(res => {
|
|
|
uni.showToast({
|
|
|
title: '连接成功',
|
|
|
icon: 'success'
|
|
|
})
|
|
|
})
|
|
|
|
|
|
},
|
|
|
fail: function(res) {
|
|
|
uni.showToast({
|
|
|
title: 'wifi连接失败',
|
|
|
icon: 'error'
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
page {
|
|
|
background: #F5F7F8;
|
|
|
}
|
|
|
|
|
|
.wifi-data {
|
|
|
border-radius: 16rpx;
|
|
|
background-color: #ffffff;
|
|
|
box-sizing: border-box;
|
|
|
padding: 20rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
.wifi-icon {
|
|
|
height: 100rpx;
|
|
|
width: 100rpx;
|
|
|
border-radius: 50%;
|
|
|
background: #32B78B;
|
|
|
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 {
|
|
|
margin-top: 20rpx;
|
|
|
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> |
