mkm/OfficeApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

第二版页面样式修改

Browse Source
This commit is contained in:
THK3121 2023-08-14 18:21:45 +08:00
parent 684fe485e2
commit c63701b39f
9 changed files with 845 additions and 553 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
components/logistiComptent/logistiCard/logistiBriefCard.vue
View File

@ -1,20 +1,38 @@
<template>
<view class="card" @click="goDetil(goodsInfo.id)">
<u-button type="primary" class="custom-style" style="background-color: #34A853;"
v-if='goodsInfo.status==0'>待取货</u-button>
<u-button type="primary" class="custom-style" v-if='goodsInfo.status==1'>待送货</u-button>
<view v-if="goodsInfo.status==0">
<p>{{goodsInfo.shop_name}}</p>
<view class="address">地址:&nbsp;&nbsp;{{goodsInfo.shop_address}}</view>
<view class="date">日期:&nbsp;&nbsp;{{goodsInfo.create_time}}</view>
<view class="tit">
<view v-if="goodsInfo.status==0">取货点:&nbsp;&nbsp;{{goodsInfo.shop_name}}</view>
<view v-else>收货人:&nbsp;&nbsp;{{ fuzzyName(goodsInfo.user_name) }}</view>
</view>
<view v-if="goodsInfo.status==1">
<p>{{goodsInfo.user_name}}</p>
<view class="address">地址:&nbsp;&nbsp;{{goodsInfo.user_address}}</view>
<!-- <view class="date">日期:&nbsp;&nbsp;{{goodsInfo.create_time}}</view> -->
<view class="content">
<view v-if="goodsInfo.status==0">
<view class="address">店主姓名:&nbsp;&nbsp;{{goodsInfo.shop_user}}</view>
<view @click.stop="callFn(goodsInfo.shop_phone)" class="address">
联系电话:&nbsp;&nbsp; <u-icon style="display: inline-block;margin-left: 5rpx;" name="phone"
color="#2979ff" size="22"></u-icon>
{{goodsInfo.shop_phone}}
</view>
<view class="address">取货地址:&nbsp;&nbsp;{{goodsInfo.shop_address}}</view>
<view class="address">通知日期:&nbsp;&nbsp;{{goodsInfo.create_time}}</view>
</view>
<view v-if="goodsInfo.status==1">
<view class="address" @click.stop="callFn(goodsInfo.user_phone)">
联系电话:&nbsp;&nbsp;<u-icon style="display: inline-block;margin-left: 5rpx;" name="phone"
color="#FF7C32" size="22"></u-icon>{{goodsInfo.user_phone}}</view>
<view class="address">收货地址:&nbsp;&nbsp;{{goodsInfo.user_address}}</view>
<view class="address">通知日期:&nbsp;&nbsp;{{goodsInfo.qh_time}}</view>
</view>
</view>
<view class="qh_btn" v-if='goodsInfo.status==0'>
<u-button type="primary" class="custom-style" style="background-color: #0122C7;border: 0;">
<u-icon name="scan" color="white" size="25" style="margin-right: 10rpx;"></u-icon>
待取货/点击查看</u-button>
</view>
<view class="" v-if='goodsInfo.status==1'>
<u-button type="primary" style="background-color: #FF7C32; border: 0;"><u-icon name="car-fill" color="white"
size="25" style="margin-right: 10rpx;"></u-icon> 待配送/点击查看</u-button>
</view>
</view>
</template>
<script>
@ -28,25 +46,30 @@
}
},
mounted() {
// console.log(this.goodsInfo)
// console.log(6666)
},
methods: {
fuzzyName(name) {
let length = name.length;
let fuzzyChars = "*".repeat(length - 1);
return name[0] + fuzzyChars;
},
callFn(num) {
uni.makePhoneCall({
phoneNumber: num //仅为示例
});
// console.log(9999)
},
goDetil(id) {
uni.navigateTo({
// url: `/pages/logistics/deliveryDetil?id=${id}`,
// deliveryDetil
url: `/pages/logistics/${this.goodsInfo.status==1?"logisticDetil":"deliveryDetil"}?id=${id}`,
})
}
},
onPullDownRefresh() {
uni.stopPullDownRefresh()
}
}
</script>
@ -55,29 +78,27 @@
width: 92vw;
height: AUTO;
background-color: #fff;
border-radius: 1vw;
position: relative;
padding: 2vh 2vw;
margin: 0 0 20rpx 0;
overflow: hidden;
border-radius: 2vw;
box-sizing: border-box;
margin-bottom: 30rpx;
.custom-style {
border: 0;
width: 20vw;
position: absolute;
top: 0;
right: 0;
height: 4vh;
border-radius: 0 7px 0 7px;
.tit {
border-bottom: 3px solid #F5F5F5;
font-size: 30rpx;
font-weight: bold;
padding: 20rpx 15rpx;
}
P {
font-size: 32rpx;
font-weight: bold;
}
.content {
padding: 20rpx 15rpx;
.address {
font-weight: bold;
margin: 15rpx 0;
.address {
margin: 10rpx 0;
// white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
}
}
}

473
components/logistiComptent/logistiCard/logistiCard.vue
View File

@ -1,80 +1,233 @@
<template>
<view class="order">
<view>
<view>
<view class="order">
<p class="tit" v-if="goodsInfo.status==0" style="background-color: #0122C7;">
商户姓名:&nbsp;&nbsp;{{goodsInfo.shop_name}}
</p>
<!-- <u-notify message="成功" duration="2000" show="true"></u-notify> -->
<view v-if='goodsInfo.status !==2'>
<view class="" @click="goDetil">
<p v-if="goodsInfo.status==0">{{goodsInfo.shop_name}}</p>
<p v-else>{{goodsInfo.user_name}}</p>
<view class='phone' v-if="goodsInfo.status==0">联系方式 :{{goodsInfo.shop_phone}} </view>
<view class='phone' v-else>联系方式 :{{goodsInfo.user_phone}} </view>
<p class="tit" v-if="goodsInfo.status==1" style="background-color: #FF7C32;">
收货人姓名:&nbsp;&nbsp;{{ fuzzyName(goodsInfo.user_name) }}</p>
<p class="tit" v-if="goodsInfo.status==2" style="background-color: #47BE62;">
收货人姓名:&nbsp;&nbsp;{{fuzzyName(goodsInfo.user_name)}}</p>
<view class="contents">
<!-- 已取货 -->
<view class="left" v-if='goodsInfo.status==0'>
<view style="margin: 0;padding: 0;" @click="goDetil">
<view class="list">
<text>
店主姓名
</text>
<view>
{{goodsInfo.shop_user ||'暂无'}}
</view>
</view>
<view class="list">
<text>
联系方式
</text>
<view @click.stop="callFn(goodsInfo.shop_phone)">
<u-icon style="display: inline-block;margin-left: 5rpx;" name="phone"
color="#2979ff" size="22"></u-icon> {{goodsInfo.shop_phone}}
</view>
</view>
<view class="list">
<text>
商家地址
</text>
<view>
<view class="address">
{{goodsInfo.shop_address}}
</view>
</view>
</view>
<view class="list">
<text>
订单编号
</text>
<view>
<view class="address">
{{goodsInfo.order_sn}}
</view>
</view>
</view>
<view class="hr">
</view>
<view class="pro_list">
<text style="color: #999;width: 15vw;">
商品信息
</text>
<view>
<view class="goods_tit" v-for="(item,index) in goodsInfo.products">
<text class="goods_detil">{{item.goods_name}}</text>
<text>X{{item.product_num}}{{item.goods_unit}}</text>
</view>
</view>
</view>
<!-- 代取货 -->
<view class="content_box">
<view v-if="goodsInfo.status==0">
<text style="flex:2;">商家地址</text>
<text style="flex:8;">{{goodsInfo.shop_address}}</text>
</view>
<view v-if=" goodsInfo.status==1">
<text style="flex:2;">用户地址</text>
<text style="flex:8;">{{goodsInfo.user_address}}</text>
</view>
<view>
<text style="flex:2;">订单编号</text>
<text style="flex:8;">{{goodsInfo.order_sn}}</text>
</view>
<view class="products">
<view class="tit">采购商品</view>
<view class='product' v-for="(item,index) in goodsInfo.products" :key="index">
<text class="left">{{item.goods_name}}</text>
<text class="right">X{{item.product_num}}{{item.goods_unit}}</text>
</view>
<view class="total">
共计{{goodsInfo.product_count}}件商品
</view>
<u-button type="primary" @click="qrqodeFn" class="custom-style"
style="background-color: #0122C7;border: 0;">
<u-icon name="scan" color="white" size="25" style="margin-right: 10rpx;"></u-icon>
扫码取货</u-button>
</view>
<!-- 已送达 -->
<view v-if="goodsInfo.status==1" class="left">
<view style="margin: 0;padding:0" @click="goDetil">
<view class="list">
<text>
收货地址
</text>
<view>
<view class="address">
{{goodsInfo.user_address}}
</view>
</view>
</view>
<view class="list">
<text>
订单编号
</text>
<view>
{{goodsInfo.order_sn}}
</view>
</view>
<view class="hr">
</view>
<view class="pro_list">
<text style="color: #999;width: 15vw;">
商品信息
</text>
<view>
<view class="goods_tit" v-for="(item,index) in goodsInfo.products">
<text class="goods_detil">{{item.goods_name}}</text>
<text>X{{item.product_num}}{{item.goods_unit}}</text>
</view>
</view>
</view>
</view>
<view class="list">
<text>
联系电话
</text>
<view @click.stop="callFn(goodsInfo.user_phone)">
<u-icon style="display: inline-block;margin-left: 5rpx;" name="phone" color="#FF7C32"
size="22"></u-icon> {{goodsInfo.user_phone}}
</view>
</view>
<view class="total">
共计{{goodsInfo.product_count}}件商品
</view>
<u-button type="primary" @click="showPop = true"
style="background-color: #FF7C32; border: 0;"><u-icon name="car-fill" color="white"
size="25" style="margin-right: 10rpx;"></u-icon> 货物送达</u-button>
</view>
<!-- 详情 -->
<view class="left" @click="goDetil" v-if='goodsInfo.status==2'>
<view style="margin: 0;padding:0">
<view class="list">
<text>
联系电话
</text>
<view @click.stop="callFn(goodsInfo.user_phone)">
<u-icon style="display: inline-block;margin-left: 5rpx;" name="phone"
color="#47BE62" size="22"></u-icon> {{goodsInfo.user_phone}}
</view>
</view>
<view class="list">
<text>
用户地址
</text>
<view>
<view class="address">
{{goodsInfo.user_address}}
</view>
</view>
</view>
<view class="list">
<text>
取货时间
</text>
<view>
{{goodsInfo.qh_time}}
</view>
</view>
<view class="list">
<text>
送达时间
</text>
<view>
{{goodsInfo.ps_time}}
</view>
</view>
<view class="hr">
</view>
<!-- ' <view class="pro_list">
<text style="color: #999;width: 15vw;">
商品信息
</text>
<view>
<view class="goods_tit" v-for="(item,index) in goodsInfo.products">
<text class="goods_detil">{{item.goods_name}}</text>
<text>X{{item.product_num}}{{item.goods_unit}}</text>
</view>
</view>
</view>
' -->
</view>
<view class="total">
共计{{goodsInfo.product_count}}件商品
</view>
<u-button type="primary" class="custom-style" style="background-color: #47BE62;border: 0;">
<u-icon name="eye-fill" color="white" size="25" style="margin-right: 10rpx;"></u-icon>
查看详情</u-button>
</view>
</view>
</view>
</view>
<view v-else class='finishOrder' @click="goDetil">
<view>
<text style="color:#999">订单编号</text> <text> {{goodsInfo.order_sn}}</text>
</view>
<view class="phone">
<text style="color:#999">联系方式</text> {{goodsInfo.user_phone}}
</view>
<view style="margin: 20rpx 0;">
<text style="color:#999">送达时间</text> {{goodsInfo.ps_time||"暂未送达"}}
</view>
<view style="margin: 20rpx 0;">
<text style="color:#999">取货时间</text> {{goodsInfo.qh_time||"暂未取货"}}
</view>
</view>
<view class="total">
共计{{goodsInfo.product_count}}件商品
</view>
<view class="cil_left">
</view>
<view class="cil_right">
</view>
<!-- <u-modal :show="showPop" @confirm="confirm" :content="popContent[goodsInfo.status]" @close="showPop=false"
:closeOnClickOverlay="true"></u-modal> -->
<u-modal :show="showPop" @close="showPop=false" @confirm="confirm" title="请输入收件码" :closeOnClickOverlay="true">
<view class="slot-content">
<u--input placeholder="请输入收件码" type="number" @click="showKeybord=true" border="surround"
v-model="take_code"></u--input>
<u--input placeholder="请输入收件码" type="number" border="surround" v-model="take_code"></u--input>
</view>
</u-modal>
<!-- <u-button type="primary" @click="showPop = true" v-if='goodsInfo.status==0'>扫码取货</u-button> -->
<u-button type="primary" @click="qrqodeFn" v-if='goodsInfo.status==0'>扫码取货</u-button>
<u-button type="primary" @click="showPop = true" style="background-color: #34A853;border: none;"
v-if='goodsInfo.status==1'>已送达</u-button>
<u-button type="primary" @click="goDetil" style="background-color: red;border:none"
v-if='goodsInfo.status==2'>查看详情</u-button>
<u-keyboard ref="uKeyboard" mode="number" :show="showKeybord"></u-keyboard>
</view>
@ -89,34 +242,18 @@
props: ['goodsInfo'],
data() {
return {
list: [],
flag: undefined,
showPop: false,
take_code: "",
showKeybord: false,
// popContent: ["请确认已经收到货", "请确认已送达"]
}
},
computed: {
pst_time() {
let timestamp = this.goodsInfo.ps_time
// 此处时间戳以毫秒为单位
let date = new Date(parseInt(timestamp) * 1000);
let Year = date.getFullYear();
let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
let GMT = Year + '-' + Moth + '-' + Day + ' ' + Hour + ':' + Minute + ':' + Sechond;
return GMT
}
},
methods: {
test() {
// console.log(666)
uni.hideKeyboard()
fuzzyName(name) {
let length = name.length;
let fuzzyChars = "*".repeat(length - 1);
return name[0] + fuzzyChars;
},
goDetil() {
let status = this.goodsInfo.status
@ -124,6 +261,12 @@
url: `/pages/logistics/${status==0?"deliveryDetil":"logisticDetil"}?id=${this.goodsInfo.id}`
})
},
callFn(num) {
uni.makePhoneCall({
phoneNumber: num
});
// console.log(9999)
},
// 扫码
qrqodeFn() {
@ -167,33 +310,10 @@
this.$emit('getlist')
})
},
showMore() {
if (this.goodsInfo.products.length <= 3) {
this.list = this.goodsInfo.products
} else {
this.flag = true
for (let i = 0; i < 3; i++) {
this.list.push(this.goodsInfo.products[i])
}
}
},
getMore() {
if (this.flag) {
for (let i = 3; i < this.goodsInfo.products.length; i++) {
this.list.push(this.goodsInfo.products[i])
}
this.flag = false
}
}
},
mounted() {
this.showMore()
// console.log(this.goodsInfo)
// console.log(this.goodsInfo)
// conso
}
}
</script>
@ -201,118 +321,109 @@
.order {
position: relative;
background-color: white;
margin: 20rpx 0;
border-radius: 15rpx;
height: auto;
padding: 2vh 3vw;
box-sizing: border-box;
overflow: hidden;
margin: 2vh 2vw;
.custom-style {
border: 0;
width: 25vw;
position: absolute;
top: 0;
right: 0;
height: 4vh;
border-radius: 0 7px 0 7px;
}
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
/* padding: 2vh 2vw; */
p {
font-family: "PingFang SC-Medium";
.tit {
/* padding: 2vh 2vw; */
font-size: 32rpx;
font-weight: bold;
background-color: #FF7C32;
color: white;
padding: 30rpx 20rpx;
}
.phone {
color: #999999;
padding: 10rpx 0;
border-bottom: 1px dashed blue;
}
.contents {
background-color: #fff;
padding: 30rpx 20rpx;
.content_box {
margin: 15rpx 0;
view {
display: flex;
.list {
margin: 10rpx 0;
text:first-child {
color: #999;
}
}
.products {
display: block;
.tit {
color: #999;
.hr {
border-bottom: 1px dashed #0122C7;
margin: 20rpx 0;
}
}
float: left;
margin: 0
.left {
.list {
display: flex;
.norow {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.product {
width: 65vw;
display: flex;
justify-content: space-between;
margin-left: 18vw;
.left {
color: black;
width: 55vw;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
view {
flex: 8;
view {
margin-bottom: 10rpx;
}
}
text {
flex: 2;
}
}
}
.pro_list {
display: flex;
.cil_left {
width: 30rpx;
height: 30rpx;
background-color: #F5F5F5;
border-radius: 30rpx;
position: absolute;
top: 110rpx;
left: -15rpx;
}
.cil_right {
width: 30rpx;
height: 30rpx;
background-color: #F5F5F5;
border-radius: 30rpx;
position: absolute;
top: 110rpx;
right: -15rpx;
text {
margin-right: 20rpx;
}
}
.total {
text-align: right;
margin: 20rpx 0;
color: #3274F9;
font-weight: bold;
font-size: 32rpx;
margin: 20rpx 0;
text-align: right;
}
.icon {
.goods_tit {
display: flex;
justify-content: space-between;
.goods_detil {
width: 55vw;
margin: 0;
padding: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.tost_tit {
text-align: center;
}
}
.address {
width: 65vw;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.finishOrder {

34
manifest.json
View File

@ -28,22 +28,26 @@
/* android打包配置 */
"android" : {
"permissions" : [
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.INTERNET\"/>",
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
@ -66,6 +70,34 @@
"appkey_ios" : "0799f37420c0784f1e6cba230a68bdb1",
"appkey_android" : "0799f37420c0784f1e6cba230a68bdb1"
}
},
"geolocation" : {
"amap" : {
"__platform__" : [ "ios", "android" ],
"appkey_ios" : "0799f37420c0784f1e6cba230a68bdb1",
"appkey_android" : "0799f37420c0784f1e6cba230a68bdb1"
}
},
"push" : {
"unipush" : {
"version" : "2",
"offline" : true,
"hms" : {},
"oppo" : {},
"vivo" : {},
"mi" : {},
"meizu" : {},
"fcm" : {},
"icons" : {
"small" : {
"ldpi" : "C:/Users/Administrator/Pictures/216X50k/资源 5@4x.png",
"mdpi" : "C:/Users/Administrator/Pictures/216X50k/资源 5@4x.png",
"hdpi" : "C:/Users/Administrator/Pictures/216X50k/资源 5@4x.png",
"xhdpi" : "C:/Users/Administrator/Pictures/216X50k/资源 5@4x.png",
"xxhdpi" : "C:/Users/Administrator/Pictures/216X50k/资源 5@4x.png"
}
}
}
}
},
"splashscreen" : {

6
pages.json
View File

@ -85,7 +85,7 @@
"style": {
"navigationBarTitleText": "订单列表",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#3175f9",
"navigationBarBackgroundColor": "#0122C7",
"navigationBarTextStyle": "white"
}
@ -94,7 +94,7 @@
"style": {
"navigationBarTitleText": "订单详情",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#3175f9",
"navigationBarBackgroundColor": "#0122C7",
"navigationBarTextStyle": "white"
}
@ -103,7 +103,7 @@
"style": {
"navigationBarTitleText": "配送信息",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#3175f9",
"navigationBarBackgroundColor": "#0122C7",
"navigationBarTextStyle": "white"
}

388
pages/logistics/deliveryDetil.vue
View File

@ -1,67 +1,95 @@
<template>
<view class="content">
<view>
<view v-if='showLoading'>
<u-loading-page :loading="showLoading"></u-loading-page>
</view>
<view v-else>
<u-toast ref="uToast"></u-toast>
<view class="content">
<u-toast ref="uToast"></u-toast>
<view class="map">
<view class="map">
<map id="map" @markertap='mapFun' :markers='markers' :scale="scale" :enable-zoom="true"
style="width:100%;height: 100%;" :latitude="goodsDetil.logistics.shop_lat" :enable-scroll="false"
:longitude="goodsDetil.logistics.shop_long">
<cover-image class="map_btn" @tap="test" src="../../static/img/logistics/DH.png">
</cover-image>
</map>
</view>
<view class="order_info">
<p class='tit'>订单号: {{goodsDetil.logistics.order_sn}}</p>
<view class="store_name">
商户名称 {{goodsDetil.logistics.shop_name}}
</view>
<view class="store_name">
联系电话 {{goodsDetil.logistics.shop_phone}}
</view>
<view class="store_time">
{{goodsDetil.logistics.shop_address}}
</view>
<view class="tit_a">
<text>物流信息</text>
</view>
<view class="info" v-for="(item,index) in goodsDetil.record">
<view style="margin: 20rpx 0;">
{{item.content }}
</view>
<view style="margin: 20rpx 0;">
{{item.create_time }}
</view>
</view>
<view class="pro_info">
<view style="color: #999; flex:1">
商品信息
</view>
<view style="flex:4">
<view v-for="(item,index) in goodsDetil.product" class="goods_tit">
<text style="width: 60vw;">{{item.goods_name}}</text>
<text style="float: right;">X{{item.product_num}}{{item.goods_unit}}</text>
<map 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>
<text class="cir" style="background-color: #40BC5E;"></text> 起点:&nbsp;&nbsp;{{nowAddress}}
</view>
<view>
<text class="cir" style="background-color: #FF7C32;"></text>
终点:&nbsp;&nbsp;{{goodsDetil.logistics.shop_address}}
</view>
</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>
<view class="mark">
请详细核对订单信息
</view>
</view>
<view class="total">
共计{{goodsDetil.product_count}}件商品
<view class="order_info" style="background-color: #47BE62;">
<view class="top">
<view>
物流信息:
</view>
<view>用户名称:&nbsp;&nbsp;{{fuzzyName( goodsDetil.logistics.user_name)}}</view>
<view>
通知时间:&nbsp;&nbsp;{{goodsDetil.logistics.create_time}}
</view>
<view class="pro_list">
<text>
商品信息
</text>
<view class="goods">
<view class="goods_tit" v-for="(item,index) in goodsDetil.product">
<text style="flex: 8;">{{item.goods_name}}</text>
<text style="flex: 2;">X{{item.product_num}}{{item.goods_unit}}</text>
</view>
</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="btn">
<u-button @click="qrqodeFn" type="primary" class="custom-style"
style="background-color: #0122C7;border: 0;">
<u-icon name="scan" color="white" size="25" style="margin-right: 10rpx;"></u-icon>
扫码取货</u-button>
</view>
<u-button type="primary" v-if='goodsDetil.logistics.status==0' @click="qrqodeFn"
class="custom-style">扫码取货</u-button>
<!-- <u-button type="primary" v-if='goodsDetil.logistics.status==0' @click="takeGood"
class="custom-style">扫码取货</u-button> -->
</view>
</view>
</view>
</template>
@ -75,21 +103,65 @@
export default {
data() {
return {
showLoading: true,
showPop: false,
goodsDetil: undefined,
scale: 17,
latitude: undefined,
longitude: undefined,
markers: [{
id: 1,
latitude: undefined,
longitude: undefined,
iconPath: '../../static/tabs-icon/home-a.png', //显示的图标
}],
scale: 15,
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;
},
callFn(num) {
uni.makePhoneCall({
phoneNumber: num
});
},
// 获取位置
// 位置
locationFn() {
let that = this
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
console.log(that.nowAddress)
that.markers[1].latitude = res.latitude
that.markers[1].longitude = res.longitude
that.getDriverLine()
}
});
},
// 唤起高德
test() {
var packageName = 'com.autonavi.minimap';
@ -146,6 +218,52 @@
iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
})
},
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]),
});
}
}
that.runningRoute = data.paths[0].steps[0].instruction;
}
that.polyline = [{
points: points,
color: "#0091ff",
dottedLine: true,
width: 10,
}, ];
},
fail: function(res) {
console.log("获取路线失败", res);
},
});
},
qrqodeFn() {
let that = this
uni.scanCode({
@ -162,8 +280,6 @@
order_id: this.goodsDetil.logistics.order_id,
order_sn: sn
}).then(res => {
console.log("取货成功")
// this.$emit('showTost')
this.showToast()
setTimeout(() => {
uni.navigateBack()
@ -172,17 +288,6 @@
},
getLocation() {
uni.getLocation({
type: 'wgs84',
success: function(res) {
console.log('当前位置的经度：' + res.longitude);
console.log('当前位置的纬度：' + res.latitude);
}
});
}
},
onLoad(options) {
@ -190,121 +295,104 @@
logistics_id: options.id
}).then(res => {
this.goodsDetil = res.data
this.latitude = res.data.logistics.shop_lat
this.longitude = res.data.logistics.shop_long
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>
.content {
padding: 2vh 3vw;
background-color: #F6F7FC;
height: 100vh;
box-sizing: border-box;
}
.map {
height: 40vh;
width: 100vw;
position: relative;
height: 35vh;
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;
}
.custom-style {
width: 100%;
background-color: #3C9CFF;
border: none;
color: white;
height: 90rpx;
line-height: 90rpx;
}
.order_info {
height: auto;
background-color: white;
border-radius: 6vw 6vw 0 0;
transform: translateY(-5vh);
padding: 5vh 3vw;
box-sizing: border-box;
position: relative;
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;
}
.tit {
font-weight: bold;
font-size: 35rpx
}
.tit_a {
.mark {
background-color: white;
color: #A8A8A8;
padding: 10rpx 20rpx;
}
.pro_list {
display: flex;
justify-content: space-between;
font-weight: bold;
font-size: 35rpx
text {
flex: 2
}
.goods {
flex: 8;
margin: 0;
.goods_tit {
margin: 0;
display: flex;
}
}
}
.total {
text-align: right;
color: #3274F9;
font-weight: bold;
font-size: 32rpx;
margin: 20rpx 0;
}
.store_name {
color: #999999;
margin: 18rpx 0;
}
.store_time {
color: #999999;
padding: 0 0 20rpx 0;
border-bottom: 1px solid #999999;
margin-bottom: 20rpx;
}
.info {
margin: 10rpx 0;
}
.pro_info {
display: flex;
justify-content: space-between;
}
}
.goods_tit {
display: flex;
justify-content: space-between;
}
.icon {
text-align: center;
font-size: 50rpx;
text {
display: block;
transform: rotate(90deg);
}
.btn {
margin-top: 200rpx;
}
</style>

56
pages/logistics/index.vue
View File

@ -1,23 +1,29 @@
<template>
<view class="content">
<u-search placeholder="搜索你的订单" @search="getOrderList" :show-action='false' bg-color='white'
v-model="keywords"></u-search>
<view style="margin: 10rpx 0 0 0;">
</view>
<u-sticky bgColor="#F5F5F5">
<u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>
<view>
<u-sticky bgColor="#0122C7" style="width: 100vw;">
<u-tabs :list="tabLists" @change="sectionChange" lineColor='#fff' :scrollable="false" lineWidth='40'
inactiveStyle='color:#fff' activeStyle="color:#fff"></u-tabs>
</u-sticky>
<view v-if="!orderlist.length">
<u-empty mode="data" icon="../../static/img/empty/data.png">
</u-empty>
<view class="content">
<u-search placeholder="搜索你的订单" @search="getOrderList" :show-action='false' bg-color='white'
v-model="keywords"></u-search>
<view v-if="!orderlist.length">
<u-empty mode="data" icon="../../static/img/empty/data.png">
</u-empty>
</view>
<view v-else>
<logistiCard ref="logistiCards" v-for='(item,index) in orderlist' @getlist="getOrderList"
@showTost='showToast' @showToast2="showToast2" :goodsInfo="item" :key="index">
</logistiCard>
</view>
<!-- -->
<u-toast ref="uToast"></u-toast>
</view>
<view v-else>
<logistiCard ref="logistiCards" v-for='(item,index) in orderlist' @getlist="getOrderList"
@showTost='showToast' @showToast2="showToast2" :goodsInfo="item" :key="index">
</logistiCard>
</view>
<u-toast ref="uToast"></u-toast>
</view>
</template>
<script>
@ -35,19 +41,24 @@
data() {
return {
keywords: "",
list: ['待取货', '已取货', '已送达'],
tabLists: [{
name: '待配送',
}, {
name: '待送达'
}, {
name: '已送达'
}],
curNow: 0,
orderlist: []
}
},
methods: {
sectionChange(index) {
this.curNow = index;
this.curNow = index.index;
this.getOrderList()
},
test() {
console.log(this.$refs.logistiCards[1])
},
showToast() {
// 6
this.$refs.uToast.show({
@ -96,7 +107,8 @@
<style lang='scss'>
.content {
margin-top: 2vh;
background-color: #F5F5F5;
padding: 1vh 2vw;
padding: 0vh 2vw;
}
</style>

340
pages/logistics/logisticDetil.vue
View File

@ -3,167 +3,174 @@
<view v-if='showLoading'>
<u-loading-page :loading="showLoading"></u-loading-page>
</view>
<view v-else>
<view class="order">
<p>订单号:{{goodsDetil.logistics.order_sn}}</p>
<view class='phone'> </view>
<!-- 已送达 -->
<view class="left" v-if="goodsDetil.logistics.status==2">
<view class="list">
<text>
收货时间
</text>
<view>
{{goodsDetil.record[2].create_time}}
</view>
</view>
<view class="list">
<text>
收获详情
</text>
<view>
<view>
{{goodsDetil.logistics.user_address}}
</view>
<view>
{{goodsDetil.logistics.user_name||"顾客电话"}} :{{goodsDetil.logistics.user_phone||"顾客电话"}}
</view>
<p class="tit" v-if="goodsDetil.logistics.status==1">订单编号:&nbsp;&nbsp;{{goodsDetil.logistics.order_sn}}
</p>
<p class="tit" v-if="goodsDetil.logistics.status==2" style="background-color: #47BE62;">
订单编号:&nbsp;&nbsp;{{goodsDetil.logistics.order_sn}}</p>
<view class="contents">
<!-- 已送达 -->
<view class="left" v-if="goodsDetil.logistics.status==2">
<view class="list">
<text>
收货时间
</text>
<view>
{{goodsDetil.record[2].create_time}}
</view>
</view>
</view>
<view class="list">
<text>
取货详情
</text>
<view>
<view class="list">
<text>
收获详情
</text>
<view>
{{goodsDetil.logistics.shop_address||"商家地址"}}
</view>
<view>
{{goodsDetil.logistics.shop_name||"商家电话"}} :{{goodsDetil.logistics.shop_phone||"商家电话"}}
</view>
<view>
{{goodsDetil.record[1].create_time}}
</view>
</view>
</view>
<view class="list">
<text>
订单详情
</text>
<view>
<u-steps :current="record.length" direction="column">
<u-steps-item :title="item.content" :desc="item.create_time"
v-for="(item,index) in goodsDetil.record">
</u-steps-item>
<!-- <u-steps-item title="已出库" desc="10:35">
</u-steps-item>
<u-steps-item title="运输中" desc="11:40">
</u-steps-item> -->
</u-steps>
</view>
</view>
<view class="pro_list">
<text style="color: #999;width: 15vw;">
商品信息
</text>
<view>
<view class="goods_tit" v-for="(item,index) in goodsDetil.product">
<text style="width: 60vw;margin: 0;padding: 0;">{{item.goods_name}}</text>
<text>X{{item.product_num}}{{item.goods_unit}}</text>
</view>
</view>
</view>
</view>
<!-- 已取货 -->
<view class="left" v-else>
<view class="list">
<text>
用户名称
</text>
<view>
{{goodsDetil.logistics.user_name}}
</view>
</view>
<view class="list">
<text>
联系方式
</text>
<view>
{{goodsDetil.logistics.user_phone}}
</view>
</view>
<view class="list" style="margin: 10rpx 0;">
<text style="width: 16vw;">
收货地址
</text>
<view>
<view>
{{goodsDetil.logistics.user_address}}
</view>
</view>
</view>
<view class="list">
<text>
物流信息
</text>
<!-- <view>
<view v-for="(item,index) in goodsDetil.record">
{{item.content}}
<view>
{{item.create_time}}
{{goodsDetil.logistics.user_address}}
</view>
<view>
{{ fuzzyName(goodsDetil.logistics.user_name) ||"顾客姓名"}}:&nbsp;&nbsp;{{goodsDetil.logistics.user_phone||"顾客电话"}}
</view>
<view>
{{goodsDetil.record[2].create_time}}
</view>
</view>
</view> -->
<u-steps :current="record.length-1" direction="column">
<u-steps-item :title="item.content" :desc="item.create_time"
v-for="(item,index) in (record)">
</u-steps-item>
</u-steps>
</view>
<view class="pro_list">
<text style="color: #999;width: 15vw;">
商品信息
</text>
</view>
<view class="list">
<text>
取货详情
</text>
<view>
<view>
{{goodsDetil.logistics.shop_address||"商家地址"}}
</view>
<view>
{{goodsDetil.logistics.shop_name||"商家电话"}}
:&nbsp;&nbsp;{{goodsDetil.logistics.shop_phone||"商家电话"}}
</view>
<view>
{{goodsDetil.record[1].create_time}}
</view>
</view>
</view>
<!-- 下划线 -->
<view class="hr">
</view>
<view>
<view class="goods_tit" v-for="(item,index) in goodsDetil.product">
<text style="width: 60vw;margin: 0;padding: 0;">{{item.goods_name}}</text>
<text>X{{item.product_num}}{{item.goods_unit}}</text>
<view>
物流信息
</view>
<view style="margin: 10rpx 0;">
<u-steps :current="record.length" direction="column">
<u-steps-item :title="item.content" :desc="item.create_time"
v-for="(item,index) in goodsDetil.record">
</u-steps-item>
</u-steps>
</view>
</view>
<view class="pro_list">
<text style="width: 15vw;">
商品信息
</text>
<view>
<view class="goods_tit" v-for="(item,index) in goodsDetil.product">
<text style="width: 60vw;margin: 0;padding: 0;">{{item.goods_name}}</text>
<text>X{{item.product_num}}{{item.goods_unit}}</text>
</view>
</view>
</view>
</view>
<!-- 已取货 -->
<view class="left" v-else>
<view class="list">
<text>
用户名称
</text>
<view>
{{ fuzzyName(goodsDetil.logistics.user_name)}}
</view>
</view>
<view class="list">
<text>
联系方式
</text>
<view @click.stop="callFn(goodsDetil.logistics.user_phone)">
<u-icon style="display: inline-block;margin-left: 5rpx;" name="phone" color="#2979ff"
size="22"></u-icon> {{goodsDetil.logistics.user_phone}}
</view>
</view>
<view class="list" style="margin: 10rpx 0;">
<text style="width: 16vw;">
收货地址
</text>
<view>
<view>
{{goodsDetil.logistics.user_address}}
</view>
</view>
</view>
<view>
<view>
物流信息
</view>
<view style="margin: 20rpx 0;">
<u-steps :current="record.length-1" direction="column">
<u-steps-item :title="item.content" :desc="item.create_time"
v-for="(item,index) in (record)">
</u-steps-item>
</u-steps>
</view>
</view>
<view class="hr">
</view>
<view class="pro_list">
<text style="color: #999;width: 15vw;">
商品信息
</text>
<view>
<view class="goods_tit" v-for="(item,index) in goodsDetil.product">
<text style="width: 60vw;margin: 0;padding: 0;">{{item.goods_name}}</text>
<text>X{{item.product_num}}{{item.goods_unit}}</text>
</view>
</view>
</view>
</view>
<view class="total" v-if="goodsDetil.logistics.status==2">
<text>共计{{goodsDetil.product_count}}件 </text>
</view>
<view style="margin-top: 600rpx;" v-if="goodsDetil.logistics.status==1">
<u-button type="primary" style="background-color: #FF7C32;border: 0; border-radius: 2vw;"
@click="showPop=true"><u-icon name="car-fill" color="white" size="25"
style="margin-right: 10rpx;;"></u-icon>
货物送达</u-button>
</view>
</view>
<view class="total">
<text>共计{{goodsDetil.product_count}}件商品 </text>
</view>
<u-button v-if='goodsDetil.logistics.status==1' @click="showPop=true" type="primary"
style="background-color: #34A853;border: none;">已送达</u-button>
</view>
<view class="cil_left">
<view>
<u-modal :show="showPop" @close="showPop=false" title="请输入收件码" @confirm="confirm"
:closeOnClickOverlay="true">
<view class="slot-content">
<u--input placeholder="请输入收件码" type="number" border="surround" v-model="take_code"></u--input>
</view>
</u-modal>
<u-toast ref="uToast"></u-toast>
</view>
<view class="cil_right">
</view>
<!-- <u-modal :show="showPop" @confirm="confirm" content="请确认货物已送达" @close="showPop=false"
:closeOnClickOverlay="true"></u-modal> -->
<u-modal :show="showPop" @close="showPop=false" title="请输入收件码" @confirm="confirm"
:closeOnClickOverlay="true">
<view class="slot-content">
<u--input placeholder="请输入收件码" type="number" border="surround" v-model="take_code"></u--input>
</view>
</u-modal>
<u-toast ref="uToast"></u-toast>
</view>
</view>
@ -191,12 +198,22 @@
}
},
computed: {
// rereverse()
record() {
return this.goodsDetil.record.reverse()
}
},
methods: {
callFn(num) {
uni.makePhoneCall({
phoneNumber: num
});
// console.log(9999)
},
fuzzyName(name) {
let length = name.length;
let fuzzyChars = "*".repeat(length - 1);
return name[0] + fuzzyChars;
},
confirm() {
if (!this.take_code) return
doneDelivery({
@ -221,13 +238,11 @@
},
},
onLoad(options) {
getDetil({
logistics_id: options.id
}).then(res => {
this.showLoading = false
this.goodsDetil = res.data
console.log(this.goodsDetil)
})
},
@ -237,33 +252,46 @@
<style lang='scss' scoped>
.content {
background-color: #F5F5F5;
padding: 2vh 2vw;
}
.order {
position: relative;
background-color: white;
margin: 20rpx 0;
border-radius: 15rpx;
height: auto;
padding: 2vh 3vw;
box-sizing: border-box;
overflow: hidden;
margin: 2vh 2vw;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
/* padding: 2vh 2vw; */
p {
font-family: "PingFang SC-Medium";
.tit {
/* padding: 2vh 2vw; */
font-size: 32rpx;
font-weight: bold;
background-color: #FF7C32;
color: white;
padding: 30rpx 20rpx;
}
.phone {
color: #999999;
padding: 10rpx 0;
border-bottom: 1px dashed blue;
font-size: 20rpx;
.contents {
background-color: #fff;
padding: 30rpx 20rpx;
.list {
margin: 10rpx 0;
}
.hr {
border-bottom: 1px dashed #0122C7;
margin: 20rpx 0;
}
}
.left {
.list {
display: flex;

BIN
static/img/logistics/QS.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
static/img/logistics/SJ.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 787 B