增加红包个数

src/apps/mobile/views/card-bank/components/addEditDialog.vue

@@ -1,21 +1,11 @@
 <template>
     <div class="add-edit-dialog-container">
-        <el-dialog
-            :title="addEditDialogTitle"
-            :visible.sync="addEditDialogVisible"
-            width="40%"
-            :before-close="close"
-        >
-            <el-form
-                :model="addEditDialogForm"
-                ref="addEditDialogForm"
-                :rules="addEditDialogRules"
-                label-width="90px"
-            >
+        <el-dialog :title="addEditDialogTitle" :visible.sync="addEditDialogVisible" width="40%" :before-close="close">
+            <el-form :model="addEditDialogForm" ref="addEditDialogForm" :rules="addEditDialogRules" label-width="90px">
                 <el-form-item label="名称:" prop="name" class="classify-input">
                     <el-input placeholder="请输入" v-model="addEditDialogForm.name" class="file-input"></el-input>
                 </el-form-item>
-                <el-form-item label="类型:" prop="type" v-if="this.type ==='add'">
+                <el-form-item label="类型:" prop="type" v-if="this.addOrEditor === 'add'">
                     <el-select v-model="addEditDialogForm.type">
                         <el-option label="红包" :value="2"></el-option>
                         <el-option label="折扣卷" :value="1"></el-option>
@@ -28,42 +18,28 @@
                         <el-option label="视频" :value="3"></el-option>
                     </el-select>
                 </el-form-item>-->
-                <el-form-item label="面值:" prop="price" v-if="addEditDialogForm.type ===2">
-                    <el-input
-                        placeholder="请输入"
-                        v-model="addEditDialogForm.price"
-                        class="file-input"
-                    ></el-input>
+                <el-form-item label="面值:" prop="price" v-if="addEditDialogForm.type === 2">
+                    <el-input placeholder="请输入" v-model.number="addEditDialogForm.price" class="file-input"></el-input>
                 </el-form-item>
-                <el-form-item label="折扣:" prop="discount" v-if="addEditDialogForm.type ===1">
-                    <el-input
-                        placeholder="请输入"
-                        v-model="addEditDialogForm.discount"
-                        class="file-input"
-                    ></el-input>
+                <el-form-item label="个数:" prop="num" v-if="addEditDialogForm.type === 2">
+                    <el-input placeholder="请输入" v-model.number="addEditDialogForm.num" class="file-input"></el-input>
                 </el-form-item>
-                <el-form-item label="满减:" prop="fullReduction" v-if="addEditDialogForm.type ===1">
-                    <el-input
-                        placeholder="请输入"
-                        v-model="addEditDialogForm.fullReduction"
-                        class="file-input"
-                    ></el-input>
+                <el-form-item label="总额:" prop="totalPrice" v-if="addEditDialogForm.type === 2">
+                    <el-input class="file-input" disabled :value="totalPrice"></el-input>
                 </el-form-item>
-                <el-form-item label="有效期:" prop="validity" v-if="addEditDialogForm.type ===1">
-                    <el-date-picker
-                        v-model="addEditDialogForm.validity"
-                        type="datetime"
-                        placeholder="选择日期时间"
-                    ></el-date-picker>
+                <el-form-item label="折扣:" prop="discount" v-if="addEditDialogForm.type === 1">
+                    <el-input placeholder="请输入" v-model="addEditDialogForm.discount" class="file-input"></el-input>
+                </el-form-item>
+                <el-form-item label="满减:" prop="fullReduction" v-if="addEditDialogForm.type === 1">
+                    <el-input placeholder="请输入" v-model="addEditDialogForm.fullReduction" class="file-input"></el-input>
+                </el-form-item>
+                <el-form-item label="有效期:" prop="validity" v-if="addEditDialogForm.type === 1">
+                    <el-date-picker v-model="addEditDialogForm.validity" type="datetime" placeholder="选择日期时间"></el-date-picker>
                 </el-form-item>
             </el-form>
             <div slot="footer" class="dialog-footer">
                 <el-button @click="close()">取 消</el-button>
-                <el-button
-                    type="primary"
-                    @click="submitForm('addEditDialogForm')"
-                    :disabled="submitBtndisabled"
-                >确 定</el-button>
+                <el-button type="primary" @click="submitForm('addEditDialogForm')" :disabled="submitBtndisabled">确 定</el-button>
             </div>
         </el-dialog>
     </div>
