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 1 .giftItem_box {
2 2 width: 640px;
3   - height: 453px;
  3 + // height: 453px;
4 4 background: rgba(255, 255, 255, 1);
5 5 box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
6 6 border-radius: 16px;
... ... @@ -23,6 +23,10 @@
23 23 color: rgba(51, 51, 51, 1);
24 24 line-height: 50px;
25 25 margin-left: 20px;
  26 + width: 400px;
  27 + overflow: hidden;
  28 + text-overflow: ellipsis;
  29 + white-space: nowrap;
26 30 }
27 31 .btn {
28 32 width: 144px;
... ... @@ -147,13 +151,13 @@
147 151 }
148 152 }
149 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 163 .desc_box {
... ... @@ -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 1 <template>
2 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 9 <div class="user_info">
6 10 <img v-lazy="item.user.img" />
7   - <div class="name">{{ item.user.username}}(赠礼)</div>
  11 + <div class="name">{{ item.user.username }}(赠礼)</div>
8 12 <div class="btn">回赠礼物</div>
9 13 <div class="gift_active"></div>
10 14 </div>
11 15 <!--商品信息-->
12 16 <div class="item_info">
13   - <img src="static/img/1.png" />
  17 + <img v-lazy="item.goods.simg" />
14 18 <div class="box">
15   - <div class="name">
16   - {{item.goods.title}}
17   - </div>
  19 + <div class="name">{{ item.goods.title }}</div>
18 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 28 </div>
22 29 </div>
23 30 </div>
24 31 <!--步骤条-->
25   - <div class="steps_box">
  32 + <div class="steps_box" v-if="item.get_gift_state < 6">
26 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 44 <div class="item">
29 45 <div class="img"></div>
30 46 <div class="line_box"><div class="line"></div></div>
31 47 </div>
32 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 59 <div class="item">
35 60 <div class="img"></div>
36 61 <div class="line_box"><div class="line"></div></div>
37 62 </div>
38 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 74 <div class="item">
41 75 <div class="img"></div>
42 76 <div class="line_box"><div class="line"></div></div>
43 77 </div>
44 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 89 <div class="item">
47 90 <div class="img"></div>
48 91 <div class="line_box"><div class="line"></div></div>
... ... @@ -50,12 +93,36 @@
50 93 </div>
51 94 </div>
52 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 120 </div>
58 121 </div>
  122 + <!-- 显示文字 -->
  123 + <div class="text_tip" v-else>
  124 + 完成
  125 + </div>
59 126 </div>
60 127 </div>
61 128 </template>
... ... @@ -68,7 +135,8 @@ export default {
68 135 },
69 136 props: ["orderGiftList"],
70 137 created() {},
71   - methods: {}
  138 + methods: {
  139 + }
72 140 };
73 141 </script>
74 142  
... ...