|
@@ -1,26 +1,28 @@
|
|
|
<template>
|
|
|
<view class="instructor-card-list">
|
|
|
<view class="i-info-card">
|
|
|
- <view class="i-card-list" :style="{background:index % 2=== 0?'linear-gradient(179deg, #FFD5FB 0%, #FFFFFF 40%)':'linear-gradient( 179deg, #F2FFBE 0%, #FFFFFF 40%)'}" v-for="(item,index) in listData" :key="index">
|
|
|
+ <view class="i-card-list"
|
|
|
+ :style="{ background: index % 2 === 0 ? 'linear-gradient(179deg, #FFD5FB 0%, #FFFFFF 40%)' : 'linear-gradient( 179deg, #F2FFBE 0%, #FFFFFF 40%)' }"
|
|
|
+ v-for="(item, index) in listData" :key="index"
|
|
|
+ @click="RouterUtils.to_page(`/pages/index/instructorDetail/index?id=${item.userId}`)">
|
|
|
<view class="i-info">
|
|
|
- <view class="header" :style="{background:index % 2=== 0?'#FFB8F9':'#C8FF0C'}">
|
|
|
- <image class="head-img" src="https://img.keaitupian.cn/newupload/08/1629449018344288.jpg"
|
|
|
- mode=""></image>
|
|
|
+ <view class="header" :style="{ background: index % 2 === 0 ? '#FFB8F9' : '#C8FF0C' }">
|
|
|
+ <image class="head-img" :src="item.avatar"></image>
|
|
|
<image class="head-tag" src="/src/static/badge.png" mode=""></image>
|
|
|
</view>
|
|
|
<view class="i-name-tag">
|
|
|
<view class="name-tag">
|
|
|
<view class="name">
|
|
|
<view class="">
|
|
|
- <text>{{item.name}}</text>
|
|
|
+ <text>{{ item.name }}</text>
|
|
|
</view>
|
|
|
- <image v-if="index % 2=== 0" src="/src/static/name_bg.png" mode=""></image>
|
|
|
+ <image v-if="index % 2 === 0" src="/src/static/name_bg.png" mode=""></image>
|
|
|
<image v-else src="/src/static/name_bg1.png" mode=""></image>
|
|
|
</view>
|
|
|
<view class="tag">篮球</view>
|
|
|
</view>
|
|
|
- <view class="ascription">{{item.orgName}}</view>
|
|
|
- <view class="sign">{{item.teachingPhilosophy}}</view>
|
|
|
+ <view class="ascription">{{ item.orgName }}</view>
|
|
|
+ <view class="sign">{{ item.teachingPhilosophy }}</view>
|
|
|
</view>
|
|
|
<view class="type-icon">
|
|
|
<image src="/src/static/hot-icon2.png" mode=""></image>
|
|
@@ -29,212 +31,219 @@
|
|
|
<view class="i-data">
|
|
|
<view class="acclaim">
|
|
|
<zzx-icon name="acclaim"></zzx-icon>
|
|
|
- <view style="color: #FFCC00;">好评 {{item.goodRate}}%</view>
|
|
|
+ <view style="color: #FFCC00;">好评 {{ item.goodRate }}%</view>
|
|
|
</view>
|
|
|
<view class="acclaim">
|
|
|
<zzx-icon name="order"></zzx-icon>
|
|
|
- <view style="color: #4DDF96;">订单数 {{item.orderCount}}</view>
|
|
|
+ <view style="color: #4DDF96;">订单数 {{ item.orderCount }}</view>
|
|
|
</view>
|
|
|
<view class="acclaim">
|
|
|
<zzx-icon name="number"></zzx-icon>
|
|
|
- <view style="color: #AB7BFF;">授课人数 {{item.classesNumber}}</view>
|
|
|
+ <view style="color: #AB7BFF;">授课人数 {{ item.classesNumber }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="i-skill">
|
|
|
- {{item.excelMsg}}
|
|
|
+ {{ item.excelMsg }}
|
|
|
</view>
|
|
|
- <view class="i-course" v-for="course in item.courseList" :key="item.id">
|
|
|
- <view class="course-name">
|
|
|
- <view class="price">¥{{course.course||'0.00'}}</view>
|
|
|
- <view class="name textHidden">{{course.name}}</view>
|
|
|
+ <block v-if="item.courseList && item.courseList.length > 0">
|
|
|
+ <view class="i-course" v-for="course in item.courseList" :key="item.id">
|
|
|
+ <view class="course-name">
|
|
|
+ <view class="price">¥{{ course.course || '0.00' }}</view>
|
|
|
+ <view class="name textHidden">{{ course.name }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="num">已售{{ course.sales }}</view>
|
|
|
</view>
|
|
|
- <view class="num">已售{{course.sales}}</view>
|
|
|
- </view>
|
|
|
- <view class="more">更多课程</view>
|
|
|
+ <view class="more">更多课程</view>
|
|
|
+ </block>
|
|
|
+ <view class="not-data" v-else>该教练暂无课程</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
- interface Props {
|
|
|
- listData ?: any;
|
|
|
- }
|
|
|
- const props = withDefaults(defineProps<Props>(), {
|
|
|
- listData:[]
|
|
|
- });
|
|
|
+import { RouterUtils } from '@/utils/util'
|
|
|
+
|
|
|
+interface Props {
|
|
|
+ listData?: any;
|
|
|
+}
|
|
|
+const props = withDefaults(defineProps<Props>(), {
|
|
|
+ listData: []
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
- .instructor-card-list{
|
|
|
- margin-top: 20rpx;
|
|
|
- .i-info-card {
|
|
|
- .i-card-list {
|
|
|
- margin-bottom:24rpx;
|
|
|
+.instructor-card-list {
|
|
|
+ margin-top: 20rpx;
|
|
|
+
|
|
|
+ .i-info-card {
|
|
|
+ .i-card-list {
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ width: 670rpx;
|
|
|
+ height: 480rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .i-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ .header {
|
|
|
+ width: 150rpx;
|
|
|
+ height: 150rpx;
|
|
|
border-radius: 32rpx;
|
|
|
- padding: 20rpx;
|
|
|
- width: 670rpx;
|
|
|
- height: 480rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .i-info {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-around;
|
|
|
-
|
|
|
- .header {
|
|
|
+ // background: #FFB8F9;
|
|
|
+ padding: 4rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .head-img {
|
|
|
width: 150rpx;
|
|
|
height: 150rpx;
|
|
|
border-radius: 32rpx;
|
|
|
- // background: #FFB8F9;
|
|
|
- padding: 4rpx;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .head-img {
|
|
|
- width: 150rpx;
|
|
|
- height: 150rpx;
|
|
|
- border-radius: 32rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .head-tag {
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- right: -14rpx;
|
|
|
- width: 36rpx;
|
|
|
- height: 36rpx;
|
|
|
- }
|
|
|
}
|
|
|
-
|
|
|
- .i-name-tag {
|
|
|
- .name-tag {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 8rpx;
|
|
|
-
|
|
|
- .name {
|
|
|
- width: 134rpx;
|
|
|
- height: 60rpx;
|
|
|
- font-weight: 800;
|
|
|
- font-size:28rpx;
|
|
|
- color: #222222;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- &>view {
|
|
|
- &>text {
|
|
|
- position: absolute;
|
|
|
- z-index: 1;
|
|
|
- top: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &>image {
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
+
|
|
|
+ .head-tag {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: -14rpx;
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .i-name-tag {
|
|
|
+ .name-tag {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8rpx;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ width: 134rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ font-weight: 800;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #222222;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &>view {
|
|
|
+ &>text {
|
|
|
position: absolute;
|
|
|
- width: 133rpx;
|
|
|
- height: 48rpx;
|
|
|
+ z-index: 1;
|
|
|
+ top: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .tag {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #AAAAAA;
|
|
|
+
|
|
|
+ &>image {
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ position: absolute;
|
|
|
+ width: 133rpx;
|
|
|
+ height: 48rpx;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .ascription {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #222222;
|
|
|
- }
|
|
|
-
|
|
|
- .sign {
|
|
|
- margin-top: 20rpx;
|
|
|
- font-weight: bold;
|
|
|
+
|
|
|
+ .tag {
|
|
|
font-size: 24rpx;
|
|
|
- color: #222222;
|
|
|
+ color: #AAAAAA;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .type-icon {
|
|
|
- &>image {
|
|
|
- width: 106rpx;
|
|
|
- height: 100rpx;
|
|
|
- }
|
|
|
+
|
|
|
+ .ascription {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #222222;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .i-data {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 28rpx;
|
|
|
- margin-top: 20rpx;
|
|
|
-
|
|
|
- .acclaim {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 10rpx;
|
|
|
+
|
|
|
+ .sign {
|
|
|
+ max-width: 300rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ font-weight: bold;
|
|
|
font-size: 24rpx;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .type-icon {
|
|
|
+ &>image {
|
|
|
+ width: 106rpx;
|
|
|
+ height: 100rpx;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .i-skill {
|
|
|
- width: 700rpx;
|
|
|
- margin-top: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .i-data {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 28rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+
|
|
|
+ .acclaim {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10rpx;
|
|
|
font-size: 24rpx;
|
|
|
- color: #AAAAAA;
|
|
|
}
|
|
|
-
|
|
|
- .i-course {
|
|
|
+ }
|
|
|
+
|
|
|
+ .i-skill {
|
|
|
+ max-width: 700rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #AAAAAA;
|
|
|
+ }
|
|
|
+
|
|
|
+ .i-course {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 20rpx;
|
|
|
+
|
|
|
+ .course-name {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- margin-top: 20rpx;
|
|
|
-
|
|
|
- .course-name {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 20rpx;
|
|
|
-
|
|
|
- .price {
|
|
|
- font-weight: bold;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #FB5B5B;
|
|
|
- }
|
|
|
-
|
|
|
- .name {
|
|
|
- width: 440rpx;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #222222;
|
|
|
- }
|
|
|
+ gap: 20rpx;
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #FB5B5B;
|
|
|
}
|
|
|
-
|
|
|
- .num {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #AAAAAA;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ width: 440rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #222222;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .more {
|
|
|
- margin: auto;
|
|
|
- width: 100rpx;
|
|
|
- margin-top: 20rpx;
|
|
|
- text-align: center;
|
|
|
+
|
|
|
+ .num {
|
|
|
font-size: 24rpx;
|
|
|
- color: #CCCCCC;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .more::after {
|
|
|
- position: absolute;
|
|
|
- bottom: -10rpx;
|
|
|
- left: 25rpx;
|
|
|
- content: '';
|
|
|
- width: 38rpx;
|
|
|
- height: 4rpx;
|
|
|
- border-radius: 2rpx;
|
|
|
- background-color: #CCCCCC;
|
|
|
+ color: #AAAAAA;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .more {
|
|
|
+ margin: auto;
|
|
|
+ width: 100rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #CCCCCC;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .more::after {
|
|
|
+ position: absolute;
|
|
|
+ bottom: -10rpx;
|
|
|
+ left: 25rpx;
|
|
|
+ content: '';
|
|
|
+ width: 38rpx;
|
|
|
+ height: 4rpx;
|
|
|
+ border-radius: 2rpx;
|
|
|
+ background-color: #CCCCCC;
|
|
|
+ }
|
|
|
}
|
|
|
+}
|
|
|
</style>
|