|
|
@@ -0,0 +1,382 @@
|
|
|
+<template>
|
|
|
+ <zj-page-container>
|
|
|
+ <zj-page-fill>
|
|
|
+ <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title + '-列表', essential: true }]">
|
|
|
+ <template slot-scope="{activeKey, data}">
|
|
|
+ <div :style="{height:activeKey == 'list'?'100%':'0px'}" style="width:100%; height:100%; overflow: hidden;">
|
|
|
+ <div style="width:100%; height:100%;box-sizing: border-box; padding:10px;">
|
|
|
+ <zj-page-container>
|
|
|
+ <div class="screen-container">
|
|
|
+ <el-form ref="screenForm" :model="screenForm" label-width="70px" size="small" label-position="left">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6">
|
|
|
+ <el-form-item label="订单号" prop="orderId">
|
|
|
+ <el-input v-model="screenForm.orderId" placeholder="请输入订单号"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6">
|
|
|
+ <el-form-item label="商品名称" prop="goodsName">
|
|
|
+ <el-input v-model="screenForm.goodsName" placeholder="请输入商品名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6">
|
|
|
+ <el-form-item label="会员昵称" prop="memberName">
|
|
|
+ <el-input v-model="screenForm.memberName" placeholder="请输入会员昵称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6">
|
|
|
+ <el-form-item label="手机号" prop="phone">
|
|
|
+ <el-input v-model="screenForm.phone" placeholder="请输入手机号"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6">
|
|
|
+ <el-form-item label="状态" prop="evaluateStatus">
|
|
|
+ <el-select v-model="screenForm.evaluateStatus" placeholder="全部">
|
|
|
+ <el-option label="全部" value=""></el-option>
|
|
|
+ <el-option label="未评价订单" :value="0"></el-option>
|
|
|
+ <el-option label="已评价订单" :value="3"></el-option>
|
|
|
+ <el-option label="差评订单" :value="1"></el-option>
|
|
|
+ <el-option label="好评订单" :value="2"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6">
|
|
|
+ <el-form-item label="创建时间" prop="createDate" style="height: 33px;">
|
|
|
+ <el-date-picker v-model="screenForm.createDate" type="datetimerange"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6">
|
|
|
+ <el-form-item label="支付时间" prop="payDate" style="height: 33px;">
|
|
|
+ <el-date-picker v-model="screenForm.payDate" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6" class="tr">
|
|
|
+ <el-form-item label="">
|
|
|
+ <el-button size="small" type="primary" @click="submitScreenForm">搜索</el-button>
|
|
|
+ <el-button size="small" @click="resetScreenForm">清空</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="tabs-container order-tabs-container clearfix" style="margin: 10px 0!important;">
|
|
|
+ <div class="fl">
|
|
|
+ <el-tabs v-model="tabCurrent" type="card" @tab-click="changeTabs" class="fl" size="small" style="margin-right: 10px">
|
|
|
+ <el-tab-pane label="全部" name="ALL"></el-tab-pane>
|
|
|
+ <el-tab-pane label="待付款" name="NOPAY"></el-tab-pane>
|
|
|
+ <el-tab-pane label="待确认" name="DQR"></el-tab-pane>
|
|
|
+ <el-tab-pane label="待发货" name="DFH"></el-tab-pane>
|
|
|
+ <el-tab-pane label="已发货" name="YFH"></el-tab-pane>
|
|
|
+ <el-tab-pane label="已完成" name="OVER"></el-tab-pane>
|
|
|
+ <el-tab-pane label="退款/取消" name="CLOSE"></el-tab-pane>
|
|
|
+ <el-tab-pane label="已超时" name="TIMEOUT"></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ <el-button class="fl" type="primary" size="small">新增</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="fr">
|
|
|
+ <el-button size="small" type="primary">导出</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <zj-page-fill>
|
|
|
+ <div class="order-main-container">
|
|
|
+ <!-- -->
|
|
|
+ <div class="table-top">
|
|
|
+ <el-row style="width:100%">
|
|
|
+ <el-col :span="3">
|
|
|
+ <span class="item product">商品信息</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3" style="text-align: right"><span class="item">单价(元)/数量</span></el-col>
|
|
|
+ <el-col :span="4" style="text-align: center"><span class="item">买家信息</span></el-col>
|
|
|
+ <el-col :span="4" style="text-align: center"><span class="item">收货信息</span></el-col>
|
|
|
+ <el-col :span="4" style="text-align: center"><span class="item">实付金额</span></el-col>
|
|
|
+ <el-col :span="3" style="text-align: center"><span class="item">订单状态</span></el-col>
|
|
|
+ <el-col :span="3" style="text-align: center"><span class="item">操作</span></el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <!-- -->
|
|
|
+ <div class="order-item" v-for="order in dataList" :key="order.orderId">
|
|
|
+ <div class="order-top">
|
|
|
+ <span><b>订单号</b>：{{ order.orderId }}</span>
|
|
|
+ <span><b>下单时间</b>：{{ order.createTime }}</span>
|
|
|
+ <el-tag>商城销售</el-tag>
|
|
|
+ <div class="fr"></div>
|
|
|
+ </div>
|
|
|
+ <div class="order-content">
|
|
|
+ <el-row style="width:100%;">
|
|
|
+ <el-col :span="6" style="height: 100%;">
|
|
|
+ <div class="col-item-pro">
|
|
|
+ <div class="pro-item" v-for="orderItem in order.orderDetails" :key="orderItem.orderDetailId">
|
|
|
+ <div class="left">
|
|
|
+ <div class="image">
|
|
|
+ <img :src="orderItem.imgUrl" style="height:80px;width: 80px;">
|
|
|
+ </div>
|
|
|
+ <div class="main">
|
|
|
+ <span><el-tag type="danger" effect="plain" size="mini" style="margin-right: 4px"
|
|
|
+ v-if="orderItem.promotionFullPieceId">满件打折</el-tag>{{ orderItem.goodsName }}</span>
|
|
|
+ <span class="spec"
|
|
|
+ v-if="orderItem.goodsSpecName === '默认' && orderItem.goodsSpecValue === '默认'">默认</span>
|
|
|
+ <span class="spec" v-else>{{ orderItem.goodsSpecName }}-{{ orderItem.goodsSpecValue
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <span>￥{{ orderItem.price }}</span>
|
|
|
+ <span>x{{ orderItem.num }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4" style="height: 100%;">
|
|
|
+ <div class="col-item">
|
|
|
+ <div>{{ order.userName }}</div>
|
|
|
+ <div>{{ order.phone }}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4" style="height: 100%;">
|
|
|
+ <div class="col-item">
|
|
|
+ <div>{{ order.receUserName }}/{{ order.recePhone }}</div>
|
|
|
+ <div class="ellipsis-2">{{ order.province + order.city + order.area + order.street + order.receAddress + order.houseNo }}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4" style="height: 100%;">
|
|
|
+ <div class="col-item">
|
|
|
+ <div class="totalprice">￥{{ order.payAmount }}</div>
|
|
|
+ <div style="font-size: 12px" v-if="order.discountAmount">(<span>-{{ order.discountAmount
|
|
|
+ }}</span><span v-if="order.promotionDiscountRate">/{{ order.promotionDiscountRate * 10
|
|
|
+ }}折</span>)</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3" style="height: 100%;">
|
|
|
+ <div class="col-item">
|
|
|
+ <div style="display: flex; align-items: center;">
|
|
|
+ <img src="@/assets/order/CLOSE.png" style="width: 16px; flex-shrink: 0;"
|
|
|
+ v-if="order.orderStatus == 'CLOSE'">
|
|
|
+ <img src="@/assets/order/DFH.png" style="width: 16px; flex-shrink: 0;"
|
|
|
+ v-if="order.orderStatus == 'DFH'">
|
|
|
+ <img src="@/assets/order/NOPAY.png" style="width: 16px; flex-shrink: 0;"
|
|
|
+ v-if="order.orderStatus == 'NOPAY'">
|
|
|
+ <img src="@/assets/order/OVER.png" style="width: 16px; flex-shrink: 0;"
|
|
|
+ v-if="order.orderStatus == 'OVER'">
|
|
|
+ <img src="@/assets/order/TIMEOUT.png" style="width: 16px; flex-shrink: 0;"
|
|
|
+ v-if="order.orderStatus == 'TIMEOUT'">
|
|
|
+ <img src="@/assets/order/YFH.png" style="width: 16px; flex-shrink: 0;"
|
|
|
+ v-if="order.orderStatus == 'YFH'">
|
|
|
+ <span style="margin-left: 4px">{{ order.orderStatus | ORDER_CURRENT_STATUS_FILTER }}</span>
|
|
|
+ </div>
|
|
|
+ <div>({{ order.toWorkOrder ? '已派单' : '未派单' }})</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3" style="height: 100%;">
|
|
|
+ <div class="col-item">
|
|
|
+ <div class="operate">
|
|
|
+ <el-popconfirm title="确定确认订单吗？" @confirm="">
|
|
|
+ <el-button slot="reference" type="text" size="small">确认订单</el-button>
|
|
|
+ </el-popconfirm>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="no-data" v-if="dataList.length <= 0">暂无订单</div>
|
|
|
+ </div>
|
|
|
+ </zj-page-fill>
|
|
|
+ <div class="pagination clearfix" style="margin-top:10px;">
|
|
|
+ <div class="fr">
|
|
|
+ <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
|
|
+ :current-page="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="10"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper" :total="listTotal">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </zj-page-container>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 新增 -->
|
|
|
+ <div v-if="activeKey == 'remark'" style="width:100%;height:100%;">
|
|
|
+ <zj-page-container>
|
|
|
+ <zj-page-fill>
|
|
|
+ <div style="box-sizing: border-box; padding:10px;">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </zj-page-fill>
|
|
|
+ </zj-page-container>
|
|
|
+ </div>
|
|
|
+ <!-- 确认订单 -->
|
|
|
+ <div v-if="activeKey == 'remark'" style="width:100%;height:100%;">
|
|
|
+ <zj-page-container>
|
|
|
+ <zj-page-fill>
|
|
|
+ <div style="box-sizing: border-box; padding:10px;">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </zj-page-fill>
|
|
|
+ </zj-page-container>
|
|
|
+ </div>
|
|
|
+ <!-- 确认收款 -->
|
|
|
+ <div v-if="activeKey == 'materialDetail'" style="width:100%;height:100%;">
|
|
|
+ <zj-page-container>
|
|
|
+ <zj-page-fill>
|
|
|
+ <div style="box-sizing: border-box; padding:10px;">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </zj-page-fill>
|
|
|
+ </zj-page-container>
|
|
|
+ </div>
|
|
|
+ <!-- 取消订单 -->
|
|
|
+ <div v-if="activeKey == 'deliverGoods'" style="width:100%;height:100%;">
|
|
|
+ <zj-page-container>
|
|
|
+ <zj-page-fill>
|
|
|
+ <div style="box-sizing: border-box; padding:10px;">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </zj-page-fill>
|
|
|
+ </zj-page-container>
|
|
|
+ </div>
|
|
|
+ <!-- 查看物流 -->
|
|
|
+ <div v-if="activeKey == 'editAddress1'" style="width:100%;height:100%;">
|
|
|
+ <zj-page-container>
|
|
|
+ <zj-page-fill>
|
|
|
+ <div style="box-sizing: border-box; padding:10px;">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </zj-page-fill>
|
|
|
+ </zj-page-container>
|
|
|
+ </div>
|
|
|
+ <!-- 查看详情 -->
|
|
|
+ <div v-if="activeKey == 'editAddress2'" style="width:100%;height:100%;">
|
|
|
+ <zj-page-container>
|
|
|
+ <zj-page-fill>
|
|
|
+ <div style="box-sizing: border-box; padding:10px;">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </zj-page-fill>
|
|
|
+ </zj-page-container>
|
|
|
+ </div>
|
|
|
+ <!-- 退货 -->
|
|
|
+ <div v-if="activeKey == 'editAddress3'" style="width:100%;height:100%;">
|
|
|
+ <zj-page-container>
|
|
|
+ <zj-page-fill>
|
|
|
+ <div style="box-sizing: border-box; padding:10px;">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </zj-page-fill>
|
|
|
+ </zj-page-container>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </zj-tab-page>
|
|
|
+ </zj-page-fill>
|
|
|
+ </zj-page-container>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getList } from "@/api/order";
|
|
|
+import '@/styles/order-list.scss'
|
|
|
+export default {
|
|
|
+ components: {},
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ screenForm: { // 筛选表单数据
|
|
|
+ orderId: '', // 订单号
|
|
|
+ goodsName: '', // 商品名称
|
|
|
+ memberName: '', // 会员昵称
|
|
|
+ phone: '', // 手机号
|
|
|
+ websitId: '', // 网点名称
|
|
|
+ orderStatus: '', // 状态
|
|
|
+ createDate: '', // 创建时间
|
|
|
+ payDate: '', // 支付时间
|
|
|
+ exchangeCode: '', // 兑换码
|
|
|
+ evaluateStatus: '', // 评价状态
|
|
|
+ sendStatus: '', // 派单异常
|
|
|
+ workerOrderNo: '', // 信息编号
|
|
|
+ },
|
|
|
+ screen_status: [ // 筛选字段 - 状态
|
|
|
+ { label: '待付款', value: 'NOPAY' },
|
|
|
+ { label: '待发货', value: 'DFH' },
|
|
|
+ { label: '已发货', value: 'YFH' },
|
|
|
+ { label: '已完成', value: 'OVER' },
|
|
|
+ { label: '已退款', value: 'CLOSE' }
|
|
|
+ ],
|
|
|
+ tabCurrent: 'ALL',
|
|
|
+ currentPage: 1, // 当前页码
|
|
|
+ pageSize: 10, // 每页数量
|
|
|
+ listTotal: 0, // 列表总数
|
|
|
+ dataList: [],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeTabs(tab, event) {
|
|
|
+ this.screenForm.orderStatus = this.tabCurrent === 'ALL' ? '' : tab.$options.propsData.name
|
|
|
+ this.currentPage = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ // 获取数据列表
|
|
|
+ getList() {
|
|
|
+ let params = {
|
|
|
+ orderId: this.screenForm.orderId, // 订单号
|
|
|
+ productName: this.screenForm.goodsName, // 商品名称
|
|
|
+ userName: this.screenForm.memberName, // 会员昵称
|
|
|
+ phone: this.screenForm.phone, // 手机号
|
|
|
+ websitId: this.screenForm.websitId,
|
|
|
+ exchangeCode: this.screenForm.exchangeCode,
|
|
|
+ orderStatus: this.screenForm.orderStatus, // 状态
|
|
|
+ startCreateTime: this.screenForm.createDate[0] ? this.screenForm.createDate[0] : null, // 创建时间
|
|
|
+ endCreateTime: this.screenForm.createDate[1] ? this.screenForm.createDate[1] : null, // 创建时间
|
|
|
+ startPayTime: this.screenForm.payDate[0] ? this.screenForm.payDate[0] : null, // 支付时间
|
|
|
+ endPayTime: this.screenForm.payDate[1] ? this.screenForm.payDate[1] : null, // 支付时间
|
|
|
+ isNegative: this.screenForm.evaluateStatus, // 评价状态
|
|
|
+ abnormalDispatch: this.screenForm.sendStatus, // 派单异常
|
|
|
+ workerOrderNo: this.screenForm.workerOrderNo, // 信息编号
|
|
|
+ pageNum: this.currentPage,
|
|
|
+ pageSize: this.pageSize
|
|
|
+ };
|
|
|
+ getList(params).then(res => {
|
|
|
+ res.data.records.forEach(item => {
|
|
|
+ item.selected = false;
|
|
|
+ });
|
|
|
+ this.dataList = res.data.records;
|
|
|
+ this.listTotal = res.data.total;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ openForm(type, order) {
|
|
|
+
|
|
|
+ },
|
|
|
+ // 更改每页数量
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.pageSize = val;
|
|
|
+ this.currentPage = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 更改当前页
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.currentPage = val;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ // 提交筛选表单
|
|
|
+ submitScreenForm() {
|
|
|
+ this.currentPage = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ // 重置筛选表单
|
|
|
+ resetScreenForm() {
|
|
|
+ this.$refs.screenForm.resetFields();
|
|
|
+ this.currentPage = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
linwenxin