Skip to content

J
jd-vx-app
Commit acde9d87 authored by lijiongliang's avatar lijiongliang
Browse files
Options

一键挪车页面修改

parent 54ea60d2
Hide whitespace changes
Inline Side-by-side
Showing with 529 additions and 502 deletions
pagesB/pages/move-car/oneMoveCar.vue
View file @ acde9d87
<template> <template>
<view class="appCotent"> <view class="appCotent">
<div class="oneMoveCar"> <div class="oneMoveCar">
<div class="contentMoveCar"> <div class="contentMoveCar">
<div class="car_item__one"> <div class="car_item__one">
<div class="item__label item__label__one"> <div class="item__label item__label__one">
车牌号： 车牌号：
</div> </div>
<div class="item__content"> <div class="item__content">
{{appBo.carNo}} {{appBo.carNo}}
</div> </div>
</div> </div>
<div class="car_item__two"> <div class="car_item__two">
<div class="item__label"> <div class="item__label">
当前位置: 当前位置:
</div> </div>
<div class="item__value"> <div class="item__value">
{{appBo.detailInfo}} {{appBo.detailInfo}}
<!-- <u--text :text="appBo.detailInfo" color="#333333" height="35" bgColor="#ffffff" fontSize="30rpx" ></u--text> --> <!-- <u--text :text="appBo.detailInfo" color="#333333" height="35" bgColor="#ffffff" fontSize="30rpx" ></u--text> -->
<!-- //todo 这个滚动通知有一个padding的设置项,导致高度增加不少,需要解决 --> <!-- //todo 这个滚动通知有一个padding的设置项,导致高度增加不少,需要解决 -->
<!-- <u-notice-bar :text="appBo.detailInfo" icon=" " single="true" color="#333333" height="35" bgColor="#ffffff" fontSize="30rpx" ></u-notice-bar> --> <!-- <u-notice-bar :text="appBo.detailInfo" icon=" " single="true" color="#333333" height="35" bgColor="#ffffff" fontSize="30rpx" ></u-notice-bar> -->
<!-- <div class="item__icon"> <!-- <div class="item__icon">
<image src="@/static/move-car/move-car-code1.png" /> <image src="@/static/move-car/move-car-code1.png" />
</div> --> </div> -->
</div> </div>
</div> </div>
<div class="car_item__three"> <div class="car_item__three">
我的车辆如果阻碍了您的爱车的通行，请点击下方按钮通知我，给您造成的不便敬请谅解！！！ 我的车辆如果阻碍了您的爱车的通行，请点击下方按钮通知我，给您造成的不便敬请谅解！！！
</div> </div>
</div> </div>
<div class="moveCarMsg"> <div class="moveCarMsg">
<div class="move-car__tips"> <div class="move-car__tips">
点击下方按钮联系车主 点击下方按钮联系车主
</div> </div>
<div class="move-car__btn" @click="call"> <div class="move-car__btn" @click="call">
拨打车主电话通知 拨打车主电话通知
</div> </div>
<div class="move-car__btn" @click="wechat"> <div class="move-car__btn" @click="wechat">
微信通知(上限3次) 微信通知(上限{{wxMaxNum}}次)
</div> </div>
<!-- <div class="move-car__wx"> <!-- <div class="move-car__wx">
<u-checkbox-group placement="row"> <u-checkbox-group placement="row">
<u-checkbox v-model="checked" @change="changeWechat"></u-checkbox> <u-checkbox v-model="checked" @change="changeWechat"></u-checkbox>
</u-checkbox-group> 微信通知(上限3次) </u-checkbox-group> 微信通知(上限3次)
</div> --> </div> -->
<div class="move-car__more" @click=""> <div class="move-car__more" @click="">
<div @click="goToIndex"> <div @click="goToIndex">
获取同款挪车牌 获取同款挪车牌
<span> <span>
<image src="@/static/move-car/move-car-code2.png"> <image src="@/static/move-car/move-car-code2.png">
</span> </span>
</div> </div>
<div class="center__shu"> <div class="center__shu">
<image src="@/static/move-car/move-car-code3.png"> <image src="@/static/move-car/move-car-code3.png">
</div> </div>
<div @click="goMyCar"> <div @click="goMyCar">
查看我的挪车牌 查看我的挪车牌
<span> <span>
<image src="@/static/move-car/move-car-code2.png"> <image src="@/static/move-car/move-car-code2.png">
</span> </span>
</div> </div>
</div> </div>
</div> </div>
<u-action-sheet :actions="list" @close='close' @select="selectClick" closeOnClickOverlay round='6' :show="show"></u-action-sheet> <u-action-sheet :actions="list" @close='close' @select="selectClick" closeOnClickOverlay round='6'
</div> :show="show"></u-action-sheet>
</view> </div>
</view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
show:false, show: false,
list: [ list: [
{ // {
name:'2367虚拟号码345', // name:'2367虚拟号码345',
color:'#333333', // color:'#333333',
fontSize:'20', // fontSize:'20',
}, // },
{ {
name:'呼叫', name: '呼叫',
color:'#3A86F7', color: '#3A86F7',
fontSize:'18', fontSize: '18',
}, },
{ {
name:'取消', name: '取消',
color:'#E6271D', color: '#E6271D',
fontSize:'18', fontSize: '18',
}, },
], ],
checked:false, checked: false,
moveCode: '', moveCode: '',
appBusCar: {}, appBusCar: {},
appBo: { appBo: {
//车牌号 //车牌号
carNo: '', carNo: '',
//省 //省
provinceName: '', provinceName: '',
//市 //市
cityName: '', cityName: '',
//区 //区
countyName: '', countyName: '',
//街道 //街道
township: '', township: '',
//号数 //号数
number: '', number: '',
//详细地址 //详细地址
detailInfo: '', detailInfo: '',
//是否微信通知 //是否微信通知
wechat: false, wechat: false,
}, },
noticeResult: { noticeResult: {
secretPhone: '', secretPhone: '',
allowPhone: false, allowPhone: false,
allowWechat: false, allowWechat: false,
notAllowPhoneReason: '', notAllowPhoneReason: '',
notAllowWechatReason: '', notAllowWechatReason: '',
}, },
} wxMaxNum:""
}, }
methods: { },
goToIndex() { methods: {
uni.navigateTo({ goToIndex() {
url: '/pages/main' uni.navigateTo({
}); url: '/pages/main'
}, });
changeWechat(){ },
this.appBo.wechat = !this.appBo.wechat changeWechat() {
}, this.appBo.wechat = !this.appBo.wechat
call() { },
// if(this.checked){ call() {
// this.appBo.wechat = true // if(this.checked){
// }else{ // this.appBo.wechat = true
// this.appBo.wechat = false // }else{
// } // this.appBo.wechat = false
// console.log(this.checked) // }
// this.appBo.wechat = true // console.log(this.checked)
// this.appBo.wechat = true
this.appBo.moveCode = this.moveCode
let opts = { url: '/app/contact/phone/notice' , method: 'post' }; this.appBo.moveCode = this.moveCode
this.http.httpTokenRequest(opts, this.appBo).then(res => { let opts = {
if (res.data.code == 200) { url: '/app/contact/phone/notice',
//请求成功逻辑，修改 method: 'post'
this.noticeResult = res.data.data };
if (this.noticeResult.allowPhone){ this.http.httpTokenRequest(opts, this.appBo).then(res => {
this.list[0].name = this.noticeResult.secretPhone if (res.data.code == 200) {
this.show = true; //请求成功逻辑，修改
} this.noticeResult = res.data.data
}else{ if (this.noticeResult.allowPhone) {
this.noticeResult = res.data.data // this.list[0].name = this.noticeResult.secretPhone
if (this.noticeResult){ this.show = true;
uni.showModal({ }
content: this.noticeResult.notAllowPhoneReason, } else {
}) this.noticeResult = res.data.data
} if (this.noticeResult) {
} uni.showModal({
}) content: this.noticeResult.notAllowPhoneReason,
}, })
wechat(){ }
this.appBo.moveCode = this.moveCode }
let opts = { url: '/app/contact/wechat/notice' , method: 'post' }; })
this.http.httpTokenRequest(opts, this.appBo).then(res => { },
if (res.data.code == 200) { wechat() {
uni.showModal({ this.appBo.moveCode = this.moveCode
content: "微信消息发送成功", let opts = {
}) url: '/app/contact/wechat/notice',
}else{ method: 'post'
//请求成功逻辑，修改 };
this.noticeResult = res.data.data this.http.httpTokenRequest(opts, this.appBo).then(res => {
if (this.noticeResult){ if (res.data.code == 200) {
uni.showModal({ uni.showModal({
content: this.noticeResult.notAllowWechatReason, content: "微信消息发送成功",
})
}
}
})
},
close() {
this.show = false;
},
goMyMoveCar(){
},
selectClick(index){
if(index.name == "呼叫"){
uni.makePhoneCall({
phoneNumber: this.noticeResult.secretPhone
});
}else if(index.name == "取消"){
this.show = false;
}
},
goMyCar() {
uni.navigateTo({
url: '/pagesB/pages/move-car/myMoveCar'
})
},
getCarNumber(){
let opts = { url: '/app/moveCode/owner/' + this.moveCode, method: 'get' };
//let opts = { url: '/app/moveCode/owner/MV123', method: 'get' };
this.http.httpTokenRequest(opts, {}).then(res => {
if (res.data.code == 200) {
if(JSON.stringify(res.data.data) != "{}"){
this.appBo.carNo = res.data.data.carNo
}else{
uni.navigateTo({
url: '/pagesB/pages/move-car/scan?moveCode=' + this.moveCode
}) })
} else {
//请求成功逻辑，修改
this.noticeResult = res.data.data
if (this.noticeResult) {
uni.showModal({
content: this.noticeResult.notAllowWechatReason,
})
}
} }
}else{ })
//查询挪车码失败 },
uni.showToast({ close() {
title: res.data.msg, this.show = false;
icon: "error", },
goMyMoveCar() {
},
selectClick(index) {
if (index.name == "呼叫") {
uni.makePhoneCall({
phoneNumber: this.noticeResult.secretPhone
}); });
} else if (index.name == "取消") {
this.show = false;
} }
}) },
goMyCar() {
uni.navigateTo({
url: '/pagesB/pages/move-car/myMoveCar'
})
},
// 获取微信通知次数
getMoveCode() {
let opts = {
url: '/app/moveCode/notice/config',
method: 'get'
};
this.http.httpTokenRequest(opts, {}).then(res => {
if (res.data.code == 200) {
this.wxMaxNum = res.data.data.wxMaxNum
}
})
},
getCarNumber() {
let opts = {
url: '/app/moveCode/owner/' + this.moveCode,
method: 'get'
};
//let opts = { url: '/app/moveCode/owner/MV123', method: 'get' };
this.http.httpTokenRequest(opts, {}).then(res => {
if (res.data.code == 200) {
if (JSON.stringify(res.data.data) != "{}") {
this.appBo.carNo = res.data.data.carNo
} else {
uni.navigateTo({
url: '/pagesB/pages/move-car/scan?moveCode=' + this.moveCode
})
}
} else {
//查询挪车码失败
uni.showToast({
title: res.data.msg,
icon: "error",
});
}
})
},
getMoveLogInit() {
let opts = {
url: '/app/moveLog/init',
method: 'get'
};
this.http.httpTokenRequest(opts, {}).then(res => {
if (res.data.code == 200) {
//添加逻辑判断
this.appBo.logCode = res.data.data
}
})
},
// 用户授权
getAuthorize() {
const _this = this
uni.authorize({
scope: 'scope.userLocation', // 获取地理信息必填的参数，其它参数见文档
success(res) {
_this.getLocation()
},
// 授权失败
fail(err) {
uni.showModal({
title: '温馨提示',
content: '无法获取当前位置，请手动开启授权',
success: function(res) {
if (res.confirm) {
//console.log('用户点击确定')
uni.openSetting({
success(res) {
if (res.authSetting['scope.userLocation']) {
//console.log('打开授权设置定位')
_this.getLocation()
}
},
})
} else if (res.cancel) {
//console.log('用户点击取消')
}
},
})
},
})
},
// 获取用户的地理位置，
getLocation() {
const _this = this
uni.getLocation({
type: 'wgs84',
altitude: true,
success(res) {
//小程序只能获取到位置经纬度，需要借助高德地图的逆解析地址，显示出中文具体城市名字
_this.loadCity(res.longitude, res.latitude)
},
fail() {
//console.log('拒绝获取地理位置')
}
})
},
// 经纬度转具体城市
// 1）需要用到高德地图的逆地理编码
// 2）需要当前地理位置的经纬度
// 3）小程序的key值
loadCity(longitude, latitude) {
const that = this
uni.request({
header: {
'Content-Type': 'application/text',
},
//注意:这里的key值需要高德地图的 web服务生成的key 只有web服务才有逆地理编码
url: 'https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=' +
longitude +
',' +
latitude +
'&key=1bba2ab2de600f8b5fafe167e09cd2af&radius=1000&extensions=all',
success(res) {
console.log(res);
if (res.statusCode === 200) {
if (res.data.status === '1') {
let addressInfo = res.data
//详细地址
that.appBo.detailInfo = addressInfo.regeocode.formatted_address
//省
that.appBo.provinceName = addressInfo.regeocode.addressComponent.province
//市,直辖市有可能为空数组
that.appBo.cityName = addressInfo.regeocode.addressComponent.city
//为数组的时候设置为空
if (Array.isArray(that.appBo.cityName)) {
that.appBo.cityName = ''
}
//区
that.appBo.countyName = addressInfo.regeocode.addressComponent.district
//街道
that.appBo.township = addressInfo.regeocode.addressComponent.township
//号数
that.appBo.number = addressInfo.regeocode.addressComponent.streetNumber.number
//console.log("当前位置: " + that.appBo.detailInfo + " " + that.appBo.provinceName + " " + " " + that.appBo.cityName + " " + that.appBo.countyName)
}
} else {
//console.log('获取信息失败，请重试！')
}
},
})
}
}, },
getMoveLogInit(){ onLoad(e) {
let opts = { url: '/app/moveLog/init', method: 'get' }; // 在页面加载的时候去判断用户有没有授权地理位置，没授权的话引导用户去设置页手动授权
this.http.httpTokenRequest(opts, {}).then(res => { this.getAuthorize()
if (res.data.code == 200) { console.log(e)
//添加逻辑判断 if (e.scene) {
this.appBo.logCode = res.data.data //获取二维码携带的参数
} //扫码后得到的参数
}) //let scene = decodeURIComponent(e.query.scene)
// scene = scene.split('&')
// let data = {
// //场景值
// scene: e.scene
// }
this.moveCode = e.scene
//console.log('scene: ' + scene);
}
},
onShow() {
this.getCarNumber()
this.getMoveCode()
}, },
created() {
// 用户授权 },
getAuthorize() { }
const _this = this
uni.authorize({
scope: 'scope.userLocation', // 获取地理信息必填的参数，其它参数见文档
success(res) {
_this.getLocation()
},
// 授权失败
fail(err) {
uni.showModal({
title: '温馨提示',
content: '无法获取当前位置，请手动开启授权',
success: function (res) {
if (res.confirm) {
//console.log('用户点击确定')
uni.openSetting({
success(res) {
if (res.authSetting['scope.userLocation']) {
//console.log('打开授权设置定位')
_this.getLocation()
}
},
})
} else if (res.cancel) {
//console.log('用户点击取消')
}
},
})
},
})
},
// 获取用户的地理位置，
getLocation() {
const _this = this
uni.getLocation({
type: 'wgs84',
altitude: true,
success(res) {
//小程序只能获取到位置经纬度，需要借助高德地图的逆解析地址，显示出中文具体城市名字
_this.loadCity(res.longitude, res.latitude)
},
fail() {
//console.log('拒绝获取地理位置')
}
})
},
// 经纬度转具体城市
// 1）需要用到高德地图的逆地理编码
// 2）需要当前地理位置的经纬度
// 3）小程序的key值
loadCity(longitude, latitude) {
const that = this
uni.request({
header: {
'Content-Type': 'application/text',
},
//注意:这里的key值需要高德地图的 web服务生成的key 只有web服务才有逆地理编码
url: 'https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=' +
longitude +
',' +
latitude +
'&key=1bba2ab2de600f8b5fafe167e09cd2af&radius=1000&extensions=all',
success(res) {
console.log(res);
if (res.statusCode === 200) {
if(res.data.status === '1') {
let addressInfo = res.data
//详细地址
that.appBo.detailInfo = addressInfo.regeocode.formatted_address
//省
that.appBo.provinceName = addressInfo.regeocode.addressComponent.province
//市,直辖市有可能为空数组
that.appBo.cityName = addressInfo.regeocode.addressComponent.city
//为数组的时候设置为空
if(Array.isArray(that.appBo.cityName)) {
that.appBo.cityName = ''
}
//区
that.appBo.countyName = addressInfo.regeocode.addressComponent.district
//街道
that.appBo.township = addressInfo.regeocode.addressComponent.township
//号数
that.appBo.number = addressInfo.regeocode.addressComponent.streetNumber.number
//console.log("当前位置: " + that.appBo.detailInfo + " " + that.appBo.provinceName + " " + " " + that.appBo.cityName + " " + that.appBo.countyName)
}
} else {
//console.log('获取信息失败，请重试！')
}
},
})
}
},
onLoad(e) {
// 在页面加载的时候去判断用户有没有授权地理位置，没授权的话引导用户去设置页手动授权
this.getAuthorize()
console.log(e)
if(e.scene) {
//获取二维码携带的参数
//扫码后得到的参数
//let scene = decodeURIComponent(e.query.scene)
// scene = scene.split('&')
// let data = {
// //场景值
// scene: e.scene
// }
this.moveCode = e.scene
//console.log('scene: ' + scene);
}
},
onShow() {
this.getCarNumber()
},
created() {
},
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.u-notice-bar { .u-notice-bar {
padding: 0 !important; padding: 0 !important;
} }
.oneMoveCar {
.oneMoveCar {
.u-checkbox-group {
display: inline-block !important; .u-checkbox-group {
} display: inline-block !important;
/deep/.u-checkbox-group--row { }
display: inline-block !important;
} /deep/.u-checkbox-group--row {
display: inline-block !important;
.contentMoveCar { }
padding: 40rpx; .contentMoveCar {
.item__label { padding: 40rpx;
font-size: 34rpx;
font-family: PingFang SC; .item__label {
font-weight: 500; font-size: 34rpx;
color: #333333; font-family: PingFang SC;
line-height: 42rpx; font-weight: 500;
} color: #333333;
line-height: 42rpx;
.item__label__one { }
padding-right: 34rpx;
} .item__label__one {
padding-right: 34rpx;
.item__content { }
width: 500rpx;
font-size: 40rpx; .item__content {
font-family: PingFang SC; width: 500rpx;
font-weight: bold; font-size: 40rpx;
color: #F1251B; font-family: PingFang SC;
line-height: 42rpx; font-weight: bold;
text-align: center; color: #F1251B;
line-height: 100rpx; line-height: 42rpx;
height: 100rpx; text-align: center;
background: url(@/static/move-car/move-car-code5.png) no-repeat; line-height: 100rpx;
background-size: contain; height: 100rpx;
} background: url(@/static/move-car/move-car-code5.png) no-repeat;
background-size: contain;
.item__value { }
font-size: 30rpx;
font-family: PingFang SC; .item__value {
font-weight: 500; font-size: 30rpx;
color: #333333; font-family: PingFang SC;
line-height: 100rpx; font-weight: 500;
width: 500rpx; color: #333333;
padding: 10rpx 0; line-height: 100rpx;
height: auto; width: 500rpx;
background: url(@/static/move-car/move-car-code4.png) no-repeat; padding: 10rpx 0;
background-size: cover; height: auto;
line-height: 40rpx; background: url(@/static/move-car/move-car-code4.png) no-repeat;
display: flex; background-size: cover;
box-sizing: border-box; line-height: 40rpx;
padding: 0 10rpx; display: flex;
align-items: center; box-sizing: border-box;
justify-content: space-between; padding: 0 10rpx;
} align-items: center;
justify-content: space-between;
.car_item__one { }
display: flex;
align-items: center; .car_item__one {
margin-bottom: 30rpx; display: flex;
} align-items: center;
margin-bottom: 30rpx;
.car_item__two { }
display: flex;
align-items: center; .car_item__two {
justify-content: space-between; display: flex;
align-items: center;
.item__icon { justify-content: space-between;
padding-right: 40rpx; .item__icon {
image { padding-right: 40rpx;
width: 11rpx;
height: 18rpx; image {
} width: 11rpx;
} height: 18rpx;
} }
}
.car_item__three { }
margin-top: 40rpx;
font-size: 24rpx; .car_item__three {
font-family: PingFang SC; margin-top: 40rpx;
font-weight: 500; font-size: 24rpx;
color: #F88D28; font-family: PingFang SC;
line-height: 36rpx; font-weight: 500;
text-indent: 2em; color: #F88D28;
padding: 30rpx; line-height: 36rpx;
box-sizing: border-box; text-indent: 2em;
background: url(@/static/move-car/move-car-code6.png) no-repeat; padding: 30rpx;
background-size: contain; box-sizing: border-box;
} background: url(@/static/move-car/move-car-code6.png) no-repeat;
} background-size: contain;
}
.moveCarMsg { }
height: 454rpx;
background: #FFFFFF; .moveCarMsg {
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2); height: 454rpx;
border-radius: 20rpx; background: #FFFFFF;
padding: 32rpx 40rpx; box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
position: relative; border-radius: 20rpx;
top: -56rpx; padding: 32rpx 40rpx;
position: relative;
.move-car__tips { top: -56rpx;
font-size: 28rpx;
font-family: PingFang SC; .move-car__tips {
font-weight: 500; font-size: 28rpx;
color: #666666; font-family: PingFang SC;
line-height: 39rpx; font-weight: 500;
text-align: center; color: #666666;
} line-height: 39rpx;
text-align: center;
.move-car__btn { }
text-align: center;
width: 400rpx; .move-car__btn {
height: 76rpx; text-align: center;
border-radius: 8rpx; width: 400rpx;
font-size: 32rpx; height: 76rpx;
font-family: PingFang SC; border-radius: 8rpx;
font-weight: 500; font-size: 32rpx;
color: #FFFFFF; font-family: PingFang SC;
line-height: 76rpx; font-weight: 500;
background: url(@/static/move-car/move-car-code7.png) no-repeat; color: #FFFFFF;
background-size: contain; line-height: 76rpx;
margin: 100rpx auto 30rpx auto; background: url(@/static/move-car/move-car-code7.png) no-repeat;
background-size: contain;
} margin: 40rpx auto 30rpx auto;
.move-car__wx { }
font-size: 26rpx; .move-car__wx {
font-family: PingFang SC;
font-weight: 500; font-size: 26rpx;
color: #666666; font-family: PingFang SC;
line-height: 42rpx; font-weight: 500;
text-align: center; color: #666666;
margin-bottom: 100rpx; line-height: 42rpx;
} text-align: center;
margin-bottom: 100rpx;
.move-car__more { }
font-size: 28rpx;
font-family: PingFang SC; .move-car__more {
font-weight: 500; font-size: 28rpx;
color: #F88D28; font-family: PingFang SC;
line-height: 42rpx; font-weight: 500;
display: flex; color: #F88D28;
justify-content: space-between; line-height: 42rpx;
display: flex;
.center__shu { justify-content: space-between;
image {
width: 3rpx; .center__shu {
height: 27rpx; image {
} width: 3rpx;
} height: 27rpx;
}
span { }
padding-left: 20rpx;
span {
image { padding-left: 20rpx;
width: 11rpx;
height: 18rpx; image {
} width: 11rpx;
} height: 18rpx;
} }
} }
} }
}
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment