首页+订单详情

This commit is contained in:
2025-02-17 03:11:35 +08:00
commit 177b6d76cb
25 changed files with 1357 additions and 0 deletions

19
app.js Normal file
View File

@ -0,0 +1,19 @@
// app.js
App({
onLaunch() {
// 展示本地存储能力
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
},
globalData: {
userInfo: null
}
})

15
app.json Normal file
View File

@ -0,0 +1,15 @@
{
"pages": [
"pages/index/index",
"pages/order-detail/index"
],
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "Weixin",
"navigationBarBackgroundColor": "#ffffff"
},
"style": "v2",
"componentFramework": "glass-easel",
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents"
}

331
app.wxss Normal file
View File

@ -0,0 +1,331 @@
page{
font-size:32rpx;
line-height: 1;
--main-font-color:#222222;
--main-bgclolor:#F5F5F5;
--main-color:#FFC300;
--main-hover-color:#fcce39;
color:var(--main-font-color);
background-color:var(--main-bgclolor);
overflow: hidden;
}
button{
border-radius: 12rpx;
box-sizing: border-box;
}
button label{
display: inline-block;
margin-left: 10rpx;
}
button .icon,button label{
vertical-align: middle;
}
button:not([size=mini]){
width:auto;
/* height: 108rpx; */
padding:30rpx 25rpx;
font-size: 36rpx;
}
button:not([size=mini]) .icon{
width:32rpx;height:32rpx;
}
button[type=primary]{
background-color:var(--main-color);
color:#222222;
}
button[plain]{
border: 1rpx solid rgba(255, 195, 0, 0.5);
color: #FFC300;
}
button:not([plain])[type=primary]:hover{
background-color:var(--main-hover-color);
}
button[type=default]{
color: #333333;
font-size:32rpx;
line-height: 1;
}
button[type=primary][plain]{
border-color: var(--main-color);
color:var(--main-color);
padding:28rpx 25rpx;
}
button[type=primary][plain]:hover{
border-color:var(--main-color);
color:var(--main-color);
}
button[loading][type=primary] {
background-color:var(--main-color);
color: hsla(0,0%,100%,.6);
}
radio-group{
line-height: 34rpx;
}
radio-group radio{
display: inline-block;
vertical-align: middle;
overflow: hidden;
}
radio-group label{
display: inline-block;
vertical-align: middle;
}
radio-group radio+label{
margin-left:10rpx;
}
radio-group label+label{
margin-left:20rpx;
}
radio{
width: 34rpx;
height: 34rpx;
position: relative;
}
radio .wx-radio-input{
border-radius: 50%;
border-color:var(--main-color);
box-sizing: border-box;
width: 100%;
height: 100%;
line-height: 20px;
position: absolute;
top: 0;left:0;
}
radio .wx-radio-input.wx-radio-input-checked{
background-color:transparent;
border-color: var(--main-color);
}
radio .wx-radio-input.wx-radio-input-checked::before{
content: '';
position: absolute;
width: 22rpx;
height:22rpx;
left:4rpx;top:4rpx;
border-radius: 50%;
background: var(--main-color);
transform: none;
-webkit-transform:none
}
checkbox .wx-checkbox-input{
width: 40rpx;
height: 40rpx;
border-radius: 50%;
}
page-container .content{
border-radius: 24rpx 24rpx 0 0;
background-color: #F5F5F5;
min-height: 200rpx;
/* padding:20rpx; */
}
.page-container{
background-color: #fff;
border-radius: 20rpx;
padding:40rpx 30rpx;
margin:20rpx;
}
.page-container.shadow{
box-shadow: 0px 6px 6px 1px rgba(0, 0, 0, 0.05);
}
.tags{
display: flex;
gap: 10rpx;
}
.tags .tag{
font-size:20rpx;
padding:6rpx 10rpx;
color: #888888;
border: 0.5px solid rgba(153, 153, 153, 0.5);
border-radius: 6rpx;
}
.tags .tag.yellow{
color: #FFC300;
border-color:#FFC300;
}
.spliter{
border-bottom: 1px solid rgba(153, 153, 153, 0.2);
}
.spliter.dashed{
border-bottom: 1px dashed rgba(153, 153, 153, 0.2);
}
.money,.money-promation,.money-normal,.money-disable{
font-size: 36rpx;
font-weight: 500;
}
.money::before,.money-promation::before,.money-normal::before,.money-disable::before{
content: "¥ ";
font-size: 80%;
}
.money{
color:#EB0000;
}
.money-promation{
color:#FF8400;
}
.money-yellow{
color:var(--main-color);
}
.money-blue{
color:#1A4DEB;
}
.money-promation::before{
content: "-¥ ";
}
.money-normal{
color:unset;
}
.money-disable{
color:#888888;
text-decoration: line-through;
font-size: 28rpx;
font-weight:normal;
}
.bottom-bar{
border-radius: 24rpx 24rpx 0 0;
padding:34rpx 40rpx;
position:fixed;
bottom:0;
left:0;right:0;
background-color: #fff;
}
.custom-scroll-view{
height:100vh;
display: flex;
flex-direction: column;
}
.custom-scroll-view .main{
flex:1;
overflow: auto;
}
.bottom-bar-v2{
border-radius: 24rpx 24rpx 0 0;
padding:34rpx 40rpx;
background-color: #fff;
text-align: right;
}
.cells{
margin:20rpx;
border-radius: 24rpx;
background-color: #fff;
overflow: hidden;
}
.cells .cell{
display: flex;
align-items: center;
padding:0 40rpx;
min-height: 116rpx;
font-size: 30rpx;
position: relative;
}
.cells .cell.cell-active{
background-color:rgba(0,0,0,.1);
}
.cells .cell::after{
content: '';
border-bottom: 1rpx solid rgba(153, 153, 153, 0.2);
position: absolute;
bottom:0;
left:40rpx;
right:40rpx;
}
.cells .cell:last-child::after{
border:0;
}
.cells .cell-hd{
margin-right:20rpx;
}
.cells .cell-hd .icon{
width:40rpx;height:40rpx;
vertical-align: middle;
}
.cells .cell-bd{
flex:1;
}
.cells .cell-ft{
position: relative;
padding-right:40rpx;
}
.cells .cell-ft::after{
content:" ";
width:24rpx;height:48rpx;
-webkit-mask-position:0 0;
mask-position:0 0;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-size:100%;
mask-size:100%;
background-color:currentColor;
color:var(--weui-FG-2);
-webkit-mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);position:absolute;top:50%;right:0;margin-top:-24rpx
}
.tab-bar{
display: flex;
justify-content: space-between;
background-color: #fff;
font-size: 34rpx;
}
.tab-bar .item-container{
flex:1;
text-align: center;
}
.tab-bar .item{
position: relative;
padding:40rpx 0;
color: #555555;
transition-duration: .4s;
display: inline-block;
}
.tab-bar .item::before{
opacity: 0;
content: "";
height:8rpx;
width:100%;
position: absolute;
bottom:0;
background-color:var(--main-color);
transition-duration: .4s;
}
.tab-bar .current .item{
color: var(--main-font-color);
font-weight: 500;
}
.tab-bar .current .item::before{
opacity: 1;
}
navigator button{
vertical-align: middle;
}
.list-empty{
text-align: center;
}
.list-empty .icon{
width:160rpx;height:160rpx;
margin-top:360rpx;
}
.list-empty .title{
font-size: 30rpx;
font-weight: 500;
color:rgba(124, 134, 149, 0.6);
}
.scroll-view-dispatch{
height:100rpx;
}
.page-dispatch{
height:40rpx;
}

