订单优惠券列表

src/components/coupon/index.vue

 <template>
-    <div>
-      优惠券列表
-    </div>
+  <div class="refund">
+    <el-form ref="searchFrom" :model="searchFrom" label-width="100px">
+      <el-row>
+        <el-col :span="4">
+          <el-form-item label="用户ID">
+            <el-input v-model="searchFrom.user_id"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="订单号">
+            <el-input v-model="searchFrom.out_trade_no"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="使用状态">
+            <el-select v-model="searchFrom.status" placeholder="请选择" @change="getList" clearable>
+              <el-option
+                v-for="item in useTypeList"
+                :key="item.id"
+                :label="item.value"
+                :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item>
+            <el-button type="primary" @click="getList">搜索</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <el-table
+      :data="list"
+      style="width: 100%">
+      <el-table-column
+        prop="coupon_no"
+        label="优惠券码">
+      </el-table-column>
+      <el-table-column
+        prop="out_trade_no"
+        label="订单号">
+      </el-table-column>
+      <el-table-column
+        label="用户信息"
+        min-width="140"
+        className="userInfo"
+      >
+        <template slot-scope="scope">
+          <img class="avatar" :src="scope.row.user_avatar">
+          {{scope.row.user_nickname}}(ID:{{scope.row.user_id}})
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="优惠券金额">
+        <template slot-scope="scope">
+          {{parseFloat(scope.row.money / 100)}}元
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="使用状态">
+        <template slot-scope="scope">
+          {{scope.row.status|filterStatus}}
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="use_at"
+        label="使用时间">
+      </el-table-column>
+    </el-table>
+    <page :nowPage="nowPage" :total="total" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
+  </div>
 </template>
 
 <script>
-    export default {
-        name: "index"
+  import {getCouponListApi} from "../../service/api";
+  import page from '../framework/page'
+  export default {
+    name: "index",
+    components:{
+      page
+    },
+    data(){
+      return {
+        nowPage: 1,
+        total: 0,
+        limit: 10,
+        useTypeList:[
+          {
+            id:0,
+            value:'未使用'
+          },
+          {
+            id:1,
+            value:'已使用'
+          }
+        ],
+        searchFrom: {
+          user_id: '',
+          out_trade_no:'',
+          status:''
+        },
+        list: []
+      }
+    },
+    filters:{
+      filterStatus:function (value) {
+        let msg = '';
+        if(value === 0){
+          msg = '未使用'
+        }else if(value === 1){
+          msg = '已使用'
+        }
+        return msg;
+      }
+    },
+    mounted(){
+      this.getList()
+    },
+    methods: {
+      onPageChange(val){
+        this.nowPage = val;
+        this.getList()
+      },
+      onSizeChange(val){
+        this.nowPage = 1;
+        this.limit = val;
+        this.getList()
+      },
+      getList(){
+        let json = {
+          limit: this.limit,
+          page: this.nowPage,
+        };
+        if(this.searchFrom.user_id){
+          json.user_id = this.searchFrom.user_id
+        }
+        if(this.searchFrom.status){
+          json.status = this.searchFrom.status
+        }
+        if(this.searchFrom.out_trade_no){
+          json.out_trade_no = this.searchFrom.out_trade_no
+        }
+        getCouponListApi(json).then((res)=>{
+          this.total = res.total;
+          this.list = res.list ? res.list : []
+        })
+      }
     }
+  }
+
 </script>
 
 <style scoped>
-
+  .refund{
+    padding: 20px 0;
+  }
+  .avatar {
+    width:50px;
+    height: 50px;
+    border-radius: 50%;
+  }
+</style>
+<style>
+  .userInfo >div{
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+    align-items: center;
+  }
 </style>

src/service/api.js

@@ -605,3 +605,8 @@ const updateAdsInnerUrl = 'api/admin/ads';
 export const updateAdsInnerApi = function (id, json) {
   return Vue.prototype.$put(`${updateAdsInnerUrl}/${id}`,json)
 };
+// 订单使用红包列表
+const getCouponListUrl = 'api/admin/order/coupon';
+export const getCouponListApi = function (json) {
+  return Vue.prototype.$fetch(getCouponListUrl, json)
+};