1
|
import Taro, {Component} from '@tarojs/taro';
|
1
|
import Taro, {Component} from '@tarojs/taro';
|
2
|
-import {View, Text, Navigator,Image} from '@tarojs/components';
|
2
|
+import {View, Text, Navigator, Image} from '@tarojs/components';
|
3
|
import './index.scss'
|
3
|
import './index.scss'
|
4
|
import down from '../../assets/images/down@2x.png';
|
4
|
import down from '../../assets/images/down@2x.png';
|
|
|
5
|
+import couponModel from '../../models/coupon';
|
5
|
|
6
|
|
|
|
7
|
+const model = new couponModel();
|
6
|
export default class MyCoupon extends Component {
|
8
|
export default class MyCoupon extends Component {
|
7
|
constructor() {
|
9
|
constructor() {
|
8
|
super(...arguments);
|
10
|
super(...arguments);
|
9
|
- this.state = {};
|
11
|
+ this.state = {
|
|
|
12
|
+ couponList: []
|
|
|
13
|
+ };
|
10
|
}
|
14
|
}
|
11
|
|
15
|
|
12
|
- config = {
|
16
|
+ config = {};
|
|
|
17
|
+
|
|
|
18
|
+ componentWillMount() {
|
|
|
19
|
+ this.getCouponList();
|
|
|
20
|
+ }
|
|
|
21
|
+
|
|
|
22
|
+ async getCouponList() {
|
|
|
23
|
+ let couponList = await model.myCouponList();
|
|
|
24
|
+ this.setState({couponList});
|
13
|
};
|
25
|
};
|
14
|
|
26
|
|
|
|
27
|
+ showNote = (value) => {
|
|
|
28
|
+ let {couponList} = this.state;
|
|
|
29
|
+ couponList[value].showNotes = !couponList[value].showNotes;
|
|
|
30
|
+ this.setState({
|
|
|
31
|
+ couponList
|
|
|
32
|
+ });
|
|
|
33
|
+ this.forceUpdate();
|
|
|
34
|
+ };
|
15
|
|
35
|
|
16
|
render() {
|
36
|
render() {
|
|
|
37
|
+ let {couponList} = this.state;
|
17
|
return (
|
38
|
return (
|
18
|
<View className='page'>
|
39
|
<View className='page'>
|
19
|
<View className='title'>优惠券</View>
|
40
|
<View className='title'>优惠券</View>
|
20
|
<View className='content'>
|
41
|
<View className='content'>
|
21
|
- <View className='item'>
|
|
|
22
|
- <View className='ticket'>
|
|
|
23
|
- <View className='left'>
|
|
|
24
|
- <View className='price'>40</View>
|
|
|
25
|
- <View className='type'>满499可用</View>
|
42
|
+ {couponList.map((value, index) => {
|
|
|
43
|
+ return <View className='item'>
|
|
|
44
|
+ <View className='ticket'>
|
|
|
45
|
+ <View className='left'>
|
|
|
46
|
+ <View className='price'>{value.coupon_value}</View>
|
|
|
47
|
+ </View>
|
|
|
48
|
+ <View className='right'>
|
|
|
49
|
+ <View className='name'>{value.coupon_name}</View>
|
|
|
50
|
+ <View className='date'>{value.coupon_validity}</View>
|
|
|
51
|
+ <View className='desc' onClick={this.showNote.bind(this, index)}>使用说明
|
|
|
52
|
+ <Image mode='aspectFit' src={down} className={value.showNotes ? 'up' : 'down'}></Image>
|
|
|
53
|
+ </View>
|
|
|
54
|
+ </View>
|
26
|
</View>
|
55
|
</View>
|
27
|
- <View className='right'>
|
|
|
28
|
- <View className='name'>adidas店铺使用</View>
|
|
|
29
|
- <View className='date'>2018.2.15-2019.3.15</View>
|
|
|
30
|
- <View className='desc'>使用说明 <Image mode='aspectFit' src={down} className='up'></Image></View>
|
56
|
+ <View className='desc-info' style={{display: value.showNotes ? 'block' : 'none'}}>
|
|
|
57
|
+ {value.notes.map((note) => {
|
|
|
58
|
+ return <View className='p'>· {note}</View>
|
|
|
59
|
+ })}
|
31
|
</View>
|
60
|
</View>
|
32
|
</View>
|
61
|
</View>
|
33
|
- <View className='desc-info'>
|
|
|
34
|
- <View className='p'>· 全场通用券</View>
|
|
|
35
|
- </View>
|
|
|
36
|
- </View>
|
|
|
37
|
- <View className='item'>
|
|
|
38
|
- <View className='ticket'>
|
|
|
39
|
- <View className='left'>
|
|
|
40
|
- <View className='price'>40</View>
|
|
|
41
|
- <View className='type'>满499可用</View>
|
|
|
42
|
- </View>
|
|
|
43
|
- <View className='right'>
|
|
|
44
|
- <View className='name'>adidas店铺使用</View>
|
|
|
45
|
- <View className='date'>2018.2.15-2019.3.15</View>
|
|
|
46
|
- <View className='desc'>使用说明</View>
|
|
|
47
|
- </View>
|
|
|
48
|
- </View>
|
|
|
49
|
- <View className='desc-info'>
|
|
|
50
|
- <View className='p'>· 全场通用券</View>
|
|
|
51
|
- <View className='p'>· 全场通用券</View>
|
|
|
52
|
- </View>
|
|
|
53
|
- </View>
|
62
|
+ })}
|
54
|
</View>
|
63
|
</View>
|
55
|
</View>
|
64
|
</View>
|
56
|
)
|
65
|
)
|