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,6 +58,7 @@
58 .box { 58 .box {
59 margin-left: 30px; 59 margin-left: 30px;
60 position: relative; 60 position: relative;
  61 + flex: 1;
61 .name { 62 .name {
62 font-size: 28px; 63 font-size: 28px;
63 font-weight: 400; 64 font-weight: 400;
src/components/giftItem/giftItem.vue
  View file @6755fb9
1 <template> 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 </template> 61 </template>
94 62
95 <script> 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 </script> 73 </script>
110 74
111 <!-- Add "scoped" attribute to limit CSS to this component only --> 75 <!-- Add "scoped" attribute to limit CSS to this component only -->
112 <style rel="stylesheet/less" lang="less" scoped> 76 <style rel="stylesheet/less" lang="less" scoped>
113 - @import "giftItem"; 77 +@import "giftItem";
114 </style> 78 </style>
src/pages/myGiftBox/myGiftBox.less
  View file @6755fb9
1 .my_gift_box { 1 .my_gift_box {
2 width: 100%; 2 width: 100%;
3 - height: calc(100vh-25px); 3 + // height: calc(100vh-25px);
4 background-color: #fff; 4 background-color: #fff;
5 padding-top: 25px; 5 padding-top: 25px;
6 .top_box { 6 .top_box {
src/pages/myGiftBox/myGiftBox.vue
  View file @6755fb9
@@ -12,7 +12,12 @@ @@ -12,7 +12,12 @@
12 <div class="desc">规则说明</div> 12 <div class="desc">规则说明</div>
13 </div> 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 </div> 21 </div>
17 </template> 22 </template>
18 23