|
|
@@ -0,0 +1,337 @@
|
|
|
+<!--suppress ALL -->
|
|
|
+<template height="800px">
|
|
|
+ <div>
|
|
|
+ <el-steps :active=this.active align-center>
|
|
|
+ <el-step title="已下单">
|
|
|
+ <template slot="description">
|
|
|
+ {{this.orderData.createTime}}
|
|
|
+ </template>
|
|
|
+ </el-step>
|
|
|
+ <el-step title="已付款">
|
|
|
+ <template slot="description">
|
|
|
+ {{this.orderData.payTime}}
|
|
|
+ </template>
|
|
|
+ </el-step>
|
|
|
+ <el-step title="已发货">
|
|
|
+ <template slot="description">
|
|
|
+ {{this.orderData.deliveryTime}}
|
|
|
+ </template>
|
|
|
+ </el-step>
|
|
|
+ <el-step title="已完成">
|
|
|
+ <template slot="description">
|
|
|
+ {{this.orderData.receivingTime}}
|
|
|
+ </template>
|
|
|
+ </el-step>
|
|
|
+ </el-steps>
|
|
|
+ <div class="icard">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ 订单概况
|
|
|
+ </div>
|
|
|
+ <div class="text item">
|
|
|
+ <el-form ref="form" :model="orderData" label-width="160px">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="订单编号：">
|
|
|
+ {{orderData.orderCode}}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="下单时间：">
|
|
|
+ {{orderData.createTime}}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="订单状态：">
|
|
|
+ {{getStatus(orderData.status)}}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="是否使用预存款支付：">
|
|
|
+ {{orderData.predepositPay==0?'否':'是'}}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="满优惠金额：">
|
|
|
+ {{getfullPrice()}}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="优惠卷金额：">
|
|
|
+ {{orderData.couponPrice.toFixed(2)}}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="红包金额：">
|
|
|
+ {{orderData.redEnvelopePrice.toFixed(2)}}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="订单原始金额：">
|
|
|
+ {{orderData.originalPrice.toFixed(2)}}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="订单总优惠金额：">
|
|
|
+ {{orderData.concessionalRate.toFixed(2)}}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="订单修改金额：">
|
|
|
+ {{orderData.modifyPrice.toFixed(2)}}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="订单实际交易金额：">
|
|
|
+ {{orderData.price.toFixed(2)}}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card class="wuliu-card" v-show=isNotvirtualOrder>
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ 物流信息
|
|
|
+ </div>
|
|
|
+ <div class="text item">
|
|
|
+ <el-form ref="form" :model="orderData" label-width="160px">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="物流公司：">
|
|
|
+ {{ getLogisticsCompany(orderData)}}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="物流单号：">
|
|
|
+ {{orderData.waybillCode}}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="配送方式：">
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="运费：">
|
|
|
+ {{orderData.freightPrice.toFixed(2)}}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="收货地址：">
|
|
|
+ {{orderData.orderAttr.receiptAddress}}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="详细地址：">
|
|
|
+ {{orderData.orderAttr.receiptDetailAddress}}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="收货人：">
|
|
|
+ {{orderData.orderAttr.receiptName}}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="联系电话：">
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="手机：">
|
|
|
+ {{orderData.orderAttr.receiptMobile}}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="邮编：">
|
|
|
+ {{orderData.orderAttr.receiptZipCode}}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="客户留言：">
|
|
|
+ {{orderData.orderAttr.remark}}
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ <el-table :data="orderData.orderSkus" ref="table" :height="autoHeight" border stripe v-loading="loading"
|
|
|
+ style="margin-top: 10px">
|
|
|
+ <el-table-column type="index" label="排序" width="80"></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="skuImage"
|
|
|
+ label="商品图片"
|
|
|
+ align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <img :src="scope.row.skuImage"style="width: 60px;height:60px;display: inline-block">
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="skuName"
|
|
|
+ label="商品名称"
|
|
|
+ align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="skuPrice"
|
|
|
+ label="销售价"
|
|
|
+ align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{scope.row.skuPrice.toFixed(2)}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="num"
|
|
|
+ label="数量"
|
|
|
+ align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="skuSpecs"
|
|
|
+ label="商品规格"
|
|
|
+ align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="price"
|
|
|
+ label="商品总价"
|
|
|
+ align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{scope.row.price.toFixed(2)}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ created() {
|
|
|
+ this.id = this.$route.query.id;
|
|
|
+ if (this.id) {
|
|
|
+ this.getOrder(this.id);
|
|
|
+ } else {
|
|
|
+ this.$router.push({path: '/home/order'})
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ active: 0,
|
|
|
+ orderData: {},
|
|
|
+ id: '',
|
|
|
+ isNotvirtualOrder: true,
|
|
|
+ status: [
|
|
|
+ {
|
|
|
+ value: '1',
|
|
|
+ label: '未付款'
|
|
|
+ }, {
|
|
|
+ value: '2',
|
|
|
+ label: '已付款未发货'
|
|
|
+ }, {
|
|
|
+ value: '3',
|
|
|
+ label: '已发货'
|
|
|
+ }, {
|
|
|
+ value: '4',
|
|
|
+ label: '已完成'
|
|
|
+ }, {
|
|
|
+ value: '5',
|
|
|
+ label: '关闭交易'
|
|
|
+ }, {
|
|
|
+ value: '6',
|
|
|
+ label: '关闭交易'
|
|
|
+ }, {
|
|
|
+ value: '7',
|
|
|
+ label: '关闭交易'
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getLogisticsCompany(orderData){
|
|
|
+ if ( orderData.logisticsTemplate){
|
|
|
+ return orderData.logisticsTemplate.logisticsCompany.name;
|
|
|
+ }
|
|
|
+ return "";
|
|
|
+
|
|
|
+ },
|
|
|
+ getOrder(orderId) {
|
|
|
+ this.$get("/business/Order/get/" + orderId).then(
|
|
|
+ response => {
|
|
|
+ if (response.status == 200) {
|
|
|
+ if (response.data.success){
|
|
|
+ this.loading = false;
|
|
|
+ this.orderData = response.data.data;
|
|
|
+
|
|
|
+ if (this.orderData.orderType == '7') {
|
|
|
+ this.isNotvirtualOrder = true;
|
|
|
+ }
|
|
|
+ // 优惠价格没有 则设置为0
|
|
|
+ if (this.orderData.concessionalRate == null) {
|
|
|
+ this.orderData.concessionalRate = 0;
|
|
|
+ }
|
|
|
+ // 红包价格没有则设置为0
|
|
|
+ if (this.orderData.redEnvelopePrice == null) {
|
|
|
+ this.orderData.redEnvelopePrice = 0;
|
|
|
+ }
|
|
|
+ this.active = parseInt(this.orderData.status);
|
|
|
+
|
|
|
+ }else {
|
|
|
+ console.log()
|
|
|
+ this.$message.error(response.data.error);
|
|
|
+ this.$router.push({path: '/home/order'})
|
|
|
+ }
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.$message.success("服务器连接异常");
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ response => {
|
|
|
+ this.$message.success("服务器连接异常");
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ getQueryString: function (name) {
|
|
|
+ var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|丨)", "i");
|
|
|
+ var r = window.location.search.substr(1).match(reg);
|
|
|
+ if (r != null) return unescape(r[2]);
|
|
|
+ return null;
|
|
|
+ },
|
|
|
+ getStatus(val) {
|
|
|
+ return this.status.find(i => i.value === val).label;
|
|
|
+ },
|
|
|
+ getfullPrice() {
|
|
|
+
|
|
|
+ return (this.orderData.concessionalRate - this.orderData.pointPrice - this.orderData.couponPrice - this.orderData.redEnvelopePrice).toFixed(2)
|
|
|
+ },
|
|
|
+ back: function () {
|
|
|
+ this.丨router.push({path: "/home/carorder"});
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+ .text {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ margin-bottom: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .clearfix:before,
|
|
|
+ .clearfix:after {
|
|
|
+ display: table;
|
|
|
+ content: "";
|
|
|
+ }
|
|
|
+
|
|
|
+ .clearfix:after {
|
|
|
+ clear: both
|
|
|
+ }
|
|
|
+
|
|
|
+ .icard {
|
|
|
+ overflow-y: auto;
|
|
|
+ height: 600px;
|
|
|
+ }
|
|
|
+</style>
|
