w-front-end / select_good · Commits

Commit 1cf390cf450484456a8cc28123c9cd54d1efea37

Authored by zhiyangdu
1 parent e842bc81

收礼列表数据绑定

Inline Side-by-side
Showing 2 changed files with 107 additions and 25 deletions
src/components/giftItem/giftItem.less
  View file @1cf390c
1 .giftItem_box { 1 .giftItem_box {
2 width: 640px; 2 width: 640px;
3 - height: 453px; 3 + // height: 453px;
4 background: rgba(255, 255, 255, 1); 4 background: rgba(255, 255, 255, 1);
5 box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08); 5 box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
6 border-radius: 16px; 6 border-radius: 16px;
@@ -23,6 +23,10 @@ @@ -23,6 +23,10 @@
23 color: rgba(51, 51, 51, 1); 23 color: rgba(51, 51, 51, 1);
24 line-height: 50px; 24 line-height: 50px;
25 margin-left: 20px; 25 margin-left: 20px;
  26 + width: 400px;
  27 + overflow: hidden;
  28 + text-overflow: ellipsis;
  29 + white-space: nowrap;
26 } 30 }
27 .btn { 31 .btn {
28 width: 144px; 32 width: 144px;
@@ -147,13 +151,13 @@ @@ -147,13 +151,13 @@
147 } 151 }
148 } 152 }
149 .active_line { 153 .active_line {
150 - .item {  
151 - .line_box {  
152 - .line {  
153 - background: rgba(208, 2, 27, 1);  
154 - }  
155 - } 154 + .item {
  155 + .line_box {
  156 + .line {
  157 + background: rgba(208, 2, 27, 1);
156 } 158 }
  159 + }
  160 + }
157 } 161 }
158 } 162 }
159 .desc_box { 163 .desc_box {
@@ -178,4 +182,14 @@ @@ -178,4 +182,14 @@
178 } 182 }
179 } 183 }
180 } 184 }
  185 + .text_tip {
  186 + margin-top: 58px;
  187 + display: flex;
  188 + justify-content: flex-end;
  189 + height: 40px;
  190 + font-size: 28px;
  191 + font-weight: 500;
  192 + color: rgba(51, 51, 51, 1);
  193 + line-height: 40px;
  194 + }
181 } 195 }
src/components/giftItem/giftItem.vue
  View file @1cf390c
1 <template> 1 <template>
2 <div> 2 <div>
3 - <div class="giftItem_box" v-for="(item, index) in orderGiftList" :key="index"> 3 + <div
  4 + class="giftItem_box"
  5 + v-for="(item, index) in orderGiftList"
  6 + :key="index"
  7 + >
4 <!--用户信息--> 8 <!--用户信息-->
5 <div class="user_info"> 9 <div class="user_info">
6 <img v-lazy="item.user.img" /> 10 <img v-lazy="item.user.img" />
7 - <div class="name">{{ item.user.username}}(赠礼)</div> 11 + <div class="name">{{ item.user.username }}(赠礼)</div>
8 <div class="btn">回赠礼物</div> 12 <div class="btn">回赠礼物</div>
9 <div class="gift_active"></div> 13 <div class="gift_active"></div>
10 </div> 14 </div>
11 <!--商品信息--> 15 <!--商品信息-->
12 <div class="item_info"> 16 <div class="item_info">
13 - <img src="static/img/1.png" /> 17 + <img v-lazy="item.goods.simg" />
14 <div class="box"> 18 <div class="box">
15 - <div class="name">  
16 - {{item.goods.title}}  
17 - </div> 19 + <div class="name">{{ item.goods.title }}</div>
18 <div class="pirce"> 20 <div class="pirce">
19 - <div class="title"><span>￥</span>{{item.goods.price}}</div>  
20 - <div class="btn">点击收礼</div> 21 + <div class="title">
  22 + <span>￥</span>{{ item.goods.price }}
  23 + </div>
  24 + <div v-if="item.get_gift_state!=7" class="btn">
  25 + <span v-if="item.get_gift_state < 3">点击收礼</span> <span v-else-if="item.get_gift_state == 3">填写地址</span>
  26 + <span v-else-if="item.get_gift_state == 4">商家发货</span> <span v-else-if="item.get_gift_state == 5">确认收货</span>
  27 + </div>
