|
@@ -0,0 +1,463 @@
|
|
|
+<template>
|
|
|
+ <div class="order_details">
|
|
|
+ <div class="cotent">
|
|
|
+ <div class="left_part">
|
|
|
+ <div class="order_info">
|
|
|
+ <h2>订单信息</h2>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <p>
|
|
|
+ <span>商家名称:</span>
|
|
|
+ <span>{{ order.shopName }}</span>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span>订单ID:</span>
|
|
|
+ <span>{{ order.orderId }}</span>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span>支付单号:</span>
|
|
|
+ <span>{{ order.transactionId }}</span>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span>订单编号:</span>
|
|
|
+ <span>{{ order.orderFormid }}</span>
|
|
|
+ </p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <p>
|
|
|
+ <span>订单状态:</span>
|
|
|
+ <span v-if="order.state == 1">待付款</span>
|
|
|
+ <span v-else-if="order.state == 2">待发货</span>
|
|
|
+ <span v-else-if="order.state == 3">待收货</span>
|
|
|
+ <span v-else-if="order.state == 4">已完成</span>
|
|
|
+ <span v-else-if="order.state == 5">交易关闭(已取消)</span>
|
|
|
+ <span v-else-if="order.state == 6">待成团</span>
|
|
|
+ <span v-else-if="order.state == 7">待售后</span>
|
|
|
+ <span v-else-if="order.state == 8">待核销(未付款)</span>
|
|
|
+ <span v-else-if="order.state == 9">待核销(已付款)</span>
|
|
|
+ <span v-else-if="order.state == 10">已核销</span>
|
|
|
+ <span v-else>--</span>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span>售后状态:</span>
|
|
|
+ <span>{{ order.afterStateName }}</span>
|
|
|
+ </p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <p>
|
|
|
+ <span>支付方式:</span>
|
|
|
+ <span v-if="order.paymentMode === 1">微信</span>
|
|
|
+ <span v-else-if="order.paymentMode === 2">支付宝</span>
|
|
|
+ <span v-else-if="order.paymentMode === 3">花呗分期</span>
|
|
|
+ <span v-else-if="order.paymentMode === 4">通联支付</span>
|
|
|
+ <span v-else-if="order.paymentMode === 5">平台余额支付</span>
|
|
|
+ <span v-else-if="order.paymentMode === 6">商家余额支付</span>
|
|
|
+ <span v-else-if="order.paymentMode === 7">佣金支付</span>
|
|
|
+ <span v-else-if="order.paymentMode === 8">消费金支付</span>
|
|
|
+ <span v-else-if="order.paymentMode === 9">惠市宝支付</span>
|
|
|
+ <span v-else>--</span>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span>物流方案:</span>
|
|
|
+ <span>{{ order.logisticsName }}</span>
|
|
|
+ </p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <p>
|
|
|
+ <span>商家赠送代金券:</span>
|
|
|
+ <span>{{ order.shopVoucher }}</span>
|
|
|
+ </p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <p>
|
|
|
+ <span>平台赠送代金券:</span>
|
|
|
+ <span>{{ order.platformVoucher }}</span>
|
|
|
+ </p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <p>
|
|
|
+ <span>总赠送代金券:</span>
|
|
|
+ <span>{{ order.presenterVoucher }}</span>
|
|
|
+ </p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <p>
|
|
|
+ <span>创建时间:</span>
|
|
|
+ <span>{{ order.createTime }}</span>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span>支付时间:</span>
|
|
|
+ <span>{{ order.paymentTime }}</span>
|
|
|
+ </p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <p>备注:{{ order.remark }}</p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="goods_info">
|
|
|
+ <h2>商品信息</h2>
|
|
|
+ <div v-for="(item, index) in order.products" :key="index" class="goods_list">
|
|
|
+ <div class="good_price">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <p>商品总价: ¥{{ order.orderPrice }}</p>
|
|
|
+ <p>支付金额: ¥{{ order.price }}</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <p>物流费用: ¥{{ order.logisticsPrice }}</p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="good_details">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img :src="item.image">
|
|
|
+ <div class="details">
|
|
|
+ <p>{{ item.productName }}</p>
|
|
|
+ <p class="skuDetails">
|
|
|
+ <span
|
|
|
+ v-for="(detailsItem, detailsindex) in item.skuDetails" :key="detailsindex"
|
|
|
+ class="detail_span"
|
|
|
+ >
|
|
|
+ {{ detailsItem.skuName }}: {{ detailsItem.skuValue }}
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+ <p>SKU: {{ item.skuId }}</p>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="cen">
|
|
|
+ ¥{{ `${item.productPrice} * ${item.number}` }}
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ {{ order.orderPrice }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 未发货时物流信息显示去发货按钮 -->
|
|
|
+ <div v-show="order.logisticsName && order.logisticsNum" class="logistics_info">
|
|
|
+ <h2>物流信息</h2>
|
|
|
+ <el-button
|
|
|
+ v-if="!order.logisticsNum && (order.state == 2)" type="primary" class="send_good"
|
|
|
+ @click="handleSendGoods"
|
|
|
+ >
|
|
|
+ 去发货
|
|
|
+ </el-button>
|
|
|
+ <div v-else class="logistics_content">
|
|
|
+ <p class="logistics_title">
|
|
|
+ <span>物流公司: {{ order.logisticsName }}</span>
|
|
|
+ <span>运单号: {{ order.logisticsNum }}</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right_part">
|
|
|
+ <div class="pay_order_info">
|
|
|
+ <h2>下单人信息</h2>
|
|
|
+ <p>下单账户: {{ order.customerName }}</p>
|
|
|
+ <p>订单总数: {{ order.total }}个</p>
|
|
|
+ <p>下单备注: {{ order.remark }}</p>
|
|
|
+ </div>
|
|
|
+ <div class="take_goods_info">
|
|
|
+ <h2>收货信息</h2>
|
|
|
+ <p>姓名: {{ order.receiveName }}</p>
|
|
|
+ <p>手机号: {{ order.receivePhone }}</p>
|
|
|
+ <p>地址: {{ order.receiveAdress }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 发货 -->
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="isVisible" title="发货" :close-on-click-modal="false" :modal-append-to-body="false"
|
|
|
+ :modal="false"
|
|
|
+ >
|
|
|
+ <el-form ref="sendGoodsForm" :model="form" :rules="rules" label-width="80px">
|
|
|
+ <el-form-item label="快递公司" prop="express">
|
|
|
+ <el-select v-model="form.express" filterable>
|
|
|
+ <el-option v-for="(item, index) in companyList" :key="index" :label="item.dictName" :value="item.dictId" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="快递单号" prop="deliverFormid">
|
|
|
+ <el-input v-model="form.deliverFormid" maxlength="20" oninput="value = value.replace(/[^\a-\z\A-\Z0-9]/g,'')" />
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <el-form-item label="快递公司编号" prop="shipperCode" v-if="false">
|
|
|
+ <el-input v-model="form.shipperCode" />
|
|
|
+ </el-form-item> -->
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="confirm">确 定</el-button>
|
|
|
+ <el-button @click="cancel">取 消</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { orderGetById, orderGetSelect, orderDilevery } from '@/api/order'
|
|
|
+export default {
|
|
|
+ name: 'PendDetails',
|
|
|
+ props: {
|
|
|
+ detailRow: {
|
|
|
+ type: Object,
|
|
|
+ default: () => ({})
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ order: {},
|
|
|
+ form: {
|
|
|
+ orderId: '',
|
|
|
+ express: '',
|
|
|
+ deliverFormid: ''
|
|
|
+ },
|
|
|
+ isVisible: false,
|
|
|
+ rules: {
|
|
|
+ logisticsName: [
|
|
|
+ { required: false, message: '请输入快递公司名称', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ deliverFormid: [
|
|
|
+ { required: true, message: '请输入快递单号', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ express: [
|
|
|
+ { required: true, message: '请选择快递公司', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ companyList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ detailRow: {
|
|
|
+ handler(nVal, oVal) {
|
|
|
+ if (nVal) {
|
|
|
+ this.form.orderId = nVal.orderId
|
|
|
+ this.getProductList()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.form.orderId = this.detailRow.orderId
|
|
|
+ this.getProductList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getProductList() {
|
|
|
+ const res = await orderGetById({ orderId: this.detailRow.orderId })
|
|
|
+ this.order = res.data
|
|
|
+ },
|
|
|
+ confirm() {
|
|
|
+ this.$refs.sendGoodsForm.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.form.orderId = this.detailRow.orderId
|
|
|
+ orderDilevery(this.form).then((res) => {
|
|
|
+ if (res.code === '') {
|
|
|
+ this.$message({
|
|
|
+ message: '发货成功',
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
+ this.isVisible = false
|
|
|
+ this.$emit('cancel')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ cancel() {
|
|
|
+ this.isVisible = false
|
|
|
+ },
|
|
|
+ async getCompanyList() {
|
|
|
+ const res = await orderGetSelect()
|
|
|
+ if (res.code === '') {
|
|
|
+ this.companyList = res.data
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleSendGoods() {
|
|
|
+ this.getCompanyList()
|
|
|
+ this.isVisible = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+@import url("../../../../styles/elDialog.scss");
|
|
|
+
|
|
|
+ul {
|
|
|
+ list-style: none;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.order_details {
|
|
|
+ h3 {
|
|
|
+ margin: 20px 0 20px 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+
|
|
|
+ .close {
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cotent {
|
|
|
+ margin: 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ .goods_info,
|
|
|
+ .order_info,
|
|
|
+ .logistics_info,
|
|
|
+ .pay_order_info,
|
|
|
+ .take_goods_info {
|
|
|
+ background: #fff;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ padding: 10px 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pay_order_info,
|
|
|
+ .take_goods_info {
|
|
|
+ p {
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ h2 {
|
|
|
+ margin: 0;
|
|
|
+ font-weight: 400;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 18px;
|
|
|
+ text-align: -10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left_part {
|
|
|
+ float: left;
|
|
|
+ width: calc(70% - 10px);
|
|
|
+ margin-right: 10px;
|
|
|
+
|
|
|
+ .order_info {
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ ul {
|
|
|
+ padding: 10px 30px;
|
|
|
+
|
|
|
+ li {
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ p {
|
|
|
+ width: 50%;
|
|
|
+ float: left;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 30px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ &:nth-child(2) {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods_info {
|
|
|
+ .goods_list {
|
|
|
+ padding: 15px;
|
|
|
+
|
|
|
+ .good_price {
|
|
|
+ ul {
|
|
|
+ li {
|
|
|
+ &:nth-child(1) {
|
|
|
+ p {
|
|
|
+ width: 50%;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ border-bottom: 1px gray solid;
|
|
|
+ }
|
|
|
+
|
|
|
+ .good_details {
|
|
|
+ ul {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 20px;
|
|
|
+
|
|
|
+ li {
|
|
|
+ flex: 3;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .details {
|
|
|
+ margin: 0 30px;
|
|
|
+ width: 180px;
|
|
|
+ line-height: 20px;
|
|
|
+
|
|
|
+ .skuDetails {
|
|
|
+ margin-top: 8px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ margin-right: 10px;
|
|
|
+ line-height: 1;
|
|
|
+ color: #9e9e9e;
|
|
|
+
|
|
|
+ .detail_span {
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .logistics_info {
|
|
|
+ .send_good {
|
|
|
+ display: block;
|
|
|
+ margin: 20px auto !important;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .logistics_content {
|
|
|
+ padding: 0 10%;
|
|
|
+
|
|
|
+ .logistics_title {
|
|
|
+ span {
|
|
|
+ margin: 20px 0;
|
|
|
+ display: inline-block;
|
|
|
+ width: 45%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right_part {
|
|
|
+ float: left;
|
|
|
+ width: 30%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|