hi 5 days ago
parent
commit
05c7df1cbd

+ 104 - 0
components/good-item/good-item.vue

@@ -0,0 +1,104 @@
+<template>
+	<view class="good-item">
+		<view class="good-msg">
+			<u-image
+				:src="item.src"
+				width="128rpx"
+				height="128rpx"
+			></u-image>
+			<view class="ss-m-l-16">
+				<view class="good-msg-name">{{item.name}}</view>
+				<view class="good-msg-txm">条形码:6904045405</view>
+			</view>
+		</view>
+		<view class="good-cont">
+			<view class="good-cont-item">
+				<view class="item-label">规格</view>
+				<view class="item-value">205ml</view>
+			</view>
+			<view class="good-cont-item">
+				<view class="item-label">批次号</view>
+				<view class="item-value">12345678966</view>
+			</view>
+			<view class="good-cont-item">
+				<view class="item-label">生产日期</view>
+				<view class="item-value">2025-04-03</view>
+			</view>
+			<view class="good-cont-item">
+				<view class="item-label">库存</view>
+				<view class="item-value">20瓶</view>
+			</view>
+			<view class="good-cont-item">
+				<view class="item-label">库位</view>
+				<view class="item-value">A区3-1-1</view>
+			</view>
+			<view class="good-cont-item">
+				<view class="item-label">订单数量</view>
+				<view class="item-value">20瓶</view>
+			</view>
+		</view>
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	export default{
+		props:{
+			item:{
+				type:Object,
+				default:()=>{}
+			}
+		},
+		data() {
+			return {
+				
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.good-item {
+		padding: 24rpx 0;
+		border-bottom: 4rpx solid #F0F6FB;
+		.good-msg {
+			display: flex;
+			align-items: center;
+			padding: 0 24rpx;
+			&-name {
+				color: #333;
+				font-family: "PingFang SC";
+				font-size: 28rpx;
+				font-weight: 500;
+				margin-bottom: 16rpx;
+			}
+			&-txm {
+				color: #999;
+				font-family: "PingFang SC";
+				font-size: 28rpx;
+				font-weight: 400;
+			}
+		}
+		.good-cont {
+			display: grid;
+			grid-template-columns: 20% 40% 40%;
+			margin-top: 16rpx;
+			padding: 0 24rpx;
+			&-item {
+				font-family: "PingFang SC";
+				font-weight: 400;
+				margin-bottom: 24rpx;
+				.item-label {
+					color: #999;
+					font-size: 24rpx;
+					margin-bottom: 16rpx;
+				}
+				.item-value {
+					color: #000;
+					font-size: 28rpx;
+				}
+			}
+		}
+	}
+	
+</style>

+ 8 - 3
components/task-item/task-item.vue

@@ -9,8 +9,8 @@
 			<view>快马阳光便利店</view>
 		</view>
 		<view class="task-line">
-			<view>客户名称:</view>
-			<view>快马阳光便利店</view>
+			<view>单据日期:</view>
+			<view>2021-11-21 00:00:03</view>
 		</view>
 		<view class="task-line">
 			<view class="task-line2">
@@ -23,7 +23,7 @@
 			</view>
 		</view>
 		<view class="task-bottom">
-			<view class="btn btn-1">去出库</view>
+			<view class="btn btn-1" @click="toStorage">去出库</view>
 			<!-- <view class="btn btn-2">详情</view> -->
 		</view>
 	</view>
@@ -41,6 +41,11 @@
 			return{
 				
 			}
+		},
+		methods:{
+			toStorage() {
+				this.$emit('toStorage')
+			}
 		}
 	}
 </script>

+ 8 - 7
components/upload-image/upload-image.vue

@@ -1,7 +1,8 @@
 <template>
 	<view class="upload_box">
 		<!-- #ifdef APP -->
-		<template v-if="authList['WRITE_EXTERNAL_STORAGE']&&authList['CAMERA']">
+		<template>
+		<!-- <template v-if="authList['WRITE_EXTERNAL_STORAGE']&&authList['CAMERA']"> -->
 			<u-upload
 				:deletable="!isDetail"
 				:fileList="fileList1"
@@ -15,11 +16,11 @@
 				:previewFullImage="true"
 			>
 				<view class="upload_btn">
-					<u-image :radius="radius" :width="width" :height="height" :showError="false" :showLoading="false" :src="`${$IMG_URL}/static/contract/icon_increase1-2.png`"></u-image>
+					<u-image :radius="radius" :width="width" :height="height" :showError="false" :showLoading="false" src="@/static/image/upload-img.png"></u-image>
 				</view>
 			</u-upload>
 		</template>
-		<view v-else-if="!authList['WRITE_EXTERNAL_STORAGE']" class="upload_btn_auth" @tap.stop="openAuth('WRITE_EXTERNAL_STORAGE')">
+		<!-- <view v-else-if="!authList['WRITE_EXTERNAL_STORAGE']" class="upload_btn_auth" @tap.stop="openAuth('WRITE_EXTERNAL_STORAGE')">
 			<view class="upload_btn">
 				<u-image :radius="radius" :width="width" :height="height" :showError="false" :showLoading="false" :src="`${$IMG_URL}/static/common/upload-img.png`"></u-image>
 			</view>
@@ -28,8 +29,8 @@
 			<view class="upload_btn">
 				<u-image :radius="radius" :width="width" :height="height" :showError="false" :showLoading="false" :src="`${$IMG_URL}/static/common/upload-img.png`"></u-image>
 			</view>
-		</view>
-		<yk-authpup ref="authpup" type="top" @changeAuth="changeAuth" :permissionID="permissionID"></yk-authpup>
+		</view> -->
+		<!-- <yk-authpup ref="authpup" type="top" @changeAuth="changeAuth" :permissionID="permissionID"></yk-authpup> -->
 		<!-- #endif -->
 		<!-- #ifndef APP -->
 		<u-upload
@@ -46,7 +47,7 @@
 			:previewFullImage="true"
 		>
 			<view class="upload_btn">
-				<u-image :radius="radius" :width="width" :height="height" :showError="false" :showLoading="false" :src="`${$IMG_URL}/static/common/upload-img.png`"></u-image>
+				<u-image :radius="radius" :width="width" :height="height" :showError="false" :showLoading="false" src="@/static/image/upload-img.png"></u-image>
 			</view>
 		</u-upload>
 		<!-- #endif -->
@@ -163,7 +164,7 @@ export default {
 		showTip() {
 			return this.isShowTip && (this.fileType || this.fileSize)
 		},
-		...mapGetters('auth', ['authList', 'onceIn']),
+		...mapGetters('auth', ['onceIn']),
 	},
 	mounted() {
 		// #ifdef APP

+ 13 - 8
pages.json

@@ -36,6 +36,18 @@
 			"style": {
 				"navigationBarTitleText": ""
 			}
+		},
+		{
+			"path": "pages/index/notice-page",
+			"style": {
+				"navigationBarTitleText": ""
+			}
+		},
+		{
+			"path": "pages/inventory-inquiry/index",
+			"style": {
+				"navigationBarTitleText": ""
+			}
 		}
 	],
 	/* 分包预载配置 */
