From 33c3ff49ad1d6a0607a9abd9f66164a6eb084ccd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=99=E5=90=8C=E5=AD=A6?= <2495967527@qq.com>
Date: Tue, 31 Dec 2024 18:01:08 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/modules/coupon/index.vue            |  10 +-
 .../modules/coupon/popup/view-details.vue     | 188 +++++++++
 .../operation-management/order/index.vue      | 112 ++---
 .../order/popup/view-details.vue              | 256 +++++++++++-
 src/views/modules/presale/products/index.vue  |  31 +-
 .../presale/products/popup/view-products.vue  | 384 ++++++++++++++++++
 6 files changed, 882 insertions(+), 99 deletions(-)
 create mode 100644 src/views/modules/coupon/popup/view-details.vue
 create mode 100644 src/views/modules/presale/products/popup/view-products.vue

diff --git a/src/views/modules/coupon/index.vue b/src/views/modules/coupon/index.vue
index a3d4bf0..f518b92 100644
--- a/src/views/modules/coupon/index.vue
+++ b/src/views/modules/coupon/index.vue
@@ -105,7 +105,7 @@
     <!-- 新粉优惠卷 -->
     <newPowder @queryList="$refs.oTable.reload()" ref="newPowder"></newPowder>
     <!-- 查看详情 -->
-    <!-- <viewDetails ref="viewDetails"></viewDetails> -->
+    <viewDetails ref="viewDetails"></viewDetails>
   </div>
 </template>
 
@@ -114,9 +114,9 @@ import { mapState } from "vuex";
 import fullReductio from "./popup/full-reduction.vue";
 import AddOrUpdate from "./popup/add-or-update.vue";
 import newPowder from "./popup/new-powder.vue";
