添加优惠券页面

src/api/coupon.js

@@ -0,0 +1,16 @@
+import request from '@/utils/request'
+export function fetchList(params) {
+  return request({
+    url:'/coupon/list',
+    method:'get',
+    params:params
+  })
+}
+
+export function createCoupon(data) {
+  return request({
+    url:'/coupon/create',
+    method:'post',
+    data:data
+  })
+}

src/router/index.js

@@ -206,27 +206,46 @@ export const constantRouterMap = [
         name: 'coupon',
         component: () => import('@/views/sms/coupon/index'),
         meta: {title: '优惠券列表', icon: 'sms-coupon'}
-      },{
+      },
+      {
+        path: 'addCoupon',
+        name: 'addCoupon',
+        component: () => import('@/views/sms/coupon/add'),
+        meta: {title: '添加优惠券'},
+        hidden:true
+      },
+      {
+        path: 'updateCoupon',
+        name: 'updateCoupon',
+        component: () => import('@/views/sms/coupon/update'),
+        meta: {title: '修改优惠券'},
+        hidden:true
+      },
+      {
         path: 'brand',
         name: 'homeBrand',
         component: () => import('@/views/sms/brand/index'),
         meta: {title: '品牌推荐', icon: 'product-brand'}
-      },{
+      },
+      {
         path: 'new',
         name: 'homeNew',
         component: () => import('@/views/sms/new/index'),
         meta: {title: '新品推荐', icon: 'sms-new'}
-      },{
+      },
+      {
         path: 'hot',
         name: 'homeHot',
         component: () => import('@/views/sms/hot/index'),
         meta: {title: '人气推荐', icon: 'sms-hot'}
-      },{
+      },
+      {
         path: 'subject',
         name: 'homeSubject',
         component: () => import('@/views/sms/subject/index'),
         meta: {title: '专题推荐', icon: 'sms-subject'}
-      },{
+      },
+      {
         path: 'advertise',
         name: 'homeAdvertise',
         component: () => import('@/views/sms/advertise/index'),

src/views/sms/coupon/add.vue

@@ -0,0 +1,14 @@
+<template> 
+  <coupon-detail :isEdit="false"></coupon-detail>
+</template>
+<script>
+  import CouponDetail from './components/CouponDetail'
+  export default {
+    name: 'addCoupon',
+    components: { CouponDetail }
+  }
+</script>
+<style scoped>
+</style>
+
+

src/views/sms/coupon/components/CouponDetail.vue

@@ -0,0 +1,206 @@
+<template> 
+  <el-card class="form-container" shadow="never">
+    <el-form :model="coupon"
+             :rules="rules"
+             ref="couponFrom"
+             label-width="150px"
+             size="small">
+      <el-form-item label="优惠券类型：">
+        <el-select v-model="coupon.type">
+          <el-option
+            v-for="type in typeOptions"
+            :key="type.value"
+            :label="type.label"
+            :value="type.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="优惠券名称：" prop="name">
+        <el-input v-model="coupon.name" class="input-width"></el-input>
+      </el-form-item>
+      <el-form-item label="适用平台：">
+        <el-select v-model="coupon.platform">
+          <el-option
+            v-for="item in platformOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="总发行量：" prop="publishCount">
+        <el-input v-model.number="coupon.publishCount" placeholder="只能输入正整数" class="input-width"></el-input>
+      </el-form-item>
+      <el-form-item label="面额：" prop="amount">
+        <el-input v-model.number="coupon.amount" placeholder="面值只能是数值，限2位小数" class="input-width">
+          <template slot="append">元</template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="每人限领：">
+        <el-input v-model="coupon.perLimit" placeholder="只能输入正整数" class="input-width">
+          <template slot="append">张</template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="使用门槛：" prop="minPoint">
+        <el-input v-model="coupon.minPoint" placeholder="只能输入正整数" class="input-width">
+          <template slot="prepend">满</template>
+          <template slot="append">元可用</template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="有效期：">
+        <el-date-picker type="date" placeholder="选择日期" v-model="coupon.startTime" style="width: 150px"></el-date-picker>
+        <span style="margin-left: 20px;margin-right: 20px">至</span>
+        <el-date-picker type="date" placeholder="选择日期" v-model="coupon.endTime" style="width: 150px"></el-date-picker>
+      </el-form-item>
+      <el-form-item label="可使用商品：">
+        <el-radio-group v-model="coupon.useType">
+          <el-radio-button :label="0">全场通用</el-radio-button>
+          <el-radio-button :label="1">指定分类</el-radio-button>
+          <el-radio-button :label="2">指定商品</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item v-show="coupon.useType===1">
+        xx1
+
+      </el-form-item>
+      <el-form-item v-show="coupon.useType===2">
+        xx2
+      </el-form-item>
+      <el-form-item label="备注：">
+        <el-input
+          class="input-width"
+          type="textarea"
+          :rows="5"
+          placeholder="请输入内容"
+          v-model="coupon.note">
+        </el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('couponFrom')">提交</el-button>
+        <el-button @click="resetForm('couponFrom')">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </el-card>
+</template>
+<script>
+  import {createCoupon} from '@/api/coupon';
+  const defaultCoupon = {
+    type: 0,
+    name: null,
+    platform: 0,
+    amount: null,
+    perLimit: 1,
+    minPoint: null,
+    startTime: null,
+    endTime: null,
+    useType: 0,
+    note: null,
+    publishCount: null,
+    productRelationList: [],
+    productCategoryRelationList: []
+  };
+  const defaultTypeOptions = [
+    {
+      label: '全场赠券',
+      value: 0
+    },
+    {
+      label: '会员赠券',
+      value: 1
+    },
+    {
+      label: '购物赠券',
+      value: 2
+    },
+    {
+      label: '注册赠券',
+      value: 3
+    }
+  ];
+  const defaultPlatformOptions = [
+    {
+      label: '全平台',
+      value: 0
+    },
+    {
+      label: '移动平台',
+      value: 1
+    },
+    {
+      label: 'PC平台',
+      value: 2
+    }
+  ];
+  export default {
+    name: 'CouponDetail',
+    props: {
+      isEdit: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        coupon: Object.assign({}, defaultCoupon),
+        typeOptions: Object.assign({}, defaultTypeOptions),
+        platformOptions: Object.assign({}, defaultPlatformOptions),
+        rules: {
+          name: [
+            {required: true, message: '请输入优惠券名称', trigger: 'blur'},
+            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
+          ],
+          publishCount: [
+            {type: 'number',required: true, message: '只能输入正整数', trigger: 'blur'}
+          ],
+          amount: [
+            {type: 'number',required: true,message: '面值只能是数值，0.01-10000，限2位小数',trigger: 'blur'}
+          ],
+          minPoint: [
+            {type: 'number',required: true,message: '只能输入正整数',trigger: 'blur'}
+          ]
+        }
+      }
+    },
+    methods:{
+      onSubmit(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.$confirm('是否提交数据', '提示', {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }).then(() => {
+              createCoupon(this.coupon).then(response=>{
+                this.$refs[formName].resetFields();
+                this.$message({
+                  message: '提交成功',
+                  type: 'success',
+                  duration:1000
+                });
+                this.$router.back();
+              });
+            });
+          } else {
+            this.$message({
+              message: '验证失败',
+              type: 'error',
+              duration:1000
+            });
+            return false;
+          }
+        });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+        this.coupon = Object.assign({},defaultCoupon);
+      }
+    }
+  }
+</script>
+<style scoped>
+  .input-width {
+    width: 60%;
+  }
+</style>
+
+

