From f4f7e9ca0be4a525e4e81c884ace6840aba142bd Mon Sep 17 00:00:00 2001
From: "djz236@163.com" <djz236@163.com>
Date: Sun, 21 Jan 2024 12:40:00 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E6=83=A0=E5=88=B8=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/coupon/coupon.js                     |  38 ++
 src/api/coupon/couponHistory.js              |   8 +
 src/api/product.js                           |   7 +
 src/layout/components/Sidebar/index.vue      |  10 +
 src/router/index.js                          |  47 +-
 src/views/coupon/add.vue                     |  19 +
 src/views/coupon/components/CouponDetail.vue | 425 +++++++++++++++++++
 src/views/coupon/history.vue                 | 314 ++++++++++++++
 src/views/coupon/index.vue                   | 275 ++++++++++++
 src/views/coupon/update.vue                  |  14 +
 10 files changed, 1144 insertions(+), 13 deletions(-)
 create mode 100644 src/api/coupon/coupon.js
 create mode 100644 src/api/coupon/couponHistory.js
 create mode 100644 src/views/coupon/add.vue
 create mode 100644 src/views/coupon/components/CouponDetail.vue
 create mode 100644 src/views/coupon/history.vue
 create mode 100644 src/views/coupon/index.vue
 create mode 100644 src/views/coupon/update.vue

diff --git a/src/api/coupon/coupon.js b/src/api/coupon/coupon.js
new file mode 100644
index 0000000..c04b427
--- /dev/null
+++ b/src/api/coupon/coupon.js
@@ -0,0 +1,38 @@
+import request from '@/utils/request'
+export function fetchList(params) {
+  return request({
+    url:'/sms/SmsCoupon/list',
+    method:'get',
+    params:params
+  })
+}
+
+export function createCoupon(data) {
+  return request({
+    url:'/sms/SmsCoupon/create',
+    method:'post',
+    data:data
+  })
+}
+
+export function getCoupon(id) {
+  return request({
+    url:'/sms/SmsCoupon/'+id,
+    method:'get',
+  })
+}
+
+export function updateCoupon(id,data) {
+  return request({
+    url:'/sms/SmsCoupon/update/'+id,
+    method:'post',
+    data:data
+  })
+}
+
+export function deleteCoupon(id) {
+  return request({
+    url:'/sms/SmsCoupon/delete/'+id,
+    method:'get',
+  })
+}
diff --git a/src/api/coupon/couponHistory.js b/src/api/coupon/couponHistory.js
new file mode 100644
index 0000000..70ed83a
--- /dev/null
+++ b/src/api/coupon/couponHistory.js
@@ -0,0 +1,8 @@
+import request from '@/utils/request'
+export function fetchList(params) {
+  return request({
+    url:'/sms/SmsCouponHistory/list',
+    method:'get',
+    params:params
+  })
+}
diff --git a/src/api/product.js b/src/api/product.js
index 3cbc827..5e5186f 100644
--- a/src/api/product.js
+++ b/src/api/product.js
@@ -14,6 +14,13 @@ export function fetchSimpleList(params) {
     params:params
   })
 }
