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>
<view class="appCotent">
<div class="oneMoveCar">
<div class="contentMoveCar">
<div class="car_item__one">
<div class="item__label item__label__one">
车牌号：
</div>
<div class="item__content">
{{appBo.carNo}}
</div>
</div>
<div class="car_item__two">
<div class="item__label">
当前位置:
</div>
<div class="item__value">
{{appBo.detailInfo}}
<!-- <u--text :text="appBo.detailInfo" color="#333333" height="35" bgColor="#ffffff" fontSize="30rpx" ></u--text> -->
<!-- //todo 这个滚动通知有一个padding的设置项,导致高度增加不少,需要解决 -->
<!-- <u-notice-bar :text="appBo.detailInfo" icon=" " single="true" color="#333333" height="35" bgColor="#ffffff" fontSize="30rpx" ></u-notice-bar> -->
<!-- <div class="item__icon">
<view class="appCotent">
<div class="oneMoveCar">
<div class="contentMoveCar">
<div class="car_item__one">
<div class="item__label item__label__one">
车牌号：
</div>
<div class="item__content">
{{appBo.carNo}}
</div>
</div>
<div class="car_item__two">
<div class="item__label">
当前位置:
</div>
<div class="item__value">
{{appBo.detailInfo}}
<!-- <u--text :text="appBo.detailInfo" color="#333333" height="35" bgColor="#ffffff" fontSize="30rpx" ></u--text> -->
<!-- //todo 这个滚动通知有一个padding的设置项,导致高度增加不少,需要解决 -->
<!-- <u-notice-bar :text="appBo.detailInfo" icon=" " single="true" color="#333333" height="35" bgColor="#ffffff" fontSize="30rpx" ></u-notice-bar> -->
<!-- <div class="item__icon">
<image src="@/static/move-car/move-car-code1.png" />
</div> -->
</div>
</div>
<div class="car_item__three">
我的车辆如果阻碍了您的爱车的通行，请点击下方按钮通知我，给您造成的不便敬请谅解！！！
</div>
</div>
<div class="moveCarMsg">
<div class="move-car__tips">
点击下方按钮联系车主
</div>
<div class="move-car__btn" @click="call">
拨打车主电话通知
</div>
<div class="move-car__btn" @click="wechat">
微信通知(上限3次)
</div>
<!-- <div class="move-car__wx">
</div>
</div>
<div class="car_item__three">
我的车辆如果阻碍了您的爱车的通行，请点击下方按钮通知我，给您造成的不便敬请谅解！！！
</div>
</div>
<div class="moveCarMsg">
<div class="move-car__tips">
点击下方按钮联系车主
</div>
<div class="move-car__btn" @click="call">
拨打车主电话通知
</div>
<div class="move-car__btn" @click="wechat">
微信通知(上限{{wxMaxNum}}次)
</div>
<!-- <div class="move-car__wx">
<u-checkbox-group placement="row">
<u-checkbox v-model="checked" @change="changeWechat"></u-checkbox>
</u-checkbox-group> 微信通知(上限3次)
</div> -->
<div class="move-car__more" @click="">
<div @click="goToIndex">
获取同款挪车牌
<span>
<image src="@/static/move-car/move-car-code2.png">
</span>
</div>
<div class="center__shu">
<image src="@/static/move-car/move-car-code3.png">
</div>
<div @click="goMyCar">
查看我的挪车牌
<span>
<image src="@/static/move-car/move-car-code2.png">
</span>
</div>
</div>
</div>
<u-action-sheet :actions="list" @close='close' @select="selectClick" closeOnClickOverlay round='6' :show="show"></u-action-sheet>
</div>
</view>
<div class="move-car__more" @click="">
<div @click="goToIndex">
获取同款挪车牌
<span>
<image src="@/static/move-car/move-car-code2.png">
</span>
</div>
<div class="center__shu">
<image src="@/static/move-car/move-car-code3.png">
</div>
<div @click="goMyCar">
查看我的挪车牌
<span>
<image src="@/static/move-car/move-car-code2.png">
</span>
</div>
</div>
</div>
<u-action-sheet :actions="list" @close='close' @select="selectClick" closeOnClickOverlay round='6'
:show="show"></u-action-sheet>
</div>
</view>
</template>
<script>
export default {
data() {
return {
show:false,
list: [
{
name:'2367虚拟号码345',
color:'#333333',
fontSize:'20',
},
{
name:'呼叫',
color:'#3A86F7',
fontSize:'18',
},
{
name:'取消',
color:'#E6271D',
fontSize:'18',
},
],
checked:false,
moveCode: '',
appBusCar: {},
appBo: {
//车牌号
carNo: '',
//省
provinceName: '',
//市
cityName: '',
//区
countyName: '',
//街道
township: '',
//号数
number: '',
//详细地址
detailInfo: '',
//是否微信通知
wechat: false,
},
noticeResult: {
secretPhone: '',
allowPhone: false,
allowWechat: false,
notAllowPhoneReason: '',
notAllowWechatReason: '',
},
}
},
methods: {
goToIndex() {
uni.navigateTo({
url: '/pages/main'
});
},
changeWechat(){
this.appBo.wechat = !this.appBo.wechat
},
call() {
// if(this.checked){
// this.appBo.wechat = true
// }else{
// this.appBo.wechat = false
// }
// console.log(this.checked)
// this.appBo.wechat = true
this.appBo.moveCode = this.moveCode
let opts = { url: '/app/contact/phone/notice' , method: 'post' };
this.http.httpTokenRequest(opts, this.appBo).then(res => {
if (res.data.code == 200) {
//请求成功逻辑，修改
this.noticeResult = res.data.data
if (this.noticeResult.allowPhone){
this.list[0].name = this.noticeResult.secretPhone
this.show = true;
}
}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) {
uni.showModal({
content: "微信消息发送成功",
})
}else{
//请求成功逻辑，修改
this.noticeResult = res.data.data
if (this.noticeResult){
uni.showModal({
content: this.noticeResult.notAllowWechatReason,
})
}
}
})
},
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
export default {
data() {
return {
show: false,
list: [
// {
// name:'2367虚拟号码345',
// color:'#333333',
// fontSize:'20',
// },
{
name: '呼叫',
color: '#3A86F7',
fontSize: '18',
},
{
name: '取消',
color: '#E6271D',
fontSize: '18',
},
],
checked: false,
moveCode: '',
appBusCar: {},
appBo: {
//车牌号
carNo: '',
//省
provinceName: '',
//市
cityName: '',
//区
countyName: '',
//街道
township: '',
//号数
number: '',
//详细地址
detailInfo: '',
//是否微信通知
wechat: false,
},
noticeResult: {
secretPhone: '',
allowPhone: false,
allowWechat: false,
notAllowPhoneReason: '',
notAllowWechatReason: '',
},
wxMaxNum:""
}
},
methods: {
goToIndex() {
uni.navigateTo({
url: '/pages/main'
});
},
changeWechat() {
this.appBo.wechat = !this.appBo.wechat
},
call() {
// if(this.checked){
// this.appBo.wechat = true
// }else{
// this.appBo.wechat = false
// }
// console.log(this.checked)
// this.appBo.wechat = true
this.appBo.moveCode = this.moveCode
let opts = {
url: '/app/contact/phone/notice',
method: 'post'
};
this.http.httpTokenRequest(opts, this.appBo).then(res => {
if (res.data.code == 200) {
//请求成功逻辑，修改
this.noticeResult = res.data.data
if (this.noticeResult.allowPhone) {
// this.list[0].name = this.noticeResult.secretPhone
this.show = true;
}
} 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) {
uni.showModal({
content: "微信消息发送成功",
})
} else {
//请求成功逻辑，修改
this.noticeResult = res.data.data
if (this.noticeResult) {
uni.showModal({
content: this.noticeResult.notAllowWechatReason,
})
}
}
}else{
//查询挪车码失败
uni.showToast({
title: res.data.msg,
icon: "error",
})
},
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'
})
},
// 获取微信通知次数
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(){
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
}
})
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()
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>
<style lang="scss" scoped>
.u-notice-bar {
padding: 0 !important;
}
.oneMoveCar {
.u-checkbox-group {
display: inline-block !important;
}
/deep/.u-checkbox-group--row {
display: inline-block !important;
}
.contentMoveCar {
padding: 40rpx;
.item__label {
font-size: 34rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 42rpx;
}
.item__label__one {
padding-right: 34rpx;
}
.item__content {
width: 500rpx;
font-size: 40rpx;
font-family: PingFang SC;
font-weight: bold;
color: #F1251B;
line-height: 42rpx;
text-align: center;
line-height: 100rpx;
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;
font-weight: 500;
color: #333333;
line-height: 100rpx;
width: 500rpx;
padding: 10rpx 0;
height: auto;
background: url(@/static/move-car/move-car-code4.png) no-repeat;
background-size: cover;
line-height: 40rpx;
display: flex;
box-sizing: border-box;
padding: 0 10rpx;
align-items: center;
justify-content: space-between;
}
.car_item__one {
display: flex;
align-items: center;
margin-bottom: 30rpx;
}
.car_item__two {
display: flex;
align-items: center;
justify-content: space-between;
.item__icon {
padding-right: 40rpx;
image {
width: 11rpx;
height: 18rpx;
}
}
}
.car_item__three {
margin-top: 40rpx;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #F88D28;
line-height: 36rpx;
text-indent: 2em;
padding: 30rpx;
box-sizing: border-box;
background: url(@/static/move-car/move-car-code6.png) no-repeat;
background-size: contain;
}
}
.moveCarMsg {
height: 454rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
border-radius: 20rpx;
padding: 32rpx 40rpx;
position: relative;
top: -56rpx;
.move-car__tips {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
line-height: 39rpx;
text-align: center;
}
.move-car__btn {
text-align: center;
width: 400rpx;
height: 76rpx;
border-radius: 8rpx;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 76rpx;
background: url(@/static/move-car/move-car-code7.png) no-repeat;
background-size: contain;
margin: 100rpx auto 30rpx auto;
}
.move-car__wx {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
line-height: 42rpx;
text-align: center;
margin-bottom: 100rpx;
}
.move-car__more {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #F88D28;
line-height: 42rpx;
display: flex;
justify-content: space-between;
.center__shu {
image {
width: 3rpx;
height: 27rpx;
}
}
span {
padding-left: 20rpx;
image {
width: 11rpx;
height: 18rpx;
}
}
}
}
}
.u-notice-bar {
padding: 0 !important;
}
.oneMoveCar {
.u-checkbox-group {
display: inline-block !important;
}
/deep/.u-checkbox-group--row {
display: inline-block !important;
}
.contentMoveCar {
padding: 40rpx;
.item__label {
font-size: 34rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 42rpx;
}
.item__label__one {
padding-right: 34rpx;
}
.item__content {
width: 500rpx;
font-size: 40rpx;
font-family: PingFang SC;
font-weight: bold;
color: #F1251B;
line-height: 42rpx;
text-align: center;
line-height: 100rpx;
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;
font-weight: 500;
color: #333333;
line-height: 100rpx;
width: 500rpx;
padding: 10rpx 0;
height: auto;
background: url(@/static/move-car/move-car-code4.png) no-repeat;
background-size: cover;
line-height: 40rpx;
display: flex;
box-sizing: border-box;
padding: 0 10rpx;
align-items: center;
justify-content: space-between;
}
.car_item__one {
display: flex;
align-items: center;
margin-bottom: 30rpx;
}
.car_item__two {
display: flex;
align-items: center;
justify-content: space-between;
.item__icon {
padding-right: 40rpx;
image {
width: 11rpx;
height: 18rpx;
}
}
}
.car_item__three {
margin-top: 40rpx;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #F88D28;
line-height: 36rpx;
text-indent: 2em;
padding: 30rpx;
box-sizing: border-box;
background: url(@/static/move-car/move-car-code6.png) no-repeat;
background-size: contain;
}
}
.moveCarMsg {
height: 454rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
border-radius: 20rpx;
padding: 32rpx 40rpx;
position: relative;
top: -56rpx;
.move-car__tips {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
line-height: 39rpx;
text-align: center;
}
.move-car__btn {
text-align: center;
width: 400rpx;
height: 76rpx;
border-radius: 8rpx;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 76rpx;
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;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
line-height: 42rpx;
text-align: center;
margin-bottom: 100rpx;
}
.move-car__more {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #F88D28;
line-height: 42rpx;
display: flex;
justify-content: space-between;
.center__shu {
image {
width: 3rpx;
height: 27rpx;
}
}
span {
padding-left: 20rpx;
image {
width: 11rpx;
height: 18rpx;
}
}
}
}
}
</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