除模糊搜索外基本实现

pages/course/index.vue

@@ -16,79 +16,85 @@
     </u-navbar>
     <view v-show="!show">
       <view style="position: fixed; width: 100%; z-index: 999">
-        <view class="bg_color"></view>
         <view class="check_ck">
-          <view class="checked">
-            <!-- {{selObj.pName}}-{{selObj.bName}} -->
-            <view class="check_title"
-              >{{ selObj.eName }}：{{ selObj.aliasName }}</view
-            >
-            <view class="again_ck" @click="openLeft()">
-              <view style="color: #007aff; font-size: 32rpx">重新选择</view>
-              <u-icon name="list" color="#007AFF" size="40"></u-icon>
-            </view>
-          </view>
           <view style="display: flex; align-items: center">
             <view style="margin: 0 auto">
               <u-tabs
                 :list="courseLists"
-                height="97"
+                height="70"
                 :current="current"
                 @change="change"
                 :scrollable="false"
               ></u-tabs>
             </view>
           </view>
-        </view>
-
-        <!-- <u-line color="#D6D6DB" /> -->
-        <view class="menuSel" v-show="current == 0">
-          <scroll-view class="r_sliper" scroll-x="true">
-            <view
-              v-for="(item, index) in sList"
-              :key="index"
-              style="margin-right: 20rpx; display: inline-block"
-            >
+          <view class="check_search u-flex">
+            <view class="check_level u-flex" @click="openLeft()">
+              <view class="u-line-1"
+                >{{ selObj.eName }}：{{ selObj.aliasName }}</view
+              >
+              <u-icon name="arrow-down-fill" color="#000000" size="20"> </u-icon
+            ></view>
+            <view class="line">|</view>
+            <view class="check_search_input u-flex">
+              <img src="../../static/icon/icon-search.png" />
+              <u-input
+                style="padding-left: 10rpx"
+                v-model="paramList[current].goodsName"
+                :type="type"
+                :border="border"
+                placeholder="搜索"
+              />
+            </view>
+          </view>
+          <view class="menuSel" v-show="current == 0">
+            <scroll-view class="r_sliper" scroll-x="true">
               <view
-                :class="paramList[0].subjectId == item.id ? 'r_t1' : 'r_t2'"
-                @click="cMenu(item.id)"
+                v-for="(item, index) in sList"
+                :key="index"
+                style="margin-right: 20rpx; display: inline-block"
               >
-                {{ item.subjectName }}
+                <view
+                  :class="paramList[0].subjectId == item.id ? 'r_t1' : 'r_t2'"
+                  @click="cMenu(item.id)"
+                >
+                  {{ item.subjectName }}
+                </view>
               </view>
-            </view>
-          </scroll-view>
-        </view>
-        <view class="menuSel" v-show="current == 1">
-          <scroll-view class="r_sliper" scroll-x="true">
-            <view
-              v-for="(item, index) in sList"
-              :key="index"
-              style="margin-right: 20rpx; display: inline-block"
-            >
+            </scroll-view>
+          </view>
+          <view class="menuSel" v-show="current == 1">
+            <scroll-view class="r_sliper" scroll-x="true">
               <view
-                :class="paramList[1].subjectId == item.id ? 'r_t1' : 'r_t2'"
-                @click="cMenu1(item.id)"
+                v-for="(item, index) in sList"
+                :key="index"
+                style="margin-right: 20rpx; display: inline-block"
               >
-                {{ item.subjectName }}
+                <view
+                  :class="paramList[1].subjectId == item.id ? 'r_t1' : 'r_t2'"
+                  @click="cMenu1(item.id)"
+                >
+                  {{ item.subjectName }}
+                </view>
               </view>
-            </view>
-          </scroll-view>
-        </view>
-        <view class="menuSel" v-show="current == 2">
-          <scroll-view class="r_sliper" scroll-x="true">
-            <view
-              v-for="(item, index) in sList"
-              :key="index"
-              style="margin-right: 20rpx; display: inline-block"
-            >
+            </scroll-view>
+          </view>
+          <view class="menuSel" v-show="current == 2">
+            <scroll-view class="r_sliper" scroll-x="true">
               <view
-                :class="paramList[2].subjectId == item.id ? 'r_t1' : 'r_t2'"
-                @click="cMenu2(item.id)"
+                v-for="(item, index) in sList"
+                :key="index"
+                style="margin-right: 20rpx; display: inline-block"
               >
-                {{ item.subjectName }}
+                <view
+                  :class="paramList[2].subjectId == item.id ? 'r_t1' : 'r_t2'"
+                  @click="cMenu2(item.id)"
+                >
+                  {{ item.subjectName }}
+                </view>
               </view>
