Merge branch 'dev/v1.0.9_zsy' of jianyu/page_pc_stationSocial into feature/v1.0.9

src/components/CustomerInfo.vue

@@ -18,7 +18,7 @@
         </template>
       </el-input>
     </div>
-    <div class="info-content" v-loading="loading" @scroll="infoContentScroll">
+    <div class="info-content" v-loading="loading">
       <div class="item_" v-show="active === 1">
         <div v-show="showProblemList && userInfo.isTourist !== 2">
           <problemList :uid="userId" :list="clintProblemInfo.list" @back="viewMoreProblem"></problemList>
@@ -44,7 +44,7 @@
               <span>用户问题标签</span>
               <span class="view-more" @click="viewMoreProblem(true)" v-if="clintProblemInfo.list.length > 0">更多<i class="el-icon-arrow-right"></i></span>
             </template>
-            <tagRow :show-select="true" :uid="userId" :info="clintProblemInfo.current_cycle"/>
+            <tagRow v-if="clintProblemInfo.finished" :show-select="true" :uid="userId" :info="clintProblemInfo.current_cycle"/>
           </Cell>
           <Cell title="订单信息" v-if="userInfo.isTourist !== 2">
             <div class="item-main order" v-if="listInfo.list && listInfo.list.length > 0">
@@ -214,7 +214,7 @@ export default {
         list: [],
         current_cycle: {},
         page: 1,
-        size: 15,
+        size: 500,
         isLoading: false,
         finished: false
       },
