优惠券管理

src/views/coupon/components/CouponDetail.vue

@@ -101,6 +101,7 @@
 			<el-form-item>
 				<el-button type="primary" @click="onSubmit('couponFrom')">提交</el-button>
 				<el-button v-if="!isEdit" @click="resetForm('couponFrom')">重置</el-button>
+        <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
 			</el-form-item>
 		</el-form>
 	</el-card>
@@ -186,6 +187,10 @@
 			isEdit: {
 				type: Boolean,
 				default: false
+			},
+      dataId: {
+        type: Number,
+        default: 0
       }
 		},
 		data() {
@@ -234,15 +239,19 @@
 		},
 		created() {
 			if (this.isEdit) {
-				getCoupon(this.$route.query.id).then(response => {
+        var dataId=this.dataId
+        alert(this.dataId);
+				getCoupon(dataId).then(response => {
 					this.coupon = response.data;
 				});
 			}
 			this.getProductCateList();
 		},
 		methods: {
+      handleReturn() {
+        this.$router.back();
+      },
 			dateChange(val) {
-
 				console.log("val", val)
 			},
 			UpNumber(val, limit = 2) {

src/views/coupon/history.vue

@@ -1,5 +1,9 @@
 <template> 
   <div class="app-container">
+    <div style="text-align: right;">
+      <!-- <el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate">保存</el-button> -->
+      <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
+    </div>
     <div class="table-layout">
       <el-row>
         <el-col :span="4" class="table-cell-title">名称</el-col>
@@ -170,11 +174,7 @@
       }
     },
     created() {
-      getCoupon(this.$route.query.id).then(response => {
+
-        this.coupon = response.data;
-      });
-      this.listQuery.couponId=this.$route.query.id;
-      this.getList();
     },
     filters: {
       formatType(type) {
@@ -244,6 +244,13 @@
       },
     },
     methods: {
+      showDetail(id){
+        getCoupon(id).then(response => {
+          this.coupon = response.data;
+        });
+        this.listQuery.couponId=id;
+        this.getList();
+      },
       getList(){
         this.listLoading=true;
         fetchCouponHistoryList(this.listQuery).then(response=>{
@@ -268,6 +275,9 @@
       handleCurrentChange(val) {
         this.listQuery.pageNum = val;
         this.getList();
+      },
+      handleReturn() {
+        this.$emit('doback')
       }
     }
   }

src/views/coupon/index.vue

@@ -106,12 +106,16 @@
     </div>
     </div>
     <divAdd v-show="viewState == 2|| viewState ==3" ref="divadd" @doback="resetState" @reloadlist="loadList" />
+    <divInfo v-show="viewState == 4" ref="divInfo" @doback="resetState" @reloadlist="loadList" />
+    <divUpdate v-show="viewState == 5" ref="divUpdate" @doback="resetState" @reloadlist="loadList" />
   </div>
 </template>
 <script>
   import {fetchList,deleteCoupon} from '@/api/coupon/coupon';
   import {formatDate} from '@/utils/date';
   import divAdd from './add.vue'
+  import divInfo from './history.vue'
+  import divUpdate from './update.vue'
   import ButtonBar from '@/components/ButtonBar'
   import Pagination from '@/components/pagination'
   import pageye from '@/components/pagination/pageye'
@@ -142,7 +146,7 @@
   export default {
     name:'couponList',
     components: {
-      divAdd
+      divAdd,divInfo,divUpdate
     },
     data() {
       return {
@@ -235,10 +239,14 @@
         // this.$router.push({path: '/sms/addCoupon'})
       },
       handleView(index, row) {
-        this.$router.push({path: '/sms/couponHistory', query: {id: row.id}})
+        this.viewState = 4
+        this.$refs['divInfo'].showDetail(row.id)
+       // this.$router.push({path: '/sms/couponHistory', query: {id: row.id}})
       },
       handleUpdate(index, row) {
-        this.$router.push({path: '/sms/updateCoupon', query: {id: row.id}})
+        this.viewState = 5
+        this.$refs['divUpdate'].showUpdate(row.id)
+        //this.$router.push({path: '/sms/updateCoupon', query: {id: row.id}})
       },
       handleDelete(index, row) {
         this.$confirm('是否进行删除操作?', '提示', {

src/views/coupon/update.vue

@@ -1,14 +1,412 @@
-<template> 
+<template>
-  <coupon-detail :isEdit="true"></coupon-detail>
+  <el-card class="form-container" shadow="never">
+    <el-form :model="coupon" :rules="rules" ref="couponFrom" label-width="150px" size="small">
+      <el-form-item label="优惠券类型：">
+        <span>全场赠券</span>
+      </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="适用平台：">
+
+        <span>全平台</span>
+      </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="coupon.amount" @keyup.native="coupon.amount = UpNumber(coupon.amount,2)"
+                  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.number="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="datetime" placeholder="选择日期" v-model="coupon.startTime" default-time="00:00:00"
+                        style="width:200px">
+        </el-date-picker>
+        <span style="margin-left:5px;margin-right: 5px">至</span>
+        <el-date-picker type="datetime" placeholder="选择日期" v-model="coupon.endTime" default-time="23:59:59"
+                        style="width: 200px">
+        </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">
+        <el-cascader clearable placeholder="请选择分类名称" v-model="selectProductCate" :options="productCateOptions">
+        </el-cascader>
+        <el-button @click="handleAddProductCategoryRelation()">添加</el-button>
+        <el-table ref="productCateRelationTable" :data="coupon.productCategoryRelationList"
+                  style="width: 100%;margin-top: 20px" border>
+          <el-table-column label="分类名称" align="center">
+            <template
+              slot-scope="scope">{{scope.row.parentCategoryName}}>{{scope.row.productCategoryName}}</template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="100">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text"
+                         @click="handleDeleteProductCateRelation(scope.$index, scope.row)">删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-form-item>
+      <el-form-item v-show="coupon.useType===2">
+        <el-select v-model="selectProduct" filterable remote reserve-keyword placeholder="商品名称/商品货号"
+                   :remote-method="searchProductMethod" :loading="selectProductLoading">
+          <el-option v-for="item in selectProductOptions" :key="item.productId" :label="item.productName"
+                     :value="item.productId">
+            <span style="float: left">{{ item.productName }}</span>
+            <span style="float: right; color: #8492a6; font-size: 13px">NO.{{ item.productSn }}</span>
+          </el-option>
+        </el-select>
+        <el-button @click="handleAddProductRelation()">添加</el-button>
+        <el-table ref="productRelationTable" :data="coupon.productRelationList"
+                  style="width: 100%;margin-top: 20px" border>
+          <el-table-column label="商品名称" align="center">
+            <template slot-scope="scope">{{scope.row.productName}}</template>
+          </el-table-column>
+          <el-table-column label="货号" align="center" width="120">
+            <template slot-scope="scope">NO.{{scope.row.productSn}}</template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="100">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text"
+                         @click="handleDeleteProductRelation(scope.$index, scope.row)">删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </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 type="info" size="small" @click="handleReturn()">关闭</el-button>
+      </el-form-item>
+    </el-form>
+  </el-card>
 </template>
 <script>
-  import CouponDetail from './components/CouponDetail'
+import {
+  createCoupon,
+  getCoupon,
+  updateCoupon
+} from '@/api/coupon/coupon';
+import {
+  fetchSimpleList as fetchProductList,
+  simpleProductList as simpleProductList
+} from '@/api/product';
+import {
+  fetchListWithChildren
+} from '@/api/productCate'
+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
+  }
+];
+var validatePrice = (rule, value, callback) => {
+  if (!value) {
+    callback(new Error("面额不能为空"));
+  } else if (value.split(".").length > 2) {
+    callback(new Error("请输入正确格式的金额")); //防止输入多个小数点
+  }
+    // else if (value > add_Com.Retail_Price) {
+    //   callback(new Error("金额不能大于零售价"));
+  // }
+  else {
+    value = Math.round(value * Math.pow(10, 2)) / Math.pow(10, 2); //四舍五入
+    value = Number(value).toFixed(2); //不足补位
+    this.add_Com.Cost_Price = value;
+    callback();
+  }
+};
+
 export default {
-    name: 'updateCoupon',
+  name: 'CouponDetail',
-    components: { CouponDetail }
+
+  data() {
+    return {
+      id:'',
+      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: [{
+
+          required: true,
+          message: '面值只能是数值，0.01-10000，限2位小数',
+          trigger: 'blur'
+        }],
+        minPoint: [{
+          type: 'number',
+          required: true,
+          message: '只能输入正整数',
+          trigger: 'blur'
+        }]
+      },
+      selectProduct: null,
+      selectProductLoading: false,
+      selectProductOptions: [],
+      selectProductCate: null,
+      productCateOptions: []
+    }
+  },
+  created() {
+    this.getProductCateList();
+  },
+  methods: {
+    showUpdate(id){
+        this.id=id;
+        getCoupon(id).then(response => {
+          this.coupon = response.data;
+        });
+    },
+    handleReturn() {
+      this.$emit('doback')
+    },
+    dateChange(val) {
+      console.log("val", val)
+    },
+    UpNumber(val, limit = 2) {
+      val = val.replace(/[^\d.]/g, '') // 保留数字
+      val = val.replace(/^00/, '0.') // 开头不能有两个0
+      val = val.replace(/^\./g, '0.') // 开头为小数点转换为0.
+      val = val.replace(/\.{2,}/g, '.') // 两个以上的小数点转换成一个
+      val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.'); // 只保留一个小数点
+      /^0\d+/.test(val) ? val = val.slice(1) : '' // 两位以上数字开头不能为0
+      const str = '^(\\d+)\\.(\\d{' + limit + '}).*$'
+      const reg = new RegExp(str)
+      if (limit === 0) {
+        // 不需要小数点
+        val = val.replace(reg, '$1')
+      } else {
+        // 通过正则保留小数点后指定的位数
+        val = val.replace(reg, '$1.$2')
+      }
+      return val
+    },
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if(parseFloat(this.coupon.amount)>=parseFloat(this.coupon.minPoint)){
+            this.$message({
+              message: '优惠券面值金额须小于使用门槛金额',
+              type: 'error',
+              duration: 1000
+            });
+            return false;
+          }
+
+          this.$confirm('是否提交数据', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+              updateCoupon(this.id, 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);
+    },
+    searchProductMethod(query) {
+      if (query !== '') {
+        this.loading = true;
+        simpleProductList({
+          keyword: query
+        }).then(response => {
+          this.loading = false;
+          let productList = response.data;
+          this.selectProductOptions = [];
+          for (let i = 0; i < productList.length; i++) {
+            let item = productList[i];
+            this.selectProductOptions.push({
+              productId: item.id,
+              productName: item.name,
+              productSn: item.productSn
+            });
+          }
+        });
+      } else {
+        this.selectProductOptions = [];
+      }
+    },
+    handleAddProductRelation() {
+      if (this.selectProduct === null) {
+        this.$message({
+          message: '请先选择商品',
+          type: 'warning'
+        });
+        return
+      }
+      this.coupon.productRelationList.push(this.getProductById(this.selectProduct));
+      this.selectProduct = null;
+    },
+    handleDeleteProductRelation(index, row) {
+      this.coupon.productRelationList.splice(index, 1);
+    },
+    handleAddProductCategoryRelation() {
+      if (this.selectProductCate === null || this.selectProductCate.length === 0) {
+        this.$message({
+          message: '请先选择商品分类',
+          type: 'warning'
+        });
+        return
+      }
+      this.coupon.productCategoryRelationList.push(this.getProductCateByIds(this.selectProductCate));
+      this.selectProductCate = [];
+    },
+    handleDeleteProductCateRelation(index, row) {
+      this.coupon.productCategoryRelationList.splice(index, 1);
+    },
+    getProductById(id) {
+      for (let i = 0; i < this.selectProductOptions.length; i++) {
+        if (id === this.selectProductOptions[i].productId) {
+          return this.selectProductOptions[i];
+        }
+      }
+      return null;
+    },
+    getProductCateList() {
+      fetchListWithChildren().then(response => {
+        let list = response.data;
+        this.productCateOptions = [];
+        for (let i = 0; i < list.length; i++) {
+          let children = [];
+          if (list[i].children != null && list[i].children.length > 0) {
+            for (let j = 0; j < list[i].children.length; j++) {
+              children.push({
+                label: list[i].children[j].name,
+                value: list[i].children[j].id
+              });
+            }
+          }
+          this.productCateOptions.push({
+            label: list[i].name,
+            value: list[i].id,
+            children: children
+          });
+        }
+      });
+    },
+    getProductCateByIds(ids) {
+      let name;
+      let parentName;
+      for (let i = 0; i < this.productCateOptions.length; i++) {
+        if (this.productCateOptions[i].value === ids[0]) {
+          parentName = this.productCateOptions[i].label;
+          for (let j = 0; j < this.productCateOptions[i].children.length; j++) {
+            if (this.productCateOptions[i].children[j].value === ids[1]) {
+              name = this.productCateOptions[i].children[j].label;
+            }
+          }
+        }
+      }
+      return {
+        productCategoryId: ids[1],
+        productCategoryName: name,
+        parentCategoryName: parentName
+      };
+    }
+  }
 }
 </script>
 <style scoped>
+.input-width {
+  width: 60%;
+}
 </style>
-
-