Files
medicine_app/pages/component/commonComponents/curriculum.vue
2024-06-19 16:12:23 +08:00

181 lines
3.9 KiB
Vue

<template>
<view style="width: 100%;height: 100%;" class="common_curriculum_list">
<scroll-view scroll-y="true" class="scroll-Y" v-if="dataList.length > 0">
<u-grid :col="col ? col : 1" style="overflow: hidden;justify-content:space-between">
<u-grid-item :class="`scroll-view-item list_item content_item `"
v-for="(item, index) in dataList" :key="item.id" @click="gotoDetail(item)">
<image :src="defaultUrl ? defaultUrl : item[imgUrl]" :mode="imgMode?imgMode:'aspectFil'" class="book_image"></image>
<view :class="['titleItem', 'common_curriculum_item']">
<slot name="leftSlot" :row="item"></slot>
<template v-if="isCondition">
<slot name="labelSlot" :row="item"></slot>
</template>
<template v-else>
{{ item[label] }}
</template>
<slot name="rightSlot" :row="item"></slot>
</view>
<!-- <image src="@/static/icon/icon_right.png" class="rightArrow" style=""></image> -->
</u-grid-item>
</u-grid>
</scroll-view>
<u-empty v-else-if="noDataIcon&&isLoadingHide"
:mode="noDataIcon"
:icon="`http://cdn.uviewui.com/uview/empty/${noDataIcon}.png`"
>
</u-empty>
<u-divider v-else text="暂无数据哦~"></u-divider>
</view>
</template>
<script>
import {
mapState
} from 'vuex';
export default {
props: ['dataList', 'label', 'isCondition', 'imgUrl','imgMode', 'className', 'col', 'defaultUrl', 'isScroll','isLoadingHide','noDataIcon'],
data() {
return {
}
},
onLoad() {
},
onHide() {
// this.showSearchList = false
// this.searchList = []
},
computed: {
...mapState(['userInfo']),
},
methods: {
gotoDetail(v) {
this.$emit('hancleClick', v)
},
},
onBackPress() {
// #ifdef APP-PLUS
plus.key.hideSoftKeybord();
// #endif
},
components: {
},
}
</script>
<style lang="scss" scoped>
.list_item {
width: 100%;
// padding: 20rpx 30rpx;
box-sizing: border-box;
font-size: 30rpx;
// border-bottom: 1rpx solid #e0e0e0;
position: relative;
justify-content: space-around;
}
.scroll-view-item:nth-child(2n-1) {
// background-color: #f5f5f5 !important;
}
.rightArrow {
width: 40rpx;
height: 40rpx;
position: absolute;
right: 30rpx;
}
.scroll-Y {
height: 100%;
}
.scroll-view_H {
white-space: nowrap;
width: 100%;
}
.scroll-view-item {
// height: 300rpx;
// line-height: 300rpx;
// text-align: center;
// font-size: 36rpx;
}
.scroll-view-item_H {
display: inline-block;
width: 100%;
// height: 300rpx;
// line-height: 300rpx;
// text-align: center;
// font-size: 36rpx;
}
.titleItem {
width: 100%;
}
.common_curriculum_list {
// width: 100%;
// display: flex;
// overflow: hidden;
// height: auto;
// padding: 24rpx 19rpx 5rpx;
// box-sizing: border-box;
.content_item {
// float: left;
display: inline-block;
width: 49% !important;
margin-bottom: 30rpx;
overflow: hidden;
}
.book_image {
width: 100% !important;
height: 146rpx;
border-radius: 10rpx;
margin-bottom: 10rpx;
background-color: #f5f5f5;
}
.book_name {
font-family: MicrosoftYaHei;
font-weight: 600;
font-size: 23rpx;
color: #000000;
line-height: 23rpx;
text-align: left;
margin-top: 14rpx;
}
.content_item:nth-child(2n) {
// float: right !important;
}
}
.common_curriculum_item {
display: flex !important;
align-items: center;
}
</style>