Merge branch 'master' of https://gitee.com/jyyforjava/hive-app

li-guang

2021-01-05 01b55d7e82c3b13554a412e9c5be0fc96a4906a3

 hive-app/pages/mine/knowledge.vue

@@ -1,48 +1,108 @@
<template>
   <!-- 知识库 -->
   <view>
      <scroll-view class="list-left" scroll-y>
         <view v-for="(item,index) in list" @click="show(item)">
            {{item.primaryTitle}}
            <view v-for="sub in item.subTitle" v-show="item.isShow">
               {{sub}}
   <!-- 当前客户 -->
   <view class="container">
      <view class="list">
         <scroll-view class="list-left" scroll-y="true">
            <view class="list-left-row" 
               v-for="(item,index) in typeList" 
               :class="index==selectIndex?'active':''"
               @click="changeType(item.id, index)">
                  <text>{{item.name}}</text>
            </view>
         </view>
      </scroll-view>
      <scroll-view class="list-right"></scroll-view>
         </scroll-view>
         <scroll-view class="list-right" scroll-y="true">
            <navigator :url="'../productDetail/index?id='+item.id" hover-class="none" v-for="item in list">
               <view class="list-right-row">
                  <image class="product-img" :src="item.img?item.img:'../../../static/images/no-img.png'"></image>
                  <view class="flex-1">
                     <text>{{item.name}}</text>
                     <view class="flex justify-between mt-15">
                        <text class="price">￥{{item.price}}</text>
                     </view>
                  </view>
               </view>
            </navigator>
         </scroll-view>
      </view>
   </view>
</template>

<script>
   export default{
   export default {
      data(){
         return{
            primaryTitle:['院装产品','美容套餐','美容客装','美容试装'],
            subTitle:['院装产品','院装产品','院装产品','院装产品'],
            list:[
               {
                  primaryTitle:'院装产品',
                  subTitle:['院装产品','院装产品','院装产品','院装产品'],
                  isShow:false
               },
               {
                  primaryTitle:'美容套餐',
                  subTitle:['美容套餐','美容套餐','美容套餐','美容套餐'],
                  isShow:false
               }
            ],
            typeList: [{
               name: '312',
               id: 2
            }], 
            list: [{
               name: '312',
               id: 2
            }],
            selectIndex: 0
         }
      },
      onLoad(options) {
         this.loadTypeList()
      },
      methods:{
         show(item){
            item.isShow=!item.isShow
         loadTypeList(){
            this.$httpUtils.request('/api/know/findKnowledgeType').then((res) => {
               if(res.status == 200){
                  this.typeList = res.rows;
               }
            })
         }
      }
   }
</script>

<style>
   page{
      height: 100%;
   }
   .container{
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 10px 0 0;
      box-sizing: border-box;
   }
   .list{
      flex: 1;
      display: flex;
      overflow: hidden;
   }
   .list-left{
      width: 100px;
      width: 170rpx;
      background: #F6F6F8;
      border-radius: 4px;
   }
   .list-right{
      flex: 1;
   }
   .list-left-row{
      padding: 10px;
      color: #8c9fad;
      font-size: 13px;
   }
   .list-left-row.active{
      background: #FFFFFF;
      color: #000000;
   }
   .list-right-row{
      display: flex;
      align-items: center;
      padding: 10px;
      margin: 0 10px 10px;
      border: 1px solid #EDEAF4;
      box-shadow:0 6px 6px rgba(237,234,244,0.5);
      border-radius: 4px;
      font-size: 13px;
   }
   .list-right-row .product-img{
      width: 66px;
      height: 66px;
      margin-right: 5px;
   }
</style>