180 lines
4.0 KiB
Vue
180 lines
4.0 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- 店铺页面组件 -->
|
||
<view class="top-bar" v-if="isLogin" @click="navTo('pages/user/equipment/index')">点击查看设备情况</view>
|
||
<view class="login-bar" v-else>
|
||
<text class="info">授权登录、获取头像昵称，加入安博驰</text>
|
||
<text class="login" @click="navTo('pages/user/user')">立即登录</text>
|
||
</view>
|
||
<map id="map" class="map" :scale="scale" :show-location="true" :latitude="latitude" :longitude="longitude"></map>
|
||
<view class="bottom-bar" @click="scan()">扫码设备二维码下单租赁</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { userId } from '@/config.js';
|
||
import { getUser } from '@/websoft/api/user.js'
|
||
import { login } from '@/websoft/api/login.js'
|
||
import store from '@/store/index.js'
|
||
import storage from '@/utils/storage'
|
||
import {
|
||
ACCESS_TOKEN,
|
||
USER_ID
|
||
} from '@/store/mutation-types'
|
||
export default {
|
||
data() {
|
||
return {
|
||
user: {},
|
||
avatar: '/static/logo.png',
|
||
nickName: 'Hello',
|
||
latitude: 22.766777,
|
||
longitude: 108.375152,
|
||
scale: 10,
|
||
isLogin: false,
|
||
// #ifdef MP-ALIPAY
|
||
canIUseAuthButton: my.canIUse('button.open-type.getAuthorize'),
|
||
// #endif
|
||
}
|
||
},
|
||
onLoad() {
|
||
const app = this
|
||
app.getLocation(res => {
|
||
if(res.latitude &&res.longitude){
|
||
app.latitude = res.latitude
|
||
app.longitude = res.longitude
|
||
app.scale = 16
|
||
}
|
||
})
|
||
|
||
},
|
||
onShow(){
|
||
this.getUserInfo()
|
||
},
|
||
methods: {
|
||
getUserInfo() {
|
||
const { form } = this
|
||
const app = this
|
||
getUser().then(res => {
|
||
if( res.code == 0 && res.data.username != 'www') {
|
||
app.isLogin = true
|
||
}
|
||
})
|
||
|
||
},
|
||
// 检查是否登录
|
||
checkLogin(){
|
||
if(!!store.getters.userId && store.getters.userId != userId){
|
||
this.isLogin = true
|
||
}
|
||
},
|
||
// 获取用户坐标
|
||
// 参考文档：https://uniapp.dcloud.io/api/location/location?id=getlocation
|
||
getLocation(callback) {
|
||
const app = this
|
||
uni.getLocation({
|
||
success: callback,
|
||
fail() {
|
||
app.$toast('获取定位失败，请点击右下角按钮重新尝试定位')
|
||
app.isAuthor = false
|
||
}
|
||
})
|
||
},
|
||
// 跳转页面
|
||
navTo(url) {
|
||
uni.$u.route(url);
|
||
},
|
||
scan(){
|
||
const app = this
|
||
// 只允许从相机扫码
|
||
// uni.scanCode({
|
||
// success (res) {
|
||
// console.log("res: ",res);
|
||
// // app.$navTo('package/equipment/checkout/index')
|
||
// // // app.$navTo(res.path)
|
||
// my.alert({ title: res.code });
|
||
// }
|
||
// })
|
||
my.scan({
|
||
scanType: ['barCode'],
|
||
success: res => {
|
||
console.log("res: ",res);
|
||
my.alert({ title: res.code });
|
||
},
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
background: #fff;
|
||
}
|
||
.top-bar{
|
||
position: fixed;
|
||
top: 10rpx;
|
||
left: 25rpx;
|
||
line-height: 50rpx;
|
||
height: 50rpx;
|
||
z-index: 1000;
|
||
background-color: #fff;
|
||
width: 700rpx;
|
||
border-radius: 12rpx;
|
||
text-align: center;
|
||
}
|
||
.get-phone-number{
|
||
position: fixed;
|
||
top: 300rpx;
|
||
left: 25rpx;
|
||
z-index: 1000;
|
||
line-height: 70rpx;
|
||
height: 70rpx;
|
||
background-color: #0f80ff;
|
||
color: #fff;
|
||
width: 700rpx;
|
||
margin: 25rpx auto;
|
||
border-radius: 12rpx;
|
||
text-align: center;
|
||
}
|
||
.bottom-bar{
|
||
position: fixed;
|
||
bottom: 10rpx;
|
||
left: 25rpx;
|
||
z-index: 1000;
|
||
line-height: 70rpx;
|
||
height: 70rpx;
|
||
background-color: #0f80ff;
|
||
color: #fff;
|
||
width: 700rpx;
|
||
margin: 25rpx auto;
|
||
border-radius: 12rpx;
|
||
text-align: center;
|
||
|
||
}
|
||
.login-bar{
|
||
position: fixed;
|
||
top: 10rpx;
|
||
left: 25rpx;
|
||
z-index: 1000;
|
||
line-height: 70rpx;
|
||
height: 70rpx;
|
||
color: #fff;
|
||
width: 700rpx;
|
||
margin: 17rpx auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.info{
|
||
padding-left: 20rpx;
|
||
background-color: #000000;
|
||
opacity: 0.5;
|
||
width: 100%;
|
||
}
|
||
.login{
|
||
width: 200rpx;
|
||
padding: 0 20rpx;
|
||
background-color: #0f80ff !important;
|
||
opacity: 1;
|
||
}
|
||
}
|
||
</style>
|