feat:假货登记页面优化

pages/wareHouse/components/fakeRegistration.vue

@@ -1,75 +1,117 @@
 <template>
   <div class="fake_registration">
-    <u-navbar class="nav-bar" title="假货登记" :autoBack="true" :placeholder="true" v-hideNav></u-navbar>
-    <view class="fake_table_wrap">
-      <view class="btn_wrap">
-        <u-button :type="(!isAdd && !isEdit) ? 'primary' : 'error'" :icon="(!isAdd && !isEdit) ? 'plus' : 'close'"
-          size="mini" :text="(!isAdd && !isEdit) ? '新增' : '取消'"
-          @click="(!isAdd && !isEdit) ? handleAdd() : handleCancle()"></u-button>
-        <u-button v-if="isAdd || isEdit" type="primary" size="mini" icon="checkmark" text="确定"
-          @click="handleSubmit"></u-button>
-      </view>
-      <view class="custom-table__body">
-        <Table ref="customTable" :tableData="tableData" :columns="columns" stripe @loadMore="handleLoadMore">
-          <template #cell-name="{ row, rowIndex }">
-            <view v-double-tap="() => editCell(row, rowIndex)">
-              <u--input v-if="row.edit" border="surround" v-model="row.name"></u--input>
-              <view v-else>{{ row.name }}</view>
-            </view>
-          </template>
-          <template #cell-idCard="{ row, rowIndex }">
-            <view v-double-tap="() => editCell(row, rowIndex)">
-              <u--input v-if="row.edit" border="surround" v-model="row.idCard"></u--input>
-              <view v-else>{{ row.idCard }}</view>
-            </view>
-          </template>
-          <template #cell-phone="{ row, rowIndex }">
-            <view v-double-tap="() => editCell(row, rowIndex)"">
-            <u--input v-if="row.edit" border="surround" v-model="row.phone" type="number"></u--input>
-              <view v-else>{{ row.phone }}</view>
-            </view>
-          </template>
-          <template #cell-itemName="{ row, rowIndex }">
-            <view v-double-tap="() => editCell(row, rowIndex)"">
-            <u--input v-if="row.edit" border="surround" v-model="row.itemName"></u--input>
-              <view v-else>{{ row.itemName }}</view>
-            </view>
-          </template>
-          <template #cell-remark="{ row, rowIndex }">
-            <view v-double-tap="() => editCell(row, rowIndex)"">
-            <u--input v-if="row.edit" border="surround" v-model="row.remark"></u--input>
-              <view v-else>{{ row.remark }}</view>
-            </view>
-          </template>
-        </Table>
+    <u-navbar class="nav-bar" title="假货登记" :autoBack="true" :placeholder="true" v-hideNav>
+      <template #right>
+        <u-button type="primary" size="mini" icon="plus" text="新增" @click="handleAdd"></u-button>
+      </template>
+    </u-navbar>
+    <view class="fake_list_wrap">
+      <view class="list_content" v-if="tableData.length > 0">
+          <view 
+            class="fake_item" 
+            v-for="(item, index) in tableData" 
+            :key="item.id || index"
+            :class="{ 'selected': selectedIndex === index }"
+            >
+            <!-- @click="handleItemClick(index, item)" -->
+            <u-swipe-action>
+              <u-swipe-action-item :options="swipeOptions" @click="(e) => handleSwipeClick(item, e, index)">
+                <view class="item_header">
+                  <view class="name">{{ item.name }}</view>
+                  <view class="phone">{{ item.phone }}</view>
+                </view>
+                <view class="item_body">
+                  <view class="info_item">
+                    <view class="label">身份证号：</view>
+                    <view class="value">{{ item.idCard }}</view>
+                  </view>
+                  <view class="info_item">
+                    <view class="label">物品：</view>
+                    <view class="value">{{ item.itemName }}</view>
+                  </view>
+                  <view class="info_item" v-if="item.remark">
+                    <view class="label">备注：</view>
+                    <view class="value">{{ item.remark }}</view>
+                  </view>
+                </view>
+              </u-swipe-action-item>
+            </u-swipe-action>
+          </view>
+        <u-loadmore :status="loadStatus" :loading-text="'加载中...'" :finished-text="'没有更多了'" @loadmore="handleLoadMore"></u-loadmore>
       </view>
