wash_server_v2/admin-ui/src/views/order/retailOrder/index.vue

<template>
    <div class="app-container">
        <el-tabs v-model="goodsType" @tab-click="onChangeGoodsType">
            <template v-for="(dict, i) in dict.type.goods_type">
                <el-tab-pane :key="i" :label="dict.label" :name="dict.value" v-if="dict.label !== '材料商品'"></el-tab-pane>
            </template>
        </el-tabs>
        <el-form :model="queryParams" ref="queryForm" @submit.native.prevent :inline="true" v-show="showSearch" label-width="100px">
            <el-form-item prop="orderNo">
                <el-input v-model="queryParams.orderNo" placeholder="请输入订单编号" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item prop="orderStatus">
                <el-select v-model="queryParams.orderStatus" placeholder="请选择支付状态" clearable>
                    <el-option v-for="dict in dict.type.order_goods_status" :key="dict.code" :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item prop="realName">
                <el-input v-model="queryParams.realName" placeholder="请输入客户姓名" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item prop="phoneNumber">
                <el-input v-model="queryParams.phoneNumber" placeholder="请输入手机号" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <br />
            <el-form-item>
                <el-date-picker clearable v-model="queryCreateTime" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="下单时间" end-placeholder="结束日期" @change="getCreateTime"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>


        <el-row :gutter="10" class="mb8">
            <!--            <el-col :span="1.5">-->
            <!--                <el-button type="warning" plain icon="el-icon-download" @click="handleExport" v-hasPermi="['order:goods:export']" v-if="userInfoVO.userType == '00'">导出 </el-button>-->
            <!--            </el-col>-->
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <Page uri="/mapi/order/goods/list" :request-params="queryParams" ref="pagination">
            <el-table-column label="订单编号" align="center" prop="orderNo" width="200" />
          <el-table-column label="客户姓名" align="center" width="130">
            <template slot-scope="scope">
              <div class="customer-name">
                <i class="el-icon-user"></i>
                {{ scope.row.realName || '--' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="手机号" align="center" width="130">
            <template slot-scope="scope">
              <div class="customer-phone" >
                <i class="el-icon-mobile-phone"></i>
                {{ scope.row.phoneNumber || '--' }}
              </div>
            </template>
          </el-table-column>
            <el-table-column label="订单总价" align="center" prop="totalPrice" width="120" />
            <el-table-column label="抵扣金额" align="center" prop="deductAmount" width="120">
                <template slot-scope="scope">
                    {{ scope.row.deductAmount ? scope.row.deductAmount : '--' }}
                </template>
            </el-table-column>
            <el-table-column label="支付金额" align="center" prop="payAmount" width="120" />
            <el-table-column label="支付方式" align="center" prop="payType" width="120">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.recharge_pay_type" :value="scope.row.payType" />
                </template>
            </el-table-column>
            <el-table-column label="订单状态" align="center" prop="orderStatus" width="120">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.order_goods_status" :value="scope.row.orderStatus" />
                </template>
            </el-table-column>
          <el-table-column label="退单状态" align="center" prop="orderStatus" width="120">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.goods_order_refund_status" :value="scope.row.refundStatus" />
            </template>
          </el-table-column>
            <el-table-column label="下单时间" align="center" prop="createTime" width="180" />
            <el-table-column label="支付时间" align="center" prop="payTime" width="180">
                <template slot-scope="scope">
                    {{ scope.row.payTime ? scope.row.payTime : '--' }}
                </template>
            </el-table-column>
            <!--      <el-table-column label="发货时间" align="center" prop="sendTime" width="200px"/>-->
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" min-width="200">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-chat-dot-square" @click="orderDetail(scope.row)">订单详情</el-button>
                    <el-button type="text" icon="el-icon-check" @click="rePay(scope.row)" v-if="scope.row.orderStatus == '0' && userInfoVO.userType == '02'">重新支付 </el-button>
                    <el-button type="text" icon="el-icon-close" @click="cancelOrder(scope.row)" v-if="scope.row.orderStatus == '0'">取消订单 </el-button>
                    <el-button type="text" icon="el-icon-check" @click="outOrderGoods(scope.row)" v-if="scope.row.orderStatus == '2' && userInfoVO.userType == '00' &&  scope.row.refundStatus == '0'">出货 </el-button>
<!--                    <el-button type="text" icon="el-icon-truck" @click="deliveryInfo(scope.row)" v-if="scope.row.deliveryNo"> 物流信息 </el-button>-->
                    <el-button type="text" icon="el-icon-chat-dot-square" @click="refundOrder(scope.row)" v-if="userInfoVO.userType == '00' && scope.row.refundStatus == '0' && !scope.row.deliveryNo"> 撤单 </el-button>
                    <el-button type="text" icon="el-icon-printer" v-if="userInfoVO.userType != '00'" @click="btn_lodop(scope.row)">打印 </el-button>
                </template>
            </el-table-column>
        </Page>

        <!--    详情-->
        <el-dialog :title="detailTitle" :visible.sync="openDetail" size="80%" append-to-body>
            <el-card class="customer-info-card">
                <el-descriptions title="客户信息" v-show="detailView" :column="3" border :label-style="{ 'text-align': 'center' }" :contentStyle="{ 'text-align': 'center' }">
                    <el-descriptions-item label="客户姓名">{{ detailView.realName }}</el-descriptions-item>
                    <el-descriptions-item label="客户手机号">{{ detailView.phoneNumber }}</el-descriptions-item>
                    <el-descriptions-item label="订单状态">
                        <dict-tag :options="dict.type.order_goods_status" :value="detailView.orderStatus" />
                    </el-descriptions-item>
                    <el-descriptions-item label="收货联系人">{{ detailView.contactName ? detailView.contactName : '暂无信息' }} </el-descriptions-item>
                    <el-descriptions-item label="收货人手机号">{{ detailView.contactPhone ? detailView.contactPhone : '暂无信息' }} </el-descriptions-item>
                    <el-descriptions-item label="下单时间">{{ detailView.createTime ? detailView.createTime : '暂无信息' }} </el-descriptions-item>
                    <el-descriptions-item label="支付时间">{{ detailView.payTime ? detailView.payTime : '暂无信息' }} </el-descriptions-item>
                    <el-descriptions-item label="发货时间">{{ detailView.sendTime ? detailView.sendTime : '暂无信息' }} </el-descriptions-item>
                    <el-descriptions-item label="确认收货时间">{{ detailView.finishTime ? detailView.finishTime : '暂无信息' }} </el-descriptions-item>
                    <el-descriptions-item label="订单总价">{{ detailView.totalPrice ? detailView.totalPrice : '暂无信息' }} </el-descriptions-item>
                    <el-descriptions-item label="物流公司">{{ detailView.deliveryCompany ? detailView.deliveryCompany : '暂无信息' }} </el-descriptions-item>
                    <el-descriptions-item label="物流单号">{{ detailView.deliveryNo ? detailView.deliveryNo : '暂无信息' }} </el-descriptions-item>
                    <el-descriptions-item label="收货地址" span="3">{{ detailView.province }}{{ detailView.city }}{{ detailView.area }}{{ detailView.address }}{{ detailView.addressDetail }} </el-descriptions-item>
                    <el-descriptions-item label="备注信息" span="3">{{ detailView.deliveryNo ? detailView.deliveryNo : '暂无信息' }} </el-descriptions-item>
                  <el-descriptions-item label="退款备注" span="3" v-if="detailView.refundReason">{{ detailView.refundReason ? detailView.refundReason : '暂无信息' }} </el-descriptions-item>
                </el-descriptions>
            </el-card>
            <div class="product-list-container">
                <h3 class="product-list-title">商品信息</h3>
                <el-table v-loading="detailLoading" :data="detailView.orderGoodsSkuList" fit highlight-current-row border stripe>
                    <el-table-column :label="goodsType == 0 ? '商品名称' : '材料名称'" align="center" prop="goodsName" width="250px" />
                    <el-table-column :label="goodsType == 0 ? '商品规格' : '材料规格'" align="center" width="250px">
                        <template slot-scope="scope">
                            <div style="text-align: center">
                                {{ scope.row.skuName.replace(' ', '/') }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="数量" align="center" prop="buyNum" />
                    <el-table-column label="价格（元）" align="center" prop="salePrice" />
                    <el-table-column label="总和（元）" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.buyNum * scope.row.salePrice }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-row :gutter="10" class="order-total">
                <el-col :span="21">
                    <el-form label-width="130px" style="text-align: right" :inline="true" size="small">
                        <el-form-item label="总金额（元）:">
                            {{ costTotalPrice }}
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-dialog>

        <!--    重新支付页面 -->
        <el-dialog title="订单支付" :visible.sync="openRePayPage" size="60%" append-to-body>
            <el-descriptions title="核对信息" v-if="appUserInfo" :column="3" border :contentStyle="{ 'text-align': 'center' }" style="margin-left: 15px; margin-right: 15px">
                <el-descriptions-item label="总件数（件）" :labelStyle="{ width: '16%' }" :label-style="{ 'text-align': 'center' }">{{ calculateTotalCount }} </el-descriptions-item>
                <el-descriptions-item label="抵扣金额（元）" :labelStyle="{ width: '16%' }" :label-style="{ 'text-align': 'center' }">
                    {{ payFrom.deductAmount ? '￥' + payFrom.deductAmount : '￥' + '0' }}
                </el-descriptions-item>
                <el-descriptions-item label="卡余额（元）" :labelStyle="{ width: '16%' }" :label-style="{ 'text-align': 'center' }"> ￥{{ appUserInfo ? appUserInfo.rechargeBalance + appUserInfo.giveBalance : '0.00' }} </el-descriptions-item>

                <el-descriptions-item label="原价（元）">{{ costTotalPrice }}</el-descriptions-item>
                <el-descriptions-item label="折后金额（元）">{{ calculatePayMoney }}</el-descriptions-item>
                <!--        <el-descriptions-item label="现有积分">{{appUserInfo.pointBalance}}</el-descriptions-item>-->
            </el-descriptions>
            <template>
                <el-form ref="payFrom" :model="payFrom" label-width="80px" style="margin-top: 20px">
                    <el-row :gutter="10">
                        <el-card style="margin-left: 15px; margin-right: 15px">
                            <el-col :span="24">
                                <el-descriptions title="优惠信息"></el-descriptions>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="抵扣现金券（元）" label-width="130px" prop="deductAmount">
                                    <el-input-number :min="1" :max="9999999" :controls="false" style="width: 200px" v-model.number="payFrom.deductAmount"></el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-card>
                    </el-row>
                    <el-row :gutter="10">
                        <el-card style="margin-top: 15px; margin-left: 15px; margin-right: 15px">
                            <el-col :span="24">
                                <el-form-item label="支付方式" prop="payType">
                                    <el-radio-group v-model="payFrom.payType" style="width: 400px" @input="changePayType">
                                        <el-radio-button label="3">余额</el-radio-button>
                                        <el-radio-button label="2">现金</el-radio-button>
                                        <el-radio-button label="0">微信</el-radio-button>
                                        <el-radio-button label="1">支付宝</el-radio-button>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <div v-if="payFrom.payType">
                                <el-col :span="8">
                                    <el-descriptions :column="2" style="width: 400px" v-if="payFrom.payType == '3' && appUserInfo">
                                        <el-descriptions-item label="客户姓名">{{ appUserInfo ? appUserInfo.realName : '- -' }} </el-descriptions-item>
                                        <el-descriptions-item label="余额（元）"> ￥{{ appUserInfo ? appUserInfo.rechargeBalance + appUserInfo.giveBalance : '0.00' }} </el-descriptions-item>
                                    </el-descriptions>
                                </el-col>
                                <el-col :span="12" v-if="payFrom.payType == '2'">
                                    <el-form-item label="实收现金（元）" label-width="120px" prop="thisPayMoney">
                                        <el-input-number :min="1" :max="9999999" :controls="false" v-model="payFrom.thisPayMoney"></el-input-number>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12" v-if="payFrom.payType == '2'">
                                    <el-form-item label="找零:" label-width="120px">
                                        <span>{{ payFrom.thisPayMoney && payFrom.thisPayMoney - payMoney >= 0 ? payFrom.thisPayMoney - payMoney : '0' }}</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8" v-if="payFrom.payType == '0'">
                                    <el-form-item label="微信付款条形码" label-width="120px" prop="wxBarcode">
                                        <el-input style="width: 200px" v-model="payFrom.wxBarcode"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8" v-if="payFrom.payType == '1'">
                                    <el-form-item label="支付宝付款条形码" label-width="130px" prop="aliPayBarcode">
                                        <el-input style="width: 200px" v-model="payFrom.aliPayBarcode"></el-input>
                                    </el-form-item>
                                </el-col>
                            </div>
                        </el-card>
                    </el-row>
                    <el-row :gutter="10">
                        <div>
                            <el-button type="primary" @click="submitSettlement" style="margin-left: 3%; margin-top: 20px">结算 </el-button>
                        </div>
                    </el-row>
                </el-form>
            </template>
        </el-dialog>

        <!--    撤单页面-->
        <el-dialog :visible.sync="openRefundPage" width="400px" append-to-body>
            <el-form ref="refundVO" :model="refundVO">
                <el-form-item label="撤单原因" label-width="80px" prop="refundReason">
                    <el-input v-model="refundVO.refundReason" type="textarea" placeholder="请输入撤单原因" maxlength="500" :rows="5" show-word-limit></el-input>
                </el-form-item>
            </el-form>
            <el-row :gutter="10">
                <div>
                    <el-button type="primary" @click="submitRefund" style="margin-left: 3%; margin-top: 20px">提交</el-button>
                </div>
            </el-row>
        </el-dialog>

        <!-- 订单出货对话框 -->
        <el-dialog title="订单出货信息" :visible.sync="openDeliveryPage" size="40%" append-to-body :before-close="deliveryClose">
            <el-row :gutter="15">
                <el-form ref="deliveryVo" :model="deliveryVo" :rules="deliveryRules" label-width="120px">
                    <el-col :span="24">
                        <el-form-item label="快递公司" prop="deliveryCompany">
                            <el-radio-group v-model="deliveryVo.deliveryCompany" @input="changeDeliveryId">
                                <el-radio-button v-for="dict in deliveryData" :label="dict.name" :key="dict.name"></el-radio-button>
                            </el-radio-group>
                        </el-form-item>

<!--                        <el-form-item label="预期揽件时间" prop="expectTime">-->
<!--                            <el-date-picker-->
<!--                                type="datetime"-->
<!--                                placeholder="选择预期揽件时间"-->
<!--                                v-model="deliveryVo.expectTime"-->
<!--                                style="width: 100%"-->
<!--                                value-format="yyyy-MM-dd HH:mm"-->
<!--                                format="yyyy-MM-dd HH:mm"-->
<!--                                :picker-options="{-->
<!--                                    disabledDate: (time) => {-->
<!--                                        return time.getTime() < Date.now() - 3600 * 1000 * 24-->
<!--                                    },-->
<!--                                    selectableRange: startTimeRange-->
<!--                                }"-->
<!--                                :default-time="deliTime"-->
<!--                                class="date_picker"-->
<!--                                :editable="false"-->
<!--                            ></el-date-picker>-->
<!--                        </el-form-item>-->

                        <!-- <el-form-item label="包裹数量" prop="count">
  <el-input v-model="deliveryVo.count" type="number" placeholder="请输入包裹数量" clearable></el-input>
</el-form-item> -->

<!--                        <el-form-item label="货物高度" prop="spaceHeight">-->
<!--                            <el-input v-model="deliveryVo.spaceHeight" placeholder="请输入货物高度" clearable>-->
<!--                                <template slot="append">厘米(cm)</template>-->
<!--                            </el-input>-->
<!--                        </el-form-item>-->

<!--                        <el-form-item label="货物长度" prop="spaceLength">-->
<!--                            <el-input v-model="deliveryVo.spaceLength" placeholder="请输入货物长度" clearable>-->
<!--                                <template slot="append">厘米(cm)</template>-->
<!--                            </el-input>-->
<!--                        </el-form-item>-->

<!--                        <el-form-item label="货物宽度" prop="spaceWidth">-->
<!--                            <el-input v-model="deliveryVo.spaceWidth" placeholder="请输入货物宽度" clearable>-->
<!--                                <template slot="append">厘米(cm)</template>-->
<!--                            </el-input>-->
<!--                        </el-form-item>-->

<!--                        <el-form-item label="货物总重量" prop="weight">-->
<!--                            <el-input v-model="deliveryVo.weight" placeholder="请输入货物总重量" clearable>-->
<!--                                <template slot="append">千克 (kg)</template>-->
<!--                            </el-input>-->
<!--                        </el-form-item>-->
                      <el-form-item label="快递单号" prop="deliveryNo">
                        <el-input v-model="deliveryVo.deliveryNo" type="input" placeholder="请输入快递单号" maxlength="100" clearable></el-input>
                      </el-form-item>
<!--                        <el-form-item label="备注信息" prop="customRemark">-->
<!--                            <el-input v-model="deliveryVo.customRemark" rows="5" type="textarea" placeholder="请输入备注信息，比如易碎物品……" maxlength="500" show-word-limit clearable></el-input>-->
<!--                        </el-form-item>-->
                    </el-col>
                </el-form>
            </el-row>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitDelivery('deliveryVo')" style="margin-left: 5%">提交</el-button>
                <el-button @click="cancelDelivery">取 消</el-button>
            </div>
        </el-dialog>

        <!-- 快递信息对话框 -->
        <el-dialog title="快递信息" :visible.sync="openDeliveryinfo" size="40%" append-to-body :before-close="deliveryinfoClose">
            <div class="deliveryView">
                <div class="info">
                    <span>快递公司：</span>
                    <span>{{ deliveryView.name }}</span>
                </div>
                <div class="info">
                    <span>收货地址：</span>
                    <span>{{ deliveryView.address }}</span>
                </div>
            </div>

            <el-timeline v-if="deliveryView.pathItemList.length">
                <el-timeline-item v-for="(item, index) in deliveryView.pathItemList" :key="index" :timestamp="item.actionTime">
                    {{ item.actionMsg }}
                </el-timeline-item>
            </el-timeline>

            <el-empty description="暂无快递信息" v-else></el-empty>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" style="margin-left: 5%" @click="openDeliveryinfo = false">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { cancelOrder, getGoods, listGoods, outOrderGoods, refundOrderGoods, rePayOrder, getdeliveryAll, getDeliveryPath } from '@/api/order/goods'
import { findUserByPhoneNumber, getUser } from '@/api/app/user'
import { getLodop } from '@/utils/lodopUtils'
import { printGoods } from '@/api/order/clothItem'

export default {
    name: 'goodsRetailOrder',
    dicts: ['order_goods_status', 'goods_order_refund_status','delivery_company', 'recharge_pay_type'],
    data() {
        var validateNumberInput = (rule, value, callback) => {
            if (!value || isNaN(value)) {
                callback(new Error('只能输入数字，不能为空'))
            } else {
                callback()
            }
        }
        return {
            userInfoVO: null,
            //
            orderLoading: true,
            // 遮罩层
            loading: false,
            detailLoading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 弹出层标题
            title: '',
            detailTitle: '',
            // 是否显示弹出层
            open: false,
            openDetail: false,
            openRePayPage: false,
            openDeliveryPage: false,
            openRefundPage: false,
            // 查询参数
            queryParams: {
                realName: null,
                phoneNumber: null,
                orderNo: null,
                orderStatus: null
            },
            // 表单参数
            payFrom: {},
            // 表单校验
            rules: {},
            goodsType: null,
            // 商品订单表格数据
            GoodsList: [],
            // 可选商品集合
            goodsList: null,
            // 已选商品集合
            addGoodsList: [],
            // 自定义一个计算数量的临时对象集合
            purchaseCountVOList: [],
            // 总金额
            totalPrice: 0,
            // 总件数
            totalCount: 0,
            // 详情数据
            detailView: {},
            // detailList:[],

            // 详情总金额
            costTotalPrice: null,
            appUserInfo: null,
            goodsOrderInfo: null,
            payMoney: null,
            deliveryVo: {
                // bizId: '',
                // count: 1,
                customRemark: '',
                deliveryCompany: '',
                deliveryId: '',
                deliveryNo: ''
                // expectTime: '',
                // orderId: null,
                // serviceName: '',
                // serviceType: null,
                // spaceHeight: null,
                // spaceLength: null,
                // spaceWidth: null,
                // weight: null
            },
            deliveryRules: {
                deliveryName: [{ required: true, message: '请选择物流公司', trigger: 'change' }],
                // serviceType: [{ required: true, message: '请选择服务类型', trigger: 'change' }],
                // expectTime: [{ required: true, message: '选择预期揽件时间', trigger: 'blur' }],
                // spaceHeight: [
                //     { required: true, message: '请输入货物高度', trigger: 'blur' },
                //     { validator: validateNumberInput, trigger: 'blur' }
                // ],
                // spaceLength: [
                //     { required: true, message: '请输入货物长度', trigger: 'blur' },
                //     { validator: validateNumberInput, trigger: 'blur' }
                // ],
                // spaceWidth: [
                //     { required: true, message: '请输入货物宽度', trigger: 'blur' },
                //     { validator: validateNumberInput, trigger: 'blur' }
                // ],
                // weight: [
                //     { required: true, message: '请输入货物总重量', trigger: 'blur' },
                //     { validator: validateNumberInput, trigger: 'blur' }
                // ],
                // customRemark: [{ required: true, message: '请输入备注信息，比如易碎物品……', trigger: 'blur' }]
            },
            refundVO: {
                orderId: null,
                refundReason: null
            },
            deliveryData: [], //快递公司数据
            startTimeRange: null,
            deliTime: null,

            openDeliveryinfo: false,
            deliveryView: {
                name: '',
                pathItemList: []
            },

            LODOP: null,
            number: 1,
            pointerList: [],
            queryCreateTime: null,
            queryPayTime: null
        }
    },
    created() {
        this.handleUser()
        this.goodsType = this.getUrlParam('goodsType')
        this.getList()
        this.getdeliveryAll()
    },
    mounted() {
        this.number = 1
        const printerTime = setInterval(() => {
            this.LODOP = getLodop()
            this.number++
            if (this.number == 25) {
                clearInterval(printerTime)
            }
            if (this.LODOP) {
                clearInterval(printerTime)
            }
        }, 200)

        this.pointerList = JSON.parse(this.$cache.local.get('printerSeting'))
    },
    watch: {
        'deliveryVo.expectTime': {
            deep: true,
            handler(newValue, oldValue) {
                if (newValue) {
                    let nowDate = this.sendTimeDate(new Date().getTime() + 3600000) // 一小时之后的时间(我是因业务要求,这里可以随意调整时间)
                    let dt = nowDate.split(' ')
                    let st = ''
                    if (newValue.split(' ')[0] == dt[0]) {
                        // 是今天,选择 的时间开始为此刻的时分秒
                        st = dt[1]
                    } else {
                        // 明天及以后从0时开始
                        st = '00:00:00'
                    }
                    this.startTimeRange = st + ' - 23:59:59'
                    //例如：如果今天此刻时间为10:41:40 则选择时间范围为： 11:41:40 - 23:59:59
                    //否则为：00:00:00- 23:59:59
                }
            }
        }
    },
    computed: {
        calculateTotalCount() {
            this.totalCount = 0
            // this.detailList.forEach(vo =>{
            this.detailView.forEach((vo) => {
                this.totalCount = this.totalCount + vo.buyNum
            })
            return this.totalCount
        },
        calculatePayMoney() {
            this.payMoney = this.payFrom.deductAmount ? this.costTotalPrice - this.payFrom.deductAmount : this.costTotalPrice
            return this.payMoney
        }
    },
    methods: {
        onChangeGoodsType() {
            this.queryParams.goodsType = this.goodsType
            this.handleQuery()
        },
        handleUser() {
            this.userInfoVO = this.getUserInfo()
        },
        getCreateTime() {
            if (this.queryCreateTime != null) {
                this.queryParams.createTimeFrom = this.queryCreateTime[0]
                this.queryParams.createTimeTo = this.queryCreateTime[1]
            }
        },
        getPayTime() {
            if (this.queryPayTime != null) {
                this.queryParams.beginPayTime = this.queryPayTime[0]
                this.queryParams.endPayTime = this.queryPayTime[1]
            }
        },
        getList() {
            this.queryParams.goodsType = this.goodsType
            this.$nextTick(() => {
                this.$refs.pagination.handleSearch(true)
            })
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryCreateTime = null
            this.queryParams.createTimeFrom = null
            this.queryParams.createTimeTo = null

            this.queryPayTime = null
            this.queryParams.beginPayTime = null
            this.queryParams.endPayTime = null
            this.resetForm('queryForm')
            this.handleQuery()
        },
        rePay(row) {
            this.payFrom = {}
            this.payFrom.id = row.id
            this.openRePayPage = true
            getUser(row.appUserId).then((res1) => {
                if (res1.data.phoneNumber == null || res1.data.phoneNumber == '') {
                    return
                }
                findUserByPhoneNumber({ phoneNumber: res1.data.phoneNumber }).then((res) => {
                    this.appUserInfo = res.data
                })
            })
            getGoods(row.id).then((response) => {
                this.detailView = response.data
                this.costTotalPrice = this.detailView.totalPrice
                // this.detailList = response.data;
                // this.costTotalPrice = this.detailList[0].totalPrice;
            })
            if (row.deductAmount != null && row.deductAmount != '') {
                this.payFrom.deductAmount = row.deductAmount
            }
            if (row.payType != null && row.payType != '') {
                this.payFrom.payType = row.payType
            }
            if (row.payType != null && row.payType != '') {
                this.payFrom.payType = row.payType
            }
        },
        submitSettlement() {
            this.$confirm('是否确认结算？').then(() => {
                if (this.totalCount == 0) {
                    this.$message.error('请选择商品')
                    return
                }
                if (this.payFrom.payType == null || this.payFrom.payType == '') {
                    this.$message.error('请选择支付方式')
                    return
                }
                if (this.payFrom.deductAmount != null || this.payFrom.deductAmount != '') {
                    if (this.payFrom.deductAmount > this.payMoney) {
                        this.$message.error('抵扣金额不能大于支付金额')
                        return
                    }
                }
                if (this.payFrom.payType == '1') {
                    if (this.appUserInfo.rechargeBalance + this.appUserInfo.giveBalance < this.payMoney) {
                        this.$message.error('用户余额不足')
                        return
                    }
                }
                if (this.payFrom.payType == '2') {
                    if (this.payFrom.thisPayMoney < this.payMoney) {
                        this.$message.error('现金金额不够支付')
                        return
                    }
                }
                this.submitGoodsOrderDTO = {}
                // 设置订单基础信息
                this.submitGoodsOrderDTO.id = this.payFrom.id
                this.submitGoodsOrderDTO.goodsType = this.goodsType
                this.submitGoodsOrderDTO.deductAmount = this.payFrom.deductAmount
                this.submitGoodsOrderDTO.payAmount = this.payMoney
                this.submitGoodsOrderDTO.payType = this.payFrom.payType

                rePayOrder(this.submitGoodsOrderDTO).then((response) => {
                    this.$modal.msgSuccess('结算完成')
                    this.addGoodsList = []
                    this.purchaseCountVOList = []
                    this.submitGoodsOrderDTO = {}
                    this.openRePayPage = false
                    this.getList()
                })
            })
        },
        // 切换支付方式
        changePayType() {
            delete this.payFrom.thisPayMoney
            this.$forceUpdate()
        },
        // 取消订单
        cancelOrder(row) {
            this.$confirm('是否确认取消该订单？')
                .then(() => {
                    const vo = {
                        orderId: row.id,
                        remark: '不想要了'
                    }
                    cancelOrder(vo).then((response2) => {
                        this.$modal.msgSuccess('订单取消成功')
                        this.getList()
                    })
                })
                .catch(() => {})
        },
        // 订单详情
        orderDetail(row) {
            this.openDetail = true
            this.detailTitle = '订单商品详情'
            this.detailLoading = true
            // this.detailList = [];
            this.detailView = {}
            const id = row.id
            getGoods(id).then((response) => {
                this.detailView = response.data
                this.costTotalPrice = this.detailView.totalPrice

                // this.detailList = response.data;
                // this.costTotalPrice = this.detailList[0].totalPrice;
                this.detailLoading = false
            })
        },
        // 出货
        outOrderGoods(row) {
            this.deliveryreset()
            this.openDeliveryPage = true
            this.deliveryVo.deliveryCompany = this.deliveryData[0].name
          this.deliveryVo.deliveryId = this.deliveryData[0].code
          this.deliveryVo.orderId = row.id
        },
        //获取快递公司
        getdeliveryAll() {
            getdeliveryAll().then((res) => {
                this.deliveryData = res.data
            })
        },
        //切换快递获取其他数据
        changeDeliveryId(value) {
            this.deliveryData.forEach((item, index) => {
                if (value == item.deliveryName) {
                    this.deliveryVo.deliveryId = item.code
                }
            })
        },
        // 撤单
        refundOrder(row) {
            this.refundVO = {}
            this.openRefundPage = true
            this.refundVO.orderId = row.id
        },
        submitDelivery(formName) {
            this.$confirm('是否确认出货配送？')
                .then(() => {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            outOrderGoods(this.deliveryVo).then((response2) => {
                                this.$message.success('操作成功')
                                this.getList()
                                this.openDeliveryPage = false
                                this.deliveryreset()
                            })
                        }
                    })
                })
                .catch(() => {})
        },
        sendTimeDate(date) {
            if (!!date) {
                var nowDate = new Date(date).getFullYear() + '-' + (new Date(date).getMonth() + 1 < 10 ? '0' + (new Date(date).getMonth() + 1) : new Date(date).getMonth() + 1) + '-' + (new Date(date).getDate(date) < 10 ? '0' + new Date(date).getDate(date) : new Date(date).getDate(date))
                var nowTime =
                    (new Date(date).getHours() < 10 ? '0' + new Date(date).getHours() : new Date(date).getHours()) +
                    ':' +
                    (new Date(date).getMinutes() < 10 ? '0' + new Date(date).getMinutes() : new Date(date).getMinutes()) +
                    ':' +
                    (new Date(date).getSeconds() < 10 ? '0' + new Date(date).getSeconds() : new Date(date).getSeconds())
                return nowDate + ' ' + nowTime
            } else {
                return ''
            }
        },
        cancelDelivery() {
            this.openDeliveryPage = false
            this.deliveryreset()
        },
        // 表单重置
        deliveryreset() {
            this.deliveryVo = {
                bizId: '',
                // count: 1,
                customRemark: '',
                deliveryCompany: '',
                deliveryId: '',
                expectTime: '',
                orderId: 0,
                serviceName: '',
                serviceType: null,
                spaceHeight: null,
                spaceLength: null,
                spaceWidth: null,
                weight: null
            }
        },
        submitRefund() {
            this.$confirm('是否确认撤回该订单？')
                .then(() => {
                    refundOrderGoods(this.refundVO).then((response2) => {
                        this.$message.success('操作成功')
                        this.getList()
                        this.openRefundPage = false
                        this.refundVO.orderId = null
                        this.refundVO.refundReason = null
                    })
                })
                .catch(() => {})
        },
        checkClose(done) {
            this.$confirm('是否关闭支付页面，放弃支付？')
                .then(function () {
                    done()
                })
                .then(() => {})
                .catch(() => {})
        },
        deliveryClose(done) {
            this.$confirm('是否关闭出货信息窗口，确认关闭？')
                .then(function () {
                    done()
                })
                .then(() => {})
                .catch(() => {})
        },
        deliveryinfoClose(done) {
            this.$confirm('是否关闭快递信息窗口，确认关闭？')
                .then(function () {
                    done()
                })
                .then(() => {})
                .catch(() => {})
        },
        deliveryInfo(row) {
            getDeliveryPath({
                orderId: row.id
            }).then((res) => {
                this.deliveryView.name = row.deliveryCompany
                this.deliveryView.pathItemList = res.data.pathItemList
                this.deliveryView.address = row.province + row.city + row.area + row.address + row.addressDetail

                console.log(this.deliveryView)

                this.openDeliveryinfo = true
            })
        },
        btn_lodop(row) {
            if (!this.LODOP) {
                this.$modal.msgError('请安装打印机软件')
                return
            }

            let p_name = ''

            this.pointerList.forEach((pointer) => {
                if (pointer.printType == 0) {
                    p_name = pointer.printName
                }
            })

            printGoods(row.id).then((res) => {
                if (this.userInfoVO.userType == '02') {
                    const obj = {
                        name: this.userInfoVO.storeName,
                        contactPhone: this.userInfoVO.phonenumber,
                        user: this.userInfoVO.nickName
                    }
                    res.data.sysOrg = obj
                }
                res.data.newTime = this.formatDates(new Date(), 1)
                this.goodsPrinter(this.LODOP, res.data, p_name)
            })
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download(
                'mapi/order/goods/export',
                {
                    ...this.queryParams,
                    ...{ goodsType: this.goodsType }
                },
                `goods_order_${new Date().getTime()}.xlsx`
            )
        }
    }
}
</script>
<style>
.list_title {
    text-align: center;
    line-height: 40px;
}

