mirror of
https://gitee.com/hhyykk/ipms-sjy.git
synced 2025-07-25 00:15:06 +08:00
订单列表和订单详情页初步完善
This commit is contained in:
sfmind
252
yudao-ui-app/pages/order/detail.vue
Normal file
252
yudao-ui-app/pages/order/detail.vue
Normal file
@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<viwe class="detail-header">
|
||||
<view class="order-status">{{ order.status | getStatusName }}</view>
|
||||
</viwe>
|
||||
|
||||
<view class="order-product">
|
||||
<view class="order-item" v-for="item in order.items" :key="item.id">
|
||||
<image class="product-image" :src="item.picUrl"></image>
|
||||
<view class="item-info">
|
||||
<view class="info-text">
|
||||
<u--text :lines="1" size="15px" color="#333333" :text="item.spuName"></u--text>
|
||||
<u-gap height="10"></u-gap>
|
||||
<yd-text-price class="product-price" size="13" intSize="14" :price="item.originalUnitPrice"></yd-text-price>
|
||||
</view>
|
||||
<view class="price-number-box">
|
||||
<view class="number-box">
|
||||
<view class="product-number">共 {{ item.count }} 件</view>
|
||||
小计：
|
||||
</view>
|
||||
<view class="number-box" @click.stop>
|
||||
<yd-text-price size="13" intSize="16" :price="item.originalPrice"></yd-text-price>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="order.no" >
|
||||
<view v-if="order.no" class="base-info">
|
||||
<view class="info-item">
|
||||
<view class="item-name">订单编号：</view>
|
||||
<view class="item-value">{{ order.no }}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="item-name">下单时间：</view>
|
||||
<view class="item-value">{{ order.createTime }}</view>
|
||||
</view>
|
||||
<view v-if="order.payOrderId" class="info-item">
|
||||
<view class="item-name">支付方式：</view>
|
||||
<view class="item-value">{{ order.payOrderId }}</view>
|
||||
</view>
|
||||
<view v-if="order.payTime" class="info-item">
|
||||
<view class="item-name">支付时间：</view>
|
||||
<view class="item-value">{{ order.payTime }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="delivery-info">
|
||||
<view class="info-item">
|
||||
<view class="item-name">收货地址：</view>
|
||||
<view class="item-value">{{ order.receiverAreaName + order.receiverDetailAddress + order.receiverDetailAddress + order.receiverDetailAddress }}</view>
|
||||
</view>
|
||||
<view v-if="order.receiverName" class="info-item">
|
||||
<view class="item-name">收货人：</view>
|
||||
<view class="item-value">{{ order.receiverName }}</view>
|
||||
</view>
|
||||
<view v-if="order.receiverMobile" class="info-item">
|
||||
<view class="item-name">联系电话：</view>
|
||||
<view class="item-value">{{ order.receiverMobile }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="delivery-info">
|
||||
<view class="info-item">
|
||||
<view class="item-name">商品总额：</view>
|
||||
<yd-text-price class="product-price" size="13" intSize="16" :price="order.originalPrice"></yd-text-price>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="item-name">运费：</view>
|
||||
<yd-text-price class="product-price" size="13" intSize="16" :price="order.deliveryPrice"></yd-text-price>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="item-name">优惠：</view>
|
||||
<yd-text-price class="product-price" size="13" intSize="16" symbol="-￥" :price="order.discountPrice"></yd-text-price>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="item-name">订单金额：</view>
|
||||
<yd-text-price class="product-price" size="15" intSize="20" :price="order.orderPrice"></yd-text-price>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getOrderDetail } from '../../api/order'
|
||||
import orderStatus from '@/common/orderStatus'
|
||||
|
||||
export default {
|
||||
name: 'orderDetail',
|
||||
filters: {
|
||||
getStatusName(status) {
|
||||
return orderStatus[status + ''].name
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
orderId: undefined,
|
||||
order: {}
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.orderId = e.orderId
|
||||
if (!this.orderId) {
|
||||
uni.$u.toast('请求参数错误')
|
||||
} else {
|
||||
this.loadOrderDetailData()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadOrderDetailData() {
|
||||
getOrderDetail({ id: this.orderId })
|
||||
.then(res => {
|
||||
this.order = res.data || {}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
background-color: #f3f3f3;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
@include flex-center();
|
||||
background-color: $custom-bg-color;
|
||||
padding: 10rpx 0;
|
||||
border-radius: 0 0 20rpx 20rpx;
|
||||
}
|
||||
|
||||
.order-product {
|
||||
background-color: $custom-bg-color;
|
||||
border-radius: 20rpx;
|
||||
margin: 20rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
.order-item {
|
||||
background: #ffffff;
|
||||
@include flex-space-between;
|
||||
padding: 10rpx 0 10rpx 5rpx;
|
||||
|
||||
.product-check {
|
||||
padding: 20rpx;
|
||||
|
||||
.un-check-box {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 1px solid #939393;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
flex: 1;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.info-text {
|
||||
padding-bottom: 10rpx;
|
||||
|
||||
.product-price {
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.price-number-box {
|
||||
@include flex-space-between;
|
||||
|
||||
.number-box {
|
||||
font-size: 24rpx;
|
||||
|
||||
.product-number {
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.number-box {
|
||||
height: 60rpx;
|
||||
@include flex-center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.base-info {
|
||||
background-color: $custom-bg-color;
|
||||
border-radius: 20rpx;
|
||||
margin: 20rpx;
|
||||
padding: 20rpx;
|
||||
.info-item {
|
||||
@include flex-left();
|
||||
padding: 10rpx 0;
|
||||
.item-name {
|
||||
color: #999;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.item-value {
|
||||
color: #333;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delivery-info {
|
||||
background-color: $custom-bg-color;
|
||||
border-radius: 20rpx;
|
||||
margin: 20rpx;
|
||||
padding: 20rpx;
|
||||
.info-item {
|
||||
@include flex-left();
|
||||
padding: 10rpx 0;
|
||||
.item-name {
|
||||
color: #999;
|
||||
font-size: 26rpx;
|
||||
width: 260rpx;
|
||||
}
|
||||
.item-value {
|
||||
color: #333;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delivery-info {
|
||||
background-color: $custom-bg-color;
|
||||
border-radius: 20rpx;
|
||||
margin: 20rpx;
|
||||
padding: 20rpx;
|
||||
.info-item {
|
||||
@include flex-space-between();
|
||||
padding: 10rpx 0;
|
||||
.item-name {
|
||||
color: #999;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
195
yudao-ui-app/pages/order/list.vue
Normal file
195
yudao-ui-app/pages/order/list.vue
Normal file
@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky style="top: 0" offset-top="0">
|
||||
<u-tabs :list="tabArray" :current="tabIndex" itemStyle="padding-left: 18px; padding-right: 18px; height: 36px;" @change="handleStatusChange"></u-tabs>
|
||||
</u-sticky>
|
||||
<view class="order-list">
|
||||
<view v-for="order in orderList" :key="order.no" class="order-item">
|
||||
<view class="order-header">
|
||||
<view class="order-no">订单编号：{{ order.no }}</view>
|
||||
<view class="order-status">{{ order.status | getStatusName }}</view>
|
||||
</view>
|
||||
|
||||
<view v-if="order.items.length === 1" class="order-single-item" @click="handleOrderClick(order.id)">
|
||||
<view class="item-wrap" v-for="item in order.items" :key="item.id">
|
||||
<view class="item-info">
|
||||
<image class="item-cover" :src="item.picUrl"></image>
|
||||
<u--text :lines="2" size="15px" color="#333333" :text="item.spuName"></u--text>
|
||||
</view>
|
||||
<view class="item-count">共{{ item.count }}件</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="order-multi-item" @click="handleOrderClick(order.id)">
|
||||
<u-scroll-list :indicator="false">
|
||||
<view class="item-wrap" v-for="item in order.items" :key="item.id">
|
||||
<image class="item-image" :src="item.picUrl"></image>
|
||||
</view>
|
||||
</u-scroll-list>
|
||||
<view class="product-count">共{{ order.productCount }}件</view>
|
||||
</view>
|
||||
|
||||
<view class="order-btn-group">
|
||||
<view class="order-btn">再次购买</view>
|
||||
<view class="order-btn">其他操作</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getOrderPage } from '../../api/order'
|
||||
import orderStatus from '@/common/orderStatus'
|
||||
|
||||
export default {
|
||||
name: 'orderList',
|
||||
filters: {
|
||||
getStatusName(status) {
|
||||
return orderStatus[status + ''].name
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageNo: 1,
|
||||
tabIndex: 0,
|
||||
orderList: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tabArray() {
|
||||
let tabArray = [{ name: '全部', status: 'all' }]
|
||||
for (let status in orderStatus) {
|
||||
if (status !== '40') {
|
||||
tabArray.push({ name: orderStatus[status].name, status: status })
|
||||
}
|
||||
}
|
||||
return tabArray
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
const status = e.status
|
||||
if (status !== undefined) {
|
||||
this.tabArray.forEach((item, index) => {
|
||||
if (item.status === status) {
|
||||
this.tabIndex = index
|
||||
}
|
||||
})
|
||||
}
|
||||
this.loadOrderPageData()
|
||||
},
|
||||
methods: {
|
||||
handleStatusChange({ index }) {
|
||||
this.tabIndex = index
|
||||
this.loadOrderPageData()
|
||||
},
|
||||
loadOrderPageData() {
|
||||
let params = { pageNo: this.pageNo }
|
||||
const status = this.tabArray[this.tabIndex].status
|
||||
if (status !== 'all') {
|
||||
params.orderStatus = status
|
||||
}
|
||||
getOrderPage(params)
|
||||
.then(res => {
|
||||
this.orderList = res.data.list || []
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
handleOrderClick(orderId) {
|
||||
uni.$u.route('/pages/order/detail', {
|
||||
orderId: orderId
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.order-list {
|
||||
background-color: #f3f3f3;
|
||||
|
||||
.order-item {
|
||||
padding: 20rpx;
|
||||
background-color: #ffffff;
|
||||
border-bottom: $custom-border-style;
|
||||
|
||||
.order-header {
|
||||
@include flex-space-between;
|
||||
height: 80rpx;
|
||||
|
||||
.order-no {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.order-status {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.order-single-item {
|
||||
.item-wrap {
|
||||
@include flex-space-between();
|
||||
|
||||
.item-info {
|
||||
@include flex-left();
|
||||
|
||||
.item-cover {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-count {
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
width: 120rpx;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-multi-item {
|
||||
@include flex-space-between();
|
||||
|
||||
.item-wrap {
|
||||
margin-right: 20rpx;
|
||||
|
||||
.item-image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.product-count {
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
width: 120rpx;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.order-btn-group {
|
||||
margin-top: 10rpx;
|
||||
@include flex-right();
|
||||
|
||||
.order-btn {
|
||||
width: 120rpx;
|
||||
height: 36rpx;
|
||||
line-height: 36rpx;
|
||||
border-radius: 36rpx;
|
||||
border: 1px solid #777;
|
||||
color: #777;
|
||||
font-size: 22rpx;
|
||||
text-align: center;
|
||||
margin-left: 15rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,87 +0,0 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky style="top: 0" offset-top="0">
|
||||
<u-tabs :list="statusArray" :current="statusIndex" @change="handleStatusChange"></u-tabs>
|
||||
</u-sticky>
|
||||
<view class="order-list">
|
||||
<view v-for="(item, index) in orderList" :key="item.orderNo" class="order-item">
|
||||
<view class="item-title">{{ item.orderNo }}</view>
|
||||
<view class="item-content">{{ item.orderStatus }}</view>
|
||||
<view class="item-btn-group"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getOrderPage } from '../../api/order'
|
||||
|
||||
export default {
|
||||
name: 'order',
|
||||
data() {
|
||||
return {
|
||||
pageNo: 1,
|
||||
statusIndex: 0,
|
||||
statusArray: [
|
||||
{
|
||||
name: '全部',
|
||||
status: '-1'
|
||||
},
|
||||
{
|
||||
name: '待付款',
|
||||
status: '0'
|
||||
},
|
||||
{
|
||||
name: '待发货',
|
||||
status: '10'
|
||||
},
|
||||
{
|
||||
name: '待收货',
|
||||
status: '20'
|
||||
},
|
||||
{
|
||||
name: '已完成',
|
||||
status: '30'
|
||||
},
|
||||
{
|
||||
name: '已取消', // TODO @辰尘：已取消不展示
|
||||
status: '50'
|
||||
}
|
||||
],
|
||||
orderList: []
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
const status = e.status
|
||||
if (status !== undefined) {
|
||||
this.statusArray.forEach((item, index) => {
|
||||
if (item.status === status) {
|
||||
this.statusIndex = index
|
||||
}
|
||||
})
|
||||
}
|
||||
this.loadOrderPageData()
|
||||
},
|
||||
methods: {
|
||||
handleStatusChange(item) {
|
||||
this.statusIndex = item.status
|
||||
},
|
||||
loadOrderPageData() {
|
||||
let params = { pageNo: this.pageNo }
|
||||
const status = this.statusArray[this.statusIndex].status
|
||||
if (status >= 0) {
|
||||
params.orderStatus = status
|
||||
}
|
||||
getOrderPage(params)
|
||||
.then(res => {
|
||||
console.log(res)
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
Reference in New Issue
Block a user