oneos-v5/backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

前端：优惠劵列表

Browse Source 
前端：增加路由的认证拦截
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
Download Patch File Download Diff File Expand all files Collapse all files

12
mobile-web/src/api/promotion.js
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
}
});
}

4
mobile-web/src/config/env.js
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,

18
mobile-web/src/config/router.js
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();
});

10
mobile-web/src/main.js
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);
}
});

5
mobile-web/src/page/account/phonelogin.vue
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);
}
});
});

271
mobile-web/src/page/user/coupon/list.vue
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{

15
mobile-web/src/utils/date.js Normal file
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 '暂不支持';
}
}