517 lines
13 KiB
Vue
Raw Normal View History

2025-08-01 11:39:06 +08:00
<template>
<view class="xilu">
<view class="container">
<view class="pr">
<swiper class="xilu_swiper_info" @change="swiperTab" :current="current" :circular="true"
:autoplay="true" :interval="3000" :duration="1000">
<swiper-item v-for="(vo,index) in thumb_images">
<image :src="vo" mode="aspectFill"></image>
</swiper-item>
</swiper>
<view class="xilu_swiper_dot">{{ current + 1 }}/{{ thumb_images.length || 0}}</view>
<image v-if="web_url" :src="web_url+'/uniapp_image/xilu_mask.png'" mode="aspectFill" class="xilu_mask">
</image>
</view>
<view class="pr z5 plr25 pb30">
<view class="xilu_box">
<view class="flex-box bb pb20">
<view class="flex-grow-1">
<view class="flex-box">
<view class="fs44 fw500 colf lh62">{{info.coach_name || ''}}</view>
<image :src="info.group_image" mode="widthFix" class="xilu_label ml20">
</image>
</view>
<view class="mt30 fs30 colf lh42" v-if="lable_list.length > 0">{{lable_list.join('')}}
</view>
</view>
<view class="tc" @tap="collect(info.id,info.shop.id)">
<image :src="'../../static/images/xilu_fav_'+(info.is_collect == 1 ? 's' : 'u')+'c.png'"
mode="aspectFill" class="ico60"></image>
<view class="fs28 col9 lh40 mt10">收藏</view>
</view>
</view>
<view class="mt20 fs30 col9 lh42">
{{info.coach_info || ''}}
</view>
</view>
<view class="pr z2 mt30" v-if="info.shop" @tap="openLocation(info.shop.lat,info.shop.lng)">
<image v-if="web_url" :src="web_url + '/uniapp_image/xilu_bg_info.png'" mode="aspectFill"
class="xilu_bg_info"></image>
<view class="xilu_bg_view flex-box plr30">
<image src="@/static/images/xilu_icon_address_gray.png" mode="aspectFill" class="ico28">
</image>
<view class="flex-grow-1">
<view class="w460 m-ellipsis-l2 mlr10 fs28 colf lh40">{{info.shop.address || ''}}</view>
</view>
<view class="tc">
<image src="@/static/images/xilu_guide.png" mode="aspectFill" class="ico30"></image>
<view class="fs24 col9 lh32 mt10">导航</view>
</view>
</view>
</view>
<view class="xilu_scroll mt30">
<view class="xilu_scroll_item" :class="course_type==1?'active':''"
@click="chooseTab(1,info.id,info.shop.id)">团课
</view>
<view class="xilu_scroll_item" :class="course_type==2?'active':''"
@click="chooseTab(2,info.id,info.shop.id)">私教
</view>
<view class="xilu_scroll_item" :class="course_type==3?'active':''"
@click="chooseTab(3,info.id,info.shop.id)">活动
</view>
</view>
<view class=" pt10" v-if="course_type==1">
<template v-if="course_list.length > 0">
<course-list :list="course_list"></course-list>
</template>
<template v-else>
<empty-data :tips="'暂无课程'" :lineHeight="100"></empty-data>
</template>
</view>
<view class=" pt10" v-if="course_type==2">
<template v-if="course_list.length > 0">
<view class="xilu_list_item" v-for="(vo,keys) in course_list" @tap="course_detail(vo.id,2)">
<image :src="vo.course.xilufitness_urls.thumb_image" mode="aspectFill"
class="xilu_list_item_cover">
</image>
<view class="pt10 plr20">
<view class="m-ellipsis fs30 fw500 colf lh42">{{vo.course.title || ''}}</view>
<view class="m-ellipsis mt10 fs24 col9 lh32"
v-if="vo.course && vo.course.lable_list.length > 0">
{{vo.course.lable_list.join('')}}
</view>
<view class="flex-box mt10">
<view class="col2 fs24 flex-grow-1">{{vo.class_count || 0}}课时</view>
<view class="m-ellipsis"><text
class="col2 fs34 fw500 lh34 pr10">¥{{vo.course_price || 0}}</text><text
class="tdl fs20 col9 lh34"
v-if="vo.market_price > 0">¥{{vo.market_price || 0}}</text></view>
</view>
</view>
</view>
</template>
<template v-else>
<empty-data :tips="'暂无课程'" :lineHeight="100"></empty-data>
</template>
</view>
<view v-if="course_type==3">
<template v-if="course_list.length > 0">
<view class="xilu_info_item flex-box" v-for="(vo,keys) in course_list"
@tap="camp_detail(vo.id)">
<image :src="vo.camp.xilufitness_urls.thumb_image" mode="aspectFill"
class="xilu_info_item_cover">
</image>
<view class="flex-grow-1 pl10">
<view class="fs30 col2 fw500 lh42">{{vo.start_at || ''}}-{{vo.end_at || ''}}</view>
<view class="flex flex-align-end">
<view class="flex-grow-1 m-ellipsis fs24 colf lh34"
v-if="vo.plans && vo.plans.length > 0">
<template v-for="(vvv,kkk) in vo.plans">
{{vvv.week || ''}}{{vvv.day_start_at || ''}}{{vvv.day_end_at || ''}}
</template>
</view>
<view class="xilu_btn">报名</view>
</view>
<view class="fs24 colf lh34 mt15 m-ellipsis">
<text>¥{{vo.camp_price || ''}}</text>
<text class="col9 tdl fs20 ml5"
v-if="vo.market_price > 0">¥{{vo.market_price || 0}}</text>
<text class="xilu_textsq">{{vo.class_count || 0}}课时</text>
<text class="xilu_textsq">{{vo.class_duration || ''}}分钟/课时</text>
</view>
</view>
</view>
</template>
<template v-else>
<empty-data :tips="'暂无活动'" :lineHeight="100"></empty-data>
</template>
</view>
<view class="xilu_box" style="padding-bottom: 0;margin-top: 30rpx;">
<view class="flex-box flex-between mb30">
<view class="fs36 fw500 colf">用户评价</view>
<view @click="commentList(shop_info.id || 0)" class="xilu_btn_more">更多评价</view>
</view>
<template v-if="comment_list.length > 0">
<view class="xilu_pj_item" v-for="(vo,keys) in comment_list">
<view class="flex-box">
<image :src="vo.user.xilufitness_urls.avatar || '../../static/images/avatar.png'"
mode="aspectFill" class="xilu_pj_item_head_img">
</image>
<view class="flex-grow-1 pl30">
<view class="flex-box">
<view class="flex-grow-1 m-ellipsis pr10 fs30 fw500 colf lh30">
{{vo.user.nickname || ''}}</view>
<view class="fs24 col89 lh24">{{vo.createtime_txt || ''}}</view>
</view>
<view class="mt10 fs24 col2 lh36">
<image src="@/static/images/xilu_star.png" mode="aspectFill"
class="xilu_pj_item_star mr10"></image>{{vo.star || 0}}
</view>
</view>
</view>
<view class="fs30 col9 lh44 mt10">{{vo.content || ''}}</view>
</view>
</template>
<template v-else>
<empty-data :tips="'暂无评论'" :lineHeight="100"></empty-data>
</template>
</view>
</view>
</view>
<u-authorize @onAuthCancel="onAuthCancel($event)" @onAuthConfirm="onAuthConfirm($event)"
:popupStatus="auth_status" :isAuth="2"></u-authorize>
</view>
</template>
<script>
import {
methods
} from '../../uni_modules/uview-ui/libs/mixin/mixin';
const app = getApp();
const webConfig = require("@/util/config");
export default {
data() {
return {
current: 0,
course_type: 1,
thumb_images: [],
info: null,
lable_list: [],
shop_info: null,
course_list: [],
auth_status: false,
comment_list: [],
web_url: ''
}
},
methods: {
swiperTab(e) {
this.current = Number(e.target.current)
console.log(this.current);
},
//授权取消
onAuthCancel(e) {
this.auth_status = false;
this.$api.toast('取消授权,可能会使部分服务不能用,或页面信息不完整')
},
//授权成功
onAuthConfirm(e) {
this.auth_status = false;
this.collect((this.info.id || 0), (this.info.shop.id || 0));
},
//选择课程类型
chooseTab(is_type, id, shop_id) {
this.course_type = is_type;
this.getCourseList(id, shop_id, is_type);
},
//教练详情
getDetail(id, shop_id) {
let _this = this;
this.$http({
url: '/addons/xilufitness/coach/detail',
data: {
id: id,
shop_id: shop_id
},
method: 'get'
}).then(res => {
if (res.code == 1) {
_this.info = res.data.info;
_this.thumb_images = res.data.info.xilufitness_urls.coach_images || [];
_this.shop_info = res.data.info.shop || null;
_this.lable_list = res.data.info.lable_list || [];
}
}).catch(error => {
console.log('coachError', error);
})
},
//获取课程数据
getCourseList(id, shop_id, is_type) {
let _this = this;
this.$http({
url: '/addons/xilufitness/coach/getList',
data: {
id: id,
shop_id: shop_id,
is_type: is_type
},
method: 'get'
}).then(res => {
if (res.code == 1) {
_this.course_list = res.data.list;
}
}).catch(error => {
console.log('courseError', error);
})
},
//获取评论
getCommentList(shop_id) {
let _this = this;
this.$http({
url: '/addons/xilufitness/course/getCommentList',
data: {
shop_id: shop_id,
page: 1
},
methods: 'get'
}).then(res => {
if (res.code == 1) {
_this.comment_list = res.data.list || [];
}
}).catch(error => {
console.log('commentError', error);
});
},
//打开地图
openLocation(lat, lng) {
this.$api.openLocation(lat, lng);
},
//课程详情
course_detail(id, is_type) {
this.$api.navigate('../group_lessons_info/group_lessons_info?id=' + id + '&is_type=' + is_type)
},
//活动详情
camp_detail(id) {
this.$api.navigate('../bootcamp_info/bootcamp_info?id=' + id);
},
// 收藏
collect(id, shop_id) {
let _this = this;
let token = this.$api.getCache('token');
if (!token) {
this.auth_status = true;
} else {
this.$http({
url: '/addons/xilufitness/user/collect',
data: {
id: id,
is_type: 2,
shop_id: shop_id
},
method: 'post'
}).then(res => {
if (res.code == 1) {
_this.info.is_collect = res.data.is_collect
}
}).catch(error => {
console.log('coachError', error);
})
}
},
//更多评论
commentList(shop_id) {
this.$api.navigate('../user_appraise_list/user_appraise_list?shop_id=' + shop_id);
},
},
onLoad(options) {
this.web_url = webConfig.base_url || '';
this.getCommentList(options.shop_id || 0);
this.getDetail((options.id || 0), (options.shop_id || 0));
this.getCourseList((options.id || 0), (options.shop_id || 0), this.course_type);
},
onShareAppMessage() {
}
}
</script>
<style lang="scss" scoped>
.xilu {
&_swiper_info {
width: 100%;
height: 750rpx;
position: relative;
image {
width: 100%;
height: 100%;
display: block;
}
}
&_mask {
width: 100%;
height: 380rpx;
position: absolute;
bottom: 0;
z-index: 3;
left: 0;
}
&_swiper_dot {
display: inline-block;
height: 39rpx;
line-height: 39rpx;
background: rgba(0, 0, 0, 0.25);
border-radius: 20rpx;
position: absolute;
font-size: 24rpx;
font-weight: 400;
color: #FFFFFF;
right: 25rpx;
bottom: 220rpx;
padding-left: 15rpx;
padding-right: 15rpx;
z-index: 4;
}
&_box {
width: 700rpx;
padding: 30rpx;
margin-top: -190rpx;
background: #292B2C;
border-radius: 20rpx;
}
&_label {
width: 161rpx;
height: 38rpx;
}
&_bg_info {
width: 700rpx;
height: 140rpx;
position: relative;
z-index: 1;
}
&_bg_view {
width: 700rpx;
height: 140rpx;
position: absolute;
z-index: 2;
top: 0;
left: 0;
}
&_scroll {
&_item {
display: inline-block;
vertical-align: top;
font-size: 34rpx;
font-weight: 500;
color: #999999;
line-height: 48rpx;
}
&_item.active {
font-weight: 500;
color: #FFFFFF;
}
&_item+&_item {
margin-left: 40rpx;
}
}
&_list_item:nth-of-type(2n) {
margin-right: 0;
}
&_list_item {
width: 340rpx;
padding-bottom: 20rpx;
background: #292B2C;
border-radius: 20rpx;
margin-top: 20rpx;
margin-right: 20rpx;
display: inline-block;
vertical-align: top;
&_cover {
width: 100%;
height: 340rpx;
display: block;
}
}
&_btn_more {
font-size: 22rpx;
font-weight: 400;
color: #999999;
width: 146rpx;
height: 55rpx;
line-height: calc(55rpx - 2px);
text-align: center;
border-radius: 28rpx;
border: 1px solid #979797;
}
&_pj_item {
border-top: 1px solid #434343;
padding-top: 20rpx;
padding-bottom: 20rpx;
&_head_img {
width: 75rpx;
height: 75rpx;
border-radius: 50%;
}
&_star {
width: 23rpx;
height: 21rpx;
}
}
&_info_item {
width: 700rpx;
padding: 20rpx;
background: #404243;
border-radius: 20rpx;
margin-top: 30rpx;
&_cover {
width: 150rpx;
height: 150rpx;
border-radius: 20rpx;
display: block;
}
}
&_btn {
width: 118rpx;
height: 57rpx;
line-height: 57rpx;
text-align: center;
font-size: 28rpx;
font-weight: 400;
color: #0E0E0F;
background: #FFCF00;
border-radius: 10rpx;
}
&_textsq::before {
content: '|';
display: inline-block;
vertical-align: middle;
font-size: 24rpx;
color: #999999;
margin: 0 5rpx;
}
}
</style>