549 lines
12 KiB
Vue
549 lines
12 KiB
Vue
<template>
|
||
<view class="box flex justify-start align-items flex-column">
|
||
<view class="detali flex align-items " style="justify-content: space-between;">
|
||
|
||
<view class="detali-left">
|
||
<image :src="detail.head_image" mode="" style="width: 240rpx;height: 300rpx;"></image>
|
||
</view>
|
||
<view class="detali-right flex justify-center flex-column">
|
||
<span class="name white-space">{{detail.name}}</span>
|
||
<span class="jigou white-space">{{detail.shop.name}}</span>
|
||
<view class="flex align-items flex-start look" @click="toMeDetail(detail.shop_id)">
|
||
<span>查看机构</span>
|
||
<image src="../../static/center/right.png" mode="" style="width: 24rpx; height: 24rpx;"></image>
|
||
</view>
|
||
<span class="line"></span>
|
||
<view class="detali-footer flex align-items" style="justify-content: space-between;">
|
||
<view class="f-left flex flex-column">
|
||
<span class="pingfen">教师评分</span>
|
||
<span class="rate">
|
||
<u-rate :count="count" active-color="#FFBC2C" v-model="detail.teacher_star" allowHalf="true"
|
||
readonly></u-rate>
|
||
</span>
|
||
</view>
|
||
<view class="f-right">
|
||
{{detail.teacher_star}}分
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 教师简介 -->
|
||
<view class="teacher flex flex-column" style="justify-content: flex-start;">
|
||
<view class="teacher-header flex align-items space-between">
|
||
<image src="../../static/center/teacherDetail.png" mode="" style="width: 168rpx; height: 48rpx;">
|
||
</image>
|
||
</view>
|
||
<view class="tea-center">
|
||
<u-parse :content="detail.expert_content"></u-parse>
|
||
<!-- <view class="" v-html="detail.expert_content"></view> -->
|
||
</view>
|
||
</view>
|
||
<!-- 全部课程 -->
|
||
<view class="total flex flex-column" style="justify-content: flex-start;">
|
||
<view class="total-header flex align-items space-between">
|
||
<image src="../../static/center/TotalClass.png" mode="" style="width: 168rpx; height: 48rpx;"></image>
|
||
<view class="flex align-items" @click.stop="totalClass()">
|
||
<span class="more">更多</span>
|
||
<image src="../../static/center/right.png" mode="" style="width: 34rpx; height: 34rpx;"></image>
|
||
</view>
|
||
</view>
|
||
<view class="totalBox">
|
||
<view class="flex" v-for="(item,index) in list" :key="index">
|
||
<view class="con-center justify-start flex flex-column" style="align-items: flex-start;"
|
||
@click="toDetail(item.id)">
|
||
<image :src="item.headimage" mode="" style="width: 280rpx; height: 200rpx;"></image>
|
||
<span class="jita white-space">{{item.title}}</span>
|
||
<view class="mingePos flex justify-center align-items">
|
||
<image src="../../static/index/mine.png" mode="" style="width: 36rpx;height: 36rpx;">
|
||
</image>
|
||
<span class="minge">{{ Number(item.sign_num + item.virtual_num)}} /
|
||
{{item.limit_num}}名额</span>
|
||
</view>
|
||
<span class="line-row"></span>
|
||
<span class="money" v-if="item.feel == 0">￥{{item.price}}</span>
|
||
<span class="money" v-if="item.feel == 1">免费</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 教师评价 -->
|
||
<view class="pingjia flex flex-column" style="justify-content: flex-start;">
|
||
<view class="pingjia-header flex align-items space-between">
|
||
<image src="../../static/center/pingjia.png" mode="" style="width: 168rpx; height: 48rpx;"></image>
|
||
</view>
|
||
<view class="pjBox flex flex-column" v-for="(item,index) in pjList" :key="index">
|
||
<view class="pj-top flex align-items" style="justify-content: space-between;">
|
||
<view class="pj-left flex space-between">
|
||
<image :src="item.image" mode="" style="width: 86rpx;height: 86rpx;"></image>
|
||
<view class="flex flex-column " style="margin-left: 24rpx;">
|
||
<span class="name">{{item.nickname}}</span>
|
||
<span class="time">{{item.evaluate_time_text}}</span>
|
||
</view>
|
||
</view>
|
||
<view class="pj-right flex flex-column align-items">
|
||
<span class="pj">{{item.teacher_star + '分'}}</span>
|
||
<span class="rate">
|
||
<u-rate :count="item.count" active-color="#FFBC2C" v-model="item.teacher_star"
|
||
allowHalf="true" readonly></u-rate>
|
||
</span>
|
||
</view>
|
||
</view>
|
||
<view class="pj-center flex">
|
||
{{item.message_text}}
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<u-loadmore :status="loadStatus" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
id: 1,
|
||
detail: {},
|
||
count: 5,
|
||
value: 5,
|
||
page: 1,
|
||
limit: 10,
|
||
pjPage: 1,
|
||
pjLimit: 10,
|
||
list: [],
|
||
loadStatus: 'loading',
|
||
pjList: [],
|
||
last_page: 0,
|
||
};
|
||
},
|
||
onShareTimeline() {
|
||
return {
|
||
title: this.detail.name,//分享的标题
|
||
imageUrl: this.detail.head_image,//展示的图片，这里是本地路径的写法，也可以写http或https开头的图片路径
|
||
query: `id=${this.id}`
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.id = option.id
|
||
this.getDetail(option.id)
|
||
this.getList(option.id)
|
||
this.getpjList(option.id)
|
||
},
|
||
onReachBottom() {
|
||
if (this.pjPage < this.last_page) {
|
||
this.pjPage++;
|
||
this.getpjList(this.id);
|
||
}
|
||
},
|
||
methods: {
|
||
// 获取教师详情
|
||
getDetail(id) {
|
||
uni.$u.http.get('/api/school/teacher/detail', {
|
||
params: {
|
||
id: id,
|
||
}
|
||
}).then(res => {
|
||
if (res.code == 1) {
|
||
this.detail = res.data.detail
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
// _this.$api.toast(res.msg);
|
||
}
|
||
}).catch(error => {
|
||
|
||
});
|
||
},
|
||
totalClass() {
|
||
uni.navigateTo({
|
||
url: "/packageA/center/teacherClass?id=" + this.id
|
||
})
|
||
},
|
||
//评价列表
|
||
getpjList(id) {
|
||
uni.$u.http.get('/api/school.evaluate/evaluate_list', {
|
||
params: {
|
||
teacher_id: id,
|
||
page: this.pjPage,
|
||
limit: this.pjLimit,
|
||
}
|
||
}).then(res => {
|
||
if (res.code == 1) {
|
||
this.last_page = res.data.last_page
|
||
this.pjList = [...this.pjList, ...res.data.list];
|
||
if (this.pjList.length >= res.data.count) {
|
||
this.loadStatus = 'nomore';
|
||
} else {
|
||
this.loadStatus = 'loading';
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
this.loadStatus = 'nomore';
|
||
// _this.$api.toast(res.msg);
|
||
}
|
||
}).catch(error => {
|
||
this.loadStatus = 'loading';
|
||
});
|
||
},
|
||
// 教师课程
|
||
getList(id) {
|
||
uni.$u.http.get('/api/school/classes/classes_list', {
|
||
params: {
|
||
page: 1,
|
||
limit: 10,
|
||
teacher_id: id,
|
||
order: 'normal',
|
||
is_expire: 2
|
||
}
|
||
}).then(res => {
|
||
if (res.code == 1) {
|
||
this.list = res.data.list.data
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
// _this.$api.toast(res.msg);
|
||
}
|
||
}).catch(error => {
|
||
|
||
});
|
||
},
|
||
// 机构详情
|
||
toMeDetail(id) {
|
||
uni.navigateTo({
|
||
url: "/pages/center/MechanismDetail?id=" + this.detail.shop_id
|
||
})
|
||
},
|
||
// 跳转详情
|
||
toDetail(id) {
|
||
uni.navigateTo({
|
||
url: "/pages/center/detail?id=" + id
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.box {
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
min-height: 100vh;
|
||
background: linear-gradient(to bottom,
|
||
#F1F2F8 0%,
|
||
#FFFFFF 30%,
|
||
#F1F2F8 50%,
|
||
#F1F2F8 70%,
|
||
#F1F2F8 100%)
|
||
}
|
||
|
||
.w-100 {
|
||
width: 100%;
|
||
}
|
||
|
||
.flex {
|
||
display: flex;
|
||
}
|
||
|
||
.flex-start {
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.justify-center {
|
||
justify-content: center;
|
||
}
|
||
|
||
.align-items {
|
||
align-items: center;
|
||
}
|
||
|
||
.flex-column {
|
||
flex-flow: column;
|
||
}
|
||
|
||
.justify-start {
|
||
justify-content: start;
|
||
}
|
||
|
||
.space-between {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.white-space {
|
||
overflow: hidden;
|
||
/* 确保超出容器的文本被隐藏 */
|
||
white-space: nowrap;
|
||
/* 确保文本在一行内显示 */
|
||
text-overflow: ellipsis;
|
||
/* 使用省略号表示被截断的文本 */
|
||
width: 100%;
|
||
}
|
||
|
||
.detali {
|
||
width: 642rpx;
|
||
margin-top: 46rpx;
|
||
|
||
.detali-right {
|
||
margin-left: 42rpx;
|
||
|
||
.name {
|
||
// height: 26rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 52rpx;
|
||
color: #4B4B4B;
|
||
width: 400rpx;
|
||
// line-height: 26rpx;
|
||
}
|
||
|
||
.jigou {
|
||
width: 336rpx;
|
||
// height: 26rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 28rpx;
|
||
color: #008CFF;
|
||
// line-height: 26rpx;
|
||
margin: 38rpx 0 8rpx 0;
|
||
}
|
||
|
||
.look {
|
||
span {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #008CFF;
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
|
||
.line {
|
||
margin: 19rpx 0 11rpx 0;
|
||
width: 372rpx;
|
||
height: 1rpx;
|
||
background: #008CFF;
|
||
}
|
||
|
||
.detali-footer {
|
||
width: 380rpx;
|
||
|
||
.f-left {
|
||
.pingfen {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #008CFF;
|
||
margin-bottom: 9rpx;
|
||
}
|
||
|
||
.rate {}
|
||
}
|
||
|
||
.f-right {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 42rpx;
|
||
color: #FFBC2C;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.teacher {
|
||
width: 642rpx;
|
||
|
||
.teacher-header {
|
||
padding-top: 64rpx;
|
||
padding-bottom: 12rpx;
|
||
border-bottom: 2rpx solid #008CFF;
|
||
}
|
||
|
||
.tea-center {
|
||
margin-top: 13rpx;
|
||
}
|
||
}
|
||
|
||
.total {
|
||
width: 690rpx;
|
||
// margin-top: 62rpx;
|
||
|
||
.total-header {
|
||
padding-top: 64rpx;
|
||
padding-bottom: 12rpx;
|
||
border-bottom: 2rpx solid #008CFF;
|
||
|
||
.more {
|
||
// width: 48rpx;
|
||
// height: 32rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #008CFF;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
|
||
.totalBox {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
}
|
||
|
||
.pingjia {
|
||
width: 690rpx;
|
||
// margin-top: 62rpx;
|
||
|
||
.pingjia-header {
|
||
padding-top: 64rpx;
|
||
padding-bottom: 12rpx;
|
||
border-bottom: 2rpx solid #008CFF;
|
||
}
|
||
|
||
.pjBox {
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
background-color: white;
|
||
padding: 24rpx;
|
||
margin-top: 25rpx;
|
||
|
||
.pj-top {
|
||
.pj-left {
|
||
image {
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.name {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 34rpx;
|
||
color: #181818;
|
||
}
|
||
|
||
.time {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #7A7A7A;
|
||
margin-top: 14rpx;
|
||
}
|
||
}
|
||
|
||
.pj-right {
|
||
.pj {
|
||
width: 104rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 42rpx;
|
||
color: #FFBC2C;
|
||
padding-bottom: 13rpx;
|
||
border-bottom: 1rpx solid #FFBC2C;
|
||
}
|
||
|
||
.rate {
|
||
margin-top: 11rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.pj-center {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #7A7A7A;
|
||
line-height: 38rpx;
|
||
margin-top: 20rpx;
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
}
|
||
|
||
.con-center {
|
||
width: 280rpx;
|
||
position: relative;
|
||
padding: 32rpx 16rpx;
|
||
|
||
.imgPos {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
z-index: 999;
|
||
}
|
||
|
||
.jita {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 28rpx;
|
||
color: #343434;
|
||
margin: 14rpx 0 16rpx 0;
|
||
}
|
||
|
||
.line-row {
|
||
width: 280rpx;
|
||
height: 1rpx;
|
||
background: #008CFF;
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
margin: 12rpx 0 12rpx 0;
|
||
}
|
||
|
||
.mingeBox {
|
||
.minge {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #7A7A7A;
|
||
}
|
||
}
|
||
|
||
.iconPos {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #7A7A7A;
|
||
line-height: 32rpx;
|
||
margin-top: 14rpx;
|
||
}
|
||
|
||
.mingePos {
|
||
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #474747;
|
||
line-height: 32rpx;
|
||
}
|
||
|
||
.money {
|
||
display: flex;
|
||
align-self: flex-end;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 36rpx;
|
||
color: #FF2323;
|
||
line-height: 32rpx;
|
||
margin-top: 24rpx;
|
||
}
|
||
}
|
||
|
||
.white-space {
|
||
overflow: hidden;
|
||
/* 确保超出容器的文本被隐藏 */
|
||
white-space: nowrap;
|
||
/* 确保文本在一行内显示 */
|
||
text-overflow: ellipsis;
|
||
/* 使用省略号表示被截断的文本 */
|
||
width: 100%;
|
||
}
|
||
</style> |