BIN
assets/icon/camera.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
assets/icon/community.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 651 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 817 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
assets/icon/list-empty.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
assets/icon/phone.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 964 B

View File

@ -0,0 +1,61 @@
// components/listView/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
"bindrefresherrefresh":{
type:Function
},
"refresherTriggered":{
type:Boolean,
value:false
},
"height":{
type:Number
},
loadMoreText:{
type:String,
value:'已经到底了'
},
showLoadMore:{
type:Boolean,
value:true
},
loadAll:{
type:Boolean,
value:false
}
},
/**
* 组件的初始数据
*/
data: {
defaultHeight:''
},
lifetimes:{
attached(){
const windowInfo = wx.getWindowInfo();
this.setData({
defaultHeight:`calc(100vh)`
})
}
},
/**
* 组件的方法列表
*/
methods: {
refreshList(){
this.triggerEvent('refresh');
},
scrolling(event){
//scrollTop scrollHeight
const bottomHeight = event.detail.scrollHeight-event.detail.scrollTop-this.properties.height;
if(bottomHeight<100){
this.triggerEvent('loadMore');
}
}
}
})

View File

@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

View File

@ -0,0 +1,7 @@
<scroll-view scroll-y refresher-enabled="true" bindrefresherrefresh="refreshList" refresher-triggered="{{refresherTriggered}}" style="height:{{height*2}}rpx;" bindscroll="scrolling">
<slot/>
<view class="load-more" wx:if="{{showLoadMore}}">
<label class="text" wx:if="{{loadAll}}">{{loadMoreText}}</label>
<label class="text" wx:else>加载中...</label>
</view>
</scroll-view>

