fix

virgo.wzfrontend/workark/public/index.html

@@ -7,7 +7,7 @@
 		<link rel="icon" href="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/2f7b4bfaf9e64817bc2cb46f3a632b01">
 		<title>WORKARK</title>
 		<link rel="stylesheet" type="text/css" href="<%= BASE_URL %>reset.css" />
-		<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4358860_y6mdx2xjoli.css">
+		<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4358860_kxdl3dm4e3a.css">
 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css">
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
 	</head>

virgo.wzfrontend/workark/src/api/discount.js

@@ -1,4 +1,4 @@
-import request from '@/axios'
+import request from '@/axios'
 /* 
  * 通过条件获取优惠券模板列表
  * 
@@ -68,4 +68,38 @@ export function deleteCouponModelById(id) {
 		url: `/api/workarkProductCouponModel/delete/${id}`,
 		method: 'delete'
 	})
+}
+/* 
+ * 获取新用户优惠券数据
+ * 
+ * 
+ */
+export function getCouponListByUser(userId) {
+	return request({
+		url: `/api/workarkProductCoupon/nowReceive/${userId}`,
+		method: 'get'
+	})
+}
+/* 
+ * 领取新用户优惠券
+ * 
+ * 
+ */
+export function receiveCouponByUser(userId, productCouponModelId) {
+	return request({
+		url: `/api/workarkProductCoupon/receive/${userId}/${productCouponModelId}`,
+		method: 'get'
+	})
+}
+/* 
+ * 通过条件获取优惠券列表
+ * 
+ * 
+ */
+export function getCouponListByQuery(data) {
+	return request({
+		url: `/api/workarkProductCoupon/query`,
+		method: 'post',
+		data: data
+	})
 }

virgo.wzfrontend/workark/src/layout/components/topNav.vue

@@ -21,9 +21,21 @@
 					<i :class="'iconfont huifont-gerenzhongxinxiala'+ (userDropdown ? ' dropdown-icon' : '')"></i>
 				</div>
 				<el-dropdown-menu class="user-dropdown" slot="dropdown">
-					<el-dropdown-item command="user">{{users.name}}</el-dropdown-item>
-					<el-dropdown-item command="detail">个人信息</el-dropdown-item>
-					<el-dropdown-item command="logout">退出登录</el-dropdown-item>
+					<el-dropdown-item class="user-detail" command="user">
+						<span>{{users.userName}}</span>
+					</el-dropdown-item>
+					<el-dropdown-item command="detail">
+						<i class="iconfont huifont-tubiaozhizuomoban-1"></i>
+						<span>个人信息</span>
+					</el-dropdown-item>
+					<el-dropdown-item command="conpon">
+						<i class="iconfont huifont-tubiaozhizuomoban-2"></i>
+						<span>优惠券</span>
+					</el-dropdown-item>
+					<el-dropdown-item command="logout">
+						<i class="iconfont huifont-tubiaozhizuomoban-3"></i>
+						<span>退出登录</span>
+					</el-dropdown-item>
 				</el-dropdown-menu>
 			</el-dropdown>
 		</div>
@@ -59,6 +71,9 @@
 					case 'logout':
 						this.logout();
 						break;
+					case 'conpon':
+						this.$router.push('/work/discount/userCoupon');
+						break;
 					default:
 						break;
 				}
@@ -166,4 +181,25 @@
 			transform: rotate(180deg);
 		}
 	}
+
+	.user-dropdown {
+		padding: 5px;
+
+		.user-detail.el-dropdown-menu__item {
+			background: $--background-color-base;
+			margin-bottom: 5px;
+			cursor: default;
+		}
+
+		.user-detail.el-dropdown-menu__item:not(.is-disabled):hover,
+		.user-detail.el-dropdown-menu__item:focus {
+			background: $--background-color-base;
+			color: $--color-text-regular;
+		}
+
+		.el-dropdown-menu__item {
+			padding: 0 10px;
+			border-radius: $--border-radius-small;
+		}
+	}
 </style>

virgo.wzfrontend/workark/src/layout/workLayout.vue

@@ -18,6 +18,32 @@
 				<router-view :key="key" />
 			</transition>
 		</div>
+		<el-dialog :close-on-click-modal="true" title="新用户注册福利" :visible.sync="hasCoupon" width="600px"
+			:append-to-body="true">
+			<div class="hui-flex hui-dialog">
+				<div class="hui-flex-box hui-dialog-content" style="background: #f7f9fc;">
+					<div class="coupon-card-wrap" v-for="(item,index) in coupon" :key="index">
+						<div class="price">
+							<div v-if="item.type === 1">
+								<span class="symbol">¥</span>
+								<span>{{item.couponAmount}}</span>
+							</div>
+							<div v-else>
+								<span>{{item.discount*100}}</span>
+								<span class="symbol">折</span>
+							</div>
+						</div>
+						<div class="center-describe">
+							<div class="product">{{item.title}}</div>
+							<div class="sub-title">
+								<span>{{item.type === 1?`满${item.threshold}减${item.couponAmount}`:`满${item.threshold}可用，最高抵扣${item.mostConstraint}`}}</span>
+							</div>
+						</div>
+						<el-button type="primary" size="small" @click="reviceCoupon(item)">立即领取</el-button>
+					</div>
+				</div>
+			</div>
+		</el-dialog>
 	</div>
 </template>
 
