Skip to content

7
7-Eleven
Commit d922ca36 by 赵雅纹
Options

Merge branch 'feature-zyw-sc' into 'dev_7.1.0' 

订单详情和物流

See merge request !59
parents b1ed2e69 3a213210
Showing with 881 additions and 3 deletions
src/app.json
......@@ -29,7 +29,9 @@
"pages/addAddress/addAddress",
"pages/order/order",
"pages/refundDetail/refundDetail",
"pages/refund/refund"
"pages/refund/refund",
"pages/orderDetail/orderDetail",
"pages/logistics/logistics"
],
"subPackages": [
{
......
src/app.wxss
......@@ -52,6 +52,12 @@ page {
border: 1px solid #CB3C3C;
font-size: 25rpx;
}
.btn-gray{
background-color: #959595;
color: #ffffff;
border: 1px solid #959595;
font-size: 25rpx;
}
.btn-outline{
background: none;
color: #CB3C3C;
......
src/pages/logistics/logistics.js 0 → 100644
// pages/logistics/logistics.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
src/pages/logistics/logistics.json 0 → 100644
{
"navigationBarTitleText": "订单详情",
"usingComponents": {}
}
\ No newline at end of file
src/pages/logistics/logistics.wxml 0 → 100644
<!--pages/logistics/logistics.wxml-->
<view class="page-logistics">
<view class="header-wrap">
<image class="header-bg" src="/assets/imgs/7_1_0/logistics-bg.jpg"></image>
<view class="logistics-status">
<view class="status">物流公司：</view>
<view class="desc">物流单号：4654657</view>
<view class="copy" bindtap="copy" data-content="89687687687687786">复制</view>
</view>
</view>
<!-- 物流时间轴 -->
<view class='expressRecord'>
<!-- 顶部收货地址 -->
<view class='expressRecord-getAddress'>
<view class='expressRecord-top'>
<view class='getAddress-icon'>
收
</view>
<view class='getAddress-text'>[收货地址] 广东省深圳市南山区 南山街道 亿利达大厦</view>
</view>
</view>
<!-- 顶部收货地址半个时间轴线 -->
<view class='noReach-online-top-close'></view>
<!-- 单个物流记录点时间轴：当前正在进行的物流状态 -->
<view class='expressRecord-single-close'>
<!-- 左边子容器 -->
<view class='expressRecord-single-noReach-online-top-close'>
<!-- 正在进行的时间轴上半个时间线 -->
<view class='online-top-closing'></view>
<!-- 正在进行的时间轴点 -->
<view class='dot-closing'></view>
<!-- 正在进行的时间轴下半个时间线 -->
<view class='online-bottom'></view>
</view>
<!-- 右边子容器 -->
<view class='expressRecord-text'>
<view class='expressRecord-statusing'>运输中</view>
<view class='expressRecord-status-addressing'>武汉转运中心公司 已发出，下一站 深圳转运中心</view>
</view>
<!-- 相对父级容器绝对定位的日期 -->
<view class='expressRecord-dating'>
<view class='expressRecord-date-text'>
昨天
</view>
<view class='expressRecord-date-time'>
20:39
</view>
</view>
</view>
<!-- 单个物流记录点时间轴：已经过去的物流状态 -->
<view class='expressRecord-single-close'>
<view class='expressRecord-single-noReach-online-top-close'>
<view class='online-top-close'></view>
<view class='dot-close'></view>
<view class='online-bottom'></view>
</view>
<view class='expressRecord-text'>
<view class='expressRecord-status'></view>
<view class='expressRecord-status-address'>武汉转运中心公司 已收入</view>
</view>
<view class='expressRecord-date'>
<view class='expressRecord-date-text'>
昨天
</view>
<view class='expressRecord-date-time'>
20:37
</view>
</view>
</view>
<view class='expressRecord-single-close'>
<view class='expressRecord-single-noReach-online-top-close'>
<view class='online-top-close'></view>
<view class='dot-close'></view>
<view class='online-bottom'></view>
</view>
<view class='expressRecord-text'>
<view class='expressRecord-status'></view>
<view class='expressRecord-status-address'>湖北省孝感市汉川市公司 已打包</view>
</view>
<view class='expressRecord-date'>
<view class='expressRecord-date-text'>
昨天
</view>
<view class='expressRecord-date-time'>
14:37
</view>
</view>
</view>
<view class='expressRecord-single-close'>
<view class='expressRecord-single-noReach-online-top-close'>
<view class='online-top-close'></view>
<view class='dot-close'></view>
<view class='online-bottom'></view>
</view>
<view class='expressRecord-text'>
<view class='expressRecord-status'>已揽件</view>
<view class='expressRecord-status-address'>湖北省孝感市汉川市公司 已收件</view>
</view>
<view class='expressRecord-date'>
<view class='expressRecord-date-text'>
昨天
</view>
<view class='expressRecord-date-time'>
14:17
</view>
</view>
</view>
<view class='expressRecord-single-close'>
<view class='expressRecord-single-noReach-online-top-close'>
<view class='online-top-close'></view>
<view class='dot-close'></view>
<!-- 起始位置，下半个时间轴线不用 -->
<view class='online-bottom-start'></view>
</view>
<view class='expressRecord-text'>
<view class='expressRecord-status'>已发货</view>
<view class='expressRecord-status-address'>卖家发货</view>
</view>
<view class='expressRecord-date'>
<view class='expressRecord-date-text'>
昨天
</view>
<view class='expressRecord-date-time'>
13:50
</view>
</view>
</view>
</view>
<view class="button-wrap">
<button class="btn btn-primary btn-lg">确认收货</button>
<button class="btn btn-lg btn-gray">申请退货</button>
</view>
</view>
src/pages/logistics/logistics.wxss 0 → 100644
/* pages/logistics/logistics.wxss */
@import './../../base/base.wxss';
page{
background: #f9f9f9;
padding-bottom: 95rpx;
overflow-x: hidden;
}
.header-wrap{
position: relative;
width: 750rpx;
height: 180rpx;
overflow-x: hidden;
}
.header-bg{
width: 750rpx;
height: 180rpx;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.logistics-status{
padding: 49rpx 0 0 74rpx;
color: #5E90CD;
}
.logistics-status .status{
font-size: 30rpx;
font-weight: bold;
}
.logistics-status .desc{
font-size: 26rpx;
margin-top: 8rpx;
display: inline-block;
}
.copy{
display: inline-block;
width: 44rpx;
height: 26rpx;
line-height: 26rpx;
border-radius: 6rpx;
border: 1px solid rgba(203, 60, 60, 1);
font-size: 16rpx;
color: #cb3c3c;
text-align: center;
margin-left: 30rpx;
vertical-align: middle;
}
.button-wrap{
position: fixed;
bottom: 0;
width: 100%;
display: flex;
border-top: 1px solid rgba(151,151,151,0.3);
background-color: #ffffff;
flex-direction:row-reverse;
}
.button-wrap button{
width: 214rpx;
}
.expressRecord {
width: 750rpx;
padding-top: 46rpx;
padding-bottom: 200rpx;
background: #fff;
margin: 0 auto;
}
.expressRecord-getAddress {
width: 100%;
font-size: 22rpx;
color: #999;
display: flex;
}
.expressRecord-top {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
}
.getAddress-icon {
width: 30rpx;
height: 30rpx;
border-radius: 50%;
background: #999;
font-size: 18rpx;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
margin-left: 80rpx;
}
.getAddress-text {
margin-left: 20rpx;
}
.noReach-online-top-close {
width: 1rpx;
height: 50rpx;
background: #d7d7d7;
margin-left: 95rpx;
}
.expressRecord-single-close {
width: 100%;
height: 122rpx;
display: flex;
justify-content: flex-start;
align-items: center;
position: relative;
}
.expressRecord-single-noReach-online-top-close {
display: flex;
flex-direction: column;
}
.online-top-closing {
width: 1rpx;
height: 50rpx;
background: #d7d7d7;
margin-left: 95rpx;
}
.online-top-close {
width: 1rpx;
height: 50rpx;
background: #999;
margin-left: 95rpx;
}
.dot-closing {
width: 10rpx;
height: 10rpx;
border-radius: 50%;
margin-left: 90rpx;
margin-top: 6rpx;
margin-bottom: 6rpx;
background: #fe4f33;
}
.dot-close {
width: 10rpx;
height: 10rpx;
border-radius: 50%;
margin-left: 90rpx;
margin-top: 6rpx;
margin-bottom: 6rpx;
background: #999;
}
.online-bottom {
width: 1rpx;
height: 50rpx;
background: #999;
margin-left: 95rpx;
}
.online-bottom-start {
width: 1rpx;
height: 50rpx;
/* background: #999; */
margin-left: 95rpx;
}
.expressRecord-text {
margin-left: 30rpx;
}
.expressRecord-statusing {
font-size: 26rpx;
color: #333;
}
.expressRecord-status-addressing {
font-size: 22rpx;
color: #333;
}
.expressRecord-status {
font-size: 26rpx;
color: #999;
}
.expressRecord-status-address {
font-size: 22rpx;
color: #999;
}
.expressRecord-dating {
position: absolute;
height: 100%;
/* top: 0;
bottom: 0; */
left: 20rpx;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #333;
}
.expressRecord-date {
position: absolute;
height: 100%;
/* top: 0;
bottom: 0; */
left: 20rpx;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #999;
}
.expressRecord-date-text {
font-size: 24rpx;
}
.expressRecord-date-time {
font-size: 18rpx;
}
src/pages/orderDetail/orderDetail.js 0 → 100644
// pages/orderDetail/orderDetail.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
src/pages/orderDetail/orderDetail.json 0 → 100644
{
"navigationBarTitleText": "订单详情",
"usingComponents": {}
}
\ No newline at end of file
src/pages/orderDetail/orderDetail.wxml 0 → 100644
<view class="page-order-detail">
<view class="header-wrap">
<image class="header-bg" src="/assets/imgs/7_1_0/address-line.png"></image>
<view class="refund-status">
<view class="status">待审核</view>
<view class="desc">退款申请已经提交，等待商家处理哦~</view>
<view class="look-logistics">
<navigator url="/pages/logistics/logistics" hover-class="none">
<button class="btn btn-primary btn-outline">查看物流</button>
</navigator>
</view>
</view>
</view>
<view class="address-info">
<view class="address-name">
<text>用户名称</text>
<text class="user-phone">83832578475</text>
</view>
<view class="address-detail">
上海市浦东新区碧波路690号
</view>
<view class="edit-address">
<navigator url="/pages/addAddress/addAddress?id=1" hover-class="none">
<button class="btn btn-default btn-sm">修改地址</button>
</navigator>
</view>
</view>
<view class="pro-wrap">
<view class="pro-list">
<image class="pro-img" src="/assets/imgs/7_1_0/address-line.png"></image>
<view class="pro-info">
<view class="pro-name">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名</view>
<view class="pro-desc">
规格
</view>
<view class="pro-price">
<text class="price">￥258</text>
<text class="number">x 1</text>
</view>
</view>
</view>
<view class="pro-list">
<image class="pro-img" src="/assets/imgs/7_1_0/address-line.png"></image>
<view class="pro-info">
<view class="pro-name">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名</view>
<view class="pro-desc">
规格
</view>
<view class="pro-price">
<text class="price">￥258</text>
<text class="number">x 1</text>
</view>
</view>
</view>
</view>
<view class="order-detail-info">
<view class="order-pro-info">
<view class="order-pro-list">
<text>商品合计</text>
<text>￥934</text>
</view>
<view class="order-pro-list">
<text>运费</text>
<text>￥934</text>
</view>
<view class="order-pro-list">
<text>活动折扣</text>
<text>￥934</text>
</view>
<view class="order-pro-list">
<text>优惠券优惠</text>
<text>￥934</text>
</view>
<view class="order-pro-list">
<text class="pay-amount">实付金额</text>
<text class="order-price">￥934</text>
</view>
</view>
<view class="order-number-info">
<view class="order-number-item">
<text class="order-number-label">订单编号</text>
<text class="order-number-desc">4456575676868</text>
<view class="copy" bindtap="copy" data-content="89687687687687786">复制</view>
</view>
<view class="order-time">
<text class="order-number-label">创建时间</text>
<text class="order-number-desc">843758465874767</text>
</view>
</view>
</view>
<view class="button-wrap">
<button class="btn btn-primary btn-lg">立即支付</button>
<button class="btn btn-lg btn-gray">取消订单</button>
</view>
</view>
src/pages/orderDetail/orderDetail.wxss 0 → 100644
/* pages/orderDetail/orderDetail.wxss */
@import './../../base/base.wxss';
page{
background: #f9f9f9;
padding-bottom: 95rpx;
overflow-x: hidden;
}
.header-wrap{
position: relative;
width: 750rpx;
height: 180rpx;
overflow-x: hidden;
}
.header-bg{
width: 750rpx;
height: 180rpx;
position: absolute;
top: 0;
left: 0;
}
.refund-status{
padding: 49rpx 0 0 74rpx;
color: #cb3c3c;
}
.refund-status .status{
font-size: 30rpx;
font-weight: bold;
}
.refund-status .desc{
font-size: 26rpx;
margin-top: 8rpx;
}
.address-info{
padding: 39rpx 30rpx 0;
background-color: #ffffff;
position: relative;
}
.address-detail{
font-size: 26rpx;
color: #757575;
margin-top: 10rpx;
}
.address-name{
color: #333333;
}
.user-phone{
font-size: 26rpx;
margin-left: 42rpx;
}
.edit-address{
width: 140rpx;
position: absolute;
right: 30rpx;
bottom: 0;
}
.edit-address button{
font-size: 24rpx;
border-radius: 8rpx;
}
.pro-header{
display: flex;
justify-content: space-between;
}
.pro-wrap{
padding: 19rpx 32rpx 53rpx 30rpx;
background-color: #ffffff;
}
.choose-pro{
color: #757575;
font-size: 26rpx;
}
.pro-total-price{
font-size: 26rpx;
color: #333333;
}
.total-price{
color: #cb3c3c;
font-size: 28rpx;
}
.pro-list{
border-bottom: 1px solid rgba(151,151,151,0.3);
padding:31rpx 0 25rpx;
}
.pro-list:last-child{
border-bottom: none;
}
.pro-img{
width: 160rpx;
height: 160rpx;
vertical-align: top;
}
.pro-info{
display: inline-block;
margin-left: 28rpx;
vertical-align: top;
}
.pro-name{
font-size: 25rpx;
color: #666666;
width: 500rpx;
line-height:36rpx;
}
.pro-desc{
font-size: 22rpx;
color: #aaaaaa;
margin-top: 10rpx;
}
.pro-price{
margin-top: 16rpx;
}
.price{
color: #cb3c3c;
font-size: 32rpx;
}
.number{
float: right;
font-size: 26rpx;
color: #808080;
}
.pro-sum{
padding: 0 20rpx 90rpx;
}
.order-detail-info{
background-color: #ffffff;
margin-top: 22rpx;
padding: 30rpx;
}
.order-pro-info{
border-bottom: 1px solid rgba(151,151,151,0.3);
padding-bottom: 30rpx;
}
.order-pro-list{
display: flex;
justify-content: space-between;
color: #757575;
margin-top: 30rpx;
font-size: 26rpx;
}
.order-pro-list:first-child{
margin-top: 0;
}
.order-pro-list .pay-amount{
color: #333333;
font-weight: bold;
}
.order-pro-list .order-price{
color: #cb3c3c;
}
.copy{
display: inline-block;
width: 44rpx;
height: 26rpx;
line-height: 26rpx;
border-radius: 6rpx;
border: 1px solid rgba(203, 60, 60, 1);
font-size: 16rpx;
color: #cb3c3c;
text-align: center;
margin-left: 26rpx;
vertical-align: top;
}
.order-number-info{
padding-top: 30rpx;
}
.order-number-label{
color: #757575;
font-size: 26rpx;
}
.order-number-desc{
color: #333333;
font-size: 26rpx;
margin-left: 26rpx;
}
.order-time{
margin-top: 30rpx;
}
.button-wrap{
position: fixed;
bottom: 0;
width: 100%;
display: flex;
border-top: 1px solid rgba(151,151,151,0.3);
background-color: #ffffff;
flex-direction:row-reverse;
}
.button-wrap button{
width: 214rpx;
}
.look-logistics{
width: 110rpx;
position: absolute;
right: -14rpx;
top: 18rpx;
}
.look-logistics button{
height: 36rpx;
line-height: 32rpx;
border-radius: 23rpx;
font-size: 18rpx;
}
\ No newline at end of file
src/pages/refundDetail/refundDetail.wxss
......@@ -152,7 +152,7 @@ page{
width: 44rpx;
height: 26rpx;
line-height: 26rpx;
border-radius: 3rpx;
border-radius: 6rpx;
border: 1px solid rgba(203, 60, 60, 1);
font-size: 16rpx;
color: #cb3c3c;
......
src/project.config.json
......@@ -39,7 +39,7 @@
"list": []
},
"miniprogram": {
"current": 24,
"current": 26,
"list": [
{
"id": -1,
......@@ -199,6 +199,20 @@
"id": -1,
"name": "退款",
"pathName": "pages/refund/refund",
"query": "",
"scene": null
},
{
"id": -1,
"name": "订单详情",
"pathName": "pages/orderDetail/orderDetail",
"query": "",
"scene": null
},
{
"id": -1,
"name": "查看物流",
"pathName": "pages/logistics/logistics",
"scene": null
}
]
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment