├── .gitignore
├── .hbuilderx
    └── launch.json
├── App.vue
├── README.md
├── components
    ├── load-refresh
    │   ├── README.md
    │   └── load-refresh.vue
    ├── sofar-picker
    │   ├── README.md
    │   └── sofar-picker.vue
    ├── structure-cascade
    │   ├── README.md
    │   └── structure-cascade.vue
    └── term-picker
    │   ├── README.md
    │   └── term-picker.vue
├── main.js
├── manifest.json
├── pages.json
├── pages
    ├── guide
    │   └── index.vue
    ├── loadRefresh
    │   ├── index.vue
    │   └── tabs.vue
    ├── sofarPicker
    │   └── index.vue
    ├── structureCascade
    │   └── index.vue
    └── termPicker
    │   └── index.vue
├── static
    ├── head.jpg
    ├── icons
    │   ├── arrow-right.png
    │   ├── selected.png
    │   └── structure.png
    ├── logo.png
    ├── pic1.jpg
    ├── pic2.jpg
    ├── pic3.jpg
    ├── pic4.jpg
    ├── pic5.png
    ├── pic6.jpg
    └── shutter.png
└── uni.scss


/.gitignore:
--------------------------------------------------------------------------------
1 | unpackage/


--------------------------------------------------------------------------------
/.hbuilderx/launch.json:
--------------------------------------------------------------------------------
 1 | { // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
 2 |     // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
 3 |     "version": "0.0",
 4 |     "configurations": [{
 5 |         "default": {
 6 |             "launchtype": "remote"
 7 |         },
 8 |        	"h5": {
 9 |             "launchtype": "remote"
10 |         },
11 |         "mp-weixin": {
12 |             "launchtype": "remote"
13 |         },
14 |         "type": "uniCloud"
15 |     }]
16 | }
17 | 


--------------------------------------------------------------------------------
/App.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     export default {
 3 |         onLaunch: function() {
 4 |             console.log('App Launch')
 5 |         },
 6 |         onShow: function() {
 7 |             console.log('App Show')
 8 |         },
 9 |         onHide: function() {
10 |             console.log('App Hide')
11 |         }
12 |     }
13 | </script>
14 | 
15 | <style>
16 |     page {
17 |         background-color: #F5F8FA;
18 |     }
19 | </style>
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # uni-app 组件
 2 | 
 3 | 	在项目开发过程中，根据实际的功能需求所开发的一些前端组件，总结一下分享出来，希望对大家有所帮助！
 4 | 
 5 | ## 组件目录
 6 | 
 7 |   - [loadRefresh](/components/load-refresh) 上滑加载下拉刷新
 8 |   - [sofarPicker](/components/sofar-picker) 年-月 范围组件
 9 |   - [termPicker](/components/term-picker) 年-月-日 范围组件
10 |   - [structure-cascade](/components/structure-cascade) 多级树形选择
11 | 
12 | ## 项目运行
13 | 
14 |   - clone项目到本地
15 | 
16 | ```sh
17 |     git clone git@github.com:JamyKing/uni-load-refresh.git
18 | ```
19 | 
20 |   - 使用HBuilderX导入项目
21 |   - 运行到浏览器（H5端）、微信小程序端、App端等
22 |   


