w-front-end / select_good · Commits

Commit 598e13344f26616bfbb2961e9d46e708ac3c1dc4

Authored by zhiyangdu
1 parent f1c9f325

五礼物列表页判断

Inline Side-by-side
Showing 5 changed files with 338 additions and 212 deletions
src/components/giftGivingItem/giftGivingItem.less
  View file @598e133
... ... @@ -143,3 +143,45 @@
143 143 }
144 144 }
145 145 }
  146 +.noGift {
  147 + height: calc(100vh-364px);
  148 + display: flex;
  149 + justify-content: center;
  150 + align-items: center;
  151 + img {
  152 + display: block;
  153 + width: 260px;
  154 + height: 230px;
  155 + }
  156 + .tip {
  157 + width: 100%;
  158 + height: 42px;
  159 + font-size: 30px;
  160 + font-weight: 400;
  161 + color: rgba(51, 51, 51, 1);
  162 + line-height: 42px;
  163 + margin-top: 30px;
  164 + }
  165 + .desc {
  166 + width: 100%;
  167 + height: 33px;
  168 + font-size: 24px;
  169 + font-family: PingFang-SC-Regular, PingFang-SC;
  170 + font-weight: 400;
  171 + color: rgba(153, 153, 153, 1);
  172 + line-height: 33px;
  173 + margin-top: 10px;
  174 + text-align: center;
  175 + }
  176 + .btn {
  177 + width: 172px;
  178 + height: 56px;
  179 + border-radius: 8px;
  180 + border: 1px solid rgba(208, 2, 27, 1);
  181 + line-height: 56px;
  182 + color: #D0021B;
  183 + font-size: 26px;
  184 + text-align:center;
  185 + margin: 46px auto 0 auto;
  186 + }
  187 +}
... ...
src/components/giftGivingItem/giftGivingItem.vue
  View file @598e133
1 1 <template>
2   - <div v-if="giftGivingItem && giftGivingItem.length > 0">
3   - <div
4   - class="giftItem_box"
5   - v-for="(item, index) in giftGivingItem"
6   - :key="index"
7   - @click="onGiftGiving(item)"
8   - >
9   - <!--用户信息-->
10   - <div class="user_info">
11   - <div class="name" v-if="item&&item.create_time">{{item.create_time*1000 | datetime('yyyy-MM-dd hh:mm:ss')}}</div>
12   - <div class="gift_active">
13   - <span v-if="item&&item.status==0">待支付</span>
14   - <span v-else-if="item&&item.status==1">分享</span>
15   - <span v-else-if="item&&item.status==2">已领完</span>
16   - <span v-else-if="item&&item.status==3">已关闭</span>
17   - <span v-else-if="item&&item.status==4">部分退款中(可分享)</span>
18   - <span v-else-if="item&&item.status==5">部分退款中（不可分享</span>
19   - <span v-else-if="item&&item.status==6">退款中</span>
  2 + <div>
  3 + <div v-if="giftGivingItem && giftGivingItem.length > 0">
  4 + <div
  5 + class="giftItem_box"
  6 + v-for="(item, index) in giftGivingItem"
  7 + :key="index"
  8 + @click="onGiftGiving(item)"
  9 + >
  10 + <!--用户信息-->
  11 + <div class="user_info">
  12 + <div class="name" v-if="item && item.create_time">
  13 + {{
  14 + (item.create_time * 1000)
  15 + | datetime("yyyy-MM-dd hh:mm:ss")
  16 + }}
