什么网站可以做兼职美工,网站开发需要注意什么,微投票网站,微信开发小程序公司这次主要实现的是一个工单详情页面
从工单列表项中点击详情 跳转到工单详情页面#xff0c;这个详情页面就是这次我们要实现的页面#xff0c;并可以通过点击这个关闭按钮返回到工单列表页面 首先是在我们原有的工单列表页面的按钮增加一个点击跳转
button sizem…这次主要实现的是一个工单详情页面
从工单列表项中点击详情 跳转到工单详情页面这个详情页面就是这次我们要实现的页面并可以通过点击这个关闭按钮返回到工单列表页面 首先是在我们原有的工单列表页面的按钮增加一个点击跳转
button sizemini typeprimary clickgoToDetail(item)详情/button
跳转函数导航到新页面这里要传递参数过去因为得知道要展示哪个工单列表项的详情一开始是想传递参数过去的因为这个列表项不是基本数据类型所以不能直接传递比较复杂后来我就放弃了这种方法改用全局变量的方法用uni.setStorageSync把列表项存起来 goToDetail(item) {uni.setStorageSync(workOrderDetailItem,item)uni.navigateTo({url: /pages/WorkOrderManagement/WorkOrderDetail})} 然后到新页面的加载中取出来 onLoad(option) {this.item uni.getStorageSync(workOrderDetailItem)},
然后是实现页面这次的页面主要是一个布局的实现 templatenavgation /view classrighth2 classsection工单详情/h2view classsectionview classblockviewtext classcolumn工单ID/texttext classcolumn{{ item.ID }}/text/view/viewview classblockviewtext classcolumn工单标题/texttext classcolumn{{ item.title }}/text/view/view/viewview classsectionview classblockviewtext classcolumn工单类型/texttext classcolumn{{ item.kind }}/text/viewviewtext classcolumn负责人ID/texttext classcolumn{{ item.personID }}/text/viewviewtext classcolumn关联养殖场ID/texttext classcolumn{{ item.associateID }}/text/viewviewtext classcolumn派发日期/texttext classcolumn{{ item.dispatchDate }}/text/viewviewtext classcolumn指定完成日期/texttext classcolumn{{ item.taskDate }}/text/viewviewtext classcolumn实际完成日期/texttext classcolumn{{item.finishDate}}/text/view/viewview classblockview styledisplay: flex;align-items: baseline;text classcolumn工单内容/textview stylewidth: 800rpx;height: 400rpx;background-color: #dcdcdc; text{{ item.content }}/text/view/view/view/viewview classsectionview classblockviewtext classcolumn是否逾期/texttext classcolumn{{ item.overdue }}/text/viewviewtext classcolumn是否处理/texttext classcolumn{{ item.state }}/text/view/viewview classblockviewtext classcolumn图片/text/view/view/viewview classsection stylealign-items: baseline;text classcolumn备注/textview stylewidth: 500rpx;height: 300rpx;background-color: #dcdcdc; text{{ item.note }}/text/view/viewview classsectionbutton typeprimary sizemini clickgoback关闭/button/view/view
/templatescriptimport navigation from ../../components/navgation/navgation.vue;export default {data() {return {item: };},onLoad(option) {this.item uni.getStorageSync(workOrderDetailItem)},methods: {goback() {uni.navigateTo({url: /pages/WorkOrderManagement/WorkOrderManagement})}}}
/scriptstyle langscss.right {margin-top: 40rpx;margin-left: 440rpx;}.section {display: flex;align-items: center;margin: 30rpx;}.block {width: 50%;border-radius: 10rpx;display: flex;flex-direction: column;row-gap: 30rpx;}.column {margin: 20rpx;background-color: #dcdcdc;}button {border-radius: 20rpx;}
/style