@@ -637,11 +637,8 @@ export default {
     formatAreaText (value, old) {
       return value === -1 ? '全国' : ((old ? (value - old) : value) + '个省')
     },
-    async getProblemInfo (page) {
-      if (this.clintProblemInfo.isLoading) return
-      if (page) {
-        this.clintProblemInfo.page = page
-      }
+    // 获取当前用户的问题标签
+    async getProblemInfo () {
       const params = {
         uid: this.userId,
         page: this.clintProblemInfo.page,
@@ -652,34 +649,17 @@ export default {
       this.clintProblemInfo.isLoading = false
       if (code === 0 && data) {
         const list = data.list || []
-        if (this.clintProblemInfo.page === 1) {
-          this.clintProblemInfo.list = []
-          this.clintProblemInfo.current_cycle = data.current_cycle || {}
-        }
-        if (list.length > 0) {
-          this.clintProblemInfo.list = this.clintProblemInfo.list.concat(list)
-        } else {
-          this.clintProblemInfo.finished = true
-        }
+        this.clintProblemInfo.current_cycle = data.current_cycle || {}
+        this.clintProblemInfo.list = list
       }
+      this.clintProblemInfo.finished = true
     },
     // 用户标签查看更多
     viewMoreProblem (val) {
       this.showProblemList = val
-      this.clintProblemInfo.finished = false
-      this.getProblemInfo(1)
-    },
-    infoContentScroll: throttle(function ($event) {
-      if (this.clintProblemInfo.finished || !this.showProblemList) return
-
-      const { scrollTop, scrollHeight, clientHeight } = $event.target
-      const isScrolledToBottom = scrollHeight - (scrollTop + clientHeight) - 100 <= 0
-
-      if (isScrolledToBottom) {
-        this.clintProblemInfo.page++
-        this.getProblemInfo()
-      }
-    }, 300)
+      this.clintProblemInfo.list = []
+      this.getProblemInfo()
+    }
   }
 }
 </script>

src/components/problem-tag/select-tag.vue

@@ -1,35 +1,35 @@
 <template>
   <el-popover
       class="select-tag-container"
+      ref="selectTagRef"
       placement="bottom-end"
       trigger="manual"
       :append-to-body="false"
       popper-class="select-tag-popover"
       :visible-arrow="false"
       :offset="0"
+      :width="childrenList.length > 0 ? 393 : 200"
       v-model="show">
     <div class="selector-container">
       <div class="selector-content">
+          <ul class="level-box level-2-box" v-if="childrenList.length > 0">
+            <li class="check-item" :class="{'active': child.checked }" v-for="(child, cIndex) in childrenList" :key="child.id">
+              <el-checkbox v-model="child.checked"   @change="onChildChange($event, child, cIndex)" :label="child.id" >{{child.name}}</el-checkbox>
+            </li>
+          </ul>
         <ul class="level-box level-1-box">
-          <li class="level-title">一级分类</li>
-          <li class="check-item" :class="{'active': pActive === pIndex}" @mouseover="onLevel1MouseOver(parent, pIndex)" @mouseout="onLevel1MouseOut($event)" v-for="(parent, pIndex) in list" :key="parent.id" >
+          <li class="check-item" :class="{'active': parent.checked }" @mouseover="onLevel1MouseOver(parent, pIndex)" @mouseout="onLevel1MouseOut($event)" v-for="(parent, pIndex) in list" :key="parent.id" >
             <el-checkbox v-model="parent.checked" :indeterminate="parent.indeterminate" :label="parent.id"  @change="onParentChange($event, parent, pIndex)">{{parent.name}}</el-checkbox>
             <i class="el-icon-arrow-right" v-if="parent.children.length > 0"></i>
           </li>
         </ul>
-        <ul class="level-box level-2-box">
-          <li class="level-title">二级分类</li>
-          <li class="check-item" v-for="(child, cIndex) in childrenList" :key="child.id">
-            <el-checkbox v-model="child.checked"   @change="onChildChange($event, child, cIndex)" :label="child.id" >{{child.name}}</el-checkbox>
-          </li>
-        </ul>
       </div>
       <div class="selector-footer">
         <el-button type="default" @click="cancelHandle">取消</el-button>
         <el-button type="primary" @click="confirmHandle">确定</el-button>
       </div>
     </div>
-    <div class="handle-btn" @click="show = !show" slot="reference">选择标签<i :class="show ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"></i></div>
+    <div class="handle-btn" @click.stop="showPop" slot="reference">选择标签<i :class="show ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"></i></div>
   </el-popover>
 </template>
 
@@ -59,6 +59,10 @@ export default {
   },
   created () {
     this.getList()
+    const _this = this
+    document.addEventListener('click', function () {
+      _this.show = false
+    })
   },
   methods: {
     async getList () {
@@ -90,9 +94,18 @@ export default {
       if (!this.pTimer) {
         this.pTimer = setTimeout(() => {
           this.onOpenLevel2(parent, pIndex)
+          this.initPopoverPosition()
         }, 150)
       }
     },
+    initPopoverPosition () {
+      const popover = this.$refs.selectTagRef
+      if (popover) {
+        this.$nextTick(() => {
+          popover.updatePopper()
+        })
+      }
+    },
     // 父级选中/取消选中
     onParentChange (checked, parent, pIndex) {
       this.onOpenLevel2(parent, pIndex)
@@ -160,10 +173,15 @@ export default {
         }
       }
     },
+    showPop () {
+      this.show = !this.show
+      this.childrenList = this.list[0].children
+      this.pActive = 0
+    },
     cancelHandle () {
       this.show = false
     },
-    confirmHandle: debounce(async function() {
+    confirmHandle: debounce(async function () {
       const ids = this.getStatus()
       if (!ids) {
         this.$toast('请选择标签!')
@@ -193,26 +211,27 @@ export default {
     }
     .selector-content {
       display: flex;
-      min-height: 300px;
+      height: 250px;
       .level-box{
-        flex:1;
-        width: 197px;
+        height:100%;
+        overflow-y: auto;
+        background: #fff;
+        padding-top: 16px;
       }
       .level-1-box {
-        border-right: 1px solid #eee;
+        width:200px;
+        border-radius: 8px 8px 0 0;
       }
       .level-2-box {
-        transition: all 1s ;
-      }
-      .level-title{
-        padding: 12px 16px;
-        font-size: 14px;
-        line-height: 22px;
-        color: #999;
+        box-sizing: border-box;
+        width:193px;
+        border-right: 1px solid #eee;
+        border-top-left-radius: 8px;
       }
       .check-item{
         padding: 5px 8px;
         display: flex;
+        width: 100% !important;
         justify-content: space-between;
         align-items: center;
         &:hover{
@@ -224,8 +243,8 @@ export default {
       }
     }
     .selector-footer{
-      padding: 12px 0;
-      text-align: center;
+      padding: 12px 18px 12px 0;
+      text-align: right;
       border-top:1px solid #eee;
       .el-button{
         padding: 4px 23px;
@@ -239,9 +258,10 @@ export default {
   }
   ::v-deep {
     .el-popover.select-tag-popover {
-      max-width: 394px;
+      max-width: 393px;
       min-width: 200px;
       padding: 0;
+      box-sizing: border-box;
       border-radius: 8px;
       border: 1px solid #2ABED1;
       box-shadow: 0 0 28px 0 rgba(0, 0, 0, 0.08);

src/components/problem-tag/tag-row.vue

@@ -7,7 +7,7 @@
     <div class="tag-row" v-if="tagList.length > 0">
       <span class="tag-col" v-for="(item, index) in tagList" :key="'tag_' + tagIdList[index]">{{ item }}</span>
     </div>
-    <span class="tag-col" v-else>暂无</span>
+    <span class="tag-col no-tip" v-else>暂无</span>
   </div>
 </template>
 <script>
@@ -69,7 +69,11 @@ export default {
       border-radius: 4px;
       margin-right: 8px;
       margin-bottom: 8px;
-      //flex:1;
+    }
+    .no-tip {
+      padding:0;
+      border: none;
+      background: unset;
     }
   }
 </style>