@@ -45,16 +57,9 @@
 	// 		"packages": ["pages/account", "pages/app", "pages/user"]
 	// 	}
 	// },
-	"tabBar": {
-		"backgroundColor": "#FFFFFF",
-		"borderStyle": "white",
-		"color": "#BEBEBE",
-		"selectedColor": "#323232",
-		"list": []
-	},
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "先见平台",
+		"navigationBarTitleText": "pda",
 		"navigationBarBackgroundColor": "#FAFAFC",
 		"backgroundColor": "#FAFAFC",
 		"navigationStyle": "custom"

+ 107 - 0
pages/index/components/notice-item.vue

@@ -0,0 +1,107 @@
+<template>
+	<view class="notice-item">
+		<view class="item-head">
+			<view class="item-head-msg">
+				<view class="image-box">
+					<u-badge type="error" :isDot="true" :show="!item.isRead" :absolute="true" :offset="[-2,-2]"></u-badge>
+					<image :src="img" mode=""></image>
+				</view>
+				<view>{{typeText}}</view>
+			</view>
+			<view class="time-box">
+				{{$u.timeFormat(item.time, 'hh:MM:ss')}}
+			</view>
+		</view>
+		<view class="item-cont">
+			您有1条新的拣货任务(单号:{{item.sn}}),请点击查看并及时处理!
+		</view>
+		<view class="item-footer">
+			<view>查看</view>
+			<u-icon name="arrow-right" color="#7E838D"></u-icon>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default{
+		props:{
+			item:{
+				type:Object,
+				default:()=>{}
+			}
+		},
+		computed:{
+			img() {
+				let src = ""
+				if(this.item.type == 1) {
+					src = require('@/static/image/home/icon-cgrk.png')
+				}else if(this.item.type == 2) {
+					src = require('@/static/image/home/icon-chcx.png')
+				}
+				return src
+			},
+			typeText() {
+				let text = ""
+				if(this.item.type == 1) {
+					text = '采购入库'
+				}else if(this.item.type == 2) {
+					text = '存货查询'
+				}
+				return text
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.notice-item {
+		border-radius: 16px;
+		background: #FFF;
+		padding: 24rpx 24rpx 0;
+		margin-bottom: 24rpx;
+		.item-head {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			&-msg {
+				display: flex;
+				align-items: center;
+				color: #333;
+				font-family: "PingFang SC";
+				font-size: 32rpx;
+				font-weight: bold;
+				.image-box {
+					position: relative;
+					margin-right: 24rpx;
+					image {
+						width: 48rpx;
+						height: 48rpx;
+						z-index: 2;
+					}
+					::v-deep .u-badge {
+						z-index: 3;
+					}
+				}
+			}
+		}
+	
+		.item-cont {
+			color: #666;
+			font-family: "PingFang SC";
+			font-size: 28rpx;
+			font-weight: 400;
+			padding: 17rpx 0 24rpx;
+			border-bottom: 1px solid #F4F4F4;
+		}
+		.item-footer {
+			height: 88rpx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			color: #333;
+			font-family: "PingFang SC";
+			font-size: 28rpx;
+			font-weight: 400;
+		}
+	}
+</style>

+ 134 - 0
pages/index/components/use-pop.vue

@@ -0,0 +1,134 @@
+<template>
+	<view>
+		<u-popup :show="meunShow" @close="closeClick" mode="left" zIndex="999999" bgColor="#F6F8FA">
+			<view class="meun-pop">
+			 <view class="use-cont">
+				 <u-avatar :src="userInfo.avatar" size="44"></u-avatar>
+				 <view class="use-cont-name">{{userInfo.nickName}}</view>
+				 <image class="edit-img" src="@/static/image/home/edit-icon.png" mode=""></image>
+			 </view>
+			 <view class="use-msg">
+				<view class="use-msg-line">
+					<image class="label-icon" src="@/static/image/home/phone-icon.png" mode=""></image>
+					<view class="use-msg-line-cont">
+						<view>手机号</view>
+						<view class="line-value">199188123456</view>
+					</view>
+				</view>
+				<view class="use-msg-line">
+					<image class="label-icon" src="@/static/image/home/role-icon.png" mode=""></image>
+					<view class="use-msg-line-cont">
+						<view>角色</view>
+						<view class="line-value">
+							<view>仓库管理员</view>
+							<u-icon name="arrow-right" color="#7E838D"></u-icon>
+						</view>
+					</view>
+				</view>
+			 </view>
+			 <button class="toLoginBtn">
+			  退出登录
+			 </button>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	export default{
+		props:{
+			userInfo:{
+				type:Object,
+				default:()=>{}
+			},
+			value:{
+				type:Boolean,
+				default:false
+			}
+		},
+		watch:{
+			value(val) {
+				this.meunShow = val
+			}
+		},
+		data() {
+			return {
+				meunShow:false
+			}
+		},
+		methods:{
+			closeClick() {
+				this.meunShow = false
+				this.$emit('close')
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.meun-pop {
+		padding: 0 32rpx;
+		padding-top: calc(74rpx + var(--status-bar-height));
+		width: 80vw;
+		.use-cont {
+			display: flex;
+			align-items: center;
+			&-name {
+				color: #0F1828;
+				font-family: "PingFang SC";
+				font-size: 32rpx;
+				font-weight: bold;
+				margin-left: 20rpx;
+				margin-right: 8rpx;
+			}
+			.edit-img {
+				width: 32rpx;
+				height: 32rpx;
+			}
+		}
+		.use-msg {
+			margin-top: 32rpx;
+			border-radius: 16rpx;
+			background: #FFF;
+			box-shadow: 0px 4rpx 16rpx 0px rgba(207, 223, 232, 0.12);
+			padding: 0 32rpx;
+			&-line {
+				display: flex;
+				align-items: center;
+				.label-icon {
+					width: 48rpx;
+					height: 48rpx;
+				}
+				&-cont {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					height: 100rpx;
+					border-bottom: 1px solid rgba(191, 200, 219, 0.50);
+					margin-left: 24rpx;
+					flex: 1;
+					color: #0F1828;
+					font-family: "PingFang SC";
+					font-size: 28rpx;
+					font-weight: 400;
+					.line-value {
+						display: flex;
+						align-items: center;
+						color: #666;
+						.u-icon {
+							margin-left: 24rpx;
+						}
+					}
+				}
+			}
+		}
+		.toLoginBtn {
+		  height: 88rpx;
+			background: linear-gradient(90deg, #1A65FF 0%, #4287FF 100%);
+		  border-radius: 16rpx;
+		  color: #fff;
+		  margin-bottom: 32rpx;
+		  margin-top: 30rpx;
+		}
+	}
+</style>

+ 25 - 4
pages/index/index.vue

@@ -4,8 +4,9 @@
 			<view class="u-nav-slot btn-left" slot="left" @click="meunClick">
 				<image src="@/static/image/home/bulletpoint.png" mode=""></image>
 			</view>
-			<view class="u-nav-slot btn-right" slot="right">
+			<view class="u-nav-slot btn-right" slot="right" @click="noticeClick">
 				<image src="@/static/image/home/notice-icon.png" mode=""></image>
+				<u-badge type="error" :isDot="true" :show="noticeShow" :absolute="true" :offset="[-2,1]"></u-badge>
 			</view>
 		</u-navbar>
 		<view class="container_main">
@@ -22,10 +23,13 @@
 				</view>
 			</view>
 		</view>
+		<!-- 菜单弹框 -->
+		<use-pop :userInfo="userInfo" v-model="meunShow" @close="meunShow = false"></use-pop>
 	</view>
 </template>
 
 <script>
+	import usePop from './components/use-pop.vue'
 	const Base64 = require('js-base64').Base64
 	import {
 		bannerList
@@ -34,6 +38,9 @@
 		mapGetters
 	} from 'vuex'
 	export default {
+		components:{
+			usePop
+		},
 		data() {
 			return {
 				operateList:[
@@ -53,7 +60,7 @@
 						src:require('@/static/image/home/icon-chcx.png'),
 						text:'存货查询',
 						num:0,
-						url:''
+						url:'/pages/inventory-inquiry/index'
 					},
 					{
 						src:require('@/static/image/home/icon-pdrw.png'),
@@ -61,7 +68,13 @@
 						num:0,
 						url:''
 					}
-				]
+				],
+				meunShow:false,
+				userInfo: {
+					avatar:'https://uviewui.com/album/1.jpg',
+					nickName:'快马阳光冰姜'
+				},
+				noticeShow:true
 			}
 		},
 		onLoad() {
@@ -75,12 +88,17 @@
 		},
 		methods: {
 			meunClick() {
-				console.log('菜单')
+				this.meunShow = true
 			},
 			operateClick(item) {
 				uni.navigateTo({
 					url:item.url
 				})
+			},
+			noticeClick() {
+				uni.navigateTo({
+					url:'/pages/index/notice-page'
+				})
 			}
 		}
 	}
@@ -94,6 +112,7 @@
 		}
 	}
 	.btn-right {
+		position: relative;
 		image {
 			width: 40rpx;
 			height: 44rpx;
@@ -144,4 +163,6 @@
 		}
 
 	}
+	
+	
 </style>

+ 70 - 0
pages/index/notice-page.vue

@@ -0,0 +1,70 @@
+<template>
+	<view class="notice-page">
+		<u-navbar height="40px" title="消息通知" bgColor="#fff" autoBack placeholder>
+		</u-navbar>
+		<view class="container_main">
+			<view class="time-box">
+				2025-04-03 星期四
+			</view>
+			<notice-item v-for="(item,i) in noticeList" :key="i" :item="item"></notice-item>
+		</view>
+	</view>
+</template>
+
+<script>
+	import noticeItem from './components/notice-item.vue'
+	export default{
+		components:{
+			noticeItem
+		},
+		data() {
+			return {
+				noticeList:[
+					{
+						type:1,
+						sn:'123654',
+						time:'',
+						isRead:false
+					},
+					{
+						type:2,
+						sn:'aa123654',
+						time:'',
+						isRead:true
+					}
+				]
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.notice-page {
+		min-height: 100vh;
+		background-color: #F0F6FB;
+		.container_main {
+			padding: 32rpx 24rpx;
+			.time-box {
+				position: relative;
+				color: #000;
+				font-family: "PingFang SC";
+				font-size: 28rpx;
+				font-weight: 400;
+				padding-left: 20rpx;
+				margin-bottom: 24rpx;
+				&::before {
+					content: '';
+					display: block;
+					width: 6rpx;
+					height: 30rpx;
+					border-radius: 100rpx;
+					background: #0256FF;
+					position: absolute;
+					left: 0;
+					top: 50%;
+					transform: translateY(-50%);
+				}
+			}
+		}
+	}
+</style>

+ 251 - 0
pages/inventory-inquiry/index.vue

@@ -0,0 +1,251 @@
+<template>
+	<view class="inventory-page">
+		<u-navbar height="40px" title="存货查询" bgColor="#fff" autoBack placeholder>
+		</u-navbar>
+		<view class="container_main">
+			<view class="head-box">
+				<view class="search-box">
+					<u-search placeholder="请输入单据编号" shape="square" v-model="searchKey" :showAction="false"></u-search>
+					<view class="scan-icon flex_box flex_row_center">
+						<image src="@/static/image/scan-icon-2.png" mode=""></image>
+					</view>
+				</view>
+				<view class="type-box">
+					<u-tabs 
+						:list="tabList" 
+						:inactiveStyle="{color:'#000',fontSize:'24rpx'}"
+						:activeStyle="{color:'#000',fontSize:'24rpx'}" 
+						lineColor="#0256FF" 
+						lineWidth="66rpx" 
+						:scrollable="false"
+						@click="tabClick"
+						>
+					</u-tabs>
+				</view>
+			</view>
+			<view class="goods-box">
+				<view class="goods-type" @click="typeClick">
+					<view class="goods-type-text">{{typeName}}</view>
+					<u-icon name="arrow-down-fill" color="#999999" size="10"></u-icon>
+				</view>
+				<view class="goods-cont">
+					<view class="goods-cont-left">
+						<scroll-view 
+						scroll-y
+						:style="{height:`calc(100vh - ${scrollH}px - 40px - 24rpx - 102rpx)`}"
+						>
+							<view 
+								class="type-item" 
+								:class="item.id == typeId ? 'active-item':''" 
+								v-for="(item,i) in typeList" 
+								:key="i"
+								@click="chooseType(item)"
+							>
+								{{item.name}}
+							</view>
+						</scroll-view>
+					</view>
+					<view class="goods-cont-right">
+						<scroll-view scroll-y :style="{height:`calc(100vh - ${scrollH}px - 40px - 24rpx - 102rpx)`}">
+							<block v-for="(item,i) in goodsList" :key="i">
+								<good-item :item="item"></good-item>
+							</block>
+						</scroll-view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<u-picker :show="typeShow" :defaultIndex="defaultIndex" :columns="columnsList" @confirm="pickerConfirm" @cancel="typeShow= false"></u-picker>
+	</view>
+</template>
+
+<script>
+	import goodItem from '@/components/good-item/good-item.vue'
+	export default {
+		components:{
+			goodItem
+		},
+		data() {
+			return {
+				offsetTop: 0,
+				searchKey: '',
+				current: 0,
+				typeShow:false,
+				defaultIndex:[],
+				typeName:'按分类展示',
+				scrollH:0,
+				columnsList:[
+					['按分类展示','按库位展示']
+				],
+				typeId:0,
+				typeList:[
+					{
+						name:'全部',
+						id:0
+					},
+					{
+						name:'饮料',
+						id:1
+					},
+					{
+						name:'食品',
+						id:2
+					}
+				],
+				tabList: [{
+						index: 0,
+						name: '有库存'
+					},
+					{
+						index: 1,
+						name: '无库存'
+					},
+					{
+						index: 2,
+						name: '全部'
+					}
+				],
+				goodsList:[
+					{
+						src:'',
+						name:'大童专用氨基酸洗发水',
+					},
+					{
+						src:'',
+						name:'大童专用氨基酸洗发水',
+					},
+					{
+						src:'',
+						name:'大童专用氨基酸洗发水',
+					},
+					{
+						src:'',
+						name:'大童专用氨基酸洗发水',
+					},
+					{
+						src:'',
+						name:'大童专用氨基酸洗发水',
+					}
+				]
+			}
+		},
+		mounted() {
+			let systemInfo = uni.getSystemInfoSync();
+			let statusBarHeight = systemInfo.statusBarHeight;
+			let headH = 0;
+			const query = uni.createSelectorQuery().in(this);
+			query.select('.head-box').boundingClientRect(rect => {
+					headH = rect.height
+					this.scrollH = statusBarHeight + headH
+			}).exec()
+		},
+		onLoad() {
+			// let systemInfo = uni.getSystemInfoSync();
+			// let statusBarHeight = systemInfo.statusBarHeight;
+			// this.offsetTop = statusBarHeight + 40
+			
+			
+		},
+		methods: {
+			tabClick() {
+
+			},
+			typeClick() {
+				let index = this.columnsList[0].findIndex(item=>item == this.typeName)
+				this.defaultIndex = [index]
+				this.typeShow = true
+			},
+			pickerConfirm(val) {
+				this.typeName = val.value[0]
+				this.typeShow = false
+			},
+			chooseType(item) {
+				this.typeId = item.id
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.inventory-page {
+		min-height: 100vh;
+		background: #F0F6FB;
+
+		.container_main {
+			.head-box {
+				background-color: #fff;
+			}
+			.search-box {
+				background-color: rgba(191, 200, 219, 0.2);
+				margin: 0 32rpx;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				border-radius: 8rpx;
+
+				::v-deep .u-search__content {
+					background-color: transparent !important;
+
+					.u-search__content__input {
+						background-color: transparent !important;
+					}
+				}
+
+				.scan-icon {
+					width: 100rpx;
+					height: 100%;
+
+					image {
+						width: 40rpx;
+						height: 40rpx;
+					}
+				}
+			}
+		
+			.goods-box {
+				margin-top: 24rpx;
+				.goods-type {
+					display: flex;
+					align-items: center;
+					padding-left: 24rpx;
+					height: 102rpx;
+					background-color: #fff;
+					&-text {
+						color: #0256FF;
+						font-size: 28rpx;
+						font-weight: bold;
+						margin-right: 10rpx;
+					}
+				}
+			
+				.goods-cont {
+					display: flex;
+					.goods-cont-left {
+						width: 160rpx;
+						background-color: #F0F6FB;
+						.type-item {
+							width: 100%;
+							height: 84rpx;
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							color: #666;
+							font-family: "PingFang SC";
+							font-size: 28rpx;
+							font-weight: 400;
+						}
+						.active-item {
+							background-color: #fff;
+							color: #333;
+							font-weight: bold;
+						}
+					}
+					.goods-cont-right {
+						flex: 1;
+						background-color: #fff;
+					}
+				}
+			}
+		}
+	}
+</style>

+ 371 - 1
pages/picking-task/delivery.vue

@@ -1,8 +1,378 @@
 <template>
+	<view class="deliver-page">
+		<u-navbar height="40px" title="货物出库" bgColor="#0256FF" :titleStyle="{color:'#fff'}" leftIconColor="#fff" autoBack
+			placeholder>
+		</u-navbar>
+		<view class="container_main">
+			<view class="info-box" :class="isUnfold ? '':'min-height'">
+				<view class="info-line">
+					<view class="info-line-label">
+						<text>发出仓库</text>
+					</view>
+					<view class="info-line-value">
+						我的仓库
+					</view>
+				</view>
+				<view class="info-line">
+					<view class="info-line-label">
+						<text>客户</text>
+					</view>
+					<view class="info-line-value">
+						快马一店
+					</view>
+				</view>
+				<view class="info-line">
+					<view class="info-line-label">
+						<text>销售出库</text>
+					</view>
+					<view class="info-line-value">
+						我的仓库
+					</view>
+				</view>
+				<view class="info-line">
+					<view class="info-line-label">
+						<text>出库日期</text>
+					</view>
+					<view class="info-line-value">
+						2025-04-03
+					</view>
+				</view>
+				<view class="info-line">
+					<view class="info-line-label">
+						<text>配送地址</text>
+					</view>
+					<view class="info-line-value">
+						长沙市岳麓区
+					</view>
+				</view>
+				<view class="info-line">
+					<view class="info-line-label">
+						<text>上传凭证</text>
+					</view>
+					<view class="info-line-value ss-p-y-24">
+						<upload-image v-model="info.url" width="196rpx" height="196rpx"></upload-image>
+					</view>
+				</view>
+				<view class="info-line">
+					<view class="info-line-label">
+						<text>备注信息</text>
+					</view>
+					<view class="info-line-value">
+						<u-input v-model="info.mark" placeholder="请输入备注信息" border="none"></u-input>
+					</view>
+				</view>
+			</view>
+			<view class="btn-box">
+				<view class="btn-cont" @click="isUnfold = !isUnfold">
+					<text>{{isUnfold ? '收起' : '展开'}}</text>
+					<u-icon :name="isUnfold?'arrow-up':'arrow-down'"></u-icon>
+				</view>
+			</view>
+
+			<view class="scan-box">
+				<view class="scan-box-l">
+					<u-image width="120rpx" height="120rpx" src="@/static/image/zidong-saoma-img.png"></u-image>
+					<view class="tips-text">扫描快速识别货物</view>
+					<view class="tips-text2">
+						<view class="radio-box"></view>
+						<text>连续扫描</text>
+					</view>
+				</view>
+				<view class="scan-box-r">
+					<u-image width="120rpx" height="120rpx" src="@/static/image/shoudong-saoma-img.png"></u-image>
+					<view class="tips-text">手动选择</view>
+				</view>
+			</view>
+			<!-- 货物清单 -->
+			<view class="cargo-list">
+				<view class="cargo-list-title">
+					<view>出库货物清单</view>
+					<view class="cargo-list-title-tips">(轻触货物查看详情)</view>
+				</view>
+				<block v-for="(item,i) in goodsList" :key="i">
+					<good-item :item="item">
+						<view class="num-box">
+							<view class="num-box-text">已确认拣货数量</view>
+							<u-number-box v-model="value">
+								<view slot="minus" class="minus">
+									<u-icon name="minus" color="#0256FF" size="12"></u-icon>
+								</view>
+								<text slot="input" class="input">{{value}}</text>
+								<view slot="plus" class="plus">
+									<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
+								</view>
+							</u-number-box>
+						</view>
+					</good-item>
+				</block>
+			</view>
+		</view>
+		
+		<view class="footer-box">
+			<view class="footer-box-l">
+				<view>货物种类:5种</view>
+				<view>货物种数:25件</view>
+			</view>
+			<button class="submitBtn" @tap="submitClick">
+			  提交
+			</button>
+		</view>
+	</view>
 </template>
 
 <script>
+	import goodItem from '@/components/good-item/good-item.vue'
+	export default {
+		components: {
+			goodItem
+		},
+		data() {
+			return {
+				value:0,
+				isUnfold: true, //是否展开
+				info: {
+					mark: '',
+					url: ''
+				},
+				goodsList: [{
+					src: '',
+					name: '大童专用氨基酸洗发水',
+				}, {
+					src: '',
+					name: '大童专用氨基酸洗发水',
+				}]
+			}
+		},
+		methods:{
+			submitClick() {
+				
+			}
+		}
+	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	.deliver-page {
+		min-height: 100vh;
+		background-color: #F0F6FB;
+		padding-bottom: 130rpx;
+
+		.container_main {
+			padding: 24rpx;
+
+			.info-box {
+				background-color: #fff;
+				border-radius: 16rpx 16rpx 0 0;
+				padding: 24rpx 24rpx 0 24rpx;
+
+				.info-line {
+					border-bottom: 1px solid #F4F4F4;
+					min-height: 92rpx;
+					color: #333;
+					font-family: "PingFang SC";
+					font-size: 28rpx;
+					font-weight: 400;
+					display: flex;
+					align-items: center;
+
+					&-label {
+						width: 162rpx;
+					}
+
+					.must-box {
+						color: #FF3B1D;
+					}
+				}
+			}
+
+			.min-height {
+				height: 300rpx;
+				overflow: hidden;
+			}
+
+			.btn-box {
+				height: 112rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				background-color: #fff;
+				border-radius: 0 0 16rpx 16rpx;
+
+				.btn-cont {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					width: 154rpx;
+					height: 56rpx;
+					border-radius: 120rpx;
+					border: 1px solid #D9D9D9;
+					color: #666;
+					font-family: "PingFang SC";
+					font-size: 28rpx;
+					font-weight: 400;
+				}
+			}
+
+			.scan-box {
+				margin-top: 24rpx;
+				padding: 24rpx 0;
+				border-radius: 16rpx;
+				background: #FFF;
+				display: flex;
+
+				.tips-text {
+					color: #333;
+					font-size: 28rpx;
+					font-weight: 400;
+					line-height: 48rpx;
+				}
+
+				.tips-text2 {
+					color: #0256FF;
+					font-size: 24rpx;
+					font-weight: 400;
+					display: flex;
+					align-items: center;
+
+					.radio-box {
+						width: 32rpx;
+						height: 32rpx;
+						border-radius: 50%;
+						border: 1px solid #D9D9D9;
+						margin-right: 16rpx;
+					}
+				}
+
+				.scan-box-l {
+					width: 50%;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					position: relative;
+
+					&::after {
+						content: '';
+						display: block;
+						width: 1px;
+						height: 138rpx;
+						background-color: #F4F4F4;
+						position: absolute;
+						top: 50%;
+						right: 0;
+						transform: translateY(-50%);
+					}
+				}
+
+				.scan-box-r {
+					width: 50%;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+				}
+			}
+
+			.cargo-list {
+				padding: 24rpx 0;
+				background-color: #fff;
+				margin-top: 24rpx;
+				border-radius: 16rpx;
+
+				.cargo-list-title {
+					font-family: "PingFang SC";
+					font-size: 32rpx;
+					font-style: normal;
+					font-weight: bold;
+					display: flex;
+					align-items: center;
+					position: relative;
+					padding-left: 50rpx;
+
+					&::after {
+						content: '';
+						display: block;
+						width: 6rpx;
+						height: 30rpx;
+						border-radius: 100px;
+						background: #0256FF;
+						position: absolute;
+						top: 50%;
+						left: 24rpx;
+						transform: translateY(-50%);
+					}
+
+					.cargo-list-title-tips {
+						color: #0256FF;
+						font-size: 24rpx;
+						font-weight: 400;
+					}
+				}
+
+				.num-box {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					padding: 0 48rpx 0 26rpx;
+					.num-box-text {
+						color: #666;
+						font-family: "PingFang SC";
+						font-size: 28rpx;
+						font-weight: 400;
+					}
+					.input {
+						width: 112rpx;
+						text-align: center;
+						border-bottom: 1px solid #0256FF;
+						margin: 0 8rpx;
+					}
+					.minus {
+						width: 40rpx;
+						height: 40rpx;
+						border-radius: 8rpx;
+						border: 1px solid #0256FF;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+					}
+					.plus {
+						width: 40rpx;
+						height: 40rpx;
+						border-radius: 8rpx;
+						background-color: #0256FF;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+					}
+				}
+			}
+		}
+		
+		.footer-box {
+			background-color: #fff;
+			height: 126rpx;
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 0 40rpx 0 60rpx;
+			.footer-box-l {
+				color: #666;
+				font-family: "PingFang SC";
+				font-size: 28rpx;
+				font-weight: 400;
+			}
+			.submitBtn {
+				width: 362rpx;
+				height: 76rpx;
+				border-radius: 16rpx;
+				background: #0256FF;
+				color: #FFF;
+				font-size: 28rpx;
+				font-weight: 500;
+				margin: 0;
+			}
+		}
+	}
 </style>

+ 7 - 2
pages/picking-task/index.vue

@@ -30,7 +30,7 @@
 			</u-sticky>
 			<view class="task-cont">
 				<block v-for="item in 10" :key="">
-					<task-item></task-item>
+					<task-item @toStorage="toStorage"></task-item>
 				</block>
 			</view>
 		</view>
@@ -66,7 +66,6 @@
 			let systemInfo = uni.getSystemInfoSync();
 			let statusBarHeight = systemInfo.statusBarHeight;
 			this.offsetTop = statusBarHeight + 40
-			console.log('状态栏的高度是:' + statusBarHeight + 'px');
 		},
 		methods:{
 			stashClick() {
@@ -87,6 +86,12 @@
 				let index = this.columnsList[0].findIndex(item=>item == val)
 				arr = [index]
 				return arr
+			},
+			// 出库
+			toStorage(val) {
+				uni.navigateTo({
+					url:'/pages/picking-task/delivery'
+				})
 			}
 		}
 	}

BIN
static/image/home/edit-icon.png


BIN
static/image/home/phone-icon.png


BIN
static/image/home/role-icon.png


BIN
static/image/scan-icon-2.png


BIN
static/image/shoudong-saoma-img.png


BIN
static/image/upload-img.png


BIN
static/image/zidong-saoma-img.png


+ 1 - 1
uni_modules/uview-ui/components/u-navbar/u-navbar.vue

@@ -32,7 +32,7 @@
 							v-if="leftIcon&&leftIcon==='arrow-left'"
 							name="arrow-left"
 							size="22"
-							color="#1F1F39"
+							:color="leftIconColor"
 						></u-icon>
 						<u-icon
 							v-if="leftIcon&&leftIcon!=='arrow-left'"