Browse Source

fix: 页面逻辑优化

cuiyalong 4 years ago
parent
commit
b3de17bcbf

+ 11 - 11
src/jfw/modules/app/src/web/templates/commonPay/myOrder.html

@@ -28,25 +28,25 @@
                     class="j-container"
                 >
                     <van-tab
-                        v-for="(item, index) in tabList"
+                        v-for="(tab, index) in tabList"
                         :key="index"
-                        :title="item.label"
-                        :name="item.name">
-                        <van-pull-refresh v-model="tabState.refreshing" @refresh="onRefresh">
+                        :title="tab.label"
+                        :name="tab.name">
+                        <van-pull-refresh v-model="tabStateMap[tab.name].refreshing" @refresh="onRefresh">
                             <van-list
-                                v-model="tabState.loading"
-                                :finished="tabState.finished"
-                                :offset="tabState.offset"
-                                :finished-text="tabState.list.length === 0 ? '' : '没有更多了'"
+                                v-model="tabStateMap[tab.name].loading"
+                                :finished="tabStateMap[tab.name].finished"
+                                :offset="tabStateMap[tab.name].offset"
+                                :finished-text="tabStateMap[tab.name].list.length === 0 ? '' : '没有更多了'"
                                 @load="onLoad"
                                 class="more-list"
                                 ref="vanList">
                                 <div class="order-list">
                                     <div
                                         class="j-order-card order-list-item"
-                                        v-for="(item, index) in tabState.list"
+                                        v-for="(item, index) in tabStateMap[tab.name].list"
                                         :order-id="item.order_code"
-                                        :key="item.order_code + '-' +tabActiveName">
+                                        :key="item.order_code">
                                         <div class="order-item-header">
                                             <div class="o-i-h-left">${ calcTime(item) }</div>
                                             <div class="o-i-h-right">
@@ -107,7 +107,7 @@
                                 </div>
                             </van-list>
                         </van-pull-refresh>
-                        <div class="empty-container" v-show="tabState.list.length === 0 && tabState.loaded && !tabState.loading">
+                        <div class="empty-container" v-show="tabStateMap[tab.name].list.length === 0 && tabStateMap[tab.name].loaded && !tabStateMap[tab.name].loading">
                             <div class="empty-content-position">
                                 <div class="image">
                                     <img src="/jyapp/big-member/image/img-empty.png">

+ 3 - 2
src/jfw/modules/app/src/web/templates/dataPack/recharge.html

@@ -20,7 +20,7 @@
         <div class="j-main">
             <van-cell-group>
               <van-cell center title="充值条数" is-link :value="charge.count + '条'" @click="chargeCount.pickerShow = true"></van-cell>
-              <van-cell center title="有效期" is-link :value="charge.duration + '年'"></van-cell>
+              <van-cell center title="有效期" :value="charge.duration + '年'"></van-cell>
             </van-cell-group>
             <div class="spec-list-container">
               <div class="spec-title">请选择数据规格</div>
@@ -50,7 +50,7 @@
             </div>
         </div>
         <div class="j-footer">
-          <pay-order-template ref="couponRef" :config="bottomConf" @update="updateS"></pay-order-template>
+          <pay-order-template ref="couponRef" :config="bottomConf" @update="updateS" @save="savePageState"></pay-order-template>
         </div>
         <van-popup
           v-model="chargeCount.pickerShow"
@@ -85,6 +85,7 @@
           confirm-button-text="我知道了"
           confirm-button-color="#2abed1"
           class="question-tip"
+          :style="{ top: '50%' }"
           @confirm="dialog.question = false">
           <div class="content-list">
             <div class="content-item">

+ 23 - 2
src/web/staticres/common-module/order-list/js/order-list.js