-            </view>
-          </scroll-view>
+            </scroll-view>
+          </view>
         </view>
       </view>
       <view v-show="current == 0" class="contents">
@@ -341,39 +347,43 @@
         </view>
       </view>
     </view>
-    <view v-show="show" class="popuBox">
-      <view class="flex-d">
-        <view class="contentZ">
-          <view class="lzs">
-            <view
-              class="tylsz"
-              v-for="(item, index) in eList"
-              :key="index"
-              @click="active1(item)"
-              :class="item.id === selObj.eId ? 'activeStys' : ''"
-              >{{ item.educationName }}</view
-            >
-          </view>
-          <view class="rzs">
-            <!-- {{ item.projectName }}-{{ item.businessName }} -->
-            <view
-              class="tylszB"
-              v-for="(item, index) in bList"
-              :key="index"
-              @click="active2(item)"
-              :class="item.id === selObj.bId ? 'activeStys2' : ''"
-              >{{ item.aliasName }}</view
-            >
+    <u-popup v-model="show" mode="bottom" border-radius="32">
+      <view class="popuBox">
+        <view class="popuBox-title">选择分类</view>
+        <view class="flex-d">
+          <view class="contentZ">
+            <view class="lzs">
+              <view
+                class="tylsz u-flex"
+                v-for="(item, index) in eList"
+                :key="index"
+                @click="active1(item)"
+                :class="item.id === selObj.eId ? 'activeStys' : 'b-l-eee'"
+                ><view style="padding-left: 30rpx">{{
+                  item.educationName
+                }}</view></view
+              >
+            </view>
+            <view class="rzs">
+              <view
+                class="tylszB"
+                v-for="(item, index) in bList"
+                :key="index"
+                @click="active2(item)"
+                :class="item.id === selObj.bId ? 'activeStys2' : ''"
+                >{{ item.aliasName }}</view
+              >
+            </view>
           </view>
         </view>
       </view>
-    </view>
+    </u-popup>
   </view>
 </template>
 
 <script>
 import { mapGetters } from "vuex";
