对接提货接口

src/pageB/user_order/conponents/order-item.vue

@@ -1,35 +1,43 @@
 <template>
-  <view class="bg-white px-40rpx" @tap="$u.route('/pageB/user_select_pro/index',{id:1})">
+  <view class="bg-white px-40rpx" @tap="$u.route('/pageB/user_select_pro/index',{id:goods.id})">
     <view class="h-78rpx flex justify-between items-center">
-      <text class="text-lg">订单编号：12345678954565</text>
+      <text class="text-lg">订单编号：{{goods.sn}}</text>
-      <text class="text-md text-hex-2A82E4">发货中</text>
+      <text class="text-md text-hex-2A82E4">{{goods.status |payStatusText}}</text>
     </view>
     <u-line color="#E5E5E5" />
-    <block v-for="(ite,ind) in item.products" :key="ind">
+    <block v-for="(ite,ind) in goods.products" :key="ind">
       <view class="flex py-base">
-        <u-image border-radius="10" width="160rpx" height="160rpx" src="http://zcs-test.oss-cn-chengdu.aliyuncs.com/product-spus/cover/2022-04-22/f6f96cba9ba86197e58ea3c2ce93b2a1.jpg" :lazy-load="true"></u-image>
+        <u-image border-radius="10" width="160rpx" height="160rpx" :src="ite.cover" :lazy-load="true"></u-image>
         <view class="flex-1 ml-16rpx w-0">
           <view class="h-70rpx">
-            <view class="line-2">商品名称商品名称商品名称商品商品名称商品名称商品名称商品商品名称商品名称商品名称商品</view>
+            <view class="line-2">{{ite.name}}</view>
           </view>
-          <view class="text-right text-lg mt-20rpx"> x 20 </view>
+          <view class="text-right text-lg mt-20rpx"> x {{ite.quantity}} </view>
         </view>
       </view>
       <u-line color="#E5E5E5" />
     </block>
     <view class="flex items-center justify-between h-85rpx">