View File

@ -0,0 +1,21 @@
.load-more{
padding:100rpx 0;
text-align: center;
color: #888888;
font-size:24rpx;
position: relative;
width:80%;
margin:0 auto;
}
.load-more .text{
background-color: var(--main-bgclolor);
padding:0 30rpx;
}
.load-more::before{
content: '';
position: absolute;
left:0;top:112rpx;
width:100%;height:1.5rpx;
background-color: rgba(136, 136, 136, 0.25);
z-index: -1;
}

123
pages/index/index.js Normal file
View File

@ -0,0 +1,123 @@
Page({
data: {
statusBarHeight:0,
list:[{}],
moveEvent:null,
moveViewX:0,
tipsOpacity:1,
tipsRight:120,
moveAreaWidth:0,
moveViewWidth:92,
receiving:false,
scrollViewHeight:0,
isShowConfirm:false,
isShowLeftPanel:false,
tempImgs:[],
maxChooseImgCount:10
},
onLoad(){
const windowInfo = wx.getWindowInfo();
console.log(windowInfo);
this.setData({
statusBarHeight:windowInfo.statusBarHeight,
scrollViewHeight:windowInfo.windowHeight-windowInfo.statusBarHeight-44 - 125
});
//增加列表之后 放在列表加载之后 优化动画效果
this.createSelectorQuery().select('#moveArea0').boundingClientRect((res)=>{
console.log(res);
this.data.moveAreaWidth = res.width;
}).exec();
},
confirmSend(){
this.setData({
isShowConfirm:true
})
},
openLeftPanel(){
this.setData({
isShowLeftPanel:true
})
},
closeLeftPanel(){
this.setData({
isShowLeftPanel:false
})
},
refund(){
wx.showModal({
title: '取消订单需联系客户说明原因',
content: '',
placeholderText:'请输入退款原因',
editable:true,
complete: (res) => {
if (res.cancel) {
}
if (res.confirm) {
}
}
})
},
chooseImage(){
wx.chooseMedia({
count:this.data.maxChooseImgCount - this.data.tempImgs.length,
success:(res)=>{
console.log(res);
this.setData({
tempImgs:this.data.tempImgs.concat(res.tempFiles)
});
}
});
},
navToOrderDetail(){
wx.navigateTo({
url: '/pages/order-detail/index',
})
},
buttonOnMove(event){
if(this.data.receiving)return;
this.setData({
moveEvent:event
});
const index = event.currentTarget.dataset.index;
if(!this.data.moveAreaWidth){
this.createSelectorQuery().select('#moveArea'+index).boundingClientRect((res)=>{
this.data.moveAreaWidth = res.width;
}).exec();
}
let x = this.data.moveEvent.detail.x;
let opacity = 1 - x/(this.data.moveAreaWidth - this.data.moveViewWidth);
let right = opacity*120
this.setData({
tipsOpacity:opacity,
tipsRight:right
})
},
buttonMoveCancel(event){
if(this.data.receiving)return;
const index = event.currentTarget.dataset.index;
this.createSelectorQuery().select('#moveArea'+index).boundingClientRect((res)=>{
const x = this.data.moveEvent.detail.x;
const moveAreaWidth = res.width;
//给 10 像素边界
//moveAreaWidth - this.data.moveViewWidth - 10 <= x
if((moveAreaWidth - this.data.moveViewWidth)/3*2 < x){
console.log('success');
this.setData({
moveViewX:moveAreaWidth - this.data.moveViewWidth,
receiving:true
});
}else{
this.setData({
moveViewX:0
});
}
}).exec();
}
})

