修改订单详情->未完成

src/api/yxStoreOrder.js

@@ -31,7 +31,6 @@ export function editT(data) {
   })
 }
 
-
 export function refund(data) {
   return request({
     url: 'api/yxStoreOrder/refund',
@@ -71,3 +70,10 @@ export function express(data) {
   })
 }
 
+export function getOrderDetail(id) {
+  return request({
+    url: 'api/getStoreOrderDetail/' + id,
+    method: 'get'
+  })
+}
+

src/views/shop/order/detail.vue

@@ -1,270 +1,720 @@
 <template>
-  <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="isAdd ? '新增' : '订单详情'" width="700px">
+  <div class="app-container">
-    <el-card>
+    <div>
-      <div slot="header">
+      <el-steps :active="formatStepStatus(order._status)" finish-status="success" align-center>
-        <span>收货信息</span>
+        <el-step title="提交订单" :description="formatTime(order.createTime)"></el-step>
+        <el-step title="支付订单" :description="formatTime(order.payTime)"></el-step>
+        <el-step title="平台发货" :description="formatTime(order.deliveryTime)"></el-step>
+        <el-step title="确认收货" :description="formatTime(order.receiveTime)"></el-step>
+        <el-step title="完成评价" :description="formatTime(order.commentTime)"></el-step>
+      </el-steps>
+    </div>
+    <el-card shadow="never" style="margin-top: 15px">
+      <div class="operate-container">
+        <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
+        <span class="color-danger">当前订单状态：{{order.statusName}}</span>
+        <div class="operate-button-container" v-show="order._status===1">
+          <el-button size="mini" @click="showUpdateReceiverDialog">修改收货人信息</el-button>
+          <el-button size="mini">修改商品信息</el-button>
+          <el-button size="mini" @click="showUpdateMoneyDialog">修改费用信息</el-button>
+          <el-button size="mini" @click="showMessageDialog">发送站内信</el-button>
+          <el-button size="mini" @click="showCloseOrderDialog">关闭订单</el-button>
+          <el-button size="mini" @click="showMarkOrderDialog">备注订单</el-button>
+        </div>
+        <div class="operate-button-container" v-show="order._status===2">
+          <el-button size="mini" @click="showUpdateReceiverDialog">修改收货人信息</el-button>
+          <el-button size="mini" @click="showMessageDialog">发送站内信</el-button>
+          <el-button size="mini">取消订单</el-button>
+          <el-button size="mini" @click="showMarkOrderDialog">备注订单</el-button>
+        </div>
+        <div class="operate-button-container" v-show="order._status===4">
+          <el-button size="mini" @click="showLogisticsDialog">订单跟踪</el-button>
+          <el-button size="mini" @click="showMessageDialog">发送站内信</el-button>
+          <el-button size="mini" @click="showMarkOrderDialog">备注订单</el-button>
+        </div>
+        <div class="operate-button-container" v-show="order._status===6||order._status===7 ">
+          <el-button size="mini" @click="handleDeleteOrder">删除订单</el-button>
+          <el-button size="mini" @click="showMarkOrderDialog">备注订单</el-button>
+        </div>
       </div>
-      <div class="text item">用户昵称:{{ form.nickname }}</div>
+      <div style="margin-top: 20px">
-      <div class="text item">收货人: {{ form.realName }}</div>
+        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
-      <div class="text item">联系电话: {{ form.userPhone }}</div>
+        <span class="font-small">基本信息</span>
-      <div class="text item">收货地址: {{ form.userAddress }}</div>
-    </el-card>
-    <el-card>
-      <div slot="header">
-        <span>订单信息</span>
       </div>
-      <el-row :gutter="24">
+      <div class="table-layout">
-        <el-col :span="12">
+        <el-row>
-          <div class="text item">订单编号: {{ form.orderId }}</div>
+          <el-col :span="4" class="table-cell-title">订单编号</el-col>
-          <div class="text item">商品总数: {{ form.totalNum }}</div>
+          <el-col :span="4" class="table-cell-title">发货单流水号</el-col>
-          <div class="text item">支付邮费: {{ form.totalPostage }}</div>
+          <el-col :span="4" class="table-cell-title">用户账号</el-col>
-          <div class="text item">实际支付: {{ form.payPrice }}</div>
+          <el-col :span="4" class="table-cell-title">支付方式</el-col>
-          <div class="text item">支付方式: {{ form.payTypeName }}</div>
+          <el-col :span="4" class="table-cell-title">订单来源</el-col>
-        </el-col>
+          <el-col :span="4" class="table-cell-title">订单类型</el-col>
-        <el-col :span="12">
+        </el-row>
-          <div class="text item">订单状态: <span v-html="form.statusName"></span></div>
+        <el-row>
-          <div class="text item">商品总价: {{ form.totalPrice }}</div>
+          <el-col :span="4" class="table-cell">{{order.orderId}}</el-col>
-          <div class="text item">优惠券金额: {{ form.couponPrice }}</div>
+          <el-col :span="4" class="table-cell">暂无</el-col>
-          <div class="text item">创建时间: {{ parseTime(form.createTime) }}</div>
+          <el-col :span="4" class="table-cell">{{order.userDTO.nickname}}</el-col>
-          <div class="text item">支付时间: {{ parseTime(form.payTime) }}</div>
+          <el-col :span="4" class="table-cell">{{order.payTypeName }}</el-col>
-        </el-col>
+          <el-col :span="4" class="table-cell">{{order.isChannel | formatSourceType}}</el-col>
-      </el-row>
+          <el-col :span="4" class="table-cell">{{order.shippingType | formatOrderType}}</el-col>
-    </el-card>
+        </el-row>
-    <el-card v-if="form.storeId == 0">
+        <el-row>
-      <div slot="header">
+          <el-col :span="4" class="table-cell-title">配送方式</el-col>
-        <span>物流信息</span>
+          <el-col :span="4" class="table-cell-title">物流单号</el-col>
+          <el-col :span="4" class="table-cell-title">自动确认收货时间</el-col>
+          <el-col :span="4" class="table-cell-title">订单可得积分</el-col>
+          <el-col :span="4" class="table-cell-title">订单可得成长值</el-col>
+          <el-col :span="4" class="table-cell-title">活动信息</el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="4" class="table-cell">{{order.shippingType | formatNull}}</el-col>
+          <el-col :span="4" class="table-cell">{{order.deliverySn | formatNull}}</el-col>
+          <el-col :span="4" class="table-cell">7天</el-col>
+          <el-col :span="4" class="table-cell">{{order.gainIntegral}}</el-col>
+          <el-col :span="4" class="table-cell">{{order.growth}}</el-col>
+          <el-col :span="4" class="table-cell">
+            <el-popover
+              placement="top-start"
+              title="活动信息"
+              width="200"
+              trigger="hover"
+              :content="order.promotionInfo">
+              <span slot="reference">{{order.promotionInfo | formatLongText}}</span>
+            </el-popover>
+          </el-col>
+        </el-row>
       </div>
-      <div class="text item">快递公司:{{ form.deliveryName }}</div>
-      <div class="text item">快递单号:{{ form.deliveryId }}</div>
-
-      <div><el-button :loading="loading" type="primary" @click="express">查看物流</el-button></div>
       <div style="margin-top: 20px">
-      <el-timeline v-if="form.deliveryId && expressInfo.length > 0">
+        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
-        <el-timeline-item
+        <span class="font-small">收货人信息</span>
-          v-for="(obj, index) in expressInfo"
-          :key="index"
-          :timestamp="obj.acceptTime"
-          >
-          {{obj.acceptStation}}
-        </el-timeline-item>
-      </el-timeline>
-      <el-timeline :reverse="false" v-else>
-        <el-timeline-item>
-          暂无物流信息
-        </el-timeline-item>
-      </el-timeline>
       </div>
-    </el-card>
+      <div class="table-layout">
-    <el-card>
+        <el-row>
-      <div slot="header">
+          <el-col :span="6" class="table-cell-title">用户昵称</el-col>
-        <span>备注信息</span>
+          <el-col :span="6" class="table-cell-title">收货人</el-col>
+          <el-col :span="6" class="table-cell-title">手机号码</el-col>
+          <el-col :span="6" class="table-cell-title">收货地址</el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="6" class="table-cell">{{ order.userDTO.nickname}}</el-col>
+          <el-col :span="6" class="table-cell">{{order.realName}}</el-col>
+          <el-col :span="6" class="table-cell">{{order.userPhone}}</el-col>
+          <el-col :span="6" class="table-cell">{{order.userAddress }}</el-col>
+        </el-row>
+      </div>
+      <div style="margin-top: 20px">
+        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
+        <span class="font-small">商品信息</span>
+      </div>
+      <el-table
+        ref="orderItemTable"
+        :data="order.cartInfoList"
+        style="width: 100%;margin-top: 20px" border>
+        <el-table-column label="商品图片" width="240" align="center">
+          <template slot-scope="scope">
+            <img :src="scope.row.cartInfoMap.productInfo.attrInfo.image" style="height: 80px">
+          </template>
+        </el-table-column>
+        <el-table-column label="商品名称" width="240" align="center">
+          <template slot-scope="scope">
+            <p>{{scope.row.cartInfoMap.productInfo.storeName}}</p>
+          </template>
+        </el-table-column>
+        <el-table-column label="价格/货号" width="240" align="center">
+          <template slot-scope="scope">
+            <p>价格：￥{{scope.row.cartInfoMap.productInfo.attrInfo.price}}</p>
+            <p>货号：{{scope.row.cartInfoMap.productInfo.attrInfo.barCode}}</p>
+          </template>
+        </el-table-column>
+        <el-table-column label="属性" width="240" align="center">
+          <template slot-scope="scope">
+            {{scope.row.cartInfoMap.productInfo.attrInfo.sku}}
+          </template>
+        </el-table-column>
+        <el-table-column label="数量" width="240" align="center">
+          <template slot-scope="scope">
+            {{scope.row.cartInfoMap.cartNum}}
+          </template>
+        </el-table-column>
+        <el-table-column label="小计"  align="center">
+          <template slot-scope="scope">
+            ￥{{scope.row.cartInfoMap.truePrice}}
+          </template>
+        </el-table-column>
+      </el-table>
+      <div style="float: right;margin: 20px">
+        合计：<span class="color-danger">￥{{order.payPrice}}</span>
       </div>
-      <div class="text item">{{ form.remark }}</div>
+      <div style="margin-top: 60px">
+        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
+        <span class="font-small">费用信息</span>
+      </div>
+      <div class="table-layout">
+        <el-row>
+          <el-col :span="6" class="table-cell-title">商品合计</el-col>
+          <el-col :span="6" class="table-cell-title">运费</el-col>
+          <el-col :span="6" class="table-cell-title">优惠券</el-col>
+          <el-col :span="6" class="table-cell-title">积分抵扣</el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="6" class="table-cell">￥{{order.totalPrice}}</el-col>
+          <el-col :span="6" class="table-cell">￥{{order.payPostage}}</el-col>
+          <el-col :span="6" class="table-cell">-￥{{order.couponPrice}}</el-col>
+          <el-col :span="6" class="table-cell">-￥{{order.useIntegral}}</el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="6" class="table-cell-title">活动优惠</el-col>
+          <el-col :span="6" class="table-cell-title">折扣金额</el-col>
+          <el-col :span="6" class="table-cell-title">订单总金额</el-col>
+          <el-col :span="6" class="table-cell-title">应付款金额</el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="6" class="table-cell">-￥{{order.promotionAmount}}</el-col>
+          <el-col :span="6" class="table-cell">-￥{{order.deductionPrice}}</el-col>
+          <el-col :span="6" class="table-cell">
+            <span class="color-danger">￥{{order.totalPrice}}</span>
+          </el-col>
+          <el-col :span="6" class="table-cell">
+            <span class="color-danger">￥{{order.payPrice}}</span>
+          </el-col>
+        </el-row>
+      </div>
+      <div style="margin-top: 20px">
+        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
+        <span class="font-small">操作信息</span>
+      </div>
+      <el-table style="margin-top: 20px;width: 100%"
+                ref="orderHistoryTable"
+                :data="order.storeOrderStatusList" border>
+        <el-table-column label="操作者"  width="120" align="center">
+          <template slot-scope="scope">
+           <!-- {{scope.row.operateMan}}-->
+          </template>
+        </el-table-column>
+        <el-table-column label="操作时间"  width="160" align="center">
+          <template slot-scope="scope">
+            {{scope.row.changeTime}}
+          </template>
+        </el-table-column>
+        <el-table-column label="订单状态"  width="120" align="center">
+          <template slot-scope="scope">
+            {{scope.row.changeType | formatStatus}}
+          </template>
+        </el-table-column>
+        <el-table-column label="付款状态"  width="120" align="center">
+          <template slot-scope="scope">
+            {{scope.row.changeType | formatPayStatus}}
+          </template>
+        </el-table-column>
+        <el-table-column label="发货状态"  width="120" align="center">
+          <template slot-scope="scope">
+            {{scope.row.changeType | formatDeliverStatus}}
+          </template>
+        </el-table-column>
+        <el-table-column label="备注" align="center">
+          <template slot-scope="scope">
+            {{scope.row.changeMessage}}
+          </template>
+        </el-table-column>
+      </el-table>
     </el-card>
-  </el-dialog>
+    <el-dialog title="修改收货人信息"
+               :visible.sync="receiverDialogVisible"
+               width="40%">
+      <el-form :model="receiverInfo"
+               ref="receiverInfoForm"
+               label-width="150px">
+        <el-form-item label="收货人姓名：">
+          <el-input v-model="receiverInfo.receiverName" style="width: 200px"></el-input>
+        </el-form-item>
+        <el-form-item label="手机号码：">
+          <el-input v-model="receiverInfo.receiverPhone" style="width: 200px">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="邮政编码：">
+          <el-input v-model="receiverInfo.receiverPostCode" style="width: 200px">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="所在区域：">
+          <v-distpicker :province="receiverInfo.receiverProvince"
+                        :city="receiverInfo.receiverCity"
+                        :area="receiverInfo.receiverRegion"
+                        @selected="onSelectRegion"></v-distpicker>
+        </el-form-item>
+        <el-form-item label="详细地址：">
+          <el-input v-model="receiverInfo.receiverDetailAddress" type="textarea" rows="3">
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+      <el-button @click="receiverDialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="handleUpdateReceiverInfo">确 定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog title="修改费用信息"
+               :visible.sync="moneyDialogVisible"
+               width="40%">
+      <div class="table-layout">
+        <el-row>
+          <el-col :span="6" class="table-cell-title">商品合计</el-col>
+          <el-col :span="6" class="table-cell-title">运费</el-col>
+          <el-col :span="6" class="table-cell-title">优惠券</el-col>
+          <el-col :span="6" class="table-cell-title">积分抵扣</el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="6" class="table-cell">￥{{order.totalAmount}}</el-col>
+          <el-col :span="6" class="table-cell">
+            <el-input v-model.number="moneyInfo.freightAmount" size="mini"><template slot="prepend">￥</template></el-input>
+          </el-col>
+          <el-col :span="6" class="table-cell">-￥{{order.couponAmount}}</el-col>
+          <el-col :span="6" class="table-cell">-￥{{order.integrationAmount}}</el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="6" class="table-cell-title">活动优惠</el-col>
+          <el-col :span="6" class="table-cell-title">折扣金额</el-col>
+          <el-col :span="6" class="table-cell-title">订单总金额</el-col>
+          <el-col :span="6" class="table-cell-title">应付款金额</el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="6" class="table-cell">-￥{{order.promotionAmount}}</el-col>
+          <el-col :span="6" class="table-cell">
+            <el-input v-model.number="moneyInfo.discountAmount" size="mini"><template slot="prepend">-￥</template></el-input>
+          </el-col>
+          <el-col :span="6" class="table-cell">
+            <span class="color-danger">￥{{order.totalAmount+moneyInfo.freightAmount}}</span>
+          </el-col>
+          <el-col :span="6" class="table-cell">
+            <span class="color-danger">￥{{order.payAmount+moneyInfo.freightAmount-moneyInfo.discountAmount}}</span>
+          </el-col>
+        </el-row>
+      </div>
+      <span slot="footer" class="dialog-footer">
+      <el-button @click="moneyDialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="handleUpdateMoneyInfo">确 定</el-button>
+      </span>
+    </el-dialog>
+<!--    <el-dialog title="发送站内信"-->
+<!--               :visible.sync="messageDialogVisible"-->
+<!--               width="40%">-->
+<!--      <el-form :model="message"-->
+<!--               ref="receiverInfoForm"-->
+<!--               label-width="150px">-->
+<!--        <el-form-item label="标题：">-->
+<!--          <el-input v-model="message.title" style="width: 200px"></el-input>-->
+<!--        </el-form-item>-->
+<!--        <el-form-item label="内容：">-->
+<!--          <el-input v-model="message.content" type="textarea" rows="3">-->
+<!--          </el-input>-->
+<!--        </el-form-item>-->
+<!--      </el-form>-->
+<!--      <span slot="footer" class="dialog-footer">-->
+<!--        <el-button @click="messageDialogVisible = false">取 消</el-button>-->
+<!--        <el-button type="primary" @click="handleSendMessage">确 定</el-button>-->
+<!--      </span>-->
+<!--    </el-dialog>-->
+<!--    <el-dialog title="关闭订单"-->
+<!--               :visible.sync="closeDialogVisible"-->
+<!--               width="40%">-->
+<!--      <el-form :model="closeInfo"-->
+<!--               label-width="150px">-->
+<!--        <el-form-item label="操作备注：">-->
+<!--          <el-input v-model="closeInfo.note" type="textarea" rows="3">-->
+<!--          </el-input>-->
+<!--        </el-form-item>-->
+<!--      </el-form>-->
+<!--      <span slot="footer" class="dialog-footer">-->
+<!--        <el-button @click="closeDialogVisible = false">取 消</el-button>-->
+<!--        <el-button type="primary" @click="handleCloseOrder">确 定</el-button>-->
+<!--      </span>-->
+<!--    </el-dialog>-->
+    <el-dialog title="备注订单"
+               :visible.sync="markOrderDialogVisible"
+               width="40%">
+      <el-form :model="markInfo"
+               label-width="150px">
+        <el-form-item label="操作备注：">
+          <el-input v-model="markInfo.note" type="textarea" rows="3">
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="markOrderDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="handleMarkOrder">确 定</el-button>
+      </span>
+    </el-dialog>
+    <!--订单跟踪信息-->
+<!--    <logistics-dialog v-model="logisticsDialogVisible"></logistics-dialog>-->
+  </div>
 </template>
-
 <script>
-import { add, edit, express } from '@/api/yxStoreOrder'
+import {getOrderDetail} from '@/api/yxStoreOrder';
-import { parseTime } from '@/utils/index'
+import {formatTimeTwo} from '@/utils/index';
-export default {
-  props: {
-    isAdd: {
-      type: Boolean,
-      required: true
-    }
-  },
-  data() {
-    return {
-      loading: false, dialog: false, expressInfo: [],
-      form: {
-        id: '',
-        orderId: '',
-        uid: '',
-        realName: '',
-        userPhone: '',
-        userAddress: '',
-        cartId: '',
-        freightPrice: '',
-        totalNum: '',
-        totalPrice: '',
-        totalPostage: '',
-        payPrice: '',
-        payPostage: '',
-        deductionPrice: '',
-        couponId: '',
-        couponPrice: '',
-        paid: '',
-        payTime: '',
-        payType: '',
-        addTime: '',
-        status: '',
-        refundStatus: '',
-        refundReasonWapImg: '',
-        refundReasonWapExplain: '',
-        refundReasonTime: '',
-        refundReasonWap: '',
-        refundReason: '',
-        refundPrice: '',
-        deliveryName: '',
-        deliverySn: '',
-        deliveryType: '',
-        deliveryId: '',
-        gainIntegral: '',
-        useIntegral: '',
-        backIntegral: '',
-        mark: '',
-        isDel: '',
-        unique: '',
-        remark: '',
-        merId: '',
-        isMerCheck: '',
-        combinationId: '',
-        pinkId: '',
-        cost: '',
-        seckillId: '',
-        bargainId: '',
-        verifyCode: '',
-        storeId: '',
-        shippingType: '',
-        isChannel: '',
-        isRemind: '',
-        isSystemDel: ''
-      },
-      rules: {
-        unique: [
-          { required: true, message: 'please enter', trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  methods: {
-    parseTime,
-    cancel() {
-      this.dialog = false
-    },
-    express() {
-      let params ={
-        "orderCode": this.form.id,
-        "shipperCode": this.form.deliverySn,
-        "logisticCode": this.form.deliveryId
-      }
 
-      express(params).then(res=>{
+  const defaultReceiverInfo = {
+    orderId:null,
+    receiverName:null,
+    receiverPhone:null,
+    receiverPostCode:null,
+    receiverDetailAddress:null,
+    receiverProvince:null,
+    receiverCity:null,
+    receiverRegion:null,
+    status:null
+  };
+  export default {
+    data() {
+      return {
+        id: null,
+        order: {
 
-        console.log(res)
+        },
-        this.expressInfo = res.Traces
+        user:{
-
-      }).catch(err => {
-        this.loading = false
-        console.log(err.response.data.message)
-      })
 
+        },
+        receiverDialogVisible:false,
+        receiverInfo:Object.assign({},defaultReceiverInfo),
+        moneyDialogVisible:false,
+        moneyInfo:{orderId:null, freightAmount:0, discountAmount:0,status:null},
+        messageDialogVisible:false,
+        message: {title:null, content:null},
+        closeDialogVisible:false,
+        closeInfo:{note:null,id:null},
+        markOrderDialogVisible:false,
+        markInfo:{note:null},
+        logisticsDialogVisible:false
+      }
     },
-    doSubmit() {
+    filters: {
-      this.loading = true
+      formatNull(value) {
-      if (this.isAdd) {
+        if(value===undefined||value===null||value===''){
-        this.doAdd()
+          return '暂无';
-      } else this.doEdit()
+        }else{
+          return value;
+        }
+      },
+      formatLongText(value) {
+        if(value===undefined||value===null||value===''){
+          return '暂无';
+        }else if(value.length>8){
+          return value.substr(0, 8) + '...';
+        }else{
+          return value;
+        }
+      },
+      formatPayType(value) {
+        if (value === 1) {
+          return '支付宝';
+        } else if (value === 2) {
+          return '微信';
+        } else {
+          return '未支付';
+        }
+      },
+      formatSourceType(value) {
+        if (value === 1) {
+          return '小程序';
+        } else {
+          return '公众号/H5';
+        }
+      },
+      formatOrderType(value) {
+        if (value === 1) {
+          return '秒杀订单';
+        } else {
+          return '正常订单';
+        }
+      },
+      formatAddress(order) {
+        let str = order.receiverProvince;
+        if (order.receiverCity != null) {
+          str += "  " + order.receiverCity;
+        }
+        str += "  " + order.receiverRegion;
+        str += "  " + order.receiverDetailAddress;
+        return str;
+      },
+      formatStatus(value) {
+        if (value === 1) {
+          return '待发货';
+        } else if (value === 2) {
+          return '已发货';
+        } else if (value === 3) {
+          return '已完成';
+        } else if (value === 4) {
+          return '已关闭';
+        } else if (value === 5) {
+          return '无效订单';
+        } else {
+          return '待付款';
+        }
+      },
+      formatPayStatus(value) {
+        if (value === 0) {
+          return '未支付';
+        } else if(value===4){
+          return '已退款';
+        }else{
+          return '已支付';
+        }
+      },
+      formatDeliverStatus(value) {
+        if (value === 0||value === 1) {
+          return '未发货';
+        } else {
+          return '已发货';
+        }
+      },
+      formatProductAttr(value){
+        if(value==null){
+          return '';
+        }else{
+          let attr = JSON.parse(value);
+          let result='';
+          for(let i=0;i<attr.length;i++){
+            result+=attr[i].key;
+            result+=":";
+            result+=attr[i].value;
+            result+=";";
+          }
+          return result;
+        }
+      }
     },
-    doAdd() {
+    mounted () {
-      add(this.form).then(res => {
+      this.getInfo();
-        this.resetForm()
-        this.$notify({
-          title: '添加成功',
-          type: 'success',
-          duration: 2500
-        })
-        this.loading = false
-        this.$parent.init()
-      }).catch(err => {
-        this.loading = false
-        console.log(err.response.data.message)
-      })
     },
-    doEdit() {
+    methods: {
-      edit(this.form).then(res => {
+      getInfo(){
-        this.resetForm()
+        let that = this;
-        this.$notify({
+        let id = that.$route.params.id || 0;
-          title: '修改成功',
+        getOrderDetail(id).then(response => {
-          type: 'success',
+          this.order = response;
-          duration: 2500
+        });
+      },
+      onSelectRegion(data){
+        this.receiverInfo.receiverProvince=data.province.value;
+        this.receiverInfo.receiverCity=data.city.value;
+        this.receiverInfo.receiverRegion=data.area.value;
+      },
+      formatTime(time) {
+        if (time == null || time === '') {
+          return '';
+        }
+        let date = new Date(time);
+        return formatTimeTwo(date, 'yyyy-MM-dd hh:mm:ss')
+      },
+      formatStepStatus(value) {
+        //todo  1-未付款 2-未发货 3-退款中 4-待收货 5-待评价 6-已完成 7-已退款
+        if (value === 2) {
+          //待发货
+          return 2;
+        } else if (value === 4) {
+          //已发货
+          return 3;
+        } else if (value === 6) {
+          //已完成
+          return 4;
+        }else {
+          //待付款、已关闭、无限订单
+          return 1;
+        }
+      },
+      showUpdateReceiverDialog(){
+        this.receiverDialogVisible=true;
+        this.receiverInfo={
+          orderId:this.order.id,
+          receiverName:this.order.receiverName,
+          receiverPhone:this.order.receiverPhone,
+          receiverPostCode:this.order.receiverPostCode,
+          receiverDetailAddress:this.order.receiverDetailAddress,
+          receiverProvince:this.order.receiverProvince,
+          receiverCity:this.order.receiverCity,
+          receiverRegion:this.order.receiverRegion,
+          status:this.order._status
+        }
+      },
+      handleUpdateReceiverInfo(){
+        this.$confirm('是否要修改收货信息?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          // updateReceiverInfo(this.receiverInfo).then(response=>{
+          //   this.receiverDialogVisible=false;
+          //   this.$message({
+          //     type: 'success',
+          //     message: '修改成功!'
+          //   });
+          //   getOrderDetail(this.id).then(response => {
+          //     this.order = response.data;
+          //   });
+          // });
+        });
+      },
+      showUpdateMoneyDialog(){
+        this.moneyDialogVisible=true;
+        this.moneyInfo.orderId=this.order.id;
+        this.moneyInfo.freightAmount=this.order.freightAmount;
+        this.moneyInfo.discountAmount=this.order.discountAmount;
+        this.moneyInfo.status=this.order._status;
+      },
+      handleUpdateMoneyInfo(){
+        this.$confirm('是否要修改费用信息?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          // updateMoneyInfo(this.moneyInfo).then(response=>{
+          //   this.moneyDialogVisible=false;
+          //   this.$message({
+          //     type: 'success',
+          //     message: '修改成功!'
+          //   });
+          //   getOrderDetail(this.id).then(response => {
+          //     this.order = response.data;
+          //   });
+          // });
+        });
+      },
+      showMessageDialog(){
+        this.messageDialogVisible=true;
+        this.message.title=null;
+        this.message.content=null;
+      },
+      handleSendMessage(){
+        this.$confirm('是否要发送站内信?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.messageDialogVisible=false;
+          this.$message({
+            type: 'success',
+            message: '发送成功!'
+          });
+        });
+      },
+      showCloseOrderDialog(){
+        this.closeDialogVisible=true;
+        this.closeInfo.note=null;
+        this.closeInfo.id=this.id;
+      },
+      // handleCloseOrder(){
+      //   this.$confirm('是否要关闭?', '提示', {
+      //     confirmButtonText: '确定',
+      //     cancelButtonText: '取消',
+      //     type: 'warning'
+      //   }).then(() => {
+      //     let params = new URLSearchParams();
+      //     params.append("ids",[this.closeInfo.id]);
+      //     params.append("note",this.closeInfo.note);
+      //     closeOrder(params).then(response=>{
+      //       this.closeDialogVisible=false;
+      //       this.$message({
+      //         type: 'success',
+      //         message: '订单关闭成功!'
+      //       });
+      //       getOrderDetail(this.id).then(response => {
+      //         this.order = response.data;
+      //       });
+      //     });
+      //   });
+      // },
+      showMarkOrderDialog(){
+        this.markOrderDialogVisible=true;
+        this.markInfo.id=this.id;
+        // this.closeOrder.note=null;
+      },
+      handleMarkOrder(){
+        this.$confirm('是否要备注订单?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          let params = new URLSearchParams();
+          params.append("id",this.markInfo.id);
+          params.append("note",this.markInfo.note);
+          params.append("status",this.order._status);
+          // updateOrderNote(params).then(response=>{
+          //   this.markOrderDialogVisible=false;
+          //   this.$message({
+          //     type: 'success',
+          //     message: '订单备注成功!'
+          //   });
+          //   getOrderDetail(this.id).then(response => {
+          //     this.order = response.data;
+          //   });
+          // });
+        });
+      },
+      handleDeleteOrder(){
+        this.$confirm('是否要进行该删除操作?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          let params = new URLSearchParams();
+          params.append("ids",[this.id]);
+          // deleteOrder(params).then(response=>{
+          //   this.$message({
+          //     message: '删除成功！',
+          //     type: 'success',
+          //     duration: 1000
+          //   });
+          //   this.$router.back();
+          // });
         })
-        this.loading = false
+      },
-        this.$parent.init()
+      // showLogisticsDialog(){
-      }).catch(err => {
+      //   this.logisticsDialogVisible=true;
-        this.loading = false
+      // }
-        console.log(err.response.data.message)
-      })
-    },
-    resetForm() {
-      this.dialog = false
-      this.$refs['form'].resetFields()
-      this.form = {
-        id: '',
-        orderId: '',
-        uid: '',
-        realName: '',
-        userPhone: '',
-        userAddress: '',
-        cartId: '',
-        freightPrice: '',
-        totalNum: '',
-        totalPrice: '',
-        totalPostage: '',
-        payPrice: '',
-        payPostage: '',
-        deductionPrice: '',
-        couponId: '',
-        couponPrice: '',
-        paid: '',
-        payTime: '',
-        payType: '',
-        addTime: '',
-        status: '',
-        refundStatus: '',
-        refundReasonWapImg: '',
-        refundReasonWapExplain: '',
-        refundReasonTime: '',
-        refundReasonWap: '',
-        refundReason: '',
-        refundPrice: '',
-        deliveryName: '',
-        deliveryType: '',
-        deliveryId: '',
-        gainIntegral: '',
-        useIntegral: '',
-        backIntegral: '',
-        mark: '',
-        isDel: '',
-        unique: '',
-        remark: '',
-        merId: '',
-        isMerCheck: '',
-        combinationId: '',
-        pinkId: '',
-        cost: '',
-        seckillId: '',
-        bargainId: '',
-        verifyCode: '',
-        storeId: '',
-        shippingType: '',
-        isChannel: '',
-        isRemind: '',
-        isSystemDel: ''
-      }
     }
   }
-}
 </script>
-
 <style scoped>
-  .text {
+.detail-container {
-    font-size: 12px;
+  width: 80%;
-  }
+  padding: 20px 20px 20px 20px;
+  margin: 20px auto;
+}
 
-  .item {
+.operate-container {
-    padding: 6px 0;
+  background: #F2F6FC;
-  }
+  height: 80px;
+  margin: -20px -20px 0;
+  line-height: 80px;
+}
 
+.operate-button-container {
+  float: right;
+  margin-right: 20px
+}
+
+.table-layout {
+  margin-top: 20px;
+  border-left: 1px solid #DCDFE6;
+  border-top: 1px solid #DCDFE6;
+}
+
+.table-cell {
+  height: 60px;
+  line-height: 40px;
+  border-right: 1px solid #DCDFE6;
+  border-bottom: 1px solid #DCDFE6;
+  padding: 10px;
+  font-size: 14px;
+  color: #606266;
+  text-align: center;
+  overflow: hidden;
+}
+
+.table-cell-title {
+  border-right: 1px solid #DCDFE6;
+  border-bottom: 1px solid #DCDFE6;
+  padding: 10px;
+  background: #F2F6FC;
+  text-align: center;
+  font-size: 14px;
+  color: #303133;
+}
 </style>

src/views/shop/order/detail1.vue

@@ -0,0 +1,270 @@
+<template>
+  <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="isAdd ? '新增' : '订单详情'" width="700px">
+    <el-card>
+      <div slot="header">
+        <span>收货信息</span>
+      </div>
+      <div class="text item">用户昵称:{{ form.nickname }}</div>
+      <div class="text item">收货人: {{ form.realName }}</div>
+      <div class="text item">联系电话: {{ form.userPhone }}</div>
+      <div class="text item">收货地址: {{ form.userAddress }}</div>
+    </el-card>
+    <el-card>
+      <div slot="header">
+        <span>订单信息</span>
+      </div>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <div class="text item">订单编号: {{ form.orderId }}</div>
+          <div class="text item">商品总数: {{ form.totalNum }}</div>
+          <div class="text item">支付邮费: {{ form.totalPostage }}</div>
+          <div class="text item">实际支付: {{ form.payPrice }}</div>
+          <div class="text item">支付方式: {{ form.payTypeName }}</div>
+        </el-col>
+        <el-col :span="12">
+          <div class="text item">订单状态: <span v-html="form.statusName"></span></div>
+          <div class="text item">商品总价: {{ form.totalPrice }}</div>
+          <div class="text item">优惠券金额: {{ form.couponPrice }}</div>
+          <div class="text item">创建时间: {{ parseTime(form.createTime) }}</div>
+          <div class="text item">支付时间: {{ parseTime(form.payTime) }}</div>
+        </el-col>
+      </el-row>
+    </el-card>
+    <el-card v-if="form.storeId == 0">
+      <div slot="header">
+        <span>物流信息</span>
+      </div>
+      <div class="text item">快递公司:{{ form.deliveryName }}</div>
+      <div class="text item">快递单号:{{ form.deliveryId }}</div>
+
+      <div><el-button :loading="loading" type="primary" @click="express">查看物流</el-button></div>
+      <div style="margin-top: 20px">
+      <el-timeline v-if="form.deliveryId && expressInfo.length > 0">
+        <el-timeline-item
+          v-for="(obj, index) in expressInfo"
+          :key="index"
+          :timestamp="obj.acceptTime"
+          >
+          {{obj.acceptStation}}
+        </el-timeline-item>
+      </el-timeline>
+      <el-timeline :reverse="false" v-else>
+        <el-timeline-item>
+          暂无物流信息
+        </el-timeline-item>
+      </el-timeline>
+      </div>
+    </el-card>
+    <el-card>
+      <div slot="header">
+        <span>备注信息</span>
+      </div>
+      <div class="text item">{{ form.remark }}</div>
+    </el-card>
+  </el-dialog>
+</template>
+
+<script>
+import { add, edit, express } from '@/api/yxStoreOrder'
+import { parseTime } from '@/utils/index'
+export default {
+  props: {
+    isAdd: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      loading: false, dialog: false, expressInfo: [],
+      form: {
+        id: '',
+        orderId: '',
+        uid: '',
+        realName: '',
+        userPhone: '',
+        userAddress: '',
+        cartId: '',
+        freightPrice: '',
+        totalNum: '',
+        totalPrice: '',
+        totalPostage: '',
+        payPrice: '',
+        payPostage: '',
+        deductionPrice: '',
+        couponId: '',
+        couponPrice: '',
+        paid: '',
+        payTime: '',
+        payType: '',
+        addTime: '',
+        status: '',
+        refundStatus: '',
+        refundReasonWapImg: '',
+        refundReasonWapExplain: '',
+        refundReasonTime: '',
+        refundReasonWap: '',
+        refundReason: '',
+        refundPrice: '',
+        deliveryName: '',
+        deliverySn: '',
+        deliveryType: '',
+        deliveryId: '',
+        gainIntegral: '',
+        useIntegral: '',
+        backIntegral: '',
+        mark: '',
+        isDel: '',
+        unique: '',
+        remark: '',
+        merId: '',
+        isMerCheck: '',
+        combinationId: '',
+        pinkId: '',
+        cost: '',
+        seckillId: '',
+        bargainId: '',
+        verifyCode: '',
+        storeId: '',
+        shippingType: '',
+        isChannel: '',
+        isRemind: '',
+        isSystemDel: ''
+      },
+      rules: {
+        unique: [
+          { required: true, message: 'please enter', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    parseTime,
+    cancel() {
+      this.dialog = false
+    },
+    express() {
+      let params ={
+        "orderCode": this.form.id,
+        "shipperCode": this.form.deliverySn,
+        "logisticCode": this.form.deliveryId
+      }
+
+      express(params).then(res=>{
+
+        console.log(res)
+        this.expressInfo = res.Traces
+
+      }).catch(err => {
+        this.loading = false
+        console.log(err.response.data.message)
+      })
+
+    },
+    doSubmit() {
+      this.loading = true
+      if (this.isAdd) {
+        this.doAdd()
+      } else this.doEdit()
+    },
+    doAdd() {
+      add(this.form).then(res => {
+        this.resetForm()
+        this.$notify({
+          title: '添加成功',
+          type: 'success',
+          duration: 2500
+        })
+        this.loading = false
+        this.$parent.init()
+      }).catch(err => {
+        this.loading = false
+        console.log(err.response.data.message)
+      })
+    },
+    doEdit() {
+      edit(this.form).then(res => {
+        this.resetForm()
+        this.$notify({
+          title: '修改成功',
+          type: 'success',
+          duration: 2500
+        })
+        this.loading = false
+        this.$parent.init()
+      }).catch(err => {
+        this.loading = false
+        console.log(err.response.data.message)
+      })
+    },
+    resetForm() {
+      this.dialog = false
+      this.$refs['form'].resetFields()
+      this.form = {
+        id: '',
+        orderId: '',
+        uid: '',
+        realName: '',
+        userPhone: '',
+        userAddress: '',
+        cartId: '',
+        freightPrice: '',
+        totalNum: '',
+        totalPrice: '',
+        totalPostage: '',
+        payPrice: '',
+        payPostage: '',
+        deductionPrice: '',
+        couponId: '',
+        couponPrice: '',
+        paid: '',
+        payTime: '',
+        payType: '',
+        addTime: '',
+        status: '',
+        refundStatus: '',
+        refundReasonWapImg: '',
+        refundReasonWapExplain: '',
+        refundReasonTime: '',
+        refundReasonWap: '',
+        refundReason: '',
+        refundPrice: '',
+        deliveryName: '',
+        deliveryType: '',
+        deliveryId: '',
+        gainIntegral: '',
+        useIntegral: '',
+        backIntegral: '',
+        mark: '',
+        isDel: '',
+        unique: '',
+        remark: '',
+        merId: '',
+        isMerCheck: '',
+        combinationId: '',
+        pinkId: '',
+        cost: '',
+        seckillId: '',
+        bargainId: '',
+        verifyCode: '',
+        storeId: '',
+        shippingType: '',
+        isChannel: '',
+        isRemind: '',
+        isSystemDel: ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .text {
+    font-size: 12px;
+  }
+
+  .item {
+    padding: 6px 0;
+  }
+
+</style>

src/views/shop/order/index.vue

@@ -135,7 +135,7 @@
               v-permission="['admin','YXSTOREORDER_ALL','YXSTOREORDER_EDIT']"
               size="mini"
               type="primary"
-              @click="detail(scope.row)"
+              @click="toDetailURL(scope.row.id)"
             >
               订单详情</el-button>
             <el-dropdown size="mini" split-button type="primary" trigger="click">
@@ -240,7 +240,7 @@
   import initData from '@/mixins/crud'
   import { del } from '@/api/yxStoreOrder'
   import eForm from './form'
-  import eDetail from './detail'
+  import eDetail from './detail1'
   import eRefund from './refund'
   import editOrder from './edit'
   import eRemark from './remark'
@@ -300,6 +300,9 @@
       })
     },
     methods: {
+      toDetailURL(id){
+        this.$router.push({ path: '/order/detail/'+id })
+      },
       formatTime,
       checkPermission,
       handleOrder(tab, event) {

src/views/shop/order/indext.vue

@@ -184,7 +184,7 @@ import initData from '@/mixins/crud'
 import { del } from '@/api/yxStoreOrder'
 import { getAll } from '@/api/yxSystemStore'
 import eForm from './formC'
-import eDetail from './detail'
+import eDetail from './detail1'
 import eRefund from './refund'
 import editOrder from './edit'
 import eRemark from './remark'