前端:优惠劵列表

前端:增加路由的认证拦截
This commit is contained in:
YunaiV 2019-04-08 21:47:23 +08:00
parent 92ed97faed
commit 235da59f70
23 changed files with 321 additions and 127 deletions

View File

@ -41,3 +41,15 @@ export function doAddCouponCard(templateId) {
}
// Coupon Card
export function getCouponPage(status, pageNo, pageSize) {
return request({
url: '/promotion-api/users/coupon/card/page',
method: 'get',
params: {
status,
pageNo,
pageSize
}
});
}

View File

@ -20,8 +20,8 @@ if (!process.env.NODE_ENV || process.env.NODE_ENV == 'development') {
// baseUrl = 'http://127.0.0.1';
// baseUrl = 'http://180.167.213.26:18099';
// dataSources = 'remote';
dataSources = 'local';
dataSources = 'remote';
// dataSources = 'local';
export {
baseUrl,

View File

@ -1,6 +1,8 @@
import Vue from 'vue';
import Router from 'vue-router';
import { getAccessToken } from '../utils/cache';
Vue.use(Router);
const routes = [
@ -84,7 +86,8 @@ const routes = [
path: '/user/coupon',
component: () => import('../page/user/coupon/list'),
meta: {
title: '我的优惠券'
title: '我的优惠券',
requireAuth: true,
}
},
{
@ -202,10 +205,23 @@ routes.forEach(route => {
const router = new Router({ routes });
router.beforeEach((to, from, next) => {
// 判断是否需要认证
const requireAuth = to.meta && to.meta.requireAuth;
if (requireAuth) {
if (!getAccessToken()) { // 未登陆
next({
path: '/login',
query: {redirect: to.fullPath} // 将跳转的路由path作为参数登录成功后跳转到该路由
});
return;
}
}
// 处理标题
const title = to.meta && to.meta.title;
if (title) {
document.title = title;
}
// 继续路由
next();
});

View File

@ -7,6 +7,8 @@ import VueLazyload from 'vue-lazyload'
import components from './config/components.js';
import { Dialog } from 'vant';
import { formatDate } from './utils/date.js';
Vue.use(components);
Vue.use(VueLazyload);
@ -16,4 +18,10 @@ new Vue({
router,
el: '#app',
render: h => h(App)
});
});
Vue.filter('formatDate', function(date, pattern) {
if (date) {
return formatDate(date, pattern);
}
});

View File

@ -73,8 +73,9 @@ export default {
message: '登陆成功',
beforeClose: function (action, done) {
done();
// TODO callback
that.$router.push('/user/index');
// TODO callback
let redirect = that.$route.query.redirect || '/user/index';
that.$router.push(redirect);
}
});
});

View File

@ -6,7 +6,7 @@
center
clearable
placeholder="请输入优惠码"
v-model="couponCode"
>
<van-button slot="button" size="small" type="primary" :loading="exchangeLoading" @click="onExchange">兑换</van-button>
@ -16,41 +16,50 @@
<van-tab title="未使用">
<ul>
<van-list
v-model="loading"
:finished="finished"
v-model="unusedData.loading"
:finished="unusedData.finished"
@load="onLoad"
>
<li v-for="(item,index) in list" :key="index" :class="'couponitem '+(item.show?'show':'') ">
<li v-for="(item,index) in unusedData.list" :key="index" :class="'couponitem '+(item.show?'show':'') ">
<div class="couponTop">
<div class="cpnamount">
<div class="amountWrap">
<div class="amount">
<span class="amountSign" v-if="item.SignPosition=='left'" >{{item.Sign}}</span>
<span class="amountNum">{{item.Coupon}}</span>
<span class="amountSign" v-if="item.SignPosition=='right'" >{{item.Sign}}</span>
<div class="amount" v-if="item.preferentialType === 1">
<span class="amountSign" ></span>
<span class="amountNum">{{item.priceOff / 100}}</span>
</div>
<div class="amount" v-else="item.preferentialType === 2">
<span class="amountNum">{{item.percentOff / 10.0}}</span>
<span class="amountSign"></span>
</div>
<div class="condition">
<span>{{item.Condition}}</span>
<span> {{item.priceAvailable}} 元可用</span>
</div>
</div>
</div>
<div class="couponInfoWrap">
<div class="cpninfo">
<div class="detail">
<span class="name">{{item.Name}}</span></div>
<span class="name">{{item.title}}</span></div>
</div>
<div class="validity">
<span>{{item.BeginDate}}-{{item.EndDate}}
</span>
<span>{{item.validStartTime | formatDate('yyyy-MM-dd')}}
~ {{item.validEndTime | formatDate('yyyy-MM-dd')}}</span>
</div>
<van-button type="danger" size="mini">立即使用</van-button>
</div>
</div>
<div class="couponMid " v-if="item.Info!=''">
<span>详细信息</span>
<van-icon name="arrow" class="down" @click="onShowInfo(item.Id,index)" />
</div>
<div class="info" v-if="item.Info!=''" >
<!-- <div class="couponMid " v-if="item.Info!=''">-->
<!-- <span>详细信息</span>-->
<!-- <van-icon name="arrow" class="down" @click="onShowInfo(item.Id,index)" />-->
<!-- </div>-->
<!-- <div class="info" v-if="item.Info!=''" >-->
<!-- <div class="text">-->
<!-- {{item.Info}}-->
<!-- </div>-->
<!-- </div>-->
<!-- todo 芋艿后续做优化指定哪些商品 / 分类可用 -->
<div class="info" v-if="item.Info!=''" >
<div class="text">
{{item.Info}}
</div>
@ -62,32 +71,35 @@
<van-tab title="使用记录">
<ul class="gray" >
<van-list
v-model="useLoading"
:finished="useFinished"
v-model="usedData.loading"
:finished="usedData.finished"
@load="onLoadUse"
>
<li v-for="(item,index) in useList" :key="index" class="couponitem">
<li v-for="(item,index) in usedData.list" :key="index" class="couponitem">
<div class="couponTop">
<div class="cpnamount">
<div class="amountWrap">
<div class="amount">
<span class="amountSign" v-if="item.SignPosition=='left'" >{{item.Sign}}</span>
<span class="amountNum">{{item.Coupon}}</span>
<span class="amountSign" v-if="item.SignPosition=='right'" >{{item.Sign}}</span>
<div class="amount" v-if="item.preferentialType === 1">
<span class="amountSign" ></span>
<span class="amountNum">{{item.priceOff / 100}}</span>
</div>
<div class="amount" v-else="item.preferentialType === 2">
<span class="amountNum">{{item.percentOff / 10.0}}</span>
<span class="amountSign"></span>
</div>
<div class="condition">
<span>{{item.Condition}}</span>
<span> {{item.priceAvailable}} 元可用</span>
</div>
</div>
</div>
<div class="couponInfoWrap">
<div class="cpninfo">
<div class="detail">
<span class="name">{{item.Name}}</span></div>
<span class="name">{{item.title}}</span></div>
</div>
<div class="validity">
<span>{{item.BeginDate}}-{{item.EndDate}}
</span>
<span>{{item.validStartTime | formatDate('yyyy-MM-dd')}}
~ {{item.validEndTime | formatDate('yyyy-MM-dd')}}</span>
</div>
</div>
</div>
@ -97,34 +109,37 @@
</van-tab>
<van-tab title="已过期">
<ul class="gray" >
<van-list
v-model="endLoading"
:finished="endFinished"
v-model="expireData.loading"
:finished="expireData.finished"
@load="onLoadEnd"
>
<li v-for="(item,index) in endList" :key="index" class="couponitem">
<li v-for="(item,index) in expireData.list" :key="index" class="couponitem">
<div class="couponTop">
<div class="cpnamount">
<div class="amountWrap">
<div class="amount">
<span class="amountSign" v-if="item.SignPosition=='left'" >{{item.Sign}}</span>
<span class="amountNum">{{item.Coupon}}</span>
<span class="amountSign" v-if="item.SignPosition=='right'" >{{item.Sign}}</span>
<div class="amount" v-if="item.preferentialType === 1">
<span class="amountSign" ></span>
<span class="amountNum">{{item.priceOff / 100}}</span>
</div>
<div class="amount" v-else="item.preferentialType === 2">
<span class="amountNum">{{item.percentOff / 10.0}}</span>
<span class="amountSign"></span>
</div>
<div class="condition">
<span>{{item.Condition}}</span>
<span> {{item.priceAvailable}} 元可用</span>
</div>
</div>
</div>
<div class="couponInfoWrap">
<div class="cpninfo">
<div class="detail">
<span class="name">{{item.Name}}</span></div>
<span class="name">{{item.title}}</span></div>
</div>
<div class="validity">
<span>{{item.BeginDate}}-{{item.EndDate}}
</span>
<span>{{item.validStartTime | formatDate('yyyy-MM-dd')}}
~ {{item.validEndTime | formatDate('yyyy-MM-dd')}}</span>
</div>
</div>
</div>
@ -138,83 +153,131 @@
<script>
import { GetCoupon,ExchangeCoupon } from "../../../api/user.js";
import { getCouponPage } from "../../../api/promotion.js";
export default {
components: {
},
data() {
return {
loading:false,
finished:false,
list:[],
page:0,
useLoading:false,
useFinished:false,
useList:[],
usePage:0,
endLoading:false,
endFinished:false,
endList:[],
endPage:0,
// loading:false,
// finished:false,
// list:[],
// page:0,
//
//
// useLoading:false,
// useFinished:false,
// useList:[],
// usePage:0,
//
//
// endLoading:false,
// endFinished:false,
// endList:[],
// endPage:0,
couponCode:'',
exchangeLoading:false,
unusedData: {
page: 0,
pageSize: 10,
list: [],
loading: false,
finished: false,
},
usedData: {
page: 0,
pageSize: 10,
list: [],
loading: false,
finished: false,
},
expireData: {
page: 0,
pageSize: 10,
list: [],
loading: false,
finished: false,
},
};
},
computed: {
},
methods: {
onLoad() {
this.page++;
GetCoupon({page:this.page}).then(response=>{
response.List.forEach(item => {
item.show=false;
this.list.push(item);
});
this.loading = false;
if(response.TotalPage<=this.page){
this.finished = true;
}
})
},
onShowInfo(id,index){
this.list.forEach((item,itemIndex) => {
if(index==itemIndex){
item.show=!item.show;
return;
}
//
let page = this.unusedData.page + 1;
getCouponPage(1, page, this.unusedData.pageSize).then(data => {
// debugger;
//
this.unusedData.page = page;
// list
this.unusedData.list.push(...data.list);
//
if (this.unusedData.list.length >= data.total) {
this.unusedData.finished = true;
}
//
this.unusedData.loading = false;
});
// GetCoupon({page:this.page}).then(response=>{
// response.List.forEach(item => {
// item.show=false;
// this.list.push(item);
// });
// this.loading = false;
// if(response.TotalPage<=this.page){
// this.finished = true;
// }
//
// })
},
// onShowInfo(id,index){
// this.list.forEach((item,itemIndex) => {
// if(index==itemIndex){
// item.show=!item.show;
// return;
// }
// });
// },
onLoadUse() {
this.usePage++;
GetCoupon({page:this.usePage}).then(response=>{
response.List.forEach(item => {
this.useList.push(item);
});
this.useLoading = false;
if(response.TotalPage<=this.usePage){
this.useFinished = true;
}
})
//
let page = this.usedData.page + 1;
getCouponPage(2, page, this.usedData.pageSize).then(data => {
// debugger;
//
this.usedData.page = page;
// list
this.usedData.list.push(...data.list);
//
if (this.usedData.list.length >= data.total) {
this.usedData.finished = true;
}
//
this.usedData.loading = false;
});
},
onLoadEnd() {
this.endPage++;
GetCoupon({page:this.endPage}).then(response=>{
response.List.forEach(item => {
this.endList.push(item);
});
this.endLoading = false;
if(response.TotalPage<=this.endPage){
this.endFinished = true;
}
})
//
let page = this.expireData.page + 1;
getCouponPage(3, page, this.expireData.pageSize).then(data => {
// debugger;
//
this.expireData.page = page;
// list
this.expireData.list.push(...data.list);
//
if (this.expireData.list.length >= data.total) {
this.expireData.finished = true;
}
//
this.expireData.loading = false;
});
},
onExchange(){
if(this.exchangeLoading){
@ -222,9 +285,9 @@ export default {
}
this.exchangeLoading=true;
ExchangeCoupon(this.couponCode).then(response=>{
this.$toast('兑换成功');
this.$toast('兑换成功');
this.exchangeLoading=false;
this.$router.go(0);
this.$router.go(0);
})
}
}
@ -308,7 +371,7 @@ export default {
line-height: 31px;
padding-left: 16px;
font-size: 12px;
background-color: #fcebeb;
border-left: 1px solid #f3d4d4;
border-right: 1px solid #f3d4d4;
@ -321,10 +384,10 @@ export default {
position: absolute;
top: 8px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
transform: rotate(90deg);
}
}
.info{
display: none;
background-color: #fcebeb;
@ -338,14 +401,14 @@ padding: 10px 25px 12px 15px;
}
}
.show{
.couponMid {
border-bottom: 1px dashed #f3d4d4;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
i{
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
transform: rotate(-90deg);
}
}
.info{

View File

@ -0,0 +1,15 @@
// TODO 临时代码
export function formatDate(date, pattern) {
if (!(date instanceof Date)) {
date = new Date(date);
}
if (pattern === 'yyyy-MM-dd') {
let d = date.getDate();
let m = date.getMonth() + 1; //Month from 0 to 11
let y = date.getFullYear();
return '' + y + '-' + (m <= 9 ? '0' + m : m) + '-' + (d <= 9 ? '0' + d : d);
} else {
return '暂不支持';
}
}

View File

@ -1,5 +1,8 @@
package cn.iocoder.mall.order.api.dto;
import lombok.Data;
import lombok.experimental.Accessors;
import javax.validation.constraints.Max;
import javax.validation.constraints.NotNull;
@ -7,6 +10,8 @@ import javax.validation.constraints.NotNull;
* @author Sin
* @time 2019-03-17 09:37
*/
@Data
@Accessors(chain = true)
public class OrderCreateItemDTO {
/**

View File

@ -1,5 +1,8 @@
package cn.iocoder.mall.order.api.dto;
import lombok.Data;
import lombok.experimental.Accessors;
import java.io.Serializable;
import java.util.List;
@ -9,6 +12,8 @@ import java.util.List;
* @author Sin
* @time 2019-03-30 22:31
*/
@Data
@Accessors(chain = true)
public class OrderDeliveryDTO implements Serializable {
/**

View File

@ -1,5 +1,8 @@
package cn.iocoder.mall.order.api.dto;
import lombok.Data;
import lombok.experimental.Accessors;
import java.io.Serializable;
import java.util.List;
@ -7,6 +10,8 @@ import java.util.List;
* @author Sin
* @time 2019-03-23 10:22
*/
@Data
@Accessors(chain = true)
public class OrderItemDeletedDTO implements Serializable {
/**

View File

@ -1,5 +1,8 @@
package cn.iocoder.mall.order.api.dto;
import lombok.Data;
import lombok.experimental.Accessors;
import javax.validation.constraints.NotNull;
import java.io.Serializable;
@ -9,6 +12,8 @@ import java.io.Serializable;
* @author Sin
* @time 2019-03-16 14:46
*/
@Data
@Accessors(chain = true)
public class OrderItemUpdateDTO implements Serializable {
/**

View File

@ -1,5 +1,8 @@
package cn.iocoder.mall.order.api.dto;
import lombok.Data;
import lombok.experimental.Accessors;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Size;
import java.io.Serializable;
@ -10,6 +13,8 @@ import java.io.Serializable;
* @author Sin
* @time 2019-03-17 20:22
*/
@Data
@Accessors(chain = true)
public class OrderLogisticsUpdateDTO implements Serializable {
/**

View File

@ -1,5 +1,8 @@
package cn.iocoder.mall.order.api.dto;
import lombok.Data;
import lombok.experimental.Accessors;
import java.io.Serializable;
import java.util.Date;
@ -9,6 +12,8 @@ import java.util.Date;
* @author Sin
* @time 2019-03-23 14:15
*/
@Data
@Accessors(chain = true)
public class OrderQueryDTO implements Serializable {
/**

View File

@ -1,5 +1,8 @@
package cn.iocoder.mall.order.api.dto;
import lombok.Data;
import lombok.experimental.Accessors;
import java.io.Serializable;
/**
@ -8,6 +11,8 @@ import java.io.Serializable;
* @author Sin
* @time 2019-03-30 15:34
*/
@Data
@Accessors(chain = true)
public class OrderReturnCreateDTO implements Serializable {
/**

View File

@ -18,12 +18,16 @@ public class UsersCouponCardVO {
private Integer id;
@ApiModelProperty(value = "模板编号,自增唯一", required = true, example = "1")
private Integer templateId;
@ApiModelProperty(value = "优惠劵名", required = true, example = "大保剑")
private String title;
@ApiModelProperty(value = "优惠码状态", required = true, example = "参见 CouponCardStatusEnum 枚举")
private Integer status;
// ========== 基本信息 END ==========
// ========== 使用规则 BEGIN ==========
@ApiModelProperty(value = "是否设置满多少金额可用,单位:分", required = true)
private Integer priceAvailable;
@ApiModelProperty(value = "固定日期-生效开始时间", required = true)
private Date validStartTime;
@ApiModelProperty(value = "固定日期-生效结束时间", required = true)

View File

@ -21,6 +21,10 @@ public class CouponCardBO {
* 优惠劵分组编号
*/
private Integer templateId;
/**
* 优惠劵名
*/
private String title;
// /**
// * 核销码
// */
@ -51,6 +55,10 @@ public class CouponCardBO {
// ========== 领取情况 END ==========
// ========== 使用规则 BEGIN ==========
/**
* 是否设置满多少金额可用单位
*/
private Integer priceAvailable;
/**
* 生效开始时间
*/

View File

@ -6,8 +6,8 @@ import java.util.Arrays;
public enum CouponTemplateStatusEnum implements IntArrayValuable {
ENABLE(1, "开启"),
DISABLE(2, "禁用中"),
ENABLE(1, "生效"),
DISABLE(2, "已失效"),
// EXPIRE(3, "已过期"), TODO 芋艿暂时不考虑过期的
;

View File

@ -22,6 +22,14 @@ public class CouponCardDO extends BaseDO {
* 优惠劵分组编号{@link CouponTemplateDO} id
*/
private Integer templateId;
/**
* 优惠劵名
*
* 冗余自 {@link CouponTemplateDO} title
*
* TODO 芋艿暂时不考虑冗余的更新
*/
private String title;
// /**
// * 核销码
// */
@ -52,6 +60,10 @@ public class CouponCardDO extends BaseDO {
// ========== 领取情况 END ==========
// ========== 使用规则 BEGIN ==========
/**
* 是否设置满多少金额可用单位
*/
private Integer priceAvailable;
/**
* 生效开始时间
*/

View File

@ -38,4 +38,6 @@ public class CouponCodeDO extends BaseDO {
*/
private Integer couponId;
// TODO 芋艿后续要考虑状态的追踪
}

View File

@ -35,15 +35,6 @@ public class CouponTemplateDO extends BaseDO {
* 2-优惠码
*/
private Integer type;
/**
* 码类型
*
* 1-一卡一码UNIQUE
* 2-通用码GENERAL
*
* 优惠码独有 @see CouponCodeDO
*/
private Integer codeType;
/**
* 优惠码状态
*
@ -212,4 +203,20 @@ public class CouponTemplateDO extends BaseDO {
// private Integer statUseNum;
// ========== 统计信息 END ==========
// ========== 优惠码 BEGIN ==========
/**
* 码类型
*
* 1-一卡一码UNIQUE
* 2-通用码GENERAL
*
* 优惠码独有 @see CouponCodeDO
*/
private Integer codeType;
/**
* 通用码
*/
private String commonCode;
// ========== 优惠码 BEGIN ==========
}

View File

@ -0,0 +1,9 @@
package cn.iocoder.mall.promotion.biz.scheduler;
/**
* 优惠劵过期 Job
*
* TODO 芋艿
*/
public class CouponCardExpireJob {
}

View File

@ -224,10 +224,12 @@ public class CouponServiceImpl implements CouponService {
// 1. 基本信息 + 领取情况
CouponCardDO card = new CouponCardDO()
.setTemplateId(couponTemplateId)
.setTitle(template.getTitle())
.setStatus(CouponCardStatusEnum.UNUSED.getValue())
.setUserId(userId)
.setTakeType(CouponCardTakeTypeEnum.BY_USER.getValue()); // TODO 需要改
// 2. 使用规则
card.setPriceAvailable(template.getPriceAvailable());
setCouponCardValidTime(card, template);
// 3. 使用效果
card.setPreferentialType(template.getPreferentialType())

View File

@ -3,8 +3,8 @@
<mapper namespace="cn.iocoder.mall.promotion.biz.dao.CouponCardMapper">
<sql id="FIELDS">
id, template_id, status, user_id, take_type,
valid_start_time, valid_end_time, preferential_type, percent_off, price_off,
id, template_id, title, status, user_id, take_type,
price_available, valid_start_time, valid_end_time, preferential_type, percent_off, price_off,
discount_price_limit, used_order_id, used_price, used_time,
create_time
</sql>
@ -78,13 +78,13 @@
<insert id="insert" parameterType="CouponCardDO" useGeneratedKeys="true" keyColumn="id" keyProperty="id">
INSERT INTO coupon_card (
template_id, status, user_id, take_type,
valid_start_time, valid_end_time, preferential_type, percent_off, price_off,
template_id, title, status, user_id, take_type,
price_available, valid_start_time, valid_end_time, preferential_type, percent_off, price_off,
discount_price_limit, used_order_id, used_price, used_time,
create_time
) VALUES (
#{templateId}, #{status}, #{userId}, #{takeType},
#{validStartTime}, #{validEndTime}, #{preferentialType}, #{percentOff}, #{priceOff},
#{templateId}, #{title}, #{status}, #{userId}, #{takeType},
#{priceAvailable}, #{validStartTime}, #{validEndTime}, #{preferentialType}, #{percentOff}, #{priceOff},
#{discountPriceLimit}, #{usedOrderId}, #{usedPrice}, #{usedTime},
#{createTime}
)