Skip to content

7
7-Eleven
Commit 0f516904 by 高淑倩
Options

add: 订单详情

parent a0ca7862
Showing with 182 additions and 78 deletions
src/pages/order/order.js
...@@ -5,7 +5,6 @@ const utils = require('../../utils/util') ...@@ -5,7 +5,6 @@ const utils = require('../../utils/util')
const envInfo = require('../../config/index').envInfo const envInfo = require('../../config/index').envInfo
wxService.page({ wxService.page({
/** /**
* 页面的初始数据 * 页面的初始数据
*/ */
...@@ -62,8 +61,8 @@ wxService.page({ ...@@ -62,8 +61,8 @@ wxService.page({
this.initOrderList(this.data.pageNo, this.data.pageSize, this.data.trade) this.initOrderList(this.data.pageNo, this.data.pageSize, this.data.trade)
}, },
handelDetail(e) { handelDetail(e) {
const {id} = e.currentTarget.dataset const {detail} = e.currentTarget.dataset
wxService.router(`/pages/orderDetail/orderDetail?id=${id}`) wxService.router(`/pages/orderDetail/orderDetail`).search(detail)
}, },
initOrderList(pageNo, pageSize,trade) { initOrderList(pageNo, pageSize,trade) {
wx.showLoading({ wx.showLoading({
......
src/pages/order/order.wxml
...@@ -25,7 +25,81 @@ ...@@ -25,7 +25,81 @@
<text>订单号</text> <text>订单号</text>
<text class="number">{{item.id}}</text> <text class="number">{{item.id}}</text>
</view> </view>
<text class="order-status">待付款</text> <!--订单状态(C:取消;N:新建,P:已支付;D:已发货;R:已收货) 关闭 取消 新建 待付款 已支付 待发货 已发货 待收货 已完成 已收货 交易关闭 取消-->
<text class="order-status" wx-if="{{item.status == 'C'}}">交易关闭</text>
<text class="order-status" wx-if="{{item.status == 'N'}}">待付款</text>
<text class="order-status" wx-if="{{item.status == 'P'}}">待发货</text>
<text class="order-status" wx-if="{{item.status == 'D'}}">待收货</text>
<text class="order-status" wx-if="{{item.status == 'R'}}">已完成</text>
</view>
<view class="pro-list" data-detail="{{item}}" bindtap="handelDetail">
<scroll-view scroll-x="true">
<view class="uploadWrap" scroll-x="true">
<block wx:for='{{item.skuVOList}}' wx:for-item="sub" wx:key="s" >
<view class="upload_Item">
<image class="upload_Item_img" src="{{sub.mainImgUrl}}" bindtap='goProDetail' data-id='{{sub.goodsId}}'></image>
</view>
</block>
</view>
</scroll-view>
</view>
<view class="pro-number">
<text class="total-pro">共{{item.skuCount}}件商品</text>
<view class="total-price">
实付
<text class="price">￥{{item.payAmount}}</text>
</view>
</view>
<view class="btn-group">
<button class="btn btn-sm btn-primary btn-outline ">立即支付</button>
<button class="btn btn-sm btn-default ">查看物流</button>
<button class="btn btn-sm btn-default ">确认收货</button>
<button class="btn btn-sm btn-primary btn-outline ">再来一单</button>
<button class="btn btn-sm btn-default ">删除订单</button>
</view>
</view>
</block>
</view>
</view>
<view class="no-bottom">
<no-more wx:if="{{noMoreFlag}}"/>
</view>
<!--pages/order/order.wxml-->
<view class='page-order'>
<view class="swiper-tab">
<view
class="swiper-tab-item {{currentIndex == item.type ? 'active' : ''}}"
wx:for="{{swiperItem}}"
wx:key="{{index}}"
bindtap="switchTab"
data-type="{{item.type}}"
data-status="{{item.status}}"
>
{{item.name}}
</view>
</view>
<view class="order-content">
<block
wx:for="{{orderList}}"
wx:for-item="item"
wx:for-index="k"
wx:key="{{k}}"
>
<view class="order-list">
<view class="order-header">
<view class="order-number">
<text>订单号</text>
<text class="number">{{item.id}}</text>
</view>
{{item.status}}
<!--订单状态(C:取消;N:新建,P:已支付;D:已发货;R:已收货) 关闭 取消 新建 待付款 已支付 待发货 已发货 待收货 已完成 已收货 交易关闭 取消-->
<text class="order-status" wx-if="{{item.status == 'C'}}">交易关闭</text>
<text class="order-status" wx-if="{{item.status == 'N'}}">待付款</text>
<text class="order-status" wx-if="{{item.status == 'P'}}">待发货</text>
<text class="order-status" wx-if="{{item.status == 'D'}}">待收货</text>
<text class="order-status" wx-if="{{item.status == 'R'}}">已完成</text>
</view> </view>
<view class="pro-list" data-id="{{item.id}}" bindtap="handelDetail"> <view class="pro-list" data-id="{{item.id}}" bindtap="handelDetail">
<scroll-view scroll-x="true"> <scroll-view scroll-x="true">
......
src/pages/orderDetail/orderDetail.js
...@@ -10,7 +10,46 @@ wxService.page({ ...@@ -10,7 +10,46 @@ wxService.page({
* 页面的初始数据 * 页面的初始数据
*/ */
data: { data: {
// detail: null,
detail:
{
"id": "613402110104571904",
"memberId": "598887367880871936",
"status": "N",
"skuVOList": [
{
"productId": "1556108606443006",
"productCode": "test001",
"productName": "test001",
"skuId": "1556108807316001",
"skuCode": "test001-4",
"skuSpec": "颜色：白，尺寸：xl",
"count": 3919,
"price": 0.03,
"discount": 0,
"mainImgUrl": "http://testimg3.bigaka.com/group3/M00/00/17/Cv6CBF1Z9TKAU6T1AAAG8CvHO2o415.png",
"amount": 117.57
},
{
"productId": "1556108606443006",
"productCode": "test001",
"productName": "test001",
"skuId": "1556108807316000",
"skuCode": "test001-3",
"skuSpec": "颜色：红，尺寸：xl",
"count": 420,
"price": 0.02,
"discount": 0,
"mainImgUrl": "http://testimg3.bigaka.com/group3/M00/00/17/Cv6CBF1Z9TKAU6T1AAAG8CvHO2o415.png",
"amount": 8.4
}
],
"createTime": "2019-08-20 16:00:59",
"discount": 0,
"freightMoney": 0,
"payAmount": 125.97,
"skuCount": 4339
}
}, },
/** /**
...@@ -19,34 +58,13 @@ wxService.page({ ...@@ -19,34 +58,13 @@ wxService.page({
onLoad: function (options) { onLoad: function (options) {
}, },
/** /**
* 生命周期函数--监听页面显示 * 生命周期函数--监听页面显示
*/ */
onShow: function () { onShow: function () {
// id=613402110104571904 if (!Object.keys(this.options).length){ return }
const {id} = this.options this.setData({
if(id){ detail: this.options
this.initOrderDetail(id)
}
},
initOrderDetail(id) {
wx.showLoading({
title: '加载中',
mask: true
})
wxService.get(`/sale/order/findById?id=${id}&brandId=1001`).then(res => {
if (res) {
const { result, data } = res.data
if (result == 0) {
wx.hideLoading()
this.setData({
})
}
}
}) })
}, },
copy(e) { copy(e) {
......
src/pages/orderDetail/orderDetail.wxml
<view class="page-order-detail"> <view class="page-order-detail">
<view class="header-wrap"> <view class="header-wrap" style="background-image:url('/assets/imgs/7_1_0/rf_bgc.jpg')">
<image class="header-bg" src="/assets/imgs/7_1_0/address-line.png"></image>
<view class="refund-status"> <view class="refund-status">
<view class="status">待审核</view>
<view class="desc">退款申请已经提交，等待商家处理哦~</view>
<view class="look-logistics"> <view class="look-logistics">
<navigator url="/pages/logistics/logistics" hover-class="none"> <navigator url="/pages/logistics/logistics" hover-class="none">
<button class="btn btn-primary btn-outline">查看物流</button> <button class="btn btn-primary btn-outline">查看物流</button>
</navigator> </navigator>
</view> </view>
<!--订单状态(C:取消;N:新建,P:已支付;D:已发货;R:已收货) -->
<view class="order-status" wx-if="{{detail.status == 'C'}}">
<view class="status">交易关闭</view>
<view class="desc">订单已关闭： 支付超时</view>
</view>
<view class="order-status" wx-if="{{detail.status == 'N'}}">
<view class="status">待付款</view>
<view class="desc">支付时间仅剩：2小时34分钟，超时将自动关闭</view>
</view>
<view class="order-status" wx-if="{{detail.status == 'P'}}">
<view class="status">待发货</view>
<view class="desc">商家安排发货中，请稍后</view>
</view>
<view class="order-status" wx-if="{{detail.status == 'D'}}">
<view class="status">已发货</view>
<view class="desc">顺丰快递： 10086543434</view>
</view>
<view class="order-status" wx-if="{{detail.status == 'R'}}">
<view class="status">已完成</view>
<view class="desc">顺丰快递： 10086543434</view>
</view>
</view> </view>
</view> </view>
<view class="address-info"> <view class="address-info">
<view class="address-name"> <view class="address-name">
<text>用户名称</text> <text>用户名称</text>
...@@ -26,79 +43,79 @@ ...@@ -26,79 +43,79 @@
<button class="btn btn-default btn-sm">修改地址</button> <button class="btn btn-default btn-sm">修改地址</button>
</navigator> </navigator>
</view> </view>
</view> </view>
<view class="pro-wrap"> <view class="pro-wrap">
<block wx:for="{{detail.skuVOList}}" wx:key="{{item}}">
<view class="pro-list"> <view class="pro-list">
<image class="pro-img" src="/assets/imgs/7_1_0/address-line.png"></image> <image class="pro-img" src="{{item.mainImgUrl}}"></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-info">
<view class="pro-name">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名</view> <view class="pro-name">{{item.productName}}</view>
<view class="pro-desc"> <view class="pro-desc">
规格 规格 {{item.skuSpec}}
</view> </view>
<view class="pro-price"> <view class="pro-price">
<text class="price">￥258</text> <text class="price">￥{{item.price}}</text>
<text class="number">x 1</text> <text class="number">x {{item.count}}</text>
</view> </view>
</view> </view>
</view> </view>
</block>
</view> </view>
<view class="order-detail-info"> <view class="order-detail-info">
<view class="order-pro-info"> <view class="order-pro-info">
<view class="order-pro-list"> <view class="order-pro-list">
<text>商品合计</text> <text>商品合计</text>
<text>￥934</text> <text>￥{{detail.payAmount}}</text>
</view> </view>
<view class="order-pro-list"> <view class="order-pro-list">
<text>运费</text> <text>运费</text>
<text>￥934</text> <text>￥{{detail.freightMoney}}</text>
</view> </view>
<view class="order-pro-list"> <view class="order-pro-list">
<text>活动折扣</text> <text>活动折扣</text>
<text>￥934</text> <text>￥{{detail.payAmount}}</text>
</view> </view>
<view class="order-pro-list"> <view class="order-pro-list">
<text>优惠券优惠</text> <text>优惠券优惠</text>
<text>￥934</text> <text>￥{{detail.payAmount}}</text>
</view> </view>
<view class="order-pro-list"> <view class="order-pro-list">
<text class="pay-amount">实付金额</text> <text class="pay-amount">实付金额</text>
<text class="order-price">￥934</text> <text class="order-price">￥{{detail.payAmount}}</text>
</view> </view>
</view> </view>
<view class="order-number-info"> <view class="order-number-info">
<view class="order-number-item"> <view class="order-number-item">
<text class="order-number-label">订单编号</text> <text class="order-number-label">订单编号</text>
<text class="order-number-desc">4456575676868</text> <text class="order-number-desc">{{detail.id}}</text>
<view class="copy" bindtap="copy" data-content="89687687687687786">复制</view> <view class="copy" bindtap="copy" data-content="{{detail.id}}">复制</view>
</view> </view>
<view class="order-time"> <view class="order-time">
<text class="order-number-label">创建时间</text> <text class="order-number-label">创建时间</text>
<text class="order-number-desc">843758465874767</text> <text class="order-number-desc">{{detail.createTime}}</text>
</view> </view>
</view> </view>
</view> </view>
<!-- 底部按钮 -->
<view class="button-wrap"> <view class="button-wrap" wx-if="{{detail.status == 'C'}}">
<button class="btn btn-primary btn-lg">删除订单</button>
</view>
<view class="button-wrap" wx-if="{{detail.status == 'N'}}">
<button class="btn btn-primary btn-lg">立即支付</button> <button class="btn btn-primary btn-lg">立即支付</button>
<button class="btn btn-lg btn-gray">取消订单</button> <button class="btn btn-lg btn-gray">取消订单</button>
</view> </view>
<view class="button-wrap" wx-if="{{detail.status == 'P'}}">
<button class="btn btn-lg btn-gray">申请退款</button>
</view>
<view class="button-wrap" wx-if="{{detail.status == 'D'}}">
<button class="btn btn-primary btn-lg">申请退款</button>
<button class="btn btn-lg btn-gray">确认收货</button>
</view>
<view class="button-wrap" wx-if="{{detail.status == 'R'}}">
<button class="btn btn-lg btn-gray">申请退款</button>
</view>
</view> </view>
......
src/pages/orderDetail/orderDetail.wxss
...@@ -8,19 +8,15 @@ page{ ...@@ -8,19 +8,15 @@ page{
} }
.header-wrap{ .header-wrap{
position: relative; position: relative;
width: 750rpx;
height: 180rpx; height: 180rpx;
overflow-x: hidden; overflow-x: hidden;
} padding: 49rpx 0 0 74rpx;
.header-bg{ box-sizing: border-box;
width: 750rpx; background-repeat: no-repeat;
height: 180rpx; background-size: 100%;
position: absolute;
top: 0;
left: 0;
} }
.refund-status{ .refund-status{
padding: 49rpx 0 0 74rpx; /* padding: 49rpx 0 0 74rpx; */
color: #cb3c3c; color: #cb3c3c;
} }
.refund-status .status{ .refund-status .status{
......
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