517 lines
13 KiB
Vue
517 lines
13 KiB
Vue
|
<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>
|