deliveryman/dm-wechat-mini
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tab3

Browse Source
This commit is contained in:
潇 2025-01-14 05:13:23 +08:00
parent d063a2af3b
commit 1faed0f4b0
19 changed files with 915 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app.json
View File

@ -13,7 +13,10 @@
"pages/help/address/index/index",
"pages/help/address/edit/index",
"pages/shop/detail/index",
"pages/shop/success/index"
"pages/shop/success/index",
"pages/order/detail/index",
"pages/order/detail-group/index",
"pages/order/success/index"
],
"window": {
"navigationBarTextStyle": "black",

12
app.wxss
View File

@ -138,6 +138,9 @@ page-container .content{
.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;
@ -164,3 +167,12 @@ page-container .content{
font-size: 28rpx;
font-weight:normal;
}
.bottom-bar{
border-radius: 24rpx 24rpx 0 0;
padding:24rpx 24rpx 84rpx;
position:fixed;
bottom:0;
left:0;right:0;
background-color: #fff;
}

BIN
assets/icon/order/package@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 386 B

BIN
assets/icon/order/right-arrow@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 670 B

72
pages/order/detail-group/index.js Normal file
View File

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

3
pages/order/detail-group/index.json Normal file
View File

@ -0,0 +1,3 @@
{
"usingComponents": {}
}

65
pages/order/detail-group/index.wxml Normal file
View File

@ -0,0 +1,65 @@
<view class="page-container prd-info">
<view class="head">
<image class="image" src="/assets/imgs/for_test/woman.png"/>
<view class="center">
<view class="name">【洗吹】精致造型</view>
<view class="tags">
<view class="tag">周一至周五可用</view>
<view class="tag">免预约</view>
</view>
</view>
<view class="money money-normal">9.9</view>
</view>
<view class="spliter dashed"></view>
<view class="qrcode" bind:tap="goToSuccess">
二维码区域，小程序存储总量限制
</view>
</view>
<view class="page-container address">
<view class="left">
<view class="text1">椰岛造型</view>
<view class="text2">距离 2.1km</view>
</view>
<view class="right location">
<view class="icon-con">
<image class="icon" src="/assets/icon/shop/location@2x.png"/>
</view>
<view class="text">导航</view>
</view>
<view class="right phone">
<view class="icon-con">
<image class="icon" src="/assets/icon/shop/phone@2x.png"/>
</view>
<view class="text">电话</view>
</view>
</view>
<view class="page-container order-info">
<view class="title">订单信息</view>
<view class="spliter"></view>
<view class="kv">
<view class="key">交易订单</view>
<view class="value">4972003158292222817</view>
<view class="copy">复制</view>
</view>
<view class="kv">
<view class="key">交易方式</view>
<view class="value">微信支付</view>
</view>
<view class="kv">
<view class="key">手机号码</view>
<view class="value">157****0627</view>
</view>
<view class="kv">
<view class="key">下单时间</view>
<view class="value">2024/10/10 12:03:21</view>
</view>
</view>
<view class="bottom-bar">
<button class="button button1" plain size="mini">取消订单</button>
<button class="button button2" plain size="mini">联系客服</button>
</view>
<view class="patch"></view>

131
pages/order/detail-group/index.wxss Normal file
View File

@ -0,0 +1,131 @@
.page-container .title{
font-weight: 600;
font-size:32rpx;
display: flex;
align-items: center;
}
.prd-info .head{
display: flex;
}
.prd-info .head .image{
width:120rpx;height:120rpx;
}
.prd-info .head .center{
flex: 1;
margin-left:20rpx;
margin-top:10rpx;
}
.prd-info .head .money{
margin-top:10rpx;
}
.prd-info .head .tags{
margin-top:22rpx;
}
.prd-info .spliter{
margin:20rpx 0 30rpx 0;
}
.prd-info .qrcode{
width:400rpx;height:400rpx;
margin: 0 auto;
background-color: #999;
}
.address{
display: flex;
}
.address .left{
flex:1;
}
.address .left .text1{
font-size: 36rpx;
font-weight: 500;
}
.address .left .text2{
font-size: 26rpx;
margin-top:40rpx;
}
.address .icon-con{
background-color: rgba(153, 153, 153, 0.1);
border-radius: 50%;
display: inline-flex;
align-items: center;
padding:8rpx;
}
.address .icon{
width:30rpx;height:30rpx;
}
.address .right{
font-size: 26rpx;
color: #888888;
margin-left:48rpx;
text-align: center;
}
.address .right .text{
margin-top:32rpx;
}
.order-info .kv{
display: flex;
align-items: center;
height:58rpx;
}
.order-info .spliter{
margin:28rpx 0 18rpx 0;
}
.order-info .kv .key{
font-size: 26rpx;
color: #888888;
}
.order-info .kv .value{
font-size: 28rpx;
margin-left:30rpx;
flex:1;
display:flex;
align-items: center;
}
.order-info .kv .copy{
font-size: 20rpx;
border-radius: 60rpx;
border: 0.5px solid rgba(153, 153, 153, 0.5);
color: #888888;
line-height: 32rpx;
padding:0 14rpx;
}
.order-info .kv .tag{
border: 1rpx solid #EB0000;
color: #EB0000;
font-size: 24rpx;
border-radius: 8rpx;
line-height: 40rpx;
padding:0 10rpx;
margin-left: 32rpx;
}
.bottom-bar{
padding:34rpx 34rpx 94rpx;
text-align: right;
}
.bottom-bar .button{
line-height: 72rpx;
padding:0 36rpx;
font-weight: normal;
border-radius: 18rpx;
}
.bottom-bar .button1{
color: #555555;
border: 1rpx solid rgba(153, 153, 153, 0.5);
font-size: 32rpx;
}
.bottom-bar .button2{
color: #1A4DEB;
border: 1rpx solid #1A4DEB;
font-size: 32rpx;
margin-left:30rpx;
}
.patch{
padding-bottom:200rpx;
}

66
pages/order/detail/index.js Normal file
View File

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

4
pages/order/detail/index.json Normal file
View File

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

87
pages/order/detail/index.wxml Normal file
View File

@ -0,0 +1,87 @@
<view class="order-status waiting">待接单</view>
<view class="page-container sender">
<view class="title">跑腿员</view>
<view class="spliter"></view>
<view class="info">
<image class="avatar" src="/assets/imgs/for_test/avatar.png"/>
<view class="center">
<view class="name">张三</view>
<view class="desc">已安全送达0件</view>
</view>
<button class="button" plain size="mini">
<image class="icon" src="/assets/icon/shop/phone@2x.png"/>
<label>联系他</label>
</button>
</view>
</view>
<view class="page-container address">
<view class="title">送货地址</view>
<view class="spliter"></view>
<view class="text">朝阳时代西锦12栋1单元2072</view>
<view class="user">何灵先生 158****3822</view>
</view>
<view class="page-container package-info">
<view class="title">
<view class="left">取件信息</view>
<view class="right">
<label>送达时间</label>
<label class="time">18:00～21:00</label>
</view>
</view>
<view class="spliter"></view>
<view class="package">
<view class="p-title">妈妈驿站 (朝阳时代西锦)  共5件包裹</view>
<view class="code-list">
<view class="item">1-1-1111</view>
<view class="item">2-2-2222</view>
<view class="item">3-3-3333</view>
<view class="item">4-4-4444</view>
</view>
</view>
<view class="spliter"></view>
<view class="package">
<view class="p-title">菜鸟驿站 (朝阳时代西锦)  共1件包裹</view>
<view class="code-list">
<view class="item">1-1-1111</view>
<view class="item">2-2-2222</view>
<view class="item">3-3-3333</view>
<view class="item">4-4-4444</view>
</view>
</view>
</view>
<view class="page-container send-way">
<view class="title">
<view class="left">送达方式</view>
<view class="right">敲门递件</view>
</view>
</view>
<view class="page-container order-info">
<view class="title">订单信息</view>
<view class="spliter"></view>
<view class="kv">
<view class="key">订单编号</view>
<view class="value">2024071166325555</view>
<view class="copy">复制</view>
</view>
<view class="kv">
<view class="key">提交时间</view>
<view class="value">2024-07-11 16:46:32</view>
</view>
<view class="kv">
<view class="key">取件数量</view>
<view class="value">5</view>
</view>
<view class="kv">
<view class="key">跑腿费用</view>
<view class="value">
<view class="money">3.5</view>
<view class="tag">先享后付</view>
</view>
</view>
</view>
<view class="bottom-bar">
<button class="button button1" plain size="mini">取消订单</button>
<button class="button button2" plain size="mini">联系客服</button>
</view>
<view class="patch"></view>

165
pages/order/detail/index.wxss Normal file
View File

@ -0,0 +1,165 @@
.page-container .title{
font-weight: 600;
font-size:32rpx;
display: flex;
align-items: center;
}
.page-container .title .left{
flex:1;
}
.page-container .title .right{
font-weight: normal;
font-size: 30rpx;
}
.page-container .title .right .time{
color:#EB0000;
font-weight: 500;
font-size: 32rpx;
margin-left: 10rpx;
}
.order-status{
margin:50rpx 20rpx;
display: flex;
align-items: center;
font-size: 40rpx;
font-weight: 600;
}
.order-status.waiting{
color:#1A4DEB;
}
.order-status::before{
content: "";
display: block;
width:10rpx;height:44rpx;
margin-right:24rpx;
border-radius: 6rpx;
background-color:#000;
}
.order-status.waiting::before{
background-color: #1A4DEB;
}
.page-container .spliter{
margin:24rpx 0 40rpx 0;
}
.sender .info{
display: flex;
align-items: center;
}
.sender .info .avatar{
width:100rpx;height:100rpx;
}
.sender .info .center{
margin-left:24rpx;
flex:1;
}
.sender .info .name{
font-size: 30rpx;
font-weight: 600;
}
.sender .info .desc{
font-size: 26rpx;
color: #888888;
margin-top:24rpx;
}
.sender .info .button{
font-size: 24rpx;
font-weight: normal;
border: 0.6px solid #1A4DEB;
color:#1A4DEB;
border-radius: 12rpx;
}
.sender .info .icon{
width:24rpx;height:24rpx;
}
.address .text{
font-size: 34rpx;
font-weight: 500;
}
.address .user{
font-size: 32rpx;
color: #888888;
margin-top:26rpx;
}
.package-info{
}
.package-info .package{
}
.package-info .package .p-title{
font-size: 30rpx;
color: #888888;
}
.package-info .package .code-list{
font-size: 34rpx;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
row-gap: 30rpx;
column-gap: 84rpx;
margin-top: 30rpx;
}
.package-info .package .item{
}
.order-info .kv{
display: flex;
align-items: center;
height:64rpx;
}
.order-info .kv .key{
font-size: 30rpx;
color: #888888;
}
.order-info .kv .value{
font-size: 32rpx;
margin-left:30rpx;
flex:1;
display:flex;
align-items: center;
}
.order-info .kv .copy{
font-size: 22rpx;
border-radius: 60rpx;
background-color: #EBF0FF;
color:#1A4DEB;
line-height: 32rpx;
padding:0 14rpx;
}
.order-info .kv .tag{
border: 1rpx solid #EB0000;
color: #EB0000;
font-size: 24rpx;
border-radius: 8rpx;
line-height: 40rpx;
padding:0 10rpx;
margin-left: 32rpx;
}
.bottom-bar{
padding:34rpx 34rpx 94rpx;
text-align: right;
}
.bottom-bar .button{
line-height: 72rpx;
padding:0 36rpx;
font-weight: normal;
border-radius: 18rpx;
}
.bottom-bar .button1{
color: #555555;
border: 1rpx solid rgba(153, 153, 153, 0.5);
font-size: 32rpx;
}
.bottom-bar .button2{
color: #1A4DEB;
border: 1rpx solid #1A4DEB;
font-size: 32rpx;
margin-left:30rpx;
}
.patch{
padding-bottom:200rpx;
}
.send-way .left{
padding:10rpx 0;
}

10
pages/order/index/index.js
View File

@ -11,6 +11,16 @@ Page({
const tabIndex = event.currentTarget.dataset.index;
this.setData({tabIndex})
},
goToDetail(){
wx.navigateTo({
url: '/pages/order/detail/index',
})
},
goToGroupDetail(){
wx.navigateTo({
url: '/pages/order/detail-group/index',
})
},
/**
* 生命周期函数--监听页面加载

53
pages/order/index/index.wxml
View File

@ -8,7 +8,58 @@
</view>
</view>
<view class="list-empty">
<view class="order-list" wx:if="{{tabIndex==0}}">
<view class="item" wx:for="{{3}}" wx:key="index" bind:tap="goToDetail">
<view class="head">
<view class="icon-con">
<image class="icon" src="/assets/icon/order/package@2x.png"/>
</view>
<view class="center">代取快递</view>
<view class="status {{index==0?'waiting':(index==1?'receiving':'')}}">
{{index==0?'待接单':(index==1?'已接单':'')}}
</view>
</view>
<view class="content">
<view class="spliter"></view>
<view class="address">朝阳时代西锦12栋1单元2072</view>
<view class="time">下单时间：2024-12-07 10:58:31</view>
<view class="pay" wx:if="{{index==2}}">
<view class="left">
<label>跑腿费用</label>
<label class="money">3.4</label>
</view>
<button class="button" type="primary" size="mini">立即支付</button>
</view>
</view>
</view>
</view>
<view class="group-list" wx:if="{{tabIndex==1}}">
<view class="item status-waiting" wx:for="{{3}}" wx:key="index" bind:tap="goToGroupDetail">
<view class="head">
<view class="name">
<label>椰岛造型</label>
<image class="icon" src="/assets/icon/order/right-arrow@2x.png"/>
</view>
<view class="status">待使用</view>
</view>
<view class="content">
<image class="image" src="/assets/imgs/for_test/woman.png"/>
<view class="center">
<view>【洗吹】精致造型</view>
<view class="tags">
<view class="tag">周一至周五可用</view>
<view class="tag">免预约</view>
</view>
</view>
<view class="money money-normal">9.9</view>
</view>
<view class="btns">
<button class="button button1" plain size="mini">再来一单</button>
<button class="button button2" plain size="mini">查看券码</button>
</view>
</view>
</view>
<view class="list-empty" wx:if="{{false}}">
<image class="icon" src="/assets/icon/order/empty@2x.png"/>
<view class="text">暂无相关订单</view>
</view>

131
pages/order/index/index.wxss
View File

@ -34,6 +34,84 @@
opacity: 1;
}
.order-list{}
.order-list .item{
background-color: #fff;
border-radius: 18rpx;
margin:24rpx 0;
padding:30rpx;
}
.order-list .head{
display: flex;
align-items: center;
}
.order-list .head .center{
margin-left:24rpx;
flex:1;
font-size:34rpx;
font-weight: 500;
}
.order-list .head .status{
font-size: 32rpx;
}
.order-list .head .status.waiting{
color: #1A4DEB;
}
.order-list .head .status.receiving{
color:#FF8400;
}
.order-list .head .icon-con{
padding: 10rpx;
background-color: #1A4DEB;
border-radius: 50%;
display: flex;
align-items: center;
}
.order-list .head .icon-con .icon{
width:36rpx;height:36rpx;
display: inline-block;
}
.order-list .head{
display: flex;
}
.order-list .content{
margin-top:24rpx;
margin-left:80rpx;
}
.order-list .content .address{
margin-top:30rpx;
font-size: 34rpx;
font-weight: 500;
}
.order-list .content .time{
font-size: 26rpx;
color:#888888;
margin-top:24rpx;
padding-bottom:48rpx;
}
.order-list .content .pay{
display: flex;
justify-content: space-between;
align-items: center;
margin-top:12rpx;
font-size: 26rpx;
color: #888888;
}
.order-list .content .pay .money{
margin-left:12rpx;
}
.order-list .content .pay .left{
border-bottom: 0.5px solid rgba(136, 136, 136, 0.2);
padding:20rpx 0;
}
.order-list .content .pay .button{
margin:0;
border-radius: 18rpx;
font-size:28rpx;
line-height: 1;
padding:20rpx 24rpx;
}
.list-empty{
text-align: center;
margin-top:380rpx;
@ -45,3 +123,56 @@
font-size:30rpx;
color:#7C8695
}
.group-list .item{
background-color: #fff;
border-radius: 18rpx;
padding: 30rpx 40rpx;
margin:24rpx 0;
}
.group-list .item.status-waiting .status{
color: #1A4DEB;
}
.group-list .head{
display: flex;
}
.group-list .head .name{
font-size: 32rpx;
font-weight: 600;
flex:1;
display: flex;
align-items: center;
}
.group-list .head .name .icon{
width:28rpx;height:28rpx;
margin-left:4rpx;
}
.group-list .content{
display: flex;
margin-top:30rpx;
}
.group-list .content .image{
width:160rpx;height:160rpx;
}
.group-list .content .center{
flex:1;
margin-left:40rpx;
}
.group-list .content .tags{
margin-top:22rpx;
}
.group-list .btns{
text-align: right;
}
.group-list .btns .button{
font-size: 27rpx;
font-weight: normal;
line-height: 1;
padding:16rpx 26rpx;
border-radius: 12rpx;
}
.group-list .btns .button2{
color: #1A4DEB;
margin-left: 20rpx;
}

66
pages/order/success/index.js Normal file
View File

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

3
pages/order/success/index.json Normal file
View File

@ -0,0 +1,3 @@
{
"usingComponents": {}
}

9
pages/order/success/index.wxml Normal file
View File

@ -0,0 +1,9 @@
<view class="success">
<icon class="icon" type="success" size="120rpx" color="#1A4DEB"/>
<view class="msg">扫码核销成功</view>
<view class="prd-indo">
<label class="name">【洗吹】精致造型</label>
<label class="money">9.9</label>
</view>
<button class="button" size="mini">完成</button>
</view>

35
pages/order/success/index.wxss Normal file
View File

@ -0,0 +1,35 @@
.success{
background-color: #fff;
text-align: center;
height: 100%;
width:100%;
position: absolute;
padding-top:150rpx;
box-sizing: border-box;
}
.success .msg{
font-size: 36rpx;
font-weight: 500;
margin-top:38rpx;
}
.success .prd-indo{
border-top:1rpx dashed rgba(153, 153, 153, 0.5);
border-bottom:1rpx dashed rgba(153, 153, 153, 0.5);
padding:48rpx 0;
display: flex;
text-align: left;
margin:100rpx 50rpx;
font-size: 32rpx;
font-weight: 500;
}
.success .prd-indo .name{
flex:1;
}
.success .button{
position: absolute;
line-height: 90rpx;
width:320rpx;
background-color: #F1F1F1;
left:calc(50% - 160rpx);
bottom:180rpx;
}