Skip to content

Commit e4891c0

Browse files
author
alistar
committed
完成vipcard
1 parent ef60074 commit e4891c0

10 files changed

+510
-0
lines changed

‎src/page/vipcard/children/invoiceRecord.vue

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<template>
2+
<div class="page_container">
3+
<head-top head-title="购买记录" go-back='true'></head-top>
4+
<!-- 没有办过会员卡，获取不到数据，只好写死 -->
5+
<section class="invoice_contianer">
6+
<img src="../../../images/no-log.png">
7+
<p>没有购买记录</p>
8+
</section>
9+
</div>
10+
</template>
11+
12+
<script>
13+
import headTop from '@/components/header/head'
14+
import { mapState, mapMutations } from 'vuex'
15+
16+
export default {
17+
computed: {
18+
...mapState(['userInfo'])
19+
},
20+
components: {
21+
headTop
22+
},
23+
methods: {
24+
...mapMutations(['SAVE_AVANDER'])
25+
}
26+
}
27+
</script>
28+
<style lang="scss" scoped>
29+
@import "../../../style/invoiceRecord.scss";
30+
</style>

‎src/page/vipcard/children/useCart.vue

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<template>
2+
<div class="page_container">
3+
<head-top head-title="兑换会员" go-back='true'></head-top>
4+
<p class="buy_for">成功兑换后将关联到当前帐号： <span>{{userInfo.username}}</span></p>
5+
<form class="form_style">
6+
<input type="text" name="cartNumber" maxlength="10" v-model="cartNumber" placeholder="请输入10位卡号">
7+
<input type="text" name="passWord" maxlength="6" v-model="passWord" placeholder="请输入6位卡密">
8+
</form>
9+
<p class="determine" :class="{could_pay: couldPay}" @click="confrimPay">兑换</p>
10+
<footer class="Binding">
11+
<h3>——温馨提示——</h3>
12+
<p>新兑换的会员服务，权益以「会员说明」为准。</p>
13+
<p>月卡：<b>30次</b>减免配送费。</p>
14+
<p>季卡：<b>90次</b>减免配送费。</p>
15+
<p>年卡：<b>360</b>次减免配送费。</p>
16+
<p>＊仅限蜂鸟专送订单，每日最多减免3单，每单最高减免4元（一个月按31天计算）</p>
17+
</footer>
18+
<alert-tip v-if="showAlert" @closeTip="showAlert = false" :alertText="alertText"></alert-tip>
19+
</div>
20+
</template>
21+
22+
<script>
23+
import headTop from '@/components/header/head'
24+
import { mapState } from 'vuex'
25+
import alertTip from '@/components/common/alertTip'
26+
27+
export default {
28+
data () {
29+
return {
30+
cartNumber: null,
31+
passWord: null,
32+
showAlert: false,
33+
alertText: null
34+
}
35+
},
36+
mounted () {},
37+
computed: {
38+
...mapState(['userInfo']),
39+
couldPay: function () {
40+
return /^\d{10}$/.test(this.cartNumber) && /^\d{6}$/.test(this.passWord)
41+
}
42+
},
43+
components: {
44+
headTop,
45+
alertTip
46+
},
47+
methods: {
48+
async confrimPay () {
49+
if (this.couldPay) {
50+
let data = {
51+
id: this.userInfo.id,
52+
number: this.cartNumber,
53+
password: this.passWord
54+
}
55+
this.$axios.post('/member/v1/users/' + this.userInfo.id + '/delivery_card/physical_card/bind', data).then((res) => {
56+
if (res.message) {
57+
this.showAlert = true
58+
this.alertText = res.message
59+
} else if (res.name) {
60+
this.showAlert = true
61+
this.alertText = res.name
62+
}
63+
})
64+
}
65+
}
66+
}
67+
}
68+
</script>
69+
<style lang='scss'>
70+
@import "../../../style/useCart.scss";
71+
</style>

