更新

App.vue

@@ -30,7 +30,7 @@ button::after {
 /**挂载iconfont字体图标*/
 @font-face {
 	font-family: 'iconfont';
-	src: url('https://at.alicdn.com/t/c/font_3807151_9849rwf8w2.ttf?t=1670080865926') format('truetype');
+	src: url('https://at.alicdn.com/t/c/font_3807151_7gw27eli6e.ttf?t=1670399396095') format('truetype');
 	/* src: url('~@/static/font/iconfont.ttf') format('truetype'); */
 }
 .icon {

common/common.scss

@@ -1,31 +1,3 @@
-/**手机端**/
-.app {
-	@media screen and(min-width:$min-width) {
-		display: none;
-	}
-}
-/**PC端**/
-.pc {
-	display: none;
-	width: 1100px;
-	margin: 0 auto;
-	@media screen and(min-width:$min-width) {
-		display: block;
-	}
-}
-/**pc端隐藏tab和顶部**/
-.uni-tabbar {
-	@media screen and(min-width:$min-width) {
-		display: none !important;
-	}
-}
-uni-page-head,
-uni-app .uni-page-head {
-	@media screen and(min-width:$min-width) {
-		display: none !important;
-	}
-}
-/**end**/
 .omit {
 	white-space: nowrap;
 	text-overflow: ellipsis;
@@ -33,9 +5,6 @@ uni-app .uni-page-head {
 }
 .ellip {
 	-webkit-line-clamp: 2;
-	@media screen and(min-width:$min-width) {
-		-webkit-line-clamp: 3;
-	}
 	text-overflow: ellipsis;
 	display: -webkit-box;
 	-webkit-box-orient: vertical;
@@ -73,16 +42,45 @@ uni-app .uni-page-head {
 	}
 	.lable {
 		font-size: 15px;
-		float: left;
 		line-height: 30px;
-		width: 75px;
+		width: 30%;
+		float: left;
 		text-align: left;
+		float: left;
 		color: #545555;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		overflow: hidden;
 		.icon {
 			font-size: 23px;
 			font-weight: normal;
 		}
 	}
+	.tag {
+		float: left;
+		text-align: right;
+		width: 70%;
+		margin-top: 5px;
+		color: #909090;
+		text {
+			font-size: 15px;
+		}
+		.span {
+			float: left;
+			width: 93%;
+			text-align: right;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
+		}
+		.code {
+			font-size: 20px;
+		}
+		.more {
+			float: right;
+			margin-top: 4px;
+		}
+	}
 	picker {
 		margin-left: 106px;
 		margin-top: 5px;
@@ -95,9 +93,6 @@ uni-app .uni-page-head {
 		border-radius: 5px;
 		padding: 10px;
 		width: 60%;
-		@media screen and(min-width:$min-width) {
-			width: 88%;
-		}
 	}
 	textarea {
 		display: block;
@@ -112,14 +107,40 @@ uni-app .uni-page-head {
 		margin-left: 20px;
 	}
 }
+.vtitle {
+	padding: 12px 10px 12px 10px;
+	font-weight: bold;
+	font-size: 17px;
+	color: $font-c;
+}
 .footer {
 	width: 100%;
 	position: fixed;
 	bottom: 0%;
 	padding: 10px;
 	background-color: #f2f3f5;
+	.flex {
+		padding: 5px;
+		.btn {
+			width: 70%;
+		}
+	}
 }
 .ws {
 	width: 30%;
 	border-radius: 25px;
 }
+.search {
+	background-color: white;
+	padding: 5px 15px;
+	.input {
+		margin-bottom: 10px;
+	}
+	.f {
+		padding: 5px;
+		background-color: white;
+	}
+	.c {
+		background-color: #f44336;
+	}
+}

pages.json

@@ -1,6 +1,46 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 		{
+			"path": "pages/home/index",
+			"style": {
+				"navigationBarTitleText": "首页",
+				"enablePullDownRefresh": true,
+				"navigationStyle": "custom"
+			}
+
+		},
+		{
+			"path": "pages/model/index",
+			"style": {
+				"navigationBarTitleText": "设备借还台账",
+				"enablePullDownRefresh": true,
+				"app-plus": {
+					"titleNView": {
+						"buttons": [{
+							"text": "\ue752",
+							"fontSize": "20px",
+							"float": "right",
+							"fontSrc": "/static/font/iconfont.ttf"
+						}]
+					},
+					"pullToRefresh": {
+						"support": true,
+						"style": "circle",
+						"offset": 0
+					}
+				}
+			}
+
+		},
+		{
+			"path": "pages/model/return",
+			"style": {
+				"navigationBarTitleText": "设备归还",
+				"enablePullDownRefresh": false
+			}
+
+		},
+		{
 			"path": "pages/index/index",
 			"style": {
 				"navigationBarTitleText": "委托单列表",
@@ -21,34 +61,29 @@
 					}
 				}
 			}
+		}, {
+			"path": "pages/index/detail",
+			"style": {
+				"navigationBarTitleText": "委托单详情",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/index/select",
+			"style": {
+				"navigationBarTitleText": "选择审批人员",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/login",
+			"style": {
+				"navigationBarTitleText": "柳工",
+				"enablePullDownRefresh": false
+			}
+
 		}
-	    ,{
-            "path" : "pages/index/detail",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "委托单详情",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/index/select",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "选择审批人员",
-                "enablePullDownRefresh": false
-            }
-            
-        },{
-            "path" : "pages/login",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "柳工",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-    ],
+	],
 	"globalStyle": {
 		"navigationBarTextStyle": "white",
 		"navigationBarTitleText": "柳工机械",

pages/home/index.vue

@@ -0,0 +1,221 @@
+<template>
+	<view>
+		<view class="banner"><image src="../../static/my2.png" mode="widthFix"></image></view>
+		<view class="ccn" style="margin-top: -150px;">
+			<view class="cn">
+				<view class="rows">
+					<view class="row" @click="go('/pages/test/index')">
+						<view class="out">
+							<view class="ioc" style="background-color: #2196F3;"><text class="icon">&#xe6f3;</text></view>
+							<view class="tit omit">设备借还记录设备借还记录</view>
+						</view>
+					</view>
+					<view class="row" @click="go('/pages/test/index')">
+						<view class="out">
+							<view class="ioc" style="background-color: #2196F3;"><text class="icon">&#xe6f3;</text></view>
+							<view class="tit omit">设备借还记录</view>
+						</view>
+					</view>
+					<view class="row" @click="go('/pages/test/index')">
+						<view class="out">
+							<view class="ioc" style="background-color: #2196F3;"><text class="icon">&#xe6f3;</text></view>
+							<view class="tit omit">设备借还记录</view>
+						</view>
+					</view>
+					<view class="row" @click="go('/pages/test/index')">
+						<view class="out">
+							<view class="ioc" style="background-color: #2196F3;"><text class="icon">&#xe6f3;</text></view>
+							<view class="tit omit">设备借还记录</view>
+						</view>
+					</view>
+					<view class="row" @click="go('/pages/model/index')">
+						<view class="out">
+							<view class="ioc" style="background-color: #2196F3;"><text class="icon">&#xe6f3;</text></view>
+							<view class="tit omit">设备台账</view>
+						</view>
+					</view>
+					<view class="row" @click="go('/pages/test/index')">
+						<view class="out">
+							<view class="ioc" style="background-color: #2196F3;"><text class="icon">&#xe6f3;</text></view>
+							<view class="tit omit">设备借还记录</view>
+						</view>
+					</view>
+					<view class="row" @click="go('/pages/test/index')">
+						<view class="out">
+							<view class="ioc" style="background-color: #2196F3;"><text class="icon">&#xe6f3;</text></view>
+							<view class="tit omit">设备借还记录</view>
+						</view>
+					</view>
+					<view class="clear"></view>
+				</view>
+			</view>
+		</view>
+		<view class="ccn">
+			<view class="cn">
+				<view class="lable">
+					<text>审批中心</text>
+					<text class="more">更多></text>
+				</view>
+				<view class="list">
+					<view class="tab"><u-tabs :list="tab" :current="current" @click="click"></u-tabs></view>
+					<view class="item" v-for="(item, index) in list" :key="index" @click="detail(item.id)">
+						<view class="title">
+							<text class="icon">&#xe602;</text>
+							<text>报告流程</text>
+						</view>
+						<view class="desc">
+							<view class="name">杨军</view>
+							<view class="bm omit">电器技术研究所</view>
+							<view class="date">2022-09-14 10:51:12</view>
+						</view>
+						<view class="clear"></view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+<script>
+export default {
+	data() {
+		return {
+			user: {},
+			current: 0,
+			tab: [{ name: '待审批', badge: { value: 5 } }, { name: '已审批' }],
+			list: [{}, {}, {}, {}, {}]
+		};
+	},
+	onShow() {
+		this.getData();
+	},
+	methods: {
+		getData() {},
+		//跳转
+		go(url) {
+			uni.navigateTo({ url: url });
+		},
+		click(e) {},
+		//退出登录
+		exit() {
+			uni.showModal({
+				title: '提示',
+				content: '确定退出登录?',
+				success: res => {
+					if (res.confirm) {
+						uni.removeStorageSync('user');
+						this.user = {};
+					}
+				}
+			});
+		}
+	},
+	//下拉刷新
+	onPullDownRefresh() {
+		setTimeout(() => {
+			this.getData();
+			uni.stopPullDownRefresh();
+		}, 1000);
+	}
+};
+</script>
+
+<style lang="scss">
+page {
+	background-color: #f1f0f1;
+}
+.banner {
+	image {
+		width: 100%;
+	}
+}
+.ccn {
+	padding: 13px;
+	overflow: hidden;
+	position: relative;
+	margin-top: -15px;
+	.cn {
+		background-color: white;
+		border-radius: 8px;
+		padding: 10px;
+		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+		.rows {
+			margin-top: 3%;
+			.row {
+				float: left;
+				width: 33.33%;
+				text-align: center;
+				.out {
+					padding: 5px;
+					.ioc {
+						width: 40px;
+						height: 40px;
+						background-color: red;
+						border-radius: 40%;
+						text-align: center;
+						margin: 0 auto;
+						line-height: 40px;
+						.icon {
+							font-size: 19px;
+							color: white;
+						}
+					}
+					.tit {
+						font-size: 14px;
+						margin-top: 5px;
+						color: #848484;
+					}
+				}
+			}
+		}
+		.lable {
+			font-size: 17px;
+			color: $font-c;
+			font-weight: bold;
+			.more {
+				float: right;
+				font-size: 14px;
+				font-weight: normal;
+				color: #848484;
+			}
+		}
+		.list {
+			.tab {
+				background-color: aliceblue;
+				border-radius: 3px;
+				margin-top: 7px;
+			}
+			.item {
+				margin-top: 10px;
+				padding: 10px 5px 15px 5px;
+				border-bottom: 1px solid #f0f2f7;
+				&:last-child {
+					border: 0px;
+				}
+				.title {
+					font-size: 17px;
+					color: $font-c;
+					.icon {
+						padding-right: 5px;
+					}
+				}
+				.desc {
+					font-size: 14px;
+					color: #848484;
+					padding-top: 5px;
+					.name {
+						float: left;
+						padding-right: 10px;
+					}
+					.bm {
+						float: left;
+						width: 40%;
+					}
+					.date {
+						float: right;
+					}
+				}
+			}
+		}
+	}
+}
+</style>

pages/model/index.vue

@@ -0,0 +1,170 @@
+<template>
+	<view>
+		<view class="search" v-if="show">
+			<u-divider text="展开搜索"></u-divider>
+			<u--input v-model="param.xx" placeholder="输入条件" class="input" clearable></u--input>
+			<u--input v-model="param.xx" placeholder="输入条件" class="input" clearable></u--input>
+			<u--input v-model="param.xx" placeholder="输入条件" class="input" clearable></u--input>
+			<u--input v-model="param.xx" placeholder="输入条件" class="input" clearable></u--input>
+			<u--input v-model="param.xx" placeholder="输入条件" class="input" clearable></u--input>
+			<view class="flex">
+				<view class="f"><button class="btn c" @click="clear()">重置</button></view>
+				<view class="f"><button class="btn" @click="search()">搜索</button></view>
+			</view>
+		</view>
+		<view class="list">
+			<view class="item" v-for="(item, index) in list" :key="index" @click="detail(item.id)">
+				<view class="title">
+					<text class="tv">便携式储能电源</text>
+					<text class="icon">&#xe631;</text>
+					<view class="clear"></view>
+				</view>
+				<view class="con">
+					<view class="it">
+						<view class="label">设备型号：</view>
+						<view class="name">PMQ104M10005</view>
+					</view>
+					<view class="it">
+						<view class="label">借用人部门：</view>
+						<view class="name">工业设计与操纵环境研究所</view>
+					</view>
+					<view class="it">
+						<view class="label">借用人：</view>
+						<view class="name">腾飞</view>
+					</view>
+					<view class="tag">撰写</view>
+				</view>
+			</view>
+			<view class="loading" v-if="loadMore"><u-loadmore :status="loadMore ? 'loading' : 'nomore'" /></view>
+			<u-empty v-if="!loadMore && list.length == 0"></u-empty>
+		</view>
+		<view class="footer">
+			<view class="flex">
+				<view class="f"><button class="btn br" @click="go('/pages/model/return?op=设备归还')">归还设备</button></view>
+				<view class="f"><button class="btn br" @click="go('/pages/model/return?op=设备借用')">借用设备</button></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			param: { pageNum: 1, pageSize: 10, userId: this.getUser().id, orderByColumn: 'createTime', isAsc: 'desc' },
+			list: [{}, {}, {}, {}, {}],
+			show: false,
+			loadMore: true
+		};
+	},
+	onLoad(e) {
+		//this.getData();
+	},
+	methods: {
+		getData() {
+			this.http.request({
+				url: this.http.urls.user_task_record_list,
+				data: this.param,
+				loading: 'false',
+				success: res => {
+					this.loadMore = res.data.pages > this.param.pageNum ? true : false;
+					res.data.rows.forEach(item => {
+						this.list.push(item);
+					});
+				}
+			});
+		},
+		//刷新数据
+		refresh() {
+			this.loadMore = true;
+			this.param.pageNum = 1;
+			this.list = [];
+			this.getData();
+		},
+		//跳转到详情
+		detail(id) {
+			uni.navigateTo({
+				url: '/pages/index/detail?id=' + id
+			});
+		},
+		go(url) {
+			uni.navigateTo({
+				url: url
+			});
+		}
+	},
+	//下拉刷新
+	onPullDownRefresh() {
+		setTimeout(() => {
+			this.refresh();
+			uni.stopPullDownRefresh();
+		}, 1000);
+	},
+	//上拉加载
+	onReachBottom() {
+		if (this.loadMore) {
+			this.param.pageNum++;
+			this.getData();
+		}
+	},
+	//展开搜索
+	onNavigationBarButtonTap() {
+		this.show = !this.show;
+	}
+};
+</script>
+
+<style lang="scss">
+page {
+	background-color: #f2f3f5;
+}
+.list {
+	padding: 0px 15px 80px 15px;
+	.item {
+		margin-top: 10px;
+		background-color: white;
+		border-radius: 5px;
+		overflow: hidden;
+		padding-bottom: 5px;
+		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+		.title {
+			border-bottom: 1px solid #efefef;
+			padding: 12px;
+			color: $font-c1;
+			.tv {
+				float: left;
+				width: 90%;
+			}
+		}
+		.con {
+			position: relative;
+			.it {
+				font-size: 14px;
+				padding: 5px 12px 5px 12px;
+				.label {
+					float: left;
+					color: #969696;
+					width: 90px;
+					text-align: right;
+				}
+				.name{
+					color: $font-c;
+				}
+			}
+			.tag {
+				position: absolute;
+				top: 10%;
+				right: 0px;
+				padding: 3px 10px;
+				background-color: #F44336;
+				color: white;
+				font-size: 14px;
+				border-radius: 15px 0px 0px 15px;
+			}
+		}
+	}
+}
+.br {
+	border-radius: 25px;
+}
+</style>

pages/model/return.vue

@@ -0,0 +1,138 @@
+<template>
+	<view>
+		<view class="vtitle">借用人信息</view>
+		<view class="form_group">
+			<view class="lable">扫码</view>
+			<view class="tag" @click="qr()">
+				<text class="span"></text>
+				<text class="icon code">&#xe60e;</text>
+			</view>
+		</view>
+		<view class="form_group">
+			<view class="lable">设备所属部门</view>
+			<view class="tag" @click="qr()">
+				<text class="span">智能技术研究所</text>
+				<text class="icon more">&#xe631;</text>
+			</view>
+		</view>
+		<view class="form_group">
+			<view class="lable">借用人</view>
+			<view class="tag" @click="qr()">
+				<text class="span"></text>
+				<text class="icon more">&#xe631;</text>
+			</view>
+		</view>
+		<view class="form_group">
+			<view class="lable">手机号</view>
+			<view class="tag" @click="qr()">
+				<text class="span"></text>
+				<text class="icon more">&#xe631;</text>
+			</view>
+		</view>
+		<view class="vtitle">借用设备信息</view>
+		<view class="form_group">
+			<view class="lable">手机号</view>
+			<view class="tag" @click="qr()"><text class="span">PMQ133701437</text></view>
+		</view>
+		<view class="form_group">
+			<view class="lable">设备名称</view>
+			<view class="tag" @click="qr()"><text class="span">压力传感器</text></view>
+		</view>
+		<view class="form_group">
+			<view class="lable">计量编号</view>
+			<view class="tag" @click="qr()"><text class="span">压力传感器</text></view>
+		</view>
+		<view class="form_group">
+			<view class="lable">设备名称</view>
+			<view class="tag" @click="qr()"><text class="span">PMQ137700009</text></view>
+		</view>
+		<view class="form_group">
+			<view class="lable">三向加速度计</view>
+			<view class="tag" @click="qr()"><text class="span">三向加速度计</text></view>
+		</view>
+		<button class="btn">提交</button>
+	</view>
+</template>
+
+<script>
+let qrcode = require('@/common/code.js');
+export default {
+	data() {
+		return {
+			item: {},
+			op: '设备归还',
+			current: 0
+		};
+	},
+	onLoad(e) {
+		this.op = e.op;
+		//选中审批人员监听函数,其它类型的参考这个
+		uni.$on('select', res => {
+			console.log('asd:' + JSON.stringify(res));
+		});
+	},
+	onReady() {
+		uni.setNavigationBarTitle({
+			title: this.op
+		});
+	},
+	methods: {
+		qr() {
+			// 调用uni提供的调用相机api
+			uni.chooseImage({
+				sizeType: ['original'],
+				sourceType: ['camera'],
+				count: 1,
+				success: res => {
+					const tempFilePaths = res.tempFilePaths[0]; // 获取到二维码图片的链接
+					qrcode.decode(tempFilePaths); // 解析二维码图片
+					qrcode.callback = r => {
+						this.item.code = r;
+						console.log('asd:' + r);
+						this.$forceUpdate();
+					};
+				}
+			});
+		},
+		//选择结果形式
+		change(e) {
+			this.current = e;
+			console.log('aa:' + this.radio[this.current].name);
+		},
+		//选择审批人员
+		select() {
+			uni.navigateTo({
+				url: '/pages/index/select'
+			});
+		},
+		//提交
+		add() {
+			this.http.request({
+				url: this.http.urls.user_task_add,
+				data: this.item,
+				method: 'POST',
+				success: res => {
+					uni.showModal({
+						title: '提示',
+						content: '提交成功',
+						showCancel: false,
+						success: res => {
+							if (res.confirm) {
+								uni.navigateBack();
+							}
+						}
+					});
+				}
+			});
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+.btn {
+	width: 80%;
+	margin-top: 20px;
+	margin-bottom: 20px;
+}
+</style>