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順序排序