20 17 </div>
21   - </div>
22   - <!--商品信息-->
23   - <div class="item_info">
24   - <img v-if="item&&item.goods&&item.goods.simg" v-lazy="item.goods.simg" />
25   - <div class="box">
26   - <div v-if="item&&item.goods&&item.goods.create_time" class="name">{{ item.goods.title }}</div>
27   - <div class="pirce">
28   - <div v-if="item&&item.goods&&item.goods.price" class="title">
29   - <span>￥</span>{{ item.goods.price }}
  18 + <div class="gift_active">
  19 + <span v-if="item && item.status == 0">待支付</span>
  20 + <span v-else-if="item && item.status == 1">分享</span>
  21 + <span v-else-if="item && item.status == 2">已领完</span>
  22 + <span v-else-if="item && item.status == 3">已关闭</span>
  23 + <span v-else-if="item && item.status == 4"
  24 + >部分退款中(可分享)</span
  25 + >
  26 + <span v-else-if="item && item.status == 5"
  27 + >部分退款中（不可分享</span
  28 + >
  29 + <span v-else-if="item && item.status == 6">退款中</span>
  30 + </div>
  31 + </div>
  32 + <!--商品信息-->
  33 + <div class="item_info">
  34 + <img
  35 + v-if="item && item.goods && item.goods.simg"
  36 + v-lazy="item.goods.simg"
  37 + />
  38 + <div class="box">
  39 + <div
  40 + v-if="item && item.goods && item.goods.create_time"
  41 + class="name"
  42 + >
  43 + {{ item.goods.title }}
30 44 </div>
31   - <div v-if="item&&item.goods&&item.goods.num" class="btn">
32   - 总数：{{ parseInt(item.goods.num) }}
  45 + <div class="pirce">
  46 + <div
  47 + v-if="item && item.goods && item.goods.price"
  48 + class="title"
  49 + >
  50 + <span>￥</span>{{ item.goods.price }}
  51 + </div>
  52 + <div
  53 + v-if="item && item.goods && item.goods.num"
  54 + class="btn"
  55 + >
  56 + 总数：{{ parseInt(item.goods.num) }}
  57 + </div>
33 58 </div>
34 59 </div>
35 60 </div>
36   - </div>
37   - <!-- 显示文字 -->
38   - <div class="text_tip">
39   - <span v-show="item&&item.total_num">可分享<num>{{item.total_num}}</num>人,</span>
40   - <span v-show="item&&item.give_num">已领 <num>{{item.give_num}}</num> 人,</span>
41   - <span v-show="item&&item.no_address_num"><num>{{item.no_address_num}}</num> 人未填写地址,</span>
42   - <span v-show="item&&item.refund_num"><num>{{item.refund_num}}</num>人退款中</span>
43   - </div>
44   - <!-- 按钮 -->
45   - <div v-show="item.status==0" class="btn_list">
46   - <div class="box">
47   - <div v-on:click.stop="onCancelPayment(item)" class="btn">取消支付</div>
48   - <div v-on:click.stop="jumpToPay(item)" class="active">立即支付</div>
  61 + <!-- 显示文字 -->
  62 + <div class="text_tip">
  63 + <span v-show="item && item.total_num"
  64 + >可分享<num>{{ item.total_num }}</num
  65 + >人,</span
  66 + >
  67 + <span v-show="item && item.give_num"
  68 + >已领 <num>{{ item.give_num }}</num> 人,</span
  69 + >
  70 + <span v-show="item && item.no_address_num"
  71 + ><num>{{ item.no_address_num }}</num>
  72 + 人未填写地址,</span
  73 + >
  74 + <span v-show="item && item.refund_num"
  75 + ><num>{{ item.refund_num }}</num
  76 + >人退款中</span
  77 + >
49 78 </div>
  79 + <!-- 按钮 -->
  80 + <div v-show="item.status == 0" class="btn_list">
  81 + <div class="box">
  82 + <div
  83 + v-on:click.stop="onCancelPayment(item)"
  84 + class="btn"
  85 + >
  86 + 取消支付
  87 + </div>
  88 + <div v-on:click.stop="jumpToPay(item)" class="active">
  89 + 立即支付
  90 + </div>
  91 + </div>
  92 + </div>
  93 + </div>
  94 + </div>
  95 + <!-- 您还未送过礼物哦～-->
  96 + <div v-else class="noGift">
  97 + <div class="box">
  98 + <img src="/static/img/noGifts.png" />
  99 + <div class="tip">一份礼品 一份轻易</div>
  100 + <div class="desc">您还未送出礼物</div>
  101 + <div class="btn">去购买送礼</div>
