学习中心页面开发

pages.json

@@ -1023,7 +1023,7 @@
         "pagePath": "pages/course/index",
         "iconPath": "static/nav2.png",
         "selectedIconPath": "static/nav2_on.png",
-        "text": "选课"
+        "text": "学习"
       },
       {
         "pagePath": "pages/shopping/shoppingCart",

pages/course/index.vue

@@ -1,8 +1,9 @@
 <template>
-  <view>
+  <view class="study-center">
     <u-navbar
       :is-back="false"
-      title="选课中心"
+      title="学习中心"
+      class="navbar"
       :border-bottom="false"
       title-color="#333333"
       back-icon-color="#ffffff"
@@ -14,282 +15,22 @@
         ></image>
       </view>
     </u-navbar>
-    <view v-show="!show">
-      <view
-        style="
-          position: fixed;
-          width: 100%;
-          z-index: 999;
-          background-color: #ffffff;
-        "
-      >
-        <u-line color="#D6D6DB" />
-        <view
-          style="
-            display: flex;
-            justify-content: space-between;
-            height: 78rpx;
-            line-height: 78rpx;
-            padding: 0 30rpx;
-            font-size: 28rpx;
-          "
-        >
-          <view
-            style="
-              color: #666666;
-              white-space: nowrap;
-              width: 80%;
-              overflow-x: hidden;
-            "
-            >{{ selObj.eName }}：{{ selObj.pName }}-{{ selObj.bName }}</view
-          >
-          <view
-            style="color: #007aff; width: 20%; font-size: 32rpx"
-            @click="openLeft()"
-            >重新选择</view
-          >
-        </view>
-        <u-line color="#D6D6DB" />
-        <view style="display: flex; align-items: center">
-          <view style="margin: 0 auto"
-            ><u-tabs
-              :list="list"
-              :current="current"
-              @change="change"
-              :scrollable="false"
-            ></u-tabs
-          ></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="paramList[0].subjectId == item.id ? 'r_t1' : 'r_t2'"
-                @click="cMenu(item.id)"
-              >
-                {{ item.subjectName }}
-              </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"
-            >
-              <view
-                :class="paramList[1].subjectId == item.id ? 'r_t1' : 'r_t2'"
-                @click="cMenu1(item.id)"
-              >
-                {{ item.subjectName }}
-              </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"
-            >
-              <view
-                :class="paramList[2].subjectId == item.id ? 'r_t1' : 'r_t2'"
-                @click="cMenu2(item.id)"
-              >
-                {{ item.subjectName }}
-              </view>
-            </view>
-          </scroll-view>
-        </view>
-      </view>
-      <view v-show="current == 0">
-        <view class="listBox">
-          <navigator
-            hover-class="none"
-            :url="'/pages3/course/detail?id=' + item.goodsId"
-            v-for="(item, index) in list1"
-            :key="index"
-          >
-            <view class="itemBox">
-              <image
-                :src="$method.splitImgHost(item.coverUrl, true)"
-                style="height: 367rpx; width: 100%; border-radius: 24rpx"
-              ></image>
-              <view
-                style="display: flex; margin-top: 13rpx; align-items: center"
-              >
-                <view class="yearTag" v-if="item.year">{{ item.year }}</view>
-                <view class="titleTag">{{ item.goodsName }}</view>
-              </view>
-              <view
-                style="
-                  display: flex;
-                  justify-content: space-between;
-                  margin-top: 13rpx;
-                "
-              >
-                <view class="noteTag"
-                  ><image
-                    src="/static/icon/wk_icon1.png"
-                    class="wk_icon"
-                  ></image>
-                  共 <text class="blackFont">{{ item.courseNum }}</text>
-                  <text class="margin30">课程</text>
-                  <text class="blackFont">{{ item.classHours || "-" }}</text>
-                  学时</view
-                >
-                <view class="priceTag">¥ {{ item.standPrice.toFixed(2) }}</view>
-              </view>
-            </view>
-          </navigator>
-          <view class="emptyTip" v-if="list1.length == 0"
-            >暂未上架相关网课~</view
-          >
-        </view>
-      </view>
-      <view v-show="current == 1">
-        <view class="listBox">
-          <navigator
-            hover-class="none"
-            :url="'/pages2/bank/detail?id=' + item.goodsId"
-            v-for="(item, index) in list2"
-            :key="index"
-          >
-            <view class="itemBox">
-              <image
-                :src="$method.splitImgHost(item.coverUrl, true)"
-                style="height: 367rpx; width: 100%; border-radius: 24rpx"
-              ></image>
-              <view
-                style="display: flex; margin-top: 13rpx; align-items: center"
-              >
-                <view class="yearTag" v-if="item.year">{{ item.year }}</view>
-                <view
-                  class="titleTag"
-                  style="display: flex; justify-content: space-between; flex: 1"
-                >
-                  <view style="flex: 1">{{ item.goodsName }}</view>
-
-                  <view class="priceTag"
-                    >¥ {{ item.standPrice.toFixed(2) }}</view
-                  >
-                </view>
-              </view>
-              <view
-                style="
-                  display: flex;
-                  justify-content: space-between;
-                  margin-top: 13rpx;
-                "
-                v-if="false"
-              >
-                <view class="noteTag"
-                  ><image
-                    src="/static/icon/wk_icon1.png"
-                    class="wk_icon"
-                  ></image>
-                  共 <text class="blackFont">6</text>
-                  <view class="margin30">张卷</view>
-                  <text class="blackFont">120</text>道题
-                </view>
-                <view class="priceTag">¥ {{ item.standPrice.toFixed(2) }}</view>
-              </view>
-            </view>
-          </navigator>
-          <view class="emptyTip" v-if="list2.length == 0"
-            >暂未上架相关题库~</view
-          >
-        </view>
-      </view>
-
-      <view v-show="current == 2">
-        <view class="listBox">
-          <navigator
-            hover-class="none"
-            :url="'/pages5/liveDetail/index?id=' + item.goodsId"
-            v-for="(item, index) in list3"
-            :key="index"
-          >
-            <view class="itemBox">
-              <image
-                :src="$method.splitImgHost(item.coverUrl, true)"
-                style="height: 367rpx; width: 100%; border-radius: 24rpx"
-              ></image>
-              <view
-                style="display: flex; margin-top: 13rpx; align-items: center"
-              >
-                <view class="yearTag" v-if="item.year">{{ item.year }}</view>
-                <view
-                  class="titleTag"
-                  style="display: flex; justify-content: space-between; flex: 1"
-                >
-                  <view style="flex: 1">{{ item.goodsName }}</view>
-
-                  <view class="priceTag"
-                    >¥ {{ item.standPrice.toFixed(2) }}</view
-                  >
-                </view>
-              </view>
-              <view
-                style="
-                  display: flex;
-                  justify-content: space-between;
-                  margin-top: 13rpx;
-                "
-                v-if="false"
-              >
-                <view class="noteTag">
-                  <image
-                    src="/static/icon/wk_icon1.png"
-                    class="wk_icon"
-                  ></image>
-                  <view class="priceTag"
-                    >¥ {{ item.standPrice.toFixed(2) }}</view
-                  >
-                </view>
-              </view>
-            </view>
-          </navigator>
-          <view class="emptyTip" v-if="list3.length == 0"
-            >暂未上架相关直播~</view
-          >
-        </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="item.id === 0 ? activeAll(1) : active1(item)"
-              :class="item.id === selObj.eId ? 'activeStys' : ''"
-              >{{ item.educationName }}</view
-            >
-          </view>
-          <view class="rzs">
-            <view
-              class="tylszB"
-              v-for="(item, index) in bList"
-              :key="index"
-              @click="item.id === 0 ? activeAll(2) : active2(item)"
-              :class="item.id === selObj.bId ? 'activeStys2' : ''"
-              >{{ item.projectName }}-{{ item.businessName }}</view
-            >
-          </view>
-        </view>
-      </view>
-    </view>
+		
+		<view class="no-course" v-if="false">
+			<image class="img" src="/static/no-course.png" mode="widthFix"></image>
+			<view class="title">暂无学习内容</view>
+			<view class="title">请先购买课程/题库</view>
+			<view class="btn" @click="goIndex">马上选课/选题</view>
+		</view>
+		
+		<view class="note-list">
+			<view class="text">继续教育-建造师-二级</view>
+			<u-icon name="arrow-down"></u-icon>
+		</view>
+		
+		<view class="note-modal">
+			
+		</view>
   </view>
 </template>
 
@@ -299,458 +40,96 @@ export default {
   components: {},
   data() {
     return {
-      show: false,
-      list: [
-        {
-          name: "网课",
-        },
-        {
-          name: "题库通",
-        },
-        {
-          name: "直播课",
-        },
-      ],
-      array: [
-        "全部",
-        "建设工程施工管理",
-        "机电全科",
-        "机电工程管理与实",
-        "机电全科",
-        "全科",
-      ],
-      current: 0,
-      menuIndex: 0,
-      menuIndex1: 0,
-      paramList: [
-        {
-          pageNum: 1,
-          pageSize: 10,
-          total: 0,
-          showStatus: 0,
-          goodsType: 1,
-          subjectId: 0,
-        },
-        {
-          pageNum: 1,
-          pageSize: 10,
-          total: 0,
-          showStatus: 0,
-          goodsType: 2,
-          subjectId: 0,
-        },
-        {
-          pageNum: 1,
-          pageSize: 10,
-          total: 0,
-          showStatus: 0,
-          goodsType: 6,
-          subjectId: 0,
-        },
-      ],
-      list1: [],
-      list2: [],
-      list3: [],
-      eList: [],
-      bList: [],
-      sList: [],
-      selObj: {
-        eName: "",
-        pName: "",
-        bName: "",
-        eId: 0,
-        bId: 0,
-        pId: 0,
-      },
+      
     };
   },
   onPullDownRefresh() {
-    let that = this;
-    this.initList();
-    setTimeout(function () {
-      uni.stopPullDownRefresh();
-    }, 500);
+    
   },
   onLoad(option) {
-    let eduStr = uni.getStorageSync("eduObj");
-    console.log(eduStr, 987);
-    if (eduStr) {
-      this.selObj = JSON.parse(eduStr);
-      this.subjectList({
-        businessId: this.selObj.bId,
-        projectId: this.selObj.pId,
-        educationId: this.selObj.eId,
-      });
-      this.mergeBusiness();
-    } else {
-      this.show = true;
-    }
-    this.initList();
+    
   },
   methods: {
-    mergeBusiness() {
-      this.paramList[0].educationTypeId = this.selObj.eId;
-      this.paramList[0].businessId = this.selObj.bId;
-      this.paramList[0].subjectId = 0;
-      this.paramList[1].educationTypeId = this.selObj.eId;
-      this.paramList[1].businessId = this.selObj.bId;
-      this.paramList[1].subjectId = 0;
-      this.paramList[2].educationTypeId = this.selObj.eId;
-      this.paramList[2].businessId = this.selObj.bId;
-      this.paramList[2].subjectId = 0;
-    },
-    subjectList(data) {
-      var self = this;
-      this.$api.subjectList(data).then((res) => {
-        if (res.data.code == 200) {
-          self.sList = res.data.rows;
-          let allItem = { id: 0, subjectName: "全部" };
-          self.sList.unshift(allItem);
-        }
-      });
-    },
-    active2(item) {
-      this.selObj.bId = item.id;
-      this.show = false;
-      this.selObj.pId = item.projectId;
-      this.selObj.bName = item.businessName;
-      this.selObj.pName = item.projectName;
-      uni.setStorageSync("eduObj", JSON.stringify(this.selObj));
-      this.subjectList({
-        businessId: item.id,
-        projectId: item.projectId,
-        educationId: this.selObj.eId,
-      });
-      this.mergeBusiness();
-      //初始化
-      this.initList();
-    },
-    businessList(data) {
-      var self = this;
-      this.$api.businessList(data).then((res) => {
-        if (res.data.code == 200) {
-          self.bList = res.data.rows;
-          console.log(self.bList, 66);
-        }
-      });
-    },
-    active1(item) {
-      this.selObj.eId = item.id;
-      this.selObj.eName = item.educationName;
-      this.businessList({ educationId: item.id });
-    },
-    educationList() {
-      var self = this;
-      this.$api.educationTypeList().then((res) => {
-        if (res.data.code == 200) {
-          self.eList = res.data.rows;
-          if (self.selObj.eId) {
-            self.businessList({ educationId: self.selObj.eId });
-          } else {
-            this.active1(self.eList[0]);
-          }
-        }
-      });
-    },
-    openLeft() {
-      this.show = true;
-    },
-    initList() {
-      this.paramList[0].pageNum = 1;
-      this.paramList[1].pageNum = 1;
-      this.list1 = [];
-      this.list2 = [];
-      this.list3 = [];
-      this.courseList();
-      this.bankList();
-      this.liveList();
-      this.educationList();
-    },
-    cMenu(index) {
-      this.paramList[0].pageNum = 1;
-      this.paramList[0].subjectId = index;
-      this.list1 = [];
-      //	this.menuIndex
-      this.courseList();
-    },
-    cMenu1(index) {
-      this.paramList[1].pageNum = 1;
-      this.paramList[1].subjectId = index;
-      this.list2 = [];
-      //	this.menuIndex1 = index;
-      this.bankList();
-    },
-
-    cMenu2(index) {
-      this.paramList[2].pageNum = 1;
-      this.paramList[2].subjectId = index;
-      this.list3 = [];
-      //	this.menuIndex1 = index;
-      this.liveList();
-    },
-    change(index) {
-      this.current = index;
-    },
-    //课程
-    courseList() {
-      var self = this;
-      var param = this.paramList[0];
-      this.$api.goodsList(param).then((res) => {
-        self.paramList[0].total = res.data.total;
-        self.list1.push.apply(self.list1, res.data.rows);
-        if (self.list1.length === res.data.total) {
-          self.paramList[0].showStatus = true;
-        }
-      });
-    },
-    //题库
-    bankList() {
-      var self = this;
-      var param = this.paramList[1];
-      this.$api.goodsList(param).then((res) => {
-        self.paramList[1].total = res.data.total;
-        self.list2.push.apply(self.list2, res.data.rows);
-        if (self.list2.length === res.data.total) {
-          self.paramList[1].showStatus = true;
-        }
-      });
-    },
-    //直播
-    liveList() {
-      var self = this;
-      var param = this.paramList[2];
-      this.$api.goodsList(param).then((res) => {
-        self.paramList[2].total = res.data.total;
-        self.list3.push.apply(self.list3, res.data.rows);
-        if (self.list3.length === res.data.total) {
-          self.paramList[2].showStatus = true;
-        }
-      });
-    },
+    goIndex() {
+			uni.switchTab({
+				url:'../index/index'
+			})
+		}
   },
   onReachBottom() {
-    if (this.current == 0) {
-      if (this.list1.length < this.paramList[0].total) {
-        this.paramList[0].pageNum++;
-        this.courseList();
-      }
-    }
-    if (this.current == 1) {
-      if (this.list2.length < this.paramList[1].total) {
-        this.paramList[1].pageNum++;
-        this.bankList();
-      }
-    }
-		if (this.current == 2) {
-		  if (this.list3.length < this.paramList[2].total) {
-		    this.paramList[2].pageNum++;
-		    this.liveList();
-		  }
-		}
+    
   },
   computed: { ...mapGetters(["userInfo"]) },
 };
 </script>
 <style >
-::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-  color: transparent;
-}
 page {
-  background-color: #eaeef1;
+  background-color: #EAEEF1;
 }
 </style>
 <style scoped lang="scss">