6
pages/index/index.json Normal file
View File

@ -0,0 +1,6 @@
{
"usingComponents": {
"list-view":"/components/listView"
},
"navigationStyle": "custom"
}

90
pages/index/index.wxml Normal file
View File

@ -0,0 +1,90 @@
<view style="height:{{statusBarHeight}}px" class="status-bar"></view>
<view class="nav-bar">
<image src="/assets/icon/left-panel-btn.png" class="left-btn" bind:tap="openLeftPanel"/>
<view class="community">
<image class="icon" src="/assets/icon/community.png"/>
<label>朝阳时代西锦</label>
</view>
</view>
<view class="head">
<view class="item current">待接单(0)</view>
<view class="item">待取货(0)</view>
<view class="item">送货中(0)</view>
<view class="item">已送达(0)</view>
</view>
<view class="building">
<view class="item">1栋(10)</view>
<view class="item">2栋(10)</view>
<view class="item">3栋(10)</view>
<view class="item">4栋(10)</view>
<view class="item">5栋(10)</view>
</view>
<view class="test"></view>
<list-view class="package-list" height="{{scrollViewHeight}}">
<view wx:for="{{2}}" wx:key="index" class="item" bind:tap="navToOrderDetail">
<view class="station-list">
<view class="sl-item" wx:for="{{3}}" wx:key="index">
<view class="name">菜鸟驿站(丽晶公馆)</view>
<view class="package">
<view class="key">4件包裹</view>
<view class="value">
<label wx:for="{{6}}" wx:key="index">****** </label>
</view>
</view>
</view>
</view>
<view class="address">
<view class="title">佳兆业丽晶公馆3栋2单元2702</view>
<view class="sub-title">冯先生158****3822丨放在门口</view>
</view>
<view class="btns" wx:if="{{index==0}}">
<button class="button refund-btn" plain capture-catch:tap="refund" data-item="{{item}}">退单</button>
<movable-area class="move-area" id="moveArea{{index}}">
<movable-view class="move-view" direction="horizontal" x="{{moveViewX}}" damping="100"
bindchange="buttonOnMove" data-item="{{item}}" data-index="{{index}}"
disabled="{{receiving}}" capture-catch:touchcancel="buttonMoveCancel"
capture-catch:touchend="buttonMoveCancel">
<image class="icon" src="/assets/icon/double-right-arrow.png"/>
</movable-view>
<view class="tips" style="opacity: {{tipsOpacity}};right:{{tipsRight}}rpx;" wx:if="{{!receiving}}">我要接单</view>
<view class="tips receiving" style="opacity: {{receiving?1:0}};">接单中...</view>
</movable-area>
</view>
<view class="btns" wx:if="{{index==1}}">
<button class="button concat-user-btn">
<image class="icon" src="/assets/icon/phone.png"></image>
<label>联系用户</label>
</button>
<button type="primary" class="confirm-send-btn" capture-catch:tap="confirmSend">我已送达</button>
</view>
</view>
<view class="list-empty" wx:if="{{list.length==0}}">
<image class="icon" src="/assets/icon/list-empty.png"/>
<view class="title">暂无跑腿订单</view>
</view>
</list-view>
<page-container show="{{isShowConfirm}}" position="bottom"
round class="confirm-sending" close-on-slide-down>
<view class="content" wx:if="{{isShowConfirm}}">
<view class="title">拍照留证</view>
<view class="sub-title">当用户要求把包裹放在门口请拍照上传留证</view>
<view class="sub-title">拍摄时请把门牌号和包裹数量整体拍照</view>
<view class="photos">
<view class="item" wx:for="{{tempImgs}}" wx:key="index">
<image class="image" src="{{item.tempFilePath}}"/>
</view>
<view class="take-photo item" bind:tap="chooseImage"
wx:if="{{tempImgs.length<maxChooseImgCount}}">
<image class="icon" src="/assets/icon/camera.png"/>
<view class="title">点击拍照</view>
</view>
</view>
<button class="button" type="primary">我已送达</button>
</view>
</page-container>
<view class="left-panel-mask" wx:if="{{isShowLeftPanel}}" bind:tap="closeLeftPanel"></view>
<view class="left-panel" style="left:{{isShowLeftPanel?'0':'-560rpx'}};">
</view>