.head-container-two {
    height: 500px;
    display: block;
    overflow-y: scroll;
}

.head-column1 {
    height: 300px;
    display: block;
    overflow-y: scroll;
}

.head-column2 {
    height: 600px;
    display: block;
    overflow-y: scroll;
}

.box-shadow .el-button--medium {
    font-size: 18px;
}
</style>
<style lang="scss" scoped>
.servicecard {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    border-radius: 5px;
    margin: 0 10px 10px 0;
    padding: 10px 20px;
    display: inline-block;
    cursor: pointer;
    position: relative;

    &::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0px; /* 调整三角形的大小和位置 */
        width: 0;
        height: 0;
        border-left: 35px solid transparent;
        border-top: 35px solid #007bff;
        z-index: 50;
        opacity: 0;
    }

    .check {
        position: absolute;
        top: -5px;
        right: 3px;
        color: #fff;
        z-index: 100;
        opacity: 0;
    }

    &.active {
        &::after {
            opacity: 1;
        }

        .check {
            opacity: 1;
        }
    }
}

.deliveryView {
    margin: 0 20px 20px 20px;
    padding: 15px;
    border-radius: 5px;
    background-color: #f4f4f4;
    color: #555;

    .info:first-child {
        margin-bottom: 10px;
    }
}

.customer-info-card {
    margin-bottom: 20px;
}

.product-list-container {
    margin: 20px 0;

    .product-list-title {
        margin-bottom: 15px;
        font-size: 16px;
        font-weight: 500;
        color: #303133;
    }
}

.order-total {
    margin-top: 20px;
    padding: 15px;
    background-color: #f5f7fa;
    border-radius: 4px;
}
</style>