-.emptyTip {
-  color: #999999;
-  font-size: 32rpx;
-  text-align: center;
-  margin-top: 20%;
-}
-.popuBox {
-  top: 92px;
-  width: 100%;
-  bottom: 0;
-  position: absolute;
-  overflow-y: scroll;
-  overflow-x: hidden;
-  background-color: #ffffff;
-}
-.activeStys2 {
-  background: #007aff !important;
-  color: #ffffff;
-}
-.tylszB {
-  text-align: center;
-  padding: 20rpx 10rpx;
-  background: #ffffff;
-  border: 2rpx solid #eeeeee;
-  border-radius: 16rpx;
-  margin-top: 15rpx;
-  font-size: 30rpx;
-  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;
-  font-weight: bold;
-  color: #007aff !important;
-}
-.tylsz {
-  color: #666;
-  font-size: 30rpx;
-  padding: 20rpx 10rpx;
-  margin-top: 15rpx;
-  white-space: nowrap;
-}
-.popup_t1 {
-  padding-left: 35rpx;
-  border-bottom: 1rpx solid #eee;
-  height: 57rpx;
-  margin-top: 86rpx;
-  font-weight: bold;
-  color: #007aff;
-  font-size: 27rpx;
-}
-.flex-d {
-  height: 100%;
-  background-color: #ffffff;
-  padding: 0 5%;
-  font-size: 30rpx;
+.study-center {
+	
+	.navbar {
+		
+		/deep/ .u-navbar-inner {
+			margin-right: 0 !important;
+		}
+		
+		.slot-wrap {
+			width: 100%;
+		}
+	}
+	
+	.no-course {
+		margin: 80rpx auto 0;
+		text-align: center;
+		
+		.img {
+			width:360rpx;
+		}
+		
+		.title {
+			margin-top:10rpx;
+			font-size: 32rpx;
+			text-align: center;
+			color: #999999;
+		}
+		
+		.btn {
+			margin:40rpx auto 0;
+			width: 280rpx;
+			text-align: center;
+			line-height: 64rpx;
+			color:#fff;
+			font-size: 30rpx;
+			height: 64rpx;
+			background: #007AFF;
+			border-radius: 32rpx;
+		}
+	}
+	
+	
+	.note-list {
+		height: 80rpx;
+		background: #FFFFFF;
+		display: flex;
+		align-items: center;
+		padding:0 32rpx;
+		
+		.text {
+			flex:1;
+		}
+	}
+	
+	.note-modal {
+		position:absolute;
+		
+	}
+	
+	.course-list {
+		
+	}
 }
-.contentZ {
-  display: flex;
-  height: 100%;
-  padding: 10rpx;
 
-  .lzs {
-    width: 200rpx;
-    height: 100%;
-    overflow-y: scroll;
-  }
-
-  .rzs {
-    margin-left: 40rpx;
-    flex: 1;
-    height: 100%;
-    overflow-y: scroll;
-  }
-}
-.contentZ::-webkit-scrollbar {
-  display: none;
-}
-.fots {
-  height: 100rpx;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  border-top: 1rpx solid #eee;
-}
-.leftBtns {
-  font-size: 30rpx;
-  color: #007aff;
-  font-weight: 500;
-}
-.right_Btns {
-  font-size: 30rpx;
-  color: #fff;
-  background-color: #007aff;
-  border-radius: 24rpx;
-  height: 60rpx;
-  line-height: 60rpx;
-  text-align: center;
-  padding: 0rpx 23rpx;
-  box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
-}
-.blackFont {
-  color: #333333;
-  margin: 0 10rpx;
-}
-.margin30 {
-  margin: 0 20rpx 0 0;
-}
-.wk_icon {
-  width: 24rpx;
-  height: 24rpx;
-  margin-right: 12rpx;
-}
-.noteTag {
-  ont-size: 24rpx;
-  font-family: PingFang SC;
-  font-weight: 500;
-  color: #999999;
-  align-items: center;
-}
-.priceTag {
-  font-size: 30rpx;
-  font-family: PingFang SC;
-  font-weight: bold;
-  color: #ff2d55;
-}
-.titleTag {
-  font-size: 32rpx;
-  font-weight: bold;
-  color: #333333;
-  margin-left: 8rpx;
-}
-.yearTag {
-  width: 80rpx;
-  height: 32rpx;
-  background: #ebf5ff;
-  border: 2rpx solid #007aff;
-  border-radius: 16rpx;
-  font-size: 24rpx;
-  color: #007aff;
-  text-align: center;
-  line-height: 32rpx;
-}
-.itemBox {
-  background: #ffffff;
-  box-shadow: 0rpx 10rpx 9rpx 1rpx rgba(165, 196, 239, 0.1);
-  border-radius: 24rpx;
-  width: 100%;
-  padding: 24rpx;
-  margin-bottom: 24rpx;
-}
-.listBox {
-  background-color: #eaeef1;
-  padding: 24rpx;
-  position: relative;
-  top: 235rpx;
-}
-.menuSel {
-  width: 100%;
-  height: 70rpx;
-  background: #eaeef1;
-  white-space: nowrap;
-  overflow: hidden;
-}
-.r_sliper {
-  padding: 0 20rpx;
-}
-.r_t1 {
-  height: 48rpx;
-  background: #007aff;
-  border-radius: 16rpx;
-  padding: 3rpx 8rpx;
-  margin-top: 11rpx;
-  color: #ffffff;
-}
-.r_t2 {
-  height: 48rpx;
-  background: #ffffff;
-  border: 2rpx solid #eeeeee;
-  border-radius: 16rpx;
-  padding: 3rpx 8rpx;
-  margin-top: 11rpx;
-  color: #666666;
-  font-size: 30rpx;
-}
 </style>

pages/index/index.vue

@@ -8,7 +8,10 @@
       back-icon-color="#ffffff"
     >
       <view class="slot-wrap">
-        <view @click="openLeft()">{{ selObj.eName }}：{{ selObj.pName }}-{{ selObj.bName }}</view>
+        <view @click="openLeft()">
+					{{ selObj.eName }}：{{ selObj.pName }}-{{ selObj.bName }}
+					<image mode="widthFix" src="/static/arrow-back.png"></image>
+				</view>
       </view>
     </u-navbar>
     <view class="swiper">
@@ -676,6 +679,10 @@ page {
     .slot-wrap {
       width: 100%;
 			padding-left:32rpx;
+			
+			image {
+				width:28rpx;
+			}
     }
   }