订单详情增加操作按钮

app.wxss

@@ -129,10 +129,10 @@ checkbox .wx-checkbox-input{
 }
 checkbox .wx-checkbox-input.wx-checkbox-input-checked{
   border-color: var(--main-font-color);
-  border: 2px solid #000000;
+  border: 2px solid var(--main-color);
 }
 checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
-  color: var(--main-font-color);
+  color: var(--main-color);
   /* font-size: 30px; */
 }
 

components/swipeButton/index.wxss

@@ -7,9 +7,10 @@
 .move-area .tips{
   position: absolute;
   /* right:120rpx; */
-  top:30rpx;
+  top:50%;
   color: #000000;
   font-size: 36rpx;
+  margin-top:-18rpx;
   z-index: 0;
   font-weight: 500;
   transition-duration: .1s;
@@ -22,13 +23,14 @@
 .move-view{
   background-color: #fff;
   /* 为了精确定位width 用 px 单位 包括下面的 border*/
-  width: 88px;height:88rpx;
+  width: 92px;height:100%;
   display: flex;
   align-items: center;
   justify-content:center;
   border-radius: 12rpx;
   border:2px solid var(--main-color);
   z-index: 1;
+  box-sizing: border-box;
 }
 .move-view .icon{
   width:56rpx;height:56rpx;

pages/index/index.js

@@ -151,7 +151,6 @@ Page({
   },
   setStatus(event){
     const status = event.currentTarget.dataset.item;
-    console.log(status);
     //先不setData 让加载出来之后再设置
     this.data.statusDetailKey = status.key.toLowerCase();
     this.loadBuilding().then((data)=>{
@@ -568,7 +567,6 @@ Page({
   },
   emptyFun(){},
   onShow(){
-    console.log('onshow');
     if(this.data.statusDetailKey==this.data.statusDetail.received.key.toLowerCase()){
       let needRefreshData = {}
       this.data.list.map((item,index)=>{
@@ -580,10 +578,15 @@ Page({
       this.setData(needRefreshData);
     }
     if(this.haveNewOrder){
+      //新订单刷新 暂时没做刷新，因为如果在其他 tab，来了刷新会很怪
       this.data.statusDetailKey = this.data.statusDetail.created.key.toLowerCase();
       this.data.buildingIndex = 0;
       this.refreshList();
       this.haveNewOrder = false;
+    }else if(app.globalData.needRefreshOrderList){
+      //订单详情回来的刷新
+      this.refreshList();
+      app.globalData.needRefreshOrderList = false;
     }
   },
   getPackageReceiveStatus(orderId,pkg){
@@ -619,7 +622,7 @@ Page({
   },
   navToAgreement(){
     wx.navigateTo({
-      url: `/pages/browser/index?url=${this.data.appConfig.url_user_agreement}`,
+      url: `/pages/browser/index?url=${encodeURIComponent(this.data.appConfig.url_user_agreement)}`,
     })
   }
 })

pages/login/index.js

@@ -76,12 +76,12 @@ Page({
   },
   navToAgreement(){
     wx.navigateTo({
-      url: `/pages/browser/index?url=${this.data.appConfig.url_user_agreement}`,
+      url: `/pages/browser/index?url=${encodeURIComponent(this.data.appConfig.url_user_agreement)}`,
     })
   },
   navToPrivacy(){
     wx.navigateTo({
-      url: `/pages/browser/index?url=${this.data.appConfig.url_user_privacy}`,
+      url: `/pages/browser/index?url=${encodeURIComponent(this.data.appConfig.url_user_privacy)}`,
     })
   },
   /**

pages/order-detail/index.js

@@ -1,5 +1,6 @@
 import orderApi from '../../api/order';
 import userApi from '../../api/user';
+const app = getApp();
 import {hidePhoneNumber} from '../../utils/util';
 
 Page({
@@ -21,7 +22,10 @@ Page({
 
     genderKV:userApi.genderKV,
 
-    orderStep:0
+    orderStep:0,
+
+    receiving:false,
+    isShowRefundConfirm:false
   },
 
   /**
@@ -71,6 +75,7 @@ Page({
       this.setData({
         orderDetail:data,
         refreshTrigger:false,
+        receiving:false,
         orderStep
       })
     }).catch((res)=>{
@@ -120,6 +125,95 @@ Page({
       data:receviedStatus
     })
   },
+  showMoreAS(event){
+    const item = this.data.orderDetail;
+    const markupAction = ()=>{
+      const markupView = this.selectComponent('#markupView');
+      markupView.show(item)
+    }
+    const makePhoneCallAction = ()=>{
+      wx.makePhoneCall({
+        phoneNumber: item.address_phone,
+      });
+    }
+    const refundAction = ()=>{
+      console.log(item.receiving);
+      if(item.receiving)return;
+      this.setData({
+        isShowRefundConfirm:true
+      });
+    }
+    let items = [];
+    let actions = [];
+    if(item.status==this.data.orderStatus.created){
+      items = ['联系用户','取消订单'];
+      actions = [makePhoneCallAction,refundAction]
+    }else if(item.status==this.data.orderStatus.received){
+      items = ['包裹加价','联系用户','取消订单'];
+      actions = [markupAction,makePhoneCallAction,refundAction]
+    }else if(item.status==this.data.orderStatus.delivering){
+      items = ['联系用户'];
+      actions = [makePhoneCallAction]
+    }
+    if(items.length!=actions.length){
+      throw new Error('sb')
+    }
+    wx.showActionSheet({
+      itemList: items,
+      success:(res)=>{
+        actions[res.tapIndex]();
+      }
+    })
+  },
+  markupSuccess(){
+    app.globalData.needRefreshOrderList = true;
+    this.getOrderDetail();
+  },
+  refund(event){
+    const item = this.data.orderDetail;
+    if(item.receiving)return;
+    this.setData({
+      receiving:true
+    })
+    orderApi.cancel(item.orderid,event.detail).then((data)=>{
+      wx.showToast({
+        title: '取消成功',
+        icon:'success'
+      });
+      app.globalData.needRefreshOrderList = true;
+      this.getOrderDetail();
+    })
+  },
+  receivedOrder(){
+    const item = this.data.orderDetail;
+    const hasUnReceive = !!item.packages.find((p)=>!p.receivedAll);
+    if(hasUnReceive){
+      this.setData({
+        receiving:false
+      })
+      wx.showToast({
+        icon:'none',
+        title: '请先取件',
+      })
+      return;
+    }
+    orderApi.pickup(item.orderid).then((data)=>{
+      wx.showToast({
+        icon:'success',
+        title: '取货成功',
+      })
+      app.globalData.needRefreshOrderList = true;
+      this.getOrderDetail();
+      wx.removeStorage({
+        key: item.orderid,
+      })
+    }).catch(()=>{
+      this.setData({
+        receiving:false
+      })
+    })
+  },
+  emptyFun(){},
   /**
    * 生命周期函数--监听页面初次渲染完成
    */

pages/order-detail/index.json

@@ -1,4 +1,8 @@
 {
-  "usingComponents": {},
+  "usingComponents": {
+    "swipe-button":"/components/swipeButton",
+    "modal-view":"/components/modalView",
+    "mark-up":"../index/mark-up"
+  },
   "navigationBarTitleText": "订单详情"
 }

pages/order-detail/index.wxml

@@ -1,127 +1,139 @@
-<scroll-view refresher-triggered="{{refreshTrigger}}" bindrefresherrefresh="getOrderDetail" 
-    refresher-enabled scroll-y class="order-detail {{orderDetail.is_first_order?'is-new-order':''}}" 
-    enhanced show-scrollbar="{{false}}">
-  <view class="scroll-view-top-margin"></view>
-  <view class="page-container address-info">
-    <view class="title">
-      {{orderDetail.community_name}}
-      {{orderDetail.building_name}}
-      {{orderDetail.address_detail}}
-    </view>
-    <view class="sub-title">
-      {{orderDetail.address_name}}{{genderKV[orderDetail.address_gender]}}：{{orderDetail.address_phone}}丨{{deliverStatusKV[orderDetail.delivery_method]}}
-    </view>
-    <view class="deliver-time">
-      期望送达<label class="time">{{orderDetail.delivery_time}}</label>
-    </view>
-  </view>
-  <view class="page-container station-info" wx:for="{{orderDetail.packages}}" wx:key="index">
-    <view class="title">
-      <view class="name">{{item.station_name}}</view>
-      <view class="received-status {{orderDetail.status==orderStatus.received&&!item.receivedAll?'done':''}}" 
-        wx:if="{{item.status!=orderStatus.created}}">
-        <!-- {{item.receivedAll?'已取件':'待取件'}} -->
-        {{
-          orderDetail.status==orderStatus.received?(item.receivedAll?'已取件':'待取件'):
-          orderDetail.status==orderStatus.delivering?'已取件':''
-        }}
+<view class="custom-scroll-view">
+  <scroll-view refresher-triggered="{{refreshTrigger}}" bindrefresherrefresh="getOrderDetail" 
+      refresher-enabled scroll-y class="order-detail main {{orderDetail.is_first_order?'is-new-order':''}}" 
+      enhanced show-scrollbar="{{false}}">
+    <view class="scroll-view-top-margin"></view>
+    <view class="page-container address-info">
+      <view class="title">
+        {{orderDetail.community_name}}
+        {{orderDetail.building_name}}
+        {{orderDetail.address_detail}}
+      </view>
+      <view class="sub-title">
+        {{orderDetail.address_name}}{{genderKV[orderDetail.address_gender]}}：{{orderDetail.address_phone}}丨{{deliverStatusKV[orderDetail.delivery_method]}}
+      </view>
+      <view class="deliver-time">
+        期望送达<label class="time">{{orderDetail.delivery_time}}</label>
       </view>
     </view>
-    <checkbox-group bindchange="selectPackageCode" 
-      data-index="{{index}}">
-      <label class="code-item" wx:for="{{item.formattedCode}}" wx:key="cIndex" 
-        wx:for-item="formattedItem" wx:for-index="code">
-        <view class="code {{orderDetail.status==orderStatus.created||(orderDetail.status==orderStatus.received&&!item.formattedCode[code].checked)?'':'checked'}}">
-          {{orderDetail.status==orderStatus.created?'*********':code}}
-
-          <view wx:if="{{item.formattedCode[code].sameCount>1}}" class="same-count">
-            x {{item.formattedCode[code].sameCount}} 重复的取件码
-          </view>
+    <view class="page-container station-info" wx:for="{{orderDetail.packages}}" wx:key="index">
+      <view class="title">
+        <view class="name">{{item.station_name}}</view>
+        <view class="received-status {{orderDetail.status==orderStatus.received&&!item.receivedAll?'done':''}}" 
+          wx:if="{{item.status!=orderStatus.created}}">
+          <!-- {{item.receivedAll?'已取件':'待取件'}} -->
+          {{
+            orderDetail.status==orderStatus.received?(item.receivedAll?'已取件':'待取件'):
+            orderDetail.status==orderStatus.delivering?'已取件':''
+          }}
         </view>
-        <checkbox checked="{{!!item.formattedCode[code].checked}}" value="{{code}}" wx:if="{{orderDetail.status==orderStatus.received}}"/>
-      </label>
-    </checkbox-group>
-  </view>
-  <view class="page-container station-info" wx:if="{{orderDetail.pickup_images&&orderDetail.pickup_images.length>0}}">
-    <view class="title">
-      <view class="name">图片取件 {{orderDetail.pickup_images_count}} 件</view>
-    </view>
-    <view class="images" wx:if="{{orderDetail.status==orderStatus.created}}">
-      <view class="image empty-img" wx:for="{{orderDetail.pickup_images}}" wx:key="index" src="{{item}}">
-        <image class="icon" src="/assets/icon/img-default.png"/>
       </view>
+      <checkbox-group bindchange="selectPackageCode" 
+        data-index="{{index}}">
+        <label class="code-item" wx:for="{{item.formattedCode}}" wx:key="cIndex" 
+          wx:for-item="formattedItem" wx:for-index="code">
+          <view class="code {{orderDetail.status==orderStatus.created||(orderDetail.status==orderStatus.received&&!item.formattedCode[code].checked)?'':'checked'}}">
+            {{orderDetail.status==orderStatus.created?'*********':code}}
+            
+            <view wx:if="{{item.formattedCode[code].sameCount>1}}" class="same-count">
+              x {{item.formattedCode[code].sameCount}} 重复的取件码
+            </view>
+          </view>
+          <checkbox checked="{{!!item.formattedCode[code].checked}}" value="{{code}}" wx:if="{{orderDetail.status==orderStatus.received}}"/>
+        </label>
+      </checkbox-group>
     </view>
-    <view class="images" wx:else="">
-      <image class="image" wx:for="{{orderDetail.pickup_images}}" wx:key="index" 
-        src="{{item}}" bind:tap="previewPackageImage" data-item="{{item}}"/>
-    </view>
-  </view>
-
-  <view class="page-container steps">
-    <view class="item {{orderStep>0?'night':''}}">
-      <view class="content">
-        <view class="name">接单</view>
-        <view class="time">{{orderDetail.received_time}}</view>
+    <view class="page-container station-info" wx:if="{{orderDetail.pickup_images&&orderDetail.pickup_images.length>0}}">
+      <view class="title">
+        <view class="name">图片取件 {{orderDetail.pickup_images_count}} 件</view>
       </view>
-    </view>
-    <view class="item {{orderStep>1?'night':''}}">
-      <view class="content">
-        <view class="name">取货</view>
-        <view class="time">{{orderDetail.pickup_time}}</view>
+      <view class="images" wx:if="{{orderDetail.status==orderStatus.created}}">
+        <view class="image empty-img" wx:for="{{orderDetail.pickup_images}}" wx:key="index" src="{{item}}">
+          <image class="icon" src="/assets/icon/img-default.png"/>
+        </view>
       </view>
-    </view>
-    <view class="item {{orderStep>2?'night':''}}">
-      <view class="content">
-        <view class="name">送达</view>
-        <view class="time">{{orderDetail.complete_time}}</view>
+      <view class="images" wx:else="">
+        <image class="image" wx:for="{{orderDetail.pickup_images}}" wx:key="index" 
+          src="{{item}}" bind:tap="previewPackageImage" data-item="{{item}}"/>
       </view>
     </view>
-  </view>
-  <view class="page-container photos" wx:if="{{orderDetail.complete_images&&orderDetail.complete_images.length>0}}">
-    <view class="title">拍照留证</view>
-    <view class="imgs">
-      <image class="image" src="{{item}}" wx:for="{{orderDetail.complete_images}}" wx:key="index" bind:tap="preview" data-url="{{item}}"/>
-    </view>
-  </view>
-  <view class="page-container income">
-    <label>订单收益：</label>
-    <label class="money">{{orderDetail.deliveryman_share}}</label>
-  </view>
-  <view class="page-container order-info">
-    <view class="row">
-      <view class="key">订单编号</view>
-      <view class="value">{{orderDetail.orderid}}</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">{{orderDetail.create_time}}</view>
-    </view>
 
+    <view class="page-container steps">
+      <view class="item {{orderStep>0?'night':''}}">
+        <view class="content">
+          <view class="name">接单</view>
+          <view class="time">{{orderDetail.received_time}}</view>
+        </view>
+      </view>
+      <view class="item {{orderStep>1?'night':''}}">
+        <view class="content">
+          <view class="name">取货</view>
+          <view class="time">{{orderDetail.pickup_time}}</view>
+        </view>
+      </view>
+      <view class="item {{orderStep>2?'night':''}}">
+        <view class="content">
+          <view class="name">送达</view>
+          <view class="time">{{orderDetail.complete_time}}</view>
+        </view>
+      </view>
+    </view>
+    <view class="page-container photos" wx:if="{{orderDetail.complete_images&&orderDetail.complete_images.length>0}}">
+      <view class="title">拍照留证</view>
+      <view class="imgs">
+        <image class="image" src="{{item}}" wx:for="{{orderDetail.complete_images}}" wx:key="index" bind:tap="preview" data-url="{{item}}"/>
+      </view>
+    </view>
+    <view class="page-container income">
+      <label>订单收益：</label>
+      <label class="money">{{orderDetail.deliveryman_share}}</label>
+    </view>
+    <view class="page-container order-info">
+      <view class="row">
+        <view class="key">订单编号</view>
+        <view class="value">{{orderDetail.orderid}}</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">{{orderDetail.create_time}}</view>
+      </view>
 
-    <view class="row">
-      <view class="key">取件数量</view>
-      <view class="value">{{orderDetail.package_count}}</view>
-    </view>
-    <view class="row" wx:if="{{orderDetail.additional_fee_amount}}">
-      <view class="key">加价金额</view>
-      <view class="value money money-normal">{{orderDetail.additional_fee_amount}}</view>
-    </view>
-    <view class="row">
-      <view class="key">基础配送费</view>
-      <view class="value money money-normal">{{orderDetail.base_delivery_amount}}</view>
-    </view>
-    <view class="row" wx:if="{{orderDetail.more_station_price}}">
-      <view class="key">多驿站费</view>
-      <view class="value money money-normal">{{orderDetail.more_station_price}}</view>
-    </view>
-    <view class="row">
-      <view class="key">订单金额</view>
-      <view class="value money money-normal">{{orderDetail.original_amount}}</view>
+
+      <view class="row">
+        <view class="key">取件数量</view>
+        <view class="value">{{orderDetail.package_count}}</view>
+      </view>
+      <view class="row">
+        <view class="key">基础配送费</view>
+        <view class="value money money-normal">{{orderDetail.base_delivery_amount}}</view>
+      </view>
+      <view class="row" wx:if="{{orderDetail.additional_fee_amount}}">
+        <view class="key">加价金额</view>
+        <view class="value money money-normal">{{orderDetail.additional_fee_amount}}</view>
+      </view>
+      <view class="row" wx:if="{{orderDetail.more_station_price}}">
+        <view class="key">多驿站费</view>
+        <view class="value money money-normal">{{orderDetail.more_station_price}}</view>
+      </view>
+      <view class="row">
+        <view class="key">订单金额</view>
+        <view class="value money money-normal">{{orderDetail.original_amount}}</view>
+      </view>
     </view>
+    <view class="scroll-view-dispatch"></view>
+  </scroll-view>
+  <view class="bottom-bar-v2" wx:if="{{orderDetail.status==orderStatus.received}}">
+    <button disabled="{{item.receiving}}" class="button more-btn" plain capture-catch:tap="showMoreAS">
+      <view class="icon"></view>
+    </button>
+    <swipe-button class="swipe-button" loading="{{receiving}}" bind:done="receivedOrder" 
+      button-text="我已取货" button-loading-text="取货中..." capture-catch:tap="emptyFun"/>
   </view>
-  <view class="scroll-view-dispatch"></view>
-</scroll-view>
+</view>
 
+<mark-up id="markupView" class="mark-up" bind:success="markupSuccess"/>
+
+<modal-view titleText="取消订单需联系客户说明原因" editable content-placeholder="请输入退单原因" bind:ok="refund" model:show="{{isShowRefundConfirm}}" titleTextCenter="{{false}}" editRequired/>

pages/order-detail/index.wxss

@@ -235,4 +235,53 @@
 .photos .imgs .image{
   width:160rpx;height:160rpx;
   border-radius: 12rpx;
+}
+
+.bottom-bar-v2{
+  display: flex;
+  gap:24rpx;
+}
+
+.bottom-bar-v2 .button{
+  height:100rpx;
+  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;
+}
+.bottom-bar-v2 .more-btn{
+  width:180rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bottom-bar-v2 .more-btn .icon,
+.bottom-bar-v2 .more-btn .icon::before,
+.bottom-bar-v2 .more-btn .icon::after{
+  width:16rpx;height:16rpx;
+  background: #555555;
+  border-radius: 50%;
+  position: relative;
+  overflow: visible;
+}
+.bottom-bar-v2 .more-btn .icon::before{
+  content:'';
+  position:absolute;
+  left:-36rpx;top:0;
+}
+.bottom-bar-v2 .more-btn .icon::after{
+  content:'';
+  position:absolute;
+  left:36rpx;top:0;
+}
+.bottom-bar-v2 .more-btn[disabled]{
+  color:#999;
+  border-color:rgb(221, 219, 219);
+}
+.bottom-bar-v2 .swipe-button{
+  height:100rpx;
+  flex:1;
 }