课程名称:Java支付全家桶 企业级各类支付手段一站式解决方案
课程章节:4-3 渲染订单数据
主讲老师:神思者
课程内容:
今天学习的内容包括:
渲染订单数据、前端接口url申明、order页面请求接口数据、页面的输出、异常情况的处理、小程序运行调试。
课程收获:
1、在main.js内定义rul:
let baseUrl = "https://haiten.virs.top/renren-fast"
Vue.prototype.url = {
"wxlogin": baseUrl + "/app/wx/login",
"searchUserOrderList": baseUrl + "/app/order/searchUserOrderList"
}
2、order页面请求接口数据,关键代码:
onShow() {
uni.request({
url: this.url.searchUserOrderList,
method: "POST",
header: {
"token": uni.getStorageSync("token")
},
data: {
"page": 1,
"length": 10
},
success: (resp) => {
console.log(resp)
let list = resp.data.list
for (let one of list) {
if (1 == one.status) {
one.status="未付款"
}
else if (2 == one.status) {
one.status="已付款"
}
else if (3 == one.status) {
one.status="已发货"
}
else if (4 == one.status) {
one.status="已签收"
}
else if (5 == one.status) {
one.status="退款中"
}
else if (6 == one.status) {
one.status="已退款"
}
}
this.list = list
}
})
},
3、页面的输出,使用vue的数据绑定特性,将数据显示到页面上(v-for、{{}}插值表达式),关键代码如下:
<template>
<view class="page">
<view class="order" v-for="one in list" :key="one">
<view class="line-1">
<text>订单号:</text>
<text class="danhao text-ellipsis-1">{{one.code}}</text>
<text>{{one.status}}</text>
</view>
<view class="line-2">
<text>假设这里是商品的简要信息</text>
</view>
<view class="line-3">
<text>金额:{{one.amount}}元</text>
<button class="pay-btn" type="primary" v-if="one.status==='未付款'" @click="pay(one.id)">付款</button>
<button class="pay-btn" type="primary" v-if="one.status==='已付款'" @click="refund(one.id)">退款</button>
<button class="pay-btn" type="primary" v-if="one.status==='退款中'" @click="reflesh(one.id)">刷新</button>
</view>
</view>
</view>
</template>
4、异常情况的处理:
异常提示:No qualifying bean of type 'io.renren.modules.app.dao.OrderDao’
原因:根本原因还是在于配置中扫描包的原因,使用错误的@Mapper包路径
修改:import org.apache.ibatis.annotations.Mapper;
5、关于微信订单的生成,本地无法生成微信订单,需要后端将数据通过接口传输给微信平台,有平台生成微信的订单编号。
今天看课程视频写手记的第10天,希望自己能坚持下去,为自己加油!