现代JavaScript技术-趣学前端

Appearance

本页目录

10. 订单 ​

10.1 订单列表 ​

该页面主要功能： 查询订单信息、根据不同状态查询订单信息、下拉刷新、上拉加载

**页面静态结构: **

  • tabs栏目
vue
<!-- tabs栏目 -->
<van-tabs @change="onChangeTab" color="#1baeae" title-active-color="#1baeae" class="order-tab" :active="status">
    <van-tab title="全部" name=""></van-tab>
    <van-tab title="待付款" name="0"></van-tab>
    <van-tab title="待确认" name="1"></van-tab>
    <van-tab title="待发货" name="2"></van-tab>
    <van-tab title="待收货" name="3"></van-tab>
    <van-tab title="已完成" name="4"></van-tab>
</van-tabs>
  • 内容列表
vue
<!-- 内容区域 -->
<view class="content order-list">
    <view class="order-item" v-for="item in list" :key="item.orderId" @click="goTo(item.orderNo)">
        <view class="order-item-header">
            <text>订单时间: {{ item.createTime }}</text>
            <text>{{ item.orderStatusString }}</text>
        </view>
        <van-card
            v-for="item2 in item.newBeeMallOrderItemVOS"
            :key="item2.goodsId"
            :num="item2.goodsCount"
            :price="item2.sellingPrice"
            desc="全场包邮"
            :title="item2.goodsName"
            :thumb="item2.goodsCoverImg"
        />
    </view>
</view>

页面UI样式

scss
page {
	background-color: #f5f5f5;
}
.order-tab {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	border-bottom: 2rpx solid #e9e9e9;
}

.content {
	margin-top: 88rpx;
	background-color: #f5f5f5;
	padding: 2rpx 0;
	.order-item {
		margin: 20rpx;
		background-color: #fff;
		.order-item-header {
			padding: 20rpx 40rpx 10rpx 40rpx;
			@include fj();
			color: #2c3e50;
			text:last-child {
				color: red;
			}
		}
		.van-card {
			background-color: #fff;
			margin-top: 0;
		}
	}
}

页面JS逻辑

  • 加载数据

    js
    // * 获取数据
const loadData = async () => {
	state.loading = true
	// 1. 发起请求
	const { data } = await getOrderList({ pageNumber: state.page, status: state.status })
	// 2. 保存数据
	state.list = state.list.concat(data.list)
	state.loading = false
	// 3. 判断是否还有数据
	if (state.page >= data.totalPage) {
		state.hasMore = false
	}
	uni.stopPullDownRefresh()
}

  • 下拉刷新加载

    js
    // * 刷新数据
const refresh = () => {
	state.list = []
	state.page = 1
	state.hasMore = true
	loadData()
}

// 页面下拉刷新
onPullDownRefresh(() => {
	refresh()
})

  • 上拉加载

    js
    // 页面触底
onReachBottom(() => {
	if (state.loading) return
	if (!state.hasMore) return
	state.page += 1
	loadData()
})

  • 切换tab加载

    js
    // * 更改tabs【切换订单状态】
const onChangeTab = e => {
	const { name } = e.detail
	state.status = name || ''
	refresh()
}

  • 监听订单详情页状态改变

    js
    onLoad(() => {
	refresh()
	uni.$on('Refrsh', () => {
		refresh()
	})
})

onUnload(() => {
	uni.$off('Refrsh')
})

10.2 订单详情 ​

页面静态结构

  • 订单状态信息

    vue
    <!-- 订单状态信息 -->
