commit 177b6d76cbb8a9a84574237194f03952c67691a2 Author: 潇 Date: Mon Feb 17 03:11:35 2025 +0800 首页+订单详情 diff --git a/app.js b/app.js new file mode 100644 index 0000000..1ed57c4 --- /dev/null +++ b/app.js @@ -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 + } +}) diff --git a/app.json b/app.json new file mode 100644 index 0000000..0e75b00 --- /dev/null +++ b/app.json @@ -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" +} diff --git a/app.wxss b/app.wxss new file mode 100644 index 0000000..0ffc008 --- /dev/null +++ b/app.wxss @@ -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; +} \ No newline at end of file diff --git a/assets/icon/camera.png b/assets/icon/camera.png new file mode 100644 index 0000000..392170a Binary files /dev/null and b/assets/icon/camera.png differ diff --git a/assets/icon/community.png b/assets/icon/community.png new file mode 100644 index 0000000..c469a07 Binary files /dev/null and b/assets/icon/community.png differ diff --git a/assets/icon/double-right-arrow.png b/assets/icon/double-right-arrow.png new file mode 100644 index 0000000..43a3a8c Binary files /dev/null and b/assets/icon/double-right-arrow.png differ diff --git a/assets/icon/left-panel-btn.png b/assets/icon/left-panel-btn.png new file mode 100644 index 0000000..e573fbf Binary files /dev/null and b/assets/icon/left-panel-btn.png differ diff --git a/assets/icon/list-empty.png b/assets/icon/list-empty.png new file mode 100644 index 0000000..a96327b Binary files /dev/null and b/assets/icon/list-empty.png differ diff --git a/assets/icon/phone.png b/assets/icon/phone.png new file mode 100644 index 0000000..c1a7e93 Binary files /dev/null and b/assets/icon/phone.png differ diff --git a/components/listView/index.js b/components/listView/index.js new file mode 100644 index 0000000..5178677 --- /dev/null +++ b/components/listView/index.js @@ -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'); + } + } + } +}) \ No newline at end of file diff --git a/components/listView/index.json b/components/listView/index.json new file mode 100644 index 0000000..e8cfaaf --- /dev/null +++ b/components/listView/index.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/components/listView/index.wxml b/components/listView/index.wxml new file mode 100644 index 0000000..3b044a7 --- /dev/null +++ b/components/listView/index.wxml @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/components/listView/index.wxss b/components/listView/index.wxss new file mode 100644 index 0000000..6c9d683 --- /dev/null +++ b/components/listView/index.wxss @@ -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; +} \ No newline at end of file diff --git a/pages/index/index.js b/pages/index/index.js new file mode 100644 index 0000000..f567908 --- /dev/null +++ b/pages/index/index.js @@ -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(); + } +}) diff --git a/pages/index/index.json b/pages/index/index.json new file mode 100644 index 0000000..f397104 --- /dev/null +++ b/pages/index/index.json @@ -0,0 +1,6 @@ +{ + "usingComponents": { + "list-view":"/components/listView" + }, + "navigationStyle": "custom" +} \ No newline at end of file diff --git a/pages/index/index.wxml b/pages/index/index.wxml new file mode 100644 index 0000000..c13bcb0 --- /dev/null +++ b/pages/index/index.wxml @@ -0,0 +1,90 @@ + + + + + + + + + + 待接单(0) + 待取货(0) + 送货中(0) + 已送达(0) + + + 1栋(10) + 2栋(10) + 3栋(10) + 4栋(10) + 5栋(10) + + + + + + + 菜鸟驿站（丽晶公馆） + + 4件包裹： + + + + + + + + 佳兆业丽晶公馆3栋2单元2702 + 冯先生：158****3822丨放在门口 + + + + + + + + 我要接单 + 接单中... + + + + + + + + + + 暂无跑腿订单 + + + + + + 拍照留证 + 当用户要求把包裹放在门口请拍照上传留证 + 拍摄时请把门牌号和包裹数量整体拍照 + + + + + + + 点击拍照 + + + + + + + + + + diff --git a/pages/index/index.wxss b/pages/index/index.wxss new file mode 100644 index 0000000..976808a --- /dev/null +++ b/pages/index/index.wxss @@ -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); +} \ No newline at end of file diff --git a/pages/order-detail/index.js b/pages/order-detail/index.js new file mode 100644 index 0000000..8f99607 --- /dev/null +++ b/pages/order-detail/index.js @@ -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() { + + } +}) \ No newline at end of file diff --git a/pages/order-detail/index.json b/pages/order-detail/index.json new file mode 100644 index 0000000..781f718 --- /dev/null +++ b/pages/order-detail/index.json @@ -0,0 +1,4 @@ +{ + "usingComponents": {}, + "navigationBarTitleText": "订单详情" +} \ No newline at end of file diff --git a/pages/order-detail/index.wxml b/pages/order-detail/index.wxml new file mode 100644 index 0000000..259f157 --- /dev/null +++ b/pages/order-detail/index.wxml @@ -0,0 +1,60 @@ + + + + 菜鸟驿站（丽晶公馆） + + 4件包裹： + + + + + + + + 佳兆业丽晶公馆3栋2单元2702 + 冯先生：158****3822丨放在门口 + + + + + + 接单 + 07-01 14:23 + + + + + 取货 + 07-01 14:23 + + + + + 送达 + 07-01 14:23 + + + + + 拍照留证 + + + + + + + + + + + 订单编号 + 2024071166325555 + + 复制 + + + + 下单时间 + 2024071166325555 + + diff --git a/pages/order-detail/index.wxss b/pages/order-detail/index.wxss new file mode 100644 index 0000000..a054ae5 --- /dev/null +++ b/pages/order-detail/index.wxss @@ -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; +} \ No newline at end of file diff --git a/project.config.json b/project.config.json new file mode 100644 index 0000000..1feff75 --- /dev/null +++ b/project.config.json @@ -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" +} \ No newline at end of file diff --git a/project.private.config.json b/project.private.config.json new file mode 100644 index 0000000..47882a9 --- /dev/null +++ b/project.private.config.json @@ -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" +} \ No newline at end of file diff --git a/sitemap.json b/sitemap.json new file mode 100644 index 0000000..ca02add --- /dev/null +++ b/sitemap.json @@ -0,0 +1,7 @@ +{ + "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", + "rules": [{ + "action": "allow", + "page": "*" + }] +} \ No newline at end of file diff --git a/utils/util.js b/utils/util.js new file mode 100644 index 0000000..764bc2c --- /dev/null +++ b/utils/util.js @@ -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 +}