xinyi/powerbank
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
fdcd063c12
powerbank/pages/index/index.vue
3321822538@qq.com fdcd063c12 aaa
2024-05-17 18:10:58 +08:00

482 lines
9.8 KiB
Vue
Raw Blame History

<template>
<view class="page">
<!-- 用户首页显示 -->
<view class="useryonghu">
<u-navbar :is-back="false" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
height='8'></u-navbar>
<view class="title">
充电宝
</view>
<view class="ditu">
<view class="dtxs">
<map class='map' :latitude="latitude" :longitude="longitude" @markertap="handleMapClick"
:show-location="true" :markers="covers" :scale="15" />
</view>
<view class="tubiao">
<view class="gr" @click="btnindex(1)">
<image src="https://api.ccttiot.com/smartmeter/img/static/u9QWVWIpUsXIK1Avpt3k" mode="" style="width: 96rpx;height:98rpx;"></image>
<!-- 个人中心 -->
</view>
<view class="gr" @click="btnindex(2)">
<image src="https://api.ccttiot.com/smartmeter/img/static/uTiL5UkPc0jHlCrEg43v" mode="" style="width: 96rpx;height:102rpx;"></image>
<!-- 我的订单 -->
</view>
<view class="gr" @click="btnindex(3)">
<image src="https://api.ccttiot.com/smartmeter/img/static/uxi72kKTEFRd5aX3r4Lk" mode="" style="width: 96rpx;height:98rpx;"></image>
<!-- 附近门店 -->
</view>
<view class="gr" @click="btnindex(4)">
<image src="https://api.ccttiot.com/smartmeter/img/static/uWT7I8JchvWR0adEuDE5" mode="" style="width: 96rpx;height:94rpx;"></image>
<!-- 联系客服 -->
</view>
</view>
<view class="guangg">
<image src="https://api.ccttiot.com/smartmeter/img/static/uQq0ENieLfArog8TQQVN" mode=""></image>
</view>
<view class="saoma" @click="scanQRCode">
<view>
<image src="https://api.ccttiot.com/smartmeter/img/static/uPapXlAygHNzrml29Bhv" mode=""></image>扫码充电
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
params: {
year: true,
month: true,
day: true,
hour: false,
minute: false,
second: false
},
dateindex: 1,
latitude: '', // 初始纬度
longitude: '', // 初始经度
covers: [], // 覆盖物数组
jinweidu: ''
};
},
onShow() {
this.jmlogin()
this.getuser()
},
methods: {
scanQRCode() {
uni.navigateTo({
url: '/page_user/yajin/index'
})
// uni.scanCode({
// onlyFromCamera: true,
// scanType: ['qrCode'],
// success: res => {
// console.log('扫描结果：', res);
// },
// fail: err => {
// console.error('扫描失败：', err);
// uni.showToast({
// title: '扫描失败',
// icon: 'none'
// });
// }
// });
},
// 保存当前用户信息
getuser() {
this.$u.get('/app/user/userInfo').then(res => {
if (res.code == 200) {
uni.setStorageSync('userdata', res.data)
// console.log(uni.getStorageSync('userdata'));
}
})
},
btnindex(num) {
if (num == 2) {
uni.navigateTo({
url: '/pages/myorder/index'
})
} else if (num == 3) {
uni.navigateTo({
url: '/pages/nearbystores/index'
})
} else if (num == 1) {
uni.navigateTo({
url: '/pages/personal/index'
})
} else {
uni.navigateTo({
url: '/pages/abbr/index'
})
}
},
btnnav(num) {
if (num == 1) {
} else if (num == 2) {
} else if (num == 3) {
} else if (num == 4) {
}
},
getMyLocation() {
uni.getLocation({
type: 'wgs84',
success: (res) => {
console.log('我的位置：', res);
this.latitude = res.latitude;
this.longitude = res.longitude;
this.jinweidu = this.longitude + ',' + this.latitude;
// 请求附近的店铺
this.$u.get("/app/store/listNearBy?center=" + this.jinweidu + '&radius=' + 1000).then(
res => {
if (res.code == 200) {
res.data.forEach(item => {
const shopCover = {
id: parseFloat(item.storeId),
latitude: item.lat,
longitude: item.lng,
width: 25,
height: 30,
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uI3B6yPwtiUBD3vafLtw'
};
this.covers.push(shopCover);
});
}
})
},
fail: (err) => {
console.error('获取位置失败：', err);
}
});
},
// 未登录调静默获取token
jmlogin() {
let taht = this
wx.login({
success(res) {
if (res.code) {
let data = {
loginCode: res.code,
};
taht.$u.post('/app/auth/wxLogin', data).then(res => {
if (res.code == 10003) {
// uni.navigateTo({
// url: '/pages/login/login'
// })
} else if (res.code == 200) {
uni.setStorageSync('token', res.token);
taht.getMyLocation()
}
});
}
},
})
},
handleMapClick(event) {
console.log(event);
const markerId = event.markerId;
uni.navigateTo({
url: '/page_user/ditu?markerId=' + markerId
})
},
},
mounted() {
this.getMyLocation(); // 获取并设置自身位置的覆盖物
}
};
</script>
<style lang="scss">
/deep/ .map {
width: 100%;
height: 100%;
}
.dateactive {
background: #E1F3ED;
}
page {
// background-color: ;
background: linear-gradient(180deg, #25CE88 0%, rgba(255, 255, 255, 0) 100%);
border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.page {
width: 750rpx;
padding-left: 34rpx;
padding-right: 34rpx;
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
// 代理样式
.userdaili {
.gongneng {
width: 680rpx;
height: 304rpx;
background: #FFFFFF;
border-radius: 24rpx 24rpx 24rpx 24rpx;
padding: 0 50rpx;
box-sizing: border-box;
.icons {
display: inline-block;
width: 145rpx;
text-align: center;
image {
margin-top: 34rpx;
width: 50px;
height: 50px;
}
}
}
.ordertongji {
width: 680rpx;
height: 342rpx;
background: #FFFFFF;
border-radius: 24rpx 24rpx 24rpx 24rpx;
.shuju {
display: flex;
justify-content: space-between;
padding: 0 40rpx;
box-sizing: border-box;
margin-top: 24rpx;
.ddje {
text-align: center;
.shu {
font-weight: 500;
font-size: 40rpx;
color: #3D3D3D;
}
.sb {
margin-top: 20rpx;
font-weight: 500;
font-size: 20rpx;
color: #3D3D3D;
}
}
}
.date {
padding-left: 80rpx;
padding-right: 80rpx;
box-sizing: border-box;
display: flex;
justify-content: space-between;
margin-top: 26rpx;
text {
padding: 6rpx 18rpx;
box-sizing: border-box;
background: #eee;
border-radius: 10rpx 10rpx 10rpx 10rpx;
font-size: 24rpx;
color: #808080;
}
}
.orderday {
display: flex;
justify-content: space-between;
width: 100%;
padding: 10rpx 12rpx;
box-sizing: border-box;
text {
margin-right: 10rpx;
border-radius: 20rpx;
text-align: center;
display: inline-block;
width: 148rpx;
height: 84rpx;
// background: #E1F3ED;
text-align: center;
line-height: 84rpx;
}
}
}
.dttitle {
margin: 36rpx 0;
font-weight: 500;
font-size: 36rpx;
color: #3D3D3D;
}
.zhanghu {
margin-top: 32rpx;
width: 680rpx;
height: 264rpx;
background: #FFFFFF;
border-radius: 24rpx 24rpx 24rpx 24rpx;
padding: 36rpx 38rpx;
box-sizing: border-box;
.zhtitle {
display: flex;
justify-content: space-between;
.sj {
display: flex;
justify-content: space-between;
text {
font-size: 24rpx;
color: #3D3D3D;
}
}
.tx {
font-size: 24rpx;
color: #27D089;
}
}
.zhje {
margin-top: 20rpx;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #ccc;
padding-bottom: 20rpx;
text {
font-weight: 500;
font-size: 48rpx;
color: #3D3D3D;
}
.btntx {
width: 156rpx;
height: 42rpx;
background: linear-gradient(270deg, #54DAA1 0%, #19CD82 100%);
border-radius: 40rpx 40rpx 40rpx 40rpx;
font-size: 24rpx;
color: #FFFFFF;
text-align: center;
line-height: 42rpx;
margin-top: 10rpx;
}
}
.buc {
margin-top: 20rpx;
font-size: 24rpx;
color: #979797;
}
}
}
//样式结束
.title {
font-weight: 500;
font-size: 36rpx;
color: #3D3D3D;
line-height: 50rpx;
text-align: left;
font-style: normal;
text-transform: none;
}
.guangg {
image {
width: 680rpx;
height: 238rpx;
}
}
.saoma {
width: 750rpx;
height: 186rpx;
background: #FFFFFF;
position: fixed;
bottom: 0;
left: 0;
padding-top: 38rpx;
border-radius: 54rpx 54rpx 0 0;
view {
text-align: center;
width: 676rpx;
height: 102rpx;
background: linear-gradient(270deg, #54DAA1 0%, #19CD82 100%);
border-radius: 54rpx 54rpx 54rpx 54rpx;
font-weight: 500;
font-size: 40rpx;
color: #FFFFFF;
margin: auto;
line-height: 102rpx;
}
image {
width: 56rpx;
height: 56rpx;
vertical-align: middle;
margin-right: 10rpx;
}
}
.ditu {
width: 100%;
height: 964rpx;
background: #FFFFFF;
border-radius: 38rpx 38rpx 38rpx 38rpx;
margin-top: 34rpx;
padding-top: 16rpx;
.dtxs {
width: 642rpx;
height: 812rpx;
// background-color: red;
margin: auto;
}
.tubiao {
display: flex;
justify-content: space-between;
padding: 0 50rpx;
box-sizing: border-box;
padding-top: 20rpx;
padding-bottom: 24rpx;
.gr {
text-align: center;
width: 100%;
font-weight: 400;
font-size: 24rpx;
color: #3D3D3D;
image {
display: block;
margin: auto;
margin-bottom: 14rpx;
}
}
}
}
}
</style>
Reference in New Issue View Git Blame Copy Permalink