--------------------------------------------------------------------------------
/components/load-refresh/README.md:
--------------------------------------------------------------------------------
  1 | # load-refresh
  2 | 
  3 |    - 页面局部下拉刷新、上划加载更多、回弹效果等。
  4 |    - 可以在App端、微信小程序端、H5端完美运行。
  5 |    - 刷新动画使用了[Epic Spinners](https://epic-spinners.epicmax.co/)，也可以根据情况自定义。
  6 |    - 组件的状态文字提醒，也可根据自身需求进行修改。
  7 |    - 最新的项目示例代码可在[GitHub](https://github.com/JamyKing/uni-load-refresh)获取。
  8 | 
  9 | ## 使用方法
 10 | 
 11 | #### 在 `script` 中引用组件
 12 | 
 13 | ```
 14 | import loadRefresh from '@/components/load-refresh/load-refresh.vue'
 15 | export default {
 16 |   components: {
 17 |     loadRefresh
 18 |   }
 19 | }
 20 | ```
 21 | 
 22 | #### 在 `template` 中使用组件
 23 | 
 24 | ```
 25 | <load-refresh
 26 |   ref="loadRefresh"
 27 |   :isRefresh="true"
 28 |   refreshType="hollowDots"
 29 |   color="#04C4C4"
 30 |   heightReduce="0"
 31 |   backgroundCover="#F3F5F5"
 32 |   :currentPage="currentPage"
 33 |   :totalPages="totalPages" 
 34 |   @loadMore="loadMore" 
 35 |   @refresh="refresh">
 36 |   <view slot="content-list">
 37 |     <!-- 数据列表 -->
 38 |   </view>
 39 | </load-refresh>
 40 | ```
 41 | 
 42 | #### Props 参数说明
 43 | 
 44 | | 参数名 | 类型 | 默认值 | 说明 |
 45 | | ------ | ------ | ------ | ------ |
 46 | | isRefresh | Boolean | true | 是否开启手势下拉刷新功能(true: 开启; false: 关闭) |
 47 | | refreshType | String | hollowDots | 刷新动画，可选类型参数(hollowDots, halfCircle, swappingSquares) |
 48 | | color | String | #F3F5F5 | 自定义动画颜色 |
 49 | | fixedHeight | String | 0 | 固定高度(优先级：fixedHeight > heightReduce；适用于确定组件容器高度的情况下；单位：rpx) |
 50 | | heightReduce | String | 0 | 裁剪高度(在整个屏幕高度中除该组件外，其余部分占据的高度；适用于不确定组件容器高度，欲撑满屏幕；单位：rpx) |
 51 | | backgroundCover | String | white | 数据列表块背景色 |
 52 | | currentPage | Number | 0 | 当前页码 |
 53 | | totalPages | Number | 0 | 总页码 |
 54 | 
 55 | #### Events 事件说明
 56 | 
 57 | | 事件名 | 说明 | 返回值 |
 58 | | ------ | ------ | ------ |
 59 | | @loadMore | 上滑加载更多 |  |
 60 | | @refresh | 下拉列表刷新 |  |
 61 | 
 62 | #### Methods 组件内方法
 63 | 
 64 | | 方法名 | 说明 | 使用 |
 65 | | ------ | ------ | ------ |
 66 | | completed() | 刷新、加载完成(下拉刷新、加载更多 数据更新成功后必须调用) | this.$refs.loadRefresh.completed() |
 67 | | runRefresh() | 代码内触发下拉刷新 | this.$refs.loadRefresh.runRefresh() |
 68 | 
 69 | #### Notes 注意事项
 70 | 
 71 |   - 注意将数据集放在插槽`slot="content-list"`中。
 72 |   - 加载更多`loadMore()`过程中，建议在请求时使用`currentPage + 1`形式，成功后的**回调函数中**去更新`currentPage`的值。
 73 |   - **`@loadMore`、`@refresh`触发后，在数据请求成功后，必须调用`completed()`去结束动画。**
 74 |   - 如有需要使用组件实现`tabsSwiper`**全屏选项卡**功能，可参考[tabsSwiper](https://github.com/JamyKing/uni-load-refresh/blob/master/pages/tabs/tabs.vue)。
 75 |   - 使用出现问题可参考[常见问题汇总](https://github.com/JamyKing/uni-load-refresh/issues/2)
 76 |   - 如果对您有帮助，请鼓励支持一下，[![GitHub stars](https://img.shields.io/github/stars/JamyKing/uni-load-refresh?style=falt)](https://github.com/JamyKing/uni-load-refresh)。
 77 | 
 78 | #### Demo 代码示例
 79 | 
 80 | ```
 81 | <template>
 82 |   <view class="content">
 83 |     <load-refresh
 84 |       ref="loadRefresh"
 85 |       :isRefresh="true"
 86 |       :currentPage="currentPage"
 87 |       :totalPages="totalPages" 
 88 |       @loadMore="loadMore" 
 89 |       @refresh="refresh">
 90 |       <view slot="content-list">
 91 |         <!-- 数据列表 -->
 92 |         <view class="dataList" v-for="(item,index) in list" :key="index">
 93 |           {{item}}
 94 |         </view>
 95 |       </view>
 96 |     </load-refresh>
 97 |   </view>
 98 | </template>
 99 | 
100 | <script>
101 |   import loadRefresh from '@/components/load-refresh/load-refresh.vue'
102 |   export default {
103 |     components: {
104 |       loadRefresh
105 |     },
106 |     data() {
107 |       return {
108 |         list: [], // 数据集
109 |         currentPage: 1, // 当前页码
110 |         totalPages: 2 // 总页数
111 |       }
112 |     },
113 |     methods: {
114 |       // 上划加载更多
115 |       loadMore() {
116 |         // 模拟请求成功后的回调
117 |         setTimeout(() => {
118 |           // 1. list数组添加新数据
119 |           // 2. 更新当前页码 currentPage
120 |           // 3. 调用completed()方法 this.$refs.loadRefresh.completed()
121 |         }, 800)
122 |       },
123 |       // 下拉刷新数据列表
124 |       refresh() {
125 |         // 模拟请求成功后的回调
126 |         setTimeout(() => {
127 |           // 1. list重新赋值，应避免 this.list = [] 这种操作
128 |           // 2. 更新当前页码 currentPage
129 |           // 3. 调用completed()方法 this.$refs.loadRefresh.completed()
130 |         }, 1600)
131 |       },
132 |       // 后期可将loadMore()与refresh()合并成一个函数方法去处理，因为本质上这两个方法只有在list赋值上面有不同
133 |       // 代码触发下拉刷新方法
134 |       runRefresh() {
135 |         this.$refs.loadRefresh.runRefresh()
136 |       }
137 |     }
138 |   }
139 | </script>
140 | 
141 | <style>
142 |   .content{
143 |     width: 100%;
144 |     height: 100%;
145 |   }
146 | </style>
147 | ```
148 | 


--------------------------------------------------------------------------------
/components/load-refresh/load-refresh.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <view class="load-refresh">
  3 |         <!-- 刷新动画，可自定义，占高100rpx -->
  4 |         <view class="animation" :style="{'--color': color}">
  5 |             <view v-if="!playState" class="remind">
  6 |                 {{moving ? '↑ 松开释放' : '↓ 下拉刷新'}}
  7 |             </view>
  8 |             <view v-if="playState && refreshType === 'hollowDots'" class="refresh hollow-dots-spinner">
  9 |                 <view class="dot"></view>
 10 |                 <view class="dot"></view>
 11 |                 <view class="dot"></view>
 12 |             </view>
 13 |             <view v-if="playState && refreshType === 'halfCircle'" class="refresh half-circle-spinner">
 14 |                 <view class="circle circle-1"></view>
 15 |                 <view class="circle circle-2"></view>
 16 |             </view>
 17 |             <view v-if="playState && refreshType === 'swappingSquares'" class="refresh swapping-squares-spinner">
 18 |                 <view class="square"></view>
 19 |                 <view class="square"></view>
 20 |                 <view class="square"></view>
 21 |                 <view class="square"></view>
 22 |             </view>
 23 |         </view>
 24 |         <!-- 数据列表块 -->
 25 |         <view class="cover-container" :style="[{
 26 | 				background: backgroundCover,
 27 | 				transform: coverTransform,
 28 | 				transition: coverTransition
 29 | 			}]" @touchstart="coverTouchstart" @touchmove="coverTouchmove" @touchend="coverTouchend">
 30 |             <scroll-view scroll-y class="list" :scroll-top="scrollTop" @scrolltolower="loadMore" :style="getHeight">
 31 |                 <!-- 数据集插槽 -->
 32 |                 <slot name="content-list"></slot>
 33 |                 <!-- 上拉加载 -->
 34 |                 <view class="load-more">{{loadText}}</view>
 35 |             </scroll-view>
 36 |         </view>
 37 |     </view>
 38 | </template>
 39 | 
 40 | <script>
 41 |     export default {
 42 |         name: 'loadRefresh',
 43 |         props: {
 44 |             isRefresh: {
 45 |                 type: Boolean,
 46 |                 default: true
 47 |             },
 48 |             refreshType: {
 49 |                 type: String,
 50 |                 default: 'hollowDots'
 51 |             },
 52 |             fixedHeight: {
 53 |                 type: String,
 54 |                 default: '0'
 55 |             },
 56 |             heightReduce: {
 57 |                 type: String,
 58 |                 default: '0'
 59 |             },
 60 |             color: {
 61 |                 type: String,
 62 |                 default: '#04C4C4'
 63 |             },
 64 |             backgroundCover: {
 65 |                 type: String,
 66 |                 default: 'white'
 67 |             },
 68 |             currentPage: {
 69 |                 type: Number,
 70 |                 default: 0
 71 |             },
 72 |             totalPages: {
 73 |                 type: Number,
 74 |                 default: 0
 75 |             }
 76 |         },
 77 |         data() {
 78 |             return {
 79 |                 startY: 0,
 80 |                 moveY: 0,
 81 |                 updating: false, // 数据更新状态（true: 更新中）
 82 |                 updateType: true, // 数据更新类型（true: 下拉刷新: false: 加载更多）
 83 |                 moving: false,
 84 |                 scrollTop: -1,
 85 |                 coverTransform: 'translateY(0px)',
 86 |                 coverTransition: '0s',
 87 |                 playState: false // 动画的状态 暂停 paused/开始 running
 88 |             }
 89 |         },
 90 |         computed: {
 91 |             // 计算组件所占屏幕高度
 92 |             getHeight() {
 93 |                 // rpx = px / uni.getSystemInfoSync().windowWidth * 750
 94 |                 if (Number(this.fixedHeight)) {
 95 |                     return `height: ${this.fixedHeight}rpx;`
 96 |                 } else {
 97 |                     let height = uni.getSystemInfoSync().windowHeight - uni.upx2px(0 + this.heightReduce)
 98 |                     return `height: ${height}px;`
 99 |                 }
100 |             },
101 |             // 判断loadText，可以根据需求自定义
102 |             loadText() {
103 |                 const {
104 |                     currentPage,
105 |                     totalPages,
106 |                     updating,
107 |                     updateType
108 |                 } = this
109 |                 if (!updateType && updating) {
110 |                     return '加载中...'
111 |                 } else if (currentPage < totalPages) {
112 |                     return '上拉加载更多'
113 |                 } else {
114 |                     return '已经到底啦~'
115 |                 }
116 |             }
117 |         },
118 |         methods: {
119 |             // 根据currentPage和totalPages的值来判断 是否触发@loadMore
120 |             loadMore() {
121 |                 const {
122 |                     currentPage,
123 |                     totalPages
124 |                 } = this
125 |                 if (!this.updating && currentPage < totalPages) {
126 |                     this.updating = true
127 |                     this.updateType = false
128 |                     this.$emit('loadMore')
129 |                 }
130 |             },
131 |             // 回弹效果
132 |             coverTouchstart(e) {
133 |                 if (!this.isRefresh) {
134 |                     return
135 |                 }
136 |                 this.coverTransition = 'transform .1s linear'
137 |                 this.startY = e.touches[0].clientY
138 |             },
139 |             coverTouchmove(e) {
140 |                 if (!this.isRefresh || this.updating) {
141 |                     return
142 |                 }
143 |                 this.moveY = e.touches[0].clientY
144 |                 let moveDistance = this.moveY - this.startY
145 |                 if (moveDistance <= 50) {
146 |                     this.coverTransform = `translateY(${moveDistance}px)`
147 |                 }
148 |                 this.moving = moveDistance >= 50
149 |             },
150 |             coverTouchend() {
151 |                 if (!this.isRefresh || this.updating) {
152 |                     return
153 |                 }
154 |                 if (this.moving) {
155 |                     this.runRefresh()
156 |                 } else {
157 |                     this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)'
158 |                     this.coverTransform = 'translateY(0px)'
159 |                 }
160 |             },
161 |             runRefresh() {
162 |                 this.scrollTop = 0
163 |                 this.coverTransition = 'transform .1s linear'
164 |                 this.coverTransform = 'translateY(50px)'
165 |                 this.playState = true
166 |                 this.updating = true
167 |                 this.updateType = true
168 |                 this.$emit('refresh')
169 |             },
170 |             completed() {
171 |                 if (this.updateType) {
172 |                     // 下拉刷新
173 |                     this.moving = false
174 |                     this.scrollTop = -1
175 |                     this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)'
176 |                     this.coverTransform = 'translateY(0px)'
177 |                     setTimeout(() => {
178 |                         this.playState = false
179 |                     }, 300)
180 |                 }
181 |                 this.updating = false
182 |             }
183 |         }
184 |     }
185 | </script>
186 | 
187 | <style lang="scss" scoped>
188 |     $color: var(--color);
189 | 
190 |     .load-refresh {
191 |         margin: 0;
192 |         padding: 0;
193 |         width: 100%;
194 | 
195 |         .cover-container {
196 |             width: 100%;
197 |             margin-top: -100rpx;
198 | 
199 |             .list {
200 |                 width: 100%;
201 | 
202 |                 .load-more {
203 |                     font-size: 20rpx;
204 |                     text-align: center;
205 |                     color: #AAAAAA;
206 |                     padding: 16rpx;
207 |                 }
208 |             }
209 |         }
210 |     }
211 | 
212 |     /* 动画 */
213 |     .animation {
214 |         width: 100%;
215 |         height: 100rpx;
216 | 
217 |         .remind {
218 |             width: 100%;
219 |             height: 100rpx;
220 |             text-align: center;
221 |             line-height: 100rpx;
222 |         }
223 | 
224 |         .refresh {
225 |             width: 100%;
226 |             height: 100rpx;
227 |             display: flex;
228 |             align-items: center;
229 |             justify-content: center;
230 |             box-sizing: border-box;
231 | 
232 |             view {
233 |                 // animation-play-state: $playState!important;
234 |             }
235 |         }
236 | 
237 |         /* HollowDots  */
238 |         .hollow-dots-spinner .dot {
239 |             width: 30rpx;
240 |             height: 30rpx;
241 |             margin: 0 calc(30rpx / 2);
242 |             border: calc(30rpx / 5) solid $color;
243 |             border-radius: 50%;
244 |             float: left;
245 |             transform: scale(0);
246 |             animation: hollowDots 1000ms ease infinite 0ms;
247 |         }
248 | 
249 |         .hollow-dots-spinner .dot:nth-child(1) {
250 |             animation-delay: calc(300ms * 1);
251 |         }
252 | 
253 |         .hollow-dots-spinner .dot:nth-child(2) {
254 |             animation-delay: calc(300ms * 2);
255 |         }
256 | 
257 |         .hollow-dots-spinner .dot:nth-child(3) {
258 |             animation-delay: calc(300ms * 3);
259 |         }
260 | 
261 |         @keyframes hollowDots {
262 |             50% {
263 |                 transform: scale(1);
264 |                 opacity: 1;
265 |             }
266 | 
267 |             100% {
268 |                 opacity: 0;
269 |             }
270 |         }
271 | 
272 |         /* halfCircle  */
273 |         .half-circle-spinner .circle {
274 |             content: "";
275 |             position: absolute;
276 |             width: 60rpx;
277 |             height: 60rpx;
278 |             border-radius: 100%;
279 |             border: calc(60rpx / 10) solid transparent;
280 |         }
281 | 
282 |         .half-circle-spinner .circle.circle-1 {
283 |             border-top-color: $color;
284 |             animation: halfCircle 1s infinite;
285 |         }
286 | 
287 |         .half-circle-spinner .circle.circle-2 {
288 |             border-bottom-color: $color;
289 |             animation: halfCircle 1s infinite alternate;
290 |         }
291 | 
292 |         @keyframes halfCircle {
293 |             0% {
294 |                 transform: rotate(0deg);
295 |             }
296 | 
297 |             100% {
298 |                 transform: rotate(360deg);
299 |             }
300 |         }
301 | 
302 |         /* swappingSquares */
303 |         .swapping-squares-spinner {
304 |             position: relative;
305 |         }
306 | 
307 |         .swapping-squares-spinner .square {
308 |             height: calc(65rpx * 0.25 / 1.3);
309 |             width: calc(65rpx * 0.25 / 1.3);
310 |             animation-duration: 1000ms;
311 |             border: calc(65rpx * 0.04 / 1.3) solid $color;
312 |             margin-right: auto;
313 |             margin-left: auto;
314 |             position: absolute;
315 |             animation-iteration-count: infinite;
316 |         }
317 | 
318 |         .swapping-squares-spinner .square:nth-child(1) {
319 |             animation-name: swappingSquares-child-1;
320 |             animation-delay: 500ms;
321 |         }
322 | 
323 |         .swapping-squares-spinner .square:nth-child(2) {
324 |             animation-name: swappingSquares-child-2;
325 |             animation-delay: 0ms;
326 |         }
327 | 
328 |         .swapping-squares-spinner .square:nth-child(3) {
329 |             animation-name: swappingSquares-child-3;
330 |             animation-delay: 500ms;
331 |         }
332 | 
333 |         .swapping-squares-spinner .square:nth-child(4) {
334 |             animation-name: swappingSquares-child-4;
335 |             animation-delay: 0ms;
336 |         }
337 | 
338 |         @keyframes swappingSquares-child-1 {
339 |             50% {
340 |                 transform: translate(150%, 150%) scale(2, 2);
341 |             }
342 |         }
343 | 
344 |         @keyframes swappingSquares-child-2 {
345 |             50% {
346 |                 transform: translate(-150%, 150%) scale(2, 2);
347 |             }
348 |         }
349 | 
350 |         @keyframes swappingSquares-child-3 {
351 |             50% {
352 |                 transform: translate(-150%, -150%) scale(2, 2);
353 |             }
354 |         }
355 | 
356 |         @keyframes swappingSquares-child-4 {
357 |             50% {
358 |                 transform: translate(150%, -150%) scale(2, 2);
359 |             }
360 |         }
361 |     }
362 | </style>
363 | 


--------------------------------------------------------------------------------
/components/sofar-picker/README.md:
--------------------------------------------------------------------------------
 1 | # sofar-picker
 2 | 
 3 |    - 日期范围选择，颗粒度为`年-月`，支持`至今`选项。
 4 |    - 根据实际开发需求完成，分享出来希望有帮助。
 5 |    - 最新的项目示例代码可在[GitHub](https://github.com/JamyKing/uni-load-refresh)获取。
 6 | 
 7 | ## 使用方法
 8 | 
 9 | #### 在 `script` 中引用组件
10 | 
11 | ```
12 | import sofarPicker from '@/components/sofar-picker/sofar-picker.vue'
13 | export default {
14 |   components: {
15 |     sofarPicker
16 |   }
17 | }
18 | ```
19 | 
20 | #### 在 `template` 中使用组件
21 | 
22 | ```
23 | <sofar-picker
24 |   :visable.sync="pickerVisable"
25 |   :defaultDate="defaultDate"
26 |   :minYear="1990"
27 |   separator="."
28 |   themeColor="#10BE9D"
29 |   startText="开始时间"
30 |   endText="结束时间"
31 |   @confirm="confirm">
32 | </sofar-picker>
33 | ```
34 | 
35 | #### Props 参数说明
36 | 
37 | | 参数名 | 类型 | 默认值 | 说明 |
38 | | ------ | ------ | ------ | ------ |
39 | | visable | Boolean | false | 日期选择控件的显示/隐藏，注意使用`.sync`修饰符(true: 显示; false: 隐藏) |
40 | | defaultDate | Array | [] | 默认预设值 |
41 | | minYear | Number | 1990 | 最小年份 |
42 | | separator | String | `.` | 时间格式分隔符(例如：`-`、`/`) |
43 | | themeColor | String | #10BE9D | 选择框操作栏部分字体颜色 |
44 | | startText | String | 开始时间 | 日期范围起始处文本 |
45 | | endText | String | 结束时间 | 日期范围结束处文本 |
46 | 
47 | #### Events 事件说明
48 | 
49 | | 事件名 | 说明 | 返回值 |
50 | | ------ | ------ | ------ |
51 | | @confirm | 点击确定按钮，返回当前选择的值 | `Array`数组类型 |
52 | 
53 | #### Demo 代码示例
54 | 
55 | ```
56 | <template>
57 |   <view class="content">
58 |     <sofar-picker
59 |       :visable.sync="pickerVisable"
60 |       :defaultDate="defaultDate"
61 |       @confirm="confirm">
62 |     </sofar-picker>
63 |   </view>
64 | </template>
65 | 
66 | <script>
67 |   import sofarPicker from '@/components/sofar-picker/sofar-picker.vue'
68 |   export default {
69 |     components: {
70 |       sofarPicker
71 |     },
72 |     data() {
73 |       return {
74 |         pickerVisable: false,
75 |         defaultDate: ['2020.1', '至今']
76 |       }
77 |     },
78 |     methods: {
79 |       // 打开日期选择框
80 |       openPicker() {
81 |         this.pickerVisable = true
82 |       },
83 |       // 点击确定按钮，返回当前选择的值
84 |       confirm(date) {
85 |         console.log(date) // ['2020.6', '至今']
86 |       }
87 |     }
88 |   }
89 | </script>
90 | 
91 | <style>
92 |   .content{
93 |     width: 100%;
94 |     height: 100%;
95 |   }
96 | </style>
97 | ```
98 | 


--------------------------------------------------------------------------------
/components/sofar-picker/sofar-picker.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <view :class="{'pickerMask':visable}" @click="maskClick" @touchmove.stop.prevent="returnHandle">
  3 |         <view class="picker-box" :class="{'picker-show':visable}">
  4 |             <view class="operate-box" @touchmove.stop.prevent="returnHandle" @tap.stop="returnHandle">
  5 |                 <view class="time-box">
  6 |                     <view @click="touchSelect(0)" class="time-item" :style="{color:touchIndex?'#000000':themeColor}">
  7 |                         <text>{{startText}}</text>
  8 |                         <text>{{resultDate[0]}}</text>
  9 |                     </view>
 10 |                     <text>至</text>
 11 |                     <view @click="touchSelect(1)" class="time-item" :style="{color:touchIndex?themeColor:'#000000'}">
 12 |                         <text>{{endText}}</text>
 13 |                         <text>{{resultDate[1]}}</text>
 14 |                     </view>
 15 |                 </view>
 16 |                 <view :style="{color:themeColor}" @click="pickerConfirm">确定</view>
 17 |             </view>
 18 |             <picker-view :value="pickerValue" @change="pickerChange" class="picker-view"
 19 |                 :indicator-style="indicatorStyle" @tap.stop="returnHandle">
 20 |                 <picker-view-column>
 21 |                     <view class="picker-item" v-for="(item,index) in yearList" :key="index">
 22 |                         {{index>0||touchIndex<1 ? item+'年' : item}}</view>
 23 |                 </picker-view-column>
 24 |                 <picker-view-column>
 25 |                     <view class="picker-item" v-for="(item,index) in monthList" :key="index">
 26 |                         <text v-show="pickerValue[0]>0||touchIndex<1">{{item}}月</text>
 27 |                     </view>
 28 |                 </picker-view-column>
 29 |             </picker-view>
 30 |         </view>
 31 |     </view>
 32 | </template>
 33 | 
 34 | <script>
 35 |     export default {
 36 |         name: 'sofarPicker',
 37 |         props: {
 38 |             defaultDate: {
 39 |                 type: Array,
 40 |                 default: () => []
 41 |             },
 42 |             visable: {
 43 |                 type: Boolean,
 44 |                 default: false
 45 |             },
 46 |             minYear: {
 47 |                 type: Number,
 48 |                 default: 1990,
 49 |             },
 50 |             separator: {
 51 |                 type: String,
 52 |                 default: '.'
 53 |             },
 54 |             themeColor: {
 55 |                 type: String,
 56 |                 default: '#10BE9D'
 57 |             },
 58 |             startText: {
 59 |                 type: String,
 60 |                 default: '开始时间'
 61 |             },
 62 |             endText: {
 63 |                 type: String,
 64 |                 default: '结束时间'
 65 |             }
 66 |         },
 67 |         data() {
 68 |             const date = new Date();
 69 |             const yearList = [];
 70 |             const year = date.getFullYear();
 71 |             const monthList = [];
 72 |             const month = date.getMonth() + 1;
 73 |             for (let i = this.minYear; i <= date.getFullYear(); i++) {
 74 |                 yearList.unshift(i);
 75 |             }
 76 |             for (let i = 1; i <= 12; i++) {
 77 |                 monthList.push(i);
 78 |             }
 79 |             return {
 80 |                 indicatorStyle: 'height: 100rpx;',
 81 |                 touchIndex: 0,
 82 |                 yearList: yearList,
 83 |                 monthList: monthList,
 84 |                 year: year,
 85 |                 month: month,
 86 |                 pickerValue: [0, month - 1],
 87 |                 resultDate: []
 88 |             }
 89 |         },
 90 |         mounted() {
 91 |             this.setDate()
 92 |         },
 93 |         methods: {
 94 |             returnHandle() {},
 95 |             maskClick() {
 96 |                 this.$emit('update:visable', false)
 97 |             },
 98 |             setDate() {
 99 |                 if (this.defaultDate.length > 0) {
100 |                     let date = this.defaultDate[0]
101 |                     this.resultDate = this.defaultDate
102 |                     this.setPicker(date)
103 |                 } else {
104 |                     let startTime = this.year + this.separator + this.month
105 |                     this.resultDate = [startTime, '至今']
106 |                 }
107 |             },
108 |             setPicker(date) {
109 |                 if (date === '至今') {
110 |                     this.pickerValue = [0, 0]
111 |                 } else {
112 |                     let dateArray = date.split(this.separator)
113 |                     let yearIndex = this.yearList.indexOf(Number(dateArray[0]))
114 |                     let monthIndex = this.monthList.indexOf(Number(dateArray[1]))
115 |                     this.pickerValue = [yearIndex, monthIndex]
116 |                 }
117 |             },
118 |             getDate(date) {
119 |                 let result = ''
120 |                 let year = this.yearList[date[0]]
121 |                 let month = this.monthList[date[1]]
122 |                 if (year === '至今') {
123 |                     result = '至今'
124 |                 } else {
125 |                     result = year + this.separator + month
126 |                 }
127 |                 this.resultDate[this.touchIndex] = result
128 |             },
129 |             touchSelect(val) {
130 |                 let date = this.resultDate[val]
131 |                 if (this.touchIndex === val) {
132 |                     return
133 |                 } else {
134 |                     if (val) {
135 |                         this.yearList.unshift('至今')
136 |                     } else {
137 |                         this.yearList.splice(0, 1)
138 |                     }
139 |                     this.touchIndex = val
140 |                 }
141 |                 if (date) {
142 |                     this.setPicker(date)
143 |                 }
144 |             },
145 |             pickerChange(e) {
146 |                 this.pickerValue = e.detail.value
147 |                 this.getDate(e.detail.value)
148 |             },
149 |             pickerConfirm() {
150 |                 const {
151 |                     resultDate,
152 |                     separator
153 |                 } = this
154 |                 let nowTime = new Date().getTime()
155 |                 let startTime = new Date(resultDate[0] + separator + '1').getTime()
156 |                 let endTime = resultDate[1] === '至今' ? nowTime : new Date(resultDate[1] + separator + '1').getTime()
157 |                 if (startTime <= endTime && endTime <= nowTime) {
158 |                     this.$emit('confirm', resultDate)
159 |                     this.maskClick()
160 |                 } else {
161 |                     uni.showToast({
162 |                         title: '时间范围错误！',
163 |                         icon: 'none'
164 |                     })
165 |                 }
166 |             }
167 |         }
168 |     }
169 | </script>
170 | 
171 | <style lang="scss" scoped>
172 |     .pickerMask {
173 |         position: fixed;
174 |         z-index: 998;
175 |         top: 0;
176 |         right: 0;
177 |         left: 0;
178 |         bottom: 0;
179 |         background: rgba(0, 0, 0, 0.6);
180 |     }
181 | 
182 |     .picker-box {
183 |         position: fixed;
184 |         bottom: 0;
185 |         left: 0;
186 |         width: 100%;
187 |         transition: all 0.3s ease;
188 |         transform: translateY(100%);
189 |         z-index: 998;
190 | 
191 |         .operate-box {
192 |             display: flex;
193 |             align-items: center;
194 |             justify-content: space-between;
195 |             padding: 18rpx 30rpx;
196 |             background-color: #FFFFFF;
197 |             text-align: center;
198 |             font-size: 30rpx;
199 |             border-bottom: 2rpx solid #e5e5e5;
200 | 
201 |             .time-box {
202 |                 width: 60%;
203 |                 display: flex;
204 |                 align-items: center;
205 |                 justify-content: space-between;
206 | 
207 |                 .time-item {
208 |                     display: flex;
209 |                     flex-direction: column;
210 |                 }
211 |             }
212 |         }
213 |     }
214 | 
215 |     .picker-show {
216 |         transform: translateY(0);
217 |     }
218 | 
219 |     .picker-view {
220 |         width: 750rpx;
221 |         height: 600rpx;
222 |         background-color: #FFFFFF;
223 | 
224 |         .picker-item {
225 |             height: 100rpx;
226 |             display: flex;
227 |             align-items: center;
228 |             justify-content: center;
229 |             text-align: center;
230 |         }
231 |     }
232 | </style>
233 | 


--------------------------------------------------------------------------------
/components/structure-cascade/README.md:
--------------------------------------------------------------------------------
  1 | # structure-cascade
  2 | 
  3 |    - 树形结构数据选择组件。
  4 |    - 适用于一些多级部门、组织架构类的数据选择。
  5 |    - 根据实际开发需求整理出来的，有需要的可以进行二次开发。
  6 |    - 最新的项目示例代码可在[GitHub](https://github.com/JamyKing/uni-load-refresh)获取。
  7 | 
  8 | ## 使用方法
  9 | 
 10 | #### 在 `script` 中引用组件
 11 | 
 12 | ```
 13 | import structureCascade from '@/components/structure-cascade/structure-cascade.vue'
 14 | export default {
 15 |   components: {
 16 |     structureCascade
 17 |   }
 18 | }
 19 | ```
 20 | 
 21 | #### 在 `template` 中使用组件
 22 | 
 23 | ```
 24 | <structure-cascade
 25 |     ref="strCascade"
 26 |     v-model="strResults"
 27 |     topTitle="组织架构"
 28 |     valueField="id"
 29 |     labelField="name"
 30 |     :checkIcon="require('@/static/icons/icon_gou.png')"
 31 |     :moreIcon="require('@/static/icons/ico_more@2x.png')"
 32 |     :treeData="treeData">
 33 | </structure-cascade>
 34 | ```
 35 | 
 36 | #### Props 参数说明
 37 | 
 38 | | 参数名 | 类型 | 默认值 | 说明 |
 39 | | ------ | ------ | ------ | ------ |
 40 | | value / v-model | Array | [] | 绑定值 |
 41 | | topTitle | String | 组织架构 | 头部顶级索引名称 |
 42 | | treeData | Array | [] | 树形结构数据（参考如下Demo） |
 43 | | isRadio | Boolean | true | 是否为单选 |
 44 | | selectMax | Number | 0 | 多选时最大选择数，仅在`isRadio`为`false`时生效(0: 不限) |
 45 | | valueField | String | id | 自定义`value`属性名 |
 46 | | labelField | String | name | 自定义`label`属性名 |
 47 | | checkIcon | String | '' | 数据勾选时的icon展示 |
 48 | | moreIcon | String | '' | 当前节点存在字节点时的icon展示 |
 49 | 
 50 | #### Methods 组件内方法
 51 | 
 52 | | 方法名 | 说明 | 参数 | 使用 |
 53 | | ------ | ------ | ------ | ------ |
 54 | | getFilterData(keyword, treeData) | 根据关键词模糊查询，返回一维数组格式的节点集 | `keyword`：关键词，对应各节点的`labelField`字段。 `treeData`：树形结构数据(不传则默认为`treeData`) | this.$refs.strCascade.getFilterData('一级') |
 55 | 
 56 | #### Notes 注意事项
 57 | 
 58 |   - 该组件尚不支持父子节点联动选中。
 59 |   - 图片路径请使用`require`，例如：`:checkIcon="require('@/static/icons/icon_gou.png')"`。
 60 |   - 设置默认值选中时，需要`valueField`和`labelField`两个属性参数。
 61 |   - 树形结构数据中子节点需要有`parentId`属性参数，有默认值选中时回显需要使用到。
 62 |   - 如果对您有帮助，请鼓励支持一下，[![GitHub stars](https://img.shields.io/github/stars/JamyKing/uni-load-refresh?style=falt)](https://github.com/JamyKing/uni-load-refresh)。
 63 | 
 64 | #### Demo 代码示例
 65 | 
 66 | ```
 67 | <template>
 68 |   <view>
 69 |     <structure-cascade
 70 |       ref="strCascade"
 71 |       v-model="strResults"
 72 |       topTitle="组织架构"
 73 |       valueField="id"
 74 |       labelField="name"
 75 |       :checkIcon="require('@/static/icons/icon_gou.png')"
 76 |       :moreIcon="require('@/static/icons/ico_more@2x.png')"
 77 |       :treeData="treeData">
 78 |     </structure-cascade>
 79 |   </view>
 80 | </template>
 81 | 
 82 | <script>
 83 |   import structureCascade from '@/components/structure-cascade/structure-cascade.vue'
 84 |   export default {
 85 |     components: {
 86 |       structureCascade
 87 |     },
 88 |     data() {
 89 |       return {
 90 |         treeData: [
 91 |           {
 92 |             id: 1,
 93 |             name: '一级_1',
 94 |             children: [
 95 |               {
 96 |                 id: 2,
 97 |                 name: '二级_1-1',
 98 |                 parentId: 1
 99 |               },
100 |               {
101 |                 id: 3,
102 |                 name: '二级_1-2',
103 |                 parentId: 1
104 |               }
105 |             ]
106 |           }
107 |         ], // 树形结构
108 |         strResults: [
109 |           {
110 |             id: 3,
111 |             name: '二级_1-2'
112 |           }
113 |         ] // 默认选中回显
114 |       }
115 |     }
116 |   }
117 | </script>
118 | ```
119 | 


--------------------------------------------------------------------------------
/components/structure-cascade/structure-cascade.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <view class="container">
  3 |         <view class="header">
  4 |             <scroll-view class="nav-tree" scroll-x enable-flex="true" :scroll-left="scrollLeft">
  5 |                 <view v-for="(item, index) in navTreeList" :key="item[valueField]" class="nav-tree-item">
  6 |                     <text :class="{special: index < navLen - 1 }" class="text" @click="handleNavgiateToDept(index)">
  7 |                         {{ item[labelField] }}
  8 |                     </text>
  9 |                     <text v-if="index < navLen - 1" class="right-text"> > </text>
 10 |                 </view>
 11 |             </scroll-view>
 12 |         </view>
 13 |         <view class="content">
 14 |             <view class="dept-list">
 15 |                 <view v-for="item in listData" :key="item[valueField]" class="dept-list-item"
 16 |                     @click="handleToChild(item)">
 17 |                     <block v-if="checkIcon">
 18 |                         <image v-if="item.checked" :src="checkIcon" class="check-icon" @click.stop="handleChoose(item)"></image>
 19 |                         <view v-else class="checkbox" @click.stop="handleChoose(item)"></view>
 20 |                     </block>
 21 |                     <view v-if="!checkIcon" :class="{active: item.checked }" class="checkbox"
 22 |                         @click.stop="handleChoose(item)"></view>
 23 |                     <view class="text">{{ item[labelField] }}</view>
 24 |                     <image v-if="moreIcon && !isEmpty(item.children)" :src="moreIcon" class="more-icon"></image>
 25 |                     <text v-if="!moreIcon && !isEmpty(item.children)" class="more-text"> > </text>
 26 |                 </view>
 27 |             </view>
 28 |         </view>
 29 |         <view class="bottom-gap"></view>
 30 |     </view>
 31 | </template>
 32 | 
 33 | <script>
 34 |     export default {
 35 |         name: 'structureCascade',
 36 |         props: {
 37 |             value: {
 38 |                 type: Array,
 39 |                 default: () => []
 40 |             },
 41 |             treeData: {
 42 |                 type: Array,
 43 |                 default: () => []
 44 |             },
 45 |             isRadio: {
 46 |                 type: Boolean,
 47 |                 default: true
 48 |             },
 49 |             selectMax: {
 50 |                 type: Number,
 51 |                 default: 0
 52 |             },
 53 |             topTitle: {
 54 |                 type: String,
 55 |                 default: '组织架构'
 56 |             },
 57 |             valueField: {
 58 |                 type: String,
 59 |                 default: 'id'
 60 |             },
 61 |             labelField: {
 62 |                 type: String,
 63 |                 default: 'name'
 64 |             },
 65 |             checkIcon: {
 66 |                 type: String,
 67 |                 default: ''
 68 |             },
 69 |             moreIcon: {
 70 |                 type: String,
 71 |                 default: ''
 72 |             }
 73 |         },
 74 |         data() {
 75 |             return {
 76 |                 listData: [],
 77 |                 scrollLeft: 0,
 78 |                 navTreeList: [],
 79 |                 selectedList: []
 80 |             }
 81 |         },
 82 |         computed: {
 83 |             navLen() {
 84 |                 // 处理动态增减导航项时小程序无法渲染样式问题
 85 |                 return this.navTreeList.length
 86 |             }
 87 |         },
 88 |         watch: {
 89 |             topTitle: {
 90 |                 handler(val) {
 91 |                     this.navTreeList = [{
 92 |                         [this.valueField]: 0,
 93 |                         [this.labelField]: this.topTitle
 94 |                     }]
 95 |                 },
 96 |                 deep: true,
 97 |                 immediate: true
 98 |             },
 99 |             treeData: {
100 |                 handler(val) {
101 |                     if (!this.isEmpty(val)) {
102 |                         this.initList()
103 |                     }
104 |                 },
105 |                 deep: true,
106 |                 immediate: true
107 |             }
108 |         },
109 |         methods: {
110 |             initList() {
111 |                 if (this.isEmpty(this.value)) {
112 |                     this.listData = this.deepCopy(this.treeData)
113 |                 } else {
114 |                     if (this.isRadio) {
115 |                         const topList = this.getParentNodes(this.treeData, this.value[0])
116 |                         if (topList.length) {
117 |                             this.navTreeList.push(...topList)
118 |                             const length = this.navTreeList.length
119 |                             this.listData = this.deepCopy(this.navTreeList[length - 1].children)
120 |                             this.scrollLeft = length * 100
121 |                         } else {
122 |                             this.listData = this.deepCopy(this.treeData)
123 |                         }
124 |                     } else {
125 |                         this.listData = this.deepCopy(this.treeData)
126 |                     }
127 |                     this.selectedList = this.deepCopy(this.value)
128 |                 }
129 |                 this.updateChecked()
130 |             },
131 |             updateChecked() {
132 |                 const key = this.valueField
133 |                 const keys = (this.selectedList || []).map(o => o[key])
134 |                 this.listData.forEach(item => {
135 |                     if (keys.includes(item[key])) {
136 |                         this.$set(item, 'checked', true)
137 |                     } else {
138 |                         this.$set(item, 'checked', false)
139 |                     }
140 |                 })
141 |             },
142 |             handleToSearch(keyword) {
143 |                 if (keyword) {
144 |                     this.listData = this.deepCopy(this.getFilterData(keyword))
145 |                 } else {
146 |                     this.listData = this.deepCopy(this.treeData)
147 |                 }
148 |             },
149 |             // 跳转到子项
150 |             handleToChild(item) {
151 |                 if (!this.isEmpty(item.children)) {
152 |                     this.listData = this.deepCopy(item.children)
153 |                     this.navTreeList.push({
154 |                         [this.valueField]: item[this.valueField],
155 |                         [this.labelField]: item[this.labelField]
156 |                     })
157 |                     this.scrollLeft += 100
158 |                     this.updateChecked()
159 |                 } else {
160 |                     this.handleChoose(item)
161 |                 }
162 |             },
163 |             // 导航切换
164 |             handleNavgiateToDept(index) {
165 |                 if (index >= this.navTreeList.length - 1) return
166 |                 const item = this.navTreeList[index]
167 |                 this.navTreeList.splice(index + 1)
168 |                 this.calculateFun(this.treeData, this.navTreeList)
169 |             },
170 |             calculateFun(tree, arr) {
171 |                 arr = arr.slice(1)
172 |                 if (arr.length) {
173 |                     for (let item of tree) {
174 |                         if (item[this.valueField] === arr[0][this.valueField]) {
175 |                             this.calculateFun(item.children, arr)
176 |                             break
177 |                         }
178 |                     }
179 |                 } else {
180 |                     this.listData = this.deepCopy(tree)
181 |                     this.updateChecked()
182 |                 }
183 |             },
184 |             // 切换选中
185 |             handleChoose(item) {
186 |                 this.$set(item, 'checked', !item.checked)
187 |                 if (this.isRadio) {
188 |                     if (item.checked) {
189 |                         this.selectedList = [{
190 |                             [this.valueField]: item[this.valueField],
191 |                             [this.labelField]: item[this.labelField]
192 |                         }]
193 |                         this.updateChecked()
194 |                     } else {
195 |                         this.selectedList = []
196 |                     }
197 |                 } else {
198 |                     if (item.checked) {
199 |                         // 勾选
200 |                         if (this.selectMax !== 0 && this.selectedList.length >= this.selectMax) {
201 |                             this.selectedList.splice(this.selectMax - 1)
202 |                         }
203 |                         this.selectedList.push({
204 |                             [this.valueField]: item[this.valueField],
205 |                             [this.labelField]: item[this.labelField]
206 |                         })
207 |                         this.updateChecked()
208 |                     } else {
209 |                         // 取消勾选
210 |                         const findIndex = this.selectedList.findIndex(o => o[this.valueField] === item[this.valueField])
211 |                         if (findIndex !== -1) {
212 |                             this.selectedList.splice(findIndex, 1)
213 |                         }
214 |                     }
215 |                 }
216 |                 this.$nextTick(() => {
217 |                     this.$emit('input', this.selectedList)
218 |                 })
219 |             },
220 |             isEmpty(data) {
221 |                 if (data === null) return true
222 |                 if (data === undefined) return true
223 |                 if (Object.prototype.toString.call(data) === '[object Array]') return data.length === 0
224 |                 if (Object.prototype.toString.call(data) === '[object Object]') return Object.keys(data).length === 0
225 |                 if (typeof data === 'string') return data.trim() === ''
226 |                 return false
227 |             },
228 |             deepCopy(source) {
229 |                 if (typeof source === 'object') {
230 |                     var sourceCopy = Array.isArray(source) ? [] : {}
231 |                     for (var item in source) {
232 |                         if (!source[item]) {
233 |                             sourceCopy[item] = source[item]
234 |                         } else {
235 |                             sourceCopy[item] = typeof source[item] === 'object' ? this.deepCopy(source[item]) : source[item]
236 |                         }
237 |                     }
238 |                     return sourceCopy
239 |                 }
240 |                 return source
241 |             },
242 |             // 获取目标节点aim的所有祖宗节点 不包括aim本身
243 |             getParentNodes(tree, aim) {
244 |                 let temp = [] //结果对象
245 |                 const valueField = this.valueField
246 |                 let forFn = function(arr, key) {
247 |                     for (let i = 0; i < arr.length; i++) {
248 |                         let item = arr[i]
249 |                         if (item[valueField] === key) {
250 |                             forFn(tree, item.parentId)
251 |                             if (item[valueField] !== aim[valueField]) {
252 |                                 temp.push(item)
253 |                             }
254 |                             break
255 |                         } else {
256 |                             if (item.children) {
257 |                                 forFn(item.children, key)
258 |                             }
259 |                         }
260 |                     }
261 |                 }
262 |                 forFn(tree, aim[this.valueField])
263 |                 return temp
264 |             },
265 |             // 根据检索条件返回一维数组
266 |             getFilterData(keyword, data = this.treeData) {
267 |                 var result = []
268 |                 const valueField = this.valueField
269 |                 const labelField = this.labelField
270 |                 var fn = function(data) {
271 |                     if (Array.isArray(data)) {
272 |                         data.forEach(item => {
273 |                             if (item[labelField].includes(keyword)) {
274 |                                 result.push({
275 |                                     [valueField]: item[valueField],
276 |                                     [labelField]: item[labelField]
277 |                                 })
278 |                             }
279 |                             if (item.children) {
280 |                                 fn(item.children)
281 |                             }
282 |                         })
283 |                     }
284 |                 }
285 |                 fn(data)
286 |                 return result
287 |             }
288 |         }
289 |     }
290 | </script>
291 | 
292 | <style lang="scss" scoped>
293 |     .container {
294 |         width: 100%;
295 |         height: 100%;
296 |         display: flex;
297 |         flex-direction: column;
298 |         overflow: hidden;
299 | 
300 |         .header {
301 |             width: 100%;
302 |             padding: 30rpx 36rpx;
303 |             background-color: white;
304 | 
305 |             .nav-tree {
306 |                 width: 678rpx;
307 |                 height: 40rpx;
308 |                 display: flex;
309 |                 white-space: nowrap;
310 | 
311 |                 .nav-tree-item {
312 |                     flex-shrink: 0;
313 |                     font-size: 28rpx;
314 |                     color: #333333;
315 |                     display: flex;
316 |                     align-items: center;
317 | 
318 |                     .special {
319 |                         color: #1677FF;
320 |                     }
321 | 
322 |                     .right-text {
323 |                         color: #333333;
324 |                         margin: 0 16rpx 6rpx;
325 |                     }
326 | 
327 |                     .right-icon {
328 |                         width: 36rpx;
329 |                         height: 36rpx;
330 |                         margin: 0 10rpx;
331 |                     }
332 |                 }
333 |             }
334 |         }
335 | 
336 |         .content {
337 |             padding: 0 36rpx;
338 |             background-color: white;
339 | 
340 |             .dept-list {
341 |                 display: flex;
342 |                 flex-direction: column;
343 | 
344 |                 .dept-list-item {
345 |                     font-size: 28rpx;
346 |                     padding: 30rpx 0;
347 |                     display: flex;
348 |                     align-items: center;
349 |                     justify-content: flex-start;
350 |                     border-top: 1rpx solid #EEEEEE;
351 | 
352 |                     .checkbox {
353 |                         width: 36rpx;
354 |                         height: 36rpx;
355 |                         text-align: center;
356 |                         border: 4rpx solid #A5ADBA;
357 |                         border-radius: 50%;
358 |                         display: inline-flex;
359 |                         align-items: center;
360 |                         justify-content: center;
361 |                         box-sizing: border-box;
362 | 
363 |                         &.active {
364 |                             border-color: #1677FF;
365 |                             background-color: #1677FF;
366 |                         }
367 |                     }
368 | 
369 |                     .check-icon {
370 |                         width: 36rpx;
371 |                         height: 36rpx;
372 |                     }
373 | 
374 |                     .text {
375 |                         flex: 1;
376 |                         margin-left: 36rpx;
377 |                         overflow: hidden;
378 |                         white-space: nowrap;
379 |                         text-overflow: ellipsis;
380 |                     }
381 | 
382 |                     .more-icon {
383 |                         width: 40rpx;
384 |                         height: 40rpx;
385 |                         margin-right: 15rpx;
386 |                     }
387 | 
388 |                     .more-text {
389 |                         color: #919191;
390 |                     }
391 |                 }
392 |             }
393 |         }
394 | 
395 |         .bottom-gap {
396 |             width: 100%;
397 |             height: 200rpx;
398 |         }
399 | 
400 |     }
401 | </style>


--------------------------------------------------------------------------------
/components/term-picker/README.md:
--------------------------------------------------------------------------------
  1 | # term-picker
  2 | 
  3 |    - 日期范围选择，颗粒度为`年-月-日`。
  4 |    - 根据实际开发需求完成，分享出来希望有帮助。
  5 |    - 最新的项目示例代码可在[GitHub](https://github.com/JamyKing/uni-load-refresh)获取。
  6 | 
  7 | ## 使用方法
  8 | 
  9 | #### 在 `script` 中引用组件
 10 | 
 11 | ```
 12 | import termPicker from '@/components/term-picker/term-picker.vue'
 13 | export default {
 14 |   components: {
 15 |     termPicker
 16 |   }
 17 | }
 18 | ```
 19 | 
 20 | #### 在 `template` 中使用组件
 21 | 
 22 | ```
 23 | <term-picker
 24 |   :visable.sync="pickerVisable"
 25 |   :defaultDate="defaultDate"
 26 |   :minYear="1990"
 27 |   :timeLimit="false"
 28 |   :deferYear="0"
 29 |   themeColor="#10BE9D"
 30 |   startText="开始时间"
 31 |   endText="结束时间"
 32 |   @confirm="confirm">
 33 | </term-picker>
 34 | ```
 35 | 
 36 | #### Props 参数说明
 37 | 
 38 | | 参数名 | 类型 | 默认值 | 说明 |
 39 | | ------ | ------ | ------ | ------ |
 40 | | visable | Boolean | false | 日期选择控件的显示/隐藏，注意使用`.sync`修饰符(true: 显示; false: 隐藏) |
 41 | | defaultDate | Array | [] | 默认预设值(比如:`['2021-06-01', '2021-07-01']`) |
 42 | | minYear | Number | 1990 | 最小年份 |
 43 | | timeLimit | Boolean | false | 日期区间限制(true: 限制结束日期`<=`当前日期; false: 不限制) |
 44 | | deferYear | Number | 0 | 年份选项顺延数，仅当`timeLimit`为`false`时生效(举个栗子: `deferYear = 1`, 则年份选项的最大值为: `当前年份 + deferYear`) |
 45 | | themeColor | String | #10BE9D | 选择框操作栏部分字体颜色 |
 46 | | startText | String | 开始时间 | 日期范围起始处文本 |
 47 | | endText | String | 结束时间 | 日期范围结束处文本 |
 48 | 
 49 | #### Events 事件说明
 50 | 
 51 | | 事件名 | 说明 | 返回值 |
 52 | | ------ | ------ | ------ |
 53 | | @confirm | 点击确定按钮，返回当前选择的值 | `Array`数组类型 |
 54 | 
 55 | #### Demo 代码示例
 56 | 
 57 | ```
 58 | <template>
 59 |   <view class="content">
 60 |     <term-picker
 61 |       :visable.sync="pickerVisable"
 62 |       :defaultDate="defaultDate"
 63 |       @confirm="confirm">
 64 |     </term-picker>
 65 |   </view>
 66 | </template>
 67 | 
 68 | <script>
 69 |   import sofarPicker from '@/components/term-picker/term-picker.vue'
 70 |   export default {
 71 |     components: {
 72 |       sofarPicker
 73 |     },
 74 |     data() {
 75 |       return {
 76 |         pickerVisable: false,
 77 |         defaultDate: ['2020-01-01', '2021-01-01']
 78 |       }
 79 |     },
 80 |     methods: {
 81 |       // 打开日期选择框
 82 |       openPicker() {
 83 |         this.pickerVisable = true
 84 |       },
 85 |       // 点击确定按钮，返回当前选择的值
 86 |       confirm(date) {
 87 |         console.log(date) // ['2021-06-01', '2021-07-01']
 88 |       }
 89 |     }
 90 |   }
 91 | </script>
 92 | 
 93 | <style>
 94 |   .content{
 95 |     width: 100%;
 96 |     height: 100%;
 97 |   }
 98 | </style>
 99 | ```
100 | 


--------------------------------------------------------------------------------
/components/term-picker/term-picker.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <view :class="{'pickerMask':visable}" @click="maskClick" @touchmove.stop.prevent="returnHandle">
  3 |         <view class="picker-box" :class="{'picker-show':visable}">
  4 |             <view class="operate-box" @touchmove.stop.prevent="returnHandle" @tap.stop="returnHandle">
  5 |                 <view class="time-box">
  6 |                     <view @click="touchSelect(0)" class="time-item" :style="{color:touchIndex?'#000000':themeColor}">
  7 |                         <text>{{startText}}</text>
  8 |                         <text>{{resultDate[0]}}</text>
  9 |                     </view>
 10 |                     <text>至</text>
 11 |                     <view @click="touchSelect(1)" class="time-item" :style="{color:touchIndex?themeColor:'#000000'}">
 12 |                         <text>{{endText}}</text>
 13 |                         <text>{{resultDate[1]}}</text>
 14 |                     </view>
 15 |                 </view>
 16 |                 <view :style="{color:themeColor}" @click="pickerConfirm">确定</view>
 17 |             </view>
 18 |             <picker-view :value="pickerValue" @change="pickerChange" class="picker-view"
 19 |                 :indicator-style="indicatorStyle" @tap.stop="returnHandle">
 20 |                 <picker-view-column>
 21 |                     <view class="picker-item" v-for="(item, index) in years" :key="index">{{item}}年</view>
 22 |                 </picker-view-column>
 23 |                 <picker-view-column>
 24 |                     <view class="picker-item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
 25 |                 </picker-view-column>
 26 |                 <picker-view-column v-if="days.length > 0">
 27 |                     <view class="picker-item" v-for="(item, index) in days" :key="index">{{ item }}日</view>
 28 |                 </picker-view-column>
 29 |             </picker-view>
 30 |         </view>
 31 |     </view>
 32 | </template>
 33 | <script>
 34 |     export default {
 35 |         name: 'termPicker',
 36 |         props: {
 37 |             visable: {
 38 |                 type: Boolean,
 39 |                 default: false
 40 |             },
 41 |             defaultDate: {
 42 |                 type: Array,
 43 |                 default: () => []
 44 |             },
 45 |             minYear: {
 46 |                 type: Number,
 47 |                 default: 1990,
 48 |             },
 49 |             timeLimit: {
 50 |                 type: Boolean,
 51 |                 default: false
 52 |             },
 53 |             deferYear: {
 54 |                 type: Number,
 55 |                 default: 0,
 56 |             },
 57 |             themeColor: {
 58 |                 type: String,
 59 |                 default: '#10BE9D'
 60 |             },
 61 |             startText: {
 62 |                 type: String,
 63 |                 default: '开始时间'
 64 |             },
 65 |             endText: {
 66 |                 type: String,
 67 |                 default: '结束时间'
 68 |             }
 69 |         },
 70 |         data() {
 71 |             const date = new Date();
 72 |             const years = [];
 73 |             const year = date.getFullYear();
 74 |             const months = [];
 75 |             const month = date.getMonth() + 1;
 76 |             const day = date.getDate();
 77 |             const maxYear = this.timeLimit ? year : year + this.deferYear
 78 |             for (let i = this.minYear; i <= maxYear; i++) {
 79 |                 years.push(i);
 80 |             }
 81 |             for (let i = 1; i <= 12; i++) {
 82 |                 months.push(i);
 83 |             }
 84 |             return {
 85 |                 indicatorStyle: 'height: 100rpx;',
 86 |                 touchIndex: 0,
 87 |                 year,
 88 |                 month,
 89 |                 day,
 90 |                 years,
 91 |                 months,
 92 |                 days: [],
 93 |                 pickerValue: [],
 94 |                 resultDate: []
 95 |             };
 96 |         },
 97 |         mounted() {
 98 |             this.setDate()
 99 |         },
100 |         methods: {
101 |             returnHandle() {},
102 |             setDate() {
103 |                 if (this.defaultDate.length > 0) {
104 |                     let date = this.defaultDate[0]
105 |                     this.resultDate = this.defaultDate
106 |                     this.setPicker(date)
107 |                 } else {
108 |                     let month = this.month < 10 ? '0' + this.month : this.month
109 |                     let day = this.day < 10 ? '0' + this.day : this.day
110 |                     let nowTime = this.year + '-' + month + '-' + day
111 |                     this.resultDate = [nowTime, nowTime]
112 |                     this.setPicker(nowTime)
113 |                 }
114 |             },
115 |             setPicker(date) {
116 |                 const splitVal = date.split('-')
117 |                 let year = this.years.indexOf(Number(splitVal[0]))
118 |                 let month = Number(splitVal[1]) - 1
119 |                 let day = Number(splitVal[2]) - 1
120 |                 this.pickerChange({
121 |                     detail: {
122 |                         value: [year, month, day]
123 |                     }
124 |                 })
125 |             },
126 |             touchSelect(val) {
127 |                 let date = this.resultDate[val]
128 |                 this.touchIndex = val
129 |                 this.setPicker(date)
130 |             },
131 |             getDateTime(date) {
132 |                 let year = this.years[date[0]]
133 |                 let month = this.months[date[1]]
134 |                 let day = this.days[date[2]]
135 |                 if (month < 10) {
136 |                     month = '0' + month
137 |                 }
138 |                 if (day < 10) {
139 |                     day = '0' + day
140 |                 }
141 |                 this.resultDate[this.touchIndex] = year + '-' + month + '-' + day
142 |             },
143 |             pickerChange(e) {
144 |                 const currents = e.detail.value
145 |                 if (currents[1] + 1 === 2) {
146 |                     this.days = []
147 |                     if (
148 |                         ((currents[0] + this.minYear) % 4 === 0 &&
149 |                             (currents[0] + this.minYear) % 100 !== 0) ||
150 |                         (currents[0] + this.minYear) % 400 === 0
151 |                     ) {
152 |                         for (let i = 1; i < 30; i++) {
153 |                             this.days.push(i)
154 |                         }
155 |                     } else {
156 |                         for (let i = 1; i < 29; i++) {
157 |                             this.days.push(i)
158 |                         }
159 |                     }
160 |                 } else if ([4, 6, 9, 11].some((item) => currents[1] + 1 === item)) {
161 |                     this.days = []
162 |                     for (let i = 1; i < 31; i++) {
163 |                         this.days.push(i)
164 |                     }
165 |                 } else if (
166 |                     [1, 3, 5, 7, 8, 10, 12].some((item) => currents[1] + 1 === item)
167 |                 ) {
168 |                     this.days = []
169 |                     for (let i = 1; i < 32; i++) {
170 |                         this.days.push(i)
171 |                     }
172 |                 }
173 |                 this.pickerValue = currents
174 |                 this.getDateTime(currents)
175 |             },
176 |             maskClick() {
177 |                 this.$emit('update:visable', false)
178 |             },
179 |             pickerConfirm() {
180 |                 const {
181 |                     resultDate,
182 |                     timeLimit
183 |                 } = this
184 |                 let startTime = new Date(resultDate[0]).getTime()
185 |                 let endTime = new Date(resultDate[1]).getTime()
186 |                 let nowTime = timeLimit ? new Date().getTime() : endTime
187 |                 if (startTime <= endTime && endTime <= nowTime) {
188 |                     this.$emit('confirm', resultDate)
189 |                     this.maskClick()
190 |                 } else {
191 |                     uni.showToast({
192 |                         title: '时间范围不正确！',
193 |                         icon: 'none'
194 |                     })
195 |                 }
196 |             }
197 |         }
198 |     }
199 | </script>
200 | 
201 | <style lang="scss" scoped>
202 |     .pickerMask {
203 |         position: fixed;
204 |         z-index: 998;
205 |         top: 0;
206 |         right: 0;
207 |         left: 0;
208 |         bottom: 0;
209 |         background: rgba(0, 0, 0, 0.6);
210 |     }
211 | 
212 |     .picker-box {
213 |         position: fixed;
214 |         bottom: 0;
215 |         left: 0;
216 |         width: 100%;
217 |         transition: all 0.3s ease;
218 |         transform: translateY(100%);
219 |         z-index: 998;
220 | 
221 |         .operate-box {
222 |             display: flex;
223 |             align-items: center;
224 |             justify-content: space-between;
225 |             padding: 18rpx 30rpx;
226 |             background-color: #FFFFFF;
227 |             text-align: center;
228 |             font-size: 30rpx;
229 |             border-bottom: 2rpx solid #e5e5e5;
230 | 
231 |             .time-box {
232 |                 width: 60%;
233 |                 display: flex;
234 |                 align-items: center;
235 |                 justify-content: space-between;
236 | 
237 |                 .time-item {
238 |                     display: flex;
239 |                     flex-direction: column;
240 |     			         }
241 |             }
242 |         }
243 |     }
244 | 
245 |     .picker-show {
246 |         transform: translateY(0);
247 |     }
248 | 
249 |     .picker-view {
250 |         width: 750rpx;
251 |         height: 600rpx;
252 |         background-color: #FFFFFF;
253 | 
254 |         .picker-item {
255 |             height: 100rpx;
256 |             display: flex;
257 |             align-items: center;
258 |             justify-content: center;
259 |             text-align: center;
260 |         }
261 |     }
262 | </style>
263 | 


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App'
 3 | 
 4 | const request = (params = {}) => {
 5 |     return new Promise((resolve, reject) => {
 6 |         uni.showLoading({
 7 |             title: params.loadText || 'Loading',
 8 |             mask: true
 9 |         })
10 |         uni.request({
11 |             url: params.url,
12 |             method: params.method,
13 |             data: {
14 |                 ...params.data
15 |             },
16 |             header: {
17 |                 'Content-Type': 'application/json; charset=UTF-8'
18 |             },
19 |             timeout: 5000,
20 |             success: (res) => {
21 |                 resolve(res.data)
22 |             },
23 |             fail: (err) => {
24 |                 reject(err)
25 |             },
26 |             complete: () => {
27 |                 uni.hideLoading()
28 |             }
29 |         })
30 |     })
31 | }
32 | 
33 | Vue.config.productionTip = false
34 | Vue.prototype.$api = {
35 |     request
36 | };
37 | 
38 | App.mpType = 'app'
39 | 
40 | const app = new Vue({
41 |     ...App
42 | })
43 | app.$mount()
44 | 


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name" : "uni-load-refresh",
 3 |     "appid" : "__UNI__B809977",
 4 |     "description" : "",
 5 |     "versionName" : "2.1.1",
 6 |     "versionCode" : "211",
 7 |     "transformPx" : false,
 8 |     /* 5+App特有相关 */
 9 |     "app-plus" : {
10 |         "usingComponents" : true,
11 |         "nvueCompiler" : "uni-app",
12 |         "compilerVersion" : 3,
13 |         "splashscreen" : {
14 |             "alwaysShowBeforeRender" : true,
15 |             "waiting" : true,
16 |             "autoclose" : true,
17 |             "delay" : 0
18 |         },
19 |         /* 模块配置 */
20 |         "modules" : {},
21 |         /* 应用发布信息 */
22 |         "distribute" : {
23 |             /* android打包配置 */
24 |             "android" : {
25 |                 "permissions" : [
26 |                     "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
27 |                     "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
28 |                     "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
29 |                     "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
30 |                     "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
31 |                     "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
32 |                     "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
33 |                     "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
34 |                     "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
35 |                     "<uses-permission android:name=\"android.permission.CAMERA\"/>",
36 |                     "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
37 |                     "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
38 |                     "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
39 |                     "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
40 |                     "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
41 |                     "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
42 |                     "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
43 |                     "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
44 |                     "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
45 |                     "<uses-feature android:name=\"android.hardware.camera\"/>",
46 |                     "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
47 |                     "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
48 |                 ]
49 |             },
50 |             /* ios打包配置 */
51 |             "ios" : {},
52 |             /* SDK配置 */
53 |             "sdkConfigs" : {}
54 |         }
55 |     },
56 |     /* 快应用特有相关 */
57 |     "quickapp" : {},
58 |     /* 小程序特有相关 */
59 |     "mp-weixin" : {
60 |         "appid" : "",
61 |         "setting" : {
62 |             "urlCheck" : false
63 |         },
64 |         "usingComponents" : true
65 |     },
66 |     "mp-alipay" : {
67 |         "usingComponents" : true
68 |     },
69 |     "mp-baidu" : {
70 |         "usingComponents" : true
71 |     },
72 |     "mp-toutiao" : {
73 |         "usingComponents" : true
74 |     },
75 |     "uniStatistics" : {
76 |         "enable" : false
77 |     }
78 | }
79 | 


--------------------------------------------------------------------------------
/pages.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "pages": [{
 3 |             "path": "pages/guide/index",
 4 |             "style": {
 5 |                 "navigationBarTitleText": "导航"
 6 |             }
 7 |         },
 8 |         {
 9 |             "path": "pages/loadRefresh/index",
10 |             "style": {
11 |                 "navigationBarTitleText": "load-refresh 组件"
12 |             }
13 |         },
14 |         {
15 |             "path": "pages/loadRefresh/tabs",
16 |             "style": {
17 |                 "navigationBarTitleText": "tabs+swiper 全屏选项卡"
18 |             }
19 |         },
20 |         {
21 |             "path": "pages/sofarPicker/index",
22 |             "style": {
23 |                 "navigationBarTitleText": "sofar-picker 组件"
24 |             }
25 |         },
26 |         {
27 |             "path": "pages/termPicker/index",
28 |             "style": {
29 |                 "navigationBarTitleText": "term-picker 组件"
30 |             }
31 |         },
32 |         {
33 |             "path": "pages/structureCascade/index",
34 |             "style": {
35 |                 "navigationBarTitleText": "多级树形选择 组件"
36 |             }
37 |         }
38 |     ],
39 |     "globalStyle": {
40 |         "navigationBarTextStyle": "black",
41 |         "navigationBarTitleText": "load-refresh",
42 |         "navigationBarBackgroundColor": "#FFFFFF",
43 |         "backgroundColor": "#F8F8F8"
44 |     }
45 | }
46 | 


--------------------------------------------------------------------------------
/pages/guide/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <view>
 3 |         <view class="menu-box">
 4 |             <view class="menu-item" @click="navTo('/pages/loadRefresh/index')">loadRefresh 上滑加载下拉刷新</view>
 5 |             <view class="menu-item" @click="navTo('/pages/loadRefresh/tabs')">tabs + swiper 全屏选项卡</view>
 6 |             <view class="menu-item" @click="navTo('/pages/sofarPicker/index')">sofarPicker 年-月 范围组件</view>
 7 |             <view class="menu-item" @click="navTo('/pages/termPicker/index')">termPicker 年-月-日 范围组件</view>
 8 |             <view class="menu-item" @click="navTo('/pages/structureCascade/index')">structureCascade 多级树形选择</view>
 9 |         </view>
10 |     </view>
11 | </template>
12 | 
13 | <script>
14 |     export default {
15 |         data() {
16 |             return {
17 | 
18 |             }
19 |         },
20 |         onLoad() {
21 |             // this.loadData()
22 |             // this.loadOther()
23 |         },
24 |         methods: {
25 |             // 一般写法
26 |             loadData() {
27 |                 this.$api.request({
28 |                     url: '/test',
29 |                     method: 'GET',
30 |                     data: {
31 |                         id: 1
32 |                     }
33 |                 }).then(res => {
34 |                     console.log(res)
35 |                 }).catch(err => {
36 |                     console.error(err)
37 |                 })
38 |             },
39 |             // async await写法
40 |             async loadOther() {
41 |                 try {
42 |                     const res = await this.$api.request({
43 |                         url: '/test',
44 |                         method: 'GET',
45 |                         data: {
46 |                             id: 1
47 |                         }
48 |                     })
49 |                     console.log(res)
50 |                 } catch (err) {
51 |                     console.error(err)
52 |                 }
53 |             },
54 |             navTo(url) {
55 |                 uni.navigateTo({
56 |                     url: url
57 |                 })
58 |             }
59 |         }
60 |     }
61 | </script>
62 | 
63 | <style>
64 |     .menu-box {
65 |         width: 100%;
66 |         display: flex;
67 |         flex-direction: column;
68 |     }
69 | 
70 |     .menu-item {
71 |         width: 100%;
72 |         height: 100rpx;
73 |         color: #666666;
74 |         display: flex;
75 |         align-items: center;
76 |         margin-top: 2rpx;
77 |         padding: 0 30rpx;
78 |         background-color: #FFFFFF;
79 |     }
80 | 
81 |     .menu-item:active {
82 |         background-color: #fafdff;
83 |     }
84 | </style>
85 | 


--------------------------------------------------------------------------------
/pages/loadRefresh/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <view class="content">
  3 |         <load-refresh ref="loadRefresh" :isRefresh="true" refreshType="hollowDots" color="#04C4C4"
  4 |             backgroundCover="#F3F5F5" :currentPage="currentPage" :totalPages="totalPages" @loadMore="loadMore"
  5 |             @refresh="refresh">
  6 |             <view slot="content-list">
  7 |                 <view class="post-item" :class="{'u-f':item.type < 3}" v-for="(item,index) in list" :key="index">
  8 |                     <!-- 左图右文 -->
  9 |                     <block v-if="item.type === 1">
 10 |                         <view class="img-left">
 11 |                             <image :src="item.pic" mode="aspectFill" lazy-load></image>
 12 |                             <view class="shutter-one"></view>
 13 |                         </view>
 14 |                         <view class="text-right">
 15 |                             <view class="title-right">
 16 |                                 {{item.blogDesc}}
 17 |                             </view>
 18 |                             <view class="user-one u-f u-f-jsb">
 19 |                                 <text>{{item.createTime}}</text>
 20 |                                 <image src="../../static/head.jpg" lazy-load></image>
 21 |                             </view>
 22 |                         </view>
 23 |                     </block>
 24 | 
 25 |                     <!-- 左文右图 -->
 26 |                     <block v-if="item.type === 2">
 27 |                         <view class="text-left">
 28 |                             <view class="title-left">
 29 |                                 {{item.blogDesc}}
 30 |                             </view>
 31 |                             <view class="user-one u-f u-f-jsb">
 32 |                                 <image src="../../static/head.jpg" lazy-load></image>
 33 |                                 <text>{{item.createTime}}</text>
 34 |                             </view>
 35 |                         </view>
 36 |                         <view class="img-right">
 37 |                             <image :src="item.pic" mode="aspectFill" lazy-load></image>
 38 |                             <view class="shutter-two"></view>
 39 |                         </view>
 40 |                     </block>
 41 | 
 42 |                     <!-- 纯图片 -->
 43 |                     <block v-if="item.type === 3">
 44 |                         <view class="img-only" :style="{backgroundImage: 'url(' + item.pic + ')'}">
 45 |                             <view class="vague"></view>
 46 |                             <view class="user-three">
 47 |                                 <image src="../../static/head.jpg" lazy-load></image>
 48 |                                 <text>{{item.createTime}}</text>
 49 |                             </view>
 50 |                             <image src="../../static/shutter.png" class="shutter-three" lazy-load></image>
 51 |                         </view>
 52 |                     </block>
 53 | 
 54 |                     <!-- 纯文字 -->
 55 |                     <block v-if="item.type === 4">
 56 |                         <view class="text-only">{{item.blogDesc}}</view>
 57 |                         <view class="user-two">
 58 |                             <image src="../../static/head.jpg" lazy-load></image>
 59 |                             <text>{{item.createTime}}</text>
 60 |                         </view>
 61 |                     </block>
 62 |                 </view>
 63 |             </view>
 64 |         </load-refresh>
 65 |         <view class="fixed-bottom" @click="runRefresh">刷新</view>
 66 |     </view>
 67 | </template>
 68 | 
 69 | <script>
 70 |     import loadRefresh from '@/components/load-refresh/load-refresh.vue'
 71 |     export default {
 72 |         components: {
 73 |             loadRefresh
 74 |         },
 75 |         data() {
 76 |             return {
 77 |                 list: [],
 78 |                 currentPage: 1, // 模拟当前页码
 79 |                 totalPages: 2 // 模拟总页数
 80 |             }
 81 |         },
 82 |         onLoad() {
 83 |             this.loadData()
 84 |         },
 85 |         methods: {
 86 |             loadData() {
 87 |                 this.list = [{
 88 |                         type: 1,
 89 |                         pic: '../../static/pic1.jpg',
 90 |                         blogDesc: '啦啦啦啦啦啦啦',
 91 |                         createTime: '2020-5-16'
 92 |                     },
 93 |                     {
 94 |                         type: 2,
 95 |                         pic: '../../static/pic2.jpg',
 96 |                         blogDesc: '啦啦啦啦啦啦啦',
 97 |                         createTime: '2020-5-17'
 98 |                     },
 99 |                     {
100 |                         type: 1,
101 |                         pic: '../../static/pic3.jpg',
102 |                         blogDesc: '啦啦啦啦啦啦啦',
103 |                         createTime: '2020-5-18'
104 |                     },
105 |                     {
106 |                         type: 2,
107 |                         pic: '../../static/pic4.jpg',
108 |                         blogDesc: '啦啦啦啦啦啦啦',
109 |                         createTime: '2020-5-19'
110 |                     }
111 |                 ]
112 |             },
113 |             // 加载更多
114 |             loadMore() {
115 |                 // showToast 方便演示查看效果 实际开发中可以删除
116 |                 uni.showToast({
117 |                     title: '加载中',
118 |                     icon: 'loading'
119 |                 })
120 |                 // 模拟请求
121 |                 // 建议在请求后端传值时，页码使用 currentPage + 1
122 |                 // 建议在请求成功后的回调函数中，更新赋值currentPage、并使用completed()结束
123 |                 setTimeout(() => {
124 |                     // 模拟请求成功
125 |                     let arr = [{
126 |                             type: 1,
127 |                             pic: '../../static/pic5.png',
128 |                             blogDesc: '啦啦啦啦啦啦啦',
129 |                             createTime: '2020-5-20'
130 |                         },
131 |                         {
132 |                             type: 3,
133 |                             pic: '../../static/pic6.jpg',
134 |                             createTime: '2020-5-21'
135 |                         }
136 |                     ]
137 |                     // 添加至list
138 |                     this.list = [...this.list, ...arr]
139 |                     // 更新当前页码
140 |                     this.currentPage = 2
141 |                     // 结束动画
142 |                     this.$refs.loadRefresh.completed()
143 |                 }, 1000)
144 |             },
145 |             // 下拉刷新
146 |             refresh() {
147 |                 uni.showToast({
148 |                     title: '刷新中',
149 |                     icon: 'loading'
150 |                 })
151 |                 // 模拟请求
152 |                 setTimeout(() => {
153 |                     // 模拟请求成功
154 |                     let arr = [{
155 |                             type: 1,
156 |                             pic: '../../static/pic1.jpg',
157 |                             blogDesc: '啦啦啦啦啦啦啦',
158 |                             createTime: '2020-5-16'
159 |                         },
160 |                         {
161 |                             type: 2,
162 |                             pic: '../../static/pic2.jpg',
163 |                             blogDesc: '啦啦啦啦啦啦啦',
164 |                             createTime: '2020-5-17'
165 |                         },
166 |                         {
167 |                             type: 1,
168 |                             pic: '../../static/pic3.jpg',
169 |                             blogDesc: '啦啦啦啦啦啦啦',
170 |                             createTime: '2020-5-18'
171 |                         },
172 |                         {
173 |                             type: 2,
174 |                             pic: '../../static/pic4.jpg',
175 |                             blogDesc: '啦啦啦啦啦啦啦',
176 |                             createTime: '2020-5-19'
177 |                         }
178 |                     ]
179 |                     // 添加至list
180 |                     this.list = arr
181 |                     // 更新当前页码
182 |                     this.currentPage = 1
183 |                     // 结束动画
184 |                     this.$refs.loadRefresh.completed()
185 |                 }, 1800)
186 |             },
187 |             runRefresh() {
188 |                 this.$refs.loadRefresh.runRefresh()
189 |             }
190 |         }
191 |     }
192 | </script>
193 | 
194 | <style lang="scss">
195 |     .content {
196 |         height: 100%;
197 |         width: 100%;
198 |         background: #F3F5F5;
199 |     }
200 | 
201 |     .u-f,
202 |     .u-f-ac,
203 |     .u-f-ajc {
204 |         display: flex;
205 |     }
206 | 
207 |     .u-f-ac,
208 |     .u-f-ajc {
209 |         align-items: center;
210 |     }
211 | 
212 |     .u-f-ajc {
213 |         justify-content: center;
214 |     }
215 | 
216 |     .u-f-jsb {
217 |         justify-content: space-between;
218 |     }
219 | 
220 |     .u-f1 {
221 |         flex: 1;
222 |     }
223 | 
224 |     .u-f-column {
225 |         flex-direction: column;
226 |     }
227 | 
228 |     .post-item {
229 |         width: 100%;
230 |         background: white;
231 |         margin-bottom: 16rpx;
232 | 
233 |         /* 左图右文 */
234 |         .img-left {
235 |             width: 64%;
236 |             height: 380rpx;
237 |             position: relative;
238 | 
239 |             image {
240 |                 width: 100%;
241 |                 height: 100%;
242 |             }
243 | 
244 |             .shutter-one {
245 |                 position: absolute;
246 |                 top: 0;
247 |                 right: 0;
248 |                 width: 0;
249 |                 height: 0;
250 |                 border-top: 380rpx solid white;
251 |                 border-left: 97rpx solid transparent;
252 |             }
253 |         }
254 | 
255 |         .text-right {
256 |             width: 36%;
257 |             height: 380rpx;
258 |             position: relative;
259 | 
260 |             .title-right {
261 |                 position: absolute;
262 |                 top: 16rpx;
263 |                 left: -30rpx;
264 |                 width: 100%;
265 |                 height: 84rpx;
266 |                 line-height: 42rpx;
267 |                 font-size: 30rpx;
268 |                 font-weight: 400;
269 |                 color: #666666;
270 |                 overflow: hidden;
271 |                 z-index: 10;
272 |             }
273 | 
274 |             .user-one {
275 |                 position: absolute;
276 |                 bottom: 0;
277 |                 width: 86%;
278 |                 height: 56rpx;
279 |                 padding: 8rpx 20rpx;
280 | 
281 |                 text {
282 |                     color: #AAAAAA;
283 |                     font-size: 22rpx;
284 |                     font-weight: 400;
285 |                 }
286 | 
287 |                 image {
288 |                     width: 40rpx;
289 |                     height: 40rpx;
290 |                     border-radius: 100%;
291 |                 }
292 |             }
293 |         }
294 | 
295 |         /* 左文右图 */
296 |         .text-left {
297 |             width: 36%;
298 |             height: 380rpx;
299 |             position: relative;
300 | 
301 |             .title-left {
302 |                 position: absolute;
303 |                 top: 16rpx;
304 |                 left: 30rpx;
305 |                 width: 100%;
306 |                 height: 84rpx;
307 |                 line-height: 42rpx;
308 |                 font-size: 30rpx;
309 |                 font-weight: 400;
310 |                 color: #666666;
311 |                 overflow: hidden;
312 |                 z-index: 10;
313 |             }
314 | 
315 |             .user-one {
316 |                 position: absolute;
317 |                 bottom: 0;
318 |                 width: 86%;
319 |                 height: 56rpx;
320 |                 padding: 8rpx 20rpx;
321 | 
322 |                 text {
323 |                     color: #AAAAAA;
324 |                     font-size: 22rpx;
325 |                     font-weight: 400;
326 |                 }
327 | 
328 |                 image {
329 |                     width: 40rpx;
330 |                     height: 40rpx;
331 |                     border-radius: 100%;
332 |                 }
333 |             }
334 |         }
335 | 
336 |         .img-right {
337 |             width: 64%;
338 |             height: 380rpx;
339 |             position: relative;
340 | 
341 |             image {
342 |                 width: 100%;
343 |                 height: 100%;
344 |             }
345 | 
346 |             .shutter-two {
347 |                 position: absolute;
348 |                 top: 0;
349 |                 left: 0;
350 |                 width: 0;
351 |                 height: 0;
352 |                 border-top: 380rpx solid white;
353 |                 border-right: 97rpx solid transparent;
354 |             }
355 |         }
356 | 
357 |         /* 纯文字 */
358 |         .text-only {
359 |             width: 100%;
360 |             max-height: 114rpx;
361 |             padding: 15rpx 20rpx;
362 |             font-size: 30rpx;
363 |             font-weight: 400;
364 |             color: #666666;
365 |             line-height: 42rpx;
366 |             overflow: hidden;
367 |         }
368 | 
369 |         .user-two {
370 |             display: flex;
371 |             flex-direction: row-reverse;
372 |             height: 50rpx;
373 | 
374 |             text {
375 |                 color: #AAAAAA;
376 |                 font-size: 22rpx;
377 |                 font-weight: 400;
378 |             }
379 | 
380 |             image {
381 |                 width: 40rpx;
382 |                 height: 40rpx;
383 |                 border-radius: 100%;
384 |                 margin: 0 20rpx 0 60rpx;
385 |             }
386 |         }
387 | 
388 |         /* 纯图片 */
389 |         .img-only {
390 |             width: 100%;
391 |             height: 400rpx;
392 |             position: relative;
393 |             background-size: cover;
394 |             background-position: center;
395 | 
396 |             .post-img {
397 |                 width: 100%;
398 |                 height: 100%;
399 |             }
400 | 
401 |             .vague {
402 |                 width: 100%;
403 |                 height: 60rpx;
404 |                 display: flex;
405 |                 align-items: center;
406 |                 position: absolute;
407 |                 bottom: 0;
408 |                 background: inherit;
409 |                 background-position: bottom;
410 |                 filter: blur(5px);
411 |             }
412 | 
413 |             .user-three {
414 |                 width: 100%;
415 |                 height: 60rpx;
416 |                 display: flex;
417 |                 align-items: center;
418 |                 position: absolute;
419 |                 bottom: 0;
420 | 
421 |                 text {
422 |                     color: #FFFFFF;
423 |                     font-size: 22rpx;
424 |                     font-weight: 400;
425 |                 }
426 | 
427 |                 image {
428 |                     width: 40rpx;
429 |                     height: 40rpx;
430 |                     border-radius: 100%;
431 |                     margin: 0 60rpx 0 20rpx;
432 |                 }
433 |             }
434 | 
435 |             .shutter-three {
436 |                 width: 100%;
437 |                 height: 100%;
438 |                 position: absolute;
439 |                 top: 0;
440 |                 left: 0;
441 |             }
442 |         }
443 |     }
444 | 
445 |     .fixed-bottom {
446 |         position: fixed;
447 |         bottom: 120rpx;
448 |         right: 60rpx;
449 |         width: 100rpx;
450 |         height: 100rpx;
451 |         color: #409eff;
452 |         border-radius: 50%;
453 |         text-align: center;
454 |         line-height: 100rpx;
455 |         box-shadow: 0 0 10rpx rgba(0, 0, 0, .12);
456 |         background-color: #FFFFFF;
457 |     }
458 | </style>
459 | 


--------------------------------------------------------------------------------
/pages/loadRefresh/tabs.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <view class="content">
  3 |         <!-- 简单的tabs组件 -->
  4 |         <view class="uni-swiper-tab">
  5 |             <block v-for="(tab, index) in tabBars" :key="index">
  6 |                 <view class="swiper-tab-list" :class="{'active':tabIndex === index}" @click="tabtap(index)">
  7 |                     {{tab.name}}
  8 |                 </view>
  9 |             </block>
 10 |         </view>
 11 |         <!-- swiper组件 -->
 12 |         <swiper :style="getHeight" :current="tabIndex" @change="tabChange" :duration="1000">
 13 |             <swiper-item v-for="(items, index) in tabBars" :key="index">
 14 |                 <load-refresh :ref="'loadRefresh' + index" :isRefresh="true" heightReduce="80" backgroundCover="#F3F5F5"
 15 |                     :currentPage="items.currentPage" :totalPages="items.totalPages" @loadMore="loadData(10)"
 16 |                     @refresh="loadData(20)">
 17 |                     <view slot="content-list">
 18 |                         <view class="data-item" v-for="(item, itemIndex) in items.list" :key="itemIndex">
 19 |                             <image class="data-image" :src="item.image" mode="aspectFill"></image>
 20 |                             <view class="data-text">{{item.text}}</view>
 21 |                         </view>
 22 |                     </view>
 23 |                 </load-refresh>
 24 |             </swiper-item>
 25 |         </swiper>
 26 |     </view>
 27 | </template>
 28 | 
 29 | <script>
 30 |     import loadRefresh from '@/components/load-refresh/load-refresh.vue'
 31 |     export default {
 32 |         components: {
 33 |             loadRefresh
 34 |         },
 35 |         data() {
 36 |             return {
 37 |                 tabIndex: 0,
 38 |                 tabBars: [{
 39 |                         name: '未发货',
 40 |                         currentPage: 1,
 41 |                         totalPages: 2,
 42 |                         list: [{
 43 |                                 text: 'hello啊',
 44 |                                 image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
 45 |                             },
 46 |                             {
 47 |                                 text: '马上来',
 48 |                                 image: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg'
 49 |                             },
 50 |                             {
 51 |                                 text: '你瞅啥',
 52 |                                 image: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg'
 53 |                             },
 54 |                             {
 55 |                                 text: '有些冷',
 56 |                                 image: 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg'
 57 |                             }
 58 |                         ]
 59 |                     },
 60 |                     {
 61 |                         name: '已发货',
 62 |                         currentPage: 1,
 63 |                         totalPages: 2,
 64 |                         list: [{
 65 |                                 text: 'hello啊',
 66 |                                 image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
 67 |                             },
 68 |                             {
 69 |                                 text: '马上来',
 70 |                                 image: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg'
 71 |                             },
 72 |                             {
 73 |                                 text: '你瞅啥',
 74 |                                 image: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg'
 75 |                             },
 76 |                             {
 77 |                                 text: '有些冷',
 78 |                                 image: 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg'
 79 |                             }
 80 |                         ]
 81 |                     }
 82 |                 ],
 83 |             }
 84 |         },
 85 |         onLoad() {
 86 | 
 87 |         },
 88 |         computed: {
 89 |             getHeight() {
 90 |                 let height = uni.getSystemInfoSync().windowHeight - uni.upx2px(80)
 91 |                 return `height: ${height}px;`;
 92 |             }
 93 |         },
 94 |         methods: {
 95 |             // tabs点击
 96 |             tabtap(index) {
 97 |                 this.tabIndex = index
 98 |             },
 99 |             // 滑动事件
100 |             tabChange(e) {
101 |                 this.tabIndex = e.detail.current
102 |             },
103 |             loadData(code) {
104 |                 // code=10 为加载更多
105 |                 // code=20 为下拉刷新
106 |                 const {
107 |                     tabIndex,
108 |                     tabBars
109 |                 } = this
110 |                 // setTimeout模拟请求接口成功后的回调函数
111 |                 setTimeout(() => {
112 |                     // newArray 模拟接口返回数据
113 |                     let newArray = []
114 |                     if (code === 10) {
115 |                         // 加载更多
116 |                         newArray = [{
117 |                                 text: '帅不帅',
118 |                                 image: 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg'
119 |                             },
120 |                             {
121 |                                 text: '想睡觉',
122 |                                 image: 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg'
123 |                             },
124 |                             {
125 |                                 text: '舒坦啊',
126 |                                 image: 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
127 |                             }
128 |                         ]
129 |                     } else {
130 |                         // 下拉刷新
131 |                         newArray = [{
132 |                                 text: 'hello啊',
133 |                                 image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
134 |                             },
135 |                             {
136 |                                 text: '马上来',
137 |                                 image: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg'
138 |                             },
139 |                             {
140 |                                 text: '你瞅啥',
141 |                                 image: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg'
142 |                             },
143 |                             {
144 |                                 text: '有些冷',
145 |                                 image: 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg'
146 |                             }
147 |                         ]
148 |                     }
149 |                     // list赋值
150 |                     // Tips: 若是数组较大，建议使用 Array.push()
151 |                     let length = tabBars[tabIndex].list.length
152 |                     tabBars[tabIndex].list.splice(code === 10 ? length : 0, code === 10 ? 0 : length, ...
153 |                         newArray)
154 |                     // 更新页码
155 |                     tabBars[tabIndex].currentPage = code === 10 ? 2 : 1
156 |                     // 数据更新完成
157 |                     this.$refs['loadRefresh' + tabIndex][0].completed()
158 |                 }, 1000)
159 |             }
160 |         }
161 |     }
162 | </script>
163 | 
164 | <style lang="scss" scoped>
165 |     .content {
166 |         background-color: #F5F5F5;
167 |     }
168 | 
169 |     /* tabs样式 */
170 |     .uni-swiper-tab {
171 |         width: 100%;
172 |         height: 70rpx;
173 |         padding: 10rpx;
174 |         display: flex;
175 |         font-weight: 400;
176 |         font-size: 32rpx;
177 |         background-color: #FFFFFF;
178 |     }
179 | 
180 |     .swiper-tab-list {
181 |         display: flex;
182 |         flex-grow: 1;
183 |         justify-content: center;
184 |         align-items: center;
185 |         color: #999999;
186 |         min-width: 160rpx;
187 |         margin: 0 20rpx;
188 |     }
189 | 
190 |     .active {
191 |         color: #333333;
192 |         border: 2rpx solid #333333;
193 |         border-radius: 20upx;
194 |         background: #EDF3F6;
195 |     }
196 | 
197 |     /* 数据集样式 */
198 |     .data-item {
199 |         width: 710rpx;
200 |         background: white;
201 |         margin: 16rpx 20rpx 0;
202 |         border-radius: 16rpx;
203 | 
204 |         .data-image {
205 |             width: 100%;
206 |             height: 380rpx;
207 |             border-radius: 16rpx 16rpx 0 0;
208 |         }
209 | 
210 |         .data-text {
211 |             width: 100%;
212 |             height: 60rpx;
213 |             line-height: 60rpx;
214 |             padding: 0 20rpx;
215 |         }
216 |     }
217 | </style>
218 | 


--------------------------------------------------------------------------------
/pages/sofarPicker/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <view class="content">
 3 |         <view class="header">
 4 |             <view class="date-item">年月范围：{{startTime}} - {{endTime}}</view>
 5 |         </view>
 6 |         <button class="date-btn" type="default" @click="openPicker">打开</button>
 7 |         <sofar-picker :visable.sync="pickerVisable" :defaultDate="defaultDate" @confirm="confirm"></sofar-picker>
 8 |     </view>
 9 | </template>
10 | 
11 | <script>
12 |     import sofarPicker from '@/components/sofar-picker/sofar-picker.vue'
13 |     export default {
14 |         components: {
15 |             sofarPicker
16 |         },
17 |         data() {
18 |             return {
19 |                 pickerVisable: false,
20 |                 defaultDate: [],
21 |                 startTime: '',
22 |                 endTime: ''
23 |             }
24 |         },
25 |         methods: {
26 |             openPicker() {
27 |                 this.pickerVisable = true
28 |             },
29 |             confirm(date) {
30 |                 this.startTime = date[0]
31 |                 this.endTime = date[1]
32 |             }
33 |         }
34 |     }
35 | </script>
36 | 
37 | <style>
38 |     .header {
39 |         width: 100%;
40 |         padding: 60rpx 30rpx;
41 |         display: flex;
42 |         flex-direction: column;
43 |     }
44 | 
45 |     .date-item {
46 |         margin-bottom: 30rpx;
47 |     }
48 | 
49 |     .date-btn {
50 |         width: 500rpx;
51 |         height: 80rpx;
52 |         line-height: 80rpx;
53 |     }
54 | </style>
55 | 


--------------------------------------------------------------------------------
/pages/structureCascade/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <view>
  3 |         <structure-cascade
  4 |             ref="strCascade"
  5 |             v-model="strResults"
  6 |             :checkIcon="require('@/static/icons/selected.png')"
  7 |             :moreIcon="require('@/static/icons/arrow-right.png')"
  8 |             :treeData="treeData">
  9 |         </structure-cascade>
 10 |         <view class="bottom-box">
 11 |             <button class="bottom-btn" @click="confirmBtn">确认</button>
 12 |         </view>
 13 |     </view>
 14 | </template>
 15 | 
 16 | <script>
 17 |     import structureCascade from '@/components/structure-cascade/structure-cascade.vue'
 18 |     export default {
 19 |         components: {
 20 |             structureCascade
 21 |         },
 22 |         data() {
 23 |             return {
 24 |                 treeData: [
 25 |                     {
 26 |                         "id": "1",
 27 |                         "parentId": "0",
 28 |                         "name": "一级_1",
 29 |                         "children": [
 30 |                             {
 31 |                                 "id": "2",
 32 |                                 "parentId": "1",
 33 |                                 "name": "二级_1-1",
 34 |                                 "children": [
 35 |                                     {
 36 |                                         "id": "3",
 37 |                                         "parentId": "2",
 38 |                                         "name": "三级_1-1-1",
 39 |                                         "children": [
 40 |                                             {
 41 |                                                 "id": "4",
 42 |                                                 "parentId": "3",
 43 |                                                 "name": "四级_1-1-1-1"
 44 |                                             }
 45 |                                         ]
 46 |                                     },
 47 |                                     {
 48 |                                         "id": "5",
 49 |                                         "parentId": "2",
 50 |                                         "name": "三级_1-1-2",
 51 |                                         "children": [
 52 |                                             {
 53 |                                                 "id": "6",
 54 |                                                 "parentId": "5",
 55 |                                                 "name": "四级_1-1-2-1"
 56 |                                             },
 57 |                                             {
 58 |                                                 "id": "7",
 59 |                                                 "parentId": "5",
 60 |                                                 "name": "四级_1-1-2-2",
 61 |                                                 "children": [
 62 |                                                     {
 63 |                                                         "id": "8",
 64 |                                                         "parentId": "7",
 65 |                                                         "name": "五级1-1-2-2-1"
 66 |                                                     },
 67 |                                                     {
 68 |                                                         "id": "9",
 69 |                                                         "parentId": "7",
 70 |                                                         "name": "五级1-1-2-2-2"
 71 |                                                     },
 72 |                                                     {
 73 |                                                         "id": "10",
 74 |                                                         "parentId": "7",
 75 |                                                         "name": "五级1-1-2-2-3"
 76 |                                                     }
 77 |                                                 ]
 78 |                                             }
 79 |                                         ]
 80 |                                     }
 81 |                                 ]
 82 |                             }
 83 |                         ]
 84 |                     }
 85 |                 ],
 86 |                 strResults: [
 87 |                     // {
 88 |                     //     id: '3',
 89 |                     //     name: '三级_1-1-1'
 90 |                     // }
 91 |                 ] // 存在数据则默认选中
 92 |             }
 93 |         },
 94 |         onLoad() {
 95 |             
 96 |         },
 97 |         methods: {
 98 |             confirmBtn() {
 99 |                 if (this.strResults.length) {
100 |                     uni.showModal({
101 |                         title: '结果',
102 |                         content: JSON.stringify(this.strResults)
103 |                     })
104 |                 } else {
105 |                     uni.showToast({
106 |                         title: '请先选择！',
107 |                         icon: 'none'
108 |                     })
109 |                 }
110 |             }
111 |         }
112 |     }
113 | </script>
114 | 
115 | <style lang="scss" scoped>
116 |     .bottom-box {
117 |         width: 100%;
118 |         position: fixed;
119 |         bottom: 0;
120 |         left: 0;
121 |         z-index: 5;
122 |         padding: 0 20rpx 58rpx;
123 |         box-sizing: border-box;
124 |         .bottom-btn {
125 |             width: 100%;
126 |             height: 88rpx;
127 |             color: #FFFFFF;
128 |             font-size: 36rpx;
129 |             border-radius: 12rpx;
130 |             line-height: 88rpx;
131 |             background-color: #1677FF;
132 |         }
133 |     }
134 | </style>


--------------------------------------------------------------------------------
/pages/termPicker/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <view class="content">
 3 |         <view class="header">
 4 |             <view class="date-item">日期范围：{{startTime}} 至 {{endTime}}</view>
 5 |         </view>
 6 |         <button class="date-btn" type="default" @click="openPicker">打开</button>
 7 |         <term-picker :visable.sync="pickerVisable" :defaultDate="defaultDate" :deferYear="1" @confirm="confirm">
 8 |         </term-picker>
 9 |     </view>
10 | </template>
11 | 
12 | <script>
13 |     import termPicker from '@/components/term-picker/term-picker.vue'
14 |     export default {
15 |         components: {
16 |             termPicker
17 |         },
18 |         data() {
19 |             return {
20 |                 pickerVisable: false,
21 |                 defaultDate: [],
22 |                 startTime: '',
23 |                 endTime: ''
24 |             }
25 |         },
26 |         methods: {
27 |             openPicker() {
28 |                 this.pickerVisable = true
29 |             },
30 |             confirm(date) {
31 |                 this.startTime = date[0]
32 |                 this.endTime = date[1]
33 |             }
34 |         }
35 |     }
36 | </script>
37 | 
38 | <style>
39 |     .header {
40 |         width: 100%;
41 |         padding: 60rpx 30rpx;
42 |         display: flex;
43 |         flex-direction: column;
44 |     }
45 | 
46 |     .date-item {
47 |         margin-bottom: 30rpx;
48 |     }
49 | 
50 |     .date-btn {
51 |         width: 500rpx;
52 |         height: 80rpx;
53 |         line-height: 80rpx;
54 |     }
55 | </style>
56 | 


--------------------------------------------------------------------------------
/static/head.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JamyKing/uni-load-refresh/7e6dc4fcfd5c2ce3321b7af8bc05c8a38bbc0b48/static/head.jpg


--------------------------------------------------------------------------------
/static/icons/arrow-right.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JamyKing/uni-load-refresh/7e6dc4fcfd5c2ce3321b7af8bc05c8a38bbc0b48/static/icons/arrow-right.png


--------------------------------------------------------------------------------
/static/icons/selected.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JamyKing/uni-load-refresh/7e6dc4fcfd5c2ce3321b7af8bc05c8a38bbc0b48/static/icons/selected.png


--------------------------------------------------------------------------------
/static/icons/structure.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JamyKing/uni-load-refresh/7e6dc4fcfd5c2ce3321b7af8bc05c8a38bbc0b48/static/icons/structure.png


--------------------------------------------------------------------------------
/static/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JamyKing/uni-load-refresh/7e6dc4fcfd5c2ce3321b7af8bc05c8a38bbc0b48/static/logo.png


--------------------------------------------------------------------------------
/static/pic1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JamyKing/uni-load-refresh/7e6dc4fcfd5c2ce3321b7af8bc05c8a38bbc0b48/static/pic1.jpg


--------------------------------------------------------------------------------
/static/pic2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JamyKing/uni-load-refresh/7e6dc4fcfd5c2ce3321b7af8bc05c8a38bbc0b48/static/pic2.jpg


--------------------------------------------------------------------------------
/static/pic3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JamyKing/uni-load-refresh/7e6dc4fcfd5c2ce3321b7af8bc05c8a38bbc0b48/static/pic3.jpg


--------------------------------------------------------------------------------
/static/pic4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JamyKing/uni-load-refresh/7e6dc4fcfd5c2ce3321b7af8bc05c8a38bbc0b48/static/pic4.jpg


--------------------------------------------------------------------------------
/static/pic5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JamyKing/uni-load-refresh/7e6dc4fcfd5c2ce3321b7af8bc05c8a38bbc0b48/static/pic5.png


--------------------------------------------------------------------------------
/static/pic6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JamyKing/uni-load-refresh/7e6dc4fcfd5c2ce3321b7af8bc05c8a38bbc0b48/static/pic6.jpg


--------------------------------------------------------------------------------
/static/shutter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JamyKing/uni-load-refresh/7e6dc4fcfd5c2ce3321b7af8bc05c8a38bbc0b48/static/shutter.png


--------------------------------------------------------------------------------
/uni.scss:
--------------------------------------------------------------------------------
 1 | /* 颜色变量 */
 2 | 
 3 | /* 行为相关颜色 */
 4 | $uni-color-primary: #007aff;
 5 | $uni-color-success: #4cd964;
 6 | $uni-color-warning: #f0ad4e;
 7 | $uni-color-error: #dd524d;
 8 | 
 9 | /* 文字基本颜色 */
10 | $uni-text-color:#333;//基本色
11 | $uni-text-color-inverse:#fff;//反色
12 | $uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
13 | $uni-text-color-placeholder: #808080;
14 | $uni-text-color-disable:#c0c0c0;
15 | 
16 | /* 背景颜色 */
17 | $uni-bg-color:#ffffff;
18 | $uni-bg-color-grey:#f8f8f8;
19 | $uni-bg-color-hover:#f1f1f1;//点击状态颜色
20 | $uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
21 | 
22 | /* 边框颜色 */
23 | $uni-border-color:#c8c7cc;
24 | 
25 | /* 尺寸变量 */
26 | 
27 | /* 文字尺寸 */
28 | $uni-font-size-sm:24rpx;
29 | $uni-font-size-base:28rpx;
30 | $uni-font-size-lg:32rpx;
31 | 
32 | /* 图片尺寸 */
33 | $uni-img-size-sm:40rpx;
34 | $uni-img-size-base:52rpx;
35 | $uni-img-size-lg:80rpx;
36 | 
37 | /* Border Radius */
38 | $uni-border-radius-sm: 4rpx;
39 | $uni-border-radius-base: 6rpx;
40 | $uni-border-radius-lg: 12rpx;
41 | $uni-border-radius-circle: 50%;
42 | 
43 | /* 水平间距 */
44 | $uni-spacing-row-sm: 10px;
45 | $uni-spacing-row-base: 20rpx;
46 | $uni-spacing-row-lg: 30rpx;
47 | 
48 | /* 垂直间距 */
49 | $uni-spacing-col-sm: 8rpx;
50 | $uni-spacing-col-base: 16rpx;
51 | $uni-spacing-col-lg: 24rpx;
52 | 
53 | /* 透明度 */
54 | $uni-opacity-disabled: 0.3; // 组件禁用态的透明度
55 | 
56 | /* 文章场景相关 */
57 | $uni-color-title: #2C405A; // 文章标题颜色
58 | $uni-font-size-title:40rpx;
59 | $uni-color-subtitle: #555555; // 二级标题颜色
60 | $uni-font-size-subtitle:36rpx;
61 | $uni-color-paragraph: #3F536E; // 文章段落颜色
62 | $uni-font-size-paragraph:30rpx;


--------------------------------------------------------------------------------