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 3 // height: calc(100vh-25px);
4 4 background-color: #fff;
5 5 // padding-top: 25px;
6   - .gift_top{
  6 + .gift_top {
7 7 width: 100%;
8 8 height: auto;
9 9 background-color: #fff;
... ... @@ -45,8 +45,8 @@
45 45 height: 45px;
46 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 52 .desc {
... ... @@ -58,66 +58,164 @@
58 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 130 // height: 100vh;
63 131 padding-bottom: 40px;
64 132 overflow-y: auto;
65 133 box-sizing: border-box;
66 134 overflow: hidden;
67 135 // padding-top: 120px;
68   - .giftItem_box:first-child{
  136 + .giftItem_box:first-child {
69 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 209 text-align: center;
113 210 margin-top: 20px;
114 211 font-size: 26px;
115 212 color: #999;
116 213 }
117   - .van-picker__cancel, .van-picker__confirm{
  214 + .van-picker__cancel,
  215 + .van-picker__confirm {
118 216 font-size: 30px;
119 217 }
120   - .van-picker-column{
  218 + .van-picker-column {
121 219 font-size: 28px;
122 220 }
123 221 .van-picker__toolbar {
... ...
src/pages/myGiftBox/myGiftBox.vue
  View file @3f8dcdb
... ... @@ -2,75 +2,91 @@
2 2 <div class="my_gift_box">
3 3 <!-- 头部 -->
4 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 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 47 </div>
33 48 <!--下拉刷新-->
34 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 86 </div>
  87 + <div v-else class="tip_text">{{ this.giftGiving.tipText }}</div>
73 88 </div>
  89 + </div>
74 90 <!-- </van-pull-refresh> -->
75 91 <!-- 弹出框 -->
76 92 <van-popup position="bottom" v-model="actionSheetShow">
... ... @@ -82,6 +98,69 @@
82 98 @confirm="confirm"
83 99 />
84 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 164 </div>
86 165 </template>
87 166  
... ... @@ -97,7 +176,7 @@ export default {
97 176 receivingGiftsTab: [
98 177 // 收礼tab筛选
99 178 { name: "全部", status: 0 },
100   - { name: "未填写地址", status: 1 },
  179 + { name: "未填地址", status: 1 },
101 180 { name: "待发货", status: 2 },
102 181 { name: "已完成", status: 3 },
103 182 { name: "已发货", status: 4 }
... ... @@ -107,7 +186,7 @@ export default {
107 186 // 送礼tab筛选
108 187 { name: "全部", status: 0 },
109 188 { name: "可分享", status: 1 },
110   - { name: "未填写地址", status: 2 },
  189 + { name: "未填地址", status: 2 },
111 190 { name: "待发货", status: 3 },
112 191 { name: "未领退款", status: 4 }
113 192 ],
... ... @@ -139,7 +218,8 @@ export default {
139 218 causes: [], // 取消原因
140 219 item: null //订单id
141 220 },
142   - isLoading: false //下拉刷新
  221 + isLoading: false, //下拉刷新
  222 + popupShow: false // 右侧筛选抽屉显示隐藏
143 223 };
144 224 },
145 225 components: {
... ... @@ -200,7 +280,7 @@ export default {
200 280 */
201 281 onTap(active) {
202 282 // 切换tab默认滚动条在顶部
203   - window.scrollTo(0,0);
  283 + window.scrollTo(0, 0);
204 284 this.active = active;
205 285 // 初始化加载状态
206 286 // this.loading = false;
... ... @@ -224,8 +304,8 @@ export default {
224 304 },
225 305 // tab订单状态筛选
226 306 onStatusFiltering(name, title) {
227   - // 切换tab默认滚动条在顶部
228   - window.scrollTo(0,0);
  307 + // 切换tab默认滚动条在顶部
  308 + window.scrollTo(0, 0);
229 309 // 初始化加载状态
230 310 // this.loading = false;
231 311 if (this.active == 0) {
... ... @@ -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 334 onInfiniteScroll() {
... ... @@ -745,19 +831,18 @@ export default {
745 831 /**
746 832 * 调用原生分享礼物
747 833 */
748   - giftToShare(item){
  834 + giftToShare(item) {
749 835 // 判断并调用通用跳转
750 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 848 </script>
... ...
static/img/screen.png 0 → 100644
View file @3f8dcdb

591 Bytes