页面修改

This commit is contained in:
zmj 2023-11-16 14:02:52 +08:00
parent 41d647bbc2
commit e23f57f911
2 changed files with 437 additions and 474 deletions

View File

@ -1,516 +1,484 @@
<template>
<view>
<view v-if='showLoading'>
<u-loading-page :loading="showLoading"></u-loading-page>
</view>
<view v-else>
<view class="content">
<!-- <u-toast ref="uToast"></u-toast> -->
<view class="map">
<map :class="mapClass" id="map" @markertap='mapFun' :enable-zoom="true" :polyline="polyline"
:markers='markers' :scale="scale" style="width:100%;height: 70%;background-color: red;"
:latitude="markers[0].latitude" :enable-scroll="true" :longitude="markers[0].longitude">
<cover-view class="cover" v-if="showToast">
</cover-view>
<cover-image v-else class="map_btn" @tap="test" src="../../static/img/logistics/DH.png">
</cover-image>
<template>
<view>
<view v-if='showLoading'>
<u-loading-page :loading="showLoading"></u-loading-page>
</view>
<view v-else>
<view class="content">
<u-toast ref="uToast"></u-toast>
<view class="map">
<map :class="mapClass" id="map" @markertap='mapFun' :enable-zoom="true" :polyline="polyline"
:markers='markers' :scale="scale" style="width:100%;height: 70%;"
:latitude="markers[0].latitude" :enable-scroll="true" :longitude="markers[0].longitude">
<cover-image class="map_btn" @tap="test" src="../../static/img/logistics/DH.png">
</cover-image>
</map>
<view class="map_address">
<view style="display: flex;">
<view style="flex-shrink: 0;margin-right: 16rpx;"><text class="cir"
style="background-color: #40BC5E;"></text> 起点:</view>
<view>{{nowAddress}}</view>
</view>
<view style="display: flex;">
<view style="flex-shrink: 0;margin-right: 16rpx;"><text class="cir"
style="background-color: #FF7C32;"></text>终点:</view>
<view>{{goodsDetil.logistics.shop_address}}</view>
</view>
</view>
</view>
</map>
<view class="map_address">
<view style="display: flex;">
<view style="flex-shrink: 0;margin-right: 16rpx;"><text class="cir"
style="background-color: #40BC5E;"></text> 起点:</view>
<view>{{nowAddress}}</view>
</view>
<view style="display: flex;">
<view style="flex-shrink: 0;margin-right: 16rpx;"><text class="cir"
style="background-color: #FF7C32;"></text>终点:</view>
<view>{{goodsDetil.logistics.shop_address}}</view>
</view>
<view class="order_info">
<view class="top">
<view>
订单号信息:
</view>
<view>订单编号:&nbsp;&nbsp;{{goodsDetil.logistics.order_sn}}</view>
<view>
商户名称:&nbsp;&nbsp; {{goodsDetil.logistics.shop_name}}
</view>
<view @click.stop="callFn(goodsDetil.logistics.shop_phone)">
联系电话:&nbsp;&nbsp; <u-icon style="display: inline-block;margin-left: 5rpx;" name="phone"
color="#fff" size="22"></u-icon>{{goodsDetil.logistics.shop_phone}}
</view>
<view>
店铺地址:&nbsp;&nbsp;{{goodsDetil.logistics.shop_address}}
</view>
<view style="margin-top: 10px;">
订单备注:&nbsp;&nbsp;{{goodsDetil.logistics.mark}}
</view>
</view>
<view class="order_info">
<view class="top">
<view>
订单号信息:
</view>
<view>订单编号:&nbsp;&nbsp;{{goodsDetil.logistics.order_sn}}</view>
<view>
商户名称:&nbsp;&nbsp; {{goodsDetil.logistics.shop_name}}
</view>
<view @click.stop="callFn(goodsDetil.logistics.shop_phone)">
联系电话:&nbsp;&nbsp; <u-icon style="display: inline-block;margin-left: 5rpx;" name="phone"
color="#fff" size="22"></u-icon>{{goodsDetil.logistics.shop_phone}}
</view>
<view>
店铺地址:&nbsp;&nbsp;{{goodsDetil.logistics.shop_address}}
</view>
<view style="margin-top: 10px;">
订单备注:&nbsp;&nbsp;{{goodsDetil.logistics.mark}}
</view>
</view>
<view class="mark">
请详细核对订单信息
</view>
<view class="mark">
请详细核对订单信息
</view>
<view class="order_info" style="background-color: #47BE62;">
<view class="top">
<view>
物流信息:
</view>
<view>用户名称:&nbsp;&nbsp;{{fuzzyName( goodsDetil.logistics.receiver_name)}}</view>
<view>
通知时间:&nbsp;&nbsp;{{goodsDetil.logistics.create_time}}
</view>
<view class="pro_list">
</view>
<view class="goods">
<text>
商品信息
</text>
<view class="goods-tit" style="align-items: center;"
v-for="(item,index) in goodsDetil.product" :key="index">
<u--image style="flex: 2;" radius='10' :showLoading="true" :src="item.goods_pic"
width="100rpx" height="100rpx"></u--image>
<text style="flex: 6;">{{item.goods_name}}</text>
<view class="order_info" style="background-color: #47BE62;">
<view class="top">
<view>
物流信息:
</view>
<view>用户名称:&nbsp;&nbsp;{{fuzzyName( goodsDetil.logistics.receiver_name)}}</view>
<view>
通知时间:&nbsp;&nbsp;{{goodsDetil.logistics.create_time}}
</view>
<view class="pro_list">
<!-- <text style="flex: 1;">X{{item.product_num}}{{item.goods_unit}}</text> -->
<text style="flex: 1;">X{{item.product_num}}</text>
</view>
<view class="goods">
<text>
商品信息
</text>
<view class="goods-tit" style="align-items: center;"
v-for="(item,index) in goodsDetil.product" :key="index">
<u--image style="flex: 2;" radius='10' :showLoading="true" :src="item.goods_pic"
width="100rpx" height="100rpx" @click="click"></u--image>
<text style="flex: 6;">{{item.goods_name}}</text>
<!-- <text style="flex: 1;">X{{item.product_num}}{{item.goods_unit}}</text> -->
<text style="flex: 1;">X{{item.product_num}}</text>
</view>
</view>
</view>
<view class="mark" style="display: flex; justify-content: space-between;">
<text>请详细核对订单信息</text>
<text style="color: #0122C7;">共计{{goodsDetil.product_count}}件商品</text>
</view>
</view>
<view class="">
</view>
<view class="mark" style="display: flex; justify-content: space-between;">
<text>请详细核对订单信息</text>
<text style="color: #0122C7;">共计{{goodsDetil.product_count}}件商品</text>
</view>
</view>
<view class="">
<view style="margin-top: 200rpx;height: 1px;">
<!-- 565 -->
</view>
<view class="btn" v-if="!is_captain">
<u-button @click="qrqodeFn" type="primary" style="background-color: #0122C7;border: 0;">
<u-icon name="scan" color="white" size="30" style="margin-right: 10rpx;"></u-icon>
扫码取货</u-button>
</view>
</view>
<view style="margin-top: 200rpx;height: 1px;">
<!-- 565 -->
</view>
<view class="btn" v-if="!is_captain">
<u-button @click="qrqodeFn" type="primary" style="background-color: #0122C7;border: 0;">
<u-icon name="scan" color="white" size="30" style="margin-right: 10rpx;"></u-icon>
扫码取货</u-button>
</view>
</view>
<!-- 组件 -->
<u-overlay :show="showToast" @click="showToast = false">
<!-- <u-overlay :show="false" @click="showToast = false"> -->
<view class="warp">
<view class="rect">
<view class="cont">
骑手取货完成
</view>
</view>
</view>
</u-overlay>
</view>
</template>
<script>
import {
getDetil
} from "@/api/logistics.js"
import {
takeGoods
} from "@/api/logistics.js"
import {
Toast
} from "../../libs/uniApi";
export default {
data() {
return {
showToast: false,
is_captain: 0,
mapClass: 'custom-map',
showLoading: true,
showPop: false,
goodsDetil: undefined,
scale: 17,
nowAddress: "无",
markers: [
//
{
id: 1,
latitude: undefined,
longitude: undefined,
iconPath: '../../static/img/logistics/SJ.png', //
},
//
{
id: 2,
latitude: undefined,
longitude: undefined,
iconPath: '../../static/img/logistics/QS.png', //
}
],
polyline: []
}
</view>
</template>
<script>
import {
getDetil
} from "@/api/logistics.js"
import {
takeGoods
} from "@/api/logistics.js"
import {
Toast
} from "../../libs/uniApi";
export default {
data() {
return {
is_captain: 0,
mapClass: 'custom-map',
showLoading: true,
showPop: false,
goodsDetil: undefined,
scale: 17,
nowAddress: "无",
markers: [
//
{
id: 1,
latitude: undefined,
longitude: undefined,
iconPath: '../../static/img/logistics/SJ.png', //
},
//
{
id: 2,
latitude: undefined,
longitude: undefined,
iconPath: '../../static/img/logistics/QS.png', //
}
],
polyline: []
}
},
methods: {
fuzzyName(name) {
let length = name.length;
let fuzzyChars = "*".repeat(length - 1);
return name[0] + fuzzyChars;
},
methods: {
fuzzyName(name) {
let length = name.length;
let fuzzyChars = "*".repeat(length - 1);
return name[0] + fuzzyChars;
},
callFn(num) {
uni.makePhoneCall({
phoneNumber: num
});
},
//
//
locationFn() {
let that = this
//#ifdef APP
uni.getLocation({
type: 'gcj02',
geocode: true,
isHighAccuracy: true,
success: function async (res) {
that.nowAddress = res.address.city + res.address.district + res.address.street + res
.address.streetNum + res.address.poiName
callFn(num) {
uni.makePhoneCall({
phoneNumber: num
});
},
//
//
locationFn() {
let that = this
//#ifdef APP
uni.getLocation({
type: 'gcj02',
geocode: true,
isHighAccuracy: true,
success: function async (res) {
that.nowAddress = res.address.city + res.address.district + res.address.street + res
.address.streetNum + res.address.poiName
that.markers[1].latitude = res.latitude
that.markers[1].longitude = res.longitude
that.getDriverLine()
}
});
//#endif
},
that.markers[1].latitude = res.latitude
that.markers[1].longitude = res.longitude
that.getDriverLine()
}
});
//#endif
},
//
test() {
if (this.is_captain) return;
let that = this;
uni.getSystemInfo({
success(e) {
if (e.platform === 'ios') {
// Toast('');
// iOSmanifest
// manifest.jsonapp-plus->distribute->apple->urlschemewhitelist
//urlschemewhitelist:["iosamap","baidumap"]
plus.nativeUI.actionSheet({
title: "选择地图应用",
cancel: "取消",
buttons: [{
title: "高德地图"
}]
}, function(e) {
if (e.index != 1) return;
try {
let url =
`iosamap://viewMap?sourceApplication=applicationName&poiname=${that.goodsDetil.logistics.shop_name}&lat=${that.markers[0].latitude}&lon=${that.markers[0].longitude}&dev=0`;
if (url != "") {
url = encodeURI(url);
plus.runtime.openURL(url, function(e) {
plus.nativeUI.alert("您的手机没有安装高德地图");
});
}
} catch (e) {
console.log(e);
Toast('暂不支持唤起地图')
}
})
} else {
plus.nativeUI.actionSheet({
title: "选择地图应用",
cancel: "取消",
buttons: [{
title: "高德地图"
}]
}, function(e) {
if (e.index != 1) return;
try {
var packageName = 'com.autonavi.minimap';
var main = plus.android.runtimeMainActivity();
var packageManager = main.getPackageManager();
var PackageManager = plus.android.importClass(packageManager)
var packageInfo = packageManager.getPackageInfo(packageName,
PackageManager.GET_ACTIVITIES);
if (packageInfo) {
var Uri = plus.android.importClass("android.net.Uri");
var url =
`amapuri://route/plan?sourceApplication=maxuslife+
&sid=A&slat=36.702558&slon=116.876678&sname=我的位置&did=B&dlat=${that.markers[0].latitude}&dlon=${that.markers[0].longitude}&dname=${that.goodsDetil.logistics.shop_name}&dev=0&t=0`;
var Intent = plus.android.importClass('android.content.Intent');
var intent = new Intent();
intent.setAction(Intent.ACTION_VIEW);
intent.addCategory(Intent.CATEGORY_DEFAULT);
var uri = Uri.parse(url);
//SchemeURIdata
intent.setData(uri);
intent.setPackage("com.autonavi.minimap");
var main = plus.android.runtimeMainActivity();
main.startActivity(intent);
} else {
// alert('' + packageName + '')
uni.showToast({
title: `您的手机没有安装高德地图`,
icon: 'none'
})
}
console.log("唤醒高德线路规划")
} catch (e) {
console.log(e);
Toast('启动出错')
}
});
}
}
})
},
mapFun() {
uni.openLocation({
latitude: Number(this.goodsDetil.logistics.shop_lat),
longitude: Number(this.goodsDetil.logistics.shop_long),
address: this.goodsDetil.logistics.shop_address,
name: this.goodsDetil.logistics.shop_name,
scale: 15,
});
},
getDriverLine() {
const that = this;
const key = "997c9a3d88154fa78f4d28bebc1dd84f";
const origin = `${this.markers[1].longitude},${this.markers[1].latitude}`;
const destination = `${this.markers[0].longitude},${this.markers[0].latitude}`;
uni.request({
// url: `https://restapi.amap.com/v3/direction/walking?key=${key}&origin=105.43639400000002,28.908854&destination=105.439304,28.908447`,
url: `https:restapi.amap.com/v4/direction/bicycling?key=${key}&origin=${origin}&destination=${destination}`,
success: (res) => {
const data = res.data.data;
var points = [];
if (data.paths && data.paths[0] && data.paths[0].steps) {
var steps = data.paths[0].steps;
for (var i = 0; i < steps.length; i++) {
//points
var poLen = steps[i].polyline.split(";");
for (var j = 0; j < poLen.length; j++) {
points.push({
longitude: parseFloat(poLen[j].split(",")[0]),
latitude: parseFloat(poLen[j].split(",")[1]),
//
test() {
if (this.is_captain) return;
let that = this;
uni.getSystemInfo({
success(e) {
if (e.platform === 'ios') {
// Toast('');
// iOSmanifest
// manifest.jsonapp-plus->distribute->apple->urlschemewhitelist
//urlschemewhitelist:["iosamap","baidumap"]
plus.nativeUI.actionSheet({
title: "选择地图应用",
cancel: "取消",
buttons: [{
title: "高德地图"
}]
}, function(e) {
if (e.index != 1) return;
try {
let url =
`iosamap://viewMap?sourceApplication=applicationName&poiname=${that.goodsDetil.logistics.shop_name}&lat=${that.markers[0].latitude}&lon=${that.markers[0].longitude}&dev=0`;
if (url != "") {
url = encodeURI(url);
plus.runtime.openURL(url, function(e) {
plus.nativeUI.alert("您的手机没有安装高德地图");
});
}
} catch (e) {
console.log(e);
Toast('暂不支持唤起地图')
}
})
} else {
plus.nativeUI.actionSheet({
title: "选择地图应用",
cancel: "取消",
buttons: [{
title: "高德地图"
}]
}, function(e) {
if (e.index != 1) return;
try {
var packageName = 'com.autonavi.minimap';
var main = plus.android.runtimeMainActivity();
var packageManager = main.getPackageManager();
var PackageManager = plus.android.importClass(packageManager)
var packageInfo = packageManager.getPackageInfo(packageName,
PackageManager.GET_ACTIVITIES);
if (packageInfo) {
var Uri = plus.android.importClass("android.net.Uri");
var url =
`amapuri://route/plan?sourceApplication=maxuslife+
&sid=A&slat=36.702558&slon=116.876678&sname=我的位置&did=B&dlat=${that.markers[0].latitude}&dlon=${that.markers[0].longitude}&dname=${that.goodsDetil.logistics.shop_name}&dev=0&t=0`;
var Intent = plus.android.importClass('android.content.Intent');
var intent = new Intent();
intent.setAction(Intent.ACTION_VIEW);
intent.addCategory(Intent.CATEGORY_DEFAULT);
var uri = Uri.parse(url);
//SchemeURIdata
intent.setData(uri);
intent.setPackage("com.autonavi.minimap");
var main = plus.android.runtimeMainActivity();
main.startActivity(intent);
} else {
// alert('' + packageName + '')
uni.showToast({
title: `您的手机没有安装高德地图`,
icon: 'none'
})
}
console.log("唤醒高德线路规划")
} catch (e) {
console.log(e);
Toast('启动出错')
}
that.runningRoute = data.paths[0].steps[0].instruction;
});
}
that.polyline = [{
points: points,
color: "#0091ff",
dottedLine: true,
width: 30,
}, ];
},
fail: function(res) {
console.log("获取路线失败", res);
},
});
},
qrqodeFn() {
this.showToast = true
return
let that = this
uni.scanCode({
onlyFromCamera: true,
success: function(res) {
that.takeGood(res.result)
}
});
},
// {}
takeGood(sn) {
takeGoods({
logistics_id: this.goodsDetil.logistics.id,
order_id: this.goodsDetil.logistics.order_id,
order_sn: sn
}).then((res, err) => {
this.showToast = true
setTimeout(() => {
this.showToast = false
uni.navigateBack()
}, 1000)
}).catch(err => {
Toast(err.msg)
// console.log(err, 65656)
})
},
},
onLoad(options) {
// console.log()
this.is_captain = JSON.parse(uni.getStorageSync("USER_INFO")).is_captain
getDetil({
logistics_id: options.id
}).then(res => {
this.goodsDetil = res.data
this.markers[0].latitude = res.data.logistics.shop_lat
this.markers[0].longitude = res.data.logistics.shop_long
this.locationFn()
setTimeout(() => {
this.showLoading = false
}, 500)
}
})
},
}
</script>
showToast() {
this.$refs.uToast.show({
type: 'success',
title: '成功主题(带图标)',
message: "操作成功",
iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
})
},
mapFun() {
uni.openLocation({
latitude: Number(this.goodsDetil.logistics.shop_lat),
longitude: Number(this.goodsDetil.logistics.shop_long),
address: this.goodsDetil.logistics.shop_address,
name: this.goodsDetil.logistics.shop_name,
scale: 15,
});
},
showToast() {
this.$refs.uToast.show({
type: 'success',
title: '成功主题(带图标)',
message: "操作成功",
iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
})
},
getDriverLine() {
const that = this;
const key = "997c9a3d88154fa78f4d28bebc1dd84f";
<style lang='scss' scoped>
.custom-map /deep/ .polyline {
stroke-width: 20px;
}
const origin = `${this.markers[1].longitude},${this.markers[1].latitude}`;
.content {
padding: 2vh 3vw;
background-color: #F6F7FC;
height: 100vh;
box-sizing: border-box;
}
const destination = `${this.markers[0].longitude},${this.markers[0].latitude}`;
uni.request({
// url: `https://restapi.amap.com/v3/direction/walking?key=${key}&origin=105.43639400000002,28.908854&destination=105.439304,28.908447`,
url: `https:restapi.amap.com/v4/direction/bicycling?key=${key}&origin=${origin}&destination=${destination}`,
success: (res) => {
const data = res.data.data;
var points = [];
if (data.paths && data.paths[0] && data.paths[0].steps) {
var steps = data.paths[0].steps;
for (var i = 0; i < steps.length; i++) {
//points
var poLen = steps[i].polyline.split(";");
for (var j = 0; j < poLen.length; j++) {
points.push({
longitude: parseFloat(poLen[j].split(",")[0]),
latitude: parseFloat(poLen[j].split(",")[1]),
});
}
}
.map {
height: 40vh;
border-radius: 2vw;
overflow: hidden;
that.runningRoute = data.paths[0].steps[0].instruction;
}
}
that.polyline = [{
points: points,
color: "#0091ff",
dottedLine: true,
width: 30,
.map_address {
background-color: white;
padding: 20rpx 10rpx;
.cir {
display: inline-block;
width: 2vw;
height: 4vw;
border-radius: 2vw;
margin: 0 20rpx;
}
}
.map_btn {
width: 50px;
height: 50px;
position: absolute;
bottom: 0px;
right: 0;
z-index: 9999999;
}
}, ];
},
fail: function(res) {
console.log("获取路线失败", res);
},
});
},
.order_info {
border: none;
background-color: #FF7C32;
border-radius: 2vw;
overflow: hidden;
margin-top: 50rpx;
margin-bottom: 30rpx;
color: white;
.top {
padding: 1vw 3vw;
view {
margin: 10rpx 0;
}
}
.mark {
background-color: white;
color: #A8A8A8;
padding: 10rpx 20rpx;
}
.pro_list {
display: flex;
text {
flex: 2
}
.goods {
flex: 8;
margin: 0;
.goods-tit {
margin: 0;
display: flex;
justify-content: space-around;
qrqodeFn() {
let that = this
console.log(6666)
uni.scanCode({
onlyFromCamera: true,
success: function(res) {
that.takeGood(res.result)
}
});
},
// {}
takeGood(sn) {
console.log(takeGoods)
takeGoods({
logistics_id: this.goodsDetil.logistics.id,
order_id: this.goodsDetil.logistics.order_id,
order_sn: sn
}).then((res, err) => {
this.showToast()
setTimeout(() => {
uni.navigateBack()
}, 1000)
}).catch(err => {
Toast(err.msg)
// console.log(err, 65656)
})
},
},
onLoad(options) {
// console.log()
this.is_captain = JSON.parse(uni.getStorageSync("USER_INFO")).is_captain
getDetil({
logistics_id: options.id
}).then(res => {
this.goodsDetil = res.data
this.markers[0].latitude = res.data.logistics.shop_lat
this.markers[0].longitude = res.data.logistics.shop_long
this.locationFn()
setTimeout(() => {
this.showLoading = false
}, 500)
})
},
}
</script>
<style lang='scss' scoped>
.custom-map /deep/ .polyline {
stroke-width: 20px;
}
.content {
padding: 2vh 3vw;
background-color: #F6F7FC;
height: 100vh;
box-sizing: border-box;
}
.map {
height: 40vh;
border-radius: 2vw;
overflow: hidden;
}
.map_address {
background-color: white;
padding: 20rpx 10rpx;
.cir {
display: inline-block;
width: 2vw;
height: 4vw;
border-radius: 2vw;
margin: 0 20rpx;
}
}
.map_btn {
width: 50px;
height: 50px;
position: absolute;
bottom: 0px;
right: 0;
z-index: 9999999;
}
.order_info {
border: none;
background-color: #FF7C32;
border-radius: 2vw;
overflow: hidden;
margin-top: 50rpx;
margin-bottom: 30rpx;
color: white;
.top {
padding: 1vw 3vw;
view {
margin: 10rpx 0;
}
}
.mark {
background-color: white;
color: #A8A8A8;
padding: 10rpx 20rpx;
}
.pro_list {
display: flex;
text {
flex: 2
}
.goods {
flex: 8;
margin: 0;
.goods-tit {
margin: 0;
display: flex;
justify-content: space-around;
}
}
}
.btn {
position: fixed;
bottom: 20rpx;
width: 90vw;
left: 50%;
transform: translateX(-50%);
}
.rect {
width: 455.61rpx;
height: 210.28rpx;
background-color: white;
border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.cont {
color: #0022C7;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 35.05rpx;
}
}
.cover {
/* width: 100rpx;
height: 100rpx;
background-color: red; */
z-index: 999999;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
}
</style>
}
.btn {
position: fixed;
bottom: 20rpx;
width: 90vw;
left: 50%;
transform: translateX(-50%);
}
</style>

View File

@ -32,9 +32,7 @@
<u--input style="border: 1px solid #CCCCCC;" :readonly='isDisabled' placeholder="请输入金额"
type='number' border="surround" v-model="amount"></u--input>
</view>
</view>
<view class="" v-if="!file">
<lsjUpload ref="lsjUpload" childId="upload1" :size="10" :option="fileOption" height="200rpx"
style="margin-top: 28rpx;" :debug="false" :formats="'png,jpg,jpeg,pdf,webp'" :multiple="false"
@ -139,10 +137,7 @@
uni.navigateTo({
url: `/subpkg/pdfView/pdfView?url=${fileSrc}`
})
}
},
async submitFn() {
if (!this.amount) return Toast("请输入金额")