|
|
@@ -0,0 +1,1857 @@
|
|
|
+<template>
|
|
|
+ <div class="order-content">
|
|
|
+ <div class="order-status" v-if="order!=null">
|
|
|
+ <el-steps :active="order.status==3?order.status+1:order.status" align-center>
|
|
|
+ <el-step title="待支付"></el-step>
|
|
|
+ <el-step title="待发货"></el-step>
|
|
|
+ <el-step title="待收货"></el-step>
|
|
|
+ <el-step title="交易完成"></el-step>
|
|
|
+ </el-steps>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+
|
|
|
+ <el-card shadow="never" style="margin-top: 15px">
|
|
|
+ <div class="operate-container" v-show="order!=null">
|
|
|
+ <span style="margin-left: 20px" class="color-danger">订单状态：
|
|
|
+ <el-tag prop="status" v-for="(item, index) in statusOptions"
|
|
|
+ v-if="order.status==item.dictValue">{{ item.dictLabel }}</el-tag>
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <div class="operate-button-container">
|
|
|
+ <el-button size="mini" @click="handleCertificates()" v-hasPermi="['store:storeOrder:uploadCredentials']">
|
|
|
+ 上传凭证
|
|
|
+ </el-button>
|
|
|
+ <el-button size="mini" @click="handleEditAddress()" v-if="order.status==0||order.status==1"
|
|
|
+ v-hasPermi="['store:storeOrder:editAddress']">修改收货地址
|
|
|
+ </el-button>
|
|
|
+ <el-button size="mini" @click="handleBindCustomer()" v-hasPermi="['store:storeOrder:bindCustomer']">
|
|
|
+ 关联客户
|
|
|
+ </el-button>
|
|
|
+ <el-button size="mini" @click="editOrder()" v-hasPermi="['store:storeOrder:edit']">修改订单</el-button>
|
|
|
+ <!-- <el-button size="mini" @click="handleEditUser()" v-hasPermi="['users:user:edit']" >修改会员修改</el-button> -->
|
|
|
+ <el-button size="mini" v-if="order.customerId!=null&&order.customerId>0" @click="handleCustomer()">
|
|
|
+ 查看客户详情
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="operate-button-container" v-hasPermi="['store:storeOrder:express']">
|
|
|
+ <el-button size="mini" @click="showExpress()">查看物流</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="operate-button-container">
|
|
|
+ <el-button size="mini" v-if="showRefundButton" @click="handleRefund" v-hasPermi="['store:storePaymentScrm:refund']">退款</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin: 20px 0px" v-if="order!=null">
|
|
|
+ <span class="font-small">
|
|
|
+ 基本信息
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <el-descriptions :column="4" border>
|
|
|
+ <el-descriptions-item label="订单编号">
|
|
|
+ <span v-if="order!=null">
|
|
|
+ {{ order.orderCode }}
|
|
|
+ </span>
|
|
|
+ <el-tag v-for="(item, index) in createTypeOptions"
|
|
|
+ v-if="order!=null&&order.orderCreateType==item.dictValue">{{ item.dictLabel }}
|
|
|
+ </el-tag>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="会员">
|
|
|
+ <span v-if="user!=null">
|
|
|
+ {{ user.nickname }}({{ user.phone }})
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <!-- <el-descriptions-item label="进线时间" >
|
|
|
+ <span v-if="user!=null">
|
|
|
+ {{user.registerDate}}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="推线编码" >
|
|
|
+ <span v-if="user!=null">
|
|
|
+ {{user.registerCode}}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item> -->
|
|
|
+
|
|
|
+ <el-descriptions-item label="收货人">
|
|
|
+ <span v-if="order!=null ">
|
|
|
+ {{ order.realName }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="手机号码">
|
|
|
+ <span v-if="order!=null ">
|
|
|
+ {{ order.userPhone }}
|
|
|
+ </span>
|
|
|
+ <el-button type="text" size="mini" @click="callNumber(0,0,orderId)"
|
|
|
+ v-hasPermi="['store:storeOrder:callNumber']">拨号
|
|
|
+ </el-button>
|
|
|
+ <el-button type="text" size="mini" @click="handleSms(order.userPhone)"
|
|
|
+ v-hasPermi="['store:storeOrder:sendSms']">短信
|
|
|
+ </el-button>
|
|
|
+ <el-button icon="el-icon-search" size="mini" @click="handlePhone()" style="margin-left: 20px;" circle
|
|
|
+ v-hasPermi="['store:storeOrder:queryPhone']"></el-button>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="收货地址">
|
|
|
+ <el-popover
|
|
|
+ v-if="order!=null"
|
|
|
+ placement="top-start"
|
|
|
+ title="收货地址"
|
|
|
+ width="300"
|
|
|
+ trigger="hover"
|
|
|
+ :content="order.userAddress">
|
|
|
+ <span slot="reference">{{ order.userAddress }}</span>
|
|
|
+ <el-button icon="el-icon-search" size="mini" @click="handleAddress()" style="margin-left: 20px;" circle
|
|
|
+ v-hasPermi="['store:storeOrder:queryAddress']"></el-button>
|
|
|
+ </el-popover>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="支付方式">
|
|
|
+ <span v-if="order!=null ">
|
|
|
+ <el-tag prop="orderType" v-for="(item, index) in payTypeOptions" v-if="order.payType==item.dictValue">{{
|
|
|
+ item.dictLabel
|
|
|
+ }}</el-tag>
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="订单类型">
|
|
|
+ <span v-if="order!=null ">
|
|
|
+ <el-tag prop="orderType" v-for="(item, index) in orderTypeOptions"
|
|
|
+ v-if="order.orderType==item.dictValue">{{ item.dictLabel }}</el-tag>
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="物流公司编号">
|
|
|
+ <span v-if="order!=null ">
|
|
|
+ {{ order.deliverySn }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="物流公司名称">
|
|
|
+ <span v-if="order!=null ">
|
|
|
+ {{ order.deliveryName }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="快递单号">
|
|
|
+ <span v-if="order!=null ">
|
|
|
+ {{ order.deliveryId }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="物流状态">
|
|
|
+ <span v-if="order!=null">
|
|
|
+ <el-tag v-for="(item, index) in deliveryStatusOptions"
|
|
|
+ v-if="order.deliveryStatus==item.dictValue"
|
|
|
+ :key="index">{{ item.dictLabel }}</el-tag>
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="物流跟踪状态">
|
|
|
+ <span v-if="order!=null">
|
|
|
+ <el-tag v-for="(item, index) in deliveryTypeOptions"
|
|
|
+ v-if="order.deliveryType==item.dictValue"
|
|
|
+ :key="index">{{ item.dictLabel }}</el-tag>
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="档期归属">
|
|
|
+ <el-tag prop="scheduleId" v-for="(item, index) in scheduleOptions"
|
|
|
+ v-if="order!=null&&order.scheduleId==item.id">{{ item.name }}
|
|
|
+ </el-tag>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="用户备注">
|
|
|
+ <span v-if="order!=null ">
|
|
|
+ {{ order.mark }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="平台备注">
|
|
|
+ <span v-if="order!=null ">
|
|
|
+ {{ order.remark }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="销售名称" v-if="order!=null && order.orderType != 0">
|
|
|
+ <span >
|
|
|
+ {{ order.companyUserName }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="销售公司" v-if="order!=null && order.orderType != 0">
|
|
|
+ <span >
|
|
|
+ {{ order.companyName }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="所属营期" v-if="order!=null && order.orderType == 3">
|
|
|
+ <span >
|
|
|
+ {{ order.periodName }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="所属小节" v-if="order!=null && order.orderType == 3">
|
|
|
+ <span >
|
|
|
+ {{ order.videoName }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="跟随阶段" v-if="company.companyId == 174">
|
|
|
+ <span v-if="order!=null ">
|
|
|
+ <el-tag prop="orderVisit" v-for="(item, index) in customerUserStatusOptions"
|
|
|
+ v-if="order.orderVisit==item.dictValue">{{ item.dictLabel }}</el-tag>
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item v-if="customerInfo!=null " label="客户编码">
|
|
|
+ <span>
|
|
|
+ {{ customerInfo.customerCode }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item v-if="customerInfo!=null " label="进线时间">
|
|
|
+ <span>
|
|
|
+ {{ customerInfo.registerDate }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+
|
|
|
+ <el-descriptions-item label="财务审核原因" v-if="isRefundOrder">
|
|
|
+ <span>{{ financeAuditReasonText }}</span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="财务审核备注" v-if="isRefundOrder">
|
|
|
+ <span>{{ financeAuditRemarkText }}</span>
|
|
|
+ </el-descriptions-item>
|
|
|
+
|
|
|
+ </el-descriptions>
|
|
|
+ <div style="margin: 20px 0px" v-if="order!=null">
|
|
|
+ <span class="font-small">
|
|
|
+ 凭证信息
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <el-image
|
|
|
+ v-if="this.certificates != null"
|
|
|
+ :src="certificates"
|
|
|
+ :preview-src-list="[certificates]"
|
|
|
+ :style="{ width: '100px', height: '100px' }"
|
|
|
+ @click.native="showImageDialog"
|
|
|
+ ></el-image>
|
|
|
+ <el-dialog :visible.sync="dialogVisibleImage" width="10%">
|
|
|
+ <img :src="certificates" style="width: 100%" alt="">
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <div style="margin-top: 20px">
|
|
|
+ <span class="font-small">商品信息</span>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ ref="itemsTable"
|
|
|
+ border
|
|
|
+ v-if="items!=null"
|
|
|
+ :data="items"
|
|
|
+ size="small"
|
|
|
+ style="width: 100%;margin-top: 20px">
|
|
|
+ <el-table-column label="商品图片" width="150" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <img :src="JSON.parse(scope.row.jsonInfo).image" style="height: 80px">
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="商品名称" width="300" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <p>{{ JSON.parse(scope.row.jsonInfo).productName }}</p>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="单价" width="240" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <p>￥{{ JSON.parse(scope.row.jsonInfo).price.toFixed(2) }}</p>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="规格" width="240" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ JSON.parse(scope.row.jsonInfo).sku }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="数量" width="180" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.num }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="小计" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ ￥{{ scope.row.num * JSON.parse(scope.row.jsonInfo).price.toFixed(2) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div style="float: right;margin: 20px" v-if="order!=null">
|
|
|
+ 合计：<span class="color-danger">￥{{ order.totalPrice.toFixed(2) }}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="margin: 60px 0px 20px 0px">
|
|
|
+ <span class="font-small">费用信息</span>
|
|
|
+ </div>
|
|
|
+ <el-descriptions v-if="zdyInfo !== 'gzzdy'" :column="4" border>
|
|
|
+ <el-descriptions-item label="商品合计">
|
|
|
+ <span v-if="order!=null">
|
|
|
+ ￥{{ order.totalPrice.toFixed(2) }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="应付金额">
|
|
|
+ <span v-if="order!=null">
|
|
|
+ ￥{{ order.payPrice.toFixed(2) }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="运费">
|
|
|
+ <span v-if="order!=null">
|
|
|
+ ￥{{ order.payPostage.toFixed(2) }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="优惠券">
|
|
|
+ <span v-if="order!=null">
|
|
|
+ ￥{{ order.couponPrice.toFixed(2) }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="积分抵扣">
|
|
|
+ <span v-if="order!=null">
|
|
|
+ ￥{{ order.deductionPrice.toFixed(2) }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="实付金额">
|
|
|
+ <span v-if="order!=null">
|
|
|
+ ￥{{ order.payMoney.toFixed(2) }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="代收金额">
|
|
|
+ <span v-if="order!=null">
|
|
|
+ ￥{{ order.payDelivery.toFixed(2) }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+
|
|
|
+ <el-descriptions v-if="zdyInfo === 'gzzdy'" :column="4" border>
|
|
|
+ <el-descriptions-item label="商品合计">
|
|
|
+ <span v-if="order!=null">
|
|
|
+ ￥{{ order.totalPrice.toFixed(2) }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="应付金额">
|
|
|
+ <span v-if="order!=null">
|
|
|
+ ￥{{ order.payPrice.toFixed(2) }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="实付金额">
|
|
|
+ <span v-if="order!=null">
|
|
|
+ ￥{{ order.payMoney.toFixed(2) }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="代收金额">
|
|
|
+ <span v-if="order!=null">
|
|
|
+ ￥{{ order.payDelivery.toFixed(2) }}
|
|
|
+ </span>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ class="edit-quantity-btn"
|
|
|
+ @click="editPayDeliveryHandle()"
|
|
|
+ v-hasPermi="['store:storeOrder:editPayDelivery']">
|
|
|
+ 修改
|
|
|
+ </el-button>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="优惠券">
|
|
|
+ <span v-if="order!=null">
|
|
|
+ ￥{{ order.couponPrice.toFixed(2) }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+
|
|
|
+ <div style="margin-top: 20px">
|
|
|
+ <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
|
|
|
+ <span class="font-small">支付信息</span>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ border
|
|
|
+ :data="payments"
|
|
|
+ size="small"
|
|
|
+ style="width: 100%;margin-top: 20px">
|
|
|
+ <el-table-column label="支付单号" align="center" prop="payCode" width="120px"/>
|
|
|
+ <el-table-column label="支付金额" align="center" prop="payMoney"/>
|
|
|
+ <el-table-column label="类型" align="center" prop="payTypeCode"/>
|
|
|
+ <el-table-column label="交易单号" align="center" prop="bankTransactionId"/>
|
|
|
+ <el-table-column label="银行单号" align="center" prop="bankSerialNo"/>
|
|
|
+ <el-table-column label="创建时间" align="center" prop="createTime"/>
|
|
|
+ <el-table-column label="支付时间" align="center" prop="payTime"/>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <div style="margin-top: 20px">
|
|
|
+ <span class="font-small">操作信息</span>
|
|
|
+ </div>
|
|
|
+ <el-table style="margin-top: 20px;width: 100%"
|
|
|
+ ref="orderHistoryTable"
|
|
|
+ :data="logs" border>
|
|
|
+ <el-table-column label="操作时间" width="160" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.changeTime }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="备注" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.changeMessage }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <div style="margin-top: 20px">
|
|
|
+ <span class="font-small">审批信息</span>
|
|
|
+ </div>
|
|
|
+ <el-table style="margin-top: 20px;width: 100%"
|
|
|
+ :data="auditLogs" border>
|
|
|
+ <el-table-column label="操作时间" width="160" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.createTime }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="备注" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.content }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ <el-dialog :title="edit.title" :visible.sync="edit.open" width="600px" append-to-body>
|
|
|
+ <el-form ref="editForm" :model="editForm" :rules="editRules" label-width="100px">
|
|
|
+ <el-form-item label="订单类型" prop="orderType">
|
|
|
+ <el-select style="width: 200px" v-model="editForm.orderType" placeholder="请选择订单类型" clearable
|
|
|
+ size="small">
|
|
|
+ <el-option
|
|
|
+ v-for="item in orderTypeOptions"
|
|
|
+ :key="item.dictValue"
|
|
|
+ :label="item.dictLabel"
|
|
|
+ :value="item.dictValue"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="档期归属" prop="scheduleId">
|
|
|
+ <el-select filterable style="width: 200px" v-model="editForm.scheduleId" placeholder="请选择档期" clearable
|
|
|
+ size="small">
|
|
|
+ <el-option
|
|
|
+ v-for="item in scheduleOptions"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="跟随阶段" prop="orderVisit" v-if="company.companyId == 174">
|
|
|
+ <el-select filterable style="width: 200px" v-model="editForm.orderVisit" placeholder="请选择跟随阶段"
|
|
|
+ clearable size="small">
|
|
|
+ <el-option
|
|
|
+ v-for="item in customerUserStatusOptions"
|
|
|
+ :key="item.dictValue"
|
|
|
+ :label="item.dictLabel"
|
|
|
+ :value="item.dictValue"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注" prop="mark">
|
|
|
+ <el-input v-model="editForm.mark" placeholder="请输入备注"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitEditForm">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog :title="editUser.title" :visible.sync="editUser.open" width="600px" append-to-body>
|
|
|
+ <el-form ref="editUserForm" :model="editUserForm" :rules="editUserRules" label-width="100px">
|
|
|
+ <el-form-item label="进线时间" prop="registerDate">
|
|
|
+ <el-date-picker clearable size="small"
|
|
|
+ v-model="editUserForm.registerDate"
|
|
|
+ type="date"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ placeholder="选择进线时间">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="推线编码" prop="registerCode">
|
|
|
+ <el-input v-model="editUserForm.registerCode" placeholder="请输入推线编码"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="渠道来源" prop="source">
|
|
|
+ <el-input v-model="editUserForm.source" placeholder="请输入渠道来源"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitEditUserForm">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog :title="editAddress.title" :visible.sync="editAddress.open" width="600px" append-to-body>
|
|
|
+ <el-form ref="editAddressForm" :model="editAddressForm" :rules="editAddressRules" label-width="100px">
|
|
|
+ <el-form-item label="收件人" prop="realName">
|
|
|
+ <el-input v-model="editAddressForm.realName" placeholder="请输入收件人"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="联系电话" prop="source">
|
|
|
+ <el-input v-model="editAddressForm.userPhone" placeholder="请输入联系电话"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="收货地址" prop="district">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-select @change="provinceChange" v-model="editAddressForm.provinceId" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in province"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-select @change="cityChange" v-model="editAddressForm.cityId" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in city"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-select @change="districtChange" v-model="editAddressForm.districtId" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in district"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="详细地址" prop="detail">
|
|
|
+ <el-input v-model="editAddressForm.detail" placeholder="请输入收货人详细地址"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitEditAddressForm">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog :title="expressDialog.title" :visible.sync="expressDialog.open" width="600px" append-to-body>
|
|
|
+ <el-table style="margin-top: 20px;width: 100%"
|
|
|
+ ref="orderHistoryTable"
|
|
|
+ :data="traces" border>
|
|
|
+ <el-table-column label="操作时间" width="160" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.AcceptTime }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="位置" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.Location }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="描述" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.AcceptStation }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog :title="bindCustomerDialog.title" :visible.sync="bindCustomerDialog.open" width="800px" append-to-body>
|
|
|
+ <el-form ref="bindCustomerForm" :model="bindCustomerForm" :rules="bindCustomerRules" label-width="100px">
|
|
|
+ <el-form-item label="客户查询">
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-input v-model="bindCustomerForm.mobile" placeholder="请输入客户手机号"/>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="primary" @click="searchCustomer">查看</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="客户选择" prop="customerIds">
|
|
|
+ <el-table @selection-change="handleSelectionChange"
|
|
|
+ :data="customers" border>
|
|
|
+ <el-table-column type="selection" width="55" align="center"/>
|
|
|
+ <el-table-column label="ID" align="center" prop="customerId"/>
|
|
|
+ <el-table-column label="客户编号" width="160" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.customerCode }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="客户名称" width="160" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.customerName }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="客户手机号" width="160" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.mobile }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitBindCustomerForm">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog :title="certificateDialig.title" :visible.sync="certificateDialig.open" append-to-body>
|
|
|
+ <el-form ref="certificateForm" :model="certificateForm" :rules="certificateRules" label-width="100px">
|
|
|
+ <el-form-item label="凭证" prop="certificates">
|
|
|
+ <ImageUpload v-model="photoArr" type="image" :num="10" :width="150" :height="150"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="handleConfirm">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <el-drawer
|
|
|
+ :append-to-body="true"
|
|
|
+ size="75%"
|
|
|
+ :title="customer.title" :visible.sync="customer.open"
|
|
|
+ >
|
|
|
+ <customer-details ref="customerDetails"/>
|
|
|
+ </el-drawer>
|
|
|
+ <el-dialog :title="addSms.title" :visible.sync="addSms.open" width="800px" append-to-body>
|
|
|
+ <add-sms ref="sms" @close="closeSms()"></add-sms>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 修改代收金额 -->
|
|
|
+ <el-dialog :title="editPayDelivery.title" :visible.sync="editPayDelivery.open" width="500px" append-to-body>
|
|
|
+ <el-form ref="payDeliveryForm" :model="payDeliveryForm" :rules="payDeliveryRules" label-width="150px">
|
|
|
+ <el-form-item label="代收金额（元）" prop="payDelivery">
|
|
|
+ <el-input-number
|
|
|
+ v-model="payDeliveryForm.payDelivery"
|
|
|
+ :min="0.00"
|
|
|
+ :precision="2"
|
|
|
+ :step="0.01"
|
|
|
+ size="small"
|
|
|
+ style="width: 150px"
|
|
|
+ >
|
|
|
+ </el-input-number>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="editPayDelivery.open = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submitPayDeliveryForm">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ getExpress,
|
|
|
+ getStoreOrder,
|
|
|
+ getStoreOrderAddress,
|
|
|
+ updateStoreOrder,
|
|
|
+ bindCustomer,
|
|
|
+ uploadCredentials,
|
|
|
+ getUserPhone,
|
|
|
+ editPayDelivery,
|
|
|
+ refundStorePayment
|
|
|
+} from "@/api/hisStore/storeOrder";
|
|
|
+import {updateUser, getUser} from "@/api/users/user";
|
|
|
+import {getTcmScheduleList} from "@/api/company/tcmScheduleReport";
|
|
|
+import Treeselect from "@riophae/vue-treeselect";
|
|
|
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
|
+import Editor from '@/components/Editor/wang';
|
|
|
+import singleImg from '@/components/Material/single'
|
|
|
+import {getCustomerListBySearch} from "@/api/crm/customer";
|
|
|
+import ImageUpload from '@/components/ImageUpload'
|
|
|
+import Material from '@/components/Material'
|
|
|
+import {getCitys} from "@/api/hisStore/city";
|
|
|
+import customerDetails from '@/views/crm/components/customerDetails.vue';
|
|
|
+import addSms from '@/views/crm/components/addSms.vue';
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "productOrderPick",
|
|
|
+ components: {customerDetails, ImageUpload, Material, addSms, Treeselect, Editor, singleImg},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ zdyInfo: process.env.VUE_APP_FS_USER_INFO,
|
|
|
+ customerUserStatusOptions: [],
|
|
|
+ scheduleOptions: [],
|
|
|
+ dialogVisibleImage: false,
|
|
|
+ customerInfo: null,
|
|
|
+ customer: {
|
|
|
+ title: "客户详情",
|
|
|
+ open: false,
|
|
|
+ },
|
|
|
+ photoArr: null,
|
|
|
+ certificateDialig: {
|
|
|
+ title: "上传凭证",
|
|
|
+ open: false,
|
|
|
+ },
|
|
|
+ certificateForm: {
|
|
|
+ orderCode: null,
|
|
|
+ certificates: null,
|
|
|
+ },
|
|
|
+ addSms: {
|
|
|
+ open: false,
|
|
|
+ title: "发短信"
|
|
|
+ },
|
|
|
+ certificateRules: {
|
|
|
+ certificates: [
|
|
|
+ {required: true, message: "凭证不能为空", trigger: "change"}
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ customers: [],
|
|
|
+ bindCustomerDialog: {
|
|
|
+ title: "关联客户",
|
|
|
+ open: false,
|
|
|
+ },
|
|
|
+ bindCustomerForm: {
|
|
|
+ mobile: null,
|
|
|
+ customerIds: null,
|
|
|
+ },
|
|
|
+ bindCustomerRules: {
|
|
|
+ customerIds: [
|
|
|
+ {required: true, message: "客户不能为空", trigger: "change"}
|
|
|
+ ],
|
|
|
+
|
|
|
+ },
|
|
|
+ orderId: null,
|
|
|
+ expressDialog: {
|
|
|
+ title: "物流信息",
|
|
|
+ open: false,
|
|
|
+ },
|
|
|
+ citys: [],
|
|
|
+ province: [],
|
|
|
+ city: [],
|
|
|
+ district: [],
|
|
|
+ editAddress: {
|
|
|
+ title: "修改收货地址",
|
|
|
+ open: false,
|
|
|
+ },
|
|
|
+ editAddressForm: {
|
|
|
+ districtId: null,
|
|
|
+
|
|
|
+ },
|
|
|
+ editAddressRules: {},
|
|
|
+ editUser: {
|
|
|
+ title: "修改会员信息",
|
|
|
+ open: false,
|
|
|
+ },
|
|
|
+ editUserForm: {
|
|
|
+ registerDate: null,
|
|
|
+ registerCode: "",
|
|
|
+ source: "",
|
|
|
+ },
|
|
|
+ editUserRules: {},
|
|
|
+ edit: {
|
|
|
+ title: "",
|
|
|
+ open: false,
|
|
|
+ },
|
|
|
+ editForm: {
|
|
|
+ orderType: null,
|
|
|
+ scheduleId: null,
|
|
|
+ orderVisit: null,
|
|
|
+ mark: "",
|
|
|
+ },
|
|
|
+ editRules: {},
|
|
|
+ createTypeOptions: [],
|
|
|
+ deliveryStatusOptions: [],
|
|
|
+ deliveryTypeOptions: [],
|
|
|
+ orderTypeOptions: [],
|
|
|
+ payTypeOptions: [],
|
|
|
+ statusOptions: [],
|
|
|
+ certificates: null,
|
|
|
+ order: null,
|
|
|
+ user: {},
|
|
|
+ logs: [],
|
|
|
+ items: [],
|
|
|
+ express: [],
|
|
|
+ traces: [],
|
|
|
+ payments: [],
|
|
|
+ auditLogs: [],
|
|
|
+ // 修改代收金额相关参数
|
|
|
+ editPayDelivery: {
|
|
|
+ title: "修改代收金额",
|
|
|
+ open: false,
|
|
|
+ },
|
|
|
+ payDeliveryForm: {
|
|
|
+ id: null,
|
|
|
+ payDelivery: 0.00
|
|
|
+ },
|
|
|
+ payDeliveryRules: {
|
|
|
+ payDelivery: [
|
|
|
+ {required: true, message: "代收金额不能为空", trigger: "blur"},
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ afterSales: {
|
|
|
+ auditReasonName: null,
|
|
|
+ auditRemark: null,
|
|
|
+ reasonValue1: null,
|
|
|
+ reasonValue2: null
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getDicts("store_order_delivery_status").then((response) => {
|
|
|
+ this.deliveryStatusOptions = response.data;
|
|
|
+ });
|
|
|
+ this.getDicts("store_order_delivery_type").then((response) => {
|
|
|
+ this.deliveryTypeOptions = response.data;
|
|
|
+ });
|
|
|
+ this.getDicts("crm_customer_user_status").then((response) => {
|
|
|
+ this.customerUserStatusOptions = response.data;
|
|
|
+ });
|
|
|
+ this.getDicts("store_order_type").then((response) => {
|
|
|
+ this.orderTypeOptions = response.data;
|
|
|
+ });
|
|
|
+ this.getDicts("store_order_status").then((response) => {
|
|
|
+ this.statusOptions = response.data;
|
|
|
+ });
|
|
|
+ this.getDicts("store_pay_type").then((response) => {
|
|
|
+ this.payTypeOptions = response.data;
|
|
|
+ });
|
|
|
+ this.getDicts("store_order_create_type").then((response) => {
|
|
|
+ this.createTypeOptions = response.data;
|
|
|
+ });
|
|
|
+ getTcmScheduleList().then(response => {
|
|
|
+ this.scheduleOptions = response.data;
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ company() {
|
|
|
+ return this.$store.state.user.user;
|
|
|
+ },
|
|
|
+ /** 退款中 / 已退款 */
|
|
|
+ isRefundOrder() {
|
|
|
+ if (!this.order) return false;
|
|
|
+ const s = Number(this.order.status);
|
|
|
+ return s === -1 || s === -2;
|
|
|
+ },
|
|
|
+ /** 财务审核原因：售后一级 + 二级，兼容旧数据 auditReasonName */
|
|
|
+ financeAuditReasonText() {
|
|
|
+ const a = this.afterSales;
|
|
|
+ if (!a) return '—';
|
|
|
+ const parts = [a.reasonValue1, a.reasonValue2].filter(
|
|
|
+ x => x != null && String(x).trim() !== ''
|
|
|
+ );
|
|
|
+ if (parts.length > 0) return parts.join(' / ');
|
|
|
+ if (a.auditReasonName) return a.auditReasonName;
|
|
|
+ return '—';
|
|
|
+ },
|
|
|
+ financeAuditRemarkText() {
|
|
|
+ const a = this.afterSales;
|
|
|
+ if (!a || a.auditRemark == null || String(a.auditRemark).trim() === '') return '—';
|
|
|
+ return a.auditRemark;
|
|
|
+ },
|
|
|
+ /** 已支付且存在支付记录时显示退款 */
|
|
|
+ showRefundButton() {
|
|
|
+ if (!this.order) return false;
|
|
|
+ const status = String(this.order.status);
|
|
|
+ if (status === '0') return false;
|
|
|
+ if (status === '-1' || status === '-2') return false;
|
|
|
+ if (this.order.payMoney == null || Number(this.order.payMoney) <= 0) return false;
|
|
|
+ const payment = this.getLatestPayment();
|
|
|
+ return !!(payment && payment.paymentId);
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 防抖函数
|
|
|
+ debounce(func, wait) {
|
|
|
+ let timeout;
|
|
|
+ return function executedFunction(...args) {
|
|
|
+ const later = () => {
|
|
|
+ clearTimeout(timeout);
|
|
|
+ func(...args);
|
|
|
+ };
|
|
|
+ clearTimeout(timeout);
|
|
|
+ timeout = setTimeout(later, wait);
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ // 节流函数
|
|
|
+ throttle(func, limit) {
|
|
|
+ let inThrottle;
|
|
|
+ return function() {
|
|
|
+ const args = arguments;
|
|
|
+ const context = this;
|
|
|
+ if (!inThrottle) {
|
|
|
+ func.apply(context, args);
|
|
|
+ inThrottle = true;
|
|
|
+ setTimeout(() => inThrottle = false, limit);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ closeSms() {
|
|
|
+ this.addSms.open = false;
|
|
|
+ },
|
|
|
+ handleSms(mobile) {
|
|
|
+ this.addSms.open = true;
|
|
|
+ var that = this;
|
|
|
+ setTimeout(() => {
|
|
|
+ that.$refs.sms.getOrderId(this.orderId, mobile, 2);
|
|
|
+ }, 500);
|
|
|
+
|
|
|
+ },
|
|
|
+ handlePhone() {
|
|
|
+ const id = this.order.id;
|
|
|
+ getUserPhone(id).then(response => {
|
|
|
+ this.order.userPhone = response.userPhone;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleAddress() {
|
|
|
+ const id = this.order.id;
|
|
|
+ getStoreOrderAddress(id).then(response => {
|
|
|
+ this.order.userAddress = response.address;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ showImageDialog() {
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
+ handleCustomer() {
|
|
|
+ var that = this;
|
|
|
+ this.customer.open = true;
|
|
|
+ setTimeout(() => {
|
|
|
+ that.$refs.customerDetails.getDetails(this.order.customerId);
|
|
|
+ }, 200);
|
|
|
+ },
|
|
|
+ handleSelectionChange(selection) {
|
|
|
+ this.bindCustomerForm.customerIds = selection.map(item => item.customerId)
|
|
|
+ },
|
|
|
+ searchCustomer() {
|
|
|
+ if (this.bindCustomerForm.mobile == null || this.bindCustomerForm.mobile == "") {
|
|
|
+ this.msgError("请输入手机号");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var data = {mobile: this.bindCustomerForm.mobile};
|
|
|
+ getCustomerListBySearch(data).then(response => {
|
|
|
+ this.customers = response.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleBindCustomer() {
|
|
|
+ this.customers = [];
|
|
|
+ this.bindCustomerDialog.open = true;
|
|
|
+ this.bindCustomerForm.mobile = null;
|
|
|
+ this.bindCustomerForm.orderId = this.orderId;
|
|
|
+ this.bindCustomerForm.customerIds = null;
|
|
|
+ },
|
|
|
+ /** 提交按钮 */
|
|
|
+ submitBindCustomerForm() {
|
|
|
+ this.$refs["bindCustomerForm"].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ bindCustomer(this.bindCustomerForm).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.msgSuccess("修改成功");
|
|
|
+ this.bindCustomerDialog.open = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleCertificates() {
|
|
|
+ this.certificateDialig.open = true;
|
|
|
+ this.photoArr = null;
|
|
|
+ },
|
|
|
+ handleConfirm() {
|
|
|
+ this.certificateForm.id = this.orderId;
|
|
|
+ this.certificateForm.orderCode = this.order.orderCode;
|
|
|
+ this.certificateForm.certificates = this.photoArr;
|
|
|
+ uploadCredentials(this.certificateForm).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.msgSuccess("上传成功");
|
|
|
+ this.certificateDialig.open = false;
|
|
|
+ this.getOrder(this.order.id);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ showExpress() {
|
|
|
+ this.expressDialog.open = true;
|
|
|
+ this.traces = [];
|
|
|
+ getExpress(this.orderId).then(response => {
|
|
|
+ this.express = response.data;
|
|
|
+ if (this.express != null && this.express.Traces != null) {
|
|
|
+ this.traces = this.express.Traces
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ getLatestPayment() {
|
|
|
+ if (!this.payments || this.payments.length === 0) {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ if (this.payments.length === 1) {
|
|
|
+ return this.payments[0];
|
|
|
+ }
|
|
|
+ const sorted = [...this.payments].sort((a, b) => {
|
|
|
+ const timeA = new Date(a.payTime || a.createTime || 0).getTime();
|
|
|
+ const timeB = new Date(b.payTime || b.createTime || 0).getTime();
|
|
|
+ return timeB - timeA;
|
|
|
+ });
|
|
|
+ return sorted[0];
|
|
|
+ },
|
|
|
+ handleRefund() {
|
|
|
+ const payment = this.getLatestPayment();
|
|
|
+ if (!payment || !payment.paymentId) {
|
|
|
+ this.msgError('未找到支付记录');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const refundMoney = this.order.payMoney;
|
|
|
+ this.$confirm(`确认对该订单退款吗？`, '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ refundStorePayment({
|
|
|
+ paymentId: payment.paymentId,
|
|
|
+ refundMoney: refundMoney
|
|
|
+ }).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.msgSuccess('退款成功');
|
|
|
+ this.getOrder(this.order.id);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }).catch(() => {});
|
|
|
+ },
|
|
|
+ districtChange(val) {
|
|
|
+ var item = this.district.find((item) => {
|
|
|
+ return item.value == val;
|
|
|
+ })
|
|
|
+
|
|
|
+ this.editAddressForm.district = item.label;
|
|
|
+
|
|
|
+ },
|
|
|
+ cityChange(val) {
|
|
|
+ // this.district=this.citys.filter(item => item.value===val )
|
|
|
+ this.editAddressForm.districtId = null;
|
|
|
+ var item = this.city.find((item) => {
|
|
|
+ return item.value == val;
|
|
|
+ })
|
|
|
+ console.log(item)
|
|
|
+ this.district = item.children;
|
|
|
+ this.editAddressForm.city = item.label;
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ provinceChange(val) {
|
|
|
+ // this.city=this.citys.filter(item => item.value===val )
|
|
|
+ this.district = [];
|
|
|
+ this.editAddressForm.cityId = null;
|
|
|
+ this.editAddressForm.districtId = null;
|
|
|
+ var item = this.citys.find((item) => {
|
|
|
+ return item.value == val;
|
|
|
+ })
|
|
|
+ this.city = item.children;
|
|
|
+ this.editAddressForm.province = item.label;
|
|
|
+ },
|
|
|
+ async getCityList() {
|
|
|
+ try {
|
|
|
+ const res = await getCitys();
|
|
|
+ this.citys = res.data;
|
|
|
+ this.province = res.data.filter(item => item.pid === 0);
|
|
|
+ // 可选：返回数据以便链式调用
|
|
|
+ return res.data;
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取城市列表失败:', error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async handleEditAddress() {
|
|
|
+ // 等待城市数据加载完成
|
|
|
+ await this.getCityList();
|
|
|
+
|
|
|
+ // 初始化表单数据
|
|
|
+ this.editAddressForm.id = this.order.id;
|
|
|
+ this.editAddressForm.realName = this.order.realName;
|
|
|
+ this.editAddressForm.userPhone = this.order.userPhone;
|
|
|
+
|
|
|
+ // 初始化表单中的地址字段
|
|
|
+ this.editAddressForm.provinceId = '';
|
|
|
+ this.editAddressForm.cityId = '';
|
|
|
+ this.editAddressForm.districtId = '';
|
|
|
+ this.editAddressForm.detail = '';
|
|
|
+
|
|
|
+ // 初始化级联数据
|
|
|
+ this.city = [];
|
|
|
+ this.district = [];
|
|
|
+
|
|
|
+ // 检查是否有地址数据
|
|
|
+ if (!this.order?.userAddress) {
|
|
|
+ this.editAddress.open = true;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 分割地址
|
|
|
+ const addressParts = this.order.userAddress.trim().split(/\s+/);
|
|
|
+
|
|
|
+ // 如果地址格式不正确，将整个地址作为详情
|
|
|
+ if (addressParts.length < 4) {
|
|
|
+ this.editAddressForm.detail = this.order.userAddress;
|
|
|
+ this.editAddress.open = true;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 解析省份
|
|
|
+ const provinceName = addressParts[0];
|
|
|
+ const province = this.citys?.find(item => item.label === provinceName);
|
|
|
+
|
|
|
+ if (province) {
|
|
|
+ this.editAddressForm.provinceId = province.value;
|
|
|
+
|
|
|
+ // 获取城市列表
|
|
|
+ if (Array.isArray(province.children)) {
|
|
|
+ this.city = province.children.filter(item => item.pid === province.value);
|
|
|
+
|
|
|
+ // 解析城市
|
|
|
+ const cityName = addressParts[1];
|
|
|
+ const city = this.city.find(item => item.label === cityName);
|
|
|
+
|
|
|
+ if (city) {
|
|
|
+ this.editAddressForm.cityId = city.value;
|
|
|
+
|
|
|
+ // 获取区县列表
|
|
|
+ if (Array.isArray(city.children)) {
|
|
|
+ this.district = city.children.filter(item => item.pid === city.value);
|
|
|
+
|
|
|
+ // 解析区县
|
|
|
+ const districtName = addressParts[2];
|
|
|
+ const district = this.district.find(item => item.label === districtName);
|
|
|
+
|
|
|
+ if (district) {
|
|
|
+ this.editAddressForm.districtId = district.value;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 详细地址是剩余部分
|
|
|
+ this.editAddressForm.detail = addressParts.slice(3).join(' ');
|
|
|
+
|
|
|
+ // 打开编辑对话框
|
|
|
+ this.editAddress.open = true;
|
|
|
+ },
|
|
|
+ /** 提交按钮 */
|
|
|
+ submitEditAddressForm() {
|
|
|
+ this.$refs["editAddressForm"].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ this.editAddressForm.userAddress = this.editAddressForm.province + " " + this.editAddressForm.city + " " + this.editAddressForm.district + " " + this.editAddressForm.detail;
|
|
|
+ updateStoreOrder(this.editAddressForm).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.msgSuccess("修改成功");
|
|
|
+ this.editAddress.open = false;
|
|
|
+ this.getOrder(this.order.id);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleEditUser() {
|
|
|
+ const userId = this.order.userId
|
|
|
+ getUser(userId).then(response => {
|
|
|
+ this.editUserForm.userId = response.data.userId;
|
|
|
+ this.editUserForm.registerDate = response.data.registerDate;
|
|
|
+ this.editUserForm.registerCode = response.data.registerCode;
|
|
|
+ this.editUserForm.source = response.data.source;
|
|
|
+ this.editUser.open = true;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 提交按钮 */
|
|
|
+ submitEditUserForm() {
|
|
|
+ this.$refs["editUserForm"].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ updateUser(this.editUserForm).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.msgSuccess("修改成功");
|
|
|
+ this.editUser.open = false;
|
|
|
+ this.getOrder(this.order.id);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ submitEditForm() {
|
|
|
+ this.$refs["editForm"].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ updateStoreOrder(this.editForm).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.msgSuccess("操作成功");
|
|
|
+ this.edit.open = false;
|
|
|
+ this.getOrder(this.order.id);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ editOrder() {
|
|
|
+ this.edit.open = true;
|
|
|
+ this.editForm.mark = this.order.mark
|
|
|
+ this.editForm.id = this.order.id;
|
|
|
+ if (this.order.orderType != null) {
|
|
|
+ this.editForm.orderType = this.order.orderType.toString();
|
|
|
+ }
|
|
|
+ this.editForm.scheduleId = this.order.scheduleId;
|
|
|
+ this.editForm.orderVisit = this.order.orderVisit;
|
|
|
+
|
|
|
+ },
|
|
|
+ getOrder(orderId) {
|
|
|
+ this.orderId = orderId;
|
|
|
+ this.certificates = null;
|
|
|
+ getStoreOrder(orderId).then(response => {
|
|
|
+ this.order = response.order;
|
|
|
+ if (response.order.certificates != null) {
|
|
|
+ this.certificates = response.order.certificates;
|
|
|
+ }
|
|
|
+ this.user = response.user;
|
|
|
+ this.logs = response.logs;
|
|
|
+ this.items = response.items;
|
|
|
+ this.payments = response.payments;
|
|
|
+ this.customerInfo = response.customer;
|
|
|
+ this.auditLogs = response.auditLogs;
|
|
|
+ this.afterSales = response.afterSales || {
|
|
|
+ auditReasonName: null,
|
|
|
+ auditRemark: null,
|
|
|
+ reasonValue1: null,
|
|
|
+ reasonValue2: null
|
|
|
+ };
|
|
|
+ });
|
|
|
+ },
|
|
|
+ editPayDeliveryHandle() {
|
|
|
+ this.payDeliveryForm.id = this.orderId;
|
|
|
+ this.payDeliveryForm.payDelivery = this.order.payDelivery || 0.00;
|
|
|
+ this.editPayDelivery.open = true;
|
|
|
+ },
|
|
|
+ // 提交修改代收金额
|
|
|
+ submitPayDeliveryForm() {
|
|
|
+ this.$refs["payDeliveryForm"].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ editPayDelivery(this.payDeliveryForm).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.msgSuccess("修改成功");
|
|
|
+ this.editPayDelivery.open = false;
|
|
|
+ this.getOrder(this.order.id);
|
|
|
+ } else {
|
|
|
+ this.msgError(response.message);
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ this.$message.error('请求失败: ' + error.message)
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.order-content {
|
|
|
+ margin: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.operate-container {
|
|
|
+ background: #F2F6FC;
|
|
|
+ height: 60px;
|
|
|
+ margin: -20px -20px 0;
|
|
|
+ line-height: 60px;
|
|
|
+}
|
|
|
+
|
|
|
+.operate-button-container {
|
|
|
+ float: right;
|
|
|
+ margin-right: 20px
|
|
|
+}
|
|
|
+
|
|
|
+.edit-quantity-btn {
|
|
|
+ margin-left: 4px; /* 缩小左边距 */
|
|
|
+ padding: 4px 8px;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ border-radius: 4px;
|
|
|
+ color: #409eff;
|
|
|
+ background: transparent;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.edit-quantity-btn:hover {
|
|
|
+ background-color: #ecf5ff;
|
|
|
+ border-color: #b3d8ff;
|
|
|
+ color: #66b1ff;
|
|
|
+ transform: translateY(-1px);
|
|
|
+}
|
|
|
+
|
|
|
+.edit-quantity-btn i {
|
|
|
+ margin-right: 2px;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.edit-quantity-btn:hover {
|
|
|
+ background-color: #ecf5ff;
|
|
|
+ border-color: #b3d8ff;
|
|
|
+ color: #66b1ff;
|
|
|
+ transform: translateY(-1px);
|
|
|
+}
|
|
|
+
|
|
|
+.edit-quantity-btn i {
|
|
|
+ margin-right: 2px;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-product-name {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #303133;
|
|
|
+ word-break: break-all;
|
|
|
+ max-width: 350px;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+
|
|
|
+.more-products-btn:hover {
|
|
|
+ background: linear-gradient(135deg, #66b1ff, #409eff);
|
|
|
+ transform: translateY(-1px);
|
|
|
+ box-shadow: 0 4px 8px rgba(64, 158, 255, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.more-products-btn i {
|
|
|
+ margin-right: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 历史订单商品信息样式 */
|
|
|
+.order-code-cell {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.order-code-text {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #606266;
|
|
|
+ font-family: 'Monaco', 'Consolas', monospace;
|
|
|
+}
|
|
|
+
|
|
|
+.time-cell {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 6px;
|
|
|
+ color: #606266;
|
|
|
+}
|
|
|
+
|
|
|
+.amount-cell, .deposit-cell {
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.amount-symbol, .deposit-symbol {
|
|
|
+ color: #606266;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.amount-value, .deposit-value {
|
|
|
+ color: #606266;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.status-cell {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.product-preview {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+ padding: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.product-name {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #303133;
|
|
|
+ text-align: center;
|
|
|
+ word-break: break-all;
|
|
|
+ max-width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.product-count {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #606266;
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ padding: 2px 8px;
|
|
|
+ border-radius: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.no-product {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+ color: #909399;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.action-buttons {
|
|
|
+ margin-top: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.detail-btn {
|
|
|
+ padding: 4px 12px;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 统一表格样式 */
|
|
|
+.unified-table ::v-deep .el-table__header th {
|
|
|
+ background: #f8f9fa !important;
|
|
|
+ color: #303133 !important;
|
|
|
+ font-weight: 600 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.unified-table ::v-deep .el-table__body td {
|
|
|
+ color: #606266 !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 统一单元格样式 */
|
|
|
+.unified-cell {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 6px;
|
|
|
+ padding: 8px 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.order-code-cell {
|
|
|
+ font-family: 'Monaco', 'Consolas', monospace;
|
|
|
+}
|
|
|
+
|
|
|
+.order-code-text {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #606266;
|
|
|
+}
|
|
|
+
|
|
|
+.time-cell {
|
|
|
+ color: #606266;
|
|
|
+}
|
|
|
+
|
|
|
+.amount-cell, .deposit-cell {
|
|
|
+ gap: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.amount-symbol, .deposit-symbol {
|
|
|
+ color: #606266;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.amount-value, .deposit-value {
|
|
|
+ color: #606266;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.sales-cell {
|
|
|
+ gap: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.sales-cell i {
|
|
|
+ color: #409eff;
|
|
|
+}
|
|
|
+
|
|
|
+.sales-name {
|
|
|
+ color: #606266;
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
+
|
|
|
+.status-cell {
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+/* 商品预览样式 */
|
|
|
+.product-preview {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ padding: 8px 12px;
|
|
|
+ background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid #e9ecef;
|
|
|
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
|
+ transition: all 0.2s ease;
|
|
|
+ max-width: 300px;
|
|
|
+}
|
|
|
+
|
|
|
+.product-preview:hover {
|
|
|
+ transform: translateY(-1px);
|
|
|
+ box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
|
|
|
+ border-color: #409eff;
|
|
|
+}
|
|
|
+
|
|
|
+.unified-product-name {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #409eff;
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
+
|
|
|
+.product-count {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #909399;
|
|
|
+ background: #f5f7fa;
|
|
|
+ padding: 2px 6px;
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.product-name {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #409eff;
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.no-product {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 6px;
|
|
|
+ padding: 12px;
|
|
|
+ color: #909399;
|
|
|
+ font-style: italic;
|
|
|
+}
|
|
|
+
|
|
|
+.no-product i {
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 操作按钮样式 */
|
|
|
+.action-buttons {
|
|
|
+ margin-top: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.unified-btn {
|
|
|
+ background: linear-gradient(135deg, #409eff, #337ab7);
|
|
|
+ border: none;
|
|
|
+ color: white;
|
|
|
+ border-radius: 16px;
|
|
|
+ padding: 5px 12px;
|
|
|
+ font-size: 12px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ box-shadow: 0 2px 4px rgba(64, 158, 255, 0.2);
|
|
|
+}
|
|
|
+
|
|
|
+.unified-btn:hover {
|
|
|
+ background: linear-gradient(135deg, #66b1ff, #409eff);
|
|
|
+ transform: translateY(-1px);
|
|
|
+ box-shadow: 0 4px 8px rgba(64, 158, 255, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.unified-btn i {
|
|
|
+ margin-right: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 统一商品详情弹窗样式 */
|
|
|
+.unified-detail-dialog ::v-deep .el-dialog__header {
|
|
|
+ background: white;
|
|
|
+ color: #303133;
|
|
|
+ padding: 20px;
|
|
|
+ border-bottom: 1px solid #ebeef5;
|
|
|
+}
|
|
|
+
|
|
|
+.unified-detail-dialog ::v-deep .el-dialog__title {
|
|
|
+ color: #303133;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 自定义弹窗标题样式 */
|
|
|
+.dialog-custom-title {
|
|
|
+ .font-small {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.unified-detail-dialog ::v-deep .el-dialog__headerbtn .el-dialog__close {
|
|
|
+ color: #909399;
|
|
|
+}
|
|
|
+
|
|
|
+.unified-detail-dialog ::v-deep .el-dialog__headerbtn .el-dialog__close:hover {
|
|
|
+ color: #409eff;
|
|
|
+}
|
|
|
+
|
|
|
+.compact-dialog-table ::v-deep .el-table__header th {
|
|
|
+ background: #f8f9fa !important;
|
|
|
+ color: #303133 !important;
|
|
|
+ font-weight: 600 !important;
|
|
|
+ padding: 6px 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.compact-dialog-table ::v-deep .el-table__body td {
|
|
|
+ padding: 4px 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-image-container {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-product-image {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ border-radius: 6px;
|
|
|
+ border: 1px solid #ebeef5;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-product-image:hover {
|
|
|
+ transform: scale(1.05);
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
|
+}
|
|
|
+
|
|
|
+.image-placeholder {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: #f5f7fa;
|
|
|
+ color: #909399;
|
|
|
+ font-size: 20px;
|
|
|
+ border-radius: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-product-info {
|
|
|
+ padding: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.product-name-container {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 6px;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-product-name {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #409eff;
|
|
|
+ font-size: 13px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-align: center;
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-price-cell, .dialog-sku-cell {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-pagination {
|
|
|
+ margin-top: 3px;
|
|
|
+ padding: 6px 10px;
|
|
|
+ background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #dee2e6;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-pagination ::v-deep .el-pagination {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+dialog-pagination ::v-deep .el-pagination button,
|
|
|
+dialog-pagination ::v-deep .el-pagination .el-pager li {
|
|
|
+ min-width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 表格内容区域右下角容器 */
|
|
|
+.table-bottom-right-container {
|
|
|
+ position: relative;
|
|
|
+ margin-top: 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-end;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 包装分页组件的容器 */
|
|
|
+.dialog-pagination-wrapper {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ background: transparent;
|
|
|
+ padding: 0;
|
|
|
+ border-radius: 0;
|
|
|
+ box-shadow: none;
|
|
|
+}
|
|
|
+
|
|
|
+/* 分页组件样式 */
|
|
|
+.dialog-pagination {
|
|
|
+ display: inline-block;
|
|
|
+ background: transparent;
|
|
|
+ border: none;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-pagination ::v-deep .el-pagination {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 12px;
|
|
|
+ background: transparent;
|
|
|
+ padding: 0;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-pagination ::v-deep .el-pagination button,
|
|
|
+.dialog-pagination ::v-deep .el-pagination .el-pager li {
|
|
|
+ min-width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+ background: white;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+}
|
|
|
+
|
|
|
+/* 关闭按钮区域样式 */
|
|
|
+.dialog-close-section {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+/* 透明关闭按钮样式 */
|
|
|
+.transparent-close-btn {
|
|
|
+ background: linear-gradient(135deg, #ff6b6b, #ee5a52);
|
|
|
+ border: none;
|
|
|
+ color: white;
|
|
|
+ padding: 8px 20px;
|
|
|
+ border-radius: 6px;
|
|
|
+ font-weight: 500;
|
|
|
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
+ box-shadow: 0 2px 6px rgba(255, 107, 107, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.transparent-close-btn:hover {
|
|
|
+ background: linear-gradient(135deg, #ff5252, #e53935);
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
|
|
|
+}
|
|
|
+
|
|
|
+.transparent-close-btn:active {
|
|
|
+ transform: translateY(0);
|
|
|
+ box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.transparent-close-btn i {
|
|
|
+ margin-right: 6px;
|
|
|
+ font-size: 16px;
|
|
|
+ transition: transform 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.transparent-close-btn:hover i {
|
|
|
+ transform: rotate(90deg);
|
|
|
+}
|
|
|
+
|
|
|
+.compact-close-btn i {
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 商品详情弹窗样式 */
|
|
|
+.product-detail-dialog .el-dialog__header {
|
|
|
+ background: linear-gradient(135deg, #409eff, #337ab7);
|
|
|
+ color: white;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.product-detail-dialog .el-dialog__title {
|
|
|
+ color: white;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.product-detail-dialog .el-dialog__headerbtn .el-dialog__close {
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.product-detail-dialog .el-dialog__headerbtn .el-dialog__close:hover {
|
|
|
+ color: #ffd04b;
|
|
|
+}
|
|
|
+
|
|
|
+/* 商品信息展示样式 */
|
|
|
+.product-preview {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+ padding: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.product-name {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #303133;
|
|
|
+ text-align: center;
|
|
|
+ word-break: break-all;
|
|
|
+ max-width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.product-count {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #606266;
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ padding: 2px 8px;
|
|
|
+ border-radius: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.no-product {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+ color: #909399;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.action-buttons {
|
|
|
+ margin-top: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.detail-btn {
|
|
|
+ padding: 4px 12px;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 统一对齐样式 */
|
|
|
+.text-cell {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 6px;
|
|
|
+ padding: 8px 4px;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.text-content {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #606266;
|
|
|
+ text-align: center;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+
|
|
|
+.currency-symbol {
|
|
|
+ color: #606266;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.number-content {
|
|
|
+ color: #606266;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.tag-cell {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 100%;
|
|
|
+ padding: 8px 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.time-icon {
|
|
|
+ color: #606266;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
