320 lines
7.7 KiB
Vue
320 lines
7.7 KiB
Vue
<template>
|
|
<view class="order-api-demo">
|
|
<view class="header">
|
|
<text class="title">订单API使用示例</text>
|
|
</view>
|
|
|
|
<!-- 设备续费示例 -->
|
|
<view class="section">
|
|
<text class="section-title">设备续费</text>
|
|
<view class="form-item">
|
|
<text class="label">套餐ID:</text>
|
|
<input v-model="renewData.suitId" placeholder="请输入套餐ID" />
|
|
</view>
|
|
<view class="form-item">
|
|
<text class="label">应用ID:</text>
|
|
<input v-model="renewData.appId" placeholder="请输入应用ID" />
|
|
</view>
|
|
<view class="form-item">
|
|
<text class="label">支付金额:</text>
|
|
<input v-model="renewData.payAmount" placeholder="请输入支付金额" />
|
|
</view>
|
|
<view class="form-item">
|
|
<text class="label">渠道ID:</text>
|
|
<input v-model="renewData.channelId" placeholder="请输入渠道ID" />
|
|
</view>
|
|
<view class="form-item">
|
|
<text class="label">设备ID:</text>
|
|
<input v-model="renewData.devId" placeholder="请输入设备ID" />
|
|
</view>
|
|
<button @click="handleRenew" class="btn">设备续费</button>
|
|
</view>
|
|
|
|
<!-- 创建订单示例 -->
|
|
<view class="section">
|
|
<text class="section-title">创建订单</text>
|
|
<view class="form-item">
|
|
<text class="label">设备类型:</text>
|
|
<input v-model="orderData.deviceType" placeholder="请输入设备类型" />
|
|
</view>
|
|
<view class="form-item">
|
|
<text class="label">租赁周期:</text>
|
|
<input v-model="orderData.period" placeholder="请输入租赁周期" />
|
|
</view>
|
|
<view class="form-item">
|
|
<text class="label">金额:</text>
|
|
<input v-model="orderData.amount" placeholder="请输入金额" />
|
|
</view>
|
|
<button @click="handleCreateOrder" class="btn">创建订单</button>
|
|
</view>
|
|
|
|
<!-- 获取订单列表示例 -->
|
|
<view class="section">
|
|
<text class="section-title">获取订单列表</text>
|
|
<view class="form-item">
|
|
<text class="label">页码:</text>
|
|
<input v-model="listParams.page" placeholder="请输入页码" />
|
|
</view>
|
|
<view class="form-item">
|
|
<text class="label">每页数量:</text>
|
|
<input v-model="listParams.size" placeholder="请输入每页数量" />
|
|
</view>
|
|
<button @click="handleGetOrderList" class="btn">获取订单列表</button>
|
|
</view>
|
|
|
|
<!-- 结果显示 -->
|
|
<view class="result-section" v-if="result">
|
|
<text class="result-title">API返回结果:</text>
|
|
<text class="result-content">{{ JSON.stringify(result, null, 2) }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
renewDevice,
|
|
createOrder,
|
|
getOrderList,
|
|
getOrderDetail,
|
|
cancelOrder,
|
|
payOrder
|
|
} from '@/api/order/order.js'
|
|
|
|
export default {
|
|
name: 'OrderApiDemo',
|
|
data() {
|
|
return {
|
|
// 续费数据
|
|
renewData: {
|
|
suitId: '3',
|
|
appId: '1',
|
|
payAmount: '365',
|
|
channelId: '2',
|
|
devId: '1'
|
|
},
|
|
// 订单数据
|
|
orderData: {
|
|
deviceType: '',
|
|
period: '',
|
|
amount: ''
|
|
},
|
|
// 列表查询参数
|
|
listParams: {
|
|
page: 1,
|
|
size: 10,
|
|
status: ''
|
|
},
|
|
// API返回结果
|
|
result: null
|
|
}
|
|
},
|
|
methods: {
|
|
// 设备续费
|
|
async handleRenew() {
|
|
try {
|
|
console.log('🔍 发送续费请求:', this.renewData)
|
|
const response = await renewDevice(this.renewData)
|
|
this.result = response
|
|
console.log('✅ 续费成功:', response)
|
|
|
|
uni.showToast({
|
|
title: '续费成功',
|
|
icon: 'success'
|
|
})
|
|
} catch (error) {
|
|
console.error('❌ 续费失败:', error)
|
|
this.result = { error: error.message }
|
|
|
|
uni.showToast({
|
|
title: error.message || '续费失败',
|
|
icon: 'error'
|
|
})
|
|
}
|
|
},
|
|
|
|
// 创建订单
|
|
async handleCreateOrder() {
|
|
try {
|
|
console.log('🔍 发送创建订单请求:', this.orderData)
|
|
const response = await createOrder(this.orderData)
|
|
this.result = response
|
|
console.log('✅ 创建订单成功:', response)
|
|
|
|
uni.showToast({
|
|
title: '创建订单成功',
|
|
icon: 'success'
|
|
})
|
|
} catch (error) {
|
|
console.error('❌ 创建订单失败:', error)
|
|
this.result = { error: error.message }
|
|
|
|
uni.showToast({
|
|
title: error.message || '创建订单失败',
|
|
icon: 'error'
|
|
})
|
|
}
|
|
},
|
|
|
|
// 获取订单列表
|
|
async handleGetOrderList() {
|
|
try {
|
|
console.log('🔍 发送获取订单列表请求:', this.listParams)
|
|
const response = await getOrderList(this.listParams)
|
|
this.result = response
|
|
console.log('✅ 获取订单列表成功:', response)
|
|
|
|
uni.showToast({
|
|
title: '获取订单列表成功',
|
|
icon: 'success'
|
|
})
|
|
} catch (error) {
|
|
console.error('❌ 获取订单列表失败:', error)
|
|
this.result = { error: error.message }
|
|
|
|
uni.showToast({
|
|
title: error.message || '获取订单列表失败',
|
|
icon: 'error'
|
|
})
|
|
}
|
|
},
|
|
|
|
// 获取订单详情
|
|
async getOrderDetail(orderId) {
|
|
try {
|
|
const response = await getOrderDetail(orderId)
|
|
console.log('✅ 获取订单详情成功:', response)
|
|
return response
|
|
} catch (error) {
|
|
console.error('❌ 获取订单详情失败:', error)
|
|
throw error
|
|
}
|
|
},
|
|
|
|
// 取消订单
|
|
async cancelOrder(orderId) {
|
|
try {
|
|
const response = await cancelOrder(orderId)
|
|
console.log('✅ 取消订单成功:', response)
|
|
return response
|
|
} catch (error) {
|
|
console.error('❌ 取消订单失败:', error)
|
|
throw error
|
|
}
|
|
},
|
|
|
|
// 支付订单
|
|
async payOrder(orderId, payMethod) {
|
|
try {
|
|
const response = await payOrder({
|
|
orderId,
|
|
payMethod
|
|
})
|
|
console.log('✅ 支付订单成功:', response)
|
|
return response
|
|
} catch (error) {
|
|
console.error('❌ 支付订单失败:', error)
|
|
throw error
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.order-api-demo {
|
|
padding: 30rpx;
|
|
background: #f5f5f5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
margin-bottom: 40rpx;
|
|
|
|
.title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
.section {
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 30rpx;
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 30rpx;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.form-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
|
|
.label {
|
|
width: 160rpx;
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
}
|
|
|
|
input {
|
|
flex: 1;
|
|
height: 70rpx;
|
|
padding: 0 20rpx;
|
|
border: 2rpx solid #e0e0e0;
|
|
border-radius: 10rpx;
|
|
font-size: 28rpx;
|
|
|
|
&:focus {
|
|
border-color: #007aff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
background: #007aff;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 10rpx;
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
margin-top: 20rpx;
|
|
|
|
&:active {
|
|
background: #0056cc;
|
|
}
|
|
}
|
|
|
|
.result-section {
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
margin-top: 30rpx;
|
|
|
|
.result-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
display: block;
|
|
}
|
|
|
|
.result-content {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
line-height: 1.6;
|
|
word-break: break-all;
|
|
white-space: pre-wrap;
|
|
}
|
|
}
|
|
</style> |