<template>
|
<view class="pages-vehicle-connect">
|
|
<view class="content" v-if="connectState == 1">
|
<view class="title">{{translate('connecting')}}</view>
|
<view class="content2">
|
<view class="auto-circle"></view>
|
<view>{{translate('connecting')}}...</view>
|
</view>
|
</view>
|
<view class="content" v-else-if="connectState == 2">
|
<view class="title">{{translate('connection_success')}}</view>
|
<view class="content2">
|
<image class="img" src="/images/Frame_178.svg" alt=" picture" />
|
<view>【{{connectedDevice}}】{{translate('connection_success')}}</view>
|
</view>
|
</view>
|
<view class="content" v-else-if="connectState == 3">
|
<view class="title">{{translate('connection_failed')}}</view>
|
<view class="content2">
|
<image class="img" src="/images/Frame_179.svg" alt=" picture" />
|
<view class="title">{{translate('unable_connect_device')}}</view>
|
<view>{{translate('check_vehicle_not_paired_other_terminals')}}</view>
|
</view>
|
</view>
|
<view class="content" v-else-if="connectState == 4">
|
<view class="title">{{translate('connection_preparation')}}</view>
|
<view class="content2">
|
|
<view>1、{{translate("connect_phone_to_this_ip_wifi",[ip]) }}</view>
|
<view>2、{{translate('after_connect_return_this')}}</view>
|
<image class="img-2" src="/images/Frame_180.svg" alt=" picture" />
|
</view>
|
</view>
|
<view class="content" v-else>
|
<view class="title">{{translate('connection_preparation')}}</view>
|
</view>
|
<view v-if="connectState == 3" class="button-group">
|
<a-button type="primary" plain="true" class="button" @click="clickTry">
|
{{reconnectFlag ? translate('reconnect_wifi'):translate('retry')}}
|
</a-button>
|
<a-button type="ghost" class="button" @click="clickCancel">{{translate('cancel')}}
|
</a-button>
|
<view class="link-text"> <a @click="clickStudyMore">{{translate('more')}}...</a> </view>
|
</view>
|
<view v-if="connectState == 4" class="button-group">
|
<a-button type="primary" plain="true" class="button" @click="clickLinkWifi">{{translate('go_connect')}}
|
</a-button>
|
<a-button type="ghost" class="button" @click="clickTry">{{translate('switch_scan_connection')}}
|
</a-button>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
session,
|
showToast,
|
showModal,
|
showError,
|
showInfo
|
} 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) {
|
showError(ex, this.translate('error'))
|
}
|
},
|
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) {
|
showToast(this.translate('invalid_qr_code'))
|
return
|
}
|
if (!arCode[0].trim() || !arCode[0].trim()) {
|
showToast(this.translate('invalid_qr_code'))
|
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(60)
|
},
|
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({
|
content: `${this.translate('ask_join_wlan',[this.this.ip,this.wifiSID])}`,
|
confirmText: this.translate('join'),
|
cancelText: this.translate("cancel"),
|
}
|
).then((res) => {
|
if (res) {
|
this.connectState = 1
|
|
androidWifi.connectWifi(this.wifiSID,
|
this.wifiPassword
|
)
|
this.checkConnectVehicle(60)
|
//
|
} else {
|
if (first) {
|
uni.navigateBack({
|
delta: 1
|
})
|
}
|
|
}
|
})
|
} else {
|
|
if (platform == "android") {
|
androidWifi.openWifiSetting()
|
} else if (platform == "ios") {
|
iosWifi.openWifiSetting()
|
}
|
this.connectState = 1
|
|
this.checkConnectVehicle(60)
|
|
}
|
} 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)
|
console.log(this.ip)
|
this.connectState = 2
|
this.connectedSuccess()
|
} catch (ex) {
|
console.log("connectVehicle faile", this.ip, ex)
|
this.connectState = 3
|
// showError(ex,this.translate('error'))
|
}
|
},
|
|
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(sec) {
|
if (this.unloadFlag) {
|
return
|
}
|
if (sec <= 0) {
|
this.connectState = 3
|
return
|
}
|
checkIpLinkSuccess(this.ip).then((res) => {
|
if (res.code) {
|
this.connectState = 3
|
} else {
|
this.connectState = 2
|
this.connectedSuccess()
|
}
|
}).catch((ex) => {
|
setTimeout(() => {
|
this.checkConnectVehicle(sec - 7)
|
}, 2000)
|
})
|
},
|
translate(t, values) {
|
if (typeof this.$t == "function") {
|
const message = this.$t(`page.${t}`)
|
if (values) {
|
return message.replace(/{(\d+)}/g, (match, index) => {
|
const value = values[index]
|
return value !== undefined ? value : match
|
})
|
} else return message
|
} else return t;
|
},
|
}
|
}
|
</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: 400rpx !important;
|
border-radius: 4rpx;
|
}
|
}
|
|
.link-text {
|
padding: 20rpx;
|
width: calc(100% - 40rpx);
|
align-items: center;
|
text-align: center;
|
}
|
|
|
}
|
</style>
|
