订单列表

common/api/order.js

@@ -0,0 +1,18 @@
+/*
+ * @Author: ch
+ * @Date: 2022-03-29 17:38:17
+ * @LastEditors: ch
+ * @LastEditTime: 2022-03-29 18:07:01
+ * @Description: file content
+ */
+import {ToAsyncAwait, Request} from '@/common/utils';
+
+import orderList from '@/mock/orderList'
+
+const ApiGetOrderList = (params) => ToAsyncAwait(new Promise((resolve)=>resolve(orderList.data)))
+	//  ToAsyncAwait(Request.get('/app/tradeOrder/page', params));
+	 
+export {
+	// 获取订单列表
+	ApiGetOrderList
+}

common/dicts/order.js

@@ -0,0 +1,21 @@
+/*
+ * @Author: ch
+ * @Date: 2022-03-29 16:47:32
+ * @LastEditors: ch
+ * @LastEditTime: 2022-03-29 17:14:26
+ * @Description: file content
+ */
+
+import Enum from "@/common/plugins/enum"
+const DictOrderStatus = new Enum([
+	{key : '1', name : '待支付'},
+	{key : '2', name : '已关闭'},
+	{key : '3', name : '待发货'},
+	{key : '4', name : '已发货'},
+	{key : '6', name : '已收货'},
+	{key : '7', name : '已完成'}
+])
+
+export {
+	DictOrderStatus
+}

common/plugins/enum.js

@@ -0,0 +1,85 @@
+/**
+ * 枚举类
+ * Enum.IMAGE.name                => "图片"
+ * Enum.getNameByKey('IMAGE')     => "图片"
+ * Enum.getValueByKey('IMAGE')    => 10
+ * Enum.getNameByValue(10)        => "图片"
+ * Enum.getData()                 => [{key: "IMAGE", name: "图片", value: 10}]
+ */
+class Enum {
+  constructor (param) {
+    const keyArr = []
+    const valueArr = []
+
+    if (!Array.isArray(param)) {
+      throw new Error('param is not an array!')
+    }
+
+    param.map(element => {
+      if (!element.key || !element.name) {
+        return
+      }
+      // 保存key值组成的数组，方便A.getName(name)类型的调用
+      keyArr.push(element.key)
+      valueArr.push(element.value)
+      // 根据key生成不同属性值，以便A.B.name类型的调用
+      this[element.key] = element
+      if (element.key !== element.value) {
+        this[element.value] = element
+      }
+    })
+
+
+    // 保存源数组
+    this.data = param
+    this.keyArr = keyArr
+    this.valueArr = valueArr
+
+    // 防止被修改
+    // Object.freeze(this)
+  }
+
+  // 根据key得到对象
+  keyOf (key) {
+    return this.data[this.keyArr.indexOf(key)]
+  }
+
+  // 根据key得到对象
+  valueOf (key) {
+    return this.data[this.valueArr.indexOf(key)]
+  }
+
+  // 根据key获取name值
+  getNameByKey (key) {
+    const prop = this.keyOf(key)
+    if (!prop) {
+      throw new Error('No enum constant' + key)
+    }
+    return prop.name
+  }
+
+  // 根据value获取name值
+  getNameByValue (value) {
+    const prop = this.valueOf(value)
+    if (!prop) {
+      throw new Error('No enum constant' + value)
+    }
+    return prop.name
+  }
+
+  // 根据key获取value值
+  getValueByKey (key) {
+    const prop = this.keyOf(key)
+    if (!prop) {
+      throw new Error('No enum constant' + key)
+    }
+    return prop.key
+  }
+
+  // 返回源数组
+  getData () {
+    return this.data
+  }
+}
+
+export default Enum

components/UiButton.vue

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-03-26 10:06:38
  * @LastEditors: ch
- * @LastEditTime: 2022-03-29 15:45:08
+ * @LastEditTime: 2022-03-29 18:20:53
  * @Description: file content
 -->
 <template>