@@ -25,6 +51,10 @@
 	import {
 		mapGetters
 	} from 'vuex';
+	import {
+		getCouponListByUser,
+		receiveCouponByUser
+	} from '@/api/discount'
 	import topNav from './components/topNav'
 	import subMenu from './components/subMenu'
 	import breadCrumb from './components/breadCrumb'
@@ -32,15 +62,34 @@
 		data() {
 			return {
 				menuList: [],
-				isCollapse: false
+				isCollapse: false,
+				coupon: [],
+				hasCoupon: false
 			}
 		},
 		mounted() {
 			this.init();
+			this.initCoupon();
 		},
 		methods: {
 			init() {
 				this.menuList = this.$store.getters.menuData;
+			},
+			initCoupon() {
+				getCouponListByUser(this.$store.getters.user.userId).then(res => {
+					if (res.state) {
+						this.coupon = res.data;
+						this.hasCoupon = this.coupon.length > 0;
+					}
+				})
+			},
+			reviceCoupon(item) {
+				receiveCouponByUser(this.$store.getters.user.userId, item.id).then(res => {
+					if (res.state) {
+						this.$message.success('领取成功');
+						this.initCoupon();
+					}
+				})
 			}
 		},
 		components: {
@@ -63,6 +112,45 @@
 </script>
 
 <style lang="scss">
+	.coupon-card-wrap {
+		align-items: center;
+		background: url('@/assets/img/coupon.png') 50% / 100% 100% no-repeat;
+		display: -webkit-flex;
+		display: flex;
+		margin-bottom: 9px;
+		height: 110px;
+		padding-right: 20px;
+
+		.price {
+			color: $--color-danger;
+			font-size: 24px;
+			font-weight: 500;
+			line-height: 24px;
+			text-align: center;
+			width: 120px;
+
+			.symbol {
+				margin: 0 3px;
+				font-size: $--font-size-base;
+			}
+		}
+
+		.center-describe {
+			display: inline-block;
+			margin-right: auto;
+			padding-left: 20px;
+			text-align: left;
+
+			.product {
+				color: $--color-text-primary;
+				font-size: $--font-size-large;
+				font-weight: 550;
+				line-height: 14px;
+				padding-bottom: 12px;
+			}
+		}
+	}
+
 	.work-layout {
 		width: 100%;
 		height: 100%;

virgo.wzfrontend/workark/src/router/modules/work/discount.js

@@ -1,6 +1,13 @@
 const discount = [{
 	path: 'discount/coupon',
 	component: () => import('@/views/work/discount/coupon'),
+	name: '优惠券管理',
+	meta: {
+		title: '优惠券管理'
+	}
+}, {
+	path: 'discount/userCoupon',
+	component: () => import('@/views/work/discount/userCoupon'),
 	name: '优惠券',
 	meta: {
 		title: '优惠券'

virgo.wzfrontend/workark/src/router/permission.js

@@ -16,7 +16,7 @@ NProgress.configure({
 	showSpinner: false
 })
 
-const baseUrl = ['/work', '/message'];
+const baseUrl = ['/work', '/message','/work/discount/userCoupon'];
 const noTokenUrl = ['/', '/401', '/404', '/loginRegister/login','/website/serveDetail'];
 
 const testBaseUrl = path => { //判断公共路由

virgo.wzfrontend/workark/src/views/work/discount/coupon.vue

@@ -24,7 +24,7 @@
 					</el-table-column>
 					<el-table-column label="折扣内容">
 						<template slot-scope="scope">
-							<span>{{scope.row.type === 1?`满${scope.row.threshold}减${scope.row.couponAmount}`:`打${scope.row.discount*100}折，满${scope.row.threshold}可用，最高抵扣${scope.row.mostConstraint}`}}</span>
+							<span>{{scope.row.type === 1?`满${scope.row.threshold}减${scope.row.couponAmount}`:`${scope.row.discount*100}折，满${scope.row.threshold}可用，最高抵扣${scope.row.mostConstraint}`}}</span>
 						</template>
 					</el-table-column>
 					<el-table-column label="有效期(小时)" prop="lifespan"></el-table-column>
@@ -92,7 +92,9 @@
 		methods: {
 			init() {
 				this.loading = true;
-				let filterOption = {};
+				let filterOption = {
+					organizationId: this.$store.getters.organization.id
+				};
 				filterOption = Object.assign(filterOption, this.filterOption);
 				getCouponModelListByQueryAndPage(this.currPage, this.pageSize, filterOption).then(res => {
 					if (res.state) {

virgo.wzfrontend/workark/src/views/work/discount/userCoupon.vue

@@ -0,0 +1,192 @@
+<template>
+	<div class="hui-flex hui-content border-box">
+		<div class="hui-content-title">
+			<div class="hui-title-item active">优惠券</div>
+		</div>
+		<div class="hui-flex-box">
+			<ul class="coupon-list">
+				<li :class="item.state === 1?'coupon-item':'coupon-item use'" v-for="(item,index) in list" :key="index">
+					<div class="coupon-info">
+						<div class="coupon-val">
+							<div v-if="item.type === 1">
+								<span class="symbol">¥</span>
+								<span class="coupon-val-num">{{item.couponAmount}}</span>
+							</div>
+							<div v-else>
+								<span class="coupon-val-num">{{item.discount*100}}</span>
+								<span class="symbol">折</span>
+							</div>
+						</div>
+						<p class="coupon-condition">
+							{{item.type === 1?`满${item.threshold}减${item.couponAmount}`:`满${item.threshold}可用，最高抵扣${item.mostConstraint}`}}
+						</p>
+						<p class="coupon-condition">
+							有效期至：{{$dayjs(item.receiveTime).add(item.lifespan, 'hour').format('YYYY-MM-DD HH:mm:ss')}}
+						</p>
+					</div>
+					<div class="coupon-detail">
+						<p class="coupon-detail-title">使用规则</p>
+						<div class="coupon-detail-content">
+							<div class="coupon-detail-item" v-for="(item,index) in JSON.parse(item.description)"
+								:key="index">
+								{{(index+1)+'.'+item.content}}
+							</div>
+						</div>
+						<div class="coupon-status">
+							{{returnStateName(item.state)}}
+						</div>
+					</div>
+				</li>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<script>
+	import {
+		getCouponListByQuery
+	} from '@/api/discount'
+	export default {
+		data() {
+			return {
+				list: []
+			}
+		},
+		mounted() {
+			this.init();
+		},
+		methods: {
+			init() {
+				getCouponListByQuery({
+					userId: this.$store.getters.user.userId
+				}).then(res => {
+					if (res.state) {
+						this.list = res.data;
+					}
+				})
+			},
+			returnStateName(state) {
+				let str = '';
+				switch (state) {
+					case 1:
+						str = '待使用'
+						break;
+					case 2:
+						str = '已使用'
+						break;
+					case 3:
+						str = '已过期'
+						break;
+					default:
+						break;
+				}
+				return str;
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.coupon-list {
+		display: flex;
+		flex-wrap: wrap;
+		padding: 10px;
+
+		.coupon-item {
+			width: 248px;
+			margin: 10px;
+			overflow: hidden;
+		}
+
+		.coupon-info {
+			height: 120px;
+			background: $--color-primary;
+			border-radius: 5px;
+			position: relative;
+			color: $--color-white;
+			padding: 15px 20px;
+		}
+
+		.coupon-val {
+			padding-bottom: 5px;
+		}
+
+		.coupon-val-num {
+			font-size: 30px;
+			font-weight: bold;
+		}
+
+		.coupon-condition {
+			font-size: $--font-size-small;
+			margin-top: 5px;
+		}
+
+		.coupon-detail {
+			height: 180px;
+			padding: 15px 20px;
+			border: 1px solid $--border-color-base;
+			border-radius: 5px;
+			position: relative;
+
+			&:after,
+			&:before {
+				content: "";
+				width: 14px;
+				height: 14px;
+				background: #fff;
+				border-bottom: 1px solid $--border-color-base;
+				border-radius: 7px;
+				position: absolute;
+				top: -7px;
+			}
+
+			&:after {
+				border-left: 1px solid $--border-color-base;
+				transform: rotate(45deg);
+				right: -7px;
+			}
+
+			&:before {
+				border-left: 1px solid $--border-color-base;
+				transform: rotate(-45deg);
+				left: -7px;
+			}
+		}
+
+		.coupon-detail-title {
+			margin-bottom: 5px;
+			font-weight: bold;
+		}
+
+		.coupon-detail-content {
+			color: $--color-text-secondary;
+			font-size: $--font-size-small;
+		}
+
+		.coupon-detail-item {
+			margin-bottom: 5px;
+		}
+
+		.coupon-status {
+			width: 128px;
+			height: 32px;
+			line-height: 32px;
+			background: $--color-primary;
+			color: $--color-white;
+			text-align: center;
+			position: absolute;
+			bottom: 58px;
+			right: 0;
+			transform-origin: right top;
+			transform: rotate(-45deg);
+		}
+
+		.use {
+
+			.coupon-status,
+			.coupon-info {
+				background: #b4b6b7;
+			}
+		}
+	}
+</style>