bad-off.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. <template>
  2. <view class="container">
  3. <!-- 任务列表 -->
  4. <view class="task-list">
  5. <view v-for="(item, index) in taskList" :key="index" class="task-card" @click="handleTaskClick(item)">
  6. <view class="task-header">
  7. <text class="task-no">作业单号:{{ item.taskNo }}</text>
  8. </view>
  9. <view class="task-content">
  10. <view class="flex-a mb-10">
  11. <text class="label">仓库:</text>
  12. <text class="value">{{ item.warehouse }}</text>
  13. </view>
  14. <view class="flex-a mb-10">
  15. <text class="label">任务数量:</text>
  16. <text class="value">{{ item.quantity }}</text>
  17. </view>
  18. <view class="flex-a">
  19. <text class="label">作业状态:</text>
  20. <text class="value">{{ item.status }}</text>
  21. </view>
  22. </view>
  23. </view>
  24. </view>
  25. </view>
  26. </template>
  27. <script setup>
  28. import { ref } from 'vue'
  29. // 搜索文本
  30. const searchText = ref('')
  31. // 任务列表数据
  32. const taskList = ref([
  33. {
  34. taskNo: 'XJ20245451421',
  35. warehouse: '河南仓',
  36. quantity: 40,
  37. status: '待作业'
  38. },
  39. {
  40. taskNo: 'XJ20245451421',
  41. warehouse: '河南仓',
  42. quantity: 40,
  43. status: '待作业'
  44. }
  45. ])
  46. // 搜索处理
  47. const onSearch = () => {
  48. // 实现搜索逻辑
  49. }
  50. // 打开扫码
  51. const openScan = () => {
  52. // #ifdef APP-PLUS || MP-WEIXIN
  53. uni.scanCode({
  54. success: (res) => {
  55. searchText.value = res.result
  56. onSearch()
  57. },
  58. fail: (err) => {
  59. uni.showToast({
  60. title: '扫码失败',
  61. icon: 'error'
  62. })
  63. }
  64. })
  65. // #endif
  66. // #ifdef H5
  67. uni.showToast({
  68. title: 'H5环境不支持扫码',
  69. icon: 'none'
  70. })
  71. // #endif
  72. }
  73. // 点击任务卡片
  74. const handleTaskClick = (task) => {
  75. // 处理任务点击,可以跳转到详情页
  76. uni.navigateTo({
  77. url: `/pages/index/wms/task-detail?taskNo=${task.taskNo}`
  78. })
  79. }
  80. </script>
  81. <style scoped>
  82. .task-card {
  83. background-color: #ffffff;
  84. padding: 20rpx;
  85. margin-top: 16rpx;
  86. box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  87. }
  88. .task-header {
  89. display: flex;
  90. justify-content: space-between;
  91. align-items: center;
  92. margin-bottom: 16rpx;
  93. }
  94. .task-no {
  95. font-size: 28rpx;
  96. font-weight: bold;
  97. }
  98. </style>