<view class="order-status">
    <view class="status-item">
        <text>订单状态: </text>
        <text>{{ detail.orderStatusString }}</text>
    </view>
    <view class="status-item">
        <text>订单编号: </text>
        <text>{{ detail.orderNo }}</text>
    </view>
    <view class="status-item">
        <text>下单时间: </text>
        <text>{{ detail.createTime }}</text>
    </view>
    <!-- 已发货 -->
    <van-button  @click="handleConfirmOrder(detail.orderNo)" v-if="detail.orderStatus === 3" color="#1baeae" block >确认收货</van-button>
    <!-- 未支付 -->
    <van-button @click="showPayFn" v-if="detail.orderStatus === 0" color="#1baeae" block >去支付</van-button>
    <!-- 非取消  非完成 -->
    <van-button @click="handleCancelOrder(detail.orderNo)" v-if="detail.orderStatus >= 0 && detail.orderStatus !== 4" block>取消订单</van-button>
</view>

  • 订单金额信息

    vue
    <view class="order-price">
    <view class="price-item">
        <text>商品金额: </text>
        <text>￥ {{ detail.totalPrice }}</text>
    </view>
    <view class="price-item">
        <text>配送方式: </text>
        <text>顺丰快递</text>
    </view>
</view>

  • 订单商品信息

    vue
    <view class="order-goods">
    <van-card
      v-for="item in detail.newBeeMallOrderItemVOS"
      :key="item.goodsId"
      :num="item.goodsCount"
      :price="item.sellingPrice"
      desc="全场包邮"
      :title="item.goodsName"
      :thumb="item.goodsCoverImg"
    />
</view>

页面UI样式

scss
page {
	background: #f7f7f7;
}
.order-status {
	background-color: #FFF;
	padding: 40rpx;
	font-size: 30rpx;
	border-top: 2rpx solid #ebedf0;
	.status-item {
		margin-bottom: 20rpx;
		text:first-child {
			color: #999;
		}
	}
	.van-button {
		margin-bottom: 20rpx;
	}
}

.order-price {
	background-color: #fff;
	margin: 40rpx 0;
	padding: 40rpx;
	font-size: 30rpx;
	.price-item {
		margin-bottom: 20rpx;
		text:first-child {
			color: #999;
		}
	}
}


.van-card {
	background-color: #fff;
	margin-top: 0;
	.van-card__price {
		color: #323233;
		font-weight: 500;
	}
}

.pay-view {
	width: 90%;
	margin: 0 auto;
	padding-top: 100rpx;
	.van-button {
		margin-bottom: 20rpx;
	}
}

页面JS逻辑

  • 加载订单数据

    js
    // 初始化
const init = async () => {
	// 1. 显示加载
	uni.showLoading({ title: '加载中...', mask: true })
	// 2. 发起请求
	const { data } = await getOrderDetail(state.orderNo)
	state.detail = data
	uni.hideLoading()
	console.log(data);
}

// 页面加载
onLoad((message) => {
	// 1. 获取订单号
	const { id } = message
	state.orderNo = id
	// 2. 初始化数据
	init()
})

  • 确认收货

    js
    // * 确认收货（完成订单）
const handleConfirmOrder = (id) => {
    uni.showModal({
    	title: '提示',
    	content: '是否确认收货?',
    	success: async ({ confirm }) => {
    		if (!confirm) return
    		await confirmOrder(id)
    		uni.$Toast('确认成功')
			uni.$emit('Refrsh')
    		init()
    	}
    })
}

  • 支付订单

    js
    // 显示支付弹窗
const showPayFn = () => {
	state.showPay = true
}

// 关闭支付弹窗
const hidePayFn = () => {
	state.showPay = false
}

// 支付订单
const handlePayOrder = async (type) => {
	uni.showLoading({ mask: true })
	await payOrder({ orderNo: state.orderNo, payType: type })
	uni.$Toast('支付成功')
	uni.$emit('Refrsh')
	state.showPay = false
	uni.hideLoading()
	init()
}

  • 取消订单

    js
    // * 取消订单
const handleCancelOrder = (id) => {
	uni.showModal({
		title: '提示',
		content: '确认取消订单?',
		success: async ({ confirm }) => {
			if (!confirm) return
			await cancelOrder(id)
			uni.$Toast('取消成功')
			uni.$emit('Refrsh')
			init()
		}
	})
}