123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161 |
- <template>
- <div class="orderDetail-page-wrapper">
- <a-card :bordered="false" class="orderDetail-goods-info">
- <!-- 标题 -->
- <div class="page-header">
- <h3>订单信息</h3>
- <a-badge count="部分发货" :number-style="{ border: '1px solid #ff9900', backgroundColor: 'transparent', color: '#ff9900', padding: '1px 10px', height: '24px' }" />
- </div>
- <a-divider />
- <a-row :gutter="48">
- <a-col :span="8" class="item-cont">
- <p class="item-label">下单时间:</p>
- <p class="item-main">2020-10-30 16:45</p>
- </a-col>
- <a-col :span="8" class="item-cont">
- <p class="item-label">订单编号:</p>
- <p class="item-main">No12387612387</p>
- </a-col>
- <a-col :span="8" class="item-cont">
- <p class="item-label">订单总额:</p>
- <p class="item-main">1123乐豆</p>
- </a-col>
- <a-col :span="8" class="item-cont">
- <p class="item-label">用户手机:</p>
- <p class="item-main">15757989887</p>
- </a-col>
- <a-col :span="8" class="item-cont">
- <p class="item-label">收货人姓名:</p>
- <p class="item-main">豆豆</p>
- </a-col>
- <a-col :span="8" class="item-cont">
- <p class="item-label">收货人手机:</p>
- <p class="item-main">15712457854</p>
- </a-col>
- <a-col :span="16" class="item-cont">
- <p class="item-label">收货地址:</p>
- <p class="item-main">陕西省西安市未央区阿克苏接电话高科技大厦</p>
- </a-col>
- <a-col :span="8" class="item-cont">
- <p class="item-label">支付时间:</p>
- <p class="item-main">2020-10-30 16:46</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-menu class="menu-cont" :defaultSelectedKeys="[menuList[0].id]" mode="horizontal" @click="handleClick">
- <a-menu-item v-for="item in menuList" :key="item.id" :title="item.name">
- {{ item.name }}
- </a-menu-item>
- </a-menu>
- <!-- 商品订单 -->
- <GoodsOrder v-for="(item, index) in orderData" :key="index" :orderData="item" @sendGoods="sendGoods" />
- </div>
- </a-card>
- <!-- 物流信息 -->
- <GoodsLogistics :openModal="openModal" @success="sendGoodsSuccess" @close="openModal=false" />
- </div>
- </template>
- <script>
- import GoodsOrder from './GoodsOrder.vue'
- import GoodsLogistics from './GoodsLogistics.vue'
- export default {
- name: 'OrderDetail',
- components: { GoodsOrder, GoodsLogistics },
- data () {
- return {
- menuList: [
- { id: 1, name: '供应商1' },
- { id: 2, name: '供应商2' },
- { id: 3, name: '供应商3' }
- ],
- orderData: [
- {
- orderStatus: 1,
- listData: [
- { id: 1, name: '蓝精灵阿斯达克洗衣液', price: 52, buyNum: 30 },
- { id: 2, name: '前往东京国际权威的沐浴露', price: 22, buyNum: 7 },
- { id: 3, name: '三只松鼠', price: 143, buyNum: 10 }
- ]
- },
- {
- orderStatus: 2,
- companyName: '韵达快递',
- orderNo: '476136981238',
- listData: [
- { id: 1, name: '蓝精灵阿斯达克洗衣液', price: 52, buyNum: 30 },
- { id: 2, name: '前往东京国际权威的沐浴露', price: 22, buyNum: 7 }
- ]
- },
- {
- orderStatus: 2,
- companyName: '顺丰快递',
- orderNo: '4665476136981238',
- listData: [
- { id: 1, name: '蓝精灵阿斯达克洗衣液', price: 52, buyNum: 30 },
- { id: 2, name: '前往东京国际权威的沐浴露', price: 22, buyNum: 7 }
- ]
- }
- ],
- openModal: false // 是否填写物流信息
- }
- },
- methods: {
- // 切换 供应商
- handleClick (item) {
- console.log(item, '---切换供应商')
- },
- // 立即发货
- sendGoods (idArr) {
- console.log(idArr)
- this.openModal = true
- },
- // 物流信息填写成功
- sendGoodsSuccess () {
- console.log('物流信息填写成功')
- }
- }
- }
- </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;
- }
- }
- }
- .orderDetail-goods-main{
- margin-top: 15px;
- }
- }
- </style>
|