21 </div> 28 </div>
22 </div> 29 </div>
23 </div> 30 </div>
24 <!--步骤条--> 31 <!--步骤条-->
25 - <div class="steps_box"> 32 + <div class="steps_box" v-if="item.get_gift_state < 6">
26 <div class="line_box"> 33 <div class="line_box">
27 - <div :class="['box',item.get_gift_state>2?(item.get_gift_state>3?'active active_line':'active'):'']"> 34 + <div
  35 + :class="[
  36 + 'box',
  37 + item.get_gift_state > 2
  38 + ? item.get_gift_state > 3
  39 + ? 'active active_line'
  40 + : 'active'
  41 + : ''
  42 + ]"
  43 + >
28 <div class="item"> 44 <div class="item">
29 <div class="img"></div> 45 <div class="img"></div>
30 <div class="line_box"><div class="line"></div></div> 46 <div class="line_box"><div class="line"></div></div>
31 </div> 47 </div>
32 </div> 48 </div>
33 - <div :class="['box',item.get_gift_state>3?(item.get_gift_state>4?'active active_line':'active'):'']"> 49 + <div
  50 + :class="[
  51 + 'box',
  52 + item.get_gift_state > 3
  53 + ? item.get_gift_state > 4
  54 + ? 'active active_line'
  55 + : 'active'
  56 + : ''
  57 + ]"
  58 + >
34 <div class="item"> 59 <div class="item">
35 <div class="img"></div> 60 <div class="img"></div>
36 <div class="line_box"><div class="line"></div></div> 61 <div class="line_box"><div class="line"></div></div>
37 </div> 62 </div>
38 </div> 63 </div>
39 - <div :class="['box',item.get_gift_state>4?(item.get_gift_state>5?'active active_line':'active'):'']"> 64 + <div
  65 + :class="[
  66 + 'box',
  67 + item.get_gift_state > 4
  68 + ? item.get_gift_state > 5
  69 + ? 'active active_line'
  70 + : 'active'
  71 + : ''
  72 + ]"
  73 + >
40 <div class="item"> 74 <div class="item">
41 <div class="img"></div> 75 <div class="img"></div>
42 <div class="line_box"><div class="line"></div></div> 76 <div class="line_box"><div class="line"></div></div>
43 </div> 77 </div>
44 </div> 78 </div>
45 - <div :class="['box',item.get_gift_state>5?(item.get_gift_state>6?'active active_line':'active'):'']"> 79 + <div
  80 + :class="[
  81 + 'box',
  82 + item.get_gift_state > 5
  83 + ? item.get_gift_state > 6
  84 + ? 'active active_line'
  85 + : 'active'
  86 + : ''
  87 + ]"
  88 + >
46 <div class="item"> 89 <div class="item">
47 <div class="img"></div> 90 <div class="img"></div>
48 <div class="line_box"><div class="line"></div></div> 91 <div class="line_box"><div class="line"></div></div>
@@ -50,12 +93,36 @@ @@ -50,12 +93,36 @@
50 </div> 93 </div>
51 </div> 94 </div>
52 <div class="desc_box"> 95 <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> 96 + <div
  97 + class="desc"
  98 + :class="{ active: item.get_gift_state > 2 }"
  99 + >
  100 + 点击收礼
  101 + </div>
  102 + <div
  103 + class="desc"
  104 + :class="{ active: item.get_gift_state > 3 }"
  105 + >
  106 + 填写地址
  107 + </div>
  108 + <div
  109 + class="desc"
  110 + :class="{ active: item.get_gift_state > 4 }"
  111 + >
  112 + 商家发货
  113 + </div>
  114 + <div
  115 + class="desc"
  116 + :class="{ active: item.get_gift_state > 5 }"
  117 + >
  118 + 确认收货
  119 + </div>
57 </div> 120 </div>
58 </div> 121 </div>
  122 + <!-- 显示文字 -->
  123 + <div class="text_tip" v-else>
  124 + 完成
  125 + </div>
59 </div> 126 </div>
60 </div> 127 </div>
61 </template> 128 </template>
@@ -68,7 +135,8 @@ export default { @@ -68,7 +135,8 @@ export default {
68 }, 135 },
69 props: ["orderGiftList"], 136 props: ["orderGiftList"],
70 created() {}, 137 created() {},
71 - methods: {} 138 + methods: {
  139 + }
72 }; 140 };
73 </script> 141 </script>
74 142