266
pages/index/index.wxss Normal file
View File

@ -0,0 +1,266 @@
.status-bar{
background-color:#111111;
}
.nav-bar{
background-color:#111111;
height: 88rpx;
padding:0 24rpx;
display: flex;
align-items: center;
}
.nav-bar .left-btn{
width:56rpx;
height:56rpx;
}
.nav-bar .community{
display: flex;
align-items: center;
color:#fff;
margin-left:24rpx;
background: rgba(255, 255, 255, 0.08);
border-radius: 40rpx;
font-size: 28rpx;
padding:15rpx 30rpx;
}
.nav-bar .community .icon{
width:20rpx;height:20rpx;
margin-right:8rpx;
}
.head{
display: flex;
background-color: #111111;
}
.head .item{
color: #BEBEBE;
font-size: 28rpx;
flex:1;
text-align: center;
padding:39rpx 0 19rpx 0;
}
.head .item.current{
color:#ffffff;
font-weight: 500;
}
.building{
display: flex;
overflow-x: auto;
gap: 10rpx;
margin:20rpx 8rpx;
}
.building .item{
font-size:28rpx;
color: #666666;
padding:15rpx 36rpx;
white-space: nowrap;
background-color: #ffffff;
}
.package-list{
margin-top:30rpx;
}
.package-list .item{
margin:30rpx 16rpx;
background-color: #ffffff;
border-radius: 18rpx;
color: #555555;
padding:56rpx 20rpx 20rpx;
position: relative;
}
.package-list .item:first-child{
margin-top:0;
}
.package-list .item::before{
content: '';
position: absolute;
width:1.2rpx;
background-color: rgba(85, 85, 85, 0.5);
left:38.5rpx;top:90rpx;
bottom:250rpx;
}
.package-list .item .name{
font-size: 40rpx;
font-weight: 600;
}
.package-list .item .package{
font-size:32rpx;
margin-top:24rpx;
display: flex;
}
.package-list .item .station-list .sl-item{
position: relative;
padding-left:64rpx;
padding-bottom:50rpx;
}
.package-list .item .station-list .sl-item:first-child::before{
content: '取';
left:0;top:0;
width:40rpx;height:40rpx;
color:#fff;
font-size: 24rpx;
text-align: center;
line-height: 40rpx;
}
.package-list .item .station-list .sl-item::before{
position: absolute;
left:12rpx;top:12rpx;
width:16rpx;height:16rpx;
content: '';
background-color: #555555;
border-radius: 50%;
display: inline-block;
}
.package-list .item .package .value{
flex:1;
}
.package-list .item .address{
padding-left:64rpx;
position: relative;
}
.package-list .item .address::before{
content: '送';
position: absolute;
top:0;left:0;
width:40rpx;height:40rpx;
background-color: var(--main-color);
border-radius: 50%;
color:#fff;
line-height: 40rpx;
text-align: center;
font-size: 24rpx;
}
.package-list .item .address .title{
color:var(--main-font-color);
font-size: 40rpx;
font-weight: 600;
}
.package-list .item .address .sub-title{
font-size: 32rpx;
margin-top:24rpx
}
.package-list .item .btns{
display: flex;
gap:24rpx;
margin-top:50rpx;
}
.package-list .item .btns .button{
height:96rpx;
line-height: 1;
border-radius: 12rpx;
border: 1.2px solid rgba(85, 85, 85, 0.5);
color: #555555;
font-weight: normal;
padding:30rpx 40rpx;
margin:0;
}
.package-list .item .btns .move-area{
background-color: var(--main-color);
border-radius: 12rpx;
height:96rpx;
flex:1;
}
.package-list .item .btns .move-view{
background-color: #fff;
/* 为了精确定位width 用 px 单位 包括下面的 border*/
width: 88px;height:88rpx;
display: flex;
align-items: center;
justify-content:center;
border-radius: 12rpx;
border:2px solid var(--main-color);
z-index: 1;
}
.package-list .item .btns .move-view .icon{
width:56rpx;height:56rpx;
}
.move-area .tips{
position: absolute;
/* right:120rpx; */
top:30rpx;
color: #000000;
font-size: 36rpx;
z-index: 0;
font-weight: 500;
transition-duration: .1s;
}
.move-area .tips.receiving{
transition-duration: .4s;
left:110rpx;
}
.concat-user-btn{
display: flex;
align-items: center;
}
.concat-user-btn .icon{
width:28rpx;height:28rpx;
border: 1.2rpx solid rgba(85, 85, 85, 0.5);
}
.confirm-send-btn{
flex:1;
height:96rpx;
line-height: 1;
border-radius: 12rpx;
}
.confirm-sending .content{
padding:50rpx 40rpx 80rpx 40rpx;
}
.confirm-sending .title{
font-size: 36rpx;
font-weight: 600;
padding-bottom:26rpx;
}
.confirm-sending .sub-title{
font-size: 30rpx;
color: #555555;
margin-top:24rpx;
}
.confirm-sending .photos{
margin-top:60rpx;
display: flex;
flex-wrap: wrap;
gap: 20rpx;
}
.confirm-sending .photos .item{
text-align: center;
width:160rpx;
height:160rpx;
border-radius: 12rpx;
border: 1.2rpx solid rgba(124, 134, 149, 0.3);
}
.confirm-sending .photos .item .image{
width:100%;height:100%;
}
.confirm-sending .photos .take-photo .icon{
width:36rpx;height:36rpx;
margin-top:40rpx;
}
.confirm-sending .photos .take-photo .title{
font-size: 24rpx;
color: #7C8695;
margin-top:16rpx;
}
.confirm-sending .button{
margin-top:114rpx;
}
.left-panel{
width:560rpx;
background-color: #fff;
height:100vh;
position: fixed;
left:0;top:0;
left:-560rpx;
transition-duration: .3s;
}
.left-panel-mask{
position: fixed;
width:100vw;
height:100vh;
left:0;top:0;
background-color: rgba(0, 0, 0, 0.6);
}

