mirror of
https://gitee.com/hhyykk/ipms-sjy.git
synced 2025-10-31 10:18:42 +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>
|
||||
Reference in New Issue
Block a user