优惠券页面

src/views/coupon/coupon/index.vue

@@ -15,14 +15,14 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" v-hasPermi="['system:category:query']">搜索</el-button>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" v-hasPermi="['coupon:coupon:query']">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-          v-hasPermi="['system:category:add']">新增</el-button>
+          v-hasPermi="['coupon:coupon:add']">新增</el-button>
       </el-col>
    </el-row>
 
@@ -45,28 +45,28 @@
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button v-show="scope.row.state == 2" size="mini" type="text" icon="el-icon-edit" @click="handleStatus(scope.row,'1')"
-            v-hasPermi="['system:category:restart']">下线</el-button>
+            v-hasPermi="['coupon:coupon:restart']">下线</el-button>
           <el-button v-show="scope.row.state == 1" size="mini" type="text" icon="el-icon-edit" @click="handleStatus(scope.row,'2')"
-            v-hasPermi="['system:category:stop']">上线</el-button> 
+            v-hasPermi="['coupon:coupon:stop']">上线</el-button> 
           <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-            v-hasPermi="['system:category:remove']">删除</el-button>     
+            v-hasPermi="['coupon:coupon:remove']">删除</el-button>     
         </template>
       </el-table-column>
     </el-table>
     <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
       @pagination="getList" />
     <!-- 添加或修改对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body class="dialogClass">
+      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
         <el-row>
-          <el-col :span="8">
-            <el-form-item label="优惠券名称" prop="name">
-              <el-input v-model="form.name" placeholder="请输入优惠券名称" minlength="1" maxlength="100"/>
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
+          <el-form-item label="优惠券名称" prop="name">
+            <el-input v-model="form.name" placeholder="请输入优惠券名称" minlength="1" maxlength="100"/>
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-col :span="6">
             <el-form-item label="券类别" prop="" >
-              <el-select v-model="form.name" placeholder="请选择" @change="selectChange()">
+              <el-select v-model="form.name" placeholder="请选择" @change="selectChange()" style="width: 326px;">
                 <el-option
                   v-for="item in options"
                   :key="item.value"
@@ -76,40 +76,97 @@
               </el-select>
             </el-form-item>
           </el-col>
-          <el-col :span="8">
-            <el-form-item label="券价值">
-              <el-radio-group v-model="form.cost">
-                <el-radio :label="1">抵扣</el-radio>
-                <el-radio :label="2">折扣</el-radio>
-                <el-radio :label="3">免单</el-radio>
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item>
-              <div>
-                <span>立减</span><el-input v-model="form.name"/><span>元</span>
+          <el-col :span="11">
+            <div style="margin-left: 105px;">
+              <el-form-item label="券价值">
                 <el-radio-group v-model="form.cost">
-                  <el-radio :label="1">无门槛</el-radio>
-                  <el-radio :label="6">满<el-input/>元</el-radio>
+                  <el-radio :label="1">抵扣</el-radio>
+                  <el-radio :label="2">折扣</el-radio>
+                  <el-radio :label="3" style="margin-left: 13px;">免单</el-radio>
                 </el-radio-group>
-              </div>
+              </el-form-item>
+              <div style="margin-left: 73px;">
+                <div class="marginLeft10">
+                  <span>立减</span><el-input  class="inputCalss"/><span class="spanClass">元</span>
+                  <el-radio-group v-model="form.cost" class="marginLeft10">
+                    <el-radio :label="1" class="marginLeft10">无门槛</el-radio>
+                    <el-radio :label="6" >满<el-input class="inputCalss"/><span class="spanClass">元</span></el-radio>
+                  </el-radio-group>
+                </div>
+                <div style="margin-left: 36px;margin-top: 10px;">
+                  <el-input class="inputCalss"/><span class="spanClass">折</span>
+                  <el-radio-group v-model="form.cost1" class="marginLeft10">
+                    <el-radio :label="1" class="marginLeft10">单杯</el-radio>
+                    <el-radio :label="6" style="margin-left: 14px;">整单</el-radio>
+                  </el-radio-group>
+                </div>  
+              </div> 
+            </div>            
+          </el-col>
+          <el-col :span="7">
+            <el-form-item label="User可领次数" label-width="110px">
+              <el-radio-group v-model="form.cost" >
+                <el-radio :label="1">
+                  <span>每</span><el-input class="inputCalss"/><span class="spanClass">天</span>
+                  <el-input class="inputCalss"/><span class="spanClass">次</span>
+                </el-radio>
+                <el-radio :label="6" style="margin-top: 10px;">无限制</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row style="margin-top: 8px;">
+          <el-col :span="10">
+            <el-form-item label="优惠券绝对有效时间" >
+              <el-date-picker
+                v-model="times"
+                type="datetimerange"
+                range-separator="至"
+                start-placeholder="请选择开始日期"
+                end-placeholder="请选择结束日期" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" class="width"/>
+            </el-form-item>            
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="领取后相对有效时间">
+             <el-input class="inputCalss"/><span class="spanClass">天</span>
             </el-form-item>
           </el-col>
           <el-col :span="8">
