medicine_app/pages/component/commonComponents/curriculumVideo.vue

<template>
  <view class="richDetail">
    <!-- 公共组件-每个页面必须引入 -->
    <view
      scroll-x="true"
      class="detail_title video_box"
      style="background-color: #fff"
    >	
   
      <view
        v-for="(v, i) in dataList"
        :class="`video_item ${currentVideo&&currentVideo.id == v.id ? 'hot' : ''}`"
        @click="handleClick(v,i)"
      >
  
        【{{ v.type == "2" ? "音频" : "视频" }}】{{ getNumber(i + 1) }}
      </view>
    </view>

    <slot name="richHeadImg"></slot>

    <!-- <view>{{ detailInfo.content }}</view> -->
  </view>
</template>

<script>
import $http from "@/config/requestConfig.js";
import { mapState } from "vuex";
export default {
  props: ["detailInfo", "dataList", "currentVideo", "changeVideoLock"],
  components: {},
  data() {
    return {};
  },
  onLoad(options) {},
  onHide() {},
  mounted() {
  	console.log('currentVideo播放列表收到的--',this.currentVideo)
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
    getNumber(num) {
      if (num >= 10) {
        return num;
      } else {
        return `0${num}`;
      }
    },
    handleClick(data) {
		if(this.changeVideoLock){
			return
		}
      console.log("data at line 35:", data);
      this.$emit("open", data);
    },

    // 放大图片
    previewImage(url) {
      console.log(url);
      uni.previewImage({
        urls: [url],
        longPressActions: {
          itemList: ["很抱歉，暂不支持保存图片到本地"],
          success: function (res) {
            // console.log(res,'+++++')
          },
        },
      });
    },
    // getSearch() {
    // 	$http.request({
    // 		url: "book/prescript/searchPrescript",
    // 		method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
    // 		data: {
    // 			loadAnimate: 'none', // 请求加载动画
    // 			'keywords': this.searchValue,
    // 			type: this.currentCateIndex + 1
    // 		},
    // 		header: { //默认 无 说明：请求头
    // 			'Content-Type': 'application/json'
    // 		},
    // 	}).then(res => {
    // 		console.log(res, '搜索结果')
    // 		if (res.code == 0 && res.list.length >= 0) {
    // 			this.showSearchList = true
    // 			this.searchList = res.list
    // 		} else {
    // 			this.searchList = []
    // 		}
    // 	}).catch(e => {
    // 		// this.dataList = []
    // 		this.searchList = []
    // 		console.log(e)
    // 	})
    // },
    // search(res) {
    // 	console.log(res, 'res')
    // 	// uni.showToast({
    // 	// 	title: '搜索：' + res,
    // 	// 	icon: 'none'
    // 	// })
    // 	if (res == '') {
    // 		this.showSearchList = false
    // 		this.searchList = []
    // 	} else {
    // 		this.getSearch()
    // 	}

    // },
    // input(res) {
    // 	console.log('----input:', res)
    // 	if (res == '') {
    // 		this.searchList = []
    // 	} else {
    // 		this.getSearch()
    // 	}
    // },
    // clear(res) {
    // 	console.log('----clear:', res)
    // 	// uni.showToast({
    // 	// 	title: 'clear事件，清除值为：',
    // 	// 	icon: 'none'
    // 	// })
    // 	this.searchValue = ''
    // 	this.showSearchList = false
    // },
    // blur(res) {
    // 	// console.log('----blur:', res)
    // 	// if (res == '') {
    // 	// 	this.showSearchList = false
    // 	// 	this.searchList = []
    // 	// } else {
    // 	// 	this.getSearch()
    // 	// }
    // },
    // focus(e) {
    // 	console.log('----focus:')
    // 	// uni.showToast({
    // 	// 	title: 'focus事件，输出值为：' + e.value,
    // 	// 	icon: 'none'
    // 	// })
    // 	// 等于1 就是有权限
    // 	// this.showSearchList = true

    // },
    // cancel(res) {
    // 	uni.showToast({
    // 		title: '点击取消，输入值为：' + res.value,
    // 		icon: 'none'
    // 	})
    // }
  },
  onBackPress() {
    // #ifdef APP-PLUS
    plus.key.hideSoftKeybord();
    // #endif
  },
};
</script>

<style lang="scss" scoped>
.commonPageBox {
  padding: 40rpx 0;
}

.contentBox {
  .headImage {
    margin-bottom: 20rpx;
  }

  .detail_title {
    padding: 0 20rpx 0;
    font-size: 26rpx;
    line-height: 65rpx;
    font-weight: bold;
    text-align: center;
    box-sizing: border-box;
    margin-bottom: 20rpx;
    overflow: hidden;
  }

  .rich_box {
    padding: 20rpx;
    box-sizing: border-box;

    p {
      display: block;
      text-indent: 2em;
      letter-spacing: 2px !important;
      line-height: 46rpx;
    }
  }
}

.richDetail {
  width: 100%;
  height: 100%;
}

.video_box {
  width: 100%;
  // height: 100rpx;
  .video_item {
    width: 23%;
    margin-right: 10rpx;
    margin-bottom: 20rpx;
    float: left;
    border: 2rpx solid #2979ff;
    background: #fff;
    color: #2979ff;
    text-align: center;
    border-radius: 10rpx;
    box-shadow: 0px 0px 6rpx 0px rgba(255, 255, 255, 1);
  }

  .video_item:nth-child(4n) {
    margin-right: 0;
  }
}
.hot {
  background-color: #2979ff !important;
  color: #fff !important;
}
</style>