|
@@ -1,96 +1,122 @@
|
|
|
<template>
|
|
|
- <el-dialog :title="$t('ding-dan-xiang-qing')" :visible.sync="showDialog" class="common-dialog" width="80%" @close="cancel" destroy-on-close append-to-body>
|
|
|
- <div class="order-detail-container">
|
|
|
- <div class="main-panel" v-if="orderInfo.id">
|
|
|
- <div class="panel">
|
|
|
- <div class="title">{{ $t('ji-chu-xin-xi') }}</div>
|
|
|
- <div class="content">
|
|
|
- <el-row class="row">
|
|
|
- <el-col :span="8">
|
|
|
- <span class="head">{{ $t('ding-dan-hao') }}:</span>
|
|
|
- <span class="control-label">{{ orderInfo.orderSn }}</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <span class="head">{{ $t('zong-jin-e') }}:</span>
|
|
|
- <span class="control-label">¥{{ orderInfo.amount }}</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <span class="head">{{ $t('ding-dan-zhuang-tai') }}:</span>
|
|
|
- <span class="control-label normal-status">{{ orderInfo.statusText }}</span>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row class="row">
|
|
|
- <el-col :span="8">
|
|
|
- <span class="head">{{ $t('ding-dan-lei-xing') }}:</span>
|
|
|
- <span class="control-label">{{ orderInfo.typeName }}</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <span class="head">{{ $t('ding-dan-shi-jian') }}:</span>
|
|
|
- <span class="control-label">{{ orderInfo.createTime }}</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <span class="head">{{ $t('xia-dan-zhuo-ma') }}:</span>
|
|
|
- <span class="control-label">{{ orderInfo.tableInfo ? orderInfo.tableInfo.code : "-" }}</span>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row class="row">
|
|
|
- <el-col :span="8">
|
|
|
- <span class="head">{{ $t('bei-zhu-xin-xi') }}:</span>
|
|
|
- <span class="control-label">{{ orderInfo.remark ? orderInfo.remark : '-'}}</span>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
+ <el-dialog
|
|
|
+ :title="$t('ding-dan-xiang-qing')"
|
|
|
+ :visible.sync="showDialog"
|
|
|
+ class="common-dialog"
|
|
|
+ width="80%"
|
|
|
+ @close="cancel"
|
|
|
+ destroy-on-close
|
|
|
+ append-to-body
|
|
|
+ >
|
|
|
+ <div class="main-panel" v-if="orderInfo.id">
|
|
|
+ <div class="panel">
|
|
|
+ <div class="title">{{ $t('ji-chu-xin-xi') }}</div>
|
|
|
+ <div class="content">
|
|
|
+ <el-row class="row">
|
|
|
+ <el-col :span="8">
|
|
|
+ <span class="head">{{ $t('ding-dan-hao') }}:</span>
|
|
|
+ <span class="control-label">{{ orderInfo.orderSn }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <span class="head">{{ $t('zong-jin-e') }}:</span>
|
|
|
+ <span class="control-label">¥{{ orderInfo.amount }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <span class="head">{{ $t('ding-dan-zhuang-tai') }}:</span>
|
|
|
+ <!-- <span :class="`control-label ${changeClassName(orderInfo.statusText)}`">
|
|
|
+ {{ orderInfo.statusText }}
|
|
|
+ </span> -->
|
|
|
+ <span class="control-label normal-status">{{ orderInfo.statusText }}</span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="row">
|
|
|
+ <el-col :span="8">
|
|
|
+ <span class="head">{{ $t('ding-dan-lei-xing') }}:</span>
|
|
|
+ <span class="control-label">{{ orderInfo.typeName }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <span class="head">{{ $t('ding-dan-shi-jian') }}:</span>
|
|
|
+ <span class="control-label">{{ orderInfo.createTime }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <span class="head">{{ $t('xia-dan-zhuo-ma') }}:</span>
|
|
|
+ <span class="control-label">
|
|
|
+ {{ orderInfo.tableInfo ? orderInfo.tableInfo.code : '-' }}
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="row">
|
|
|
+ <el-col :span="24">
|
|
|
+ <span class="head">{{ $t('bei-zhu-xin-xi') }}:</span>
|
|
|
+ <span class="control-label">{{ orderInfo.remark ? orderInfo.remark : '-' }}</span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
- <div class="panel">
|
|
|
- <div class="title">{{ $t('zhi-fu-xin-xi') }}</div>
|
|
|
- <div class="content">
|
|
|
- <el-row class="row">
|
|
|
- <el-col :span="8">
|
|
|
- <span class="head">{{ $t('zhi-fu-jin-e') }}:</span>
|
|
|
- <span class="control-label">¥{{ orderInfo.payAmount.toFixed(2) }}</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <span class="head">{{ $t('zhi-fu-zhuang-tai') }}:</span>
|
|
|
- <span class="control-label payed-status" v-if="orderInfo.payStatus == 'B'">{{ getName(payStatusList, orderInfo.payStatus) }}</span>
|
|
|
- <span class="control-label normal-status" v-else>{{ getName(payStatusList, orderInfo.payStatus) }}</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <span class="head">{{ $t('jian-mian-jin-e') }}:</span>
|
|
|
- <span class="control-label">¥{{ orderInfo.discount.toFixed(2) }}</span>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row class="row">
|
|
|
- <el-col :span="8">
|
|
|
- <span class="head">{{ $t('zhi-fu-fang-shi') }}:</span>
|
|
|
- <span class="control-label">{{ getName(payTypeList, orderInfo.payType) }}</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <span class="head">{{ $t('zhi-fu-shi-jian') }}:</span>
|
|
|
- <span class="control-label">{{ orderInfo.payTime ? orderInfo.payTime : '-' }}</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <span class="head">{{ $t('shi-yong-qia-quan') }}:</span>
|
|
|
- <span class="control-label">{{ orderInfo.couponInfo ? '¥' + orderInfo.couponInfo.amount + '(' + orderInfo.couponInfo.name + ')' : '-' }}</span>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row class="row">
|
|
|
- <el-col :span="8">
|
|
|
- <span class="head">{{ $t('shi-yong-ji-fen') }}:</span>
|
|
|
- <span class="control-label">{{ orderInfo.usePoint ? orderInfo.usePoint : 0 }}</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <span class="head">{{ $t('ji-fen-jin-e') }}:</span>
|
|
|
- <span class="control-label">¥{{ orderInfo.pointAmount.toFixed(2) }}</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <span class="head">{{ $t('pei-song-fei-yong') }}:</span>
|
|
|
- <span class="control-label">¥{{ orderInfo.deliveryFee.toFixed(2) }}</span>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="panel">
|
|
|
+ <div class="title">{{ $t('zhi-fu-xin-xi') }}</div>
|
|
|
+ <div class="content">
|
|
|
+ <el-row class="row">
|
|
|
+ <el-col :span="8">
|
|
|
+ <span class="head">{{ $t('zhi-fu-jin-e') }}:</span>
|
|
|
+ <span class="control-label">¥{{ orderInfo.payAmount.toFixed(2) }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <span class="head">{{ $t('zhi-fu-zhuang-tai') }}:</span>
|
|
|
+ <!-- <span class="control-label payed-status" v-if="orderInfo.payStatus == 'B'">
|
|
|
+ {{ getName(payStatusList, orderInfo.payStatus) }}
|
|
|
+ </span>
|
|
|
+ <span class="control-label normal-status" v-else>
|
|
|
+ {{ getName(payStatusList, orderInfo.payStatus) }}
|
|
|
+ </span> -->
|
|
|
+
|
|
|
+ <span :class="`control-label ${changeClassName(orderInfo.payStatus)}`">
|
|
|
+ {{ getName(payStatusList, orderInfo.payStatus) }}
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <span class="head">{{ $t('jian-mian-jin-e') }}:</span>
|
|
|
+ <span class="control-label">¥{{ orderInfo.discount.toFixed(2) }}</span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="row">
|
|
|
+ <el-col :span="8">
|
|
|
+ <span class="head">{{ $t('zhi-fu-fang-shi') }}:</span>
|
|
|
+ <span class="control-label">{{ getName(payTypeList, orderInfo.payType) }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <span class="head">{{ $t('zhi-fu-shi-jian') }}:</span>
|
|
|
+ <span class="control-label">{{ orderInfo.payTime ? orderInfo.payTime : '-' }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <span class="head">{{ $t('shi-yong-qia-quan') }}:</span>
|
|
|
+ <span class="control-label">
|
|
|
+ {{
|
|
|
+ orderInfo.couponInfo
|
|
|
+ ? '¥' + orderInfo.couponInfo.amount + '(' + orderInfo.couponInfo.name + ')'
|
|
|
+ : '-'
|
|
|
+ }}
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="row">
|
|
|
+ <el-col :span="8">
|
|
|
+ <span class="head">{{ $t('shi-yong-ji-fen') }}:</span>
|
|
|
+ <span class="control-label">{{ orderInfo.usePoint ? orderInfo.usePoint : 0 }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <span class="head">{{ $t('ji-fen-jin-e') }}:</span>
|
|
|
+ <span class="control-label">¥{{ orderInfo.pointAmount.toFixed(2) }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <span class="head">{{ $t('pei-song-fei-yong') }}:</span>
|
|
|
+ <span class="control-label">¥{{ orderInfo.deliveryFee.toFixed(2) }}</span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="panel">
|
|
|
+ <!-- <div class="panel">
|
|
|
<div class="title">{{ $t('hui-yuan-xin-xi') }}</div>
|
|
|
<div class="content">
|
|
|
<el-row class="row">
|
|
@@ -115,89 +141,106 @@
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
|
|
|
- <div class="panel">
|
|
|
- <div class="title">{{ $t('shang-pin-xin-xi') }}</div>
|
|
|
- <div class="content">
|
|
|
- <el-table ref="tables" v-loading="loading" :data="orderInfo.goods">
|
|
|
- <el-table-column :label="$t('shang-pin-ID')" prop="id" width="66"/>
|
|
|
- <el-table-column :label="$t('tu-pian')" align="center" prop="name">
|
|
|
- <template slot-scope="scope">
|
|
|
- <img class="goods-logo" :src="scope.row.image"/>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column :label="$t('ming-cheng')" align="left" prop="name">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span class="goods-name">{{ scope.row.name }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column :label="$t('gui-ge')" align="center">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span v-if="scope.row.specList">
|
|
|
- <span class="spec-item" v-for="spec in scope.row.specList">{{ spec.specValue }}</span>
|
|
|
+ <div class="panel">
|
|
|
+ <div class="title">{{ $t('shang-pin-xin-xi') }}</div>
|
|
|
+ <div class="content">
|
|
|
+ <el-table ref="tables" v-loading="loading" :data="orderInfo.goods">
|
|
|
+ <el-table-column :label="$t('shang-pin-ID')" prop="id" width="66" />
|
|
|
+ <el-table-column :label="$t('tu-pian')" align="center" prop="name">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <img class="goods-logo" style="margin: 0 auto" :src="scope.row.image" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column :label="$t('ming-cheng')" align="left" prop="name">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span class="goods-name">{{ scope.row.name }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column :label="$t('gui-ge')" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="scope.row.specList">
|
|
|
+ <span class="spec-item" v-for="spec in scope.row.specList">
|
|
|
+ {{ spec.specValue }}
|
|
|
</span>
|
|
|
- <span v-else>--</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column :label="$t('jia-ge')" align="center" prop="price" />
|
|
|
- <el-table-column :label="$t('you-hui-jin-e')" align="center" prop="discount" />
|
|
|
- <el-table-column :label="$t('shu-liang')" align="center" prop="num" />
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
+ </span>
|
|
|
+ <span v-else>--</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column :label="$t('jia-ge')" align="center" prop="price" />
|
|
|
+ <el-table-column :label="$t('you-hui-jin-e')" align="center" prop="discount" />
|
|
|
+ <el-table-column :label="$t('shu-liang')" align="center" prop="num" />
|
|
|
+ </el-table>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="panel" v-if="orderInfo.type=='goods'">
|
|
|
- <div class="title">{{ $t('pei-song-xin-xi') }}</div>
|
|
|
- <div class="content">
|
|
|
- <el-row class="row">
|
|
|
- <el-col :span="8">
|
|
|
- <span class="head">{{ $t('pei-song-fang-shi') }}:</span>
|
|
|
- <span class="control-label" v-if="orderInfo.orderMode == 'oneself'">{{ $t('men-dian-zi-ti') }}</span>
|
|
|
- <span class="control-label" v-else>{{ $t('wu-liu-pei-song') }}</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="16" v-if="orderInfo.orderMode == 'oneself'">
|
|
|
- <span class="head">{{ $t('zi-ti-di-zhi') }}:</span>
|
|
|
- <span class="control-label">{{orderInfo.storeInfo.name}} {{orderInfo.storeInfo.phone}} {{orderInfo.storeInfo.address}}</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8" v-if="orderInfo.orderMode == 'express' && orderInfo.address">
|
|
|
- <span class="head">{{ $t('shou-huo-ren') }}:</span>
|
|
|
- <span class="control-label">{{ orderInfo.address.name ? orderInfo.address.name : '--' }}</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8" v-if="orderInfo.orderMode == 'express' && orderInfo.address">
|
|
|
- <span class="head">{{ $t('lian-xi-dian-hua') }}:</span>
|
|
|
- <span class="control-label">{{ orderInfo.address.mobile ? orderInfo.address.mobile : '-' }}</span>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row class="row">
|
|
|
- <el-col :span="24" v-if="orderInfo.orderMode == 'express' && orderInfo.address">
|
|
|
- <span class="head">{{ $t('xiang-xi-di-zhi') }}:</span>
|
|
|
- <span class="control-label">{{orderInfo.address.provinceName}}{{orderInfo.address.cityName}}{{orderInfo.address.regionName}}{{orderInfo.address.detail}}</span>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
+ <!-- <div class="panel" v-if="orderInfo.type == 'goods'">
|
|
|
+ <div class="title">{{ $t('pei-song-xin-xi') }}</div>
|
|
|
+ <div class="content">
|
|
|
+ <el-row class="row">
|
|
|
+ <el-col :span="8">
|
|
|
+ <span class="head">{{ $t('pei-song-fang-shi') }}:</span>
|
|
|
+ <span class="control-label" v-if="orderInfo.orderMode == 'oneself'">
|
|
|
+ {{ $t('men-dian-zi-ti') }}
|
|
|
+ </span>
|
|
|
+ <span class="control-label" v-else>{{ $t('wu-liu-pei-song') }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16" v-if="orderInfo.orderMode == 'oneself'">
|
|
|
+ <span class="head">{{ $t('zi-ti-di-zhi') }}:</span>
|
|
|
+ <span class="control-label">
|
|
|
+ {{ orderInfo.storeInfo.name }} {{ orderInfo.storeInfo.phone }}
|
|
|
+ {{ orderInfo.storeInfo.address }}
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" v-if="orderInfo.orderMode == 'express' && orderInfo.address">
|
|
|
+ <span class="head">{{ $t('shou-huo-ren') }}:</span>
|
|
|
+ <span class="control-label">
|
|
|
+ {{ orderInfo.address.name ? orderInfo.address.name : '--' }}
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" v-if="orderInfo.orderMode == 'express' && orderInfo.address">
|
|
|
+ <span class="head">{{ $t('lian-xi-dian-hua') }}:</span>
|
|
|
+ <span class="control-label">
|
|
|
+ {{ orderInfo.address.mobile ? orderInfo.address.mobile : '-' }}
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="row">
|
|
|
+ <el-col :span="24" v-if="orderInfo.orderMode == 'express' && orderInfo.address">
|
|
|
+ <span class="head">{{ $t('xiang-xi-di-zhi') }}:</span>
|
|
|
+ <span class="control-label">
|
|
|
+ {{ orderInfo.address.provinceName }}{{ orderInfo.address.cityName
|
|
|
+ }}{{ orderInfo.address.regionName }}{{ orderInfo.address.detail }}
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
+ </div> -->
|
|
|
|
|
|
- <div class="panel" v-if="orderInfo.expressInfo">
|
|
|
- <div class="title">{{ $t('wu-liu-xin-xi') }}</div>
|
|
|
- <div class="content">
|
|
|
- <el-row class="row">
|
|
|
- <el-col :span="8">
|
|
|
- <span class="head">{{ $t('wu-liu-gong-si') }}:</span>
|
|
|
- <span class="control-label" v-if="orderInfo.expressInfo.expressCompany">{{ orderInfo.expressInfo.expressCompany }}</span>
|
|
|
- <span class="control-label" v-else>--</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <span class="head">{{ $t('wu-liu-dan-hao') }}:</span>
|
|
|
- <span class="control-label" v-if="orderInfo.expressInfo.expressNo">{{ orderInfo.expressInfo.expressNo }}</span>
|
|
|
- <span class="control-label" v-else>--</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <span class="head">{{ $t('fa-huo-shi-jian') }}:</span>
|
|
|
- <span class="control-label">{{orderInfo.expressInfo.expressTime}}</span>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
+ <div class="panel" v-if="orderInfo.expressInfo">
|
|
|
+ <div class="title">{{ $t('wu-liu-xin-xi') }}</div>
|
|
|
+ <div class="content">
|
|
|
+ <el-row class="row">
|
|
|
+ <el-col :span="8">
|
|
|
+ <span class="head">{{ $t('wu-liu-gong-si') }}:</span>
|
|
|
+ <span class="control-label" v-if="orderInfo.expressInfo.expressCompany">
|
|
|
+ {{ orderInfo.expressInfo.expressCompany }}
|
|
|
+ </span>
|
|
|
+ <span class="control-label" v-else>--</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <span class="head">{{ $t('wu-liu-dan-hao') }}:</span>
|
|
|
+ <span class="control-label" v-if="orderInfo.expressInfo.expressNo">
|
|
|
+ {{ orderInfo.expressInfo.expressNo }}
|
|
|
+ </span>
|
|
|
+ <span class="control-label" v-else>--</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <span class="head">{{ $t('fa-huo-shi-jian') }}:</span>
|
|
|
+ <span class="control-label">{{ orderInfo.expressInfo.expressTime }}</span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -205,18 +248,18 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getOrderInfo } from "@/api/order";
|
|
|
+import { getOrderInfo } from '@/api/order'
|
|
|
export default {
|
|
|
- name: "orderDetail",
|
|
|
+ name: 'orderDetail',
|
|
|
props: {
|
|
|
- showDialog:{
|
|
|
- type:[Boolean],
|
|
|
- default:()=>false
|
|
|
+ showDialog: {
|
|
|
+ type: [Boolean],
|
|
|
+ default: () => false,
|
|
|
+ },
|
|
|
+ orderId: {
|
|
|
+ type: [String],
|
|
|
+ default: () => '',
|
|
|
},
|
|
|
- orderId:{
|
|
|
- type:[String],
|
|
|
- default:()=> ''
|
|
|
- }
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
@@ -224,108 +267,129 @@ export default {
|
|
|
loading: false,
|
|
|
payTypeList: [],
|
|
|
payStatusList: [],
|
|
|
- orderInfo: { payAmount: 0, discount: 0, pointAmount: 0, userInfo: {} }
|
|
|
- };
|
|
|
+ orderInfo: { payAmount: 0, discount: 0, pointAmount: 0, userInfo: {} },
|
|
|
+ }
|
|
|
},
|
|
|
watch: {
|
|
|
showDialog(value) {
|
|
|
if (value) {
|
|
|
- this.getOrderInfo(this.orderId);
|
|
|
+ this.getOrderInfo(this.orderId)
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
methods: {
|
|
|
// 查询配置
|
|
|
getOrderInfo(orderId) {
|
|
|
- this.loading = true;
|
|
|
- getOrderInfo(orderId).then(response => {
|
|
|
- this.loading = false;
|
|
|
- this.orderInfo = response.data.orderInfo;
|
|
|
- this.payTypeList = response.data.payTypeList;
|
|
|
- this.payStatusList = response.data.payStatusList;
|
|
|
- }
|
|
|
- ).catch(() => {
|
|
|
- // empty
|
|
|
- });
|
|
|
+ this.loading = true
|
|
|
+ getOrderInfo(orderId)
|
|
|
+ .then((response) => {
|
|
|
+ this.loading = false
|
|
|
+ this.orderInfo = response.data.orderInfo
|
|
|
+ this.payTypeList = response.data.payTypeList
|
|
|
+ this.payStatusList = response.data.payStatusList
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ // empty
|
|
|
+ })
|
|
|
},
|
|
|
// 取消按钮
|
|
|
cancel() {
|
|
|
- this.$emit('closeDialog');
|
|
|
- }
|
|
|
- }
|
|
|
-};
|
|
|
+ this.$emit('closeDialog')
|
|
|
+ },
|
|
|
+ // 支付状态得class
|
|
|
+ changeClassName(status) {
|
|
|
+ if (status == 'B' || status == '已支付') {
|
|
|
+ return 'payed-status'
|
|
|
+ } else if (status == 'A' || status == '待支付') {
|
|
|
+ return ' unpaid'
|
|
|
+ } else {
|
|
|
+ return 'normal-status'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
</script>
|
|
|
<style rel="stylesheet/scss" lang="scss">
|
|
|
- .main-panel {
|
|
|
- margin: 0px;
|
|
|
- padding: 5px;
|
|
|
- .panel {
|
|
|
- border: solid 1px #cccccc;
|
|
|
- min-height: 100px;
|
|
|
- border-radius: 2px;
|
|
|
- margin-top: 10px;
|
|
|
- .title {
|
|
|
- font-weight: bold;
|
|
|
- margin-top: 10px;
|
|
|
- margin-left: 5px;
|
|
|
- padding-left: 5px;
|
|
|
- color: #333333;
|
|
|
- border-left: 5px solid rgb(254,106,0);
|
|
|
- }
|
|
|
- .content {
|
|
|
- padding: 20px;
|
|
|
- .goods-logo {
|
|
|
- width: 45px;
|
|
|
- height: 45px;
|
|
|
- border: solid 1px #cccccc;
|
|
|
- }
|
|
|
- .spec-item {
|
|
|
- color: #666666;
|
|
|
- background: #ffffff;
|
|
|
- border: #666666 solid 1px;
|
|
|
- border-radius: 20px;
|
|
|
- padding: 2px 8px 2px 8px;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
- .row {
|
|
|
- min-height: 40px;
|
|
|
- verticle-align: middle;
|
|
|
- display: flex;
|
|
|
- line-height: 40px;
|
|
|
- .payed-status {
|
|
|
- color: #52c41a;
|
|
|
- background: #f6ffed;
|
|
|
- border: #b7eb8f solid 1px;
|
|
|
- border-radius: 20px;
|
|
|
- padding: 5px 8px 2px 8px;
|
|
|
- font-size: 90%;
|
|
|
- }
|
|
|
- .normal-status {
|
|
|
- color: #666666;
|
|
|
- background: #ffffff;
|
|
|
- border: #666666 solid 1px;
|
|
|
- border-radius: 20px;
|
|
|
- padding: 5px 8px 2px 8px;
|
|
|
- font-size: 90%;
|
|
|
- }
|
|
|
- }
|
|
|
- .head {
|
|
|
- color: rgb(164,164,164);
|
|
|
- min-width: 120px;
|
|
|
- text-align: right;
|
|
|
- display: block;
|
|
|
- float: left;
|
|
|
- }
|
|
|
- .control-text {
|
|
|
- display: block;
|
|
|
- background: #f5f5f5;
|
|
|
- border-radius: 10px;
|
|
|
- margin-left: 120px;
|
|
|
- margin-top: 5px;
|
|
|
- line-height: 22px;
|
|
|
- padding: 5px 10px 5px 10px;
|
|
|
- }
|
|
|
- }
|
|
|
+.main-panel {
|
|
|
+ margin: 0px;
|
|
|
+ padding: 5px;
|
|
|
+ max-height: 65vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ .panel {
|
|
|
+ border: solid 1px #cccccc;
|
|
|
+ min-height: 100px;
|
|
|
+ border-radius: 2px;
|
|
|
+ margin-top: 10px;
|
|
|
+ .title {
|
|
|
+ font-weight: bold;
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-left: 5px;
|
|
|
+ padding-left: 5px;
|
|
|
+ color: #333333;
|
|
|
+ border-left: 5px solid rgb(254, 106, 0);
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ padding: 20px;
|
|
|
+ .goods-logo {
|
|
|
+ width: 45px;
|
|
|
+ height: 45px;
|
|
|
+ border: solid 1px #cccccc;
|
|
|
+ }
|
|
|
+ .spec-item {
|
|
|
+ color: #666666;
|
|
|
+ background: #ffffff;
|
|
|
+ border: #666666 solid 1px;
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 2px 8px 2px 8px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ .row {
|
|
|
+ min-height: 40px;
|
|
|
+ verticle-align: middle;
|
|
|
+ display: flex;
|
|
|
+ line-height: 40px;
|
|
|
+ .payed-status {
|
|
|
+ color: #52c41a;
|
|
|
+ background: #f6ffed;
|
|
|
+ border: #b7eb8f solid 1px;
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 2px 8px;
|
|
|
+ font-size: 90%;
|
|
|
+ }
|
|
|
+ .normal-status {
|
|
|
+ color: #666;
|
|
|
+ background: white;
|
|
|
+ border: #999 solid 1px;
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 2px 8px;
|
|
|
+ font-size: 90%;
|
|
|
+ }
|
|
|
+ .unpaid {
|
|
|
+ color: #f67f20;
|
|
|
+ background: rgba(#f67f20, 0.2);
|
|
|
+ border: #f67f20 solid 1px;
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 2px 8px;
|
|
|
+ font-size: 90%;
|
|
|
}
|
|
|
+ }
|
|
|
+ .head {
|
|
|
+ color: rgb(164, 164, 164);
|
|
|
+ min-width: 120px;
|
|
|
+ text-align: right;
|
|
|
+ display: block;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .control-text {
|
|
|
+ display: block;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-left: 120px;
|
|
|
+ margin-top: 5px;
|
|
|
+ line-height: 22px;
|
|
|
+ padding: 5px 10px 5px 10px;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|