活动添加

ybf_admin/src/App.vue

@@ -28,4 +28,5 @@
 @import '~@/assets/style/public-class.scss';
 @import '~@/assets/style/button/index.scss';
 @import '~@/assets/style/pagination/index.scss';
+@import '~@/assets/style/dialog/index.scss';
 </style>

ybf_admin/src/assets/elementYbf02/theme/index.css

@@ -4389,8 +4389,7 @@
     top: 0;
     width: 100%;
     height: 100%;
-    opacity: .5;
-    background: #000
+    background-color:rgba(0,0,0,.5);
 }
 
 .el-popup-parent--hidden {

ybf_admin/src/assets/style/button/index.scss

@@ -38,5 +38,10 @@
       color: #fff;
     }
   }
+  .searchzone{
+    .el-form-item{
+      margin-bottom: 0;
+    }
+  }
 
 }

ybf_admin/src/assets/style/dialog/index.scss

+.dialogs{
+  .el-dialog__header{
+    position: relative;
+    padding: 16px;
+    .el-dialog__title{
+      font-size: 16px;
+      line-height: 16px;
+      color: #383838;
+    }
+    &:after{
+      content: "";
+      width: calc(100% - 32px);
+      height: 1px;
+      left: 16px;
+      position: absolute;
+      bottom:0;
+      border-bottom: 1px solid #eee;
+    }
+  }
+  .el-dialog__body{
+    padding: 16px;
+    .el-form-item{
+      margin-bottom: 16px;
+      .el-form-item__label{
+        line-height: 32px;
+      }
+      .el-form-item__content{
+        .el-input__inner{
+          height: 32px;
+          line-height: 32px;
+        }
+      }
+    }
+  }
+  .el-dialog__footer{
+    padding: 16px;
+    position: relative;
+    &:before{
+      content: "";
+      display: inline-block;
+      width: calc(100% - 32px);
+      height: 1px;
+      position: absolute;
+      left: 16px;
+      top: 0;
+      background-color: #eee;
+    }
+  }
+  .addGoods{
+    .el-form-item{
+      .el-input{
+        width: 280px;
+      }
+      &.chargeInput{
+        .el-input{
+          width: 88px;
+        }
+        .unit{
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+}

ybf_admin/src/pages/goods/main/components/add_goods.vue

+<template>
+  <div class="dialogs">
+    <el-dialog  title="创建任务" :visible.sync="dialogVisible"  width="480px"
+      :before-close="handleClose" class="addGoods">
+      <div class="dialogMain">
+        <el-form :model="form" :rules="formRules" ref="addform" label-width="130px">
+          <el-form-item label="商品:" prop="goods">
+            <el-input v-model="form.goods"></el-input>
+          </el-form-item>
+          <el-form-item label="价格:">
+            <el-input v-model="form.price"></el-input>
+          </el-form-item>
+          <el-form-item label="库存:">
+            <el-input v-model.number="form.num"></el-input>
+          </el-form-item>
+          <el-form-item label="佣金:" prop="charges">
+            <el-radio-group v-model="form.charges">
+              <el-radio :label="1">佣金</el-radio>
+              <el-radio :label="2">百分比</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-if="form.charges===1" label="金额:" label-width="176px" class="chargeInput" >
+            <el-input v-model="form.num"></el-input>
+            <span class="unit">元 ( ¥ )</span>
+          </el-form-item>
+          <el-form-item v-if="form.charges===2" label="佣金比例:" label-width="176px"  class="chargeInput" >
+            <el-input v-model="form.num"></el-input>
+            <span class="unit">( % )</span>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="small" @click="handleCancel('addform')">取 消</el-button>
+        <el-button size="small" type="primary" @click="handleSubmit('addform')">提交</el-button>
+     </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'add_goods',
+    data(){
+      return{
+        dialogVisible:false,
+        form:{
+          goods:'',
+          price:'',
+          charges:1,
+          num:0
+        },
+        formRules:{
+          goods: [
+            { required: true, message: '请输入商品', trigger: 'blur' },
+            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+          ],
+        }
+      }
+    },
+    methods:{
+      // 弹窗关闭
+      handleClose(done) {
+        this.$confirm('确认关闭？')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      },
+      handleSubmit(formName){
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      handleCancel(formName){
+        this.$refs[formName].resetFields();
+        this.dialogVisible = false
+      },
+    },
+    watch:{
+      dialogVisible(){
+        if(this.dialogVisible){
+          if(this.$refs.addform){
+            this.$refs.addform.resetFields();
+          }
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

ybf_admin/src/pages/goods/main/index.vue

@@ -5,7 +5,7 @@
     </template>
     <div class="searchs">
       <div class="buttons">
-        <el-button class="button buttonlight" size="small">添加商品</el-button>
+        <el-button class="button buttonlight" size="small" @click="handleAdd">添加商品</el-button>
         <el-button class="button buttondark" size="small">批量删除</el-button>
       </div>
       <!-- 搜索区 -->
@@ -65,9 +65,11 @@
       layout="total, prev, pager, next, jumper"
       :total="page.total">
     </el-pagination>
+    <add-goods ref="addGoods"></add-goods>
   </d2-container>
 </template>
 <script>
+  import addGoods from './components/add_goods'
   export default {
     data () {
       return {
@@ -155,12 +157,16 @@
         }
       }
     },
+    components:{ addGoods },
     methods: {
       handleCurrentChange(val) {
         console.log(`当前页: ${val}`);
       },
       listPick() {
       },
+      handleAdd(){
+        this.$refs.addGoods.dialogVisible = true
+      }
     }
   }
 </script>