deposit chips

src/api/gambleMember.js

@@ -10,3 +10,13 @@ export function fetchList(query) {
     }
   })
 }
+
+export function updateChips(data) {
+  return request({
+    url: `/gambleMembers/${data.id}/deposit`,
+    method: 'put',
+    data: {
+      chips: data.depositChips
+    }
+  })
+}

src/views/gambleMember/index.vue

@@ -18,7 +18,7 @@
       </el-table-column>
       <el-table-column align="center" label="操作">
         <template slot-scope="scope">
-          <!-- <span>{{scope.row.display_time}}</span> -->
+            <el-button type="primary" size="mini" @click="handleDeposit(scope.row)">儲值</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -28,11 +28,34 @@
         :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
       </el-pagination>
     </div>
+
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
+      <el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="100px" style='width: 400px; margin-left:50px;'>
+        <el-form-item label="ID" prop="id">
+          <el-input v-model="temp.id" :disabled="true"></el-input>
+        </el-form-item>
+        <el-form-item label="名稱" prop="name">
+          <el-input v-model="temp.name" :disabled="true"></el-input>
+        </el-form-item>
+        <el-form-item label="點數" prop="chips">
+          <el-input v-model="temp.chips" :disabled="true"></el-input>
+        </el-form-item>
+        <el-form-item label="加值點數" prop="depositChips">
+          <el-input placeholder="請輸入加值金額" v-model="temp.depositChips">
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button v-if="dialogStatus=='create'" type="primary" @click="createData">確 定</el-button>
+        <el-button v-if="dialogStatus=='deposit'" type="primary" @click="depositChips">確 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { fetchList } from '@/api/gambleMember'
+import { fetchList, updateChips } from '@/api/gambleMember'
 
 export default {
   data() {
@@ -47,6 +70,24 @@ export default {
         title: undefined,
         type: undefined,
         sort: '+id'
+      },
+      temp: {
+        id: undefined,
+        importance: 1,
+        remark: '',
+        timestamp: new Date(),
+        title: '',
+        type: '',
+        status: 'published'
+      },
+      dialogFormVisible: false,
+      dialogStatus: '',
+      textMap: {
+        deposit: '儲值',
+        create: '新增'
+      },
+      rules: {
+        depositChips: [{pattern: /^\+?[1-9][0-9]*$/, required: true, message: '只能儲值整數', trigger: 'change' }],
       }
     }
   },
@@ -62,6 +103,39 @@ export default {
         this.listLoading = false
       })
     },
+    handleDeposit(row) {
+      this.temp = Object.assign({}, row) // copy obj
+      this.temp.timestamp = new Date(this.temp.timestamp)
+      this.dialogStatus = 'deposit'
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    depositChips() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const tempData = Object.assign({}, this.temp)
+          updateChips(tempData).then(() => {
+            for (const v of this.list) {
+              if (v.id === this.temp.id) {
+                const index = this.list.indexOf(v)
+                this.list.splice(index, 1, this.temp)
+                break
+              }
+            }
+            this.dialogFormVisible = false
+            this.$notify({
+              title: '成功',
+              message: '儲值成功',
+              type: 'success',
+              duration: 2000
+            })
+            this.getList()
+          })
+        }
+      })
+    },
     handleSizeChange(val) {
       this.listQuery.limit = val
       this.getList()