修改添加用印图标、审批流中样式修改

pages-approve/components/steps.vue

@@ -9,8 +9,9 @@
 						<view class="text">{{item.intro}}</view>
 					</view>
 					<view class="step-user">
+						<view @click="handleViewAllUser(item.allUser)" v-if="item.allUser.length>2" class="avatar" style="margin-right:10rpx;width:80rpx;line-height:14px;padding-top:10rpx">查看全部</view> 
 						<view v-for="(user,index2) in item.user" :key="user.ApproveUserName" style="display: flex;">
-							<view class="avatar">{{user.ApproveUserName}}</view>
+							<view class="avatar">{{user.ApproveUserName.slice(-2)}}<text class="whole-name">{{user.ApproveUserName}}</text></view>
 							<text class="symbol" v-if="index2!=item.user.length-1">{{item.auditType===1?'/':'+'}}</text>
 						</view>
 					</view>
@@ -25,6 +26,14 @@
 			</view>
 		</view>
 		
+		<van-popup :show="show" @close="show=false" position="bottom" round>
+			<div class="alluser-wrap flex">
+				<view class="avatar" v-for="item in temUser" :key="item.ApproveUserName">
+					{{item.ApproveUserName.slice(-2)}}
+					<text class="whole-name">{{item.ApproveUserName}}</text>
+				</view>
+			</div>
+		</van-popup>
 	</view>
 </template>
 
@@ -40,7 +49,8 @@
 					let stepCon={
 						name:item[0].NodeType==='check'?'审批人':'抄送人',//审批节点标题
 						intro:'',//描述
-						user:item,//审批节点人列表
+						user:item.slice(0,2),//审批节点人列表
+						allUser:item,
 						approve:[],//审批人信息{name:'',time:""}
 						auditType:1
 					}
@@ -70,14 +80,17 @@
 						stepCon.intro='抄送'+item.length+'人'
 					}
 					
-					
 					return stepCon
 				})
-				
-				// console.log(arr);
 				return arr
 			}
 		},
+		data () {
+			return {
+				show:false,
+				temUser:[]		
+			}
+		},
 		methods: {
 			timeFormat(e) {
 				const time=new Date(e)
@@ -88,12 +101,43 @@
 				const minutes=time.getMinutes()>9 ?time.getMinutes():'0'+time.getMinutes()
 				const seconds=time.getSeconds()>9?time.getSeconds():'0'+time.getSeconds()
 				return `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`
+			},
+
+			handleViewAllUser(e){
+				this.temUser=e
+				this.show=true
 			}
 		},
 	}
 </script>
 
 <style lang="scss">
+	.alluser-wrap{
+		flex-wrap: wrap;
+		padding: 20px;
+		min-height: 50vh;
+		.avatar{
+			padding: 0 16rpx;
+			color: #fff;
+			background-color: #3385FF;
+			border-radius: 8rpx;
+			height: 74rpx;
+			line-height: 74rpx;
+			position: relative;
+			margin-right: 20rpx;
+			.whole-name{
+				position: absolute;
+				top: 105%;
+				color: #666;
+				font-size: 12px;
+				left: 50%;
+				transform: translateX(-50%);
+				line-height: 1;
+				min-width: 80rpx;
+				text-align: center;
+			}
+		}
+	}
 	.step-box{
 		display: flex;
 		position: relative;
@@ -160,6 +204,18 @@
 				border-radius: 8rpx;
 				height: 74rpx;
 				line-height: 74rpx;
+				position: relative;
+				.whole-name{
+					position: absolute;
+					top: 105%;
+					color: #666;
+					font-size: 12px;
+					left: 50%;
+					transform: translateX(-50%);
+					line-height: 1;
+					min-width: 80rpx;
+					text-align: center;
+				}
 			}
 			.symbol{
 				font-size: 18px;