@@ -27,9 +27,6 @@ export default {
 	display: inline-block;
 	padding: 0 50rpx;
 	border-radius: 50rpx;
-	display: flex;
-	align-items: center;
-	justify-content: center;
 	&__normal{
 		height: 60rpx;
 		line-height: 60rpx;

mock/orderList.json

@@ -0,0 +1,40 @@
+{
+	"code": "SUCCESS",
+	"message": "操作成功",
+	"traceId": null,
+	"data": {
+	  "records": [
+		{
+		  "orderId": null,
+		  "orderStatus": null,
+		  "orderStatusDesc": null,
+		  "totalAmount": null,
+		  "payAmount": null,
+		  "products": [
+			{
+			  "orderProductId": null,
+			  "orderId": null,
+			  "productId": null,
+			  "productSkuId": null,
+			  "productName": null,
+			  "productImageUrl": null,
+			  "skuDescribe": null,
+			  "quantity": null,
+			  "realAmount": null,
+			  "detailStatus": null,
+			  "detailStatusDesc": null
+			}
+		  ]
+		}
+	  ],
+	  "total": 0,
+	  "size": 10,
+	  "current": 1,
+	  "orders": [],
+	  "optimizeCountSql": true,
+	  "searchCount": true,
+	  "countId": null,
+	  "maxLimit": null,
+	  "pages": 0
+	}
+  }

pages.json

@@ -143,6 +143,7 @@
 		},
 		{
 			"path": "pages/account/order/list",
+			"aliasPath" : "/orderList",
 			"style": {
 				"navigationStyle" : "custom",
 				"navigationBarTitleText": "uni-app"

pages/account/index.vue

@@ -3,7 +3,7 @@
 	components: { UiCell },: ch
  * @Date: 2019-08-22 19:41:20
  * @LastEditors: ch
- * @LastEditTime: 2022-03-28 17:12:48
+ * @LastEditTime: 2022-03-29 17:15:58
  * @Description: file content
 -->
 <template>
@@ -18,7 +18,7 @@
 		<view class="order">
 			<view class="order--title">
 				<text>我的订单</text>
-				<text class="order--title-more">查看更多</text>
+				<text class="order--title-more" @click="$Router.push('/orderList')">查看更多</text>
 			</view>
 			<view class="order-tabs">
 				<view class="order-tabs--item">

pages/account/order/list.vue

@@ -2,63 +2,122 @@
  * @Author: ch
  * @Date: 2022-03-22 10:58:24
  * @LastEditors: ch
- * @LastEditTime: 2022-03-26 14:27:34
+ * @LastEditTime: 2022-03-29 20:12:55
  * @Description: file content
 -->
 <template>
 	<view>
 		<view class="tabs">
-			<text class="tabs__active">全部</text>
-			<text>待付款</text>
-			<text>待发货</text>
-			<text>待收货</text>
-			<text>待评价</text>
+			<text :class="item.key === currentKey && 'tabs__active'" 
+				v-for="item in tabListData" :key="item.key" @click="changeTab(item.key)">
+				{{item.name}}</text>
 		</view>
-		<BsEmpty tips="暂无订单记录呢~" :icon="require('@/static/order/empty.png')">
-			<ui-button slot="btn" type="line">去逛逛</ui-button>
+		<BsEmpty v-if="!orderListData.length" tips="暂无订单记录呢~" :icon="require('@/static/order/empty.png')">
+			<ui-button slot="btn" type="line" @click="$Router('/')">去逛逛</ui-button>
 		</BsEmpty>
 
-		<view class="orders" v-for="item in 10" :key="item">
+		<view class="orders" v-for="item in orderListData" :key="item.orderId">
 			<view class="orders--title">
 				<text class="orders--name">官方自营</text>
-				<text class="orders--status" :class="item % 2 == 0 && 'orders--status__warn'">待收货</text>
+				<text class="orders--status" :class="[1,3].includes(item.orderStatus) && 'orders--status__warn'">{{item.orderStatusDesc}}</text>
 			</view>
-			<view class="orders--item" v-for="i in 2" :key="i">
-				<image class="orders--item-image" mode="widthFix" src="http://static.yoshop.xany6.com/2018071717370507f183424.jpg" />
+			<view class="orders--item" v-for="i in item.products" :key="i.productId">
+				<image class="orders--item-image" mode="widthFix" :src="i.productImageUrl" />
 				<view >
 					<view class="orders--item-con">
-						<text class="orders--item-title">商品标题商品标题商品标题商品标题商品标题</text>
-						<text class="orders--item-pirce">￥1922.00</text>
+						<text class="orders--item-title">{{i.productName}}</text>
+						<text class="orders--item-pirce">￥{{i.realAmount}}</text>
 					</view>
 					<view class="orders--item-desc">
 						<view>
-							<text class="orders--item-desc-item">试听课</text>
-							<text class="orders--item-desc-item">试课</text>
-							<text class="orders--item-desc-item">试听</text>
-							<text class="orders--item-desc-item">听课</text>
+							<text class="orders--item-desc-item">{{i.skuDescribe}}</text>
 						</view>
-						<text class="orders--item-num">x1</text>
+						<text class="orders--item-num">x{{i.quantity}}</text>
 					</view>
 				</view>
 			</view>
 			<view class="orders--total">
 				<text>合计</text>
-				<text class="orders--total__amount">￥1000.00</text>
+				<text class="orders--total__amount">￥{{item.totalAmount}}</text>
 				<text class="orders--total__pay">应付</text>
-				<text class="orders--total__amount orders--total__pay">￥1000.00</text>
+				<text class="orders--total__amount orders--total__pay">￥{{item.payAmount}}</text>
 			</view>
 			<view class="orders--footer">
-				<button class="orders--footer-btn">查看物流</button>
-				<button class="orders--footer-btn orders--footer-btn__red">确认收货</button>
+				<button class="orders--footer-btn orders--footer-btn__red" v-if="item.orderStatus === 1">去支付</button>
+				<button class="orders--footer-btn" v-if="item.orderStatus === 2">查看详情</button>
+				<button class="orders--footer-btn" v-if="[3,4,7].includes(item.orderStatus)">查看物流</button>
+				<button class="orders--footer-btn orders--footer-btn__red"  v-if="item.orderStatus == 4">确认收货</button>
 			</view>
 		</view>
 	</view>
 </template>
 <script>
-import BsEmpty from '../../../components/BsEmpty.vue'
-import UiButton from '../../../components/UiButton.vue'
+import BsEmpty from '../../../components/BsEmpty.vue';
+import UiButton from '../../../components/UiButton.vue';
+import { DictOrderStatus } from '@/common/dicts/order';
+import { ApiGetOrderList } from '@/common/api/order';
+
 export default {
 	components: { BsEmpty, UiButton },
+	data () {
+		return {
+			tabListData : [
+				{key : '-1', name : '全部'},
+				{key : '1', name : '待付款'},
+				{key : '3', name : '待发货'},
+				{key : '4', name : '待收货'},
+				{key : '6', name : '待评价'}
+			],
+			currentKey : '-1',
+			orderListData : [],
+			isLoading : true,
+			pageIndex : 1,
+			pageSize : 10,
+			lastPage : false
+		}
+	},
+	onLoad(){
+		this.getOrderList()
+	},
+	onReachBottom(){
+		this.next()
+	},
+	methods: {
+		/**
+		 * 切换tab 拉取当前分类第一页数据
+		 */
+		changeTab(key){
+			this.currentKey = key;
+			this.pageIndex = 1;
+			this.getOrderList = [];
+			this.getOrderList();
+		},
+		async getOrderList(){
+			this.isLoading = true;
+			const {error, result} = await ApiGetOrderList();
+			if(error){
+				uni.$u.toast(error.message);
+				return false;
+			}
+			// 标记是否为最后一页
+			if(result.records.length){
+				this.lastPage = true;
+			}else{
+				this.lastPage = false;
+			}
+			this.isLoading = false
+			this.orderListData = this.orderListData.concat(result.records);
+		},
+		/**
+		 * 到底拉取下一页数据，并判断是否执行拉取
+		 */
+		next(){
+			if(!this.lastPage){
+				this.pageIndex++;
+			}
+			this.getOrderList();
+		}
+	}
 	
 }
 </script>