@@ -101,6 +101,7 @@ var vm = new Vue({
     }
   },
   computed: {
+    // 取当前tab所循环数据的引用
     tabState: function () {
       return this.tabStateMap[this.tabActiveName]
     },
@@ -131,13 +132,13 @@ var vm = new Vue({
     } else if (tab !== '' && tab < this.tabList.length) {
       this.tabActiveName = this.tabList[tab].name
     }
-
-    this.reStoreState()
   },
   mounted: function () {
+    this.reStoreState()
     utils.iosBackRefresh()
   },
   methods: {
+    // 设置页面url参数
     setUrlQuery: function () {
       var index = this.tabActive.type
       var active = utils.getParam('active')
@@ -189,6 +190,7 @@ var vm = new Vue({
         confirmButtonText: '我知道了'
       })
     },
+    // 重置列表数据
     resetState: function (type) {
       var rState = {
         refreshing: false,
@@ -294,6 +296,7 @@ var vm = new Vue({
         _this.preSortListItem(item)
       })
     },
+    // 预处理每一项
     preSortListItem: function (order) {
       // 计算订单状态和订单状态文字对应的className
       var calcOrderState = this.calcOrderState(order)
@@ -341,6 +344,12 @@ var vm = new Vue({
         $data = JSON.parse($data)
         this.tabActiveName = $data.tabActiveName || 0
         Object.assign(this.tabStateMap, $data.tabStateMap)
+
+        setTimeout(function () {
+          // 恢复滚动高度
+          this.setScrollTop(this.tabState.scrollTop)
+        }.bind(this), 0)
+
         sessionStorage.removeItem(this.sessStorageKey)
       }
 
@@ -1229,6 +1238,7 @@ var vm = new Vue({
         }
       }
     },
+    // 数据导出订单卡片信息整理
     getHistoryDataInfoList: function (order) {
       var infoList = []
       // 关键词项
@@ -1277,6 +1287,7 @@ var vm = new Vue({
       infoList = [keyword, dataCount, dataType, date]
       return infoList 
     },
+    // 超级订阅订单卡片信息整理
     getVipSubInfoList: function (order) {
       var infoList = []
       var info = this.getVipSubInfo(order)
@@ -1650,6 +1661,7 @@ var vm = new Vue({
       }
       return [region_vip, industry_vip]
     },
+    // 课程订单卡片信息整理
     getCourseInfo: function (order) {
       var infoList = []
       var filterInfo = JSON.parse(order.filter)
@@ -1685,6 +1697,7 @@ var vm = new Vue({
       }
       return infoList 
     },
+    // 数据报告订单卡片信息整理
     getDataReportInfo: function (order) {
       var infoList = []
       var filterInfo = JSON.parse(order.filter)
@@ -1705,6 +1718,7 @@ var vm = new Vue({
       }
       return infoList 
     },
+    // 企业商机订单卡片信息整理
     getEntnicheInfo: function (order) {
       var filterInfo = JSON.parse(order.filter)
       
@@ -1726,6 +1740,7 @@ var vm = new Vue({
       
       return [entName, teamCount, userDate] 
     },
+    // 大会员订单卡片信息整理
     getBigMemberInfo: function (order) {
       var filterInfo = JSON.parse(order.filter)
       var level = filterInfo.level
@@ -1770,6 +1785,7 @@ var vm = new Vue({
       
       return [levelInfo, duration, userDate] 
     },
+    // 大会员补充包订单卡片信息整理
     getBigMemberExInfo: function (order) {
       var productType = order.product_type
       var filterInfo = JSON.parse(order.filter)
@@ -1836,6 +1852,7 @@ var vm = new Vue({
       
       return infoList
     },
+    // 大会员子账号订单卡片信息整理
     getBigMemberSubCountInfo: function (order) {
       var filterInfo = JSON.parse(order.filter)
       var level = filterInfo.level
@@ -1874,6 +1891,7 @@ var vm = new Vue({
 
       return [levelInfo, date, payCount, freeCount]
     },
+    // 招标文件解读订单卡片信息整理
     getZBFileAnalysisInfo: function (order) {
       var filterInfo = JSON.parse(order.filter)
       var prodType = {
@@ -1893,6 +1911,7 @@ var vm = new Vue({
       }
       return [prodType, buyCount, date] 
     },
+    // 剑鱼币解读订单卡片信息整理
     getJianyuCoinInfo: function (order) {
       var filterInfo = JSON.parse(order.filter)
       var prodType = {
@@ -1912,6 +1931,7 @@ var vm = new Vue({
       }
       return [prodType, buyCount, date] 
     },
+    // 数据包订单卡片信息整理
     getDataPackInfo: function (order) {
       var filterInfo = JSON.parse(order.filter)
       var prodType = {
@@ -1942,6 +1962,7 @@ var vm = new Vue({
       specs.text = specMap[filterInfo.pType]
       return [prodType, buyCount, date, specs] 
     },
+    // 页面跳转
     goToLink: function (href) {
       this.saveState()
       location.href = href

+ 11 - 11
src/web/templates/weixin/commonPay/myOrder.html

@@ -37,25 +37,25 @@
             class="j-container"
         >
             <van-tab
-                v-for="(item, index) in tabList"
+                v-for="(tab, index) in tabList"
                 :key="index"
-                :title="item.label"
-                :name="item.name">
-                <van-pull-refresh v-model="tabState.refreshing" @refresh="onRefresh">
+                :title="tab.label"
+                :name="tab.name">
+                <van-pull-refresh v-model="tabStateMap[tab.name].refreshing" @refresh="onRefresh">
                     <van-list
-                        v-model="tabState.loading"
-                        :finished="tabState.finished"
-                        :offset="tabState.offset"
-                        :finished-text="tabState.list.length === 0 ? '' : '没有更多了'"
+                        v-model="tabStateMap[tab.name].loading"
+                        :finished="tabStateMap[tab.name].finished"
+                        :offset="tabStateMap[tab.name].offset"
+                        :finished-text="tabStateMap[tab.name].list.length === 0 ? '' : '没有更多了'"
                         @load="onLoad"
                         class="more-list"
                         ref="vanList">
                         <div class="order-list">
                             <div
                                 class="j-order-card order-list-item"
-                                v-for="(item, index) in tabState.list"
+                                v-for="(item, index) in tabStateMap[tab.name].list"
                                 :order-id="item.order_code"
-                                :key="item.order_code + '-' +tabActiveName">
+                                :key="item.order_code">
                                 <div class="order-item-header">
                                     <div class="o-i-h-left">${ calcTime(item) }</div>
                                     <div class="o-i-h-right">
@@ -116,7 +116,7 @@
                         </div>
                     </van-list>
                 </van-pull-refresh>
-                <div class="empty-container" v-show="tabState.list.length === 0 && tabState.loaded && !tabState.loading">
+                <div class="empty-container" v-show="tabStateMap[tab.name].list.length === 0 && tabStateMap[tab.name].loaded && !tabStateMap[tab.name].loading">
                     <div class="empty-content-position">
                         <div class="image">
                             <img src="/big-member/image/img-empty.png">

+ 3 - 2
src/web/templates/weixin/dataPack/recharge.html

@@ -31,7 +31,7 @@
         <div class="j-main">
             <van-cell-group>
               <van-cell center title="充值条数" is-link :value="charge.count + '条'" @click="chargeCount.pickerShow = true"></van-cell>
-              <van-cell center title="有效期" is-link :value="charge.duration + '年'"></van-cell>
+              <van-cell center title="有效期" :value="charge.duration + '年'"></van-cell>
             </van-cell-group>
             <div class="spec-list-container">
               <div class="spec-title">请选择数据规格</div>
@@ -61,7 +61,7 @@
             </div>
         </div>
         <div class="j-footer">
-          <pay-order-template ref="couponRef" :config="bottomConf" @update="updateS"></pay-order-template>
+          <pay-order-template ref="couponRef" :config="bottomConf" @update="updateS" @save="savePageState"></pay-order-template>
         </div>
         <van-popup
           v-model="chargeCount.pickerShow"
@@ -96,6 +96,7 @@
           confirm-button-text="我知道了"
           confirm-button-color="#2abed1"
           class="question-tip"
+          :style="{ top: '50%' }"
           @confirm="dialog.question = false">
           <div class="content-list">
             <div class="content-item">