完善订单列表页

miniprogram/app.json

@@ -39,6 +39,7 @@
   "usingComponents": {
     "v-button": "@vant/weapp/button/index",
     "v-tab": "@vant/weapp/tab/index",
-    "v-tabs": "@vant/weapp/tabs/index"
+    "v-tabs": "@vant/weapp/tabs/index",
+    "van-dialog": "@vant/weapp/dialog/index"
   }
 }

miniprogram/pages/order/index.json

@@ -1,4 +1,5 @@
 {
+  "navigationBarTitleText": "我的订单",
   "usingComponents": {
   }
 }

miniprogram/pages/order/index.less

@@ -1,20 +1,84 @@
 /* pages/order/index.wxss */
-.header-wrapper{
+@padding: 15px;
-  height: 50px;
+@content_padding: 10px;
+
+.order-page {
+  background-color: #f2f2f2;
+  min-height: 100vh;
 }
-.header{
+
-  position: fixed;
+.order-list-wrapper {
-  left:0;
+  padding: @padding;
-  top:0;
+}
-  right:0;
+
-  height: 50px;
+.order-item {
+  background-color: #fff;
+  margin-bottom: @padding;
+  border-radius: 4px;
+  overflow: hidden;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  .order-footer {
+    border-top: 1px solid #f2f2f2;
+  }
+
+  .order-goods-content {
+    
+    padding: @content_padding;
+    .info {
+      display: flex;
+    }
+    .goods-name{
+      flex:1;
+      margin: 0 8px;
+      font-size: 16px;
+      line-height: 1.5;
+    }
+    .goods-price{
+      color:#999;
+      text-align: right;
+    }
+    .sale-price{
+      color: #333;
+    }
+    .origin-price{
+      text-decoration: line-through;
+    }
+  }
+
+  .goods-cover-image {
+    width: 100px;
+    height: 100px;
+  }
+
+  .price{
+    text-align: right;
+    font-size: 13px;
+    .price-total{
+      font-size: 16px;
+      vertical-align: baseline;
+    }
+  }
+
+  .order-footer {
+    display: flex;
+    justify-content: space-between;
+    padding: @content_padding;
+  }
+
+  .order-status {
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+    color: #c78a8a;
+  }
+
+  .order-action {
+    .btn {
+      margin-left: 10px;
     }
-.item{
-  height: 300px;
-  background-color: red;
-  margin-bottom: 20px;
   }
-.item1{
-  background-color: royalblue;
-  height: 1px;
 }

miniprogram/pages/order/index.ts

@@ -1,3 +1,31 @@
+import { cancelOrder, OrderInfo, queryOrderList } from "../../service/shop-api";
+import message from "../../utils/message";
+
+type TabType = {
+  // tab标题
+  title: string
+  // 标识
+  name: string
+  // 查询状态值
+  status: number
+  // 当前查询的页码
+  page: number
+  // 是否已经查询结束
+  end: boolean
+  // 订单列表
+  orders: OrderInfo[]
+}
+function createTab(title: string, name: string, status: number) {
+  const tab: TabType = {
+    title,
+    name,
+    status,
+    page: 1,
+    end: false,
+    orders: []
+  }
+  return tab;
+}
 // pages/order/index.ts
 Page({
 
@@ -5,14 +33,94 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    tabActive: 'all',
+    statusEnums: {
+      1: '待确认',
+      2: '已确认',
+      3: '已取消',
+      4: '已完成',
+      0: '已删除'
+    },
+    tabs: [
+      createTab('全部', 'all', 0),
+      createTab('待确认', 'not-confirm', 1),
+      createTab('已确认', 'confirm', 2),
+      createTab('已取消', 'cancel', 3),
+      createTab('已完成', 'finish', 4),
+      // {
+      //   title: '待确认',
+      //   name: 'not-confirm',
+      //   status: 1,
+      //   orders: []
+      // },
+      // {
+      //   title: '已确认',
+      //   name: 'confirm',
+      //   status: 2,
+      //   orders: []
+      // },
+      // {
+      //   title: '已取消',
+      //   name: 'cancel',
+      //   status: 3,
+      //   orders: []
+      // },
+      // {
+      //   title: '已完成',
+      //   name: 'finish',
+      //   status: 3,
+      //   orders: []
+      // }
+    ]
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad() {
-
+    this.loadOrderList('all');
+  },
+  onTabChange(e: any) {
+    const tabActive = e.detail.name
+    // TODO 是否重新加载 -- 缓存
+    this.loadOrderList(tabActive)
+    this.setData({ tabActive })
+  },
+  async cancelOrder(e: TapEvent) {
+    try {
+      if ((await message.confirm('确定要取消订单?'))) {
+        await cancelOrder(e.target.dataset.id)
+        message.toast('取消订单成功');
+        this.loadOrderList(this.data.tabActive)
+      }
+    } catch (e) { }
+  },
+  async deleteOrder(e: TapEvent) {
+    try {
+      if ((await message.confirm('确定要删除订单?'))) {
+        console.log('shanchu')
+        await cancelOrder(e.target.dataset.id)
+        message.toast('取消删除成功');
+        this.loadOrderList(this.data.tabActive)
+      }
+    } catch (e) { }
+  },
+  loadOrderList(active: string) {
+    // 1、找到当前选中的tab
+    const tab = this.data.tabs.find(s => s.name == active);
+    if (tab) {
+      queryOrderList(tab.status).then(ret => {
+        if (ret.records && ret.records.length > 0) {
+          if (tab.page === 1) {
+            tab.orders = ret.records
+          } else tab.orders.push(...ret.records)
+          // 更新数据
+          this.setData({
+            tabs: this.data.tabs
+          })
+        }
+      })
+    }
   },
 
   /**

miniprogram/pages/order/index.wxml

@@ -1,23 +1,40 @@
 <!--pages/order/index.wxml-->
-<view>
+<view class="order-page">
-  <view class="header-wrapper">
+  <v-tabs sticky swipeable bind:change="onTabChange">
-    <view class="header">
+    <v-tab wx:for="{{tabs}}" wx:key="name" name="{{item.name}}" title="{{item.title}}">
-      头部
-    </view>
-  </view>
-  <view>
-    <v-button type="default">默认按钮</v-button>
-    <v-button type="primary">主要按钮</v-button>
-    <v-button type="info">信息按钮</v-button>
-    <v-button type="warning">警告按钮</v-button>
-    <v-button type="danger">危险按钮</v-button>
-  </view>
-  <v-tabs>
-    <v-tab title="xxxx1">xxx1xxx</v-tab>
-    <v-tab title="xxxx2">xxx2xxx</v-tab>
-    <v-tab title="xxxx3">xxx3xxx</v-tab>
-  </v-tabs>
       <view class="order-list-wrapper">
-    <view class="order-item"></view>
+        <view wx:for="{{item.orders}}" wx:key="id" class="order-item" wx:for-item="o">
+          <view class="order-goods-content">
+            <view class="info">
+              <!-- 商品图片 -->
+              <view class="goods-cover">
+                <image class="goods-cover-image" src="{{o.goods.cover}}" />
+              </view>
+              <view class="goods-name">
+                <text>{{o.goods.title}}</text>
+              </view>
+              <view class="goods-price">
+                <view class="sale-price">￥{{o.goods.price}}</view>
+                <view wx:if="{{o.goods.originPrice > 0}}" class="origin-price">￥{{o.goods.originPrice}}</view>
+                <view class="count">× 1</view>
               </view>
             </view>
+            <view class="price">
+              <text>合计:</text>
+              <text class="price-total">{{o.price}}</text>
+            </view>
+          </view>
+          <view class="order-footer">
+            <view class="order-status">
+              <text>{{statusEnums[o.status]||''}}</text>
+            </view>
+            <view class="order-action">
+              <v-button wx:if="{{o.status < 3}}" bindtap="cancelOrder" data-id="{{o.id}}" class="btn" round type="default" size="small">取消订单</v-button>
+              <v-button bindtap="deleteOrder" data-id="{{o.id}}" class="btn" round type="danger" size="small">删除订单</v-button>
+            </view>
+          </view>
+        </view>
+      </view>
+    </v-tab>
+  </v-tabs>
+</view>

miniprogram/pages/types.d.ts

@@ -1,3 +1,14 @@
+interface TapTarget {
+  id: string,
+  dataset: {
+    [key: string]: any
+  }
+}
+interface TapEvent {
+  type: 'tap' | string
+  target: TapTarget
+  currentTarget: TapTarget
+}
 interface PointInfo {
   uid: number;
   totalPoint: number;

miniprogram/service/shop-api.ts

@@ -28,6 +28,7 @@ export type OrderInfo = {
   createTime?: any;
   updateTime?: any;
   status: number;
+  goods?: Goods;
 }
 
 export function queryGoodsList(category: number, page = 1, pageSize = 10) {
@@ -42,3 +43,14 @@ export function createOrder(goodsId: number, buyCount = 1) {
     goodsId, buyCount
   });
 }
+export function queryOrderList(status: number = 0, page = 1, pageSize = 10) {
+  return request<DataList<OrderInfo>>('/shop/order/query', {
+    status, page, pageSize
+  });
+}
+export function cancelOrder(id: string) {
+  return request<boolean>(`/shop/order/${id}/cancel`,null,'PUT');
+}
+export function deleteOrder(id: string) {
+  return request<boolean>(`/shop/order/${id}/delete`,null,'PUT');
+}

miniprogram/utils/message.ts

@@ -1,3 +1,4 @@
+import { resolve } from "path";
 import { BizError } from "./request";
 
 type ToastIcon = 'success' | 'error' | 'none';
@@ -23,9 +24,24 @@ export function showLoading({ message = '加载中...', mask = true }) {
 export function hideLoading() {
   wx.hideLoading()
 }
+export function confirm(message: string) {
+  return new Promise<boolean>((resolve) => {
+    wx.showModal({
+      content: message,
+      success(res) {
+        if (res.confirm) {
+          resolve(true)
+        } else if (res.cancel) {
+          resolve(false)
+        }
+      }
+    })
+  })
+}
 
 export default {
   toast,
   showLoading,
   hideLoading,
+  confirm,
 }