Uniapp商城小程序/第十八章：会员等级任务（源代码）

一、功能说明

可以通过任务的方式引导用户升级，例如每天签到领取积分和等级积分，分享商品可以获取一定的积分和升级等级

二、源码

关注+私信获取

如需远程支撑部署运行，问题答疑请关注+私信

三、界面路径

菜单路径：

四、数据库表设计

CREATE TABLE `yx_system_user_task` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL DEFAULT '' COMMENT '任务名称',
  `real_name` varchar(255) NOT NULL DEFAULT '' COMMENT '配置原名',
  `task_type` varchar(50) NOT NULL DEFAULT '' COMMENT '任务类型',
  `number` int(11) NOT NULL DEFAULT '0' COMMENT '限定数',
  `level_id` int(11) NOT NULL DEFAULT '0' COMMENT '等级id',
  `sort` int(11) NOT NULL DEFAULT '0' COMMENT '排序',
  `is_show` tinyint(1) NOT NULL DEFAULT '0' COMMENT '是否显示',
  `is_must` tinyint(1) NOT NULL DEFAULT '0' COMMENT '是否务必达成任务,1务必达成,0=满足其一',
  `illustrate` varchar(255) NOT NULL DEFAULT '' COMMENT '任务说明',
  `create_time` datetime NOT NULL COMMENT '新增时间',
  `update_time` datetime DEFAULT NULL,
  `is_del` tinyint(1) DEFAULT '0',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=19 DEFAULT CHARSET=utf8 ROW_FORMAT=DYNAMIC COMMENT='等级任务设置';           

五、前端界面实现

5.2、列表实现

表格展示

<!--表格渲染-->
<el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
  <el-table-column prop="levalName" label="等级名称" />
  <el-table-column prop="name" label="任务名称" />
  <el-table-column prop="sort" label="排序" />
  <el-table-column prop="isShow" label="是否显示">
    <template slot-scope="scope">
      <el-tag v-if="scope.row.isShow === 1" style="cursor: pointer" :type="''">是</el-tag>
      <el-tag v-else style="cursor: pointer" :type=" 'info' ">否</el-tag>
    </template>
  </el-table-column>
  <el-table-column v-if="checkPermission(['admin','YXSYSTEMUSERTASK_ALL','YXSYSTEMUSERTASK_EDIT','YXSYSTEMUSERTASK_DELETE'])" label="操作" width="150px" align="center">
    <template slot-scope="scope">
      <el-button v-permission="['admin','YXSYSTEMUSERTASK_ALL','YXSYSTEMUSERTASK_EDIT']" size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)" />
    </template>
  </el-table-column>
</el-table>           

分页组件

<!--分页组件-->
<el-pagination
  :total="total"
  :current-page="page + 1"
  style="margin-top: 8px;"
  layout="total, prev, pager, next, sizes"
  @size-change="sizeChange"
  @current-change="pageChange"
/>           

获取列表数据代码

checkPermission,
beforeInit() {
  this.url = 'api/yxSystemUserTask'
  const sort = 'id,desc'
  this.params = { page: this.page, size: this.size, sort: sort }
  return true
},           

5.2新增和编辑表单实现

<el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="isAdd ? '新增' : '编辑'" width="500px">
  <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
    <el-form-item label="任务名称">
      <el-input v-model="form.levalName" :disabled="true" style="width: 370px;" />
    </el-form-item>
    <el-form-item label="任务类型">
      <el-input v-model="form.taskType" :disabled="true" style="width: 370px;" />
    </el-form-item>
    <el-form-item label="任务名称">
      <el-input v-model="form.name" style="width: 370px;" />
    </el-form-item>
    <el-form-item label="限定数">
      <el-input-number v-model="form.number" style="width: 370px;" />
    </el-form-item>
    <el-form-item label="排序">
      <el-input-number v-model="form.sort" style="width: 370px;" />
    </el-form-item>
    <el-form-item label="是否显示">
      <el-radio v-model="form.isShow" :label="1">是</el-radio>
      <el-radio v-model="form.isShow" :label="0" style="width: 200px;">否</el-radio>
    </el-form-item>
    <el-form-item label="任务说明">
      <el-input v-model="form.illustrate" rows="3" type="textarea" />
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="text" @click="cancel">取消</el-button>
    <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
  </div>
</el-dialog>           

如上述第1行代码，通过el-dialog弹窗的方式展示表单

实现效果如下

如上述第12行代码，新增/修改绑定事件

doSubmit() {
  this.loading = true
  if (this.isAdd) {
    this.doAdd()
  } else this.doEdit()
},           

如上述第3行代码，判断是否增加，如果增加则调用this.doAdd()函数，否则调用this.doEdit()

六、javaAPI接口实现

@Log("查询")
@ApiOperation(value = "查询")
@GetMapping(value = "/yxSystemUserTask")
@PreAuthorize("hasAnyRole('admin','YXSYSTEMUSERTASK_ALL','YXSYSTEMUSERTASK_SELECT')")
public ResponseEntity getYxSystemUserTasks(YxSystemUserTaskQueryCriteria criteria,
                                           Pageable pageable){
    Sort sort = Sort.by(Sort.Direction.ASC, "level_id");
    Pageable pageableT = PageRequest.of(pageable.getPageNumber(),
            pageable.getPageSize(),
            sort);
    return new ResponseEntity(yxSystemUserTaskService.queryAll(criteria,pageableT),
            HttpStatus.OK);
}

@Log("新增")
@ApiOperation(value = "新增")
@PostMapping(value = "/yxSystemUserTask")
@PreAuthorize("hasAnyRole('admin','YXSYSTEMUSERTASK_ALL','YXSYSTEMUSERTASK_CREATE')")
public ResponseEntity create(@Validated @RequestBody YxSystemUserTask resources){
    return new ResponseEntity(yxSystemUserTaskService.save(resources),HttpStatus.CREATED);
}

@Log("修改")
@ApiOperation(value = "修改")
@PutMapping(value = "/yxSystemUserTask")
@PreAuthorize("hasAnyRole('admin','YXSYSTEMUSERTASK_ALL','YXSYSTEMUSERTASK_EDIT')")
public ResponseEntity update(@Validated @RequestBody YxSystemUserTask resources){
    //if(StrUtil.isNotEmpty("22")) throw new BadRequestException("演示环境禁止操作");
    yxSystemUserTaskService.saveOrUpdate(resources);
    return new ResponseEntity(HttpStatus.NO_CONTENT);
}

@Log("删除")
@ApiOperation(value = "删除")
@DeleteMapping(value = "/yxSystemUserTask/{id}")
@PreAuthorize("hasAnyRole('admin','YXSYSTEMUSERTASK_ALL','YXSYSTEMUSERTASK_DELETE')")
public ResponseEntity delete(@PathVariable Integer id){
    //if(StrUtil.isNotEmpty("22")) throw new BadRequestException("演示环境禁止操作");
    yxSystemUserTaskService.removeById(id);
    return new ResponseEntity(HttpStatus.OK);
}           

如上述第7行代码，排序实现，根据level_id顺序排序