-      <text class="text-md">2022-2-15</text>
+      <text class="text-md">{{goods.created_date}}</text>
-      <text class="text-lg font-medium">共件5 应付总额：￥8888</text>
+      <text class="text-lg font-medium">共件{{total}} 应付总额：￥{{goods.total_amount}}</text>
     </view>
   </view>
 </template>
 <script>
   export default {
    props:{
-     item:{
+     goods:{
        type:Object,
        default:()=>{}
      }
+   },
+   computed:{
+     total(){
+       const num=this.goods.products.reduce((pr, cu)=>{
+         return pr+ cu.quantity
+       },0)
+       return num
+     }
    }
   }
 </script>

src/pageB/user_order/index.vue

@@ -1,32 +1,82 @@
 <template>
   <view>
     <!-- 搜索框 -->
-   <view class="flex items-center px-40rpx text-32rpx bg-white py-30rpx">
+   <view class="flex items-center px-40rpx text-32rpx bg-white py-30rpx sticky z-900 suspension">
      <view class="mr-15rpx">手机号：</view>
-     <u-search class="flex-1" placeholder="用户手机号" v-model="searchText" :show-action="false"></u-search>
+     <u-search @search="searchGoods" class="flex-1" placeholder="用户手机号" v-model="keyword" :show-action="false"></u-search>
    </view>
+   <mescroll-body  :height="height" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
+     :down="downOption" :up="upOption">
       <view class="pt-base">
         <block v-for="(item,index) in dataList" :key="index">
          <view class="mb-24rpx">
-            <order-item @Parent=Parent :item="item"  />
+            <order-item @Parent=Parent :goods="item"  />
          </view>
         </block>
       </view>
+       </mescroll-body>
   </view>
 </template>
 <script>
+  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
   import OrderItem from './conponents/order-item.vue';
   export default {
+     mixins: [MescrollMixin], // 使用mixin
     components: {
       OrderItem,
     },
     data() {
       return {
-        searchText:'',
+        keyword:'',
-        dataList:[{products:[{}]},{products:[{},{}]},{products:[{},{},{}]}]
+        downOption: {},
+        upOption: {
+          page: {
+            size: 20
+          },
+          noMoreSize: 1,
+        },
+        dataList: [], //获取到的数据
       };
     },
+    computed:{
+      height() {
+        const {
+          windowHeight,
+          statusBarHeight
+        } = this.$u.sys();
+        return windowHeight - statusBarHeight - 88 + 'px';
+      },
+    },
     methods: {
+      //搜索
+      searchGoods(e){
+        if(this.keyword!='' && !this.$u.test.mobile(this.keyword)){
+          return this.$u.toast('手机号格式不正确')
+        }
+        this.downCallback()
+      },
+      downCallback() {
+        this.mescroll.resetUpScroll();
+        this.dataList = []
+      },
+      async upCallback(page) {
+        this.loadData(page);
+      },
+      loadData(page) {
+        this.$api.get(`/v1/order/underline`, {
+          params: {
+            page: page.num,
+            per_page: page.size,
+            keyword:this.keyword
+          }
+        }).then(res => {
+          this.mescroll.endSuccess(res.data.length)
+          if (page.num == 1) this.dataList = [];
+          this.dataList = this.dataList.concat(res.data);
+        }).catch(err => {
+          this.mescroll.endErr()
+        })
+      },
     },
   };
 </script>
@@ -34,4 +84,9 @@
   .badge {
     @apply bg-badge;
   }
+  .suspension {
+    top:0;
+    // #ifdef H5
+    top: 44px  // #endif
+  }
 </style>

src/pageB/user_select_pro/index.vue

@@ -1,30 +1,29 @@
 <template>
   <view class="pt-20rpx">
-    <block v-for="(item,index) in list" :key="index">
+    <loading-view v-if="isFirstLoading"></loading-view>
+    <block v-for="(item,index) in order.products" :key="index">
       <view class="bg-white px-40rpx notFrist">
         <view class="flex py-base">
-          <u-image border-radius="10" width="170rpx" height="170rpx"
+          <u-image border-radius="10" width="170rpx" height="170rpx" :src="item.cover" :lazy-load="true"></u-image>
-            src="http://zcs-test.oss-cn-chengdu.aliyuncs.com/product-spus/cover/2022-04-22/f6f96cba9ba86197e58ea3c2ce93b2a1.jpg"
-            :lazy-load="true"></u-image>
           <view class="flex-1 ml-16rpx w-0">
             <view class="h-70rpx">
-              <view class="line-2">商品名称商品名称商品名称商品商品名称商品名称商品名称商品商品名称商品名称商品名称商品</view>
+              <view class="line-2">{{item.name}}</view>
             </view>
             <view class="flex items-center justify-between mt-20rpx">
               <text>待提货</text>
-              <text>x 20</text>
+              <text>x {{item.remain_quantity}}</text>
             </view>
             <view class="flex items-center justify-between ">
               <text>已提货</text>
-              <text>x 20</text>
+              <text>x {{item.quantity*1-item.remain_quantity*1}}</text>
             </view>
           </view>
         </view>
         <u-line color="#E5E5E5" />
-        <view class="flex items-center justify-between h-85rpx">
+        <view class="flex items-center justify-between h-85rpx" v-if="order.status==1 ||order.status==2">
           <view>本次提货</view>
           <view>
-            <u-number-box :min="1" :max="3" :value="1">
+            <u-number-box @change="update" :min="0" :max="item.remain_quantity" v-model="item.amount">
             </u-number-box>
           </view>
         </view>
@@ -32,11 +31,16 @@
     </block>
     <view class="h-170rpx"></view>
     <!-- 底部按钮 -->
-   <view class="fixed bottom-0 left-0 w-full bg-white shadow-t ">
+    <view v-if="order.status==1 ||order.status==2" class="fixed bottom-0 left-0 w-full bg-white shadow-t ">
-      <view class="h-100rpx flex items-center px-24rpx justify-between text-hex-999999">
+      <view class="h-100rpx flex items-center px-24rpx justify-between text-hex-999999" @click="onSubmit">
-        <view class="h-72rpx flex-1 leading-72rpx text-center rounded-full bg-hex-ED1B13 text-26rpx text-center text-white">提货</view>
+        <view
+          class="h-72rpx flex-1 leading-72rpx text-center rounded-full bg-hex-ED1B13 text-26rpx text-center text-white">
+          提货</view>
       </view>
     </view>
+    <cu-modal v-model="modeShow" @confirm="confirm" confirm-color="#378264" show-cancel-button content="是否确认提货？"
+      confirmText="确认" cancelText="再想想">
+    </cu-modal>
   </view>
 </template>
 
@@ -44,17 +48,65 @@
   export default {
     data() {
       return {
-        list: [{}, {}]
+        modeShow: false,
+        id: '',
+        isFirstLoading: true,
+        order: {},
       };
+    },
+    onLoad({
+      id
+    }) {
+      this.id = id
+      this.getDate()
+    },
+    computed: {
+      //需要提货的商品
+      pickGoods() {
+        return this.order?.products?.filter(item => item.amount) ?? []
+      }
+    },
+    methods: {
+      async getDate() {
+        try {
+          const resDate = await this.$api.get(`/v1/order/underline/${this.id}`)
+          this.order = resDate
+        } catch (err) {} finally {
+          this.isFirstLoading = false
+        }
+      },
+      onSubmit() {
+        this.pickGoods.length == 0 ? this.$u.toast('请至少选择一个商品提货') : this.modeShow = true
+      },
+      //更新
+      update(e) {
+        this.order.products = [...this.order.products]
+      },
+      async confirm() {
+        try {
+          const arr = this.pickGoods.map(item => {
+            return {
+              amount: item.amount,
+              id: item.id
+            }
+          })
+          await this.$api.post(`/v1/order/underline/${this.id}/package`, {
+            products: arr
+          })
+          this.$u.toast('提货成功')
+          await this.getDate()
+        } catch (err) {}
+      }
     }
   }
 </script>
 
 <style lang="scss" scoped>
-.shadow-t {
+  .shadow-t {
-  box-shadow: 0px -2px 5px rgb(0 0 0 / 11%);
+    box-shadow: 0px -2px 5px rgb(0 0 0 / 11%);
-}
+  }
-.notFrist:not(:first-child){
+
-  margin-top: 20rpx;
+  .notFrist:not(:first-child) {
-}
+    margin-top: 20rpx;
+  }
 </style>