售后订单审核

src/api/yxStoreAfterSales.js

@@ -8,13 +8,21 @@ export function getData(data) {
   })
 }
 
-export function salesCheck() {
+export function salesCheck(data) {
   return request({
     url: '/api/yxStoreAfterSales/salesCheck',
-    method: 'post'
+    method: 'post',
+    data
   })
 }
 
+export function rebackMoney(data) {
+  return request({
+    url: '/api/yxStoreAfterSales/makeMoney',
+    method: '',
+    data
+  })
+}
 export function add(data) {
   return request({
     url: 'api/yxStoreAfterSales',

src/views/shop/afterSeals/addDialog.vue

@@ -1,92 +0,0 @@
-<template>
-  <el-dialog
-  class="afterSealsAdd"
-  :close-on-click-modal="false"
-  :visible.sync="visible"
-  :title="'添加'" width="500px">
-    <div v-if="serviceType === 0">
-      <span>该订单为仅退款订单，审核通过之后需进行退款，是否审核通过？</span>
-    </div>
-    <div v-if="serviceType === 1">
-      <span>该订单为退货退款，请输入退货地址：</span>
-      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
-        <el-form-item label="收货人" prop="consignee">
-          <el-input v-model="form.consignee" style="width: 370px;" />
-        </el-form-item>
-        <el-form-item label="手机号" prop="phoneNumber">
-          <el-input v-model="form.phoneNumber" style="width: 370px;" />
-        </el-form-item>
-        <el-form-item label="地址" prop="address">
-          <el-input v-model="form.address" style="width: 370px;" />
-        </el-form-item>
-      </el-form>
-    </div>
-    <div slot="footer" class="dialog-footer">
-      <el-button type="text" @click="cancel">取消</el-button>
-      <el-button :loading="loading" type="primary" @click="submit">确认</el-button>
-    </div>
-  </el-dialog>
-</template>
-
-<script>
-import {salesCheck} from '@/api/yxStoreAfterSales.js'
-export default {
-  props: {
-  },
-  data () {
-    return {
-      visible: false,
-      isShow: false,
-      loading: false,
-      serviceType: '',
-      form: {
-        salesId: '', // 售后id
-        orderCode: '', // 订单编号
-        approvalStatus: '', // 审核状态0成功1失败
-        consignee: '', // 收货人
-        phoneNumber: '', // 手机号
-        address: '' // 地址
-      },
-      rules: {
-        consignee: [{ required: true, message: '请输入', trigger: 'blur' }],
-        phoneNumber: [{ required: true, message: '请输入', trigger: 'blur' }],
-        address: [{ required: true, message: '请输入', trigger: 'blur' }]
-      },
-    }
-  },
-  methods: {
-    cancel() {
-      this.visible = false
-      this.$refs['form'].resetFields()
-    },
-    async submit() {
-      this.loading = true
-      if (this.serviceType === 0) {
-        consignee = ''
-        phoneNumber = ''
-        address = ''
-      }
-      this.form.approvalStatus = 0
-      var res = await salesCheck(this.form)
-      console.log(res)
-      if (res.status === 200) {
-        this.$message.success('审核成功')
-      } else {
-        this.$message.error(res.msg || '审核失败！')
-      }
-      this.loading = true
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.afterSealsAdd{
-  span{
-    line-height: 40px;
-    font-size: 18px;
-    font-weight: bold;
-    margin: 25px;
-  }
-}
-</style>

src/views/shop/afterSeals/checkDialog.vue

@@ -0,0 +1,158 @@
+<template>
+  <el-dialog
+  class="afterSealsAdd"
+  :close-on-click-modal="false"
+  :visible.sync="visible"
+  width="800px">
+    <div class="checkForm">
+      <span>订单详情：</span>
+      <el-form ref="form" :model="checkForm" size="small" label-width="100px">
+        <el-form-item label="订单号：">
+          <el-input v-model="checkForm.orderCode" disabled />
+        </el-form-item>
+        <el-form-item label="售后类型：">
+          <el-input v-if="checkForm.serviceType === 0" :value="'仅退款'" disabled />
+          <el-input v-if="checkForm.serviceType === 1" :value="'退货退款'" disabled />
+        </el-form-item>
+        <el-form-item label="售后原因：">
+          <el-input v-model="checkForm.reasons" disabled />
+        </el-form-item>
+        <el-form-item label="售后说明：">
+          <el-input v-model="checkForm.explains" disabled />
+        </el-form-item>
+        <el-form-item label="原因图片：">
+          <div v-if="!checkForm.explainImg">
+            <b>用户未上传图片</b>
+          </div>
+          <div v-else>
+            <el-image 
+              v-for="(item,index) in checkForm.explainImg.split(',')"
+              :key="index"
+              style="width: 100px; height: 100px"
+              :src="item" 
+              :preview-src-list="[item]">
+            </el-image>
+          </div>
+        </el-form-item>
+        <el-form-item label="提交时间：">
+          <el-input v-model="checkForm.createTime" disabled />
+        </el-form-item>
+        <div v-for="item in checkForm.cartInfo"
+        :key="item.id">
+          <el-form-item label="售后商品：">
+            <el-input v-model="item.productInfo.storeName" disabled />
+          </el-form-item>
+          <el-form-item label="商品图片：">
+            <el-image
+            :src="item.productInfo.image"
+            style="width: 100px; height: 100px">
+              <div slot="placeholder" class="image-slot">
+                加载中<b class="dot">...</b>
+              </div>
+            </el-image>
+          </el-form-item>
+          <el-form-item label="规格：">
+            <el-input v-model="item.productInfo.attrInfo.sku" disabled />
+          </el-form-item>
+          <el-form-item label="商品单价">
+            <el-input v-model="item.truePrice" disabled />
+          </el-form-item>
+          <el-form-item label="商品数量">
+            <el-input v-model="item.cartNum" disabled />
+          </el-form-item>
+          <el-form-item label="邮费：">
+            <el-input v-model="item.productInfo.postage" disabled />
+          </el-form-item>
+        </div>
+      </el-form>
+    </div>
+    <div v-if="serviceType === 0 && isShow">
+      <span>该订单为仅退款订单，审核通过之后需进行退款，是否审核通过？</span>
+    </div>
+    <div v-if="serviceType === 1 && isShow">
+      <span>该订单为退货退款，请输入退货地址：</span>
+      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
+        <el-form-item label="收货人" prop="consignee">
+          <el-input v-model="form.consignee" />
+        </el-form-item>
+        <el-form-item label="手机号" prop="phoneNumber">
+          <el-input v-model="form.phoneNumber" />
+        </el-form-item>
+        <el-form-item label="地址" prop="address">
+          <el-input v-model="form.address" />
+        </el-form-item>
+      </el-form>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="text" @click="cancel">退出</el-button>
+      <el-button v-if="isShow" :loading="loading" type="primary" @click="submit">确认</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import {salesCheck} from '@/api/yxStoreAfterSales.js'
+export default {
+  props: {
+  },
+  data () {
+    return {
+      visible: false,
+      isShow: false,
+      loading: false,
+      serviceType: '',
+      checkForm: {},
+      form: {
+        salesId: '', // 售后id
+        orderCode: '', // 订单编号
+        approvalStatus: '', // 审核状态0成功1失败
+        consignee: '', // 收货人
+        phoneNumber: '', // 手机号
+        address: '' // 地址
+      },
+      rules: {
+        consignee: [{ required: true, message: '请输入收货人', trigger: 'blur' }],
+        phoneNumber: [{ required: true, message: '请输入收货人手机号', trigger: 'blur' }],
+        address: [{ required: true, message: '请输入收货地址', trigger: 'blur' }]
+      },
+    }
+  },
+  methods: {
+    cancel() {
+      this.visible = false
+      this.$refs['form'].resetFields()
+    },
+    async submit() {
+      this.loading = true
+      if (this.serviceType === 0) {
+        consignee = ''
+        phoneNumber = ''
+        address = ''
+      }
+      this.form.approvalStatus = 0
+      var res = await salesCheck(this.form)
+      if (res) {
+        this.$message.success('审核成功')
+      } else {
+        this.$message.error(res.msg || '审核失败！')
+      }
+      this.loading = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.afterSealsAdd{
+  span{
+    color: #F56C6C;
+    line-height: 40px;
+    font-size: 18px;
+    font-weight: bold;
+    margin: 25px 0;
+  }
+}
+.afterSealsAdd ::v-deep.el-input.is-disabled .el-input__inner{
+  color: #333333;
+}
+</style>

src/views/shop/afterSeals/index.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="afterSealsContainer">
+    <!-- 搜索栏 -->
     <div class="titleSearch">
-      <el-input v-model="query.orderCode" clearable placeholder="输入搜索内容" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
+      <el-input v-model="query.orderCode" clearable placeholder="输入搜索订单号" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
       <el-date-picker
         v-model="searchTime"
         :default-time="['00:00:00','23:59:59']"
@@ -49,7 +50,7 @@
       size="mini"
       type="warning"
       icon="el-icon-refresh-left"
-      @click="query.orderCode = query.type = query.salesState = query.state = ''; searchTime = []">重置</el-button>
+      @click="resetSearch">重置</el-button>
     </div>
     <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
     <!-- <crudOperation :permission="permission" /> -->
@@ -65,7 +66,7 @@
     <!-- @selection-change="selectionChangeHandler" -->
       <el-table-column type="selection" width="55" />
       <el-table-column prop="orderCode" label="订单号" />
-      <el-table-column prop="refundAmount" label="退款金额" />
+      <el-table-column prop="refundAmount" label="退款金额" width="100px"/>
       <el-table-column prop="serviceType" label="服务类型" >
         <template slot-scope="scope">
           <span v-if="scope.row.serviceType === 0">仅退款</span>
@@ -74,35 +75,37 @@
       </el-table-column>
       <el-table-column prop="reasons" label="申请原因" />
       <el-table-column prop="explains" label="说明" />
-      <el-table-column prop="state" label="状态" >
+      <el-table-column prop="createTime" label="申请时间" align="center">
-        <template slot-scope="scope">
-          <span v-if="scope.row.state === 0">等待审核</span>
-          <span v-if="scope.row.state === 1">等待用户发货</span>
-          <span v-if="scope.row.state === 2">用户已发货</span>
-          <span v-if="scope.row.state === 3">退款成功</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="salesState" label="售后状态" >
-        <template slot-scope="scope">
-          <span v-if="scope.row.salesState === 0" :style="'color: #42b983'">正常</span>
-          <span v-if="scope.row.salesState === 1" :style="'color: #F56C6C'">用户已取消</span>
-          <span v-if="scope.row.salesState === 2" :style="'color: #F56C6C'">已拒绝用户</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="createTime" label="申请时间">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
-      <el-table-column v-permission="['admin','yxStoreAfterSales:edit','yxStoreAfterSales:del']" label="操作" width="150px" align="center">
+      <el-table-column prop="state" label="状态" width="100px" align="center">
         <template slot-scope="scope">
-          <!-- <udOperation
+          <span v-if="scope.row.state === 0" :style="'color: #E6A23C'">等待审核</span>
-            :data="scope.row"
+          <span v-if="scope.row.state === 1" :style="'color: #409EFF'">等待用户发货</span>
-            :permission="permission"
+          <span v-if="scope.row.state === 2" :style="'color: #F56C6C'">用户已发货</span>
-          /> -->
+          <span v-if="scope.row.state === 3" :style="'color: #909399'">退款成功</span>
-          <el-button size="mini" type="success" v-if="scope.row.state === 0" @click="checkItem(scope.row)">审核</el-button>
+        </template>
-          <el-button size="mini" type="primary" v-if="scope.row.state === 2" @click="toQuery">退款</el-button>
+      </el-table-column>
-          <el-button size="mini" type="danger" v-if="scope.row.state === 3" @click="deleteItem(scope.row)">删除</el-button>
+      <el-table-column prop="salesState" label="售后状态" width="100px" align="center">
+        <template slot-scope="scope">
+          <span v-if="scope.row.salesState === 0" :style="'color: #42b983'">正常</span>
+          <span v-if="scope.row.salesState === 1" :style="'color: #409EFF'">用户已取消</span>
+          <span v-if="scope.row.salesState === 2" :style="'color: #F56C6C'">已拒绝用户</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+      v-permission="['admin','yxStoreAfterSales:edit','yxStoreAfterSales:del']" label="操作" width="150px" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" @click="checkItem(scope.row, 0)">订单详情</el-button>
+          <el-button size="mini" type="success" v-if="scope.row.state === 0" @click="checkItem(scope.row, 1)">审核</el-button>
+          <el-button
+            size="mini"
+            type="danger"
+            v-if="scope.row.state === 2"
+            @click="rebackVisible = true;rebackQuery.salesId = scope.row.id;rebackQuery.orderCode = scope.row.orderCode">
+            退款</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -115,21 +118,36 @@
       @size-change="sizeChange"
       @current-change="pageChange" />
 
-      <ADialog ref="addForm" :visible="addVisible"/>
+      <!-- 审核、订单详情 -->
+      <CheckDialog ref="addForm" :visible="addVisible"/>
+      <!-- 退款 -->
+      <el-dialog
+        title="退款"
+        :visible.sync="rebackVisible"
+        width="400px">
+        <span>
+          是否给订单号：<b :style="'color: #409EFF'">{{ this.rebackQuery.orderCode }}</b> 确认退款？
+        </span>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="rebackVisible = false">取 消</el-button>
+          <el-button type="primary" @click="rebackItem">确 定</el-button>
+        </span>
+      </el-dialog>
   </div>
 </template>
 
 <script>
 import initData from '@/mixins/crud'
-import crudYxStoreAfterSales from '@/api/yxStoreAfterSales'
+import {rebackMoney} from '@/api/yxStoreAfterSales'
-import ADialog from './addDialog.vue'
+import CheckDialog from './checkDialog.vue'
 export default {
   name: 'YxStoreAfterSales',
-  components: { ADialog },
+  components: { CheckDialog },
   mixins: [initData],
   data() {
     return {
       addVisible: false,
+      rebackVisible: false,
       searchTime: [],
       permission: {
         add: ['admin', 'yxStoreAfterSales:add'],
@@ -142,7 +160,7 @@ export default {
         { key: 2, name: '已拒绝用户'}
       ],
       serviceTypeOptions: [
-        { key: '', name: '全部' },
+        { key: null, name: '全部' },
         { key: 0, name: '仅退款' },
         { key: 1, name: '退货退款' }
       ],
@@ -151,7 +169,12 @@ export default {
         { key: 1, name: '等待用户发货'},
         { key: 2, name: '用户已发货'},
         { key: 3, name: '已完成'},
-      ]
+      ],
+      // 退款参数
+      rebackQuery: {
+        salesId: 0, // 数据的id
+        orderCode: '' // 订单号
+      }
     }
   },
   created() {
@@ -162,31 +185,48 @@ export default {
   methods: {
     beforeInit() {
       this.url = 'api/yxStoreAfterSales/sales/List'
+      console.log(this.searchTime)
       this.params = {
         page: this.page,
         size: this.size,
         
         serviceType: this.query.type || '', // 查询类型
-        salesState: 0, // 售后状态
+        salesState: this.query.salesState || 0, // 售后状态
-        state: '',
+        state: this.query.state,
         orderCode: this.query.orderCode || '',
-        // startingTime: this.searchTime[0] || '',
+        time: this.searchTime
-        // endTime: this.searchTime[1] || ''
+        // startingTime: `${this.searchTime[0]}` || '',
+        // endTime: `${this.searchTime[1]}` || ''
       }
+      if (this.query.state === 0) this.params.state = 0;
       return true
     },
+    resetSearch() {
+      this.query.orderCode = this.query.type = this.query.salesState = this.query.state = '';
+      this.searchTime = [];
+      this.toQuery()
+    },
     // 审核
-    checkItem(row) {
+    checkItem(row, type) {
-      console.log(row)
+      this.$refs.addForm.checkForm = row
       this.$refs.addForm.serviceType = row.serviceType
 
       this.$refs.addForm.form.salesId = row.id
       this.$refs.addForm.form.orderCode = row.orderCode
 
+      if (type === 1) {
+        this.$refs.addForm.isShow = true
+      } else {
+        this.$refs.addForm.isShow = false
+      }
       this.$refs.addForm.visible = true
     },
-    // 删除
+    // 退款
-    deleteItem() {}
+    async rebackItem() {
+      console.log(this.rebackQuery)
+      // var res = await rebackMoney(this.rebackQuery)
+      // console.log(res)
+    }
   }
 }