507 lines
12 KiB
Vue
507 lines
12 KiB
Vue
<template>
|
||
<view id="mancont">
|
||
<view>
|
||
<up-swiper
|
||
height="500rpx"
|
||
keyName="picUrl"
|
||
:list="imglist"
|
||
indicatorMode="line"
|
||
radius="0"
|
||
:indicator="false"
|
||
circular
|
||
/>
|
||
</view>
|
||
<view v-if="!islogin" class="kuaijrk" style="position: relative;margin-top: -50rpx;background: #fff;">
|
||
<view style="display: flex;align-items: center;">
|
||
<view style="width: 70rpx;height: 70rpx;border-radius: 50%;overflow: hidden;">
|
||
<image style="width: 100%;height: 100%;" src="../../static/img/jrwm.png" />
|
||
</view>
|
||
<view>未登录</view>
|
||
</view>
|
||
<!--@tap="getUser"-->
|
||
<view @tap="topage('/pages/login/index')" style="width: 180rpx;height:64rpx;background: #00aa7f;text-align:center;color:#fff;border-radius:10rpx;line-height: 64rpx;">去登录</view>
|
||
</view>
|
||
<view v-else class="kuaijrk" style="position: relative;margin-top: -50rpx;align-items:center;background: #fff;">
|
||
<view @tap="topage('/minePages/userInfor/index')" style="display: flex;width:50%;align-items: center;">
|
||
<view style="width: 70rpx;height: 70rpx;border-radius: 50%;overflow: hidden;">
|
||
<image style="width: 100%;height: 100%;" :src="toux()" />
|
||
</view>
|
||
<view class="niche">{{username()}}</view>
|
||
</view>
|
||
<!-- <view>
|
||
<view style="font-size: 36rpx;">5</view>
|
||
<view style="font-size: 26rpx;color: #8e8a8a;">优惠券</view>
|
||
</view> -->
|
||
<view @tap="topage('/minePages/account/index')">
|
||
<view style="font-size: 36rpx;">{{account.totalAmount?account.totalAmount/100:0}}</view>
|
||
<view style="font-size: 26rpx;color: #8e8a8a;">余额</view>
|
||
</view>
|
||
</view>
|
||
<view class="kuaijrk">
|
||
<template v-if="islogin">
|
||
<view @tap="topage('/minePages/order/index')">
|
||
<image src="../../static/img/cd2.png" />
|
||
<view>我的订单</view>
|
||
</view>
|
||
<view @tap="topage('/minePages/recharge/index')">
|
||
<image src="../../static/img/chongz.png" />
|
||
<view>充值中心</view>
|
||
</view>
|
||
<view @tap="topage('/minePages/reserlist/index')">
|
||
<image src="../../static/img/shiyxy.png" />
|
||
<view>预约记录</view>
|
||
</view>
|
||
</template>
|
||
<template v-else>
|
||
<view @tap="wdltip()">
|
||
<image src="../../static/img/cd2.png" />
|
||
<view>我的订单</view>
|
||
</view>
|
||
<view @tap="wdltip()">
|
||
<image src="../../static/img/chongz.png" />
|
||
<view>充值中心</view>
|
||
</view>
|
||
<view @tap="wdltip()">
|
||
<image src="../../static/img/shiyxy.png" />
|
||
<view>预约记录</view>
|
||
</view>
|
||
</template>
|
||
<view>
|
||
<image src="../../static/img/kefu.png" />
|
||
<view>客服中心</view>
|
||
</view>
|
||
<!--topage('/homePages/agreement/index')-->
|
||
<!-- <view @tap="showxy()">
|
||
<image src="../../static/img/shiyxy.png" />
|
||
<view>使用协议</view>
|
||
</view> -->
|
||
<!-- <view>
|
||
<image src="../../static/img/jrwm.png" />
|
||
<view>加入我们</view>
|
||
</view> -->
|
||
</view>
|
||
|
||
|
||
</view>
|
||
<!-- @callouttap="getdh()"-->
|
||
<map
|
||
:style="{width:'100%',height: height}"
|
||
:latitude="latitude"
|
||
:longitude="longitude"
|
||
:markers="covers"
|
||
:scale="10"
|
||
:show-location="true"
|
||
@markertap="markertap"
|
||
>
|
||
<!-- <template #callout>
|
||
<cover-view style="width:200px;height:200px;background:#fff;" :marker-id="0">
|
||
<cover-view>1号换电站</cover-view>
|
||
<cover-view style="width: 100rpx;height:60rpx;line-height:60rpx;text-align:center;background:#00aa00;color:#fff;">导航</cover-view>
|
||
</cover-view>
|
||
</template> -->
|
||
</map>
|
||
<view v-if="showxq" class="dibucoten">
|
||
<view style="margin-bottom: 10rpx;padding-bottom:10rpx;font-size: 38rpx;color: #00aa7f;border-bottom:1px #00aa7f dashed;">{{hdzname}}</view>
|
||
<view>营业时间：<text style="color: #5f5f5f;">8:30 - 17:30</text></view>
|
||
|
||
<view style="display: flex;justify-content: space-between;">
|
||
<view style="padding-top: 8rpx;">距您 <text style="color: #5f5f5f;">4.5km</text></view>
|
||
<view @tap="getdh()" style="width: 150rpx;height: 60rpx;line-height: 60rpx;text-align: center;background: #00aa7f;color: #fff;border-radius: 10rpx;">导航</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="islogin" @tap="topage(`/homePages/reservation/index?hdzcode=${hdzcode}&phoneNumber=${userInfo.phoneNumber}`)" class="yuyue">预 约</view>
|
||
<view v-else @tap="wdltip()" class="yuyue">预约</view>
|
||
<!--xyshow-->
|
||
<up-popup
|
||
:show="xyshow"
|
||
mode="bottom"
|
||
round="50"
|
||
:closeOnClickOverlay="true"
|
||
>
|
||
<view style="box-sizing: border-box;padding: 20rpx;background: #fff;">
|
||
<view style="margin-bottom: 20rpx;padding-bottom:20rpx;font-size: 40rpx;text-align: center;color: #00aa7f;border-bottom: 1px #00aa7f dashed;">伊特换电使用协议</view>
|
||
<view style="height: 600rpx;overflow-y: auto;">
|
||
<view style="padding: 25rpx 25rpx 50rpx;font-size: 26rpx;">
|
||
<view style="padding-bottom: 30rpx;font-weight: bold;text-align: center;">{{xyobj.title}}</view>
|
||
|
||
<scroll-view scroll-y="true" style="height: 600rpx;">
|
||
<up-parse :content="decodeURIComponent(xyobj.content)"></up-parse>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
<!-- <view style="display: flex;align-items: center;;padding-top: 10rpx;">
|
||
<label class="radio"><radio value="r1" checked="true">已阅读并同意</radio></label>
|
||
<view @tap="topage('/minePages/agreement/index?type=1')" style="padding: 0 10rpx;color: #ffaa00;">《服务条款》</view>
|
||
<view @tap="topage('/minePages/agreement/index?type=2')" style="color: #ffaa00;">《隐私协议》</view>
|
||
</view> -->
|
||
<view class="xybtns">
|
||
<view @tap="btnshan(2)" style="background: #fff;border:1px #8e8a8a solid;color: #000;">取消</view>
|
||
<view @tap="btnshan(1)">同意</view>
|
||
</view>
|
||
</view>
|
||
</up-popup>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref,reactive,watch,getCurrentInstance } from 'vue'
|
||
import { onLoad,onShow,onTabItemTap } from '@dcloudio/uni-app'
|
||
import {
|
||
login,
|
||
getUser,
|
||
gethdz,
|
||
loginstate,
|
||
swiperimg,
|
||
agreement,
|
||
getInfo,
|
||
getaccou
|
||
} from '@/utils/service'
|
||
|
||
let height = ref('')
|
||
let islogin = ref(false)
|
||
let PhoneNumber = ref('')
|
||
let covers =ref<any[]>([])
|
||
let hdzcode = ref('')
|
||
let imglist = ref<any[]>([])
|
||
|
||
uni.removeStorageSync('wxuid')
|
||
uni.removeStorageSync('wxToken')
|
||
uni.removeStorageSync('PhoneNumber')
|
||
uni.removeStorageSync('Init')
|
||
|
||
let xyobj = ref<any>({})
|
||
let account = ref<any>({})
|
||
|
||
let isinit = true
|
||
|
||
onLoad((opt:any) => {
|
||
hdzcode.value = opt.hdzcode
|
||
if(uni.getStorageSync('wxuid')){
|
||
loginstate({
|
||
wuid:uni.getStorageSync('wxuid')
|
||
}).then((rps:any) => {
|
||
if(rps.data && rps.data.wxToken){
|
||
uni.setStorageSync('wxToken',rps.data.wxToken)
|
||
}
|
||
getinfo()
|
||
})
|
||
}
|
||
})
|
||
|
||
onShow(() => {
|
||
xyshow.value = false
|
||
uni.showTabBar()
|
||
//判断是否登录
|
||
if(uni.getStorageSync('wxuid')){
|
||
islogin.value = true
|
||
getinfo() //??
|
||
// if(!isinit){
|
||
// getinfo()
|
||
// }else{
|
||
// isinit = false
|
||
// }
|
||
}else{
|
||
islogin.value = false
|
||
PhoneNumber.value = ''
|
||
covers.value = []
|
||
//hdzcode.value = ''
|
||
imglist.value = []
|
||
if(!uni.getStorageSync('Init')){
|
||
showxy()
|
||
}
|
||
}
|
||
const instance = getCurrentInstance()
|
||
const query = uni.createSelectorQuery().in((instance as any).proxy)
|
||
|
||
query.select('#mancont').boundingClientRect(v => {
|
||
uni.getSystemInfo({
|
||
success: n => {
|
||
// 屏幕可用高度 减去 其他元素高度
|
||
height.value = (n.windowHeight - (v as any).height + 20)+'px'
|
||
}
|
||
})
|
||
})
|
||
.exec()
|
||
})
|
||
|
||
//获取经纬度
|
||
let latitude = ref(37.844522)
|
||
let longitude = ref(114.530428)
|
||
let hdzname = ref('')
|
||
|
||
let xyshow = ref(false)
|
||
|
||
let userInfo = reactive<any>({
|
||
phoneNumber:'',
|
||
avatarUrl:'',
|
||
name:'',
|
||
nickName:''
|
||
})
|
||
|
||
function username() {
|
||
if(userInfo.phoneNumber){
|
||
return userInfo.phoneNumber
|
||
}else if(userInfo.nickName){
|
||
return userInfo.nickName
|
||
}else if(userInfo.name){
|
||
return userInfo.name
|
||
}
|
||
return '微信用户'
|
||
}
|
||
|
||
function getinfo(){
|
||
//获取轮播图
|
||
swiperimg({
|
||
appid:'wx2ab384cf1e6f85a1',
|
||
type:2
|
||
}).then((rps:any) => {
|
||
imglist.value = rps.data
|
||
})
|
||
|
||
//获取换电站
|
||
covers.value.splice(0)
|
||
gethdz({
|
||
//plateNum:formdata.plateNum
|
||
}).then((rps:any) => {
|
||
if(rps.data && rps.data.length > 0){
|
||
rps.data.forEach((n:any,i:any) => {
|
||
let jwd = n.locationPoint?n.locationPoint.split(','):[]
|
||
covers.value.push({
|
||
id:i,
|
||
latitude: jwd[0]?jwd[0]:'',
|
||
longitude: jwd[1]?jwd[1]:'',
|
||
width:20,
|
||
height:30,
|
||
options: {
|
||
isStore: true,
|
||
status: 1,
|
||
xian: 12,
|
||
all: 20
|
||
},
|
||
callout: {
|
||
content: n.name,
|
||
bgColor:'#00aa7f',
|
||
color:'#fff',
|
||
fontSize:'30rpx',
|
||
padding:'10rpx',
|
||
borderRadius:'20rpx',
|
||
display: 'BYCLICK' //点击显示
|
||
}
|
||
})
|
||
})
|
||
}
|
||
})
|
||
|
||
//获取用户信息
|
||
getInfo({
|
||
wuid:uni.getStorageSync('wxuid')
|
||
}).then((rps:any) => {
|
||
uni.setStorageSync('userInfor',rps.data)
|
||
userInfo.phoneNumber = rps.data.phoneNumber?rps.data.phoneNumber:''
|
||
userInfo.nickName = rps.data.nickName?rps.data.nickName:''
|
||
userInfo.avatarUrl = rps.data.avatarUrl?rps.data.avatarUrl:''
|
||
userInfo.name = rps.data.name?rps.data.name:''
|
||
})
|
||
|
||
//获取账户信息
|
||
getaccou(uni.getStorageSync('wxuid')).then((rps:any) => {
|
||
if(rps.data.records){
|
||
account.value = rps.data.records[0]
|
||
uni.setStorageSync('totalAmount', rps.data.records[0].totalAmount)
|
||
uni.setStorageSync('walletCode', rps.data.records[0].code)
|
||
}
|
||
})
|
||
}
|
||
|
||
function toux() {
|
||
return userInfo.avatarUrl?userInfo.avatarUrl:'../../static/img/toux.png'
|
||
}
|
||
|
||
//页面跳转
|
||
function topage(url:string){
|
||
uni.navigateTo({
|
||
url
|
||
})
|
||
}
|
||
|
||
function wdltip() {
|
||
uni.showToast({
|
||
title:'请您先登录',
|
||
icon:'none'
|
||
})
|
||
}
|
||
|
||
function getdh() {
|
||
uni.openLocation({
|
||
latitude:latitude.value*1,
|
||
longitude:longitude.value*1,
|
||
address:hdzname.value,
|
||
success() {
|
||
console.log('success');
|
||
},
|
||
fail(err) {
|
||
console.error('打开地图失败', err);
|
||
}
|
||
})
|
||
}
|
||
|
||
//点击地图标注
|
||
let showxq = ref(false)
|
||
function markertap(v:any) {
|
||
showxq.value = true
|
||
|
||
const markerId = v.markerId
|
||
// 更新markers数组，重新渲染地图
|
||
covers.value = covers.value.map((n:any) => {
|
||
if(n.id === markerId) {
|
||
console.log(n,'123')
|
||
// 当前点击的标注显示气泡
|
||
n.callout.display = 'ALWAYS'
|
||
hdzname.value = n.callout.content
|
||
latitude.value = n.latitude
|
||
longitude.value = n.longitude
|
||
}else{
|
||
// 其他标注隐藏气泡
|
||
n.callout.display = 'BYCLICK'
|
||
}
|
||
return n
|
||
})
|
||
}
|
||
|
||
//协议
|
||
function showxy() {
|
||
agreement({
|
||
appid:'wx2ab384cf1e6f85a1', //uni.getStorageSync('wxuid'),
|
||
type:'1'
|
||
}).then((rps:any) => {
|
||
xyobj.value = rps.data[0]
|
||
uni.hideTabBar()
|
||
xyshow.value = true
|
||
})
|
||
}
|
||
|
||
function btnshan(type:number = 1) {
|
||
if(type == 1){
|
||
getUser().then(() => {
|
||
xyshow.value = false
|
||
uni.showTabBar()
|
||
islogin.value = true
|
||
|
||
//是否初次使用
|
||
uni.setStorageSync('Init',true)
|
||
|
||
getinfo()
|
||
setTimeout(()=> {
|
||
uni.getLocation({
|
||
type: 'wgs84',
|
||
success(res) {
|
||
longitude.value = res.longitude
|
||
latitude.value = res.latitude
|
||
},
|
||
fail(rps) {
|
||
console.log(rps)
|
||
}
|
||
})
|
||
},1000)
|
||
})
|
||
}else{
|
||
uni.exitMiniProgram({
|
||
success: function() {
|
||
console.log('退出小程序成功')
|
||
},
|
||
fail: function(err) {
|
||
console.log('退出小程序失败', err)
|
||
}
|
||
})
|
||
// xyshow.value = false
|
||
// uni.showTabBar()
|
||
}
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page{
|
||
background: #ccc;
|
||
}
|
||
.top {
|
||
width: 100%;
|
||
background: #00aa00;
|
||
view{
|
||
padding: 30rpx 0;
|
||
font-size: 40rpx;
|
||
color: #fff;
|
||
text-align: center;
|
||
}
|
||
}
|
||
.kuaijrk{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: 20rpx;
|
||
padding: 20rpx;
|
||
border-radius: 20rpx;
|
||
font-size: 30rpx;
|
||
box-shadow: 0 0 20px 2px rgba(0, 170, 0, 0.5);
|
||
>view{
|
||
width: 25%;
|
||
text-align: center;
|
||
//color: #00aa00;
|
||
//font-weight: bold;
|
||
image{
|
||
width: 70rpx;
|
||
height: 70rpx;
|
||
}
|
||
}
|
||
}
|
||
.dibucoten{
|
||
box-sizing: border-box;
|
||
position: fixed;
|
||
width: 90%;
|
||
//height: 200rpx;
|
||
padding: 30rpx;
|
||
border-radius: 10rpx;
|
||
background:#fff; //#00aa00;
|
||
left: 5%;
|
||
bottom: 20rpx;
|
||
box-shadow: 0 0 20px 2px rgba(0, 170, 0, 0.5);
|
||
}
|
||
.xybtns{
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
padding:20rpx 0 100rpx 0;
|
||
>view{
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
width: 300rpx;
|
||
height: 80rpx;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50rpx;
|
||
color: #fff;
|
||
background: #00aa00;
|
||
}
|
||
}
|
||
.yuyue{
|
||
position: fixed;
|
||
right: 5%;
|
||
bottom: 300rpx;
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
line-height: 120rpx;
|
||
text-align: center;
|
||
background: #00aa00;
|
||
border-radius: 50%;
|
||
color: #fff;
|
||
box-shadow: 0 0 20px 2px rgba(0, 170, 0, 0.5);
|
||
}
|
||
.niche{
|
||
width: 200rpx;
|
||
padding-left: 20rpx;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-align: left;
|
||
}
|
||
</style>
|