管理后台-业务中心：点单列表-退款

htmldev/manage/src/views/business/oms/detail/index.vue

@@ -11,8 +11,7 @@
           </el-button>
           <el-button size="mini"
                      type="primary"
-                     @click="showMarkOrderDialog"
-                     v-if="order.order_status === 1">退款
+                     @click="refundDialogVisible = true">退款
           </el-button>
         </div>
       </div>
@@ -32,20 +31,19 @@
           <el-col :span="7" class="table-cell">{{ ['', '微信', '支付宝'][order.order_pay_type] }}</el-col>
           <el-col :span="7" class="table-cell">{{ order.order_pay_time }}</el-col>
         </el-row>
-      </div>
-      <div style="margin-top: 20px">
-        <span class="font-small">用户信息</span>
-      </div>
-      <div class="table-layout">
         <el-row>
-          <el-col :span="8" class="table-cell-title">桌号</el-col>
-          <el-col :span="8" class="table-cell-title">下单用户</el-col>
-          <el-col :span="8" class="table-cell-title">下单手机号</el-col>
+          <el-col :span="3" class="table-cell-title">桌号</el-col>
+          <el-col :span="7" class="table-cell-title">下单用户</el-col>
+          <el-col :span="7" class="table-cell-title">下单手机号</el-col>
+          <el-col :span="7" class="table-cell-title"
+                  style="background: transparent; color: transparent;border-bottom: none;">其它
+          </el-col>
         </el-row>
         <el-row>
-          <el-col :span="8" class="table-cell">{{ order.place_number }}</el-col>
-          <el-col :span="8" class="table-cell">{{ order.user_name }}</el-col>
-          <el-col :span="8" class="table-cell">{{ order.user_phone }}</el-col>
+          <el-col :span="3" class="table-cell">{{ order.place_number }}</el-col>
+          <el-col :span="7" class="table-cell">{{ order.user_name }}</el-col>
+          <el-col :span="7" class="table-cell">{{ order.user_phone }}</el-col>
+          <el-col :span="7" class="table-cell"></el-col>
         </el-row>
       </div>
       <div style="margin-top: 20px">
@@ -66,11 +64,17 @@
           </template>
         </el-table-column>
         <el-table-column label="商品名称" prop="product_name"></el-table-column>
-        <el-table-column label="商品规格" prop="product_sku"></el-table-column>
-        <el-table-column label="规格" prop="product_attach"></el-table-column>
+        <el-table-column label="商品sku" prop="product_sku"></el-table-column>
+        <el-table-column label="商品附加" prop="product_attach"></el-table-column>
         <el-table-column label="数量" prop="product_num"></el-table-column>
-        <el-table-column label="价格" prop="product_unit_price"></el-table-column>
-        <el-table-column label="小计" prop="product_price"></el-table-column>
+        <el-table-column label="商品单价（元）" prop="product_unit_price"></el-table-column>
+        <el-table-column label="商品总价格（元）" prop="product_price"></el-table-column>
+        <el-table-column label="退款金额（元）" prop="product_refund_price"></el-table-column>
+        <el-table-column label="商品状态" fixed="right">
+          <template slot-scope="scope">
+            <p>{{ ['待支付', '已支付', '全部退款', '部分退款', '已取消'][scope.row.product_status] }}</p>
+          </template>
+        </el-table-column>
       </el-table>
       <div style="margin-top: 60px">
         <span class="font-small">费用信息</span>
@@ -93,20 +97,38 @@
       </div>
     </el-card>
     <el-dialog title="退款"
-               :visible.sync="markOrderDialogVisible"
-               width="40%">
-      <el-form :model="markInfo"
-               label-width="150px">
-        <el-form-item label="备注：">
-          <el-input v-model="markInfo.note"
-                    type="textarea"
-                    rows="3">
-          </el-input>
+               :visible.sync="refundDialogVisible"
+               width="60%">
+      <el-form
+        ref="form"
+        :model="form"
+        class="mt-10">
+        <el-form-item label="退款类型:">
+          <el-select v-model="form.refund_type" @change="handleChange">
+            <el-option label="部分退款" :value="1"></el-option>
+            <el-option label="整单退款" :value="0"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="退款商品选择:" v-show="form.refund_type === 1">
+          <el-table
+            ref="multipleTable"
+            :data="order.products"
+            tooltip-effect="dark"
+            style="width: 100%"
+            @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55"></el-table-column>
+            <el-table-column label="商品名称" prop="product_name"></el-table-column>
+            <el-table-column label="商品sku" prop="product_sku"></el-table-column>
+            <el-table-column label="商品附加" prop="product_attach"></el-table-column>
+            <el-table-column label="数量" prop="product_num"></el-table-column>
+            <el-table-column label="商品总价格（元）" prop="product_price"></el-table-column>
+            <el-table-column label="退款金额（元）" prop="product_refund_price"></el-table-column>
+          </el-table>
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="markOrderDialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="handleMarkOrder">确 定</el-button>
+        <el-button @click="refundDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="funRefund">确 定</el-button>
       </span>
     </el-dialog>
   </div>
@@ -118,16 +140,22 @@ export default {
     return {
       id: null,
       order: {},
-      markOrderDialogVisible: false,
-      markInfo: { note: null },
-      tableLoading: true
+      tableLoading: true,
+      refundDialogVisible: false,
+      form: {
+        refund_type: 0,
+        product_ids: []
+      }
     }
   },
   methods: {
-    // todo 退款接口
-    handleMarkOrder () {},
-    showMarkOrderDialog () {
-      this.markOrderDialogVisible = true
+    handleChange (val) {
+      if (val === 0) {
+        this.$refs.multipleTable.clearSelection()
+      }
+    },
+    handleSelectionChange (val) {
+      this.$set(this.form, 'product_ids', val)
     },
     // 获取订单详情
     async fetchOrderDetail () {
@@ -138,6 +166,18 @@ export default {
       if (code === 200) {
         this.order = data
       }
+    },
+    // 退款
+    async funRefund () {
+      const { code, msg } = await this.$fetch('/v1/user/order/refund', {
+        id: this.$route.query.id,
+        ...this.form,
+        product_ids: this.form.product_ids.map(item => item.id)
+      })
+      if (code === 200) {
+        this.$message.success('退款成功')
+        this.fetchOrderDetail()
+      }
     }
   },
   created () {