zhxy-jzd/src/pages/base/xk/components/XkPaySuccessXkkc/index.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>