mirror of
https://gitee.com/huangge1199_admin/vue-pro.git
synced 2024-11-25 16:51:52 +08:00
253 lines
6.3 KiB
Vue
253 lines
6.3 KiB
Vue
|
<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>
|