src/views/sms/coupon/index.vue

@@ -1,13 +1,221 @@
 <template> 
-  <div> {{msg}}</div>
+  <div class="app-container">
+    <el-card class="filter-container" shadow="never">
+      <div>
+        <i class="el-icon-search"></i>
+        <span>筛选搜索</span>
+        <el-button
+          style="float:right"
+          type="primary"
+          @click="handleSearchList()"
+          size="small">
+          查询搜索
+        </el-button>
+        <el-button
+          style="float:right;margin-right: 15px"
+          @click="handleResetSearch()"
+          size="small">
+          重置
+        </el-button>
+      </div>
+      <div style="margin-top: 15px">
+        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
+          <el-form-item label="优惠券名称：">
+            <el-input v-model="listQuery.name" class="input-width" placeholder="优惠券名称"></el-input>
+          </el-form-item>
+          <el-form-item label="优惠券类型：">
+            <el-select v-model="listQuery.type" placeholder="全部" clearable class="input-width">
+              <el-option v-for="item in typeOptions"
+                         :key="item.value"
+                         :label="item.label"
+                         :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-card>
+    <el-card class="operate-container" shadow="never">
+      <i class="el-icon-tickets"></i>
+      <span>数据列表</span>
+      <el-button size="mini" class="btn-add" @click="handleAdd()">添加</el-button>
+    </el-card>
+    <div class="table-container">
+      <el-table ref="couponTable"
+                :data="list"
+                style="width: 100%;"
+                @selection-change="handleSelectionChange"
+                v-loading="listLoading" border>
+        <el-table-column type="selection" width="60" align="center"></el-table-column>
+        <el-table-column label="编号" width="100" align="center">
+          <template slot-scope="scope">{{scope.row.id}}</template>
+        </el-table-column>
+        <el-table-column label="优惠劵名称" align="center">
+          <template slot-scope="scope">{{scope.row.name}}</template>
+        </el-table-column>
+        <el-table-column label="优惠券类型" width="100" align="center">
+          <template slot-scope="scope">{{scope.row.type | formatType}}</template>
+        </el-table-column>
+        <el-table-column label="可使用商品" width="100" align="center">
+          <template slot-scope="scope">{{scope.row.useType | formatUseType}}</template>
+        </el-table-column>
+        <el-table-column label="使用门槛" width="140" align="center">
+          <template slot-scope="scope">满{{scope.row.minPoint}}元可用</template>
+        </el-table-column>
+        <el-table-column label="面值" width="100" align="center">
+          <template slot-scope="scope">{{scope.row.amount}}元</template>
+        </el-table-column>
+        <el-table-column label="适用平台" width="100" align="center">
+          <template slot-scope="scope">{{scope.row.platform | formatPlatform}}</template>
+        </el-table-column>
+        <el-table-column label="有效期" width="180" align="center">
+          <template slot-scope="scope">{{scope.row.startTime|formatDate}}至{{scope.row.endTime|formatDate}}</template>
+        </el-table-column>
+        <el-table-column label="状态" width="100" align="center">
+          <template slot-scope="scope">{{scope.row.endTime | formatStatus}}</template>
+        </el-table-column>
+        <el-table-column label="操作" width="180" align="center">
+          <template slot-scope="scope">
+            <el-button size="mini" type="text">查看</el-button>
+            <el-button size="mini"
+                       type="text"
+                       @click="handleUpdate(scope.$index, scope.row)">
+              编辑</el-button>
+            <el-button size="mini" type="text">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="pagination-container">
+      <el-pagination
+        background
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        layout="total, sizes,prev, pager, next,jumper"
+        :current-page.sync="listQuery.pageNum"
+        :page-size="listQuery.pageSize"
+        :page-sizes="[5,10,15]"
+        :total="total">
+      </el-pagination>
+    </div>
+  </div>
 </template>
 <script>