+      <u-empty v-else text="暂无假货登记信息" mode="list"></u-empty>
     </view>
+    
+    <!-- 编辑弹窗 -->
+    <u-modal :show="showEditDialog" border-radius="40rpx" :title="isAdd ? '新增' : '编辑'" @confirm="handleSubmit" showCancelButton @cancel="showEditDialog = false" @close="showEditDialog = false">
+      <view class="edit_dialog">
+        <view class="dialog_content">
+          <u-form :model="formData" ref="formRef" :rules="rules" label-position="left">
+            <u-form-item label="姓名" required prop="name" label-width="70rpx">
+              <u--input v-model="formData.name" placeholder="请输入姓名"></u--input>
+            </u-form-item>
+            <u-form-item label="身份证号" required prop="idCard" label-width="130rpx">
+              <u--input v-model="formData.idCard" placeholder="请输入身份证号"></u--input>
+            </u-form-item>
+            <u-form-item label="电话" required prop="phone" label-width="70rpx">
+              <u--input v-model="formData.phone" type="number" placeholder="请输入电话"></u--input>
+            </u-form-item>
+            <u-form-item label="物品" required prop="itemName" label-width="70rpx">
+              <u--input v-model="formData.itemName" placeholder="请输入物品"></u--input>
+            </u-form-item>
+            <u-form-item label="备注" prop="remark" label-width="70rpx">
+              <u--input v-model="formData.remark" placeholder="请输入备注" type="textarea" :rows="3"></u--input>
+            </u-form-item>
+          </u-form>
+        </view>
+      </view>
+    </u-modal>
   </div>
 </template>
 
 <script>
