w-front-end / select_good · Commits

Commit 3f8dcdb415d92d2a205da71fdf35fb9212babdd8

Authored by zhiyangdu
1 parent 0d2eed28

增加送礼列表页抽屉筛选模块

Inline Side-by-side
Showing 3 changed files with 304 additions and 121 deletions
src/pages/myGiftBox/myGiftBox.less
  View file @3f8dcdb
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
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 - .gift_top{ 6 + .gift_top {
7 width: 100%; 7 width: 100%;
8 height: auto; 8 height: auto;
9 background-color: #fff; 9 background-color: #fff;
@@ -45,8 +45,8 @@ @@ -45,8 +45,8 @@
45 height: 45px; 45 height: 45px;
46 line-height: 32px; 46 line-height: 32px;
47 } 47 }
48 - .van-tab--active{  
49 - color: #D0021B; 48 + .van-tab--active {
  49 + color: #d0021b;
50 } 50 }
51 } 51 }
52 .desc { 52 .desc {
@@ -58,66 +58,164 @@ @@ -58,66 +58,164 @@
58 line-height: 45px; 58 line-height: 45px;
59 } 59 }
60 } 60 }
61 - .item_box{ 61 + .tab_btn_list_box {
  62 + display: flex;
  63 + .tab_btn_list {
  64 + flex: 1;
  65 + height: 50px;
  66 + margin: 30px 30px 10px 30px;
  67 + // tab边框
  68 + .van-hairline--top-bottom::after,
  69 + .van-hairline-unset--top-bottom::after {
  70 + border-width: 0;
  71 + }
  72 + .van-tabs__nav--line {
  73 + padding-bottom: 0;
  74 + }
  75 + .van-tabs {
  76 + width: 100%;
  77 + }
  78 + .van-tab {
  79 + margin-right: 30px;
  80 + }
  81 + .van-tab:first-child {
  82 + padding-left: 0px;
  83 + }
  84 + .van-tabs--line .van-tabs__wrap {
  85 + height: 100%;
  86 + }
  87 + .van-tab span {
  88 + display: block;
  89 + width: auto;
  90 + font-size: 26px;
  91 + color: #999999;
  92 + background-color: #f9f9f9;
  93 + border-radius: 8px;
  94 + }
  95 + .van-tab--active span {
  96 + font-weight: 400;
  97 + color: rgba(208, 2, 27, 1);
  98 + }
  99 + .van-tabs__line {
  100 + display: none;
  101 + }
  102 + }
  103 + .box_width {
  104 + width: 580px;
  105 + }
  106 + .screen_box {
  107 + width: 99px;
  108 + padding-left: 24px;
  109 + height: 50px;
  110 + background: rgba(255, 255, 255, 1);
  111 + box-shadow: -7px 0px 7px -7px rgba(0, 0, 0, 0.15);
  112 + margin: 4vw 0 1.33vw 0;
  113 + display: flex;
  114 + align-items: center;
  115 + img {
  116 + width: 17px;
  117 + height: 37px;
  118 + }
  119 + div {
  120 + height: 37px;
  121 + font-size: 26px;
  122 + font-weight: 400;
  123 + color: rgba(208, 2, 27, 1);
  124 + line-height: 37px;
  125 + margin-right: 10px;
  126 + }
  127 + }
  128 + }
  129 + .item_box {
62 // height: 100vh; 130 // height: 100vh;
63 padding-bottom: 40px; 131 padding-bottom: 40px;
64 overflow-y: auto; 132 overflow-y: auto;
65 box-sizing: border-box; 133 box-sizing: border-box;
66 overflow: hidden; 134 overflow: hidden;
67 // padding-top: 120px; 135 // padding-top: 120px;
68 - .giftItem_box:first-child{ 136 + .giftItem_box:first-child {
69 margin-top: 20px; 137 margin-top: 20px;
70 } 138 }
71 } 139 }
72 - .tab_btn_list{  
73 - height: 50px;  
74 - margin: 30px 30px 10px 30px;  
75 - // tab边框  
76 - .van-hairline--top-bottom::after,  
77 - .van-hairline-unset--top-bottom::after {  
78 - border-width: 0;  
79 - }  
80 - .van-tabs__nav--line{  
81 - padding-bottom: 0;  
82 - }  
83 - .van-tabs{  
84 - width: 100%;  
85 - }  
86 - .van-tab{  
87 - margin-right: 30px;  
88 - }  
89 - .van-tab:first-child{  
90 - padding-left: 0px;  
91 - }  
92 - .van-tabs--line .van-tabs__wrap{  
93 - height:100%;  
94 - }  
95 - .van-tab span{  
96 - display: block;  
97 - width: auto;  
98 - font-size: 26px;  
99 - color: #999999;  
100 - background-color: #F9F9F9;  
101 - border-radius: 8px;  
102 - }  
103 - .van-tab--active span{  
104 - font-weight:400;  
105 - color:rgba(208,2,27,1);  
106 - }  
107 - .van-tabs__line{  
108 - display: none; 140 + .screenPopup {
  141 + .screen_box {
  142 + .title {
  143 + height: 40px;
  144 + font-size: 28px;
  145 + font-family: PingFang-SC-Regular, PingFang-SC;
  146 + font-weight: 400;
  147 + color: rgba(51, 51, 51, 1);
  148 + line-height: 40px;
  149 + text-align: center;
  150 + padding-bottom: 30px;
  151 + border-bottom: solid 1px #f2f2f2;
  152 + margin: 30px 30px 0 30px;
  153 + }
  154 + .tab_box {
  155 + border-bottom: 10px solid #f9f9f9;
  156 + .title_t {
  157 + margin: 40px 30px 0 30px;
  158 + height: 33px;
  159 + font-size: 24px;
  160 + font-family: PingFangSC-Semibold, PingFang SC;
  161 + font-weight: 600;
  162 + color: rgba(51, 51, 51, 1);
  163 + line-height: 33px;
  164 + }
  165 + .btn_list {
  166 + margin: 30px 30px 0 30px;
  167 + display: flex;
  168 + // justify-content: space-between;
  169 + padding-bottom: 30px;
  170 + .btn {
  171 + padding: 0 32px;
  172 + background: rgba(249, 249, 249, 1);
  173 + border-radius: 10px;
  174 + font-size: 24px;
  175 + font-weight: 500;
  176 + color: rgba(102, 102, 102, 1);
  177 + margin-right: 18px;
  178 + height: 58px;
  179 + line-height: 58px;
  180 + }
  181 + .active {
  182 + background: rgba(253, 241, 242, 1);
  183 + border-radius: 10px;
  184 + border: 1px solid rgba(208, 2, 27, 1);
  185 + color: #d0021b;
  186 + }
  187 + }
  188 + }
  189 + .bottom_btn {
  190 + display: flex;
  191 + text-align: center;
  192 + line-height: 90px;
  193 + .reset {
  194 + width: 224px;
  195 + height: 90px;
  196 + background: rgba(249, 249, 249, 1);
  197 + color: #666666;
  198 + }
  199 + .confirm {
  200 + flex: 1;
  201 + height: 90px;
  202 + background: rgba(208, 2, 27, 1);
  203 + color: rgba(255, 255, 255, 1);
  204 + }
  205 + }
109 } 206 }
110 } 207 }
111 - .tip_text{ 208 + .tip_text {
112 text-align: center; 209 text-align: center;
113 margin-top: 20px; 210 margin-top: 20px;
114 font-size: 26px; 211 font-size: 26px;
115 color: #999; 212 color: #999;
116 } 213 }
117 - .van-picker__cancel, .van-picker__confirm{ 214 + .van-picker__cancel,
  215 + .van-picker__confirm {
118 font-size: 30px; 216 font-size: 30px;
119 } 217 }
120 - .van-picker-column{ 218 + .van-picker-column {
121 font-size: 28px; 219 font-size: 28px;
122 } 220 }
123 .van-picker__toolbar { 221 .van-picker__toolbar {
src/pages/myGiftBox/myGiftBox.vue
  View file @3f8dcdb
@@ -2,75 +2,91 @@ @@ -2,75 +2,91 @@
2 <div class="my_gift_box"> 2 <div class="my_gift_box">
3 <!-- 头部 --> 3 <!-- 头部 -->
4 <div class="gift_top"> 4 <div class="gift_top">
5 - <!--tab切换-->  
6 - <div  
7 - class="top_box"  
8 - :style="'padding-top: ' + ($parent.top.value+15) + 'px'"  
9 - >  
10 - <img @click="$parent.back" src="static/img/icon_back.png" />  
11 - <div class="tabs">  
12 - <van-tabs @change="onTap" v-model="active">  
13 - <van-tab title="收礼"></van-tab>  
14 - <van-tab title="送礼"></van-tab>  
15 - </van-tabs> 5 + <!--tab切换-->
  6 + <div
  7 + class="top_box"
  8 + :style="'padding-top: ' + ($parent.top.value + 15) + 'px'"
  9 + >
  10 + <img @click="$parent.back" src="static/img/icon_back.png" />
  11 + <div class="tabs">
  12 + <van-tabs @change="onTap" v-model="active">
  13 + <van-tab title="收礼"></van-tab>
  14 + <van-tab title="送礼"></van-tab>
  15 + </van-tabs>
  16 + </div>
  17 + <div class="desc" @click="giftRules">规则说明</div>
16 </div> 18 </div>
17 - <div class="desc" @click="giftRules">规则说明</div>  
18 - </div>  
19 - <!-- btn按钮筛选 -->  
20 - <div class="tab_btn_list">  
21 - <van-tabs @change="onStatusFiltering" v-model="btnActive" swipeable>  
22 - <van-tab  
23 - v-for="(item, index) in active == 0  
24 - ? receivingGiftsTab  
25 - : giveGifTab"  
26 - :title="item.name"  
27 - :key="'tab' + index" 19 + <!-- btn按钮筛选 -->
  20 + <div class="tab_btn_list_box">
  21 + <div :class="{ box_width: active == 1 }" class="tab_btn_list">
  22 + <van-tabs
  23 + @change="onStatusFiltering"
  24 + v-model="btnActive"
  25 + swipeable
  26 + >
  27 + <van-tab
  28 + v-for="(item, index) in active == 0
  29 + ? receivingGiftsTab
  30 + : giveGifTab"
  31 + :title="item.name"
  32 + :key="'tab' + index"
  33 + >
  34 + </van-tab>
  35 + </van-tabs>
  36 + </div>
  37 + <!-- 筛选 -->
  38 + <div
  39 + @click="screenPopup"
  40 + v-show="active == 1"
  41 + class="screen_box"
28 > 42 >
29 - </van-tab>  
30 - </van-tabs>  
31 - </div> 43 + <div>筛选</div>
  44 + <img src="static/img/screen.png" alt="" />
  45 + </div>
  46 + </div>
32 </div> 47 </div>
33 <!--下拉刷新--> 48 <!--下拉刷新-->
34 <!-- <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> --> 49 <!-- <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> -->
35 - <!--内容-->  
36 - <div class="item_box" :style="'padding-top: ' + ($parent.top.value+90) + 'px'">  
37 - <div  
38 - ref="boxx"  
39 - infinite-scroll-immediate-check="true"  
40 - v-infinite-scroll="onInfiniteScroll"  
41 - infinite-scroll-disabled="loading"  
42 - :infinite-scroll-distance="50"  
43 - infinite-scroll-throttle-delay="600" 50 + <!--内容-->
  51 + <div
  52 + class="item_box"
  53 + :style="'padding-top: ' + ($parent.top.value + 90) + 'px'"
  54 + >
  55 + <div
  56 + ref="boxx"
  57 + infinite-scroll-immediate-check="true"
  58 + v-infinite-scroll="onInfiniteScroll"
  59 + infinite-scroll-disabled="loading"
  60 + :infinite-scroll-distance="50"
  61 + infinite-scroll-throttle-delay="600"
  62 + >
  63 + <!-- 收礼列表 -->
  64 + <receiving-gifts-item
  65 + v-show="active == 0"
  66 + @onUserInfo="onUserInfo"
  67 + @giftInReturn="giftInReturn"
  68 + @onReceivingGifts="onReceivingGifts"
  69 + :receivingGiftsInfo="receivingGiftsInfo"
  70 + :isData="this.receivingGifts.isData"
  71 + ></receiving-gifts-item>
  72 + <!-- 送礼列表 -->
  73 + <giftGivingItem
  74 + @onGiftGiving="onGiftGiving"
  75 + @onCancelPayment="onCancelPayment"
  76 + @jumpToPay="jumpToPay"
  77 + @giftToShare="giftToShare"
  78 + v-show="active == 1"
  79 + :giftGivingItem="giftGivingItem"
  80 + :isData="this.giftGiving.isData"
44 > 81 >
45 - <!-- 收礼列表 -->  
46 - <receiving-gifts-item  
47 - v-show="active != 1 && active == 0"  
48 - @onUserInfo="onUserInfo"  
49 - @giftInReturn="giftInReturn"  
50 - @onReceivingGifts="onReceivingGifts"  
51 - :receivingGiftsInfo="receivingGiftsInfo"  
52 - :isData="this.receivingGifts.isData"  
53 - ></receiving-gifts-item>  
54 - <!-- 送礼列表 -->  
55 - <giftGivingItem  
56 - @onGiftGiving="onGiftGiving"  
57 - @onCancelPayment="onCancelPayment"  
58 - @jumpToPay="jumpToPay"  
59 - @giftToShare="giftToShare"  
60 - v-show="active != 0 && active == 1"  
61 - :giftGivingItem="giftGivingItem"  
62 - :isData="this.giftGiving.isData"  
63 - >  
64 - </giftGivingItem>  
65 - <!-- 没有更多了 -->  
66 - <div v-if="active == 0" class="tip_text">  
67 - {{ this.receivingGifts.tipText }}  
68 - </div>  
69 - <div v-else class="tip_text">  
70 - {{ this.giftGiving.tipText }}  
71 - </div> 82 + </giftGivingItem>
  83 + <!-- 没有更多了 -->
  84 + <div v-if="active == 0" class="tip_text">
  85 + {{ this.receivingGifts.tipText }}
72 </div> 86 </div>
  87 + <div v-else class="tip_text">{{ this.giftGiving.tipText }}</div>
73 </div> 88 </div>
  89 + </div>
74 <!-- </van-pull-refresh> --> 90 <!-- </van-pull-refresh> -->
75 <!-- 弹出框 --> 91 <!-- 弹出框 -->
76 <van-popup position="bottom" v-model="actionSheetShow"> 92 <van-popup position="bottom" v-model="actionSheetShow">
@@ -82,6 +98,69 @@ @@ -82,6 +98,69 @@
82 @confirm="confirm" 98 @confirm="confirm"
83 /> 99 />
84 </van-popup> 100 </van-popup>
  101 + <!-- 右侧弹出筛选订单 -->
  102 + <van-popup
  103 + class="screenPopup"
  104 + v-model="popupShow"
  105 + position="right"
  106 + :style="{ height: '100vh', width: '285px' }"
  107 + >
  108 + <div class="screen_box">
  109 + <!-- 标题 -->
  110 + <div class="title">筛选订单</div>
  111 + <!-- 支付 -->
  112 + <div class="tab_box">
  113 + <div class="title_t">支付</div>
  114 + <div class="btn_list"><div class="btn">未付款</div></div>
  115 + </div>
  116 + <!-- 分享-->
  117 + <div class="tab_box">
  118 + <div class="title_t">分享</div>
  119 + <div class="btn_list">
  120 + <div class="btn">可分享</div>
  121 + <div class="btn">已领完</div>
  122 + </div>
  123 + </div>
  124 + <!-- 填写地址 -->
  125 + <div class="tab_box">
  126 + <div class="title_t">分享</div>
  127 + <div class="btn_list">
  128 + <div class="btn">未填写地址</div>
  129 + <div class="btn">已填写地址</div>
  130 + </div>
  131 + </div>
  132 + <!-- 待收货 -->
  133 + <div class="tab_box">
  134 + <div class="title_t">待收货</div>
  135 + <div class="btn_list">
  136 + <div class="btn">已揽件</div>
  137 + <div class="btn">运输中</div>
  138 + <div class="btn">派送中</div>
  139 + </div>
  140 + </div>
  141 + <!-- 已送达 -->
  142 + <div class="tab_box">
  143 + <div class="title_t">已送达</div>
  144 + <div class="btn_list">
  145 + <div class="btn">已领取</div>
  146 + <div class="btn">已签收</div>
  147 + </div>
  148 + </div>
  149 + <!-- 未领退款 -->
  150 + <div class="tab_box">
  151 + <div class="title_t">未领退款</div>
  152 + <div class="btn_list">
  153 + <div class="btn">退款中</div>
  154 + <div class="btn">已关闭</div>
  155 + </div>
  156 + </div>
  157 + <!-- 重置和确定 -->
  158 + <div class="bottom_btn">
  159 + <div class="reset">重置</div>
  160 + <div class="confirm">确定</div>
  161 + </div>
  162 + </div>
  163 + </van-popup>
85 </div> 164 </div>
86 </template> 165 </template>
87 166
@@ -97,7 +176,7 @@ export default { @@ -97,7 +176,7 @@ export default {
97 receivingGiftsTab: [ 176 receivingGiftsTab: [
98 // 收礼tab筛选 177 // 收礼tab筛选
99 { name: "全部", status: 0 }, 178 { name: "全部", status: 0 },
100 - { name: "未填写地址", status: 1 }, 179 + { name: "未填地址", status: 1 },
101 { name: "待发货", status: 2 }, 180 { name: "待发货", status: 2 },
102 { name: "已完成", status: 3 }, 181 { name: "已完成", status: 3 },
103 { name: "已发货", status: 4 } 182 { name: "已发货", status: 4 }
@@ -107,7 +186,7 @@ export default { @@ -107,7 +186,7 @@ export default {
107 // 送礼tab筛选 186 // 送礼tab筛选
108 { name: "全部", status: 0 }, 187 { name: "全部", status: 0 },
109 { name: "可分享", status: 1 }, 188 { name: "可分享", status: 1 },
110 - { name: "未填写地址", status: 2 }, 189 + { name: "未填地址", status: 2 },
111 { name: "待发货", status: 3 }, 190 { name: "待发货", status: 3 },
112 { name: "未领退款", status: 4 } 191 { name: "未领退款", status: 4 }
113 ], 192 ],
@@ -139,7 +218,8 @@ export default { @@ -139,7 +218,8 @@ export default {
139 causes: [], // 取消原因 218 causes: [], // 取消原因
140 item: null //订单id 219 item: null //订单id
141 }, 220 },
142 - isLoading: false //下拉刷新 221 + isLoading: false, //下拉刷新
  222 + popupShow: false // 右侧筛选抽屉显示隐藏
143 }; 223 };
144 }, 224 },
145 components: { 225 components: {
@@ -200,7 +280,7 @@ export default { @@ -200,7 +280,7 @@ export default {
200 */ 280 */
201 onTap(active) { 281 onTap(active) {
202 // 切换tab默认滚动条在顶部 282 // 切换tab默认滚动条在顶部
203 - window.scrollTo(0,0); 283 + window.scrollTo(0, 0);
204 this.active = active; 284 this.active = active;
205 // 初始化加载状态 285 // 初始化加载状态
206 // this.loading = false; 286 // this.loading = false;
@@ -224,8 +304,8 @@ export default { @@ -224,8 +304,8 @@ export default {
224 }, 304 },
225 // tab订单状态筛选 305 // tab订单状态筛选
226 onStatusFiltering(name, title) { 306 onStatusFiltering(name, title) {
227 - // 切换tab默认滚动条在顶部  
228 - window.scrollTo(0,0); 307 + // 切换tab默认滚动条在顶部
  308 + window.scrollTo(0, 0);
229 // 初始化加载状态 309 // 初始化加载状态
230 // this.loading = false; 310 // this.loading = false;
231 if (this.active == 0) { 311 if (this.active == 0) {
@@ -243,6 +323,12 @@ export default { @@ -243,6 +323,12 @@ export default {
243 } 323 }
244 }, 324 },
245 /** 325 /**
  326 + * 送礼列表页筛选
  327 + */
  328 + screenPopup() {
  329 + this.popupShow = true;
  330 + },
  331 + /**
246 * 下啦滑动加载更多 332 * 下啦滑动加载更多
247 */ 333 */
248 onInfiniteScroll() { 334 onInfiniteScroll() {
@@ -745,19 +831,18 @@ export default { @@ -745,19 +831,18 @@ export default {
745 /** 831 /**
746 * 调用原生分享礼物 832 * 调用原生分享礼物
747 */ 833 */
748 - giftToShare(item){ 834 + giftToShare(item) {
749 // 判断并调用通用跳转 835 // 判断并调用通用跳转
750 if (typeof this.$parent.toShare === "function") { 836 if (typeof this.$parent.toShare === "function") {
751 - /**  
752 - * App内拉起分享  
753 - * @param {int} type [分享类型]  
754 - * @param {int} id [页面id]  
755 - * @param {object} ext [分享扩展参数，可选参数]  
756 - */  
757 - this.$parent.toShare('8',item.id,); 837 + /**
  838 + * App内拉起分享
  839 + * @param {int} type [分享类型]
  840 + * @param {int} id [页面id]
  841 + * @param {object} ext [分享扩展参数，可选参数]
  842 + */
  843 + this.$parent.toShare("8", item.id);
758 } 844 }
759 } 845 }
760 -  
761 } 846 }
762 }; 847 };
763 </script> 848 </script>
static/img/screen.png 0 → 100644
View file @3f8dcdb

591 Bytes