+  import {fetchList} from '@/api/coupon';
+  import {formatDate} from '@/utils/date';
+  const defaultListQuery = {
+    pageNum: 1,
+    pageSize: 10,
+    name: null,
+    type: null
+  };
+  const defaultTypeOptions=[
+    {
+      label: '全场赠券',
+      value: 0
+    },
+    {
+      label: '会员赠券',
+      value: 1
+    },
+    {
+      label: '购物赠券',
+      value: 2
+    },
+    {
+      label: '注册赠券',
+      value: 3
+    }
+  ];
   export default {
+    name:'couponList',
     data() {
-      return {msg: '优惠券列表'}
+      return {
+        listQuery:Object.assign({},defaultListQuery),
+        typeOptions:Object.assign({},defaultTypeOptions),
+        list:null,
+        total:null,
+        listLoading:false,
+        multipleSelection:[]
+      }
+    },
+    created(){
+      this.getList();
+    },
+    filters:{
+      formatType(type){
+        for(let i=0;i<defaultTypeOptions.length;i++){
+          if(type===defaultTypeOptions[i].value){
+            return defaultTypeOptions[i].label;
+          }
+        }
+        return '';
+      },
+      formatUseType(useType){
+        if(useType===0){
+          return '全场通用';
+        }else if(useType===1){
+          return '指定分类';
+        }else{
+          return '指定商品';
+        }
+      },
+      formatPlatform(platform){
+        if(platform===1){
+          return '移动平台';
+        }else if(platform===2){
+          return 'PC平台';
+        }else{
+          return '全平台';
+        }
+      },
+      formatDate(time){
+        if(time==null||time===''){
+          return 'N/A';
+        }
+        let date = new Date(time);
+        return formatDate(date, 'yyyy-MM-dd')
+      },
+      formatStatus(endTime){
+        let now = new Date().getTime();
+        if(endTime>now){
+          return '未过期'
+        }else{
+          return '已过期';
+        }
+      }
+    },
+    methods:{
+      handleResetSearch() {
+        this.listQuery = Object.assign({}, defaultListQuery);
+      },
+      handleSearchList() {
+        this.listQuery.pageNum = 1;
+        this.getList();
+      },
+      handleSelectionChange(val){
+        this.multipleSelection = val;
+      },
+      handleAdd(){
+        this.$router.push({path: '/sms/addCoupon'})
+      },
+      handleUpdate(index, row) {
+        this.$router.push({path: '/sms/updateCoupon', query: {id: row.id}})
+      },
+      getList(){
+        fetchList(this.listQuery).then(response=>{
+          this.listLoading = false;
+          this.list = response.data.list;
+          this.total = response.data.total;
+        });
+      }
     }
   }
 </script>
-<style></style>
+<style scoped>
+  .input-width {
+    width: 203px;
+  }
+</style>
 
 

src/views/sms/coupon/update.vue

@@ -0,0 +1,14 @@
+<template> 
+  <coupon-detail :isEdit="true"></coupon-detail>
+</template>
+<script>
+  import CouponDetail from './components/CouponDetail'
+  export default {
+    name: 'updateCoupon',
+    components: { CouponDetail }
+  }
+</script>
+<style scoped>
+</style>
+
+