123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182 |
- <template>
- <div class="orderDetail-page-wrapper">
- <a-card :bordered="false" class="orderDetail-goods-info">
- <!-- 标题 -->
- <div class="page-header">
- <h3>订单信息</h3>
- <a-badge v-if="orderDetail" :count="orderDetail.orderStateDictValue" :number-style="{ border: '1px solid #ff9900', backgroundColor: 'transparent', color: '#ff9900', padding: '1px 10px', height: '24px' }" />
- </div>
- <a-divider />
- <a-row :gutter="48" v-if="orderDetail">
- <a-col :span="8" class="item-cont">
- <p class="item-label">下单时间:</p>
- <p class="item-main">{{ orderDetail.orderTime }}</p>
- </a-col>
- <a-col :span="8" class="item-cont">
- <p class="item-label">订单编号:</p>
- <p class="item-main">{{ orderDetail.orderSn }}</p>
- </a-col>
- <a-col :span="8" class="item-cont">
- <p class="item-label">订单总额:</p>
- <p class="item-main">{{ orderDetail.payGold }}乐豆</p>
- </a-col>
- </a-row>
- <a-row :gutter="48" v-if="orderDetail">
- <a-col :span="8" class="item-cont">
- <p class="item-label">用户手机:</p>
- <p class="item-main">{{ orderDetail.customerMobile }}</p>
- </a-col>
- <a-col :span="8" class="item-cont">
- <p class="item-label">收货人姓名:</p>
- <p class="item-main">{{ orderDetail.receiverName }}</p>
- </a-col>
- <a-col :span="8" class="item-cont">
- <p class="item-label">收货人手机:</p>
- <p class="item-main">{{ orderDetail.receiverPhone }}</p>
- </a-col>
- </a-row>
- <a-row :gutter="48" v-if="orderDetail">
- <a-col :span="16" class="item-cont">
- <p class="item-label">收货地址:</p>
- <p class="item-main">{{ orderDetail.receiveAddress }}</p>
- </a-col>
- <a-col :span="8" class="item-cont">
- <p class="item-label">支付时间:</p>
- <p class="item-main">{{ orderDetail.payTime ? orderDetail.payTime : '--' }}</p>
- </a-col>
- </a-row>
- </a-card>
- <a-card :bordered="false" class="orderDetail-goods-main">
- <!-- 标题 -->
- <div class="page-header">
- <h3>商品信息</h3>
- </div>
- <a-divider />
- <div class="goods-info-cont">
- <!-- 供应商列 -->
- <a-tabs type="card" @change="handleClick" v-if="orderDetail">
- <a-tab-pane v-for="item in orderDetail.officialPartnerOrderList" :key="item.officialPartnerNo" :tab="item.officialPartner.name"></a-tab-pane>
- </a-tabs>
- <!-- 商品订单 -->
- <div v-if="orderData && orderData.orderGoodsList">
- <!-- 待发货 -->
- <GoodsOrder type="orderGoods" :orderData="orderData.orderGoodsList" :orderState="orderDetail.orderState" :isReset="isReset" @sendGoods="sendGoods" />
- </div>
- <div v-if="orderData && orderData.orderExpressList">
- <!-- 已发货 -->
- <GoodsOrder v-for="(item, index) in orderData.orderExpressList" :key="index" type="express" :orderData="item" />
- </div>
- </div>
- </a-card>
- <!-- 物流信息 -->
- <GoodsLogistics :openModal="openModal" @submit="handleSubmit" @close="openModal=false" />
- </div>
- </template>
- <script>
- import GoodsOrder from './GoodsOrder.vue'
- import GoodsLogistics from './GoodsLogistics.vue'
- import { orderFind, offPartnerOrderFind, orderExpressSend } from '@/api/order'
- export default {
- name: 'OrderDetail',
- components: { GoodsOrder, GoodsLogistics },
- data () {
- return {
- orderDetail: null, // 订单详情
- orderData: null,
- officialPartnerNo: '', // 供货商编号
- openModal: false, // 是否填写物流信息
- orderGoodsNoList: [], // 发货订单号
- isReset: false // 是否重置数据
- }
- },
- methods: {
- // 供应商下的订单信息
- handleClick (officialPartnerNo) {
- if (officialPartnerNo) {
- this.officialPartnerNo = officialPartnerNo
- }
- offPartnerOrderFind({ orderNo: this.orderDetail.orderNo, officialPartnerNo: officialPartnerNo || this.officialPartnerNo }).then(res => {
- if (res.status == 200) {
- this.orderData = res.data
- } else {
- this.orderData = null
- }
- })
- },
- // 立即发货
- sendGoods (idArr) {
- this.orderGoodsNoList = idArr
- this.openModal = true
- },
- getOrderDetail () {
- orderFind({ id: this.$route.params.id }).then(res => {
- if (res.status == 200) {
- this.orderDetail = res.data
- if (this.orderDetail.officialPartnerOrderList && this.orderDetail.officialPartnerOrderList.length > 0) {
- this.officialPartnerNo = this.orderDetail.officialPartnerOrderList[0].officialPartnerNo
- this.handleClick()
- }
- } else {
- this.orderDetail = null
- }
- })
- },
- // 提交物流
- handleSubmit (form) {
- this.isReset = false
- form.orderGoodsNoList = this.orderGoodsNoList
- form.orderNo = this.orderDetail.orderNo
- form.officialPartnerNo = this.officialPartnerNo
- orderExpressSend(form).then(res => {
- if (res.status == 200) {
- this.isReset = true
- this.$message.success(res.message)
- this.handleClick()
- this.openModal = false
- }
- })
- }
- },
- beforeRouteEnter (to, from, next) {
- next(vm => {
- vm.getOrderDetail()
- })
- }
- }
- </script>
- <style lang="less" scoped>
- .orderDetail-page-wrapper{
- .orderDetail-goods-info{
- // 标题
- .page-header{
- display: flex;
- justify-content: space-between;
- align-items: center;
- h3{
- margin: 0;
- }
- }
- .item-cont{
- display: flex;
- justify-content: space-evenly;
- margin-bottom: 24px;
- .item-label{
- display: inline-block;
- flex-shrink: 0;
- margin: 0;
- width: 90px;
- }
- .item-main{
- display: inline-block;
- flex-grow: 1;
- margin: 0;
- word-break: break-all;
- }
- }
- }
- .orderDetail-goods-main{
- margin-top: 15px;
- }
- }
- </style>
|