146 lines
2.9 KiB
Vue
146 lines
2.9 KiB
Vue
<template>
|
||
<view class="xkqd-list">
|
||
<!-- 课程信息卡片 -->
|
||
<view class="info-card" v-for="(item, index) in dataList" :key="index" @click="handleClick(item)">
|
||
<view class="card-header">
|
||
<view class="card-title">课程信息</view>
|
||
<view class="card-actions" v-if="canSelected">
|
||
<view class="radio-container">
|
||
<uni-icons
|
||
:type="item.selected ? 'checkbox-filled' : 'circle'"
|
||
:color="item.selected ? '#3FBF72' : '#ccc'"
|
||
size="30"
|
||
></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="divider"></view>
|
||
|
||
<view class="course-info">
|
||
<image
|
||
class="course-image"
|
||
:src="(item.lxTp || item.lxtp) ? imagUrl((item.lxTp || item.lxtp)) : '/static/base/home/11222.png'"
|
||
mode="aspectFill"
|
||
></image>
|
||
<view class="course-details">
|
||
<view class="course-name">{{ item.kcmc }}</view>
|
||
<view class="course-teacher">开课老师：{{ item.jsName }}</view>
|
||
<view class="course-location">上课地点：{{ item.kcdd }}</view>
|
||
<view class="course-price" v-if="(item.kcje || item.jfje) > 0"
|
||
>金额：<text class="price-value">¥{{ item.kcje || item.jfje }}</text></view
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { imagUrl } from "@/utils";
|
||
|
||
// 接收外部传入属性并设置默认值
|
||
const props = withDefaults(defineProps<{
|
||
dataList: any[];
|
||
canSelected?: boolean,
|
||
}>(), {
|
||
xk: () => ({}),
|
||
canSelected: false,
|
||
});
|
||
|
||
const handleClick = (item: any) => {
|
||
if (!props.canSelected) {
|
||
return;
|
||
}
|
||
item.selected = !item.selected;
|
||
};
|
||
|
||
// 获取已选课程列表
|
||
const getSelectedList = () => {
|
||
const list = props.dataList || [];
|
||
return list.filter((item: any) => item.selected);
|
||
};
|
||
|
||
defineExpose({
|
||
getSelectedList,
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.xkqd-list {
|
||
padding: 0 15px;
|
||
}
|
||
|
||
.info-card {
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
padding: 15px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.divider {
|
||
height: 1px;
|
||
background-color: #eee;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.course-info {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.course-image {
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: 5px;
|
||
margin-right: 15px;
|
||
}
|
||
|
||
.course-details {
|
||
flex: 1;
|
||
}
|
||
|
||
.course-name {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.course-teacher,
|
||
.course-location {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.course-price {
|
||
font-size: 14px;
|
||
color: #ff6600;
|
||
}
|
||
|
||
.price-value {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.radio-container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.radio-container uni-icons {
|
||
transition: all 0.3s ease;
|
||
}
|
||
</style> |