【项目】实现对接京东财务余额管理页面

妖狐艹你老母 2023-10-04 22:24 8阅读 0赞

#### 目录 ####

*   *  需求
     *  实现
     *   *  后端
         *   *  京东财务余额Controller
             *  京东财务余额Service
             *  
         *  前端
         *   *  index.vue
             *  jdbalance.js
             *  api/jdbalance.js
         *  效果

### 需求 ###

通过调京东财务余额接口，在项目中开发相应管理页面。

### 实现 ###

#### 后端 ####

因为京东的接口返回值里面已经有分页的参数了，因此会和平常自己写分页的逻辑有点区别。

##### 京东财务余额Controller #####

/**
     * @Description:   京东财务余额Controller
     */
    @RestController
    @Slf4j
    @AllArgsConstructor
    @RequestMapping("/jdbalance")
    @Api(value = "jdbalance", tags = "京东财务余额API")
    public class JDBalanceController {
        
    
    	@Autowired
    	private JDBalanceService jinDongBalanceService;
    
    	@GetMapping("/page")
    	public R callbackBalanceDetail(Page page, JinDongBalanceVO jinDongBalanceVO) {
        
    		return  R.ok(jinDongBalanceService.handleCallbackBalanceDetail(page,jinDongBalanceVO));
    	}
    
    }

##### 京东财务余额Service #####

/**
     * @Description:  京东财务余额Service
     */
    public interface JDBalanceService {
        
    
    	/**
    	 * @Description: 触发查询余额变动明细回调
    	 */
    	Page handleCallbackBalanceDetail(Page page, JinDongBalanceVO jinDongBalanceVO);
    
    }

#####  #####

/**
     * @Description: 京东财务余额ServiceImpl
     */
    @Service
    @Slf4j
    @AllArgsConstructor
    public class JDBalanceServiceImpl implements JDBalanceService {
        
    
    	@Autowired
    	private JDConfigProperties jDConfigProperties;
    	
    	@Override
    	public Page handleCallbackBalanceDetail(Page page, JinDongBalanceVO jinDongBalanceVO){
        
    
    		Map<String, String> params = new HashMap<>();
    		params.put("token", "");
    		params.put("pageNum", Long.toString(page.getCurrent()));
    		params.put("pageSize",Long.toString(page.getSize()));
    		params.put("orderId", jinDongBalanceVO.getOrderId());
    //		params.put("startDate", "");
    //		params.put("endDate", "");
    		String callbackBalanceDetailPath= jDConfigProperties.getQueryBalanceDetail();
    		JSONObject jsResult =handle(callbackBalanceDetailPath, params);
    		JSONArray resultArray = jsResult.getJSONArray(JDConstants.DATA);
    		if(resultArray != null && resultArray.size() > 0){
        
    			//将json转成需要的对象
    			List<JinDongBalanceVO> jdBalanceList = com.alibaba.fastjson.JSONObject.parseArray(JSON.toJSONString(resultArray), JinDongBalanceVO.class);
    			page.setRecords(jdBalanceList);
    			page.setTotal(jsResult.getInt("total"));
    		}
    		return page;
    	}
    
    	private JSONObject handle(String path, Map<String, String> params) {
        
    		String url = jDConfigProperties.getUrl() + path;
    		log.info("请求url={}, params={}", url, params);
    		// 执行请求
    		String respStr = JDHttpUtils.httpPost(url, params);
    		JSONObject js = new JSONObject(respStr);
    		if (!JSONUtil.isJson(respStr)) {
        
    			log.warn("查询余额明细返回的信息不是JSON格式,实际为[{}]", respStr);
    			return js;
    		}
    		JSONObject jsResult = null;
    		if (js.getStr(JDConstants.RESULTCODE).equals(JDResponseCode.SUCCESS)) {
        
    			jsResult = js.getJSONObject(JDConstants.RESULT);
    		}
    		return jsResult;
    	}
    
    }

#### 前端 ####

##### index.vue #####