50 102 </div>
51 103 </div>
52 104 </div>
... ... @@ -61,17 +113,17 @@ export default {
61 113 props: ["giftGivingItem"],
62 114 created() {},
63 115 methods: {
64   - // 跳转到礼物详情页
65   - onGiftGiving(item){
66   - this.$emit('onGiftGiving',item)
  116 + // 跳转到礼物详情页
  117 + onGiftGiving(item) {
  118 + this.$emit("onGiftGiving", item);
67 119 },
68 120 // 跳转到原声生支付
69   - jumpToPay(item){
70   - this.$emit('jumpToPay',item)
  121 + jumpToPay(item) {
  122 + this.$emit("jumpToPay", item);
71 123 },
72 124 // 取消订单
73   - onCancelPayment(item){
74   - this.$emit('onCancelPayment',item)
  125 + onCancelPayment(item) {
  126 + this.$emit("onCancelPayment", item);
75 127 }
76 128 }
77 129 };
... ...
src/components/receivingGiftsItem/receivingGiftsItem.less
  View file @598e133
1   -.giftItem_box {
2   - width: 640px;
3   - // height: 453px;
4   - background: rgba(255, 255, 255, 1);
5   - box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
6   - border-radius: 16px;
7   - margin: 43px auto 0 auto;
8   - padding: 25px;
9   - .user_info {
10   - display: flex;
11   - position: relative;
12   - padding-bottom: 22px;
13   - border-bottom: solid 1px rgba(247, 247, 248, 1);
14   - img {
15   - width: 50px;
16   - height: 50px;
17   - border-radius: 50px;
18   - }
19   - .name {
20   - height: 50px;
21   - font-size: 28px;
22   - font-weight: 400;
23   - color: rgba(51, 51, 51, 1);
24   - line-height: 50px;
25   - margin-left: 20px;
26   - width: 400px;
27   - overflow: hidden;
28   - text-overflow: ellipsis;
29   - white-space: nowrap;
30   - }
31   - .btn {
32   - width: 144px;
33   - height: 52px;
34   - line-height: 52px;
35   - background: rgba(254, 246, 233, 1);
36   - border-radius: 96px 0px 0px 96px;
37   - text-align: center;
38   - font-size: 26px;
39   - font-weight: 400;
40   - color: rgba(245, 166, 35, 1);
41   - position: absolute;
42   - right: -35px;
43   - }
44   - .gift_active {
45   - height: 40px;
46   - font-size: 28px;
47   - font-weight: 400;
48   - color: rgba(208, 2, 27, 1);
49   - line-height: 40px;
50   - }
51   - }
52   - .item_info {
53   - display: flex;
54   - margin-top: 30px;
55   - padding-bottom: 30px;
56   - border-bottom: solid 1px rgba(247, 247, 248, 1);
57   - img {
58   - width: 159px;
59   - height: 160px;
60   - border-radius: 10px;
61   - }
62   - .box {
63   - margin-left: 30px;
  1 +.receivingGiftsInfo {
  2 + .giftItem_box {
  3 + width: 640px;
  4 + // height: 453px;
  5 + background: rgba(255, 255, 255, 1);
  6 + box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
  7 + border-radius: 16px;
  8 + margin: 43px auto 0 auto;
  9 + padding: 25px;
  10 + .user_info {
  11 + display: flex;
64 12 position: relative;
65   - flex: 1;
  13 + padding-bottom: 22px;
  14 + border-bottom: solid 1px rgba(247, 247, 248, 1);
  15 + img {
  16 + width: 50px;
  17 + height: 50px;
  18 + border-radius: 50px;
  19 + }
66 20 .name {
  21 + height: 50px;
67 22 font-size: 28px;
68 23 font-weight: 400;
69 24 color: rgba(51, 51, 51, 1);
70   - max-height: 80px;
71   - /*! autoprefixer: off */
72   - -webkit-box-orient: vertical;
73   - /*! autoprefixer: on */
74   - display: -webkit-box;
75   - -webkit-line-clamp: 2;
  25 + line-height: 50px;
  26 + margin-left: 20px;
  27 + width: 400px;
76 28 overflow: hidden;
77   - white-space: normal;
  29 + text-overflow: ellipsis;
  30 + white-space: nowrap;
78 31 }
79   - .pirce {
80   - width: 100%;
  32 + .btn {
  33 + width: 144px;
  34 + height: 52px;
  35 + line-height: 52px;
  36 + background: rgba(254, 246, 233, 1);
  37 + border-radius: 96px 0px 0px 96px;
  38 + text-align: center;
  39 + font-size: 26px;
  40 + font-weight: 400;
  41 + color: rgba(245, 166, 35, 1);
81 42 position: absolute;
82   - left: 0;
83   - bottom: 0;
84   - display: flex;
85   - justify-content: space-between;
86   - .title {
87   - span {
88   - width: 15px;
89   - height: 33px;
90   - font-size: 24px;
91   - font-weight: 500;
92   - color: rgba(208, 2, 27, 1);
93   - line-height: 33px;
94   - }
95   - height: 50px;
96   - font-size: 36px;
97   - font-weight: 500;
98   - color: rgba(208, 2, 27, 1);
99   - line-height: 50px;
100   - }
101   - .btn {
102   - width: 146px;
103   - height: 52px;
104   - line-height: 52px;
105   - background: rgba(253, 241, 242, 1);
106   - border-radius: 8px;
107   - text-align: center;
108   - font-size: 26px;
109   - color: rgba(208, 2, 27, 1);
110   - }
  43 + right: -35px;
  44 + }
  45 + .gift_active {
  46 + height: 40px;
  47 + font-size: 28px;
  48 + font-weight: 400;
  49 + color: rgba(208, 2, 27, 1);
  50 + line-height: 40px;
111 51 }
112 52 }
113   - }
114   - .steps_box {
115   - margin-top: 58px;
116   - .line_box {
  53 + .item_info {
117 54 display: flex;
118   - margin: 0 38px;
  55 + margin-top: 30px;
  56 + padding-bottom: 30px;
  57 + border-bottom: solid 1px rgba(247, 247, 248, 1);
  58 + img {
  59 + width: 159px;
  60 + height: 160px;
  61 + border-radius: 10px;
  62 + }
119 63 .box {
120   - height: 16px;
121   - .item {
  64 + margin-left: 30px;
  65 + position: relative;
  66 + flex: 1;
  67 + .name {
  68 + font-size: 28px;
  69 + font-weight: 400;
  70 + color: rgba(51, 51, 51, 1);
  71 + max-height: 80px;
  72 + /*! autoprefixer: off */
  73 + -webkit-box-orient: vertical;
  74 + /*! autoprefixer: on */
  75 + display: -webkit-box;
  76 + -webkit-line-clamp: 2;
  77 + overflow: hidden;
  78 + white-space: normal;
  79 + }
  80 + .pirce {
  81 + width: 100%;
  82 + position: absolute;
  83 + left: 0;
  84 + bottom: 0;
122 85 display: flex;
123   - .img {
124   - width: 16px;
125   - height: 16px;
126   - background: url("/static/img/spot.png") no-repeat top;
127   - background-size: 100%;
  86 + justify-content: space-between;
  87 + .title {
  88 + span {
  89 + width: 15px;
  90 + height: 33px;
  91 + font-size: 24px;
  92 + font-weight: 500;
  93 + color: rgba(208, 2, 27, 1);
  94 + line-height: 33px;
  95 + }
  96 + height: 50px;
  97 + font-size: 36px;
  98 + font-weight: 500;
  99 + color: rgba(208, 2, 27, 1);
  100 + line-height: 50px;
128 101 }
129   - .line_box {
130   - height: 19px;
  102 + .btn {
  103 + width: 146px;
  104 + height: 52px;
  105 + line-height: 52px;
  106 + background: rgba(253, 241, 242, 1);
  107 + border-radius: 8px;
  108 + text-align: center;
  109 + font-size: 26px;
  110 + color: rgba(208, 2, 27, 1);
  111 + }
  112 + }
  113 + }
  114 + }
  115 + .steps_box {
  116 + margin-top: 58px;
  117 + .line_box {
  118 + display: flex;
  119 + margin: 0 38px;
  120 + .box {
  121 + height: 16px;
  122 + .item {
131 123 display: flex;
132   - align-items: center;
133   - margin: 0 13px;
134   - .line {
135   - width: 140px;
136   - height: 1px;
137   - background: rgba(240, 240, 240, 1);
  124 + .img {
  125 + width: 16px;
  126 + height: 16px;
  127 + background: url("/static/img/spot.png") no-repeat
  128 + top;
  129 + background-size: 100%;
  130 + }
  131 + .line_box {
  132 + height: 19px;
  133 + display: flex;
  134 + align-items: center;
  135 + margin: 0 13px;
  136 + .line {
  137 + width: 140px;
  138 + height: 1px;
  139 + background: rgba(240, 240, 240, 1);
  140 + }
138 141 }
139 142 }
140 143 }
141   - }
142   - .active {
143   - .item {
144   - .img {
145   - width: 16px;
146   - height: 16px;
147   - background: url("../../../static/img/spot_active.png") no-repeat
148   - top;
149   - background-size: 100%;
  144 + .active {
  145 + .item {
  146 + .img {
  147 + width: 16px;
  148 + height: 16px;
  149 + background: url("../../../static/img/spot_active.png")
  150 + no-repeat top;
  151 + background-size: 100%;
  152 + }
150 153 }
151 154 }
152   - }
153   - .active_line {
154   - .item {
155   - .line_box {
156   - .line {
157   - background: rgba(208, 2, 27, 1);
  155 + .active_line {
  156 + .item {
  157 + .line_box {
  158 + .line {
  159 + background: rgba(208, 2, 27, 1);
  160 + }
158 161 }
159 162 }
160 163 }
161 164 }
162   - }
163   - .desc_box {
164   - display: flex;
165   - justify-content: space-between;
166   - margin: 17px auto 0 auto;
167   - .desc {
168   - height: 30px;
169   - font-size: 22px;
170   - font-weight: 400;
171   - color: rgba(202, 202, 202, 1);
172   - line-height: 30px;
173   - margin-top: 20px;
  165 + .desc_box {
  166 + display: flex;
  167 + justify-content: space-between;
  168 + margin: 17px auto 0 auto;
  169 + .desc {
  170 + height: 30px;
  171 + font-size: 22px;
  172 + font-weight: 400;
  173 + color: rgba(202, 202, 202, 1);
  174 + line-height: 30px;
  175 + margin-top: 20px;
  176 + }
  177 + .active {
  178 + color: #666666;
  179 + }
174 180 }
175   - .active {
176   - color: #666666;
  181 + .box:last-child {
  182 + .item .line_box {
  183 + display: none;
  184 + }
177 185 }
178 186 }
179   - .box:last-child {
180   - .item .line_box {
181   - display: none;
182   - }
  187 + .text_tip {
  188 + margin-top: 58px;
  189 + display: flex;
  190 + justify-content: flex-end;
  191 + height: 40px;
  192 + font-size: 28px;
  193 + font-weight: 500;
  194 + color: rgba(51, 51, 51, 1);
  195 + line-height: 40px;
183 196 }
184 197 }
185   - .text_tip {
186   - margin-top: 58px;
  198 + .noGift {
  199 + height: calc(100vh-364px);
187 200 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;
  201 + justify-content: center;
  202 + align-items: center;
  203 + img {
  204 + display: block;
  205 + width: 260px;
  206 + height: 230px;
  207 + }
  208 + .tip {
  209 + width: 100%;
  210 + height: 42px;
  211 + font-size: 30px;
  212 + font-weight: 400;
  213 + color: rgba(51, 51, 51, 1);
  214 + line-height: 42px;
  215 + margin-top: 30px;
  216 + }
194 217 }
195 218 }
... ...
src/components/receivingGiftsItem/receivingGiftsItem.vue
  View file @598e133
1 1 <template>
  2 + <div class="receivingGiftsInfo">
2 3 <div v-if="receivingGiftsInfo && receivingGiftsInfo.length > 0">
3 4 <div
4 5 class="giftItem_box"
... ... @@ -139,6 +140,14 @@
139 140 <div class="text_tip" v-else>完成</div>
140 141 </div>
141 142 </div>
  143 + <!-- 您还未收到过礼物哦～-->
  144 + <div v-else class="noGift">
  145 + <div class=box>
  146 + <img src="/static/img/noGifts.png"/>
  147 + <div class="tip">您还未收到过礼物哦</div>
  148 + </div>
  149 + </div>
  150 + </div>
142 151 </template>
143 152  
144 153 <script>
... ...
static/img/noGifts.png 0 → 100644
View file @598e133

101 KB