View File

@ -0,0 +1,69 @@
// pages/order-detail/index.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
copyOrderId(){
wx.setClipboardData({
data: 'data',
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})

View File

@ -0,0 +1,4 @@
{
"usingComponents": {},
"navigationBarTitleText": "订单详情"
}

View File

@ -0,0 +1,60 @@
<view class="page-container package-info">
<view class="station-list" bind:tap="navToOrderDetail">
<view class="sl-item" wx:for="{{3}}" wx:key="index">
<view class="name">菜鸟驿站(丽晶公馆)</view>
<view class="package">
<view class="key">4件包裹</view>
<view class="value">
<label wx:for="{{6}}" wx:key="index">****** </label>
</view>
</view>
</view>
</view>
<view class="address">
<view class="title">佳兆业丽晶公馆3栋2单元2702</view>
<view class="sub-title">冯先生158****3822丨放在门口</view>
</view>
</view>
<view class="page-container steps">
<view class="item night">
<view class="content">
<view class="name">接单</view>
<view class="time">07-01 14:23</view>
</view>
</view>
<view class="item night">
<view class="content">
<view class="name">取货</view>
<view class="time">07-01 14:23</view>
</view>
</view>
<view class="item half-night">
<view class="content">
<view class="name">送达</view>
<view class="time">07-01 14:23</view>
</view>
</view>
</view>
<view class="page-container photos">
<view class="title">拍照留证</view>
<view class="imgs">
<image class="image" src="/assets/icon/phone.png" wx:for="{{4}}" wx:key="index"/>
</view>
</view>
<view class="page-container income">
<label>订单收益:</label>
<label class="money">3.0</label>
</view>
<view class="page-container order-info">
<view class="row">
<view class="key">订单编号</view>
<view class="value">2024071166325555</view>
<view class="copy-area" bind:tap="copyOrderId">
<view class="copy-btn">复制</view>
</view>
</view>
<view class="row">
<view class="key">下单时间</view>
<view class="value">2024071166325555</view>
</view>
</view>

View File

@ -0,0 +1,219 @@
.package-info{
padding:56rpx 20rpx 40rpx 20rpx;
position: relative;
color: #555555;
}
.package-info::before{
content: '';
position: absolute;
width:1.2rpx;
background-color: rgba(85, 85, 85, 0.5);
left:38.5rpx;top:90rpx;
bottom:130rpx;
}
.package-info .name{
font-size: 40rpx;
font-weight: 600;
}
.package-info .package{
font-size:32rpx;
margin-top:24rpx;
display: flex;
}
.package-info .package{
font-size:32rpx;
margin-top:24rpx;
display: flex;
}
.package-info .station-list .sl-item{
position: relative;
padding-left:64rpx;
padding-bottom:50rpx;
}
.package-info .station-list .sl-item:first-child::before{
content: '取';
left:0;top:0;
width:40rpx;height:40rpx;
color:#fff;
font-size: 24rpx;
text-align: center;
line-height: 40rpx;
}
.package-info .station-list .sl-item::before{
position: absolute;
left:12rpx;top:12rpx;
width:16rpx;height:16rpx;
content: '';
background-color: #555555;
border-radius: 50%;
display: inline-block;
}
.package-list .item .station-list .sl-item{
padding-bottom:50rpx;
}
.package-info .package .value{
flex:1;
}
.package-info .address{
padding-left:64rpx;
position: relative;
}
.package-info .address::before{
content: '送';
position: absolute;
top:0;left:0;
width:40rpx;height:40rpx;
background-color: var(--main-color);
border-radius: 50%;
color:#fff;
line-height: 40rpx;
text-align: center;
font-size: 24rpx;
}
.package-info .address .title{
color:var(--main-font-color);
font-size: 40rpx;
font-weight: 600;
}
.package-info .address .sub-title{
font-size: 32rpx;
margin-top:24rpx
}
.steps{
display: flex;
justify-content: space-between;
color: #999999;
padding:40rpx 20rpx 28rpx 20rpx;
position: relative;
}
.steps .item{
flex:1;
padding-top:36rpx;
position: relative;
}
.steps .item.night{
color:var(--main-font-color);
}
/* 左边线 */
.steps .item::before{
content: '';
height:1.2rpx;
width:calc(50% - 20rpx);
position: absolute;
top:8rpx;
left: 0;
background-color:rgba(153, 153, 153, 0.3);
}
.steps .item.night::before{
background-color: var(--main-color);
}
.steps .item.half-night::before{
background-color: var(--main-color);
}
/* 右边线 */
.steps .item::after{
content: '';
height:1.2rpx;
width:calc(50% - 20rpx);
position: absolute;
top:8rpx;
right: 0;
background-color:rgba(153, 153, 153, 0.3);
}
.steps .item.night::after{
background-color: var(--main-color);
}
.steps .item .content{
width:150rpx;
margin: 0 auto;
text-align: center;
position: relative;
}
.steps .item .name{
font-size: 28rpx;
position: relative;
}
/* 小圆点 */
.steps .item .name::after{
content: '';
position: absolute;
width:16rpx;height:16rpx;
background-color: #D5D5D5;
border-radius: 50%;
top:-35rpx;left:70rpx;
z-index: 1;
}
.steps .item.night .name::after{
background-color: var(--main-color);
}
.steps .item .time{
font-size:24rpx;
margin-top:17rpx;
}
.steps .item:first-child .content{
margin: 0;
}
.steps .item:first-child::before{
display: none;
}
.steps .item:first-child::after{
width:calc(50% + (100% - 150rpx)/2 - 20rpx);
}
.steps .item:last-child .content{
margin:0 0 0 auto;
}
.steps .item:last-child::before{
width:calc(50% + (100% - 150rpx)/2 - 20rpx);
}
.steps .item:last-child::after{
display: none;
}
.income{
color: #666666;
}
.income .money{
font-size:40rpx;
}
.order-info .row{
display: flex;
align-items: center;
margin-top:30rpx;
}
.order-info .row:first-child{
margin:0;
}
.order-info .row .key{
color: #666666;
}
.order-info .row .value{
flex:1;
margin-left:30rpx;
}
.order-info .row .copy-area{
padding:4rpx 6rpx;
}
.order-info .row .copy-btn{
font-size: 24rpx;
border-radius: 8rpx;
border: 0.6rpx solid rgba(153, 153, 153, 0.5);
padding:6rpx 12rpx;
}
.photos .title{
font-size: 28rpx;
font-weight: 600;
}
.photos .imgs{
margin-top:30rpx;
display: flex;
gap: 20rpx;
}
.photos .imgs .image{
width:160rpx;height:160rpx;
border-radius: 12rpx;
}

28
project.config.json Normal file
View File

@ -0,0 +1,28 @@
{
"compileType": "miniprogram",
"libVersion": "trial",
"packOptions": {
"ignore": [],
"include": []
},
"setting": {
"coverView": true,
"es6": true,
"postcss": true,
"minified": true,
"enhance": true,
"showShadowRootInWxmlPanel": true,
"packNpmRelationList": [],
"babelSetting": {
"ignore": [],
"disablePlugins": [],
"outputPath": ""
}
},
"condition": {},
"editorSetting": {
"tabIndent": "auto",
"tabSize": 2
},
"appid": "wxcc9b05f43951f1c0"
}

View File

@ -0,0 +1,8 @@
{
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
"projectname": "beefast-mini-deliveryman",
"setting": {
"compileHotReLoad": true
},
"libVersion": "3.7.7"
}

7
sitemap.json Normal file
View File

@ -0,0 +1,7 @@
{
"desc": "关于本文件的更多信息,请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
"rules": [{
"action": "allow",
"page": "*"
}]
}

19
utils/util.js Normal file
View File

@ -0,0 +1,19 @@
const formatTime = date => {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
}
const formatNumber = n => {
n = n.toString()
return n[1] ? n : `0${n}`
}
module.exports = {
formatTime
}