1410 lines
34 KiB
Vue
1410 lines
34 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar :is-back="false" title="小鹿骑行" :border-bottom="false" back-icon-color="000" :background="bgc" title-color='#000' title-size='36'
|
||
height='44' id="navbar">
|
||
</u-navbar>
|
||
<view class="gonggao" @click="btntopgg">
|
||
<u-icon name="volume-fill" color="#fff" style="position: absolute;left: 20rpx;" size="32"></u-icon>
|
||
<view class="container">
|
||
<view class="scroll-text">
|
||
<view class="scroll-item">
|
||
{{announcements.noticeTitle == null ? '暂无最新公告！！！' : announcements.noticeTitle}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-icon name="arrow-right" color="#fff" style="position: absolute;right: 10rpx;" size="32"></u-icon>
|
||
</view>
|
||
<!-- 公告弹窗 -->
|
||
<view class="noticetc" v-if="gonggaoflag">
|
||
<view class="name">
|
||
公告
|
||
</view>
|
||
<view class="biaoti">
|
||
{{gonggaoxq.noticeTitle}}
|
||
</view>
|
||
<!-- <view class="cont" v-html="gonggaoxq.noticeContent"></view> -->
|
||
<u-parse :html="gonggaoxq.noticeContent" style="width: 100%;height: 620rpx;background-color: #efefef;padding: 10rpx;box-sizing: border-box;margin-top: 20rpx;"></u-parse>
|
||
<view class="btn" @click="btnggtc">
|
||
我知道了
|
||
</view>
|
||
</view>
|
||
<view class="mask" v-if="gonggaoflag"></view>
|
||
<!-- 地图 -->
|
||
<view class="ditu">
|
||
<map class='map' id="map" :latitude="latitude" :longitude="longitude" :show-location="true" @click="btnzk"/>
|
||
<image @click="btnzk" src="https://api.ccttiot.com/smartmeter/img/static/up0OxngKxP5JZ3hRLvCv" class="zk" mode=""></image>
|
||
<!-- <view class="caozuo">
|
||
<image @click="btnpage(1)" src="https://api.ccttiot.com/smartmeter/img/static/uAGgpuC9wi9lFXZFO35G" mode=""></image>
|
||
<image @click="btnpage(2)" src="https://api.ccttiot.com/smartmeter/img/static/u4DUUUKIRR5HcB8uIkl4" mode=""></image>
|
||
<image @click="btnpage(3)" src="https://api.ccttiot.com/smartmeter/img/static/unPEUv14mgsytgeis4Fx" mode=""></image>
|
||
<image @click="btnpage(4)" style="width: 150rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uJPhQOQ3y97HIdcQVdGG" mode=""></image>
|
||
</view> -->
|
||
<view class="kuaijie">
|
||
<image @click="btnpage(2)" style="height: 100rpx;margin-top: 16rpx;" src="https://api.ccttiot.com/smartmeter/img/static/udUQI8zA1tYUEndx9guO" mode=""></image> <!-- 订单 -->
|
||
<image @click="btntiao(2)" src="https://api.ccttiot.com/smartmeter/img/static/uECTLFe6fzWgzNzVdsPs" mode=""></image> <!-- 使用帮助 -->
|
||
<image @click="btnpage(4)" src="https://api.ccttiot.com/smartmeter/img/static/uPyDAy2sWgh4UkDr3yX4" mode=""></image> <!-- 编号开锁 -->
|
||
<image @click="btntiao(3)" src="https://api.ccttiot.com/smartmeter/img/static/uxLGGshcH6nr557ffO5E" mode=""></image> <!-- 意见反馈 -->
|
||
<image @click="btnkf" src="https://api.ccttiot.com/smartmeter/img/static/up53i8F9cn9wajU8dXuS" mode=""></image> <!-- 客服 -->
|
||
</view>
|
||
</view>
|
||
|
||
<view class="guanggao">
|
||
<!-- <image src="https://api.ccttiot.com/smartmeter/img/static/uTZBBRuyRexKd6c4VE9d" mode="aspectFill"></image> -->
|
||
<u-swiper :list="lists" @click="btnshangjia"></u-swiper>
|
||
<!-- <image src="https://api.ccttiot.com/smartmeter/img/static/uEMuO2M40WcExJVSprIy" class="kefu" mode=""></image> -->
|
||
</view>
|
||
<view class="fujin">
|
||
<view class="names">
|
||
附近门店
|
||
</view>
|
||
<view class="list">
|
||
<view class="list_item" v-if="false" v-for="(item,index) in 2" :key="index" @click="btnxq">
|
||
<view class="top">
|
||
<view class="name">
|
||
云行租车（汇丰公寓）
|
||
</view>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uebBGQwgvIO4BgJB5nd0" @click.stop="btntel" mode=""></image>
|
||
</view>
|
||
<view class="dizhi">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uxTxqrn1kIVJEHCS57YU" mode=""></image> 2.3km | 天目山路134号
|
||
</view>
|
||
<view class="bot">
|
||
<view class="lt">
|
||
<view class="yytime">
|
||
<text>营业时间 | </text>06:00-23:00
|
||
</view>
|
||
<view class="songqu">
|
||
免费送取车
|
||
</view>
|
||
</view>
|
||
<view class="rt">
|
||
<view class="rizu">
|
||
<view class="price">
|
||
日均￥<text>69</text>起
|
||
</view>
|
||
<view class="qizu">
|
||
3辆车可租
|
||
</view>
|
||
</view>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uXOW5yZvS1fBGH7xz77A" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="cheliang">
|
||
<view class="quanxin" v-for="(item,index) in 2" :key="index">
|
||
<view class="qxlt">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uK5bAmrXLEHVxbH6FcFD" mode=""></image>
|
||
</view>
|
||
<view class="qxrt">
|
||
<view class="name">
|
||
全新车网红...
|
||
</view>
|
||
<view class="junjia">
|
||
日均￥69
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="dibutishi">
|
||
<!-- <text>当前附近没有更多门店咯...</text> -->
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/usBtiESbpV8GIY3k4ukv" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 平台客服弹窗 -->
|
||
<view class="kefutc" v-if="kefuflag">
|
||
<image class="bj" src="https://api.ccttiot.com/smartmeter/img/static/uTSMnIgvw7eS13LxZjvt" mode="" @click="kefuflag = false"></image>
|
||
<view class="box">
|
||
<view class="" style="max-height: 640rpx;overflow: scroll;">
|
||
<view class="" style="font-weight: 600;color: #3D3D3D;">
|
||
订单要售后:
|
||
</view>
|
||
<view class="top" v-for="(item,index) in kefulist" :key="index">
|
||
<view class="dianhua">
|
||
{{item.name == null ? '--' : item.name}}：{{item.contact == null ? '--' : item.contact}}
|
||
<view class="wz">
|
||
工作时间：{{item.startTime}}~{{item.endTime}}
|
||
</view>
|
||
</view>
|
||
<view class="boda" @click.stop="btnptkf(item.contact)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uwTYS0nZBsoaiY8EFlQA" mode=""></image>
|
||
<text>拨打</text>
|
||
</view>
|
||
</view>
|
||
<view class="" style="margin-top: 20rpx;font-weight: 600;color: #3D3D3D;" v-if="kefuarr.length > 0">
|
||
骑行前咨询:
|
||
</view>
|
||
<view class="top" v-for="(item,index) in kefuarr" :key="index">
|
||
<view class="dianhua">
|
||
{{item.name == null ? '--' : item.name}}：{{item.contact == null ? '--' : item.contact}}
|
||
<view class="wz">
|
||
工作时间：{{item.startTime}}~{{item.endTime}}
|
||
</view>
|
||
</view>
|
||
<view class="boda" @click.stop="btnptkf(item.contact)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uwTYS0nZBsoaiY8EFlQA" mode=""></image>
|
||
<text>拨打</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bot">
|
||
<!-- <view class="wz">
|
||
客服工作时间
|
||
</view> -->
|
||
|
||
<view class="wzs">
|
||
客服电话高峰期可能遇忙，请耐心等待
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 有订单弹窗 -->
|
||
<view class="conts_box" v-if="orderflag" @click="btntz">
|
||
<view class="orderzt">
|
||
<view class="" style="font-size: 32rpx;font-weight: 600;">
|
||
订单状态
|
||
</view>
|
||
<view class="">
|
||
<view style="color: #333;">订单进行中<u-icon name="arrow-right" color="#333" size="28"></u-icon></view>
|
||
</view>
|
||
</view>
|
||
<view class="cont_li">
|
||
<view class="right">
|
||
<image :src="iconobj.mapimg" mode="aspectFill">
|
||
</image>
|
||
<view class="NO">
|
||
SN：{{orderobj.deviceSn == null ? '--' : orderobj.deviceSn}}
|
||
</view>
|
||
</view>
|
||
<view class="left">
|
||
<view class="km">
|
||
可继续行驶{{orderobj.deviceRemainEndurance == null ? '--' : orderobj.deviceRemainEndurance}}公里
|
||
</view>
|
||
<view class="speed">
|
||
<view class="speeds" :style="{ width: orderobj.deviceRemainingPower + '%' }"></view>
|
||
</view>
|
||
<view class="NO">
|
||
电量{{orderobj.deviceRemainingPower == null ? '--' : orderobj.deviceRemainingPower}}%
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class=""
|
||
style="display: flex;width: 100%;padding: 0 20rpx;box-sizing: border-box;justify-content: space-between;">
|
||
<view class="dh" @click.stop="danghang">
|
||
导航 <u-icon name="arrow-right" color="#333" size="28"></u-icon>
|
||
</view>
|
||
<view class="suocheanniu">
|
||
<view class="lssc" @click.stop="btnjsdd">
|
||
结束订单
|
||
</view>
|
||
<view class="lssc" @click.stop="btnqd">
|
||
{{orderobj.deviceLockStatus == 1 ? '临时锁车' : '开锁'}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 扫码用车未在停车点内还车弹窗 -->
|
||
<view class="tingchetc" v-if="fjflag">
|
||
<view class="topname">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uDfEXjApmdS6ByM88pv3" mode=""></image>
|
||
{{fajinobj.manageFee > 0 ? '不在运营区' : fajinobj.dispatchFee > 0 ? '不在停车点' : ''}}
|
||
</view>
|
||
<view class="shuom">
|
||
需支付<text>{{fajinobj.manageFee > 0 ? fajinobj.manageFee : fajinobj.dispatchFee > 0 ? fajinobj.dispatchFee : ''}}元</text>，你可查看<text
|
||
@click="btntcd">最近停车点</text>
|
||
</view>
|
||
<image :src="iconobj.tingcheimg" class="tcimg" mode="aspectFill">
|
||
</image>
|
||
<view class="btnan">
|
||
<view class="fj" @click="btnfajin">
|
||
缴纳罚金还车
|
||
</view>
|
||
<view class="qx" @click="btnjjqx">
|
||
继续骑行
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="mask" v-if="fjflag"></view>
|
||
|
||
<view class="mask" v-if="kefuflag"></view>
|
||
<tab-bar :indexs='0'></tab-bar>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
var xBlufi = require("@/components/blufi/xBlufi.js")
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "#F4FCFF",
|
||
},
|
||
latitude:'',
|
||
longitude:'',
|
||
covers:[],
|
||
kefuflag:false,
|
||
gonggaoxq:{},
|
||
gonggaoflag:false,
|
||
announcements: {},
|
||
kefulist:[],
|
||
lists: [],
|
||
info:{},
|
||
tiaozhuanlist:[],
|
||
jinweidu:'',
|
||
kefuarr:[],
|
||
|
||
fjflag: false,
|
||
orderflag: false,
|
||
iconobj:this.$store.state.iconobj,
|
||
orderobj: {},
|
||
orderAreaReturnVerify:'',
|
||
latsc:'',
|
||
lngsc:'',
|
||
fajinobj:{}
|
||
}
|
||
},
|
||
onLoad() {
|
||
uni.getLocation({
|
||
type: 'gcj02', // 国内地图更兼容
|
||
isHighAccuracy: true,
|
||
success: (res) => {
|
||
console.log('精确坐标:', res)
|
||
},
|
||
fail: (err) => {
|
||
console.error('获取位置失败:', err)
|
||
}
|
||
})
|
||
},
|
||
// 分享到好友（会话）
|
||
onShareAppMessage: function() {
|
||
return {
|
||
title: '小鹿骑行',
|
||
path: '/pages/index/index'
|
||
}
|
||
},
|
||
// 分享到朋友圈
|
||
onShareTimeline: function() {
|
||
return {
|
||
title: '小鹿骑行',
|
||
query: '',
|
||
path: '/pages/index/index'
|
||
}
|
||
},
|
||
onShow() {
|
||
this.getinfo()
|
||
this.getlunbo()
|
||
this.getorderdevice()
|
||
},
|
||
methods: {
|
||
// 点击跳转到车辆
|
||
btntz() {
|
||
uni.switchTab({
|
||
url: '/pages/myorder/returned/index'
|
||
})
|
||
},
|
||
// 点击继续骑行
|
||
btnjjqx(){
|
||
this.orderflag = true
|
||
this.fjflag = false
|
||
},
|
||
// 点击跳转导航
|
||
danghang() {
|
||
if (this.orderobj.deviceLatitude && this.orderobj.deviceLongitude) {
|
||
uni.openLocation({
|
||
latitude: this.orderobj.deviceLatitude, //纬度-目的地/坐标点
|
||
longitude: this.orderobj.deviceLongitude, //经度-目的地/坐标点
|
||
name: '', //地点名称
|
||
address: '' //详细地点名称
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: '车辆暂无法导航',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
},
|
||
// 点击启动and关闭
|
||
btnqd() {
|
||
if (this.orderobj.deviceLockStatus == 0) {
|
||
let that = this
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '您是否要解锁车辆？',
|
||
showCancel: true,
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
that.$u.put(`/app/order/openDevice?orderId=${that.orderobj.orderId}`).then((
|
||
res) => {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: '解锁成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
that.getorderdevice()
|
||
} else {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '设备离线，请前往车辆详情连接车辆操作',
|
||
showCancel: false,
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
uni.switchTab({
|
||
url:'/pages/myorder/returned/index'
|
||
})
|
||
} else if (res.cancel) {
|
||
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
} else if (res.cancel) {
|
||
console.log('取消')
|
||
}
|
||
}
|
||
})
|
||
} else if (this.orderobj.deviceLockStatus == 1) {
|
||
uni.getLocation({
|
||
type: 'wgs84',
|
||
success: (res) => {
|
||
this.latsc = res.latitude
|
||
this.lngsc = res.longitude
|
||
},
|
||
fail: (err) => {
|
||
console.error('获取位置失败：', err)
|
||
this.latsc = null
|
||
this.lngsc = null
|
||
}
|
||
})
|
||
let that = this
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '您是否要临时锁车？',
|
||
showCancel: true,
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
let query = {
|
||
orderId: that.orderobj.orderId,
|
||
lat: that.latsc,
|
||
lon: that.lngsc,
|
||
}
|
||
let url = '/app/order/closeDevice?' + that.$tansParams(query)
|
||
that.$u.put(url).then((res) => {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: '临时锁车成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
that.getorderdevice()
|
||
} else {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '设备离线，请前往车辆详情连接车辆操作',
|
||
showCancel: false,
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
uni.switchTab({
|
||
url:'/pages/myorder/returned/index'
|
||
})
|
||
} else if (res.cancel) {
|
||
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
} else if (res.cancel) {
|
||
console.log('取消')
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
// 点击结束订单
|
||
btnjsdd() {
|
||
if (this.orderAreaReturnVerify == true) {
|
||
uni.navigateTo({
|
||
url: '/page_user/hcshenhe?sn=' + this.orderobj.deviceSn + '&orderid=' + this.orderobj.orderId + '&orderAreaId=' + this.orderobj.orderAreaId
|
||
})
|
||
} else {
|
||
uni.getLocation({
|
||
type: 'gcj02', // 国内地图更兼容
|
||
isHighAccuracy: true,
|
||
success: (res) => {
|
||
this.latsc = res.latitude
|
||
this.lonsc = res.longitude
|
||
this.getfeiyong()
|
||
},
|
||
fail: (err) => {
|
||
console.error('获取位置失败：', err)
|
||
this.getfeiyong()
|
||
}
|
||
})
|
||
}
|
||
},
|
||
// 点击还车判断是否需要另外缴费
|
||
getfeiyong() {
|
||
let data = {
|
||
orderId: this.orderobj.orderId,
|
||
lon: this.lonsc,
|
||
lat: this.latsc,
|
||
checkLocation:true
|
||
}
|
||
this.$u.post(`/app/order/calcFee`, data).then(res => {
|
||
if (res.code == 200) {
|
||
this.fajinobj = res.data
|
||
if (res.data.manageFee > 0 || res.data.dispatchFee > 0) {
|
||
this.fjflag = true
|
||
this.orderflag = false
|
||
} else {
|
||
this.gethuan()
|
||
}
|
||
}else if(res.code == 30001){
|
||
uni.showToast({
|
||
title: '必须在停车点内还车',
|
||
icon: 'none',
|
||
duration: 5000
|
||
})
|
||
}else if(res.code == 30002){
|
||
uni.showToast({
|
||
title: '不允许在禁停区内还车',
|
||
icon: 'none',
|
||
duration: 5000
|
||
})
|
||
}else if(res.code == 30003){
|
||
uni.showToast({
|
||
title: '必须在运营区内还车',
|
||
icon: 'none',
|
||
duration: 5000
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 点击缴纳罚金继续还车
|
||
btnfajin() {
|
||
this.gethuan()
|
||
},
|
||
// 还车统一调用
|
||
gethuan() {
|
||
let that = this
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '您确定要还车吗？',
|
||
showCancel: true,
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
let data = {
|
||
orderId: that.orderobj.orderId,
|
||
picture: that.imgs,
|
||
lon: that.lonsc,
|
||
lat: that.latsc
|
||
}
|
||
that.$u.put(`/app/order/end`, data).then(res => {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: '还车成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
setTimeout(()=>{
|
||
that.fjflag = false
|
||
that.orderflag = false
|
||
setTimeout(()=>{
|
||
uni.navigateTo({
|
||
url:'/page_user/yongche/orderxq?id=' + that.orderobj.orderId
|
||
})
|
||
},1000)
|
||
},1000)
|
||
} else {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '设备离线，请前往车辆详情连接车辆操作',
|
||
showCancel: false,
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
uni.switchTab({
|
||
url:'/pages/myorder/returned/index'
|
||
})
|
||
} else if (res.cancel) {
|
||
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
} else if (res.cancel) {
|
||
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 点击跳转到最近停车点
|
||
btntcd() {
|
||
uni.navigateTo({
|
||
url: '/pages/myorder/returned/tingche?areaId=' + this.orderobj.orderAreaId
|
||
})
|
||
},
|
||
|
||
// 获取本人正在使用的订单设备
|
||
getorderdevice() {
|
||
this.$u.get("/app/orderDevice/mineUsing").then((res) => {
|
||
if (res.code == 200) {
|
||
if (res.data) {
|
||
this.orderobj = res.data
|
||
this.orderAreaReturnVerify = res.data.orderAreaReturnVerify
|
||
this.orderflag = true
|
||
} else {
|
||
this.orderflag = false
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
// 点击跳转轮播图跳转
|
||
btnshangjia(e){
|
||
console.log(e,'1212121',this.tiaozhuanlist[e].urlType);
|
||
if(this.tiaozhuanlist[e].urlType == 1){
|
||
uni.navigateTo({
|
||
url: '/page_fenbao/webview?url=' + this.tiaozhuanlist[e].url
|
||
})
|
||
}else{
|
||
uni.navigateTo({
|
||
url: '/' + this.tiaozhuanlist[e].url
|
||
})
|
||
}
|
||
},
|
||
// 点击显示客服
|
||
btnkf(){
|
||
if(this.kefulist.length > 0){
|
||
this.kefuflag = true
|
||
}else{
|
||
uni.showToast({
|
||
title: '当前暂无客服',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
},
|
||
// 获取客服
|
||
getkefu(){
|
||
this.$u.get(`/app/customerService/indexList?radius=1000¢er=${this.jinweidu}`).then(res => {
|
||
if(res.code == 200){
|
||
this.kefulist = res.after
|
||
this.kefuarr = res.before
|
||
}
|
||
})
|
||
},
|
||
// 获取广告轮播图
|
||
getlunbo(){
|
||
this.$u.get("/app/ad").then(res => {
|
||
if(res.code == 200){
|
||
this.lists = []
|
||
this.tiaozhuanlist = res.data
|
||
if(res.data.length > 0 && res.data[0] != null){
|
||
res.data.forEach(item =>{
|
||
this.lists.push({
|
||
image:item.picture,
|
||
title: item.adId
|
||
})
|
||
})
|
||
}else{
|
||
this.lists.push({
|
||
image:"https://api.ccttiot.com/smartmeter/img/static/uTZBBRuyRexKd6c4VE9d",
|
||
title: ""
|
||
})
|
||
}
|
||
}else{
|
||
this.lists.push({
|
||
image:"https://api.ccttiot.com/smartmeter/img/static/uTZBBRuyRexKd6c4VE9d",
|
||
title: ""
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
// 获取个人用户信息
|
||
getinfo(){
|
||
this.$u.get("/getInfo").then(res => {
|
||
if(res.code == 200){
|
||
this.info = res.user
|
||
this.getMyLocation()
|
||
this.getgonggao()
|
||
}else if(res.code == 401){
|
||
this.getlogo()
|
||
}
|
||
})
|
||
},
|
||
// 静默登录
|
||
getlogo(){
|
||
let taht = this
|
||
wx.login({
|
||
success(res) {
|
||
if (res.code) {
|
||
let data = {
|
||
loginCode: res.code,
|
||
appId:taht.$store.state.appid
|
||
}
|
||
taht.$u.post('/wxLogin', data).then(res => {
|
||
if (res.code == 200) {
|
||
uni.setStorageSync('token', res.token)
|
||
taht.getinfo()
|
||
taht.getlunbo()
|
||
}else{
|
||
taht.getinfo()
|
||
}
|
||
})
|
||
}
|
||
},
|
||
})
|
||
},
|
||
// 点击头部滚动通知
|
||
btntopgg(){
|
||
this.$u.get(`/app/notice/${this.announcements.noticeId}`).then(resp =>{
|
||
if(resp.code == 200){
|
||
this.gonggaoxq = resp.data
|
||
this.gonggaoflag = true
|
||
}
|
||
})
|
||
},
|
||
// 点击公告我知道了
|
||
btnggtc(){
|
||
this.gonggaoflag = false
|
||
uni.setStorageSync('noticeId', this.announcements.noticeId)
|
||
},
|
||
// 获取最新公告
|
||
getgonggao(){
|
||
this.$u.get("/app/notice/new?noticeType=1").then(res =>{
|
||
if(res.code == 200){
|
||
this.announcements = res.data
|
||
if(res.data){
|
||
this.$u.get(`/app/notice/${res.data.noticeId}`).then(resp =>{
|
||
if(resp.code == 200){
|
||
this.gonggaoxq = resp.data
|
||
if(resp.data.noticeId != uni.getStorageSync('noticeId')){
|
||
this.gonggaoflag = true
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
// 点击拨打平台客服电话
|
||
btnptkf(tel){
|
||
uni.makePhoneCall({
|
||
phoneNumber: tel,
|
||
success: function(res) {
|
||
console.log('拨打电话成功', res)
|
||
},
|
||
fail: function(err) {
|
||
console.error('拨打电话失败', err)
|
||
}
|
||
})
|
||
},
|
||
// 点击进行跳转页面
|
||
btntiao(num){
|
||
if(num == 1){ //跳转到地图页
|
||
uni.switchTab({
|
||
url:'/pages/nearbystores/index'
|
||
})
|
||
}else if(num == 2){ //跳转到使用帮助页
|
||
uni.navigateTo({
|
||
url:'/page_user/bangzhu'
|
||
})
|
||
}else if(num == 3){ //跳转到车辆故障上报
|
||
uni.navigateTo({
|
||
url:'/page_user/guzhang/index'
|
||
})
|
||
}else{ //跳转到意见反馈页
|
||
uni.navigateTo({
|
||
url:'/page_user/yijian'
|
||
})
|
||
}
|
||
},
|
||
// 点击附近门店跳转到门店详情页
|
||
btnxq(){
|
||
uni.navigateTo({
|
||
url:'/page_fenbao/storedlist/index'
|
||
})
|
||
},
|
||
// 点击门店拨打电话
|
||
btntel() {
|
||
uni.makePhoneCall({
|
||
phoneNumber: '18888888888',
|
||
success: function(res) {
|
||
console.log('拨打电话成功', res)
|
||
},
|
||
fail: function(err) {
|
||
console.error('拨打电话失败', err)
|
||
}
|
||
})
|
||
},
|
||
// 点击跳转
|
||
btnpage(num){
|
||
if(num == 1){ //跳转到附近门店页面
|
||
uni.navigateTo({
|
||
url:'/page_fenbao/storedlist/fujinshop'
|
||
})
|
||
}else if(num == 2){ //跳转到我的订单页面
|
||
uni.navigateTo({
|
||
url:'/pages/myorder/index'
|
||
})
|
||
}else if(num == 3){ //跳转到租借车辆页面
|
||
uni.switchTab({
|
||
url:'/pages/myorder/returned/index'
|
||
})
|
||
}else{
|
||
uni.navigateTo({
|
||
url:'/page_fenbao/index'
|
||
})
|
||
}
|
||
},
|
||
// 点击跳转到地图页
|
||
btnzk(){
|
||
uni.switchTab({
|
||
url:'/pages/nearbystores/index'
|
||
})
|
||
},
|
||
// 获取自身位置
|
||
getMyLocation() {
|
||
uni.getLocation({
|
||
type: 'wgs84',
|
||
success: (res) => {
|
||
this.jinweidu =res.longitude + ',' + res.latitude
|
||
this.getkefu()
|
||
this.latitude = Number(res.latitude.toFixed(5)) - 0.005
|
||
this.longitude = Number(res.longitude.toFixed(5)) + 0.005
|
||
this.setMapScale()
|
||
},
|
||
fail: (err) => {
|
||
console.error('获取位置失败：', err)
|
||
}
|
||
})
|
||
},
|
||
// 回到地图中心点
|
||
async setMapScale(e, val) {
|
||
let mapContext = uni.createMapContext('map', this)
|
||
let setScale = () => {
|
||
return new Promise((resolve, reject) => {
|
||
mapContext.getScale({
|
||
success: r => {
|
||
resolve()
|
||
}
|
||
})
|
||
})
|
||
}
|
||
await setScale()
|
||
mapContext.moveToLocation({
|
||
success: (res) => {
|
||
const timer = setTimeout(() => {
|
||
clearTimeout(timer)
|
||
}, 500)
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/deep/ wx-swiper{
|
||
height: 180rpx !important;
|
||
}
|
||
.tingchetc {
|
||
width: 624rpx;
|
||
height: 610rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
position: fixed;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
top: 572rpx;
|
||
z-index: 99;
|
||
padding: 28rpx 36rpx;
|
||
box-sizing: border-box;
|
||
|
||
.btnan {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 40rpx;
|
||
|
||
.fj {
|
||
width: 252rpx;
|
||
height: 72rpx;
|
||
border-radius: 45rpx 45rpx 45rpx 45rpx;
|
||
border: 2rpx solid #808080;
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #808080;
|
||
text-align: center;
|
||
line-height: 72rpx;
|
||
}
|
||
|
||
.qx {
|
||
width: 252rpx;
|
||
height: 72rpx;
|
||
background: #4C97E7;
|
||
border-radius: 45rpx 45rpx 45rpx 45rpx;
|
||
text-align: center;
|
||
line-height: 72rpx;
|
||
box-sizing: border-box;
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
.tcimg {
|
||
width: 552rpx;
|
||
height: 300rpx;
|
||
margin-top: 28rpx;
|
||
}
|
||
|
||
.shuom {
|
||
font-size: 26rpx;
|
||
color: #3D3D3D;
|
||
margin-top: 18rpx;
|
||
|
||
text {
|
||
color: #4C97E7;
|
||
}
|
||
}
|
||
|
||
.topname {
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
color: #3D3D3D;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-right: 14rpx;
|
||
}
|
||
}
|
||
}
|
||
.conts_box {
|
||
width: 680rpx;
|
||
height: 360rpx;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 38rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
padding-bottom: 20rpx;
|
||
position: fixed;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: 220rpx;
|
||
|
||
.orderzt {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 20rpx;
|
||
margin-top: 20rpx;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
}
|
||
|
||
.txtss {
|
||
margin-top: 18rpx;
|
||
padding-left: 20rpx;
|
||
width: 100%;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #808080;
|
||
}
|
||
|
||
.dh {
|
||
width: 160rpx;
|
||
height: 60rpx;
|
||
border-radius: 30rpx;
|
||
text-align: center;
|
||
border: 1px solid #333;
|
||
font-size: 28rpx;
|
||
padding-top: 10rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.suocheanniu {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.lssc {
|
||
width: 160rpx;
|
||
height: 60rpx;
|
||
border-radius: 30rpx;
|
||
text-align: center;
|
||
background-color: #0D75E5;
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
box-sizing: border-box;
|
||
margin-left: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
.cont_li {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
|
||
.left {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
color: #3D3D3D;
|
||
|
||
.km {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.speed {
|
||
margin-top: 18rpx;
|
||
width: 226rpx;
|
||
height: 22rpx;
|
||
background: #ccc;
|
||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||
|
||
.speeds {
|
||
height: 100%;
|
||
background: #4297F3;
|
||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||
}
|
||
}
|
||
|
||
.NO {
|
||
width: 100%;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
margin-top: 18rpx;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
width: 70%;
|
||
padding-right: 20rpx;
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
|
||
image {
|
||
width: 160rpx;
|
||
height: 110rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.gonggao{
|
||
width: 680rpx;
|
||
height: 60rpx;
|
||
position: fixed;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 99;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 10rpx;
|
||
background-color: rgba(0, 0, 0, 0.2);
|
||
margin: auto;
|
||
margin-top: 30rpx;
|
||
}
|
||
.container {
|
||
width: 560rpx;
|
||
height: 60rpx; /* 根据需要调整高度 */
|
||
display: flex;
|
||
align-items: center;
|
||
margin: auto;
|
||
overflow: hidden;
|
||
position: relative;
|
||
color: #fff;
|
||
box-sizing: border-box;
|
||
}
|
||
.scroll-text {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
display: inline-block;
|
||
white-space: nowrap;
|
||
animation: scroll 8s linear infinite;
|
||
}
|
||
.scroll-item {
|
||
display: inline-block;
|
||
padding: 0 10px;
|
||
font-size: 16px;
|
||
}
|
||
@keyframes scroll {
|
||
0% {
|
||
transform: translateX(100%);
|
||
}
|
||
100% {
|
||
transform: translateX(-100%);
|
||
}
|
||
}
|
||
.noticetc{
|
||
width: 680rpx;
|
||
height: 950rpx;
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
position: fixed;
|
||
top: 340rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 10;
|
||
.btn{
|
||
width: 600rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
text-align: center;
|
||
border-radius: 50rpx;
|
||
background-color: #4297F3;
|
||
color: #fff;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
margin: auto;
|
||
margin-top: 30rpx;
|
||
}
|
||
.name{
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
margin-top: 30rpx;
|
||
}
|
||
.biaoti{
|
||
font-size: 32rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
.cont{
|
||
width: 100%;
|
||
height: 620rpx;
|
||
overflow: scroll;
|
||
background-color: #ececec;
|
||
margin-top: 20rpx;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
|
||
|
||
/deep/ .u-title{
|
||
padding-bottom: 12rpx !important;
|
||
}
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
.kefutc{
|
||
animation: fadeIn 0.5s ease-in-out forwards;
|
||
position: fixed;
|
||
top: 580rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 10;
|
||
.bot{
|
||
margin-top: 30rpx;
|
||
.wz{
|
||
margin-top: 10rpx;
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
.wzs{
|
||
margin-top: 10rpx;
|
||
font-size: 24rpx;
|
||
color: #7C7C7C;
|
||
}
|
||
}
|
||
.top{
|
||
width: 538rpx;
|
||
height: 122rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.1);
|
||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-right: 14rpx;
|
||
box-sizing: border-box;
|
||
margin-top: 20rpx;
|
||
.dianhua{
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
padding-left: 26rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.boda{
|
||
width: 94rpx;
|
||
height: 94rpx;
|
||
background: #DCEDFF;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
text-align: center;
|
||
padding-top: 8rpx;
|
||
box-sizing: border-box;
|
||
image{
|
||
width: 42rpx;
|
||
height: 40rpx;
|
||
}
|
||
text{
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
.bj{
|
||
position: absolute;
|
||
top: -280rpx;
|
||
z-index: -1;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 614rpx;
|
||
height: 1140rpx;
|
||
}
|
||
}
|
||
.mask{
|
||
width: 100%;
|
||
height: 100vh;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
background-color: rgba(0,0,0,0.3);
|
||
z-index: 9;
|
||
}
|
||
.fujin{
|
||
margin-top: 28rpx;
|
||
padding: 0 26rpx;
|
||
box-sizing: border-box;
|
||
.list{
|
||
padding-bottom: 230rpx;
|
||
box-sizing: border-box;
|
||
.dibutishi{
|
||
width: 100%;
|
||
text-align: center;
|
||
margin-top: 24rpx;
|
||
color: #ccc;
|
||
image{
|
||
width: 480rpx;
|
||
height: 400rpx;
|
||
}
|
||
}
|
||
.list_item{
|
||
width: 670rpx;
|
||
height: 340rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 2rpx 18rpx 0rpx rgba(0,0,0,0.1);
|
||
border-radius: 22rpx 22rpx 22rpx 22rpx;
|
||
padding: 24rpx;
|
||
box-sizing: border-box;
|
||
margin: auto;
|
||
margin-top: 24rpx;
|
||
.cheliang{
|
||
border-top: 1rpx solid #D8D8D8;
|
||
margin-top: 22rpx;
|
||
display: flex;
|
||
.quanxin:nth-child(1){
|
||
border-right: 1px solid #D8D8D8;
|
||
margin-right: 24rpx;
|
||
}
|
||
.quanxin{
|
||
display: flex;
|
||
width: 50%;
|
||
margin-top: 16rpx;
|
||
.qxrt{
|
||
.junjia{
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
.name{
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
.qxlt{
|
||
margin-right: 24rpx;
|
||
image{
|
||
width: 100rpx;
|
||
height: 76rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.bot{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.rt{
|
||
display: flex;
|
||
align-items: center;
|
||
image{
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-left: 16rpx;
|
||
}
|
||
.rizu{
|
||
.qizu{
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
.price{
|
||
font-size: 24rpx;
|
||
color: #FF1C1C;
|
||
text{
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.lt{
|
||
.songqu{
|
||
margin-top: 12rpx;
|
||
max-width: 140rpx;
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
color: #4297F3;
|
||
height: 38rpx;
|
||
line-height: 38rpx;
|
||
background: #DCEDFF;
|
||
border-radius: 6rpx 6rpx 6rpx 6rpx;
|
||
}
|
||
.yytime{
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
margin-top: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
text{
|
||
font-weight: 600;
|
||
margin-right: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.dizhi{
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
margin-top: 12rpx;
|
||
image{
|
||
width: 22rpx;
|
||
height: 22rpx;
|
||
margin-right: 4rpx;
|
||
}
|
||
}
|
||
.top{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.name{
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
image{
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.names{
|
||
width: 142rpx;
|
||
height: 52rpx;
|
||
background: #4297F3;
|
||
border-radius: 0 30rpx 0 30rpx;
|
||
font-weight: 600;
|
||
font-size: 26rpx;
|
||
color: #fff;
|
||
text-align: center;
|
||
line-height: 52rpx;
|
||
}
|
||
}
|
||
.guanggao{
|
||
width: 700rpx;
|
||
height: 180rpx;
|
||
margin: auto;
|
||
margin-top: 34rpx;
|
||
position: relative;
|
||
.kefu{
|
||
width: 108rpx;
|
||
height: 146rpx;
|
||
position: absolute;
|
||
bottom: -80rpx;
|
||
right: 10rpx;
|
||
}
|
||
/deep/ .u-swiper-image{
|
||
width: 700rpx !important;
|
||
height: 180rpx !important;
|
||
border-radius: 10rpx;
|
||
}
|
||
}
|
||
.kuaijie{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 26rpx;
|
||
box-sizing: border-box;
|
||
margin-top: 32rpx;
|
||
image{
|
||
width: 96rpx;
|
||
height: 116rpx;
|
||
}
|
||
}
|
||
.ditu{
|
||
width: 700rpx;
|
||
height: 580rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
margin: auto;
|
||
margin-top: 22rpx;
|
||
position: relative;
|
||
.caozuo{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-top: 38rpx;
|
||
padding-left: 40rpx;
|
||
padding-right: 40rpx;
|
||
box-sizing: border-box;
|
||
image{
|
||
width: 96rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
.zk{
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
position: absolute;
|
||
right: 8rpx;
|
||
bottom: 180rpx;
|
||
}
|
||
map{
|
||
width: 700rpx;
|
||
height: 412rpx;
|
||
}
|
||
}
|
||
</style> |