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

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

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

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

@ -1,80 +1,233 @@
<template> <template>
<view>
<view>
<view class="order"> <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> --> <p class="tit" v-if="goodsInfo.status==1" style="background-color: #FF7C32;">
<view v-if='goodsInfo.status !==2'> 收货人姓名:&nbsp;&nbsp;{{ fuzzyName(goodsInfo.user_name) }}</p>
<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==2" style="background-color: #47BE62;">
<view class="content_box"> 收货人姓名:&nbsp;&nbsp;{{fuzzyName(goodsInfo.user_name)}}</p>
<view v-if="goodsInfo.status==0"> <view class="contents">
<text style="flex:2;">商家地址</text> <!-- 已取货 -->
<text style="flex:8;">{{goodsInfo.shop_address}}</text> <view class="left" v-if='goodsInfo.status==0'>
</view> <view style="margin: 0;padding: 0;" @click="goDetil">
<view v-if=" goodsInfo.status==1"> <view class="list">
<text style="flex:2;">用户地址</text> <text>
<text style="flex:8;">{{goodsInfo.user_address}}</text> 店主姓名
</view> </text>
<view> <view>
<text style="flex:2;">订单编号</text> {{goodsInfo.shop_user ||'暂无'}}
<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>
</view> </view>
</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 v-else class='finishOrder' @click="goDetil"> </view>
<view class="list">
<text>
商家地址
</text>
<view> <view>
<text style="color:#999">订单编号</text> <text> {{goodsInfo.order_sn}}</text> <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="phone">
<text style="color:#999">联系方式</text> {{goodsInfo.user_phone}}
</view> </view>
<view style="margin: 20rpx 0;">
<text style="color:#999">送达时间</text> {{goodsInfo.ps_time||"暂未送达"}}
</view> </view>
<view style="margin: 20rpx 0;">
<text style="color:#999">取货时间</text> {{goodsInfo.qh_time||"暂未取货"}} <view class="total">
共计{{goodsInfo.product_count}}件商品
</view> </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>
<view class="total"> <view class="total">
共计{{goodsInfo.product_count}}件商品 共计{{goodsInfo.product_count}}件商品
</view> </view>
<view class="cil_left">
<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 class="cil_right">
</view> </view>
<!-- <u-modal :show="showPop" @confirm="confirm" :content="popContent[goodsInfo.status]" @close="showPop=false"
:closeOnClickOverlay="true"></u-modal> -->
</view>
</view>
<u-modal :show="showPop" @close="showPop=false" @confirm="confirm" title="请输入收件码" :closeOnClickOverlay="true"> <u-modal :show="showPop" @close="showPop=false" @confirm="confirm" title="请输入收件码" :closeOnClickOverlay="true">
<view class="slot-content"> <view class="slot-content">
<u--input placeholder="请输入收件码" type="number" @click="showKeybord=true" border="surround" <u--input placeholder="请输入收件码" type="number" border="surround" v-model="take_code"></u--input>
v-model="take_code"></u--input>
</view> </view>
</u-modal> </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> </view>
@ -89,34 +242,18 @@
props: ['goodsInfo'], props: ['goodsInfo'],
data() { data() {
return { return {
list: [], list: [],
flag: undefined, flag: undefined,
showPop: false, showPop: false,
take_code: "", 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: { methods: {
test() { fuzzyName(name) {
// console.log(666) let length = name.length;
uni.hideKeyboard() let fuzzyChars = "*".repeat(length - 1);
return name[0] + fuzzyChars;
}, },
goDetil() { goDetil() {
let status = this.goodsInfo.status let status = this.goodsInfo.status
@ -124,6 +261,12 @@
url: `/pages/logistics/${status==0?"deliveryDetil":"logisticDetil"}?id=${this.goodsInfo.id}` url: `/pages/logistics/${status==0?"deliveryDetil":"logisticDetil"}?id=${this.goodsInfo.id}`
}) })
}, },
callFn(num) {
uni.makePhoneCall({
phoneNumber: num
});
// console.log(9999)
},
// 扫码 // 扫码
qrqodeFn() { qrqodeFn() {
@ -167,152 +310,120 @@
this.$emit('getlist') 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> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.order { .order {
position: relative; position: relative;
background-color: white; background-color: white;
margin: 20rpx 0;
border-radius: 15rpx; border-radius: 15rpx;
height: auto; height: auto;
padding: 2vh 3vw;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden;
margin: 2vh 2vw;
.custom-style { box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
border: 0; /* padding: 2vh 2vw; */
width: 25vw;
position: absolute;
top: 0;
right: 0;
height: 4vh;
border-radius: 0 7px 0 7px;
}
p {
font-family: "PingFang SC-Medium";
font-size: 32rpx;
font-weight: bold;
}
.phone {
color: #999999;
padding: 10rpx 0;
border-bottom: 1px dashed blue;
}
.content_box {
margin: 15rpx 0;
view {
display: flex;
margin: 10rpx 0;
text:first-child {
color: #999;
}
}
.products {
display: block;
.tit { .tit {
color: #999; /* padding: 2vh 2vw; */
font-size: 32rpx;
float: left; font-weight: bold;
margin: 0 background-color: #FF7C32;
color: white;
padding: 30rpx 20rpx;
}
.contents {
background-color: #fff;
padding: 30rpx 20rpx;
.list {
margin: 10rpx 0;
}
.hr {
border-bottom: 1px dashed #0122C7;
margin: 20rpx 0;
}
} }
.product {
width: 65vw;
display: flex;
justify-content: space-between;
margin-left: 18vw;
.left { .left {
color: black; .list {
width: 55vw; display: flex;
margin: 0;
.norow {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
view {
flex: 8;
view {
margin-bottom: 10rpx;
}
} }
text {
flex: 2;
} }
} }
.cil_left {
width: 30rpx;
height: 30rpx;
background-color: #F5F5F5;
border-radius: 30rpx;
position: absolute;
top: 110rpx;
left: -15rpx;
} }
.cil_right { .pro_list {
width: 30rpx; display: flex;
height: 30rpx;
background-color: #F5F5F5;
border-radius: 30rpx;
position: absolute;
top: 110rpx;
right: -15rpx;
text {
margin-right: 20rpx;
}
} }
.total { .total {
text-align: right; margin: 20rpx 0;
color: #3274F9; color: #3274F9;
font-weight: bold; font-weight: bold;
font-size: 32rpx; 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; text-align: center;
}
} }
.address {
width: 65vw;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.finishOrder { .finishOrder {

34
manifest.json
View File

@ -28,22 +28,26 @@
/* android打包配置 */ /* android打包配置 */
"android" : { "android" : {
"permissions" : [ "permissions" : [
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>", "<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>", "<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_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_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.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>", "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>", "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>", "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>", "<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.MODIFY_AUDIO_SETTINGS\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>", "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>", "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>", "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>", "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>", "<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\"/>" "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
] ]
}, },
@ -66,6 +70,34 @@
"appkey_ios" : "0799f37420c0784f1e6cba230a68bdb1", "appkey_ios" : "0799f37420c0784f1e6cba230a68bdb1",
"appkey_android" : "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" : { "splashscreen" : {

6
pages.json
View File

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

358
pages/logistics/deliveryDetil.vue
View File

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

34
pages/logistics/index.vue
View File

@ -1,12 +1,13 @@
<template> <template>
<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 class="content"> <view class="content">
<u-search placeholder="搜索你的订单" @search="getOrderList" :show-action='false' bg-color='white' <u-search placeholder="搜索你的订单" @search="getOrderList" :show-action='false' bg-color='white'
v-model="keywords"></u-search> 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>
</u-sticky>
<view v-if="!orderlist.length"> <view v-if="!orderlist.length">
<u-empty mode="data" icon="../../static/img/empty/data.png"> <u-empty mode="data" icon="../../static/img/empty/data.png">
</u-empty> </u-empty>
@ -16,8 +17,13 @@
@showTost='showToast' @showToast2="showToast2" :goodsInfo="item" :key="index"> @showTost='showToast' @showToast2="showToast2" :goodsInfo="item" :key="index">
</logistiCard> </logistiCard>
</view> </view>
<!-- -->
<u-toast ref="uToast"></u-toast> <u-toast ref="uToast"></u-toast>
</view> </view>
</view>
</template> </template>
<script> <script>
@ -35,19 +41,24 @@
data() { data() {
return { return {
keywords: "", keywords: "",
list: ['待取货', '已取货', '已送达'], tabLists: [{
name: '待配送',
}, {
name: '待送达'
}, {
name: '已送达'
}],
curNow: 0, curNow: 0,
orderlist: [] orderlist: []
} }
}, },
methods: { methods: {
sectionChange(index) { sectionChange(index) {
this.curNow = index;
this.curNow = index.index;
this.getOrderList() this.getOrderList()
}, },
test() {
console.log(this.$refs.logistiCards[1])
},
showToast() { showToast() {
// 6 // 6
this.$refs.uToast.show({ this.$refs.uToast.show({
@ -96,7 +107,8 @@
<style lang='scss'> <style lang='scss'>
.content { .content {
margin-top: 2vh;
background-color: #F5F5F5; background-color: #F5F5F5;
padding: 1vh 2vw; padding: 0vh 2vw;
} }
</style> </style>

136
pages/logistics/logisticDetil.vue
View File

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