@@ -98,87 +74,82 @@ export default {
                 // scenario: [{ required: true, message: '请选择', trigger: 'change' }],
                 price: [
                     { required: true, message: '请填写', trigger: 'blur' },
-                    {
-                        required: true,
-                        trigger: 'blur',
-                        validator: checkPrice,
-                        message: '请输入正整数',
-                    },
+                    { type: 'number', message: '请输入正整数'}
+                ],
+                num: [
+                    { required: true, message: '请填写', trigger: 'blur' },
+                    { type: 'number', message: '请输入正整数'}
                 ],
                 discount: [
                     { required: true, message: '请填写', trigger: 'blur' },
-                    {
-                        required: true,
-                        trigger: 'blur',
-                        validator: checkPrice,
-                        message: '请输入正整数',
-                    },
+                    { required: true, trigger: 'blur', validator: checkPrice, message: '请输入正整数' },
                 ],
                 fullReduction: [
                     { required: true, message: '请填写', trigger: 'blur' },
-                    {
-                        required: true,
-                        trigger: 'blur',
-                        validator: checkPrice,
-                        message: '请输入正整数',
-                    },
+                    { required: true, trigger: 'blur', validator: checkPrice, message: '请输入正整数' },
                 ],
                 validity: [{ required: true, message: '请选择', trigger: ['change', 'blur'] }],
             },
-            type: null,
+            addOrEditor: null,
         };
     },
