适配页面

vue-admin-template-master/src/views/coupon/list/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <el-card class="box-card" style="height: 90vh;">
+    <el-card class="box-card">
       <!-- <div class="filter-container">
         <el-input
           prefix-icon="el-icon-search"
@@ -23,29 +23,71 @@
       <el-table
         :data="tableData"
         v-loading="listLoading"
-        height="79vh"
         highlight-current-row
-        style="width: 100%"
         fit
         class="table-list"
-        :cell-style="{padding:'6px 0'}"
+        :cell-style="{ padding: '6px 0' }"
       >
         <el-table-column prop="id" label="ID" width="100"></el-table-column>
-        <el-table-column prop="title" label="title" width="120" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="amount" label="amount" width="100"></el-table-column>
-        <el-table-column prop="description" label="description" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="category" label="category" width="100" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="coffee" label="coffee" width="100" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="discount" label="discount" width="100"></el-table-column>
-        <el-table-column prop="startdate" label="startdate" width="120"></el-table-column>
-        <el-table-column prop="duedate" label="duedate" width="120"></el-table-column>
-        <el-table-column prop="phone" label="phone" width="120" show-overflow-tooltip></el-table-column>
+        <el-table-column
+          prop="title"
+          label="title"
+          width="120"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          prop="amount"
+          label="amount"
+          width="100"
+        ></el-table-column>
+        <el-table-column
+          prop="description"
+          label="description"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          prop="category"
+          label="category"
+          width="100"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          prop="coffee"
+          label="coffee"
+          width="100"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          prop="discount"
+          label="discount"
+          width="100"
+        ></el-table-column>
+        <el-table-column
+          prop="startdate"
+          label="startdate"
+          width="120"
+        ></el-table-column>
+        <el-table-column
+          prop="duedate"
+          label="duedate"
+          width="120"
+        ></el-table-column>
+        <el-table-column
+          prop="phone"
+          label="phone"
+          width="120"
+          show-overflow-tooltip
+        ></el-table-column>
         <el-table-column prop="used" label="used" width="100"></el-table-column>
-        <el-table-column prop="useropenid" label="useropenid" show-overflow-tooltip></el-table-column>
+        <el-table-column
+          prop="useropenid"
+          label="useropenid"
+          show-overflow-tooltip
+        ></el-table-column>
       </el-table>
       <div class="pd-30">
         <el-pagination
-          v-show="total>0"
+          v-show="total > 0"
           background
           layout="prev, pager, next"
           :total="total"
@@ -65,9 +107,13 @@
         style="width: 400px; margin-left:50px;"
       >
         <el-form-item label="券类型" prop="title">
-          <el-select v-model="ruleForm.title" placeholder="请选择券类型" @change="titleChange">
+          <el-select
+            v-model="ruleForm.title"
+            placeholder="请选择券类型"
+            @change="titleChange"
+          >
             <el-option
-              v-for="(item,index) in couponType"
+              v-for="(item, index) in couponType"
               :key="index"
               :label="item.label"
               :value="item.value"
@@ -75,9 +121,13 @@
           </el-select>
         </el-form-item>
         <el-form-item label="金额" prop="amount">
-          <el-select v-model="ruleForm.amount" placeholder="请选择金额" @change="amountChange">
+          <el-select
+            v-model="ruleForm.amount"
+            placeholder="请选择金额"
+            @change="amountChange"
+          >
             <el-option
-              v-for="(item,index) in couponAmount"
+              v-for="(item, index) in couponAmount"
               :key="index"
               :label="item.label"
               :value="item.value"
@@ -93,7 +143,11 @@
               :value="item.value"
             ></el-option>
           </el-select>-->
-          <el-input v-model="ruleForm.description" disabled style="width: 300px;"></el-input>
+          <el-input
+            v-model="ruleForm.description"
+            disabled
+            style="width: 300px;"
+          ></el-input>
         </el-form-item>
         <el-form-item
           label="过期时间"
@@ -119,7 +173,9 @@
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisible = false">取消</el-button>
-        <el-button type="primary" @click="submitForm" :loading="submitLoading">确定</el-button>
+        <el-button type="primary" @click="submitForm" :loading="submitLoading"
+          >确定</el-button
+        >
       </div>
     </el-dialog>
   </div>
