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,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 <template> 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 </div> 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 </div> 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 </div> 58 </div>
34 </div> 59 </div>
35 </div> 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 </div> 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 </div> 102 </div>
51 </div> 103 </div>
52 </div> 104 </div>
@@ -61,17 +113,17 @@ export default { @@ -61,17 +113,17 @@ export default {
61 props: ["giftGivingItem"], 113 props: ["giftGivingItem"],
62 created() {}, 114 created() {},
63 methods: { 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 position: relative; 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 .name { 20 .name {
  21 + height: 50px;
67 font-size: 28px; 22 font-size: 28px;
68 font-weight: 400; 23 font-weight: 400;
69 color: rgba(51, 51, 51, 1); 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 overflow: hidden; 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 position: absolute; 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 display: flex; 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 .box { 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 display: flex; 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 display: flex; 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 display: flex; 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 <template> 1 <template>
  2 + <div class="receivingGiftsInfo">
2 <div v-if="receivingGiftsInfo && receivingGiftsInfo.length > 0"> 3 <div v-if="receivingGiftsInfo && receivingGiftsInfo.length > 0">
3 <div 4 <div
4 class="giftItem_box" 5 class="giftItem_box"
@@ -139,6 +140,14 @@ @@ -139,6 +140,14 @@
139 <div class="text_tip" v-else>完成</div> 140 <div class="text_tip" v-else>完成</div>
140 </div> 141 </div>
141 </div> 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 </template> 151 </template>
143 152
144 <script> 153 <script>
static/img/noGifts.png 0 → 100644
View file @598e133

101 KB