<template>
      <div class="execution">
        <basic-container>
          <el-row :span="24" :gutter="10">
            <el-col :xs="24" :sm="24" :md="3">
              <el-card shadow="never">
                <div >
                  <span>账号余额:</span>
                  <span :style="{color:'#F56C6C'}">{
       { balance }}14</span>
                </div>      
              </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="21">
              <avue-crud
                ref="crud"
                :page.sync="page"
                :data="tableData"
                :table-loading="tableLoading"
                :option="tableOption"
                v-model="form"
                @on-load="getPage"
                @refresh-change="refreshChange"
                @sort-change="sortChange"
                @search-change="searchChange"
                @date-change="dateChange"
              >
              </avue-crud>
            </el-col>
          </el-row>
        </basic-container>
      </div>
    </template>
      
      <script>
    import {
           getPage, getUnionBalance } from "@/api/cebBill/jdbalance";
    import {
           tableOption } from "@/const/crud/cebBill/jdbalance";
    
    export default {
          
      name: "jdbalance",
      data() {
          
        return {
          
          form: {
          },
          tableData: [],
          page: {
          
            total: 0, // 总页数
            currentPage: 1, // 当前页数
            pageSize: 20, // 每页显示多少条
            ascs: [], //升序字段
            descs: [], //降序字段
          },
          paramsSearch: {
          },
          tableLoading: false,
          tableOption: tableOption,
          date: [],
          balance:"",
        };
      },
      created() {
          this.getBalance();},
      mounted: function () {
          },
      computed: {
          
      },
      methods: {
          
        dateChange(date) {
          
          if (date) {
          
            this.date = date;
          } else {
          
            this.date = [];
          }
          this.getPage(this.page);
        },
        searchChange(params, done) {
          
          params = this.filterForm(params);
          this.paramsSearch = params;
          this.page.currentPage = 1;
          this.getPage(this.page, params);
          done();
        },
        sortChange(val) {
          
          let prop = val.prop
            ? val.prop.replace(/([A-Z])/g, "_$1").toLowerCase()
            : "";
          if (val.order == "ascending") {
          
            this.page.descs = [];
            this.page.ascs = prop;
          } else if (val.order == "descending") {
          
            this.page.ascs = [];
            this.page.descs = prop;
          } else {
          
            this.page.ascs = [];
            this.page.descs = [];
          }
          this.getPage(this.page);
        },
        getPage(page, params) {
          
          this.tableLoading = true;
          getPage(
            Object.assign(
              {
          
                current: page.currentPage,
                size: page.pageSize,
                descs: this.page.descs,
                ascs: this.page.ascs,
                beginTime: this.date[0],
                endTime: this.date[1],
              },
              params,
              this.paramsSearch
            )
          )
            .then((response) => {
          
              this.tableData = response.data.data.records;
              this.page.total = response.data.data.total;
              this.page.currentPage = page.currentPage;
              this.page.pageSize = page.pageSize;
              this.tableLoading = false;
            })
            .catch(() => {
          
              this.tableLoading = false;
            });
        },
        /**
         * 刷新回调
         */
        refreshChange(page) {
          
          this.getPage(this.page);
        },
        /** 导出按钮操作 */
        handleExport() {
          
          this.download(
            "mall/jdbalance/export",
            {
          
              ...this.paramsSearch,
            },
            `jdbalance_${ new Date().getTime()}.xlsx`
          );
        },
        // 显示余额
        getBalance(){
          
          getUnionBalance().then((response) => {
          
            this.balance=response.data.data.balance.remainLimit;
            console.log(this.balance);
          });
        }
      },
    };
    </script>
      
      <style lang="scss" scoped>
    </style>

##### jdbalance.js #####

export const tableOption = {
        dialogDrag: true,
        border: true,
        indexLabel: '序号',
        stripe: true,
        menuAlign: 'center',
        align: 'center',
        menuType: 'text',
        searchShow: false,
        excelBtn: false,
        printBtn: false,
        viewBtn: true,
       // dateBtn: true,
        searchMenuSpan: 6,
        addBtn: false,
        column: [
            {
                label: '余额明细ID',
                prop: 'id',
                sortable: true,
                rules: [
                ]
            },
            {
                label: '账户类型',
                prop: 'accountType',
                sortable: true,
                rules: [
                ],
                type: 'select',
                dicData: [{
                    label: '可用余额',
                    value: '1'
                }, {
                    label: '锁定余额',
                    value: '2'
                }]
            },
            {
                label: '金额',
                prop: 'amount',
                sortable: true,
                rules: [
                ]
            },
            {
                label: '京东Pin',
                prop: 'pin',
                sortable: true,
                rules: [
                ],
                hide: true
            },
            {
                label: '订单号',
                prop: 'orderId',
                sortable: true,
                search: true,
                rules: [
                ]
            },
            {
                label: '业务类型',
                prop: 'tradeType',
                sortable: true,
                rules: [
                ]
            },
            {
                label: '业务类型名称',
                prop: 'tradeTypeName',
                sortable: true,
                rules: [
                ]
            },
            {
                label: '余额变动日期',
                prop: 'createdDate',
                sortable: true,
                rules: [
                ]
            },
           
            {
                label: '备注信息',
                prop: 'notePub',
                sortable: true,
                rules: [
                ]
            },
            {
                label: '业务号',
                prop: 'tradeNo',
                sortable: true,
                rules: [
                ]
            },
        ]
    }

##### api/jdbalance.js #####

import request from '@/router/axios'
    
    export function getPage(query) {
        return request({
            url: '/mall/jdbalance/page',
            method: 'get',
            params: query
        })
    }
    
    
    export function getUnionBalance() {
        return request({
            url: '/mall/jdbalance/callbackUnionBalance',
            method: 'get'
        })
    }

#### 效果 ####

![在这里插入图片描述][e9395fecc79e425da30affbe975a84d9.png]

[e9395fecc79e425da30affbe975a84d9.png]: https://img-blog.csdnimg.cn/e9395fecc79e425da30affbe975a84d9.png