<template>
|
<view class="pages-vehicle-connect">
|
|
<view class="content" v-if="connectState == 1">
|
<view class="title">连接中</view>
|
<view class="content2">
|
<view class="auto-circle"></view>
|
<view>连接中...</view>
|
</view>
|
</view>
|
<view class="content" v-else-if="connectState == 2">
|
<view class="title">连接成功</view>
|
<view class="content2">
|
<image class="img" src="/images/Frame 178.svg" alt=" 图片" />
|
<view>【{{connectedDevice}}】连接成功</view>
|
</view>
|
</view>
|
<view class="content" v-else-if="connectState == 3">
|
<view class="title">连接失败</view>
|
<view class="content2">
|
<image class="img" src="/images/Frame 179.svg" alt=" 图片" />
|
<view class="title">无法连接设备</view>
|
<view>请确保车辆开机且未与其他终端配对</view>
|
</view>
|
</view>
|
<view class="content" v-else-if="connectState == 4">
|
<view class="title">连接准备</view>
|
<view class="content2">
|
|
<view>1、请将手机连接到‘{{ip}}’的Wifi网络</view>
|
<view>2、连接后回到本应用</view>
|
<image class="img-2" src="/images/Frame 180.svg" alt=" 图片" />
|
</view>
|
</view>
|
<view class="content" v-else>
|
<view class="title">连接准备</view>
|
</view>
|
<view v-if="connectState == 3" class="button-group">
|
<a-button type="primary" plain="true" class="button" @click="clickTry">
|
{{reconnectFlag ? "重新连接WiFi":"再试"}}
|
</a-button>
|
<a-button type="ghost" class="button" @click="clickCancel">取消
|
</a-button>
|
<view class="link-text"> <a @click="clickStudyMore">学习更多...</a> </view>
|
</view>
|
<view v-if="connectState == 4" class="button-group">
|
<a-button type="primary" plain="true" class="button" @click="clickLinkWifi">去连接
|
</a-button>
|
<a-button type="ghost" class="button" @click="clickTry">切换扫码连接
|
</a-button>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
session,
|
showToast,
|
showModal
|
} from "@/comm/utils.js"
|
import {
|
Button
|
} from 'antd-mobile-vue-next'
|
import androidWifi from "@/comm/wifi/android.js"
|
import iosWifi from "@/comm/wifi/ios.js"
|
import {
|
mtBattery,
|
checkIpLinkSuccess
|
} from "@/api/vehicle.js"
|
|
// 在页面中使用
|
export default {
|
name: "PagesVehicleConnect",
|
components: {
|
'a-button': Button,
|
},
|
data() {
|
return {
|
ip: "",
|
wifiSID: "",
|
wifiPassword: "",
|
connectState: 0,
|
connectedDevice: "",
|
reconnectFlag: false,
|
unloadFlag: false
|
}
|
},
|
computed: {
|
|
},
|
onLoad(option) {
|
this.ip = option.ip
|
this.wifiSID = option.sid || ""
|
this.wifiPassword = option.passwpord || ""
|
this.reconnectFlag = option.reconnect ? true : false
|
this.unloadFlag = false
|
this.loadData()
|
},
|
onUnload() {
|
this.unloadFlag = true
|
},
|
methods: {
|
setData(obj) {
|
let that = this;
|
let keys = [];
|
let val, data;
|
|
Object.keys(obj).forEach(function(key) {
|
keys = key.split(".");
|
val = obj[key];
|
data = that.$data;
|
keys.forEach(function(key2, index) {
|
if (index + 1 == keys.length) {
|
that.$set(data, key2, val);
|
} else {
|
if (!data[key2]) {
|
that.$set(data, key2, {});
|
}
|
}
|
data = data[key2];
|
});
|
});
|
},
|
loadData() {
|
try {
|
const app = getApp()
|
const platform = app.globalData.platform
|
console.log("platform connect", platform)
|
if (this.reconnectFlag) {
|
this.connectState = 3
|
setTimeout(() => {
|
if (platform == "android") {
|
androidWifi.initWifi()
|
}
|
}, 10000)
|
return
|
}
|
this.connectState = 1
|
setTimeout(() => {
|
this.checkConnectStatus()
|
|
}, 1000)
|
|
|
} catch (ex) {
|
this.showError(ex)
|
}
|
},
|
checkConnectStatus() {
|
const app = getApp()
|
const platform = app.globalData.platform
|
if (platform == "android") {
|
androidWifi.initWifi()
|
} else if (platform == "ios") {
|
|
}
|
console.log("checkConnectStatus", this.wifiSID)
|
|
let res = this.checkConnectSuccess().then((res) => {
|
if (!res)
|
if (this.wifiSID.trim()) {
|
this.connectWifi()
|
} else {
|
this.connectState = 4
|
}
|
else {
|
this.connectState = 2
|
this.connectedSuccess()
|
}
|
})
|
|
},
|
clickTry() {
|
const that = this
|
if (that.reconnectFlag) {
|
that.clickLinkWifi()
|
} else {
|
uni.scanCode({
|
scanType: ["qrCode"],
|
success: function(res) {
|
const result = res.result || ""
|
const arCode = result.split(";")
|
if (arCode.length != 3) {
|
showModal("无效的二维码！", "提示")
|
return
|
}
|
if (!arCode[0].trim() || !arCode[0].trim()) {
|
showModal("无效的二维码！", "提示")
|
return
|
}
|
that.ip = arCode[0]
|
that.wifiSID = arCode[1]
|
that.wifiPassword = arCode[2]
|
console.log(that.ip, arCode)
|
if (that.wifiSID.trim()) {
|
that.connectWifi()
|
} else {
|
that.connectVehicle()
|
}
|
|
}
|
})
|
}
|
|
},
|
clickCancel() {
|
uni.navigateBack({
|
delta: 1
|
})
|
},
|
clickLinkWifi() {
|
const app = getApp()
|
const platform = app.globalData.platform
|
|
if (platform == "android") {
|
androidWifi.openWifiSetting()
|
} else if (platform == "ios") {
|
iosWifi.openWifiSetting()
|
}
|
this.connectState = 1
|
|
this.checkConnectVehicle()
|
},
|
clickStudyMore() {
|
showToast("后续发开中")
|
},
|
connectWifi(first) {
|
const app = getApp()
|
const platform = app.globalData.platform
|
const osVersion = app.globalData.osVersion
|
let ssid = ""
|
const wifiInfo = this.getConnectionWifi()
|
ssid = wifiInfo.ssid || ""
|
console.log("connectWifi", ssid)
|
if (`"${this.wifiSID}"` != ssid && `${this.wifiSID}` != ssid) {
|
if (platform == "android" && osVersion < 10) {
|
showModal(`【${app.globalData.deviceModel}】想加入无线局域网【${this.wifiSID}】吗？`, "询问").then((res) => {
|
if (res) {
|
this.connectState = 1
|
|
androidWifi.connectWifi(this.wifiSID,
|
this.wifiPassword
|
)
|
this.checkConnectVehicle()
|
//
|
} else {
|
if (first) {
|
uni.navigateBack({
|
delta: 1
|
})
|
}
|
|
}
|
})
|
} else {
|
|
if (platform == "android") {
|
androidWifi.openWifiSetting()
|
} else if (platform == "ios") {
|
iosWifi.openWifiSetting()
|
}
|
this.connectState = 1
|
|
this.checkConnectVehicle()
|
|
}
|
} else {
|
this.connectState = 1
|
this.connectVehicle()
|
}
|
},
|
|
getConnectionWifi() {
|
const app = getApp()
|
const platform = app.globalData.platform
|
if (platform == "android") {
|
const wifiInfo = androidWifi.getConnectionWifi()
|
return wifiInfo
|
} else if (platform == "ios") {
|
const wifiInfo = iosWifi.getConnectionWifi()
|
return wifiInfo
|
}
|
return {}
|
},
|
async connectVehicle() {
|
try {
|
const info = await mtBattery(this.ip)
|
this.connectState = 2
|
this.connectedSuccess()
|
} catch (ex) {
|
this.connectState = 3
|
// this.showError(ex)
|
}
|
},
|
|
async checkConnectSuccess() {
|
try {
|
const res = await checkIpLinkSuccess(this.ip)
|
return true
|
} catch (ex) {
|
return false
|
}
|
|
},
|
connectedSuccess() {
|
this.connectState = 2
|
this.connectedDevice = this.ip
|
const list = session.getValue("vehicles") || []
|
const wifiInfo = this.getConnectionWifi()
|
const curIndex = list.findIndex((a) => a.ip == this.ip)
|
let info = {}
|
if (curIndex < 0) {
|
info = {
|
link_status: true,
|
name: this.ip,
|
ip: this.ip,
|
wifi: {
|
sid: wifiInfo.sid || "",
|
mac: wifiInfo.mac || "",
|
ip: wifiInfo.ip || ""
|
},
|
}
|
list.push(info)
|
} else {
|
info = list[curIndex]
|
info.wifi = {
|
sid: wifiInfo.sid || "",
|
mac: wifiInfo.mac || "",
|
ip: wifiInfo.ip || ""
|
}
|
}
|
session.setValue("vehicles", list)
|
setTimeout(() => {
|
uni.reLaunch({
|
url: `/pages/index/index?connectedIp=${info.ip}`
|
})
|
}, 1000)
|
},
|
checkConnectVehicle() {
|
if (this.unloadFlag) {
|
return
|
}
|
checkIpLinkSuccess(this.ip).then((res) => {
|
if (res.code) {
|
this.connectState = 3
|
} else {
|
this.connectState = 2
|
this.connectedSuccess()
|
}
|
}).catch((ex) => {
|
setTimeout(() => {
|
this.checkConnectVehicle()
|
}, 2000)
|
})
|
},
|
showError(ex) {
|
let exStr = JSON.stringify(ex)
|
if (exStr == "{}")
|
exStr = ex
|
let tip = typeof ex.msg == "string" ? ex.msg : exStr
|
showModal(tip, "错误", false)
|
},
|
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.pages-vehicle-connect {
|
display: flex;
|
width: 750rpx;
|
height: 100vh;
|
flex-direction: column;
|
|
.content {
|
padding: 20rpx 40rpx;
|
align-items: center;
|
text-align: center;
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
font-size: 36rpx;
|
font-weight: 400;
|
|
.title {
|
font-size: 40rpx;
|
font-weight: 700;
|
}
|
|
.content2 {
|
margin: auto;
|
padding-bottom: 80rpx;
|
|
.img {
|
width: 280rpx;
|
height: 280rpx;
|
margin-bottom: 50rpx;
|
}
|
|
.img-2 {
|
margin-top: 50rpx;
|
width: 300rpx;
|
height: 360rpx;
|
|
}
|
|
.auto-circle {
|
margin-bottom: 50rpx;
|
width: 200rpx;
|
height: 200rpx;
|
border-radius: 50%;
|
border: 30rpx solid #1890FF;
|
border-top-color: transparent;
|
animation: drawCircle 1s infinite linear;
|
}
|
|
@keyframes drawCircle {
|
0% {
|
transform: rotate(0deg);
|
}
|
|
100% {
|
transform: rotate(360deg);
|
}
|
}
|
|
}
|
|
}
|
|
.button-group {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
font-size: 30rpx !important;
|
|
.button {
|
margin: 20rpx !important;
|
width: 320rpx !important;
|
border-radius: 4rpx;
|
}
|
}
|
|
.link-text {
|
padding: 20rpx;
|
width: calc(100% - 40rpx);
|
align-items: center;
|
text-align: center;
|
}
|
|
|
}
|
</style>
|