@@ -142,48 +198,48 @@ const validatePhone = (rule, value, callback) => {
 const couponType = [
   {
     label: "立减券",
-    value: "立减券",
+    value: "立减券"
   },
   {
     label: "月卡券",
-    value: "月卡券",
+    value: "月卡券"
   },
   {
     label: "VIP免单券",
-    value: "VIP免单券",
-  },
+    value: "VIP免单券"
+  }
 ];
 const couponAmount = [
   {
     label: 15,
-    value: 15,
+    value: 15
   },
   {
     label: 12,
-    value: 12,
+    value: 12
   },
   {
     label: 30,
-    value: 30,
-  },
+    value: 30
+  }
 ];
 const couponDescription = [
   {
     label: "立减15元，回馈老用户",
-    value: "立减15元，回馈老用户",
+    value: "立减15元，回馈老用户"
   },
   {
     label: "立减12元，回馈老用户",
-    value: "立减12元，回馈老用户",
+    value: "立减12元，回馈老用户"
   },
   {
     label: "立减15元，每天限用1次",
-    value: "立减15元，每天限用1次",
+    value: "立减15元，每天限用1次"
   },
   {
     label: "任意咖啡(一杯)免单,VIP用户专享",
-    value: "任意咖啡(一杯)免单,VIP用户专享",
-  },
+    value: "任意咖啡(一杯)免单,VIP用户专享"
+  }
 ];
 export default {
   name: "ticket",
@@ -194,16 +250,16 @@ export default {
       searchLoading: false,
       listQuery: {
         page: 1,
-        limit: 100,
+        limit: 100
       },
       tableData: [],
 
       //发放优惠券
       submitLoading: false,
       pickerBeginDateBefore: {
-        disabledDate: (time) => {
+        disabledDate: time => {
           return time.getTime() < Date.now() - 8.64e7;
-        },
+        }
       },
       selectDisabled: false,
       dialogFormVisible: false,
@@ -215,7 +271,7 @@ export default {
         amount: "",
         description: "",
         duedate: "",
-        phone: "",
+        phone: ""
       },
       rules: {
         title: [{ required: true, message: "请选择券类型", trigger: "change" }],
@@ -224,17 +280,17 @@ export default {
           {
             required: true,
             message: "请选择过期时间",
-            trigger: "change",
-          },
+            trigger: "change"
+          }
         ],
         phone: [
           {
             validator: validatePhone,
             required: true,
-            trigger: "blur",
-          },
-        ],
-      },
+            trigger: "blur"
+          }
+        ]
+      }
     };
   },
   watch: {
@@ -265,8 +321,8 @@ export default {
     getList() {
       this.listLoading = true;
       getTicketList({
-        page: this.listQuery.page,
-      }).then((res) => {
+        page: this.listQuery.page
+      }).then(res => {
         this.tableData = res.tickets;
         this.total = res.total;
         this.listLoading = false;
@@ -287,20 +343,20 @@ export default {
         this.couponAmount = [
           {
             label: 15,
-            value: 15,
+            value: 15
           },
           {
             label: 12,
-            value: 12,
-          },
+            value: 12
+          }
         ];
       }
       if (title == "月卡券") {
         this.couponAmount = [
           {
             label: 15,
-            value: 15,
-          },
+            value: 15
+          }
         ];
         this.ruleForm.amount = 15;
         this.ruleForm.description = "立减15元，每天限用1次";
@@ -309,8 +365,8 @@ export default {
         this.couponAmount = [
           {
             label: 30,
-            value: 30,
-          },
+            value: 30
+          }
         ];
         this.ruleForm.amount = 30;
         this.ruleForm.description = "任意咖啡(一杯)免单,VIP用户专享";
@@ -325,7 +381,7 @@ export default {
       }
     },
     submitForm() {
-      this.$refs["ruleForm"].validate((valid) => {
+      this.$refs["ruleForm"].validate(valid => {
         if (valid) {
           this.submitLoading = true;
 
@@ -333,7 +389,7 @@ export default {
           if (this.ruleForm.title == "月卡券") {
             params = {
               title: "月卡券",
-              phone: this.ruleForm.phone,
+              phone: this.ruleForm.phone
             };
           } else if (this.ruleForm.title == "立减券") {
             params = {
@@ -341,7 +397,7 @@ export default {
               amount: this.ruleForm.amount,
               description: this.ruleForm.description,
               duedate: this.ruleForm.duedate,
-              phone: this.ruleForm.phone,
+              phone: this.ruleForm.phone
             };
           } else if (this.ruleForm.title == "VIP免单券") {
             params = {
@@ -349,13 +405,13 @@ export default {
               amount: this.ruleForm.amount,
               description: this.ruleForm.description,
               duedate: this.ruleForm.duedate,
-              phone: this.ruleForm.phone,
+              phone: this.ruleForm.phone
             };
           }
           generate_ticket(params).then(() => {
             this.$message({
               message: "发放成功！",
-              type: "success",
+              type: "success"
             });
             this.dialogFormVisible = false;
             this.submitLoading = false;
@@ -372,7 +428,7 @@ export default {
         amount: "",
         description: "",
         duedate: "",
-        phone: "",
+        phone: ""
       };
     },
     handleUpdate() {
@@ -381,12 +437,15 @@ export default {
       this.$nextTick(() => {
         this.$refs["ruleForm"].clearValidate();
       });
-    },
-  },
+    }
+  }
 };
 </script>
 
 <style lang="scss" scoped>
+.box-card {
+  overflow: hidden;
+}
 .container {
   padding: 20px;
 }

vue-admin-template-master/src/views/coupon/query/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <el-card class="box-card" style="height: 90vh;">
+    <el-card class="box-card">
       <div class="filter-container">
         <el-input
           prefix-icon="el-icon-search"
@@ -16,33 +16,82 @@
           type="primary"
           icon="el-icon-search"
           @click="getList"
-        >搜索</el-button>
-        <el-button type="primary" plain style="float:right;" @click="handleUpdate">发放优惠券</el-button>
+          >搜索</el-button
+        >
+        <el-button
+          type="primary"
+          plain
+          style="float:right;"
+          @click="handleUpdate"
+          >发放优惠券</el-button
+        >
       </div>
       <!-- show-overflow-tooltip -->
       <el-table
         :data="tableData"
         v-loading="listLoading"
-        height="79vh"
         highlight-current-row
-        style="width: 100%"
         fit
         class="table-list"
-        :cell-style="{padding:'6px 0'}"
+        :cell-style="{ padding: '6px 0' }"
       >
         <el-table-column prop="id" label="ID" width="100"></el-table-column>
-        <el-table-column prop="title" label="title" width="120" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="amount" label="amount" width="100"></el-table-column>
-        <el-table-column prop="description" label="description" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="category" label="category" width="100" show-overflow-tooltip></el-table-column>
+        <el-table-column
+          prop="title"
+          label="title"
+          width="120"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          prop="amount"
+          label="amount"
+          width="100"
+        ></el-table-column>
+        <el-table-column
+          prop="description"
+          label="description"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          prop="category"
+          label="category"
+          width="100"
+          show-overflow-tooltip
+        ></el-table-column>
 
-        <el-table-column prop="coffee" label="coffee" width="100" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="discount" label="discount" width="100"></el-table-column>
-        <el-table-column prop="startdate" label="startdate" width="120"></el-table-column>
-        <el-table-column prop="duedate" label="duedate" width="120"></el-table-column>
-        <el-table-column prop="phone" label="phone" width="120" show-overflow-tooltip></el-table-column>
+        <el-table-column
+          prop="coffee"
+          label="coffee"
+          width="100"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          prop="discount"
+          label="discount"
+          width="100"
+        ></el-table-column>
+        <el-table-column
+          prop="startdate"
+          label="startdate"
+          width="120"
+        ></el-table-column>
+        <el-table-column
+          prop="duedate"
+          label="duedate"
+          width="120"
+        ></el-table-column>
+        <el-table-column
+          prop="phone"
+          label="phone"
+          width="120"
+          show-overflow-tooltip
+        ></el-table-column>
         <el-table-column prop="used" label="used" width="100"></el-table-column>
-        <el-table-column prop="useropenid" label="useropenid" show-overflow-tooltip></el-table-column>
+        <el-table-column
+          prop="useropenid"
+          label="useropenid"
+          show-overflow-tooltip
+        ></el-table-column>
       </el-table>
       <!-- <div class="pd-30">
         <el-pagination
@@ -66,9 +115,13 @@
         style="width: 400px; margin-left:50px;"
       >
         <el-form-item label="券类型" prop="title">
-          <el-select v-model="ruleForm.title" placeholder="请选择券类型" @change="titleChange">
+          <el-select
+            v-model="ruleForm.title"
+            placeholder="请选择券类型"
+            @change="titleChange"
+          >
             <el-option
-              v-for="(item,index) in couponType"
+              v-for="(item, index) in couponType"
               :key="index"
               :label="item.label"
               :value="item.value"
@@ -76,9 +129,13 @@
           </el-select>
         </el-form-item>
         <el-form-item label="金额" prop="amount">
-          <el-select v-model="ruleForm.amount" placeholder="请选择金额" @change="amountChange">
+          <el-select
+            v-model="ruleForm.amount"
+            placeholder="请选择金额"
+            @change="amountChange"
+          >
             <el-option
-              v-for="(item,index) in couponAmount"
+              v-for="(item, index) in couponAmount"
               :key="index"
               :label="item.label"
               :value="item.value"
@@ -94,7 +151,11 @@
               :value="item.value"
             ></el-option>
           </el-select>-->
-          <el-input v-model="ruleForm.description" disabled style="width: 300px;"></el-input>
+          <el-input
+            v-model="ruleForm.description"
+            disabled
+            style="width: 300px;"
+          ></el-input>
         </el-form-item>
         <el-form-item
           label="过期时间"
@@ -120,7 +181,9 @@
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisible = false">取消</el-button>
-        <el-button type="primary" @click="submitForm" :loading="submitLoading">确定</el-button>
+        <el-button type="primary" @click="submitForm" :loading="submitLoading"
+          >确定</el-button
+        >
       </div>
     </el-dialog>
   </div>
@@ -143,48 +206,48 @@ const validatePhone = (rule, value, callback) => {
 const couponType = [
   {
     label: "立减券",
-    value: "立减券",
+    value: "立减券"
   },
   {
     label: "月卡券",
-    value: "月卡券",
+    value: "月卡券"
   },
   {
     label: "VIP免单券",
-    value: "VIP免单券",
-  },
+    value: "VIP免单券"
+  }
 ];
 const couponAmount = [
   {
     label: 15,
-    value: 15,
+    value: 15
   },
   {
     label: 12,
-    value: 12,
+    value: 12
   },
   {
     label: 30,
-    value: 30,
-  },
+    value: 30
+  }
 ];
 const couponDescription = [
   {
     label: "立减15元，回馈老用户",
-    value: "立减15元，回馈老用户",
+    value: "立减15元，回馈老用户"
   },
   {
     label: "立减12元，回馈老用户",
-    value: "立减12元，回馈老用户",
+    value: "立减12元，回馈老用户"
   },
   {
     label: "立减15元，每天限用1次",
-    value: "立减15元，每天限用1次",
+    value: "立减15元，每天限用1次"
   },
   {
     label: "任意咖啡(一杯)免单,VIP用户专享",
-    value: "任意咖啡(一杯)免单,VIP用户专享",
-  },
+    value: "任意咖啡(一杯)免单,VIP用户专享"
+  }
 ];
 export default {
   name: "ticket",
@@ -194,16 +257,16 @@ export default {
       listLoading: false,
       searchLoading: false,
       listQuery: {
-        phone: "",
+        phone: ""
       },
       tableData: [],
 
       //发放优惠券
       submitLoading: false,
       pickerBeginDateBefore: {
-        disabledDate: (time) => {
+        disabledDate: time => {
           return time.getTime() < Date.now() - 8.64e7;
-        },
+        }
       },
       selectDisabled: false,
       dialogFormVisible: false,
@@ -215,7 +278,7 @@ export default {
         amount: "",
         description: "",
         duedate: "",
-        phone: "",
+        phone: ""
       },
       rules: {
         title: [{ required: true, message: "请选择券类型", trigger: "change" }],
@@ -224,17 +287,17 @@ export default {
           {
             required: true,
             message: "请选择过期时间",
-            trigger: "change",
-          },
+            trigger: "change"
+          }
         ],
         phone: [
           {
             validator: validatePhone,
             required: true,
-            trigger: "blur",
-          },
-        ],
-      },
+            trigger: "blur"
+          }
+        ]
+      }
     };
   },
   watch: {
@@ -271,8 +334,8 @@ export default {
       }
       this.listLoading = true;
       query_by_phone({
-        phone: this.listQuery.phone.trim(),
-      }).then((res) => {
+        phone: this.listQuery.phone.trim()
+      }).then(res => {
         this.tableData = res.tickets;
         // this.total = res.total;
         this.listLoading = false;
@@ -293,20 +356,20 @@ export default {
         this.couponAmount = [
           {
             label: 15,
-            value: 15,
+            value: 15
           },
           {
             label: 12,
-            value: 12,
-          },
+            value: 12
+          }
         ];
       }
       if (title == "月卡券") {
         this.couponAmount = [
           {
             label: 15,
-            value: 15,
-          },
+            value: 15
+          }
         ];
         this.ruleForm.amount = 15;
         this.ruleForm.description = "立减15元，每天限用1次";
@@ -315,8 +378,8 @@ export default {
         this.couponAmount = [
           {
             label: 30,
-            value: 30,
-          },
+            value: 30
+          }
         ];
         this.ruleForm.amount = 30;
         this.ruleForm.description = "任意咖啡(一杯)免单,VIP用户专享";
@@ -331,7 +394,7 @@ export default {
       }
     },
     submitForm() {
-      this.$refs["ruleForm"].validate((valid) => {
+      this.$refs["ruleForm"].validate(valid => {
         if (valid) {
           this.submitLoading = true;
 
@@ -339,7 +402,7 @@ export default {
           if (this.ruleForm.title == "月卡券") {
             params = {
               title: "月卡券",
-              phone: this.ruleForm.phone,
+              phone: this.ruleForm.phone
             };
           } else if (this.ruleForm.title == "立减券") {
             params = {
@@ -347,7 +410,7 @@ export default {
               amount: this.ruleForm.amount,
               description: this.ruleForm.description,
               duedate: this.ruleForm.duedate,
-              phone: this.ruleForm.phone,
+              phone: this.ruleForm.phone
             };
           } else if (this.ruleForm.title == "VIP免单券") {
             params = {
@@ -355,13 +418,13 @@ export default {
               amount: this.ruleForm.amount,
               description: this.ruleForm.description,
               duedate: this.ruleForm.duedate,
-              phone: this.ruleForm.phone,
+              phone: this.ruleForm.phone
             };
           }
           generate_ticket(params).then(() => {
             this.$message({
               message: "发放成功！",
-              type: "success",
+              type: "success"
             });
             this.dialogFormVisible = false;
             this.submitLoading = false;
@@ -378,7 +441,7 @@ export default {
         amount: "",
         description: "",
         duedate: "",
-        phone: "",
+        phone: ""
       };
     },
     handleUpdate() {
@@ -387,8 +450,8 @@ export default {
       this.$nextTick(() => {
         this.$refs["ruleForm"].clearValidate();
       });
-    },
-  },
+    }
+  }
 };
 </script>
 

vue-admin-template-master/src/views/orders/list/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <el-card class="box-card" style="height: 90vh">
+    <el-card class="box-card">
       <div class="filter-container">
         <el-date-picker
           v-model="timeValue"
@@ -23,9 +23,7 @@
       <el-table
         :data="tableData"
         v-loading="listLoading"
-        height="73vh"
         highlight-current-row
-        style="width: 100%"
         fit
         class="table-list"
         :cell-style="{ padding: '6px 0' }"
@@ -383,6 +381,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.box-card {
+  overflow: hidden;
+}
 .container {
   padding: 20px;
 }

vue-admin-template-master/src/views/orders/query/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <el-card class="box-card" style="height: 90vh">
+    <el-card class="box-card">
       <div class="filter-container">
         <el-input
           prefix-icon="el-icon-search"
@@ -22,9 +22,7 @@
       <el-table
         :data="tableData"
         v-loading="listLoading"
-        height="79vh"
         highlight-current-row
-        style="width: 100%"
         fit
         class="table-list"
         :cell-style="{ padding: '6px 0' }"
@@ -190,6 +188,7 @@ export default {
               })
                 .then(res => {
                   this.$message.success("退款成功！");
+                  this.getDetail();
                 })
                 .catch(res => {
                   this.$message.error("退款失败！");
@@ -229,6 +228,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.box-card {
+  overflow: hidden;
+}
 .container {
   padding: 20px;
 }