emergencyManagement/pages/duty/index.vue

<template>
	<uni-card>
		<template v-slot:title>
				<uni-list>
					<uni-list-item :show-switch="true" title="自定义标题"/>
				</uni-list>
		</template>
		<uni-list>
			<uni-list-item v-for="item in items" :key="item.accountId"
				:title="item.accountName" 
				:note="item.remark" 
				thumb="/static/images/avatar.png"
				:rightText="item.posName" >
				<template v-slot:footer>
					<div class="rtbox">
						<view class="rt">
							<view class="positionName">
								<uni-tag :text="item.positionName" size="mini" type="primary"></uni-tag>
							</view>
							<view class="posName">
								<uni-tag :text="item.posName" size="mini" type="success"></uni-tag>
							</view>
						</view>
						<div class="delbt" @click="handle(item)">
							<image src="/static/images/del.png"></image>
						</div>
					</div>
				</template>
			</uni-list-item>
		</uni-list>
		<div class="addbt" @click="onAdd">+</div>
		<AddForm ref="add" />
	</uni-card>
</template>

<script>
import{geDutyList} from '@/api/duty.js'	 
import AddForm from './components/AddForm.vue'
	export default {
		components:{
			AddForm
		},
		data() {
			return {
				keywords:"",
				year:new Date().getFullYear(),
				dutyDate:'',
				week: 44,
				items:[]
			}
		},
		onShow() {
			this.getData()
		},
		methods: {
			getData(){
				// geDutyList({
				// 	year:this.year,
				// 	week:this.week
				// }).then((res)=>{
				// 	this.items=res.data
				// })
				let item={
				    "accountId": 1122996,
				    "accountName": "郭志荣",
				    "groupId": 406283,
				    "groupName": "铜川市印台区应急管理局",
				    "ocId": 406283,
				    "posId": 1122897,
				    "posName": "主班领导",
				    "positionId": 1122915,
				    "positionName": "党委书记、局长",
				    "remark": "全盘把控"
				}
				this.items=Array.from({length:10},(_,idx)=>item)
			},
			handle(item){
				
			},
			onAdd(){
				this.$refs.add.show()
			}
		}
	}
</script>

<style lang="scss" scoped>

.addbt{
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	background-color: #409eff;
	color: #fff;
	line-height: 80rpx;
	text-align: center;
	box-shadow:0 2px 10rpx rgba(64,158,255,0.30);
	position: fixed;
	right: 10rpx;
	top: 50%;
	z-index: 99;
	font-size: 60rpx;
}
.rtbox{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.delbt{
	padding: 20rpx;
	image{
		display: block;
		width: 30rpx;
		height: 30rpx;
	}
}
</style>