w-front-end / select_good · Commits

Commit 6755fb9ff21ff7f4b5de21f6398b182ee85f7434

Authored by zhiyangdu
1 parent d8b3278b

数据绑定

Inline Side-by-side
Showing 4 changed files with 76 additions and 106 deletions
src/components/giftItem/giftItem.less
  View file @6755fb9
... ... @@ -58,6 +58,7 @@
58 58 .box {
59 59 margin-left: 30px;
60 60 position: relative;
  61 + flex: 1;
61 62 .name {
62 63 font-size: 28px;
63 64 font-weight: 400;
... ...
src/components/giftItem/giftItem.vue
  View file @6755fb9
1 1 <template>
2   - <div class="giftItem_box">
3   - <!--用户信息-->
4   - <div class="user_info">
5   - <img src="static/img/1.png"/>
6   - <div class="name">
7   - 欧阳娜娜(赠礼)
8   - </div>
9   - <div class="btn">
10   - 回赠礼物
11   - </div>
12   - <div class="gift_active">
13   -
14   - </div>
15   - </div>
16   - <!--商品信息-->
17   - <div class="item_info">
18   - <img src="static/img/1.png"/>
19   - <div class="box">
20   - <div class="name">
21   - 品牌官方直营 - 施华洛世奇时尚黑天鹅锁
22   - </div>
23   - <div class="pirce">
24   - <div class="title"><span>￥</span>148.00</div>
25   - <div class="btn">点击收礼</div>
26   - </div>
27   - </div>
28   - </div>
29   - <!--步骤条-->
30   - <div class="steps_box">
31   - <div class="line_box">
32   - <div class="box active active_line">
33   - <div class="item">
34   - <div class="img">
35   - </div>
36   - <div class="line_box">
37   - <div class="line">
38   -
39   - </div>
40   - </div>
41   - </div>
42   - </div>
43   - <div class="box">
44   - <div class="item">
45   - <div class="img">
46   - </div>
47   - <div class="line_box">
48   - <div class="line">
49   -
50   - </div>
51   - </div>
52   - </div>
53   - </div>
54   - <div class="box">
55   - <div class="item">
56   - <div class="img">
57   - </div>
58   - <div class="line_box">
59   - <div class="line">
60   -
61   - </div>
62   - </div>
63   - </div>
64   - </div>
65   - <div class="box">
66   - <div class="item">
67   - <div class="img">
68   - </div>
69   - <div class="line_box">
70   - <div class="line">
71   -
72   - </div>
73   - </div>
74   - </div>
75   - </div>
76   - </div>
77   - <div class="desc_box">
78   - <div class="desc active">
79   - 点击送礼
80   - </div>
81   - <div class="desc">
82   - 填写地址
83   - </div>
84   - <div class="desc">
85   - 商家发货
86   - </div>
87   - <div class="desc">
88   - 确认收货
89   - </div>
90   - </div>
91   - </div>
92   - </div>
  2 + <div>
  3 + <div class="giftItem_box" v-for="(item, index) in orderGiftList" :key="index">
  4 + <!--用户信息-->
  5 + <div class="user_info">
  6 + <img v-lazy="item.user.img" />
  7 + <div class="name">{{ item.user.username}}(赠礼)</div>
  8 + <div class="btn">回赠礼物</div>
  9 + <div class="gift_active"></div>
  10 + </div>
  11 + <!--商品信息-->
  12 + <div class="item_info">
  13 + <img src="static/img/1.png" />
  14 + <div class="box">
  15 + <div class="name">
  16 + {{item.goods.title}}
  17 + </div>
  18 + <div class="pirce">
  19 + <div class="title"><span>￥</span>{{item.goods.price}}</div>
  20 + <div class="btn">点击收礼</div>
  21 + </div>
  22 + </div>
  23 + </div>
  24 + <!--步骤条-->
  25 + <div class="steps_box">
  26 + <div class="line_box">
  27 + <div :class="['box',item.get_gift_state>2?(item.get_gift_state>3?'active active_line':'active'):'']">
  28 + <div class="item">
  29 + <div class="img"></div>
  30 + <div class="line_box"><div class="line"></div></div>
  31 + </div>
  32 + </div>
  33 + <div :class="['box',item.get_gift_state>3?(item.get_gift_state>4?'active active_line':'active'):'']">
  34 + <div class="item">
  35 + <div class="img"></div>
  36 + <div class="line_box"><div class="line"></div></div>
  37 + </div>
  38 + </div>
  39 + <div :class="['box',item.get_gift_state>4?(item.get_gift_state>5?'active active_line':'active'):'']">
  40 + <div class="item">
  41 + <div class="img"></div>
  42 + <div class="line_box"><div class="line"></div></div>
  43 + </div>
  44 + </div>
  45 + <div :class="['box',item.get_gift_state>5?(item.get_gift_state>6?'active active_line':'active'):'']">
  46 + <div class="item">
  47 + <div class="img"></div>
  48 + <div class="line_box"><div class="line"></div></div>
  49 + </div>
  50 + </div>
  51 + </div>
  52 + <div class="desc_box">
  53 + <div class="desc" :class="{'active':item.get_gift_state>2}">点击收礼</div>
  54 + <div class="desc" :class="{'active':item.get_gift_state>3}">填写地址</div>
  55 + <div class="desc" :class="{'active':item.get_gift_state>4}">商家发货</div>
  56 + <div class="desc" :class="{'active':item.get_gift_state>5}">确认收货</div>
  57 + </div>
  58 + </div>
  59 + </div>
  60 + </div>
93 61 </template>
94 62  
95 63 <script>
96   - export default {
97   - name: 'name',
98   - data () {
99   - return {
100   -
101   - }
102   - },
103   - created(){
104   -
  64 +export default {
  65 + name: "name",
  66 + data() {
  67 + return {};
105 68 },
106   - methods: {
107   - }
108   - }
  69 + props: ["orderGiftList"],
  70 + created() {},
  71 + methods: {}
  72 +};
109 73 </script>
110 74  
111 75 <!-- Add "scoped" attribute to limit CSS to this component only -->
112 76 <style rel="stylesheet/less" lang="less" scoped>
113   - @import "giftItem";
  77 +@import "giftItem";
114 78 </style>
... ...
src/pages/myGiftBox/myGiftBox.less
  View file @6755fb9
1 1 .my_gift_box {
2 2 width: 100%;
3   - height: calc(100vh-25px);
  3 + // height: calc(100vh-25px);
4 4 background-color: #fff;
5 5 padding-top: 25px;
6 6 .top_box {
... ...
src/pages/myGiftBox/myGiftBox.vue
  View file @6755fb9
... ... @@ -12,7 +12,12 @@
12 12 <div class="desc">规则说明</div>
13 13 </div>
14 14 <!--内容-->
15   - <giftItem></giftItem>
  15 + <div infinite-scroll-immediate-check="true"
  16 + v-infinite-scroll="getorderGiftList"
  17 + infinite-scroll-disabled="loading"
  18 + :infinite-scroll-distance="50">
  19 + <giftItem :orderGiftList="orderGiftList"></giftItem>
  20 + </div>
16 21 </div>
17 22 </template>
18 23  
... ...