wuliu_sy/components/index/detaila.vue

822 lines
17 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="dashboard-container">
<view class="content-top-con">
<view class="content-img" @click="returnlog">
<image src="@/static/images/xiangyou.png" mode=""></image>
</view>
<view class="">
订单信息
</view>
</view>
<view class="container-content">
<view class="container-content-left">
<view class="content-left-one">
<!-- <view ref="mapContainer" class="map-container"></view> -->
<!-- <map :latitude="latitude" :longitude="longitude" show-location class="map-container" scale='12'
:polyline="polyline" :markers='markers'><cover-image class="map_btn" @tap="getoption()"
src="@/static/images/DH.png">
</cover-image></map> -->
<a-map-walking :startPoint="startPoint" :endPoint="endPoint" @sbai='onshibai'
style="width: 100%;height: 265rpx;"></a-map-walking>
<view class="walking-img">
<image src="@/static/images/DH.png" mode="aspectFit" @click="getoption()"></image>
</view>
<view class="left1" v-if="lisobj.logistics">
<view class="leftdd"></view>
<view class="leftdd1">起点:{{lisobj.logistics.shop_address}}</view>
</view>
<view class="left1" v-if="lisobj.logistics">
<view class="leftdd2"></view>
<view class="leftdd1">终点:{{lisobj.logistics.receiver_address}}</view>
</view>
</view>
<view class="btn" @click="openCamera(lisobj.logistics)" v-if="lisobj.logistics">
<view class="btn1">
<image src="@/static/images/er.png" mode=""></image>
</view>
<view class="btn2"> 扫码取货</view>
</view>
</view>
<scroll-view scroll-y="true" style="height: 400rpx;overflow: hidden;">
<view class="">
<view class="container-content-right" v-if="lisobj.logistics">
<view class="content-right-two" v-if="lisobj.logistics">
<view class="two-lefta">
订单号信息:
</view>
<view class="two-leftb">
订单编号:{{lisobj.logistics.order_sn}}
</view>
<view class="two-leftb">
商户名称:{{lisobj.logistics.shop_name}}
</view>
<view class="two-leftb">
店铺地址:{{lisobj.logistics.shop_address}}
</view>
<view class="two-leftb">
联系电话:{{lisobj.logistics.shop_phone }}
</view>
</view>
<view class="content-one">
<view class="content-one-con">
<view style="margin-bottom: 10rpx;">物流信息:</view>
<view>用户名称:{{lisobj.logistics.receiver_name}}</view>
<view>联系方式:{{lisobj.logistics.receiver_phone}}</view>
<view>联系地址:{{lisobj.logistics.receiver_address}}</view>
<view>下单时间:{{lisobj.logistics.create_time}}</view>
</view>
</view>
</view>
<view class="container-content-right" v-if="lisobj.logistics">
<view class="content-one">
<view class="shop-content">
<view class="shop-content-a">
<view class="shop-content-a1">商品信息:</view>
</view>
<view class="shop-list">
<view class="shop" v-for="(items,j) in lisobj.product" :key="j">
<view style="display: flex;">
<view class="shop-img">
<image :src="items.goods_pic" mode="aspectFit"></image>
</view>
<view class="container-txt">
<text class=" centered-multi-line shop-txt">
{{ items.goods_name }}</text>
</view>
</view>
<view style="line-height: 34rpx;">X{{ items.product_num}}</view>
</view>
</view>
</view>
<view class="shop-botxt">
请详细核对订单信息 <text
style="margin-left: 50rpx;color: #0022C7;">共计{{ lisobj.product.length }}</text>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
import {
detail,
takeGoods
} from '@/api/oa.js'
const ttAMapNavi = uni.requireNativePlugin('TT-AMapNavi');
import AMapWalking from "@/components/a-map-walking.vue";
export default {
props: {
type: ''
},
components: {
AMapWalking
},
data() {
return {
lisobj: [],
page_no: 1,
page_size: 1,
keyword: '',
latitude: 39.90469,
longitude: 116.40717,
// 标记点
// markers: [ // 商家
// {
// id: 1,
// latitude: undefined,
// longitude: undefined,
// width: 30,
// height: 30,
// iconPath: '../../static/img/logistics/SJ.png', //显示的图标
// },
// // 骑手
// {
// id: 2,
// latitude: undefined,
// longitude: undefined,
// width: 30,
// height: 30,
// iconPath: '../../static/img/logistics/QS.png', //显示的图标
// }
// ],
startPoint: [],
endPoint: [],
// // 路线数据
// polyline: [{
// points: [],
// color: "#FF0000DD",
// width: 3
// }]
}
},
mounted() {
this.getlist(this.type)
this.getLocation()
// this.$refs.globalPopup.open()
},
methods: {
//返回
returnlog() {
this.$emit('outfun', '1')
},
mapUpdated(e) {
console.log('Map updated:', e);
// 在地图更新后可以根据用户选择的起点和终点调用地图服务的规划路线接口获取路线数据并更新polyline和markers
},
//监听失败
onshibai(e) {
if (e == 1) {
uni.showToast({
title: '路线规划失败',
icon: none
})
}
},
//导航
getoption() {
// 传入高德地图key
ttAMapNavi.initParams({
androidKey: 'bbf571cadf2782f69f0eb373d516b4e0',
iOSKey: ''
});
// 开始导航,传入的坐标均为高德坐标系
ttAMapNavi.startNavi({
// 起点(只支持传入一个),选填,不传使用当前位置
startPoints: [{
name: '起点名称',
latitude: this.startPoint[1],
longitude: this.startPoint[0]
}],
// 终点(只支持传入一个)
endPoints: [{
name: '终点名称',
latitude: this.endPoint[1],
longitude: this.endPoint[0]
}],
// 途径点(最多支持三个),选填
wayPoints: [],
// 驾车路径规划策略
drivingStrategy: 10,
// 是否直接进入导航界面(跳过路径规划页面)
naviDirectly: true,
// 导航组件的主题皮肤类型
themeType: 1
});
// uni.navigateTo({
// url: '/pages/submap/index?task_id=' + this.type
// })
// console.log(this.lisobj.logistics.shop_lat, this.lisobj.logistics.shop_long)
// if (this.lisobj.logistics.shop_lat && this.lisobj.logistics.shop_long) {
// uni.openLocation({
// latitude: Number(this.lisobj.logistics.shop_lat),
// // 传入你要去的经度
// longitude: Number(this.lisobj.logistics.shop_long),
// address: this.lisobj.logistics.receiver_address,
// success: function() {
// console.log('success');
// }
// })
// }
// uni.openLocation({
// latitude: Number(this.lisobj.logistics.shop_lat),
// // 传入你要去的经度
// longitude: Number(this.lisobj.logistics.shop_long),
// address: this.lisobj.logistics.receiver_address,
// success: function() {
// console.log('success');
// }
// })
// let that = this;
// uni.getSystemInfo({
// success(e) {
// if (e.platform === 'ios') {
// 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[that.markers.length-1].latitude}&dlon=${that.markers[that.markers.length-1].longitude}&dname=${that.lisobj.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);
// //将功能Scheme以URI的方式传入data
// 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('启动出错')
// }
// });
// }
// }
// })
},
//获取定位
async getLocation() {
uni.getLocation({
type: 'gcj02',
timeout: '1000',
success: (res) => {
this.latitude = res.latitude
this.longitude = res.longitude
// this.markers.unshift({
// latitude: Number(res.latitude),
// longitude: Number(res.longitude),
// iconPath: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/zhongdian.png', // 起点图标路径
// width: 30,
// height: 30
// })
this.startPoint = [Number(res.longitude), Number(res.latitude)]
// this.markers[0].latitude = Number(res.latitude)
// this.markers[0].longitude = Number(res.longitude)
// this.polyline[0].points.unshift({
// latitude: Number(res.latitude),
// longitude: Number(res.longitude),
// })
},
fail: (res) => {
console.log(res)
}
});
},
//提取商品
getDocumentListApi(item, oredr) {
let data = {
id: item.id,
order_id: item.order_id,
order_sn: oredr
}
takeGoods(data).then(res => {
// Toast(res.msg)
if (res.code == 1) {
const subNVue = uni.getSubNVueById('concat'); // 通过 id 获取 nvue 子窗体
subNVue.show('none', 1000); // 打开 nvue 子窗体
setTimeout(() => {
this.$emit('outfun', '1')
}, 1500)
}
})
},
// 打开相机
openCamera(item) {
console.log(item)
uni.scanCode({
success: (res) => {
this.getDocumentListApi(item, res.result)
}
});
},
resultsaoma() {
},
async getlist(id) {
detail({
id: id
}).then(res => {
if (res.code == 1) {
this.lisobj = res.data
if (res.data.logistics.shop_lat || res.data.logistics.shop_long) {
// this.markers[1].latitude = Number(res.data.logistics.shop_lat)
// this.markers[1].longitude = Number(res.data.logistics.shop_long)
// this.polyline[0].points.push({
// latitude: res.data.logistics.shop_lat,
// longitude: res.data.logistics.shop_long,
// })
this.endPoint = [Number(res.data.logistics.shop_long), Number(res.data.logistics
.shop_lat)]
}
}
})
}
}
}
</script>
<style lang="scss" scoped>
.content-top-con {
display: flex;
height: 35rpx;
line-height: 35rpx;
width: 100%;
background: #FFFFFF;
border-radius: 9px 9px 9px 9px;
font-size: 13rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
.content-img {
width: 22rpx;
height: 22rpx;
margin: auto 0;
margin-right: 5rpx;
image {
width: 100%;
height: 100%;
}
}
}
.popup-content {
width: 308rpx;
height: 220rpx;
/* 根据需要调整弹窗内容的宽度 */
background-color: #fff;
/* 设置弹窗内容的背景色 */
padding-top: 30rpx;
/* 根据需要设置内边距 */
border-radius: 9rpx 9rpx;
}
.popup-content-a {
display: flex;
flex-direction: column;
align-items: center;
/* 水平居中 */
}
.popup-item {
font-size: 13rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #0022C7;
margin-bottom: 10rpx;
/* 可根据需要调整项之间的间距 */
}
.container-top {
display: flex;
justify-content: space-between;
background-color: #fff;
border-radius: 24rpx 24rpx;
.serch {
width: 59rpx;
height: 31rpx;
line-height: 31rpx;
border-radius: 15rpx 15rpx;
opacity: 1;
border: 1px solid #0022c7;
text-align: center;
font-size: 12rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #0022c7;
}
}
.container-content {
display: flex;
justify-content: space-between;
position: relative;
}
.container-content-left {
position: relative;
}
.content-left-one {
width: 276rpx;
height: 330rpx;
background: #ffffff;
box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
border-radius: 15rpx 15rpx 15rpx 15rpx;
margin-top: 25px;
margin-bottom: 10rpx;
position: relative;
.walking-img {
width: 60rpx;
height: 60rpx;
position: absolute;
bottom: 80rpx;
right: 20rpx;
image {
width: 60rpx;
height: 60rpx;
}
}
}
.left1 {
display: flex;
font-size: 12rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
.leftdd {
width: 12rpx;
height: 12rpx;
background: #40bc5e;
border-radius: 50%;
opacity: 1;
margin-left: 10rpx;
margin-right: 10rpx;
margin-top: 5rpx;
}
.leftdd2 {
width: 12rpx;
height: 12rpx;
background: #fe7d32;
border-radius: 50%;
opacity: 1;
margin-left: 10rpx;
margin-right: 10rpx;
margin-top: 5rpx;
}
}
.map-container {
width: 100%;
height: 254rpx;
border-radius: 15rpx 15rpx 0 0;
}
.content-right-two {
width: 256rpx;
background: #ff7c32;
border-radius: 12rpx 12rpx;
margin-left: 20rpx;
padding-top: 10rpx;
padding-bottom: 10rpx;
position: relative;
.two-lefta {
padding-left: 18rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
font-size: 12rpx;
margin-bottom: 10rpx;
}
.two-leftb {
padding-left: 18rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
font-size: 12rpx;
}
}
.container-content-right {
margin-top: 20px;
}
.map_btn {
width: 50px;
height: 50px;
position: absolute;
bottom: 0px;
right: 0;
z-index: 9999999;
}
.content-one {
margin-left: 20rpx;
width: 256rpx;
background: #ffffff;
box-shadow: 0px 3px 6px 1px rgba(51, 51, 51, 0.2);
border-radius: 12px 12px 12px 12px;
opacity: 1;
margin-top: 10rpx;
}
.content-one-title {
height: 53rpx;
line-height: 53rpx;
padding-left: 20rpx;
background: #0022c7;
border-radius: 12px 12px 0px 0px;
font-size: 13rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
}
.content-one-con {
border-radius: 12px 12px 12px 12px;
background: #46BE61;
padding-left: 20rpx;
padding-right: 20rpx;
padding-bottom: 10rpx;
padding-top: 10rpx;
font-size: 12rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
view {}
}
.shop-content {
padding-left: 20rpx;
padding-right: 20rpx;
padding-top: 10rpx;
background-color: #40bc5e;
}
.shop-content-a {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.shop-content-a1 {
font-size: 12rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #fff;
}
.shop-content-a2 {
font-size: 12rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #0022C7;
}
.shop-list {
padding-bottom: 10rpx;
padding-top: 10rpx;
}
.shop {
display: flex;
justify-content: space-between;
font-size: 10rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #fff;
}
.shop-img {
width: 34rpx;
height: 34rpx;
border-radius: 6px 6px 6px 6px;
image {
width: 34rpx;
height: 34rpx;
border-radius: 6px 6px 6px 6px;
}
}
.container-txt {
margin-left: 10rpx;
width: 130rpx;
/* 设置容器高度 */
display: flex;
justify-content: center;
/* 水平居中 */
align-items: center;
/* 垂直居中 */
}
.centered-multi-line {
text-align: left;
/* 文本水平居中 */
width: 100%;
/* 宽度占满父容器 */
}
.shop-txt {
display: inline-block;
/* 转换为行内块元素 */
white-space: normal;
/* 允许自动换行 */
word-break: break-all;
/* 单词内断行 */
}
.shop-botxt {
font-size: 12rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #737373;
padding-left: 18rpx;
padding-top: 5rpx;
padding-bottom: 5rpx;
}
.btn {
width: 276rpx;
height: 44rpx;
line-height: 44rpx;
background: #0022c7;
border-radius: 23rpx 23rpx;
display: flex;
}
.btn1 image {
width: 23rpx;
height: 23rpx;
}
.btn2 {
font-size: 12rpx;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #ffffff;
}
.btn1 {
width: 23rpx;
height: 23rpx;
margin-left: 100rpx;
margin-top: 0rpx;
margin-right: 10rpx;
}
</style>