15 changed files with 449 additions and 102 deletions
Split View
Diff Options
-
+25 -18App.vue
-
+1 -1components/base/m-navbar.vue
-
+2 -2components/base/tabBar.vue
-
+65 -55components/popUpWindow/popUpWindow.vue
-
+270 -0components/virtualScroll/virtualScroll.vue
-
+6 -1locale/ar.js
-
+6 -1locale/en.js
-
+15 -10locale/es.js
-
+6 -1locale/fr.js
-
+9 -5locale/ru.js
-
+7 -5pages/home/home.vue
-
+1 -0pages/login/login.vue
-
+1 -1pages/loginRecord/loginRecord.vue
-
+35 -1pages/purse/purse.vue
-
+0 -1pages/withdraw/withdraw.vue
+ 25
- 18
App.vue
View File
+ 1
- 1
components/base/m-navbar.vue
View File
+ 2
- 2
components/base/tabBar.vue
View File
+ 65
- 55
components/popUpWindow/popUpWindow.vue
View File
+ 270
- 0
components/virtualScroll/virtualScroll.vue
View File
| @ -0,0 +1,270 @@ | |||
| <!-- 首页虚拟滚动 --> | |||
| <template> | |||
| <view class="virtualScroll content"> | |||
| <view class="success_info_body"> | |||
| <!-- 标准title可以调用组件 --> | |||
| <view class="title_view"> | |||
| {{ $t('page.virtualScroll.title') }} | |||
| </view> | |||
| <!-- 参数名称、列数根据实际情况调整 --> | |||
| <view class="table_body"> | |||
| <view class="table_main_body"> | |||
| <view class="table_inner_body" :class="{ animate }" :style="{top: tableTop + 'px'}"> | |||
| <view class="table_tr" v-for="(item,index) in tableList" :key="index"> | |||
| <view class="tr1 tr">{{item.planNo}}</view> | |||
| <view class="tr2 tr">{{item.type}}</view> | |||
| <view class="tr3 tr" v-if="item.startDate!='-'">{{item.startDate}} ~ {{item.endDate}}</view> | |||
| <view class="tr3 tr" v-else>-</view> | |||
| <view class="tr4 tr" v-if="item.process!='-'">{{Number(item.process).toFixed(2)}} %</view> | |||
| <view class="tr4 tr" v-else>-</view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| data() { | |||
| return { | |||
| tableTimer: null, | |||
| tableTop: 0, | |||
| tableList: [{ | |||
| "process": 0.0000, | |||
| "planNo": "BP2022060701", | |||
| "endDate": "2022-06-07", | |||
| "type": "砌块", | |||
| "startDate": "2022-06-07" | |||
| }, | |||
| { | |||
| "process": 0.0000, | |||
| "planNo": "WP2022061301", | |||
| "endDate": "2022-06-13", | |||
| "type": "墙板", | |||
| "startDate": "2022-06-13" | |||
| }, | |||
| { | |||
| "process": 0.0000, | |||
| "planNo": "WP2022061301", | |||
| "endDate": "2022-06-13", | |||
| "type": "墙板", | |||
| "startDate": "2022-06-13" | |||
| }, | |||
| { | |||
| "process": 0.0000, | |||
| "planNo": "WP2022061301", | |||
| "endDate": "2022-06-13", | |||
| "type": "墙板", | |||
| "startDate": "2022-06-13" | |||
| }, | |||
| { | |||
| "process": 0.0000, | |||
| "planNo": "WP2022061301", | |||
| "endDate": "2022-06-13", | |||
| "type": "墙板", | |||
| "startDate": "2022-06-13" | |||
| }, | |||
| { | |||
| "process": 0.0000, | |||
| "planNo": "WP2022061301", | |||
| "endDate": "2022-06-13", | |||
| "type": "墙板", | |||
| "startDate": "2022-06-13" | |||
| }, | |||
| { | |||
| "process": 0.0000, | |||
| "planNo": "WP2022061301", | |||
| "endDate": "2022-06-13", | |||
| "type": "墙板", | |||
| "startDate": "2022-06-13" | |||
| } | |||
| ], | |||
| tableListSize: 0, | |||
| componentTimer: null, | |||
| //需要根据情况设置的参数 | |||
| visibleSize: 3, //容器内可视最大完整行数 | |||
| lineHeight: this.getRpxToPx(162), //每行的实际高度（包含margin-top/bottom,border等） | |||
| componentTimerInterval: 3600000, //刷新数据的时间间隔 | |||
| tableTimerInterval: 1000, //向上滚动 1px 所需要的时间，越小越快，推荐值 100 | |||
| animate : true | |||
| } | |||
| }, | |||
| //如果没有父元素传值，将watch内的内容搬至mounted中即可 | |||
| props: ["activeFactoryId"], | |||
| watch: { | |||
| activeFactoryId(val, oldVal) { | |||
| clearInterval(this.componentTimer); | |||
| this.bsGetProductProcess(); | |||
| this.componentTimerFun(); | |||
| } | |||
| }, | |||
| mounted() { | |||
| clearInterval(this.componentTimer); | |||
| this.bsGetProductProcess(); | |||
| this.componentTimerFun(); | |||
| }, | |||
| beforeDestroy() { | |||
| clearInterval(this.componentTimer); | |||
| clearInterval(this.tableTimer); | |||
| }, | |||
| methods: { | |||
| //调用数据接口，获取列表数据 | |||
| bsGetProductProcess() { | |||
| clearInterval(this.tableTimer); | |||
| this.tableTop = 0; | |||
| if (this.activeFactoryId != "") { | |||
| // this.request('forgetPass').then(res => { | |||
| // if(res.code == 200){ | |||
| // this.serverList = res.result | |||
| // } | |||
| // }) | |||
| this.tableActionFun(); | |||
| } | |||
| }, | |||
| tableActionFun() { | |||
| this.tableListSize = this.tableList.length; //数据总数 | |||
| if (this.tableListSize > this.visibleSize) { //总数大于容器内可视最大完整行数 | |||
| this.tableList = this.tableList.concat(this.tableList); //拼接一个数组数据 | |||
| this.tableTimerFun(); | |||
| } else { | |||
| this.fillTableList(); | |||
| } | |||
| }, | |||
| //当数据过少时，不触发自动轮播事件，并填充没有数据的行，参数根据实际情况修改即可 | |||
| fillTableList() { | |||
| var addLength = this.visibleSize - this.tableListSize; | |||
| for (var i = 0; i < addLength; i++) { | |||
| this.tableList.push({ | |||
| planNo: "-", | |||
| type: "-", | |||
| startDate: "-", | |||
| endDate: "-", | |||
| process: "-" | |||
| }); | |||
| } | |||
| }, | |||
| //控制元素滚动 | |||
| tableTimerFun() { | |||
| var count = 0; | |||
| this.tableTimer = setInterval(() => { | |||
| if (count < (this.tableList.length / 2) * this.lineHeight) { | |||
| this.animate = true | |||
| this.tableTop -= this.lineHeight; | |||
| count += this.lineHeight; | |||
| } else { | |||
| this.animate = false | |||
| this.tableTop = 0; | |||
| count = 0; | |||
| } | |||
| }, this.tableTimerInterval); | |||
| }, | |||
| //更新数据 | |||
| componentTimerFun() { | |||
| this.componentTimer = setInterval(() => { | |||
| this.bsGetProductProcess(); | |||
| }, this.componentTimerInterval); | |||
| }, | |||
| //转换rpx单位 | |||
| getRpxToPx(rpx) { | |||
| // 获取系统信息，这里使用同步方法uni.getSystemInfoSync | |||
| const systemInfo = uni.getSystemInfoSync(); | |||
| // 假设设计稿宽度为750rpx | |||
| const designWidth = 750; | |||
| // 屏幕宽度，单位为px | |||
| const screenWidth = systemInfo.screenWidth; | |||
| // 计算1rpx等于多少px | |||
| const rpxToPx = screenWidth / (designWidth / rpx); | |||
| console.log(rpxToPx); | |||
| return rpxToPx; | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .virtualScroll { | |||
| width: 100%; | |||
| height: 560rpx; | |||
| } | |||
| .content { | |||
| width: 96%; | |||
| margin: 0 auto; | |||
| color: $uni-bg-color-app; | |||
| } | |||
| .title_view { | |||
| width: 100%; | |||
| font-size: 32rpx; | |||
| } | |||
| .table_body { | |||
| width: 100%; | |||
| margin-top: 15rpx; | |||
| } | |||
| .tr { | |||
| overflow: hidden; | |||
| text-overflow: ellipsis; | |||
| white-space: nowrap; | |||
| box-sizing: border-box; | |||
| padding: 0 5px; | |||
| text-align: center; | |||
| font-size: 30rpx; | |||
| } | |||
| .tr1 { | |||
| width: 28%; | |||
| } | |||
| .tr2 { | |||
| width: 15%; | |||
| } | |||
| .tr3 { | |||
| width: 35%; | |||
| font-size: 24rpx; | |||
| } | |||
| .tr4 { | |||
| flex: 1; | |||
| } | |||
| .table_main_body { | |||
| width: 100%; | |||
| height: 480rpx; | |||
| overflow: hidden; | |||
| position: relative; | |||
| } | |||
| .table_inner_body { | |||
| width: 98%; | |||
| position: absolute; | |||
| left: 1%; | |||
| } | |||
| .animate{ | |||
| transition: all .3s; | |||
| } | |||
| .table_tr { | |||
| display: flex; | |||
| align-items: center; | |||
| height: 140rpx; | |||
| color: $uni-bg-color-app; | |||
| font-size: 30rpx; | |||
| margin-bottom: 20rpx; | |||
| // box-shadow: 2rpx 2rpx 6rpx 1rpx rgba(0, 0, 0, .1), | |||
| // -2rpx -2rpx 6rpx 1rpx rgba(0, 0, 0, .1); | |||
| border-radius: 10rpx; | |||
| background: $uni-bg-color; | |||
| border: 2rpx solid #ccc; | |||
| } | |||
| </style> | |||