-// import viewDetails from "./popup/view-details.vue";
+import viewDetails from "./popup/view-details.vue";
 export default {
-  components: { AddOrUpdate, fullReductio, newPowder },
+  components: { AddOrUpdate, fullReductio, newPowder, viewDetails },
   data() {
     return {
       dataList: [],
@@ -406,9 +406,9 @@ export default {
           type: "jsx",
           align: "center",
           width: "140px",
-          render: (row) => {
+          render: ({ row }) => {
             let edit = () => {
-              //   this.$refs.viewDetails.toggle(row).update();
+              this.$refs.viewDetails.toggle(row).update();
             };
             return (
               <div>
diff --git a/src/views/modules/coupon/popup/view-details.vue b/src/views/modules/coupon/popup/view-details.vue
new file mode 100644
index 0000000..15a2361
--- /dev/null
+++ b/src/views/modules/coupon/popup/view-details.vue
@@ -0,0 +1,188 @@
+<template>
+  <div>
+    <obj-modal
+      ref="modal"
+      labelWidth="150px"
+      :modalConfig="modalConfig"
+      :modalData="modalData"
+      :modalHandles="modalHandles"
+    >
+      <div slot="dialog__content">
+        <el-form
+          :model="ruleForm"
+          ref="ruleForm"
+          label-width="150px"
+          class="demo-ruleForm"
+        >
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="优惠卷名称：">
+                <span>{{ ruleForm.name }}</span>
+              </el-form-item></el-col
+            >
+            <el-col :span="8">
+              <el-form-item label="优惠卷类别：">
+                <span>{{ getCategory(ruleForm.category) }}</span>
+              </el-form-item></el-col
+            >
+            <el-col :span="8">
+              <el-form-item label="优惠金额：">
+                <span>{{ ruleForm.money }}</span>
+              </el-form-item></el-col
+            >
+          </el-row>
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="最低消费：">
+                <span>{{ ruleForm.minPrice }}</span>
+              </el-form-item></el-col
+            >
+            <el-col :span="8">
+              <el-form-item label="领取限量：">
+                <span>{{ ruleForm.limitedNum }}</span>
+              </el-form-item></el-col
+            >
+            <el-col :span="8">
+              <el-form-item label="发放总数：">
+                <span>{{ ruleForm.total }}</span>
+              </el-form-item></el-col
+            >
+          </el-row>
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="剩余数量：">
+                <span>{{ ruleForm.lastTotal }}</span>
+              </el-form-item></el-col
+            >
+            <el-col :span="8">
+              <el-form-item label="可领取开始时间：">
+                <span>{{ ruleForm.receiveStartTime }}</span>
+              </el-form-item></el-col
+            >
+            <el-col :span="8">
+              <el-form-item label="可领取结束时间：">
+                <span>{{ ruleForm.receiveEndTime }}</span>
+              </el-form-item></el-col
+            >
+          </el-row>
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="使用时间范围开始时间：">
+                <span>{{ ruleForm.useStartTime }}</span>
+              </el-form-item></el-col
+            >
+            <el-col :span="8">
+              <el-form-item label="可使用时间范围结束时间：">
+                <span>{{ ruleForm.useEndTime }}</span>
+              </el-form-item></el-col
+            >
+            <el-col :span="8">
+              <el-form-item label="状态：">
+                <span>{{ ruleForm.status == 1 ? "开启" : "结束" }}</span>
+              </el-form-item></el-col
+            >
+          </el-row>
+        </el-form>
+      </div>
+      <!-- 选择商品 -->
+    </obj-modal>
+  </div>
+</template>
+<script>
+import { debounce, cloneDeep } from "lodash";
+export default {
+  components: {},
+  props: {},
+  data() {
+    return {
+      isAdd: true,
+      //表格属性
+      modalConfig: {
+        title: "优惠卷详情",
+        show: false,
+        width: "1200px",
+        fullscreen: true,
+      },
+      modalData: {},
+      ruleForm: {},
+      tableData: [],
+    };
+  },
+  watch: {
+    // "modalConfig.show"(newVal) {
+    //   if (newVal) {
+    //     //关闭弹窗清空校验
+    //     setTimeout(() => {
+    //       this.$refs.ruleForm.resetFields();
+    //     });
+    //   }
+    // },
+  },
+  methods: {
+    queryTableData(pageNo, pageSize) {},
+    toggle(e) {
+      if (this.modalConfig.show == false) {
+        this.modalConfig.show = true;
+      } else {
+        this.modalConfig.show = false;
+      }
+      if (e) {
+        this.init(cloneDeep(e));
+      }
+      return {
+        add: () => {
+          this.modalConfig.title = "订单详情";
+          this.isAdd = true;
+        },
+        update: () => {
+          this.modalConfig.title = "优惠卷详情";
+          this.isAdd = false;
+        },
+      };
+    },
+    init(row) {
+      console.log(row);
+      this.ruleForm = JSON.parse(JSON.stringify(row));
+      console.log(this.ruleForm);
+    },
+    handleSelectionChange(e) {
+      console.log(e);
+    },
+    getCategory(val) {
+      if (val == "NO_THRESHOLD") {
+        return "无门槛优惠券"
+      } else if (val == "MAX_OUT") {
+        return "满减优惠券"
+      } else if (val == "FIRST_ATTENTION") {
+        return "首次关注优惠券"
+      } else if (val == "BIRTHDAY") {
+        return "生日券"
+      } else if (val == "PLATFORM") {
+        return "平台优惠券"
+      }
+    },
+  },
+  computed: {
+    modalHandles() {
+      return [
+        {
+          label: "关闭",
+          handle: () => {
+            this.toggle();
+          },
+        },
+        // {
+        //   label: "确认",
+        //   type: "primary",
+        //   // submit: true,
+        //   handle: () => {
+        //   },
+        // },
+      ];
+    },
+  },
+  asyncComputed: {},
+};
+</script>
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/src/views/modules/operation-management/order/index.vue b/src/views/modules/operation-management/order/index.vue
index da6f56b..50cd033 100644
--- a/src/views/modules/operation-management/order/index.vue
+++ b/src/views/modules/operation-management/order/index.vue
@@ -1,52 +1,52 @@
 <template>
-    <div style="height: calc(100vh - 200px)">
-      <obj-table-plus
-        ref="oTable"
-        style="height: 100%"
-        :tableCols="tableCols"
-        :tableProp="tableProp"
-        @query="queryList"
-        v-model="dataList"
-        :tableEvent="tableEvent"
-        :enableAutoQuery="false"
-      >
-        <template slot="tableTop">
-          <el-form :inline="true" :model="formInline" class="demo-form-inline">
-            <el-form-item label="订单号">
-              <el-select v-model="formInline.group" placeholder="请选择">
-                <el-option
-                  v-for="item in statusList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                >
-                </el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item v-if="storeList.length > 1" label="摊铺">
-              <el-select
-                class="filter-item"
-                style="width: 200px"
-                v-model="formInline.shopId"
-                placeholder="请选择摊铺"
+  <div style="height: calc(100vh - 200px)">
+    <obj-table-plus
+      ref="oTable"
+      style="height: 100%"
+      :tableCols="tableCols"
+      :tableProp="tableProp"
+      @query="queryList"
+      v-model="dataList"
+      :tableEvent="tableEvent"
+      :enableAutoQuery="false"
+    >
+      <template slot="tableTop">
+        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+          <el-form-item label="订单号">
+            <el-select v-model="formInline.group" placeholder="请选择">
+              <el-option
+                v-for="item in statusList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
               >
-                <el-option
-                  v-for="item in storeList"
-                  :key="item.shopId"
-                  :label="item.shopName"
-                  :value="item.shopId"
-                >
-                </el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="$refs.oTable.reload()"
-                >查询</el-button
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item v-if="storeList.length > 1" label="摊铺">
+            <el-select
+              class="filter-item"
+              style="width: 200px"
+              v-model="formInline.shopId"
+              placeholder="请选择摊铺"
+            >
+              <el-option
+                v-for="item in storeList"
+                :key="item.shopId"
+                :label="item.shopName"
+                :value="item.shopId"
               >
-              <el-button type="primary" @click="Reset">重置</el-button>
-            </el-form-item>
-          </el-form>
-          <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="$refs.oTable.reload()"
+              >查询</el-button
+            >
+            <el-button type="primary" @click="Reset">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
             <el-tab-pane
               v-for="item in statusList"
               :key="item.value"
@@ -54,16 +54,16 @@
               :name="item.value"
             ></el-tab-pane>
           </el-tabs> -->
-          <!-- <div class="mb-2">
+        <!-- <div class="mb-2">
             <el-button type="primary" size="small" @click="addProduct"
               >批量导出</el-button
             >
           </div> -->
-        </template>
-      </obj-table-plus>
-      <!-- 订单详情 -->
-      <viewDetails ref="viewDetails"></viewDetails>
-    </div>
+      </template>
+    </obj-table-plus>
+    <!-- 订单详情 -->
+    <viewDetails ref="viewDetails"></viewDetails>
+  </div>
 </template>
 
 <script>
@@ -71,7 +71,7 @@ import viewDetails from "./popup/view-details.vue";
 import content from "./popup/content.vue";
 import { mapState } from "vuex";
 export default {
-  components: { content,viewDetails },
+  components: { content, viewDetails },
   data() {
     return {
       activeName: "5",
@@ -374,12 +374,12 @@ export default {
           align: "center",
           width: "100px",
           render: ({ row }) => {
-            let changeInventory = () => {
-              this.$refs.addStock.toggle(row).update();
+            let view = () => {
+              this.$refs.viewDetails.toggle(row).update();
             };
             return (
               <div>
-                <el-button size="mini" type="primary" onClick={changeInventory}>
+                <el-button size="mini" type="primary" onClick={view}>
                   查看
                 </el-button>
               </div>
diff --git a/src/views/modules/operation-management/order/popup/view-details.vue b/src/views/modules/operation-management/order/popup/view-details.vue
index 6a2df06..2ecad38 100644
--- a/src/views/modules/operation-management/order/popup/view-details.vue
+++ b/src/views/modules/operation-management/order/popup/view-details.vue
@@ -3,23 +3,214 @@
     <obj-modal
       ref="modal"
       labelWidth="150px"
-      :modalCols="modalCols"
       :modalConfig="modalConfig"
       :modalData="modalData"
       :modalHandles="modalHandles"
     >
-      <template slot="dialog__after">
-        <div class="introduce">
-        </div>
-      </template>
+      <div slot="dialog__content">
+        <el-form
+          :model="ruleForm"
+          ref="ruleForm"
+          label-width="150px"
+          class="demo-ruleForm"
+        >
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="总订单号：">
+                <span>{{ ruleForm.orderNo }}</span>
+              </el-form-item></el-col
+            >
+            <el-col :span="8">
+              <el-form-item label="	结算单位订单号：">
+                <span>{{ ruleForm.unitOrderNo }}</span>
+              </el-form-item></el-col
+            >
+            <el-col :span="8">
+              <el-form-item label="总商品数量：">
+                <span>{{ ruleForm.productCount }}</span>
+              </el-form-item></el-col
+            >
+          </el-row>
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="顾客支付：">
+                <span>{{ ruleForm.totalMoney }}</span>
+              </el-form-item></el-col
+            >
+            <el-col :span="8">
+              <el-form-item label="配送费：">
+                <span>{{ ruleForm.deliveryMoney }}</span>
+              </el-form-item></el-col
+            >
+            <el-col :span="8">
+              <el-form-item label="优惠券减免：">
+                <span>{{ ruleForm.couponMoney }}</span>
+              </el-form-item></el-col
+            >
+          </el-row>
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="下单时间：">
+                <span>{{ ruleForm.payTime }}</span>
+              </el-form-item></el-col
+            >
+            <el-col :span="8">
+              <el-form-item label="预计送达时间：">
+                <span>{{ ruleForm.predictDeliveryTime }}</span>
+              </el-form-item></el-col
+            >
+            <el-col :span="8">
+              <el-form-item label="预计收入：">
+                <span>{{ ruleForm.predictIncome }}</span>
+              </el-form-item></el-col
+            >
+          </el-row>
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="距离：">
+                <span>{{ ruleForm.distance }}</span>
+              </el-form-item></el-col
+            >
+            <el-col :span="8">
+              <el-form-item label="预计自动取消时间：">
+                <span>{{ ruleForm.predictAutoCancelTime }}</span>
+              </el-form-item></el-col
+            >
+            <el-col :span="8">
+              <el-form-item label="备注：">
+                <span>{{ ruleForm.remark }}</span>
+              </el-form-item></el-col
+            >
+          </el-row>
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="包装费：">
+                <span>{{ ruleForm.packageMoney }}</span>
+              </el-form-item></el-col
+            >
+            <el-col :span="8">
+              <el-form-item label="平台服务费：">
+                <span>{{ ruleForm.platformMoney }}</span>
+              </el-form-item></el-col
+            >
+            <el-col :span="8">
+              <el-form-item label="备餐完成时间：">
+                <span>{{ ruleForm.completePrepareTime }}</span>
+              </el-form-item></el-col
+            >
+          </el-row>
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="开始配送时间：">
+                <span>{{ ruleForm.startDeliveryTime }}</span>
+              </el-form-item></el-col
+            >
+            <el-col :span="8">
+              <el-form-item label="配送完成时间：">
+                <span>{{ ruleForm.completeDeliveryTime }}</span>
+              </el-form-item></el-col
+            >
+            <el-col :span="8">
+              <el-form-item label="订单退款状态：">
+                <span>{{ getRefundStatus(ruleForm.refundStatus) }}</span>
+              </el-form-item></el-col
+            >
+          </el-row>
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="申请退款原因：">
+                <span>{{ ruleForm.refundReason }}</span>
+              </el-form-item></el-col
+            >
+            <el-col :span="8">
+              <el-form-item label="申请退款时间：">
+                <span>{{ ruleForm.applyRefundTime }}</span>
+              </el-form-item></el-col
+            >
+            <el-col :span="8">
+              <!-- <el-form-item label="配送方式：">
+                <span>{{ ruleForm.deliveryType }}</span>
+              </el-form-item> -->
+            </el-col>
+          </el-row>
+          <div style="padding: 0 0 0 20px; font-size: 16px; font-weight: 600">
+            订单商品
+          </div>
+          <div style="padding: 20px">
+            <div style="border-top: 1px solid #ccc; padding: 10px 0 0 0">
+              <el-table
+                border
+                ref="multipleTable"
+                :data="ruleForm.productOrders"
+                tooltip-effect="dark"
+                style="width: 100%"
+                @selection-change="handleSelectionChange"
+              >
+                <el-table-column
+                  prop="shopName"
+                  align="center"
+                  label="店铺名称"
+                  width="80"
+                >
+                </el-table-column>
+                <el-table-column
+                  align="center"
+                  label="商品名称"
+                  prop="productName"
+                />
+                <el-table-column
+                  align="center"
+                  label="商品图片"
+                  prop="productImg"
+                >
+                  <template slot-scope="scope">
+                    <el-image
+                      style="width: 60px; height: 60px"
+                      :src="scope.row.productImg"
+                      :preview-src-list="[scope.row.productImg]"
+                    >
+                    </el-image>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  align="center"
+                  label="规格"
+                  prop="productSpecName"
+                >
+                </el-table-column>
+                <el-table-column
+                  align="center"
+                  label="商品原价"
+                  prop="originPrice"
+                >
+                </el-table-column>
+                <el-table-column
+                  align="center"
+                  label="商品终价"
+                  prop="finalPrice"
+                  width="120"
+                />
+                <el-table-column
+                  prop="productOrderMoney"
+                  align="center"
+                  label="商品订单金额"
+                  width="200"
+                >
+                </el-table-column>
+              </el-table>
+            </div>
+          </div>
+        </el-form>
+      </div>
+      <!-- 选择商品 -->
     </obj-modal>
   </div>
 </template>
 <script>
 import { debounce, cloneDeep } from "lodash";
-import { Divider } from "element-ui";
 export default {
   components: {},
+  props: {},
   data() {
     return {
       isAdd: true,
@@ -27,13 +218,24 @@ export default {
       modalConfig: {
         title: "订单详情",
         show: false,
-        width: "60%",
+        width: "1200px",
+        fullscreen: true,
       },
       modalData: {},
-      value1: [],
-      ProductData: {},
+      ruleForm: {},
+      tableData: [],
     };
   },
+  watch: {
+    // "modalConfig.show"(newVal) {
+    //   if (newVal) {
+    //     //关闭弹窗清空校验
+    //     setTimeout(() => {
+    //       this.$refs.ruleForm.resetFields();
+    //     });
+    //   }
+    // },
+  },
   methods: {
     queryTableData(pageNo, pageSize) {},
     toggle(e) {
@@ -51,26 +253,52 @@ export default {
           this.isAdd = true;
         },
         update: () => {
+          this.modalConfig.title = "订单详情";
           this.isAdd = false;
         },
       };
     },
     init(row) {
-      this.modalData = row;
+      console.log(row);
+      this.ruleForm = row;
+    },
+    handleSelectionChange(e) {
+      console.log(e);
+    },
+    getRefundStatus(val) {
+      if (val == 0) {
+        return "正常";
+      } else if (val == 1) {
+        return "退款中";
+      } else if (val == 2) {
+        return "完全退款";
+      } else if (val == 3) {
+        return "部分退款";
+      } else if (val == 4) {
+        return "拒绝用户退款";
+      } else if (val == -1) {
+        return "退款失败";
+      } else if (val == -2) {
+        return "用户申请退款中";
+      }
     },
   },
   computed: {
-    modalCols() {
-      return [];
-    },
     modalHandles() {
       return [
         {
-          label: "取消",
+          label: "关闭",
           handle: () => {
             this.toggle();
           },
         },
+        // {
+        //   label: "确认",
+        //   type: "primary",
+        //   // submit: true,
+        //   handle: () => {
+        //   },
+        // },
       ];
     },
   },
diff --git a/src/views/modules/presale/products/index.vue b/src/views/modules/presale/products/index.vue
index 68f1f16..3bf1a93 100644
--- a/src/views/modules/presale/products/index.vue
+++ b/src/views/modules/presale/products/index.vue
@@ -49,16 +49,6 @@
                 placeholder="商品名称搜索"
               ></el-input>
             </el-form-item>
-            <!-- <el-form-item label="状态">
-              <el-select v-model="formInline.status" placeholder="请选择状态">
-                <el-option
-                  v-for="item in statusList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                ></el-option>
-              </el-select>
-            </el-form-item> -->
             <el-form-item>
               <el-button type="primary" @click="$refs.oTable.reload()"
                 >查询</el-button
@@ -98,15 +88,12 @@
         @queryList="$refs.oTable.reload()"
         ref="addOrUpdate"
       ></add-or-update>
-      <!-- 改价格 -->
-      <!-- <AddPrice ref="AddPrice" @queryList="$refs.oTable.reload()"></AddPrice> -->
-      <!-- 改库存 -->
-      <!-- <addStock ref="addStock" @queryList="$refs.oTable.reload()"></addStock> -->
-      <!-- 打折扣 -->
       <earlyWarning
         ref="earlyWarning"
         @queryList="$refs.oTable.reload()"
       ></earlyWarning>
+      <!-- 查看商品 -->
+      <viewProducts ref="viewProducts"></viewProducts>
     </div>
     <div style="height: calc(100vh - 200px)" v-else>
       <el-empty :image-size="200" description="您不是摊主哦"></el-empty>
@@ -115,13 +102,12 @@
 </template>
 
 <script>
-// import AddDiscount from "./popup/add-discount.vue";
-// import AddPrice from "./popup/add-price.vue";
 import { mapState } from "vuex";
+import viewProducts from "./popup/view-products.vue";
 import AddOrUpdate from "./popup/add-or-update.vue";
 import earlyWarning from "./popup/early-warning.vue";
 export default {
-  components: { earlyWarning, AddOrUpdate },
+  components: { earlyWarning, AddOrUpdate, viewProducts },
   data() {
     return {
       activeName: "5",
@@ -496,15 +482,12 @@ export default {
                   this.$refs.oTable.reload();
                 });
             };
-            let changeInventory = () => {
-              this.$refs.addStock.toggle(row).update();
-            };
-            let setDiscounts = () => {
-              this.$refs.AddDiscount.toggle(row).update();
+            let view = () => {
+              this.$refs.viewProducts.toggle(row).update();
             };
             return (
               <div>
-                <el-button size="mini" type="primary" onClick={changeInventory}>
+                <el-button size="mini" type="primary" onClick={view}>
                   查看
                 </el-button>
                 <el-button
diff --git a/src/views/modules/presale/products/popup/view-products.vue b/src/views/modules/presale/products/popup/view-products.vue
new file mode 100644
index 0000000..6d0f2e7
--- /dev/null
+++ b/src/views/modules/presale/products/popup/view-products.vue
@@ -0,0 +1,384 @@
+<template>
+  <div>
+    <obj-modal
+      ref="modal"
+      labelWidth="150px"
+      :modalConfig="modalConfig"
+      :modalData="modalData"
+      :modalHandles="modalHandles"
+    >
+      <div slot="dialog__content">
+        <el-form
+          :model="ruleForm"
+          ref="ruleForm"
+          label-width="150px"
+          class="demo-ruleForm"
+        >
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="订金支付时间：" prop="startTime">
+                <el-date-picker
+                  @change="getOrderTime"
+                  format="yyyy-MM-dd HH:mm"
+                  data-format="yyyy-MM-dd HH:mm"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  v-model="orderTime"
+                  type="datetimerange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  :editable="false"
+                >
+                </el-date-picker> </el-form-item
+            ></el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="尾款支付时间："
+                prop="balancePaymentStartTime"
+              >
+                <el-date-picker
+                  @change="getArrearsTime"
+                  format="yyyy-MM-dd"
+                  data-format="yyyy-MM-dd"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  v-model="arrears"
+                  type="datetimerange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  :picker-options="pickerOptions"
+                >
+                </el-date-picker> </el-form-item
+            ></el-col>
+          </el-row>
+          <el-form-item
+            label="预计发货时间："
+            prop="estimatedStartDeliveryTime"
+          >
+            <el-date-picker
+              format="yyyy-MM-dd HH:mm"
+              data-format="yyyy-MM-dd HH:mm"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              @change="deliveryTime"
+              v-model="delivery"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :picker-options="pickerOptions"
+            >
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="定金可退：" prop="isRefundEarnestMoney">
+            <el-radio v-model="ruleForm.isRefundEarnestMoney" :label="1"
+              >是</el-radio
+            >
+            <el-radio v-model="ruleForm.isRefundEarnestMoney" :label="2"
+              >否</el-radio
+            >
+            <span>
+              选择是，用户可在付尾款前申请退定金（申请后自动退，无需审核），或付尾款时间结束后系统自动退定金
+            </span>
+          </el-form-item>
+
+          <div style="padding: 0 0 0 20px; font-size: 16px; font-weight: 600">
+            已选择商品
+          </div>
+          <div style="padding: 20px">
+            <div style="border-top: 1px solid #ccc; padding: 10px 0 0 0">
+              <div style="font-size: 16px; margin-bottom: 20px">
+                <span>商品ID:{{ ruleForm.productId }}</span>
+                <span style="margin-left: 20px"
+                  >商品名称:{{ ruleForm.name }}</span
+                >
+              </div>
+              <el-table
+                border
+                ref="multipleTable"
+                :data="ruleForm.productSpecificationList"
+                tooltip-effect="dark"
+                style="width: 100%"
+                @selection-change="handleSelectionChange"
+              >
+                <el-table-column align="center" label="是否预售" width="80">
+                  <template slot-scope="scope">
+                    <span>{{
+                      scope.row.isAdvanceSell == 1 ? "是" : "否"
+                    }}</span>
+                    <!-- <el-checkbox
+                      :true-label="1"
+                      :false-label="0"
+                      v-model="scope.row.isAdvanceSell"
+                    ></el-checkbox> -->
+                  </template>
+                </el-table-column>
+                <el-table-column align="center" label="SKU-ID" prop="id" />
+                <el-table-column
+                  align="center"
+                  label="规格"
+                  prop="attributeList"
+                >
+                  <template slot-scope="scope">
+                    <span>{{ scope.row.attributeValue }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column align="center" label="属性" prop="address">
+                  <template slot-scope="scope">
+                    <span>{{
+                      scope.row.attributeList
+                        ? scope.row.attributeList[0].attributeName
+                        : "无"
+                    }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  align="center"
+                  label="销售价"
+                  prop="marketPrice"
+                  width="120"
+                />
+                <el-table-column
+                  prop="presalePrice"
+                  align="center"
+                  label="*预售价"
+                  width="200"
+                >
+                  <template slot-scope="scope">
+                    <span v-if="scope.row.isAdvanceSell">{{
+                      scope.row.presalePrice
+                    }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  prop="earnestMoney"
+                  align="center"
+                  label="*定金"
+                  width="200"
+                >
+                  <template slot-scope="scope">
+                    <span v-if="scope.row.isAdvanceSell">{{
+                      scope.row.earnestMoney
+                    }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column align="center" label="尾款" width="200">
+                  <template slot-scope="scope">
+                    <span v-if="scope.row.isAdvanceSell">{{
+                      scope.row.presalePrice
+                        ? scope.row.presalePrice - scope.row.earnestMoney
+                        : ""
+                    }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column align="center" label="*预售库存" width="200">
+                  <template slot-scope="scope">
+                    <span v-if="scope.row.isAdvanceSell">{{
+                      scope.row.advanceSellStockNum
+                    }}</span>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+            <el-empty
+              v-show="ruleForm.productList?.length == 0"
+              description="请选择商品"
+            ></el-empty>
+          </div>
+        </el-form>
+      </div>
+      <!-- 选择商品 -->
+    </obj-modal>
+  </div>
+</template>
+<script>
+import { debounce, cloneDeep } from "lodash";
+export default {
+  components: {},
+  props: {
+    marketId: {
+      type: String,
+      default: "",
+    },
+    shopId: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      isAdd: true,
+      //表格属性
+      modalConfig: {
+        title: "查看预售",
+        show: false,
+        width: "1200px",
+        fullscreen: true,
+      },
+      modalData: {},
+      ruleForm: {
+        productList: [],
+        isRefundEarnestMoney: 1, //定金可退 1是 2否
+      },
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getTime() < Date.now();
+        },
+      },
+      orderTime: [], //订单支付时间
+      arrears: [], //尾款时间
+      delivery: [], //发货时间
+      tableData: [],
+    };
+  },
+  watch: {
+    "modalConfig.show"(newVal) {
+      if (newVal) {
+        //关闭弹窗清空校验
+        setTimeout(() => {
+          this.$refs.ruleForm.resetFields();
+        });
+      }
+    },
+  },
+  methods: {
+    queryTableData(pageNo, pageSize) {},
+    toggle(e) {
+      if (this.modalConfig.show == false) {
+        this.modalConfig.show = true;
+      } else {
+        this.modalConfig.show = false;
+      }
+      if (e) {
+        this.init(cloneDeep(e));
+      }
+      return {
+        add: () => {
+          this.orderTime = [];
+          this.arrears = [];
+          this.delivery = [];
+          this.ruleForm = {
+            startTime: "",
+            endTime: "",
+            balancePaymentStartTime: "",
+            balancePaymentEndTime: "",
+            estimatedStartDeliveryTime: "",
+            estimatedEndDeliveryTime: "",
+            productList: [],
+            isRefundEarnestMoney: 1, //定金可退 1是 2否
+          };
+          this.modalConfig.title = "新增预售";
+          this.isAdd = true;
+        },
+        update: () => {
+          this.modalConfig.title = "查看预售";
+          this.isAdd = false;
+        },
+      };
+    },
+    init(row) {
+      console.log(row.startTime, row.endTime);
+      this.orderTime = [row.startTime, row.endTime];
+      this.arrears = [row.balancePaymentStartTime, row.balancePaymentEndTime];
+      this.delivery = [
+        row.estimatedStartDeliveryTime,
+        row.estimatedEndDeliveryTime,
+      ];
+      (this.ruleForm = {
+        productId: row.id,
+        advanceSellId: row.advanceSellId,
+        startTime: row.startTime,
+        name: row.name,
+        endTime: row.endTime,
+        balancePaymentStartTime: row.balancePaymentStartTime,
+        balancePaymentEndTime: row.balancePaymentEndTime,
+        estimatedStartDeliveryTime: row.estimatedStartDeliveryTime,
+        estimatedEndDeliveryTime: row.estimatedEndDeliveryTime,
+        isRefundEarnestMoney: row.isRefundEarnestMoney,
+        productSpecificationList: row.productSpecificationList,
+      }),
+        console.log(this.orderTime, this.arrears, this.delivery);
+
+      // this.ruleForm = row;
+    },
+    //订单支付时间
+    getOrderTime(e) {
+      if (e) {
+        console.log(e);
+        this.ruleForm.startTime = e[0];
+        this.ruleForm.endTime = e[1];
+      } else {
+        this.ruleForm.startTime = "";
+        this.ruleForm.endTime = "";
+      }
+    },
+    //尾款支付时间
+    getArrearsTime(e) {
+      if (e) {
+        console.log(e);
+        this.ruleForm.balancePaymentStartTime = e[0];
+        this.ruleForm.balancePaymentEndTime = e[1];
+      } else {
+        this.ruleForm.balancePaymentStartTime = "";
+        this.ruleForm.balancePaymentEndTime = "";
+      }
+    },
+    //发货时间
+    deliveryTime(e) {
+      if (e) {
+        console.log(e);
+        this.ruleForm.estimatedStartDeliveryTime = e[0];
+        this.ruleForm.estimatedEndDeliveryTime = e[1];
+      } else {
+        this.ruleForm.estimatedStartDeliveryTime = "";
+        this.ruleForm.estimatedEndDeliveryTime = "";
+      }
+    },
+    selectProduct() {
+      console.log("选择商品", this.marketId, this.shopId);
+      this.$nextTick(() => {
+        this.$refs.commodity.toggle().add({
+          marketId: this.marketId,
+          shopId: this.shopId,
+        });
+      });
+    },
+    handleSelectionChange(e) {
+      console.log(e);
+    },
+    getProduct(row) {
+      this.ruleForm.productList = row.map((item) => {
+        return {
+          productId: item.id,
+          name: item.name,
+          productSpecificationList: item.productSpecificationList,
+        };
+      });
+      console.log(this.ruleForm.productList, this.ruleForm.productList.length);
+
+      console.log("获取商品");
+    },
+  },
+  computed: {
+    modalHandles() {
+      return [
+        {
+          label: "关闭",
+          handle: () => {
+            this.toggle();
+          },
+        },
+        // {
+        //   label: "确认",
+        //   type: "primary",
+        //   // submit: true,
+        //   handle: () => {
+        //   },
+        // },
+      ];
+    },
+  },
+  asyncComputed: {},
+};
+</script>
+<style lang="scss" scoped>
+</style>
\ No newline at end of file