+export function simpleProductList(params) {
+  return request({
+    url:'/pms/PmsProduct/simpleProductList',
+    method:'get',
+    params:params
+  })
+}
 
 export function updateDeleteStatus(params) {
   return request({
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 7ededd8..1679d45 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -239,6 +239,16 @@
             name: '/pickupPoint/index',
             path: '/pickupPoint/index'
           },
+          {
+            alwaysShow: true,
+            component: 'coupon',
+            meta: {
+              icon: 'el-icon-menu',
+              title: '优惠券管理'
+            },
+            name: '/coupon/index',
+            path: '/coupon/index'
+          },
           {
             alwaysShow: true,
             component: 'network',
diff --git a/src/router/index.js b/src/router/index.js
index 01d7b61..a7f04eb 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -268,19 +268,40 @@ export const constantRoutes = [{
 			},
 		]
 	}, {
-		path: '/pickupPoint',
-		component: Layout,
-		redirect: '/pickupPoint/index',
-		children: [{
-			path: '/pickupPoint/index',
-			component: () =>
-				import('@/views/pickupPoint/index.vue'),
-			name: 'index',
-			meta: {
-				title: '提货点信息'
-			}
-		}, ]
-	},
+    path: '/pickupPoint',
+    component: Layout,
+    redirect: '/pickupPoint/index',
+    children: [{
+      path: '/pickupPoint/index',
+      component: () =>
+        import('@/views/pickupPoint/index.vue'),
+      name: 'index',
+      meta: {
+        title: '提货点信息'
+      }
+    }, ]
+  }, {
+    path: '/coupon',
+    component: Layout,
+    redirect: '/coupon/index',
+    children: [{
+      path: '/coupon/index',
+      component: () =>
+        import('@/views/coupon/index.vue'),
+      name: 'index',
+      meta: {
+        title: '优惠券管理'
+      }
+    },{
+      path: '/coupon/add',
+      component: () =>
+        import('@/views/coupon/add.vue'),
+      name: 'index',
+      meta: {
+        title: '优惠券管理'
+      }
+    }]
+  },
 	{
 		path: '/network',
 		component: Layout,
diff --git a/src/views/coupon/add.vue b/src/views/coupon/add.vue
new file mode 100644
index 0000000..50ab105
--- /dev/null
+++ b/src/views/coupon/add.vue
@@ -0,0 +1,19 @@
+<template>
+  <coupon-detail :isEdit="false"></coupon-detail>
+</template>
+<script>
+  import CouponDetail from './components/CouponDetail'
+  export default {
+    name: 'addCoupon',
+    components: { CouponDetail },
+    methods: {
+      showAdd() {
+
+      }
+    }
+  }
+</script>
+<style scoped>
+</style>
+
+
diff --git a/src/views/coupon/components/CouponDetail.vue b/src/views/coupon/components/CouponDetail.vue
new file mode 100644
index 0000000..ae16056
--- /dev/null
+++ b/src/views/coupon/components/CouponDetail.vue
@@ -0,0 +1,425 @@
+<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="优惠券类型：">
+				<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 v-if="!isEdit" @click="resetForm('couponFrom')">重置</el-button>
+			</el-form-item>
+		</el-form>
+	</el-card>
+</template>
+<script>
+	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: '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: [{
+
+						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() {
+			if (this.isEdit) {
+				getCoupon(this.$route.query.id).then(response => {
+					this.coupon = response.data;
+				});
+			}
+			this.getProductCateList();
+		},
+		methods: {
+			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(() => {
+							if (this.isEdit) {
+								updateCoupon(this.$route.query.id, this.coupon).then(response => {
+									this.$refs[formName].resetFields();
+									this.$message({
+										message: '修改成功',
+										type: 'success',
+										duration: 1000
+									});
+									this.$router.back();
+								});
+							} else {
+								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);
+			},
+			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>
diff --git a/src/views/coupon/history.vue b/src/views/coupon/history.vue
new file mode 100644
index 0000000..247b3ba
--- /dev/null
+++ b/src/views/coupon/history.vue
@@ -0,0 +1,314 @@
+<template> 
+  <div class="app-container">
+    <div class="table-layout">
+      <el-row>
+        <el-col :span="4" class="table-cell-title">名称</el-col>
+        <el-col :span="4" class="table-cell-title">优惠券类型</el-col>
+        <el-col :span="4" class="table-cell-title">可使用商品</el-col>
+        <el-col :span="4" class="table-cell-title">使用门槛</el-col>
+        <el-col :span="4" class="table-cell-title">面值</el-col>
+        <el-col :span="4" class="table-cell-title">状态</el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="4" class="table-cell">{{coupon.name}}</el-col>
+        <el-col :span="4" class="table-cell">{{coupon.type | formatType}}</el-col>
+        <el-col :span="4" class="table-cell">{{coupon.useType | formatUseType}}</el-col>
+        <el-col :span="4" class="table-cell">满{{coupon.minPoint}}元可用</el-col>
+        <el-col :span="4" class="table-cell">{{coupon.amount}}元</el-col>
+        <el-col :span="4" class="table-cell">{{coupon.endTime | formatStatus}}</el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="4" class="table-cell-title">有效期</el-col>
+        <el-col :span="4" class="table-cell-title">总发行量</el-col>
+        <el-col :span="4" class="table-cell-title">已领取</el-col>
+        <el-col :span="4" class="table-cell-title">待领取</el-col>
+        <el-col :span="4" class="table-cell-title">已使用</el-col>
+        <el-col :span="4" class="table-cell-title">未使用</el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="4" class="table-cell" style="font-size: 13px">
+          {{coupon.startTime|formatDate}}至{{coupon.endTime|formatDate}}
+        </el-col>
+        <el-col :span="4" class="table-cell">{{coupon.publishCount}}</el-col>
+        <el-col :span="4" class="table-cell">{{coupon.receiveCount}}</el-col>
+        <el-col :span="4" class="table-cell">{{coupon.publishCount-coupon.receiveCount}}</el-col>
+        <el-col :span="4" class="table-cell">{{coupon.useCount}}</el-col>
+        <el-col :span="4" class="table-cell">{{coupon.publishCount-coupon.useCount}}</el-col>
+      </el-row>
+    </div>
+    <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-select v-model="listQuery.useStatus" placeholder="全部" clearable class="input-width">
+              <el-option v-for="item in useTypeOptions"
+                         :key="item.value"
+                         :label="item.label"
+                         :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="订单编号：">
+            <el-input v-model="listQuery.orderSn" class="input-width" placeholder="订单编号"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-card>
+    <div class="table-container">
+      <el-table ref="couponHistoryTable"
+                :data="list"
+                style="width: 100%;"
+                v-loading="listLoading" border>
+        <el-table-column label="优惠码" width="160" align="center">
+          <template slot-scope="scope">{{scope.row.couponCode}}</template>
+        </el-table-column>
+        <el-table-column label="领取会员" width="140" align="center">
+          <template slot-scope="scope">{{scope.row.memberNickname}}</template>
+        </el-table-column>
+        <el-table-column label="领取方式" width="100" align="center">
+          <template slot-scope="scope">{{scope.row.getType | formatGetType}}</template>
+        </el-table-column>
+        <el-table-column label="领取时间" width="160" align="center">
+          <template slot-scope="scope">{{scope.row.createTime | formatTime}}</template>
+        </el-table-column>
+        <el-table-column label="当前状态" width="140" align="center">
+          <template slot-scope="scope">{{scope.row.useStatus | formatCouponHistoryUseType}}</template>
+        </el-table-column>
+        <el-table-column label="使用时间" width="160" align="center">
+          <template slot-scope="scope">{{scope.row.useTime | formatTime}}</template>
+        </el-table-column>
+        <el-table-column label="订单编号" align="center">
+          <template slot-scope="scope">{{scope.row.orderSn===null?'N/A':scope.row.orderSn}}</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 {formatDate} from '@/utils/date';
+  import {getCoupon} from '@/api/coupon/coupon';
+  import {fetchList as fetchCouponHistoryList} from '@/api/coupon/couponHistory';
+
+  const defaultTypeOptions = [
+    {
+      label: '全场赠券',
+      value: 0
+    },
+    {
+      label: '会员赠券',
+      value: 1
+    },
+    {
+      label: '购物赠券',
+      value: 2
+    },
+    {
+      label: '注册赠券',
+      value: 3
+    }
+  ];
+  const defaultListQuery = {
+    pageNum: 1,
+    pageSize: 10,
+    useStatus: null,
+    orderSn: null,
+    couponId: null
+  };
+  const defaultUseTypeOptions= [
+    {
+      label: "未使用",
+      value: 0
+    },
+    {
+      label: "已使用",
+      value: 1
+    },
+    {
+      label: "已过期",
+      value: 2
+    }
+  ];
+  export default {
+    name: 'couponHistoryList',
+    data() {
+      return {
+        coupon: {},
+        listQuery: Object.assign({}, defaultListQuery),
+        useTypeOptions:Object.assign({},defaultUseTypeOptions),
+        list:null,
+        total:null,
+        listLoading:false
+      }
+    },
+    created() {
+      getCoupon(this.$route.query.id).then(response => {
+        this.coupon = response.data;
+      });
+      this.listQuery.couponId=this.$route.query.id;
+      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();
+        let date = new Date(endTime);
+        if(date.getTime()>now){
+          return '未过期'
+        }else{
+          return '已过期';
+        }
+      },
+      formatGetType(type) {
+        if(type===1){
+          return '主动获取';
+        }else{
+          return '后台赠送';
+        }
+      },
+      formatCouponHistoryUseType(useType) {
+        if (useType === 0) {
+          return '未使用';
+        } else if (useType === 1) {
+          return '已使用';
+        } else {
+          return '已过期';
+        }
+      },
+      formatTime(time) {
+        if (time == null || time === '') {
+          return 'N/A';
+        }
+        let date = new Date(time);
+        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
+      },
+    },
+    methods: {
+      getList(){
+        this.listLoading=true;
+        fetchCouponHistoryList(this.listQuery).then(response=>{
+          this.listLoading=false;
+          this.list=response.data.records;
+          this.total=response.data.total;
+        });
+      },
+      handleResetSearch() {
+        this.listQuery = Object.assign({}, defaultListQuery);
+        this.listQuery.couponId=this.$route.query.id;
+      },
+      handleSearchList() {
+        this.listQuery.pageNum = 1;
+        this.getList();
+      },
+      handleSizeChange(val) {
+        this.listQuery.pageNum = 1;
+        this.listQuery.pageSize = val;
+        this.getList();
+      },
+      handleCurrentChange(val) {
+        this.listQuery.pageNum = val;
+        this.getList();
+      }
+    }
+  }
+</script>
+<style scoped>
+  .app-container {
+    width: 80%;
+    margin: 20px auto;
+  }
+
+  .filter-container {
+    margin-top: 20px;
+  }
+
+  .table-layout {
+    margin-top: 20px;
+    border-left: 1px solid #DCDFE6;
+    border-top: 1px solid #DCDFE6;
+  }
+
+  .table-cell {
+    height: 60px;
+    line-height: 40px;
+    border-right: 1px solid #DCDFE6;
+    border-bottom: 1px solid #DCDFE6;
+    padding: 10px;
+    font-size: 14px;
+    color: #606266;
+    text-align: center;
+    overflow: hidden;
+  }
+
+  .table-cell-title {
+    border-right: 1px solid #DCDFE6;
+    border-bottom: 1px solid #DCDFE6;
+    padding: 10px;
+    background: #F2F6FC;
+    text-align: center;
+    font-size: 14px;
+    color: #303133;
+  }
+</style>
+
+
diff --git a/src/views/coupon/index.vue b/src/views/coupon/index.vue
new file mode 100644
index 0000000..a6e2d37
--- /dev/null
+++ b/src/views/coupon/index.vue
@@ -0,0 +1,275 @@
+<template> 
+  <div class="app-container">
+    <div  v-show="viewState == 1" >
+    <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"
+                       @click="handleView(scope.$index, scope.row)">查看</el-button>
+            <el-button size="mini"
+                       type="text"
+                       @click="handleUpdate(scope.$index, scope.row)">
+              编辑</el-button>
+            <el-button size="mini"
+                       type="text"
+                       @click="handleDelete(scope.$index, scope.row)">删除</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>
+    <divAdd v-show="viewState == 2|| viewState ==3" ref="divadd" @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 ButtonBar from '@/components/ButtonBar'
+  import Pagination from '@/components/pagination'
+  import pageye from '@/components/pagination/pageye'
+  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',
+    components: {
+      divAdd
+    },
+    data() {
+      return {
+        viewState: 1, // 1、列表 2、添加 3、修改 4、查看
+        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();
+        let date = new Date(endTime);
+        if(date.getTime()>now){
+          return '未过期'
+        }else{
+          return '已过期';
+        }
+      }
+    },
+    methods:{
+      loadList() {
+        this.listQuery.pageNum = 1;
+        this.getList();
+      },
+    resetState() {
+      this.viewState = 1
+    },
+      handleResetSearch() {
+        this.listQuery = Object.assign({}, defaultListQuery);
+      },
+      handleSearchList() {
+        this.listQuery.pageNum = 1;
+        this.getList();
+      },
+      handleSelectionChange(val){
+        this.multipleSelection = val;
+      },
+      handleSizeChange(val) {
+        this.listQuery.pageNum = 1;
+        this.listQuery.pageSize = val;
+        this.getList();
+      },
+      handleCurrentChange(val) {
+        this.listQuery.pageNum = val;
+        this.getList();
+      },
+      handleAdd(){
+        this.viewState = 2
+        this.$refs['divadd'].showAdd()
+        // this.$router.push({path: '/sms/addCoupon'})
+      },
+      handleView(index, row) {
+        this.$router.push({path: '/sms/couponHistory', query: {id: row.id}})
+      },
+      handleUpdate(index, row) {
+        this.$router.push({path: '/sms/updateCoupon', query: {id: row.id}})
+      },
+      handleDelete(index, row) {
+        this.$confirm('是否进行删除操作?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          deleteCoupon(row.id).then(response=>{
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            });
+            this.getList();
+          });
+        })
+      },
+      getList(){
+        this.listLoading=true;
+        fetchList(this.listQuery).then(response=>{
+          this.listLoading = false;
+          this.list = response.data.records;
+          this.total = response.data.total;
+        });
+      }
+    }
+  }
+</script>
+<style scoped>
+  .input-width {
+    width: 203px;
+  }
+</style>
+
+
diff --git a/src/views/coupon/update.vue b/src/views/coupon/update.vue
new file mode 100644
index 0000000..490610b
--- /dev/null
+++ b/src/views/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>
+
+