+    computed: {
+        totalPrice() {
+            return !isNaN(this.addEditDialogForm.price) && !isNaN(this.addEditDialogForm.num)
+                ? Number(this.addEditDialogForm.price * this.addEditDialogForm.num).toFixed(2)
+                : 0;
+        },
+    },
     methods: {
         submitForm(formName) {
-            this.$refs[formName].validate(valid => {
+            this.$refs[formName].validate((valid) => {
+                debugger;
                 if (valid) {
                     let formData = { ...this.addEditDialogForm };
                     if (formData.type === 1) {
                         delete formData.price;
+                        delete formData.num;
+                        delete formData.totalPrice;
                     } else {
                         delete formData.discount;
                         delete formData.fullReduction;
                         delete formData.validity;
                     }
-                    console.log(formData);
-                    if(parseInt(formData.discount) > parseInt(formData.fullReduction))
-                    {
+                    if (parseInt(formData.discount) > parseInt(formData.fullReduction)) {
                         this.$message({
                             type: 'warning',
                             message: '折扣金额不能大于满减金额',
                         });
-                    }
-                    else{
-                    if (this.type === 'add') {
-                        formData.checkFalg = 2;
-                        let message = '新增成功';
-                        addCoupons(formData)
-                            .then(res => {
+                    } else {
+                        if (this.addOrEditor === 'add') {
+                            formData.checkFalg = 2;
+                            let message = '新增成功';
+                            formData.totalPrice = Number(this.totalPrice) || null;
+                            addCoupons(formData).then((res) => {
                                 this.completeOperation(message);
-                            })
-                            .catch();
-                    }
-                    if (this.type === 'edit') {
-                        let data = {
-                            id: formData.id,
-                            name: formData.name,
-                            type: formData.type,
-                            scenario: formData.scenario,
-                            price: formData.price || null,
-                            discount: formData.discount || null,
-                            fullReduction: formData.fullReduction || null,
-                            validity: formData.validity || null,
-                            statuz: formData.statuz,
-                            checkFalg: formData.checkFalg,
-                        };
-                        console.log(data);
-                        updateCouponsStatus(data)
-                            .then(res => {
+                            }).catch();
+                        }
+                        if (this.addOrEditor === 'edit') {
+                            let data = {
+                                id: formData.id,
+                                name: formData.name,
+                                type: formData.type,
+                                scenario: formData.scenario,
+                                price: formData.price || null,
+                                num: formData.num || null,
+                                totalPrice: Number(this.totalPrice) || null,
+                                discount: formData.discount || null,
+                                fullReduction: formData.fullReduction || null,
+                                validity: formData.validity || null,
+                                statuz: formData.statuz,
+                                checkFalg: formData.checkFalg,
+                            };
+                            console.log(data);
+                            updateCouponsStatus(data).then((res) => {
                                 let message = '修改成功';
                                 this.completeOperation(message);
-                            })
-                            .catch();
-                    }
+                            }).catch();
+                        }
                     }
                 } else {
                     return false;
@@ -186,8 +157,7 @@ export default {
             });
         },
         open(type, data) {
-            console.log(data);
-            this.type = type;
+            this.addOrEditor = type;
             if (type === 'edit') {
                 this.addEditDialogTitle = '编辑';
                 this.addEditDialogForm = Object.assign({}, data);
@@ -215,12 +185,12 @@ export default {
 </script>
 <style lang="stylus" scoped>
 .add-edit-dialog-container {
-    .el-input {
-        width: auto;
-    }
+  .el-input {
+    width: auto;
+  }
 
-    ::v-deep .el-input__inner {
-        width: 200px;
-    }
+  ::v-deep .el-input__inner {
+    width: 200px;
+  }
 }
 </style>

src/apps/mobile/views/card-bank/index.vue

@@ -30,12 +30,7 @@
                         </el-col>
                         <el-col :span="24">
                             <el-form-item>
-                                <el-button
-                                    type="primary"
-                                    round
-                                    icon="el-icon-plus"
-                                    @click="showAddEditDialog(null)"
-                                >新建</el-button>
+                                <el-button type="primary" round icon="el-icon-plus" @click="showAddEditDialog(null)">新建</el-button>
                             </el-form-item>
                         </el-col>
                     </el-row>
@@ -44,20 +39,11 @@
 
             <div class="SearchTitle">
                 已选择
-                <span class="subject-color">4</span> 项
+                <span class="subject-color">{{ tableSelection.length }}</span> 项
             </div>
 
             <div class="MaintenanceTable">
-                <el-table
-                    ref="multipleTable"
-                    :data="tableData"
-                    style="width: 100%"
-                    tooltip-effect="dark"
-                    @selection-change="selectColumn"
-                    class="OutTable"
-                    border
-                    v-loading="listLoading"
-                >
+                <el-table ref="multipleTable" :data="tableData" style="width: 100%" tooltip-effect="dark" @selection-change="selectColumn" class="OutTable" border v-loading="listLoading">
                     <el-table-column type="selection"></el-table-column>
                     <el-table-column prop="name" label="名称"></el-table-column>
                     <el-table-column prop="type" label="类型">
@@ -92,44 +78,19 @@
                     </el-table-column>
                     <el-table-column prop="statuz" label="启用状态" min-width="110px;">
                         <template slot-scope="scope">
-                            <el-switch
-                                v-model="scope.row.statuz"
-                                active-text="开"
-                                inactive-text="关"
-                                :active-value="1"
-                                :inactive-value="0"
-                                :disabled="scope.row.checkFalg !==1"
-                                @change="changeSwitch(scope.row)"
-                            ></el-switch>
+                            <el-switch v-model="scope.row.statuz" active-text="开" inactive-text="关" :active-value="1" 
+                            :inactive-value="0" :disabled="scope.row.checkFalg !==1" @change="changeSwitch(scope.row)"></el-switch>
                         </template>
                     </el-table-column>
                     <el-table-column label="操作" min-width="220px;">
                         <template slot-scope="scope">
-                            <el-button
-                                size="mini"
-                                type="primary"
-                                plain
-                                round
-                                @click="deleteData(scope.row)"
-                            >删除</el-button>
-                            <el-button
-                                size="mini"
-                                type="success"
-                                plain
-                                round
-                                :disabled="scope.row.checkFalg === 1"
-                                @click="showAddEditDialog(scope.row)"
-                            >编辑</el-button>
+                            <el-button size="mini" type="primary" plain round @click="deleteData(scope.row)">删除</el-button>
+                            <el-button size="mini" type="success" plain round :disabled="scope.row.checkFalg === 1" @click="showAddEditDialog(scope.row)">编辑</el-button>
                         </template>
                     </el-table-column>
                 </el-table>
                 <div class="pagenation">
-                    <PageComponent
-                        :total="total"
-                        @pagination="handlePagination"
-                        :pageSize.sync="page.pageSize"
-                        :pageNum.sync="page.pageNum"
-                    ></PageComponent>
+                    <PageComponent :total="total" @pagination="handlePagination" :pageSize.sync="page.pageSize" :pageNum.sync="page.pageNum"></PageComponent>
                 </div>
             </div>
         </div>
@@ -162,7 +123,7 @@ export default {
             },
             total: 10,
             listLoading: false,
-            tableSelection: [],
+            tableSelection: []
         };
     },
     created() {
@@ -179,17 +140,15 @@ export default {
                     orderBy: 'create_time',
                 },
             };
-            queryCouponsList(obj)
-                .then(res => {
-                    console.log(res);
-                    if(res.statusCode == "10"){
-                        this.$router.replace("/login");
-                    }
-                    this.tableData = res.data.records;
-                    this.total = res.data.total;
-                    this.listLoading = false;
-                })
-                .catch();
+            queryCouponsList(obj).then(res => {
+                console.log(res);
+                if(res.statusCode == "10"){
+                    this.$router.replace("/login");
+                }
+                this.tableData = res.data.records;
+                this.total = res.data.total;
+                this.listLoading = false;
+            }).catch();
         },
         changeSwitch(data) {
             console.log(data);
@@ -198,21 +157,19 @@ export default {
                 id: data.id,
             };
             console.log(obj);
-            updateCouponsStatus(obj)
-                .then(res => {
-                    console.log(res);
-                    this.queryListData();
-                    if (res.statusCode == "0") {
-                        this.$message.error(res.message);
-                    }
-                    else{
-                        this.$message({
-                            type: 'success',
-                            message: '更新成功',
-                        });
-                    }
-                })
-                .catch();
+            updateCouponsStatus(obj).then(res => {
+                console.log(res);
+                this.queryListData();
+                if (res.statusCode == "0") {
+                    this.$message.error(res.message);
+                }
+                else{
+                    this.$message({
+                        type: 'success',
+                        message: '更新成功',
+                    });
+                }
+            }).catch();
         },
         deleteData(data) {
             if (data) {
@@ -220,20 +177,16 @@ export default {
                     confirmButtonText: '确定',
                     cancelButtonText: '取消',
                     type: 'warning',
-                })
-                    .then(() => {
-                        deleteCouponSingle({id: data.id})
-                            .then(res => {
-                                console.log(res);
-                                this.queryListData();
-                                this.$message({
-                                    type: 'success',
-                                    message: '删除成功',
-                                });
-                            })
-                            .catch();
-                    })
-                    .catch(() => {});
+                }).then(() => {
+                    deleteCouponSingle({id: data.id}).then(res => {
+                            console.log(res);
+                            this.queryListData();
+                            this.$message({
+                                type: 'success',
+                                message: '删除成功',
+                            });
+                        }).catch();
+                }).catch(() => {});
             } else {
                 if (!this.tableSelection.length) {
                     this.$message({
@@ -247,23 +200,20 @@ export default {
                     cancelButtonText: '取消',
                     type: 'warning',
                     closeOnClickModal: false,
-                })
-                    .then(() => {
-                        let ids = this.tableSelection.map(item => {
-                            return item.id;
-                        });
-                        console.log(ids);
-                        deleteCouponBatch({ids: ids})
-                            .then(res => {
-                                this.queryListData();
-                                this.$message({
-                                    type: 'success',
-                                    message: '批量删除成功',
-                                });
-                            })
-                            .catch();
-                    })
-                    .catch(() => {});
+                }).then(() => {
+                    let ids = this.tableSelection.map(item => {
+                        return item.id;
+                    });
+                    console.log(ids);
+                    deleteCouponBatch({ids: ids})
+                        .then(res => {
+                            this.queryListData();
+                            this.$message({
+                                type: 'success',
+                                message: '批量删除成功',
+                            });
+                        }).catch();
+                }).catch(() => {});
             }
         },
         openBatch() {
@@ -289,23 +239,19 @@ export default {
                 cancelButtonText: '取消',
                 type: 'warning',
                 closeOnClickModal: false,
-            })
-                .then(() => {
-                    let ids = this.tableSelection.map(item => {
-                        return item.id;
-                    });
-                    console.log(ids);
-                    openCouponBatch(ids)
-                        .then(res => {
-                            this.queryListData();
-                            this.$message({
-                                type: 'success',
-                                message: '修改成功',
-                            });
-                        })
-                        .catch();
-                })
-                .catch(() => {});
+            }).then(() => {
+                let ids = this.tableSelection.map(item => {
+                    return item.id;
+                });
+                console.log(ids);
+                openCouponBatch(ids).then(res => {
+                        this.queryListData();
+                        this.$message({
+                            type: 'success',
+                            message: '修改成功',
+                        });
+                    }).catch();
+                }).catch(() => {});
         },
         querySearch() {
             this.page.pageNum = 1;