-import config from '@/common/config'
+import config from "@/common/config";
 export default {
   components: {},
   data() {
@@ -404,6 +414,7 @@ export default {
           goodsType: 1,
           subjectId: 0,
           sortType: 1,
+          goodsName: "",
         },
         {
           pageNum: 1,
@@ -413,6 +424,7 @@ export default {
           goodsType: 2,
           subjectId: 0,
           sortType: 1,
+          goodsName: "",
         },
         {
           pageNum: 1,
@@ -422,6 +434,7 @@ export default {
           goodsType: 6,
           subjectId: 0,
           sortType: 1,
+          goodsName: "",
         },
       ],
       list1: [],
@@ -642,38 +655,39 @@ page {
 }
 </style>
 <style scoped lang="scss">
-.bg_color {
-  width: 100%;
-  height: 16rpx;
-  background-color: #eaeef1;
-}
 .check_ck {
-  height: 211rpx;
   background: #ffffff;
-  box-shadow: 0rpx 5rpx 5rpx 1rpx rgba(1, 99, 235, 0.05);
-  border-radius: 24rpx 24rpx 0rpx 0rpx;
-  padding: 0 38rpx;
+  padding: 0 38rpx 24rpx;
   .again_ck {
     width: 30%;
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
-}
-.checked {
-  display: flex;
-  justify-content: space-between;
-  height: 108rpx;
-  line-height: 108rpx;
-  border-bottom: 1rpx solid #eeeeee;
-  font-size: 28rpx;
-  .check_title {
-    font-size: 32rpx;
-    font-weight: 500;
-    color: #333;
-    white-space: nowrap;
-    width: 70%;
-    overflow-x: hidden;
+  .check_search {
+    border: 2rpx solid #333333;
+    border-radius: 100rpx;
+    margin-top: 32rpx;
+    padding: 0 28rpx;
+    height: 72rpx;
+    .check_level {
+      font-size: 28rpx;
+      .u-line-1 {
+        width: 160rpx;
+        margin-right: 8rpx;
+      }
+    }
+    .line {
+      margin: -10rpx 18rpx 0 20rpx;
+      color: #d9d9d9;
+    }
+    .check_search_input {
+      flex: 1;
+      img {
+        width: 36rpx;
+        height: 36rpx;
+      }
+    }
   }
 }
 .contents {
@@ -688,45 +702,47 @@ page {
   margin-top: 20%;
 }
 .popuBox {
-  top: 92px;
+  border-radius: 30% !important;
+  height: 70vh;
   width: 100%;
-  bottom: 0;
-  position: absolute;
-  overflow-y: scroll;
-  overflow-x: hidden;
   background-color: #ffffff;
+  .popuBox-title {
+    border-radius: 30%;
+    font-weight: bold;
+    color: #222222;
+    font-size: 32rpx;
+    height: 100rpx;
+    line-height: 100rpx;
+    text-align: center;
+  }
 }
 .activeStys2 {
-  background: #007aff !important;
-  color: #ffffff;
+  color: #007aff;
 }
 .tylszB {
-  text-align: center;
-  padding: 20rpx 10rpx;
+  margin-bottom: 56rpx;
   background: #ffffff;
-  border: 2rpx solid #eeeeee;
-  border-radius: 16rpx;
-  margin-top: 15rpx;
-  font-size: 30rpx;
+  font-size: 32rpx;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 .activeStys {
-  background: linear-gradient(
-    90deg,
-    rgba(1, 94, 234, 0.2),
-    rgba(255, 255, 255, 0.6)
-  );
-  border-radius: 16rpx;
+  height: 32rpx;
   font-weight: bold;
-  color: #007aff !important;
+  color: #222222 !important;
+  border-left: 6rpx solid #0080ff;
+}
+.b-l-eee {
+  border-left: 6rpx solid #ffffff;
 }
 .tylsz {
   color: #666;
   font-size: 30rpx;
-  padding: 20rpx 10rpx;
-  margin-top: 15rpx;
+  font-size: 32rpx;
+  color: #999999;
+  margin-bottom: 40rpx;
+  vertical-align: bottom;
   white-space: nowrap;
 }
 .popup_t1 {
@@ -739,24 +755,21 @@ page {
   font-size: 27rpx;
 }
 .flex-d {
-  height: 100%;
   background-color: #ffffff;
-  padding: 0 5%;
   font-size: 30rpx;
 }
 .contentZ {
   display: flex;
-  height: 100%;
-  padding: 10rpx;
-
+  height: calc(70vh - 100rpx);
   .lzs {
-    width: 200rpx;
+    width: 208rpx;
     height: 100%;
     overflow-y: scroll;
+    border-right: 2rpx solid #e8e8e8;
   }
 
   .rzs {
-    margin-left: 40rpx;
+    margin-left: 32rpx;
     flex: 1;
     height: 100%;
     overflow-y: scroll;
@@ -862,10 +875,11 @@ page {
   // top: 235rpx;
 }
 .menuSel {
-  width: 100%;
+  margin-top: 32rpx;
+  // width: 100%;
   // height: 70rpx;
-  padding: 30rpx 0rpx;
-  background: #eaeef1;
+  // padding: 30rpx 0rpx;
+  // background: #eaeef1;
   white-space: nowrap;
   overflow: hidden;
 }
@@ -873,21 +887,17 @@ page {
   padding: 0 20rpx;
 }
 .r_t1 {
-  // height: 48rpx;
-  background: #007aff;
+  background: #f2f7ff;
   border-radius: 8rpx;
   padding: 9rpx 21rpx;
-  // margin-top: 11rpx;
-  color: #ffffff;
+  font-size: 26rpx;
+  color: #3f8dfd;
 }
 .r_t2 {
-  // height: 48rpx;
-  background: #ffffff;
-  border: 2rpx solid #eeeeee;
+  background: #f7f8fc;
   border-radius: 8rpx;
   padding: 9rpx 21rpx;
-  // margin-top: 11rpx;
   color: #666666;
-  font-size: 30rpx;
+  font-size: 26rpx;
 }
 </style>

pages3/polyv/detail.vue

@@ -2080,14 +2080,14 @@ export default {
      * 获取讲义权限
      */
     courseHandouts() {
-        this.$api.courseHandouts(this.goodsData.handoutsId).then((res) => {
-          this.courseHandoutsData = [res.data.data];
+      // this.$api.courseHandouts(this.goodsData.handoutsId).then((res) => {
+      //   this.courseHandoutsData = [res.data.data];
+      // });
+      this.$api
+        .getHandoutList({ handoutsId: this.goodsData.handoutsId })
+        .then((res) => {
+          this.courseHandoutsData = res.data.rows;
         });
-      // this.$api
-      //   .getHandoutList({ handoutsId: this.goodsData.handoutsId })
-      //   .then((res) => {
-      //     this.courseHandoutsData = res.data.rows;
-      //   });
     },
     findMenuNextSection(index) {
       for (let i = index + 1; i < this.reMenuList.length; i++) {