-import Table from '@/components/custom-table/index.vue'
 export default {
   name: 'FakeRegistration',
-  components: {
-    Table
-  },
   data() {
     return {
       tableData: [],
-      columns: [
-        { label: '姓名', prop: 'name',  isRequire: true },
-        { label: '身份证号', prop: 'idCard', isRequire: true},
-        { label: '电话', prop: 'phone', isRequire: true },
-        { label: '物品', prop: 'itemName', isRequire: true },
-        { label: '备注', prop: 'remark' },
-      ],
-      isAdd: false,
-      isEdit: false,
-      editIndex: null,
       pageNum: 1,
       pageSize: 10,
-      total:0
+      total: 0,
+      loadStatus: 'more',
+      showEditDialog: false,
+      isAdd: false,
+      currentEditItem: null,
+      selectedIndex: -1,
+      formData: {
+        id: '',
+        name: '',
+        idCard: '',
+        phone: '',
+        itemName: '',
+        remark: ''
+      },
+      swipeOptions: [
+        {
+          text: '编辑',
+          style: {
+            backgroundColor: '#343a40',
+            color: '#fff'
+          }
+        }
+      ],
+      rules: {
+        name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
+        idCard: [
+          { required: true, message: '请输入身份证号', trigger: 'change' },
+          { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号', trigger: 'change' }
+        ],
+        phone: [
+          { required: true, message: '请输入电话', trigger: 'change'},
+          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的电话号', trigger: 'change' }
+        ],
+        itemName: [{ required: true, message: '请输入物品', trigger: 'change' }],
+      }
     }
   },
   mounted() {
@@ -78,7 +120,7 @@ export default {
   methods: {
     handleLoadMore() {
       if (this.pageNum * this.pageSize >= this.total) {
-        uni.$u.toast('没有更多数据了')
+        this.loadStatus = 'noMore'
         return
       }
       this.pageNum++
@@ -95,98 +137,65 @@ export default {
           this.tableData = this.tableData.concat(res.rows)
         }
         this.total = res.total
+        this.loadStatus = 'more'
       })
     },
-    editCell(row, rowIndex) {
-      this.editIndex = rowIndex
-      this.$set(this.tableData[rowIndex], 'edit', true);
-      this.isEdit = true
+    handleAdd() {
+      this.isAdd = true
+      this.currentEditItem = null
+      this.formData = {
+        id: '',
+        name: '',
+        idCard: '',
+        phone: '',
+        itemName: '',
+        remark: ''
+      }
+      this.showEditDialog = true
+    },
+    handleItemClick(index, item) {
+      this.selectedIndex = index;
+    },
+    handleSwipeClick(item, e, index) {
+      if(e.index == 0){//编辑
+        this.selectedIndex = index;
+        setTimeout(() => {
+          this.isAdd = false
+          this.currentEditItem = item
+          this.formData = {
+            id: item.id,
+            name: item.name,
+            idCard: item.idCard,
+            phone: item.phone,
+            itemName: item.itemName,
+            remark: item.remark || ''
+          }
+          this.showEditDialog = true
+        }, 300);
+      }
     },
     handleSubmit() {
-      if (this.isAdd) {
-        if (this.checkEmpty(this.tableData[0])) {
-          uni.$u.api.wareHouseFakeAdd(this.tableData[0]).then(res => {
+      this.$refs.formRef.validate().then(() => {
+        if (this.isAdd) {
+          uni.$u.api.wareHouseFakeAdd(this.formData).then(res => {
             if (res.code == 200) {
-              this.$set(this.tableData[0], 'edit', false)
-              this.isAdd = false
               uni.$u.toast('新增成功')
+              this.showEditDialog = false
               this.pageNum = 1
               this.getWareHouseFakeList()
             }
           })
-        }
-      }
-      if (this.isEdit) {
-        if (this.checkEmpty(this.tableData[this.editIndex])) {
-          uni.$u.api.wareHouseFakeEdit(this.tableData[this.editIndex]).then(res => {
+        } else {
+          uni.$u.api.wareHouseFakeEdit(this.formData).then(res => {
             if (res.code == 200) {
-              this.$set(this.tableData[this.editIndex], 'edit', false)
-              this.isEdit = false
               uni.$u.toast('编辑成功')
+              this.showEditDialog = false
               this.getWareHouseFakeList()
             }
           })
         }
-      }
-    },
-    checkEmpty(row) {
-      if (row.name == '') {
-        uni.$u.toast('请输入姓名')
-        return false
-      }
-      if (row.idCard == '') {
-        uni.$u.toast('请输入身份证号')
-        return false
-      }
-      // 身份证号正则校验
-      const idCardRegex = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
-      if (!idCardRegex.test(row.idCard)) {
-        uni.$u.toast('请输入有效的身份证号')
-        return false
-      }
-      if (row.phone == '') {
-        uni.$u.toast('请输入电话')
-        return false
-      }
-      // 电话号码正则校验
-      const phoneRegex = /^1[3-9]\d{9}$/
-      if (!phoneRegex.test(row.phone)) {
-        uni.$u.toast('请输入有效的电话号码')
-        return false
-      }
-      if (row.itemName == '') {
-        uni.$u.toast('请输入物品')
-        return false
-      }
-      return true
-    },
-    addNewRow() {
-      this.$refs.customTable.addNewRow();
-    },
-    handleUpdate(data) {
-      console.log('数据更新:', data);
-    },
-    handleAdd() {
-      this.tableData.unshift({
-        edit: true,
-        name: '',
-        idCard: '',
-        phone: '',
-        itemName: '',
-        remark: ''
       })
-      this.isAdd = true
-    },
-    handleCancle() {
-      if (this.isAdd) {
-        this.tableData.shift(1)
-        this.isAdd = false
-      }
-      if (this.isEdit) {
-        this.$set(this.tableData[this.editIndex], 'edit', false)
-        this.isEdit = false
-      }
-    },
+    }
   }
 }
 </script>

pages/wareHouse/styles/fakeRegistration.scss

@@ -1,27 +1,148 @@
 .fake_registration{
-    padding: 20rpx;
-    .fake_table_wrap{
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
-        align-items: flex-start;
-        gap: 20rpx;
-        ::v-deep .u-button{
-            width:auto;
+    padding: 0 20rpx;
+    min-height: 100vh;
+    background-color: #f8f9fa;
+    font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
+    
+    .fake_list_wrap{
+        margin-top: 20rpx;
+        min-height: calc(100vh - 120rpx);
+        
+        .list_content{
+            .fake_item{
+                background-color: #ffffff;
+                border-radius: 16rpx;
+                padding: 32rpx;
+                margin-bottom: 16rpx;
+                box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+                transition: all 0.3s ease;
+                border: 1rpx solid #e9ecef;
+                
+                &.selected{
+                    box-shadow: 0 12rpx 32rpx rgba(71, 130, 241, 0.2);
+                    transform: translateY(-5rpx) scale(1.02);
+                    border-color: #4782f1;
+                    border-width: 2rpx;
+                    z-index: 10;
+                }
+                
+                .item_header{
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    margin-bottom: 24rpx;
+                    padding-bottom: 20rpx;
+                    border-bottom: 1rpx dashed #e9ecef;
+                    
+                    .name{
+                        font-size: 32rpx;
+                        font-weight: 700;
+                        color: #212529;
+                        position: relative;
+                        padding-left: 20rpx;
+                        
+                        &::before{
+                            content: '';
+                            position: absolute;
+                            left: 0;
+                            top: 50%;
+                            transform: translateY(-50%);
+                            width: 8rpx;
+                            height: 8rpx;
+                            border-radius: 50%;
+                            background-color: #4782f1;
+                        }
+                    }
+                    
+                    .phone{
+                        font-size: 26rpx;
+                        color: #6c757d;
+                        padding: 6rpx 16rpx;
+                        border-radius: 16rpx;
+                    }
+                }
+                
+                .item_body{
+                    .info_item{
+                        display: flex;
+                        align-items: center;
+                        margin-bottom: 16rpx;
+                        font-size: 26rpx;
+                        line-height: 44rpx;
+                        
+                        &:last-child{
+                            margin-bottom: 0;
+                        }
+                        
+                        .label{
+                            color: #868e96;
+                            min-width: 120rpx;
+                            font-weight: 500;
+                        }
+                        
+                        .value{
+                            color: #495057;
+                            flex: 1;
+                            word-break: break-word;
+                            padding: 4rpx 12rpx;
+                            border-radius: 8rpx;
+                            font-size: 24rpx;
+                        }
+                    }
+                }
+            }
+            
+            .u-loadmore{
+                margin-top: 30rpx;
+                margin-bottom: 40rpx;
+            }
         }
-        .btn_wrap{
-            display: flex;
-            gap: 20rpx;
+        
+        .u-empty{
+            margin-top: 120rpx;
+        }
+    }
+    
+    // 编辑弹窗样式
+    .edit_dialog{
+        width: 85%;
+        max-width: 520rpx;
+        border-radius: 16rpx;
+        overflow: hidden;
+        
+        .dialog_title{
+            font-size: 34rpx;
+            font-weight: 700;
+            color: #212529;
+            text-align: center;
+            padding: 36rpx 24rpx;
+            border-bottom: 1rpx solid #e9ecef;
         }
-        .custom-table__body{
-            height: calc(100vh - 240rpx);
-            width: -webkit-fill-available;
-            border-radius: 20rpx;
-            background-color: #fff;
-            overflow-y: auto;
-            ::v-deep .custom-table{
-                margin:20rpx;
-                // width: 100%;
+        
+        .dialog_content{
+            padding: 36rpx 28rpx;
+            
+            .u-form-item{
+                
+                .u-form-item__label{
+                    font-size: 28rpx;
+                    font-weight: 600;
+                    color: #495057;
+                    margin-bottom: 12rpx;
+                    display: block;
+                }
+                
+                .u-input{
+                    border-radius: 8rpx;
+                    border: 1rpx solid #ced4da;
+                    transition: all 0.3s ease;
+                    
+                    &:focus{
+                        border-color: #4782f1;
+                        box-shadow: 0 0 0 4rpx rgba(71, 130, 241, 0.1);
+                        background-color: #ffffff;
+                    }
+                }
             }
         }
     }