Просмотр исходного кода

feat: familyMember.vue 新增爱心值列、分配按钮、分配弹窗

Developer 3 часов назад
Родитель
Сommit
9fd7fcc103
1 измененных файлов с 77 добавлено и 1 удалено
  1. 77 1
      src/views/modules/member/components/familyMember.vue

+ 77 - 1
src/views/modules/member/components/familyMember.vue

@@ -18,10 +18,18 @@
       <el-table-column label="所属渠道">
         <template slot-scope="scope">{{ scope.row.channelNames || '-' }}</template>
       </el-table-column>
+      <el-table-column label="爱心值">
+        <template slot-scope="scope">{{ scope.row.loveValue || 0 }}</template>
+      </el-table-column>
       <el-table-column prop="xxx" label="义工时长">
         <template slot-scope="scope">{{ scope.row.volunteerHours||0 }}h</template>
       </el-table-column>
       <el-table-column prop="welfareCount" label="参与活动次数"></el-table-column>
+      <el-table-column label="操作" width="80">
+        <template slot-scope="scope">
+          <el-button type="text" @click="handleAssign(scope.row)">分配</el-button>
+        </template>
+      </el-table-column>
     </el-table>
     <el-pagination
       :current-page="queryParams.page"
@@ -32,12 +40,31 @@
       @size-change="pageSizeChangeHandle"
       @current-change="pageCurrentChangeHandle">
     </el-pagination>
+
+    <!-- 分配爱心值弹窗 -->
+    <el-dialog title="分配爱心值" :visible.sync="assignDialogVisible" width="400px" @close="resetAssignForm">
+      <el-form :model="assignForm" label-width="100px">
+        <el-form-item label="成员姓名">
+          <el-input v-model="assignForm.memberName" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="总账号余额">
+          <el-input v-model="assignForm.userLoveValue" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="分配数量">
+          <el-input-number v-model="assignForm.amount" :min="1" :max="assignForm.userLoveValue" controls-position="right"></el-input-number>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="assignDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitAssign">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 export default {
-  props: ['userId'],
+  props: ['userId', 'userLoveValue'],
   data () {
     return {
       queryParams: {
@@ -52,6 +79,13 @@ export default {
         0: '男',
         1: '女',
         2: '保密'
+      },
+      assignDialogVisible: false,
+      assignForm: {
+        memberId: '',
+        memberName: '',
+        userLoveValue: 0,
+        amount: 1
       }
     }
   },
@@ -103,6 +137,48 @@ export default {
     pageCurrentChangeHandle (val) {
       this.queryParams.page = val
       this.getList()
+    },
+    handleAssign (row) {
+      this.assignForm.memberId = row.id
+      this.assignForm.memberName = row.name
+      this.assignForm.userLoveValue = this.userLoveValue || 0
+      this.assignForm.amount = 1
+      this.assignDialogVisible = true
+    },
+    submitAssign () {
+      if (!this.assignForm.amount || this.assignForm.amount <= 0) {
+        this.$message.error('分配数量必须大于0')
+        return
+      }
+      if (this.assignForm.amount > this.assignForm.userLoveValue) {
+        this.$message.error('分配数量不能超过总账号余额')
+        return
+      }
+
+      this.$http.post('/core/family/member/assignLoveValue', {
+        memberId: this.assignForm.memberId,
+        userId: this.userId,
+        amount: this.assignForm.amount
+      }).then(({ data: res }) => {
+        if (res.code === 0) {
+          this.$message.success('分配成功')
+          this.assignDialogVisible = false
+          this.getList()
+          this.$emit('assign-success')
+        } else {
+          this.$message.error(res.msg || '分配失败')
+        }
+      }).catch(() => {
+        this.$message.error('分配失败')
+      })
+    },
+    resetAssignForm () {
+      this.assignForm = {
+        memberId: '',
+        memberName: '',
+        userLoveValue: 0,
+        amount: 1
+      }
     }
   }
 }