Hello小健 3 miesięcy temu
rodzic
commit
1df875e71c

+ 13 - 1
pages.json

@@ -109,7 +109,19 @@
 		{
 			"path": "pages/waybillDeliveryOrder/index",
 			"style": {
-				"navigationBarTitleText": "派送单"
+				"navigationBarTitleText": "派送单",
+				"app-plus": {
+					"bounce": "none",
+					"titleNView": {
+						"buttons": [{
+							"fontSize": "16px",
+							"text": "筛选"
+						}],
+						"backButton": {
+							"background": "#00FF00"
+						}
+					}
+				}
 			}
 		},
 		{

+ 5 - 5
pages/home/index.vue

@@ -43,11 +43,11 @@ const list = ref([
 		src: '/static/link.png',
 		text: '库位绑定'
 	},
-	// {
-	// 	url:'/pages/waybillDeliveryOrder/index',
-	// 	src: '/static/dispatch.png',
-	// 	text: '派送单'
-	// }
+	{
+		url:'/pages/waybillDeliveryOrder/index',
+		src: '/static/dispatch.png',
+		text: '派送单'
+	}
 ]);
 onShow(() => {
 	token.value = uni.getStorageSync('token');

+ 93 - 76
pages/waybillDeliveryOrder/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="history">
+	<view class="list">
 		<view class="item" v-for="(item, i) in waybillDelivery">
 			<text class="code" :style="{ color: item.status ? 'green' : '#666' }">
 				{{ item.orderNum }}
@@ -11,95 +11,112 @@
 				{{ '\r\n' + item.createTime }}
 			</text>
 		</view>
+
 		<view v-if="waybillDelivery.length === 0" class="is-empty">暂无派送单</view>
 
 		<uni-popup ref="messageRef" type="message">
 			<uni-popup-message :type="messageType" :message="messageText" :duration="2000"></uni-popup-message>
 		</uni-popup>
+		<uni-drawer ref="showRightRef" mode="right" :mask-click="true">
+			<scroll-view style="height: 100%" scroll-y="true">
+				<view class="button-group">
+					<button @click="resetForm" type="info">重置</button>
+					<button @click="confirmForm" type="primary">确认</button>
+				</view>
+			</scroll-view>
+		</uni-drawer>
 	</view>
 </template>
 
 <script setup lang="ts">
-	import { reactive, ref } from 'vue';
-	import { onLoad } from '@dcloudio/uni-app';
-	import { pickupWaybillDeliveryOrderURL } from '@/utils/api.js';
-	const loading = ref(false);
-	const token = ref();
-	const waybillDelivery = ref([]);
-	const messageType = ref();
-	const messageText = ref();
-	const messageRef = ref();
-	const getHistory = () => {
-		loading.value = true;
-		uni.request({
-			url: pickupWaybillDeliveryOrderURL + '/index',
-			method: 'GET',
-			header: {
-				batoken: token.value
-			},
-			success: ({data} : any) => {
-				loading.value = false;
-				console.log(data);
-				if (data.code == 1) {
-					waybillDelivery.value = data.data.list;
-				} else {
-					messageType.value = 'error';
-					messageText.value = data.msg;
-					messageRef.value.open();
-				}
-			},
-			fail: (err) => {
-				loading.value = false;
+import { reactive, ref } from 'vue';
+import { onLoad, onNavigationBarButtonTap } from '@dcloudio/uni-app';
+import { pickupWaybillDeliveryOrderURL } from '@/utils/api.js';
+const loading = ref(false);
+const token = ref();
+const waybillDelivery = ref([]);
+const messageType = ref();
+const messageText = ref();
+const messageRef = ref();
+const showRightRef = ref();
+
+const resetForm = () => {};
+const confirmForm = () => {
+	showRightRef.value.close();
+};
+
+const getHistory = () => {
+	loading.value = true;
+	uni.request({
+		url: pickupWaybillDeliveryOrderURL + '/index',
+		method: 'GET',
+		header: {
+			batoken: token.value
+		},
+		success: ({ data }: any) => {
+			loading.value = false;
+			console.log(data);
+			if (data.code == 1) {
+				waybillDelivery.value = data.data.list;
+			} else {
+				messageType.value = 'error';
+				messageText.value = data.msg;
+				messageRef.value.open();
 			}
-		});
-	};
-	onLoad(() => {
-		token.value = uni.getStorageSync('token');
-		getHistory();
+		},
+		fail: (err) => {
+			loading.value = false;
+		}
 	});
+};
+onLoad(() => {
+	token.value = uni.getStorageSync('token');
+	getHistory();
+});
+onNavigationBarButtonTap((event) => {
+	if (event.index === 0) {
+		showRightRef.value.open();
+	}
+});
 </script>
 
 <style lang="scss" scoped>
-	.history {
-		display: flex;
-		width: 100%;
-		flex-direction: column;
-		justify-items: start;
-
-		.title {
-			padding: 20rpx;
-			font-size: 24rpx;
-			font-weight: 600;
-		}
-
-		.type {
-			padding-right: 20rpx;
-			font-size: 24rpx;
-		}
-
-		.code {
-			font-weight: 600;
-		}
-
-		.item {
-			padding: 20rpx;
-			font-size: 20rpx;
-			color: #666;
-
-			.status {
-				padding-left: 20rpx;
-			}
+.list {
+	margin: 0 auto;
+	display: flex;
+	flex-direction: column;
+	// justify-content: center;
+	align-items: center;
+	flex: 1;
+	// width: 100%;
+	.item {
+		margin-top: 20rpx;
+		width: 95%;
+		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.2);
+		text-align: center;
+		border-radius: 10rpx;
+		// display: inline-block;
+		background-color: #fff;
+	}
+}
+.button-group {
+	margin-top: 15px;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-around;
 
-			.fail {
-				font-weight: 600;
-				color: #f00;
-			}
-		}
+	button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 35px;
+		width: 50%;
+		margin-left: 10px;
+		font-size: 16rpx;
+	}
 
-		.is-empty {
-			text-align: center;
-			margin: 40px 0;
-			color: #999;
-		}
+	.uni-icons {
+		margin-right: 10px;
 	}
-</style>
+}
+</style>

+ 13 - 0
uni_modules/uni-drawer/changelog.md

@@ -0,0 +1,13 @@
+## 1.2.1(2021-11-22)
+- 修复 vue3中个别scss变量无法找到的问题
+## 1.2.0(2021-11-19)
+- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-drawer](https://uniapp.dcloud.io/component/uniui/uni-drawer)
+## 1.1.1(2021-07-30)
+- 优化 vue3下事件警告的问题
+## 1.1.0(2021-07-13)
+- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.7(2021-05-12)
+- 新增 组件示例地址
+## 1.0.6(2021-02-04)
+- 调整为uni_modules目录规范

+ 45 - 0
uni_modules/uni-drawer/components/uni-drawer/keypress.js

@@ -0,0 +1,45 @@
+// #ifdef H5
+export default {
+  name: 'Keypress',
+  props: {
+    disable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted () {
+    const keyNames = {
+      esc: ['Esc', 'Escape'],
+      tab: 'Tab',
+      enter: 'Enter',
+      space: [' ', 'Spacebar'],
+      up: ['Up', 'ArrowUp'],
+      left: ['Left', 'ArrowLeft'],
+      right: ['Right', 'ArrowRight'],
+      down: ['Down', 'ArrowDown'],
+      delete: ['Backspace', 'Delete', 'Del']
+    }
+    const listener = ($event) => {
+      if (this.disable) {
+        return
+      }
+      const keyName = Object.keys(keyNames).find(key => {
+        const keyName = $event.key
+        const value = keyNames[key]
+        return value === keyName || (Array.isArray(value) && value.includes(keyName))
+      })
+      if (keyName) {
+        // 避免和其他按键事件冲突
+        setTimeout(() => {
+          this.$emit(keyName, {})
+        }, 0)
+      }
+    }
+    document.addEventListener('keyup', listener)
+    // this.$once('hook:beforeDestroy', () => {
+    //   document.removeEventListener('keyup', listener)
+    // })
+  },
+	render: () => {}
+}
+// #endif

+ 183 - 0
uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue

@@ -0,0 +1,183 @@
+<template>
+	<view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer" @touchmove.stop.prevent="clear">
+		<view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close('mask')" />
+		<view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer}" :style="{width:drawerWidth+'px'}">
+			<slot />
+		</view>
+		<!-- #ifdef H5 -->
+		<keypress @esc="close('mask')" />
+		<!-- #endif -->
+	</view>
+</template>
+
+<script>
+	// #ifdef H5
+	import keypress from './keypress.js'
+	// #endif
+	/**
+	 * Drawer 抽屉
+	 * @description 抽屉侧滑菜单
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=26
+	 * @property {Boolean} mask = [true | false] 是否显示遮罩
+	 * @property {Boolean} maskClick = [true | false] 点击遮罩是否关闭
+	 * @property {Boolean} mode = [left | right] Drawer 滑出位置
+	 * 	@value left 从左侧滑出
+	 * 	@value right 从右侧侧滑出
+	 * @property {Number} width 抽屉的宽度 ,仅 vue 页面生效
+	 * @event {Function} close 组件关闭时触发事件
+	 */
+	export default {
+		name: 'UniDrawer',
+		components: {
+			// #ifdef H5
+			keypress
+			// #endif
+		},
+		emits:['change'],
+		props: {
+			/**
+			 * 显示模式(左、右),只在初始化生效
+			 */
+			mode: {
+				type: String,
+				default: ''
+			},
+			/**
+			 * 蒙层显示状态
+			 */
+			mask: {
+				type: Boolean,
+				default: true
+			},
+			/**
+			 * 遮罩是否可点击关闭
+			 */
+			maskClick:{
+				type: Boolean,
+				default: true
+			},
+			/**
+			 * 抽屉宽度
+			 */
+			width: {
+				type: Number,
+				default: 220
+			}
+		},
+		data() {
+			return {
+				visibleSync: false,
+				showDrawer: false,
+				rightMode: false,
+				watchTimer: null,
+				drawerWidth: 220
+			}
+		},
+		created() {
+			// #ifndef APP-NVUE
+			this.drawerWidth = this.width
+			// #endif
+			this.rightMode = this.mode === 'right'
+		},
+		methods: {
+			clear(){},
+			close(type) {
+				// fixed by mehaotian 抽屉尚未完全关闭或遮罩禁止点击时不触发以下逻辑
+				if((type === 'mask' && !this.maskClick) || !this.visibleSync) return
+				this._change('showDrawer', 'visibleSync', false)
+			},
+			open() {
+				// fixed by mehaotian 处理重复点击打开的事件
+				if(this.visibleSync) return
+				this._change('visibleSync', 'showDrawer', true)
+			},
+			_change(param1, param2, status) {
+				this[param1] = status
+				if (this.watchTimer) {
+					clearTimeout(this.watchTimer)
+				}
+				this.watchTimer = setTimeout(() => {
+					this[param2] = status
+					this.$emit('change',status)
+				}, status ? 50 : 300)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	$uni-mask: rgba($color: #000000, $alpha: 0.4) ;
+	// 抽屉宽度
+	$drawer-width: 220px;
+
+	.uni-drawer {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		overflow: hidden;
+		z-index: 999;
+	}
+
+	.uni-drawer__content {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		position: absolute;
+		top: 0;
+		width: $drawer-width;
+		bottom: 0;
+		background-color: $uni-bg-color;
+		transition: transform 0.3s ease;
+	}
+
+	.uni-drawer--left {
+		left: 0;
+		/* #ifdef APP-NVUE */
+		transform: translateX(-$drawer-width);
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		transform: translateX(-100%);
+		/* #endif */
+	}
+
+	.uni-drawer--right {
+		right: 0;
+		/* #ifdef APP-NVUE */
+		transform: translateX($drawer-width);
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		transform: translateX(100%);
+		/* #endif */
+	}
+
+	.uni-drawer__content--visible {
+		transform: translateX(0px);
+	}
+
+
+	.uni-drawer__mask {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		opacity: 0;
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		background-color: $uni-mask;
+		transition: opacity 0.3s;
+	}
+
+	.uni-drawer__mask--visible {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		opacity: 1;
+	}
+</style>

+ 87 - 0
uni_modules/uni-drawer/package.json

@@ -0,0 +1,87 @@
+{
+  "id": "uni-drawer",
+  "displayName": "uni-drawer 抽屉",
+  "version": "1.2.1",
+  "description": "抽屉式导航,用于展示侧滑菜单,侧滑导航。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "drawer",
+    "抽屉",
+    "侧滑导航"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}

+ 10 - 0
uni_modules/uni-drawer/readme.md

@@ -0,0 +1,10 @@
+
+
+## Drawer 抽屉
+> **组件名:uni-drawer**
+> 代码块: `uDrawer`
+
+抽屉侧滑菜单。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-drawer)
+#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839