‎src/page/vipcard/children/vipDescription.vue

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<template>
2+
<div class="page_container">
3+
<head-top head-title="我的优惠" go-back='true'></head-top>
4+
<div class="markdown">
5+
<blockquote>
6+
<p>尊敬的用户，随着会员体系逐渐完善，自2016年10月10日起，饿了么会员权益将做如下优化：
7+
购卡后31天内，累积享有30单减免配送费服务（每日最多3单，每单最高减免4元）。
8+
注：已购买的会员服务不受影响，当前会员服务失效前无法购买新卡。</p>
9+
</blockquote>
10+
<h3 id="q1-">Q1: 特权介绍</h3>
11+
<ul>
12+
<li>身份标识：饿了么会员服务有效期内，享有专属皇冠标识。</li>
13+
<li>减免配送费： 饿了么会员卡自绑定账户之日起31天内，在「蜂鸟专送」标识商家下单，享有30次减免配送费特权，每日最多减免3单，每单最高可减4元。</li>
14+
<li>更多特权，敬请期待！</li>
15+
</ul>
16+
<h3 id="q2-">Q2: 资费介绍</h3>
17+
<ul>
18+
<li>饿了么会员卡：20元</li>
19+
</ul>
20+
<h3 id="q3-">Q3: 使用说明</h3>
21+
<p>当用户满足以下任一条件，会员服务自动失效：</p>
22+
<ol>
23+
<li>自绑定之日起超过31天；</li>
24+
<li>在31天内累计使用减免配送费的蜂鸟订单数量达到30单；</li>
25+
</ol>
26+
<h3 id="q4-">Q4: 购卡说明</h3>
27+
<ul>
28+
<li>在线购买：饿了么App&gt;我的&gt;饿了么会员卡</li>
29+
</ul>
30+
<h3 id="q5-">Q5: 温馨提示</h3>
31+
<ul>
32+
<li>用户在当前会员服务失效前，无法购买新卡。</li>
33+
<li>请认准饿了么官方渠道，任何从其他第三方途径获得的会员卡，饿了么不保证其可用性。</li>
34+
</ul>
35+
</div>
36+
</div>
37+
</template>
38+
39+
<script>
40+
import headTop from '@/components/header/head'
41+
import { mapState, mapMutations } from 'vuex'
42+
43+
export default {
44+
computed: {
45+
...mapState(['userInfo'])
46+
},
47+
components: {
48+
headTop
49+
},
50+
methods: {
51+
...mapMutations(['SAVE_AVANDER'])
52+
}
53+
}
54+
</script>
55+
<style lang="scss">
56+
@import "../../../style/vipDes.scss";
57+
</style>

‎src/page/vipcard/vipCard.vue

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<template>
2+
<div class="rating_page">
3+
<head-top head-title="会员中心" go-back='true'></head-top>
4+
<section v-if="userInfo">
5+
<p class="buy_for">为账户 <span>{{userInfo.username}}</span> 购买会员</p>
6+
<section class="vip_prerogative">
7+
<router-link to="/vipcard/vipDescription" class="header_style">
8+
<span class="header_left">会员特权</span>
9+
<section class="header_right">
10+
<span>会员说明</span>
11+
<svg fill="#ccc">
12+
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
13+
</svg>
14+
</section>
15+
</router-link>
16+
<section class="vip_detail">
17+
<div class="vip_detail_left">
18+
<img src="../../images/sheng.jpeg" height="80" width="70">
19+
</div>
20+
<div class="vip_detail_right">
21+
<h4>减免配送费</h4>
22+
<p>每月减免30单，每日可减免3单，每单最高减4元</p>
23+
<p>蜂鸟专送专享</p>
24+
</div>
25+
</section>
26+
<section class="vip_detail">
27+
<div class="vip_detail_left">
28+
<img src="../../images/jifen.jpeg" height="80" width="70">
29+
</div>
30+
<div class="vip_detail_right">
31+
<h4>减免配送费</h4>
32+
<p>每月减免30单，每日可减免3单，每单最高减4元</p>
33+
<p>蜂鸟专送专享</p>
34+
</div>
35+
</section>
36+
</section>
37+
<section class="apply_vip">
38+
<header class="header_style">
39+
<span class="header_left">开通会员</span>
40+
</header>
41+
<section class="apply_vip_buy">
42+
<div class="apply_vip_buy_left">
43+
<span>1个月</span>
44+
<span> ¥20</span>
45+
</div>
46+
<div class="apply_vip_buy_right" @click="buyCart">购买</div>
47+
</section>
48+
</section>
49+
<router-link to="/vipcard/useCart" class="header_style common_style">
50+
<span class="header_left">兑换会员</span>
51+
<section class="header_right">
52+
<span>使用卡号卡密</span>
53+
<svg fill="#ccc">
54+
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
55+
</svg>
56+
</section>
57+
</router-link>
58+
<router-link to="/vipcard/invoiceRecord" class="header_style common_style">
59+
<span class="header_left">购买记录</span>
60+
<section class="header_right">
61+
<span>开发票</span>
62+
<svg fill="#ccc">
63+
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
64+
</svg>
65+
</section>
66+
</router-link>
67+
</section>
68+
<transition name="router-slid" mode="out-in">
69+
<router-view></router-view>
70+
</transition>
71+
</div>
72+
</template>
73+
74+
<script>
75+
import headTop from '@/components/header/head'
76+
import { mapState, mapMutations } from 'vuex'
77+
export default {
78+
computed: {
79+
...mapState(['userInfo'])
80+
},
81+
components: {
82+
headTop
83+
},
84+
methods: {
85+
...mapMutations(['ORDER_SUCCESS', 'BUY_CART']),
86+
buyCart () {
87+
this.ORDER_SUCCESS({ order_id: '399525134200981325' })
88+
this.BUY_CART(20)
89+
this.$router.push('/confirmOrder/payment')
90+
}
91+
}
92+
}
93+
</script>
94+
<style lang="scss">
95+
@import '../../style/vipCard.scss';
96+
</style>

