订单管理

apis/interfaces/order.js

@@ -2,11 +2,63 @@
  * Web唐明明
  * 匆匆数载恍如梦，岁月迢迢华发增。
  * 碌碌无为枉半生，一朝惊醒万事空。
- * moduleName: 订单
+ * moduleName: 订单管理
  */
 
 import { request } from '../index'
 
-export {
+// 订单列表
-	
+const orders = data => {
+	return request({
+		url: 'mall/orders',
+		data
+	})
+}
+
+// 订单详情
+const info = id => {
+	return request({
+		url: 'mall/orders/' + id
+	})
+}
+
+// 删除订单
+const del = id => {
+	return request({
+		url: 'mall/orders/' + id,
+		method: 'DELETE'
+	})
+}
+
+// 取消订单
+const cancel = id => {
+	return request({
+		url: 'mall/orders/' + id + '/cancel',
+		method: 'PUT'
+	})
+}
+
+// 签收订单
+const sign = id => {
+	return request({
+		url: 'mall/orders/' + id + '/sign',
+		method: 'PUT'
+	})
+}
+
+// 物流查询
+const logistic = id => {
+	return request({
+		url: 'mall/orders/' + id + '/logistic',
+		method: 'PUT'
+	})
+}
+
+export {
+	orders,
+	info,
+	del,
+	cancel,
+	sign,
+	logistic
 }

pages/order/index.vue

@@ -10,180 +10,92 @@
 				sticky
 			></u-tabs>
 		</u-sticky>
-		<!-- 订单列表 -->
+		<block v-if="array.length >= 1">
-		<oct-order
+			<!-- 订单列表 -->
-			v-for="(item, arrayIndex) in array"
+			<oct-order
-			:key="arrayIndex"
+				v-for="(item, arrayIndex) in array"
-			:order-info="item"
+				:key="arrayIndex"
-			@onBtn="onType"
+				:order-info="item"
-		></oct-order>
+				@onBtn="onType"
-		<!-- 加载更多 -->
+			></oct-order>
-		<view class="pages-load">
+			<!-- 加载更多 -->
-			<u-loadmore :status="status" />
+			<view class="pages-load">
-		</view>
+				<u-loadmore :status="status" />
+			</view>
+		</block>
+		<block v-else>
+			<view class="vertical order-null">
+				<u-empty
+						mode="order"
+						icon="http://cdn.uviewui.com/uview/empty/order.png"
+						text="暂无相关订单"
+						textColor="#999"
+				></u-empty>
+			</view>
+		</block>
 	</view>
 </template>
 
 <script>
+	import { orders, del, cancel, sign } from '@/apis/interfaces/order'
 	export default {
 		data() {
 			return {
 				status: "loading",
 				tabs: [
-					{name: "全部"},
+					{name: "全部", type: ""},
-					{name: "待付款"},
+					{name: "待付款", type: "unpay"},
-					{name: "待发货"},
+					{name: "待发货", type: "paid"},
-					{name: "待签收"},
+					{name: "待签收", type: "delivered"},
-					{name: "已完成"}
+					{name: "已完成", type: "completed"},
-				],
-				array: [
-					{
-						no			: "2261957223036048580",
-						cover		: "https://yanxuan-item.nosdn.127.net/ef838761c8528888213766d3dcc50907.jpg",
-						name		: "秋冬潮湿多雨，便携迷你除湿器",
-						price		: "59.90",
-						sum			: 1,
-						stateText	: "已完成",
-						store		: {
-							name: "网易严选",
-							logo: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg"
-						}
-					},{
-						no			: "2261957223036048580",
-						cover		: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg",
-						name		: "稻纯贵州茅台镇新一代酱香型白酒 53度",
-						price		: "158.00",
-						sum			: 2,
-						stateText	: "待支付",
-						store		: {
-							name: "网易严选",
-							logo: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg"
-						}
-					},
-					{
-						no			: "2261957223036048580",
-						cover		: "https://yanxuan-item.nosdn.127.net/ef838761c8528888213766d3dcc50907.jpg",
-						name		: "秋冬潮湿多雨，便携迷你除湿器",
-						price		: "59.90",
-						sum			: 1,
-						stateText	: "已完成",
-						store		: {
-							name: "网易严选",
-							logo: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg"
-						}
-					},{
-						no			: "2261957223036048580",
-						cover		: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg",
-						name		: "稻纯贵州茅台镇新一代酱香型白酒 53度",
-						price		: "158.00",
-						sum			: 2,
-						stateText	: "待支付",
-						store		: {
-							name: "网易严选",
-							logo: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg"
-						}
-					},
-					{
-						no			: "2261957223036048580",
-						cover		: "https://yanxuan-item.nosdn.127.net/ef838761c8528888213766d3dcc50907.jpg",
-						name		: "秋冬潮湿多雨，便携迷你除湿器",
-						price		: "59.90",
-						sum			: 1,
-						stateText	: "已完成",
-						store		: {
-							name: "网易严选",
-							logo: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg"
-						}
-					},{
-						no			: "2261957223036048580",
-						cover		: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg",
-						name		: "稻纯贵州茅台镇新一代酱香型白酒 53度",
-						price		: "158.00",
-						sum			: 2,
-						stateText	: "待支付",
-						store		: {
-							name: "网易严选",
-							logo: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg"
-						}
-					},
-					{
-						no			: "2261957223036048580",
-						cover		: "https://yanxuan-item.nosdn.127.net/ef838761c8528888213766d3dcc50907.jpg",
-						name		: "秋冬潮湿多雨，便携迷你除湿器",
-						price		: "59.90",
-						sum			: 1,
-						stateText	: "已完成",
-						store		: {
-							name: "网易严选",
-							logo: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg"
-						}
-					},{
-						no			: "2261957223036048580",
-						cover		: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg",
-						name		: "稻纯贵州茅台镇新一代酱香型白酒 53度",
-						price		: "158.00",
-						sum			: 2,
-						stateText	: "待支付",
-						store		: {
-							name: "网易严选",
-							logo: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg"
-						}
-					},
-					{
-						no			: "2261957223036048580",
-						cover		: "https://yanxuan-item.nosdn.127.net/ef838761c8528888213766d3dcc50907.jpg",
-						name		: "秋冬潮湿多雨，便携迷你除湿器",
-						price		: "59.90",
-						sum			: 1,
-						stateText	: "已完成",
-						store		: {
-							name: "网易严选",
-							logo: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg"
-						}
-					},{
-						no			: "2261957223036048580",
-						cover		: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg",
-						name		: "稻纯贵州茅台镇新一代酱香型白酒 53度",
-						price		: "158.00",
-						sum			: 2,
-						stateText	: "待支付",
-						store		: {
-							name: "网易严选",
-							logo: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg"
-						}
-					},
-					{
-						no			: "2261957223036048580",
-						cover		: "https://yanxuan-item.nosdn.127.net/ef838761c8528888213766d3dcc50907.jpg",
-						name		: "秋冬潮湿多雨，便携迷你除湿器",
-						price		: "59.90",
-						sum			: 1,
-						stateText	: "已完成",
-						store		: {
-							name: "网易严选",
-							logo: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg"
-						}
-					},{
-						no			: "2261957223036048580",
-						cover		: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg",
-						name		: "稻纯贵州茅台镇新一代酱香型白酒 53度",
-						price		: "158.00",
-						sum			: 2,
-						stateText	: "待支付",
-						store		: {
-							name: "网易严选",
-							logo: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg"
-						}
-					}
 				],
+				index: 0,
+				array: [],
+				page : 1
 			};
 		},
+		mounted() {
+			this.getOrder()
+		},
 		methods:{
+			getOrder(){
+				orders({
+					state: this.tabs[this.index].type,
+					page : this.page
+				}).then(res => {
+					if(res.page.current === 1){
+						this.array = []
+					}
+					let ordersArr = res.data.map(val => {
+						return {
+							no			: val.order_no,
+							cover		: val.items[0].sku.cover,
+							name		: val.items[0].sku.goods_name,
+							price		: val.items[0].price,
+							sum			: val.items[0].qty,
+							stateText	: val.state,
+							cans	    : val.can
+						}
+					})
+					this.array = this.array.concat(ordersArr)
+					this.status = res.page.has_more ? 'loadmore' : 'nomore'
+				})
+			},
 			onTabs(e){
-				console.log(e.index)
+				this.page = 1
+				this.index = e.index
+				this.getOrder()
 			},
 			onType(e){
 				console.log(e)
+				console.log(e.type)
+			}
+		},
+		onReachBottom() {
+			if(this.status === 'loadmore'){
+				this.page += 1
+				this.status = 'loading'
+				this.getOrder()
 			}
 		}
 	}
@@ -197,6 +109,10 @@
 	.tabs{
 		background: white;
 	}
+	// 数据列表空
+	.order-null{
+		height: 80vh;
+	}
 	// 加载分页
 	.pages-load{
 		padding-bottom: $padding;

uni_modules/oct-order/components/oct-order/oct-order.vue

@@ -40,11 +40,16 @@
 					</view>
 				</view>
 			</block>
-			<slot name="btns">
+			<slot name="btns" v-if="orderInfo.cans">
 				<view class="order--btns">
-					<block v-for="(btnItem, btnIndex) in orderBtns" :key="btnIndex">
+					<!-- <block v-for="(btnItem, btnIndex) in orderBtns" :key="btnIndex">
 						<view class="item" @click="$emit('onBtn', {type: btnItem.type, order: orderInfo})" :style="btnItem.style">{{btnItem.text}}</view>
-					</block>
+					</block> -->
+					<view v-show="orderInfo.cans.cancel" class="item item--cancel" @click="$emit('onBtn', {type: 'cancel', order: orderInfo})">取消订单</view>
+					<view v-show="orderInfo.cans.delete" class="item item--delete" @click="$emit('onBtn', {type: 'delete', order: orderInfo})">删除订单</view>
+					<view v-show="orderInfo.cans.logistic_show" class="item item--logistic" @click="$emit('onBtn', {type: 'logistic', order: orderInfo})">查看物流</view>
+					<view v-show="orderInfo.cans.pay" class="item item--pay" @click="$emit('onBtn', {type: 'pay', order: orderInfo})">立即支付</view>
+					<view v-show="orderInfo.cans.sign" class="item item--sign" @click="$emit('onBtn', {type: 'sign', order: orderInfo})">签收</view>
 				</view>
 			</slot>
 		</view>
@@ -137,6 +142,7 @@
 				font-size: 28rpx;
 				line-height: 40rpx;
 				color: #555;
+				@extend .text-nowrap;
 			}
 			&> .stateText{
 				font-size: 26rpx;
@@ -219,6 +225,16 @@
 				border: solid 1rpx #ddd;
 				padding: 0 ($margin - 10);
 				border-radius: 28rpx;
+				&--cancel,
+				&--delete,
+				&--logistic{
+					color: #666;
+				}
+				&--pay,
+				&--sign{
+					color: #34CE98;
+					border-color: #34CE98;
+				}
 			}
 		}
 	}

utils/conf/env.js

@@ -0,0 +1,2 @@
+
+

utils/index.js

@@ -1,5 +1,5 @@
 import sha1 from './sha1.js'
-import env from '../conf/env.js'
+import env from './conf/env.js'
 import * as RongIMLib from '@rongcloud/imlib-uni'
 export default {
 	checkPhone: (phone) => {