完善订单列表页
This commit is contained in:
parent
18c070db92
commit
928906e366
@ -39,6 +39,7 @@
|
||||
"usingComponents": {
|
||||
"v-button": "@vant/weapp/button/index",
|
||||
"v-tab": "@vant/weapp/tab/index",
|
||||
"v-tabs": "@vant/weapp/tabs/index"
|
||||
"v-tabs": "@vant/weapp/tabs/index",
|
||||
"van-dialog": "@vant/weapp/dialog/index"
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
{
|
||||
"navigationBarTitleText": "我的订单",
|
||||
"usingComponents": {
|
||||
}
|
||||
}
|
||||
@ -1,20 +1,84 @@
|
||||
/* pages/order/index.wxss */
|
||||
.header-wrapper{
|
||||
height: 50px;
|
||||
@padding: 15px;
|
||||
@content_padding: 10px;
|
||||
|
||||
.order-page {
|
||||
background-color: #f2f2f2;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.header{
|
||||
position: fixed;
|
||||
left:0;
|
||||
top:0;
|
||||
right:0;
|
||||
height: 50px;
|
||||
|
||||
.order-list-wrapper {
|
||||
padding: @padding;
|
||||
}
|
||||
.item{
|
||||
height: 300px;
|
||||
background-color: red;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.item1{
|
||||
background-color: royalblue;
|
||||
height: 1px;
|
||||
|
||||
.order-item {
|
||||
background-color: #fff;
|
||||
margin-bottom: @padding;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.order-footer {
|
||||
border-top: 1px solid #f2f2f2;
|
||||
}
|
||||
|
||||
.order-goods-content {
|
||||
|
||||
padding: @content_padding;
|
||||
.info {
|
||||
display: flex;
|
||||
}
|
||||
.goods-name{
|
||||
flex:1;
|
||||
margin: 0 8px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.goods-price{
|
||||
color:#999;
|
||||
text-align: right;
|
||||
}
|
||||
.sale-price{
|
||||
color: #333;
|
||||
}
|
||||
.origin-price{
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-cover-image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.price{
|
||||
text-align: right;
|
||||
font-size: 13px;
|
||||
.price-total{
|
||||
font-size: 16px;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
|
||||
.order-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: @content_padding;
|
||||
}
|
||||
|
||||
.order-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
color: #c78a8a;
|
||||
}
|
||||
|
||||
.order-action {
|
||||
.btn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,31 @@
|
||||
import { cancelOrder, OrderInfo, queryOrderList } from "../../service/shop-api";
|
||||
import message from "../../utils/message";
|
||||
|
||||
type TabType = {
|
||||
// tab标题
|
||||
title: string
|
||||
// 标识
|
||||
name: string
|
||||
// 查询状态值
|
||||
status: number
|
||||
// 当前查询的页码
|
||||
page: number
|
||||
// 是否已经查询结束
|
||||
end: boolean
|
||||
// 订单列表
|
||||
orders: OrderInfo[]
|
||||
}
|
||||
function createTab(title: string, name: string, status: number) {
|
||||
const tab: TabType = {
|
||||
title,
|
||||
name,
|
||||
status,
|
||||
page: 1,
|
||||
end: false,
|
||||
orders: []
|
||||
}
|
||||
return tab;
|
||||
}
|
||||
// pages/order/index.ts
|
||||
Page({
|
||||
|
||||
@ -5,14 +33,94 @@ Page({
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
|
||||
tabActive: 'all',
|
||||
statusEnums: {
|
||||
1: '待确认',
|
||||
2: '已确认',
|
||||
3: '已取消',
|
||||
4: '已完成',
|
||||
0: '已删除'
|
||||
},
|
||||
tabs: [
|
||||
createTab('全部', 'all', 0),
|
||||
createTab('待确认', 'not-confirm', 1),
|
||||
createTab('已确认', 'confirm', 2),
|
||||
createTab('已取消', 'cancel', 3),
|
||||
createTab('已完成', 'finish', 4),
|
||||
// {
|
||||
// title: '待确认',
|
||||
// name: 'not-confirm',
|
||||
// status: 1,
|
||||
// orders: []
|
||||
// },
|
||||
// {
|
||||
// title: '已确认',
|
||||
// name: 'confirm',
|
||||
// status: 2,
|
||||
// orders: []
|
||||
// },
|
||||
// {
|
||||
// title: '已取消',
|
||||
// name: 'cancel',
|
||||
// status: 3,
|
||||
// orders: []
|
||||
// },
|
||||
// {
|
||||
// title: '已完成',
|
||||
// name: 'finish',
|
||||
// status: 3,
|
||||
// orders: []
|
||||
// }
|
||||
]
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad() {
|
||||
|
||||
this.loadOrderList('all');
|
||||
},
|
||||
onTabChange(e: any) {
|
||||
const tabActive = e.detail.name
|
||||
// TODO 是否重新加载 -- 缓存
|
||||
this.loadOrderList(tabActive)
|
||||
this.setData({ tabActive })
|
||||
},
|
||||
async cancelOrder(e: TapEvent) {
|
||||
try {
|
||||
if ((await message.confirm('确定要取消订单?'))) {
|
||||
await cancelOrder(e.target.dataset.id)
|
||||
message.toast('取消订单成功');
|
||||
this.loadOrderList(this.data.tabActive)
|
||||
}
|
||||
} catch (e) { }
|
||||
},
|
||||
async deleteOrder(e: TapEvent) {
|
||||
try {
|
||||
if ((await message.confirm('确定要删除订单?'))) {
|
||||
console.log('shanchu')
|
||||
await cancelOrder(e.target.dataset.id)
|
||||
message.toast('取消删除成功');
|
||||
this.loadOrderList(this.data.tabActive)
|
||||
}
|
||||
} catch (e) { }
|
||||
},
|
||||
loadOrderList(active: string) {
|
||||
// 1、找到当前选中的tab
|
||||
const tab = this.data.tabs.find(s => s.name == active);
|
||||
if (tab) {
|
||||
queryOrderList(tab.status).then(ret => {
|
||||
if (ret.records && ret.records.length > 0) {
|
||||
if (tab.page === 1) {
|
||||
tab.orders = ret.records
|
||||
} else tab.orders.push(...ret.records)
|
||||
// 更新数据
|
||||
this.setData({
|
||||
tabs: this.data.tabs
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
@ -1,23 +1,40 @@
|
||||
<!--pages/order/index.wxml-->
|
||||
<view>
|
||||
<view class="header-wrapper">
|
||||
<view class="header">
|
||||
头部
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<v-button type="default">默认按钮</v-button>
|
||||
<v-button type="primary">主要按钮</v-button>
|
||||
<v-button type="info">信息按钮</v-button>
|
||||
<v-button type="warning">警告按钮</v-button>
|
||||
<v-button type="danger">危险按钮</v-button>
|
||||
</view>
|
||||
<v-tabs>
|
||||
<v-tab title="xxxx1">xxx1xxx</v-tab>
|
||||
<v-tab title="xxxx2">xxx2xxx</v-tab>
|
||||
<v-tab title="xxxx3">xxx3xxx</v-tab>
|
||||
<view class="order-page">
|
||||
<v-tabs sticky swipeable bind:change="onTabChange">
|
||||
<v-tab wx:for="{{tabs}}" wx:key="name" name="{{item.name}}" title="{{item.title}}">
|
||||
<view class="order-list-wrapper">
|
||||
<view wx:for="{{item.orders}}" wx:key="id" class="order-item" wx:for-item="o">
|
||||
<view class="order-goods-content">
|
||||
<view class="info">
|
||||
<!-- 商品图片 -->
|
||||
<view class="goods-cover">
|
||||
<image class="goods-cover-image" src="{{o.goods.cover}}" />
|
||||
</view>
|
||||
<view class="goods-name">
|
||||
<text>{{o.goods.title}}</text>
|
||||
</view>
|
||||
<view class="goods-price">
|
||||
<view class="sale-price">￥{{o.goods.price}}</view>
|
||||
<view wx:if="{{o.goods.originPrice > 0}}" class="origin-price">￥{{o.goods.originPrice}}</view>
|
||||
<view class="count">× 1</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="price">
|
||||
<text>合计:</text>
|
||||
<text class="price-total">{{o.price}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-footer">
|
||||
<view class="order-status">
|
||||
<text>{{statusEnums[o.status]||''}}</text>
|
||||
</view>
|
||||
<view class="order-action">
|
||||
<v-button wx:if="{{o.status < 3}}" bindtap="cancelOrder" data-id="{{o.id}}" class="btn" round type="default" size="small">取消订单</v-button>
|
||||
<v-button bindtap="deleteOrder" data-id="{{o.id}}" class="btn" round type="danger" size="small">删除订单</v-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
<view class="order-list-wrapper">
|
||||
<view class="order-item"></view>
|
||||
</view>
|
||||
</view>
|
||||
11
miniprogram/pages/types.d.ts
vendored
11
miniprogram/pages/types.d.ts
vendored
@ -1,3 +1,14 @@
|
||||
interface TapTarget {
|
||||
id: string,
|
||||
dataset: {
|
||||
[key: string]: any
|
||||
}
|
||||
}
|
||||
interface TapEvent {
|
||||
type: 'tap' | string
|
||||
target: TapTarget
|
||||
currentTarget: TapTarget
|
||||
}
|
||||
interface PointInfo {
|
||||
uid: number;
|
||||
totalPoint: number;
|
||||
|
||||
@ -28,6 +28,7 @@ export type OrderInfo = {
|
||||
createTime?: any;
|
||||
updateTime?: any;
|
||||
status: number;
|
||||
goods?: Goods;
|
||||
}
|
||||
|
||||
export function queryGoodsList(category: number, page = 1, pageSize = 10) {
|
||||
@ -41,4 +42,15 @@ export function createOrder(goodsId: number, buyCount = 1) {
|
||||
return request<OrderInfo>('/shop/order/create', {
|
||||
goodsId, buyCount
|
||||
});
|
||||
}
|
||||
export function queryOrderList(status: number = 0, page = 1, pageSize = 10) {
|
||||
return request<DataList<OrderInfo>>('/shop/order/query', {
|
||||
status, page, pageSize
|
||||
});
|
||||
}
|
||||
export function cancelOrder(id: string) {
|
||||
return request<boolean>(`/shop/order/${id}/cancel`,null,'PUT');
|
||||
}
|
||||
export function deleteOrder(id: string) {
|
||||
return request<boolean>(`/shop/order/${id}/delete`,null,'PUT');
|
||||
}
|
||||
@ -1,3 +1,4 @@
|
||||
import { resolve } from "path";
|
||||
import { BizError } from "./request";
|
||||
|
||||
type ToastIcon = 'success' | 'error' | 'none';
|
||||
@ -23,9 +24,24 @@ export function showLoading({ message = '加载中...', mask = true }) {
|
||||
export function hideLoading() {
|
||||
wx.hideLoading()
|
||||
}
|
||||
export function confirm(message: string) {
|
||||
return new Promise<boolean>((resolve) => {
|
||||
wx.showModal({
|
||||
content: message,
|
||||
success(res) {
|
||||
if (res.confirm) {
|
||||
resolve(true)
|
||||
} else if (res.cancel) {
|
||||
resolve(false)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
toast,
|
||||
showLoading,
|
||||
hideLoading,
|
||||
confirm,
|
||||
}
|
||||
@ -27,7 +27,7 @@ type ApiResponse<T> = {
|
||||
}
|
||||
type HttpMethod = "GET" | "POST" | "PUT" | "DELETE"
|
||||
|
||||
function request<T>(api: string, data: any = null, method: HttpMethod = 'POST',autoShowLogin: boolean = true) {
|
||||
function request<T>(api: string, data: any = null, method: HttpMethod = 'POST', autoShowLogin: boolean = true) {
|
||||
const header: {
|
||||
[key: string]: string
|
||||
} = {}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user