‎src/store/mutations-types.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,5 @@ export const SAVE_GEOHASH = 'SAVE_GEOHASH'
44
export const RECORD_ADDRESS = 'RECORD_ADDRESS'
55
export const OUT_LOGIN = 'OUT_LOGIN'
66
export const SAVE_AVANDER = 'SAVE_AVANDER'
7+
export const ORDER_SUCCESS = 'ORDER_SUCCESS'
8+
export const BUY_CART = 'BUY_CART'

‎src/store/mutations.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,4 +43,13 @@ export default {
4343
[types.SAVE_AVANDER] (state, imgPath) {
4444
state.imgPath = imgPath
4545
},
46+
// 会员卡价格纪录
47+
[types.BUY_CART] (state, price) {
48+
state.cartPrice = price;
49+
},
50+
//下单成功，保存订单返回信息
51+
[types.ORDER_SUCCESS] (state, order) {
52+
state.cartPrice = null;
53+
state.orderMessage = order;
54+
},
4655
}

‎src/style/invoiceRecord.scss

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
@import './mixin';
2+
.page_container {
3+
position: fixed;
4+
top: 0;
5+
left: 0;
6+
right: 0;
7+
bottom: 0;
8+
z-index: 202;
9+
padding-top: 1.95rem;
10+
background-color: #fff;
11+
p,
12+
span {
13+
font-family: Helvetica Neue, Tahoma, Arial;
14+
}
15+
}
16+
17+
.invoice_contianer {
18+
display: flex;
19+
flex-direction: column;
20+
align-items: center;
21+
img {
22+
margin-top: 5rem;
23+
@include wh(8rem, 5rem);
24+
}
25+
p {
26+
margin-top: .8rem;
27+
@include sc(.6rem, #999);
28+
}
29+
}

‎src/style/useCart.scss

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
@import './mixin';
2+
.page_container {
3+
position: fixed;
4+
top: 0;
5+
left: 0;
6+
right: 0;
7+
bottom: 0;
8+
z-index: 202;
9+
padding-top: 1.95rem;
10+
background-color: #f5f5f5;
11+
p,
12+
span,
13+
input {
14+
font-family: Helvetica Neue, Tahoma, Arial;
15+
}
16+
}
17+
18+
.buy_for {
19+
line-height: 2rem;
20+
padding-left: 0.7rem;
21+
@include sc(.6rem, #666);
22+
span {
23+
font-weight: bold;
24+
}
25+
}
26+
27+
.form_style {
28+
display: flex;
29+
flex-direction: column;
30+
input {
31+
border-bottom: 1px solid #f5f5f5;
32+
padding-left: .7rem;
33+
height: 2rem;
34+
@include sc(.65rem, #999);
35+
}
36+
}
37+
38+
.determine {
39+
text-align: center;
40+
margin: 0 .7rem;
41+
margin-top: 0.7rem;
42+
line-height: 1.8rem;
43+
border-radius: 0.2rem;
44+
background-color: #ccc;
45+
@include sc(.7rem, #fff);
46+
font-weight: bold;
47+
}
48+
49+
.could_pay {
50+
background-color: #4cd964;
51+
}
52+
53+
.Binding {
54+
margin-top: 1rem;
55+
h3 {
56+
margin-bottom: .6rem;
57+
text-align: center;
58+
@include sc(.65rem, #aaa);
59+
font-weight: normal;
60+
}
61+
p,
62+
b {
63+
@include sc(.5rem, #aaa);
64+
line-height: .8rem;
65+
}
66+
p {
67+
padding-left: 2rem;
68+
}
69+
}

0 commit comments

Comments
 (0)