-            <el-form-item label="User可领次数">
-              <el-radio-group v-model="form.cost">
-                <el-radio :label="1">无门槛</el-radio>
-                <el-radio :label="6">满<el-input/>元</el-radio>
-              </el-radio-group>
+            <el-form-item label="优惠券可领取时间" style="    margin-left: 41px;">
+              <el-date-picker v-model="form.date" type="date" placeholder="请选择领取日期" style="width: 205px;"/>
             </el-form-item>
           </el-col>
-        </el-row>        
-
-        <el-form-item label="通用简述" prop="remarks">
-          <el-input v-model="form.remarks" type="textarea" placeholder="请输入内容" maxlength="17"/>
+        </el-row>
+        <el-row>
+          <el-col>
+            <el-form-item label="适用范围">
+              <el-cascader :options="rangeList" clearable placeholder="请选择使用商品范围" class="width"/>
+              <el-cascader :options="rangeList" :props="{ multiple: true  }" clearable collapse-tags placeholder="请选择地区门店" class="marginLeft20 width"/>
+              <el-select v-model="form.week" placeholder="请选择可用日期" multiple collapse-tags style="margin-left:36px; width:330px">
+                <el-option
+                  v-for="item in weekList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="短信通知" >
+          <div style="display: flex;">
+            <div>
+              <el-radio v-model="form.mess" label="1">是</el-radio>
+              <el-radio v-model="form.mess" label="2">否</el-radio>
+            </div>
+            <div style="margin-left: 20px;">
+              <el-input placeholder="请输入短信内容" style="width: 907px;"></el-input>
+            </div>
+          </div>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm" v-hasPermi="['system:category:edit']">确 定</el-button>
+        <el-button type="primary" @click="submitForm" v-hasPermi="['coupon:coupon:edit']">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
@@ -163,12 +220,77 @@ export default {
         value: '2',
         label: '折扣券'
       }],
+      rangeList:[{
+        value: '1',
+        label: '全国通用',
+        },{
+        value: '北京',
+        label: '北京市',
+        children: [{
+          value: '北京',
+          label: '北京市',
+          children: [{
+            value: 'haidian',
+            label: '海淀区',
+            children:[{
+              value:'1',
+              label:'海淀黄庄店'
+            },{
+              value:'2',
+              label:'凯德茂店'
+            }]
+          }, {
+            value: 'chaoyang',
+            label: '朝阳区',
+            children:[{
+              value:'1',
+              label:'朝阳大悦城店'
+            }]
+          }]
+        },{
+          value: 'henan',
+          label: '河南省',
+          children: [{
+            value: 'zhengzhou',
+            label: '郑州市'
+          }, {
+            value: 'zhoukou',
+            label: '周口市'
+          }]
+        }]
+      }],
+      times:[],
+      weekList:[{
+          value: '1',
+          label: '星期一'
+        }, {
+          value: '2',
+          label: '星期二'
+        }, {
+          value: '3',
+          label: '星期三'
+        }, {
+          value: '4',
+          label: '星期四'
+        }, {
+          value: '5',
+          label: '星期五'
+        }, {
+          value: '6',
+          label: '星期六'
+        }, {
+          value: '7',
+          label: '星期日'
+        }]
     };
   },
   created() {
     this.getList();
   },
   methods: {
+    selectChange(val){
+
+    },
     /** 查询列表 */
     getList() {
       this.loading = true;
@@ -210,7 +332,7 @@ export default {
     handleAdd() {
       this.reset();
       this.open = true;
-      this.title = "新增类别";
+      this.title = "新增优惠券";
     },
     /** 启用、禁用按钮操作 */
     handleStatus(row,tag) {
@@ -244,7 +366,7 @@ export default {
       getClass(id).then((response) => {
         this.form = response.data;
         this.open = true;
-        this.title = "修改商品分类";
+        this.title = "修改优惠券";
       });
     },
     /** 提交按钮 */
@@ -293,3 +415,28 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" >
+.dialogClass .spanClass{
+  margin-left: 10px;
+}
+.dialogClass .inputCalss{
+  width:50px;
+  margin-left: 10px;
+}
+.dialogClass .el-radio__label {
+  padding-left: 3px !important;
+}
+.dialogClass .marginLeft10 {
+  padding-left: 10px;
+}
+
+.dialogClass .marginLeft20 {
+  padding-left: 20px;
+}
+
+.dialogClass .width {
+  width: 326px;
+}
+
+</style>