543 lines
14 KiB
Vue
543 lines
14 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="uv-demo-block">
|
|
<uv-swiper :list="photo" indicator indicatorMode="line" circular height="200" radius="0"></uv-swiper>
|
|
</view>
|
|
<uni-card v-if="course.courseName" :border="false" :is-shadow="false" :padding="0">
|
|
<uv-cell-group :customStyle="{ backgroundColor: '#ffffff' }" :border="false">
|
|
<uv-cell :cellStyle="{ padding: '10px 5px' }" :border="false">
|
|
<template v-slot:title>
|
|
<view class="merchant-name">{{ course.courseName }}</view>
|
|
</template>
|
|
</uv-cell>
|
|
<uv-cell :cellStyle="{ padding: '10px 5px' }" :border="false">
|
|
<template v-slot:title>
|
|
<view class="pirce-bar" style="display: flex">
|
|
<view class="web-text-danger">￥</view>
|
|
<view class="web-text-danger" style="font-size: 40rpx">{{ course.price }}</view>
|
|
<view style="margin-left: 30rpx"><uni-tag :text="`${course.classPeriod}课时`" inverted type="error"></uni-tag></view>
|
|
</view>
|
|
</template>
|
|
</uv-cell>
|
|
<uv-cell
|
|
:title="course.merchantName"
|
|
:label="`距离【${course.merchantName}】3.8公里·约7分钟`"
|
|
isLink
|
|
:border="false"
|
|
:cellStyle="{ padding: '10px 5px' }"
|
|
@click="mapTo(course)"
|
|
>
|
|
<template v-slot:right-icon>
|
|
<uv-icon size="50rpx" name="map-fill" color="#5ac725" style="color: #ff0000"></uv-icon>
|
|
</template>
|
|
</uv-cell>
|
|
<uv-cell title="年龄限制" :label="course.ageLimit" :border="false" :cellStyle="{ padding: '10px 5px' }"></uv-cell>
|
|
<uv-cell title="报名时间" :label="course.bmTime" :border="false" :cellStyle="{ padding: '10px 5px' }"></uv-cell>
|
|
</uv-cell-group>
|
|
</uni-card>
|
|
|
|
<uni-card title="课程介绍" :is-shadow="false" :border="false" :padding="0">
|
|
<view class="web-text-heading booking-content">
|
|
<uv-image :src="`https://oss.wsdns.cn/20240608/1ce5b3f9b33b48b2bc9d68644e8ba6f4.jpg`"></uv-image>
|
|
<view v-html="course.content"></view>
|
|
<!-- <uv-empty icon="https://cdn.uviewui.com/uview/empty/car.png"></uv-empty> -->
|
|
<!-- <uv-gap height="50"></uv-gap> -->
|
|
</view>
|
|
</uni-card>
|
|
|
|
<uni-card title="课程教练" :is-shadow="false" :border="false" :padding="0">
|
|
<view class="teacher-list">
|
|
<view class="teacher-item" @click="openUrl(`/package/teacher/detail?id=1`)">
|
|
<uv-avatar
|
|
src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKf8Lvm8WN0LnV2B6vYzyGJVxk2XW3j1mtDzicA60KhWRRjyU8ORiascwInkbqhVibRm2A1O1tRRbzhA/132"
|
|
size="54"
|
|
></uv-avatar>
|
|
<view class="teacher-info">
|
|
<uv-text text="游泳教练" align="center" size="16"></uv-text>
|
|
<uv-text text="游泳企事业800" type="warning" size="12"></uv-text>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="teacher-item">
|
|
<uv-avatar
|
|
src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKf8Lvm8WN0LnV2B6vYzyGJVxk2XW3j1mtDzicA60KhWRRjyU8ORiascwInkbqhVibRm2A1O1tRRbzhA/132"
|
|
size="50"
|
|
></uv-avatar>
|
|
<view class="teacher-info">
|
|
<uv-text text="游泳教练" align="center" size="16"></uv-text>
|
|
<uv-text text="游泳企事业800" type="warning" size="12"></uv-text>
|
|
</view>
|
|
</view>
|
|
<view class="teacher-item">
|
|
<uv-avatar
|
|
src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKf8Lvm8WN0LnV2B6vYzyGJVxk2XW3j1mtDzicA60KhWRRjyU8ORiascwInkbqhVibRm2A1O1tRRbzhA/132"
|
|
size="54"
|
|
></uv-avatar>
|
|
<view class="teacher-info">
|
|
<uv-text text="游泳教练" align="center" size="16"></uv-text>
|
|
<uv-text text="游泳企事业800" type="warning" size="12"></uv-text>
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
</uni-card>
|
|
|
|
<!-- <view class="xieyi web-cell web-text-secondary web-cell-align-top">
|
|
<view class="web-cell web-cell-content web-cell-align-top">
|
|
<uni-icons type="circle" size="20" color="#a4a5a7" v-if="!disabled" @click="onDisabled"></uni-icons>
|
|
<uni-icons type="checkbox" size="20" color="#11a954" v-else @click="onDisabled"></uni-icons>
|
|
<view class="text" @click="onDisabled">
|
|
<text>我已阅读并同意</text>
|
|
<text class="link"
|
|
@click.stop="navTo('/package/article/detail?articleId=503')">《订票协议》</text>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<uv-gap height="80"></uv-gap>
|
|
<view class="save-btn">
|
|
<uni-goods-nav :fill="true" :options="options" :button-group="buttonGroup" @click="onClick" @buttonClick="openBookingTel" />
|
|
</view>
|
|
|
|
<!-- <view class="save-btn">
|
|
<uv-button
|
|
:customStyle="{background: 'linear-gradient(to right, #ccff66, #008e04)',borderRadius: '30px',color: '#ffffff'}"
|
|
text="立即报名" @click="save"></uv-button>
|
|
</view> -->
|
|
</view>
|
|
|
|
<!-- <view class="booking-tel" @click="openBookingTel">活动订场</view> -->
|
|
<!-- 立即报名弹窗 -->
|
|
<uni-popup ref="popup" type="center">
|
|
<view class="popup-checkout">
|
|
<uv-gap height="10"></uv-gap>
|
|
<uv-cell-group :customStyle="{ backgroundColor: '#ffffff' }" :border="false">
|
|
<uv-cell :cellStyle="{ padding: '10px 15px' }" :border="false">
|
|
<template v-slot:title>
|
|
<view class="pirce-bar" style="display: flex">
|
|
<uv-text mode="price" color="#ff0000" bold size="20" :text="course.price"></uv-text>
|
|
</view>
|
|
</template>
|
|
</uv-cell>
|
|
<uv-cell title="规格" :border="false"></uv-cell>
|
|
<uv-cell :border="false" :cellStyle="{ padding: '0 15px' }">
|
|
<template v-slot:title>
|
|
<uni-data-checkbox mode="tag" v-model="radio2" :localdata="sex"></uni-data-checkbox>
|
|
</template>
|
|
</uv-cell>
|
|
<uv-cell title="班级/教练" :border="false"></uv-cell>
|
|
<uv-cell :border="false" :cellStyle="{ padding: '0 15px' }">
|
|
<template v-slot:title>
|
|
<uni-data-checkbox mode="tag" v-model="radio3" :localdata="teacher"></uni-data-checkbox>
|
|
</template>
|
|
</uv-cell>
|
|
<uv-cell title="报名学员" :border="false"></uv-cell>
|
|
<uv-cell :border="false" :cellStyle="{ padding: '0 15px' }">
|
|
<template v-slot:title>
|
|
<view style="display: flex">
|
|
<uni-data-checkbox mode="tag" v-model="radio4" :localdata="student"></uni-data-checkbox>
|
|
<uv-tags text="新增" type="info" size="mini" icon="plus" plain></uv-tags>
|
|
</view>
|
|
</template>
|
|
</uv-cell>
|
|
<view class="checkout-car">
|
|
<view class="car-total">
|
|
<text style="color: #ebcf00">合计￥</text>
|
|
<!-- <uv-count-to :startVal="0" decimals="2" duration="100" color="#ebcf00" bold :endVal="totalPrice"></uv-count-to> -->
|
|
</view>
|
|
<uv-button
|
|
:disabled="!disabled"
|
|
:customStyle="{
|
|
background: 'linear-gradient(to right, #FE6035, #EF1224)',
|
|
borderRadius: '0 30px 30px 0',
|
|
color: '#ffffff',
|
|
border: 'none',
|
|
padding: '22px 30px'
|
|
}"
|
|
text="下一步"
|
|
@click="save"
|
|
></uv-button>
|
|
</view>
|
|
</uv-cell-group>
|
|
</view>
|
|
</uni-popup>
|
|
<!-- 登录组件 -->
|
|
<ws-login ref="login" :logo="logo" @done="reload" />
|
|
</template>
|
|
|
|
<script>
|
|
import { storeToRefs } from 'pinia';
|
|
import * as CourseApi from '@/api/booking/course';
|
|
import { useCarStore } from '@/store/modules/car';
|
|
const carStore = useCarStore();
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
id: 0,
|
|
// 课程信息
|
|
course: {},
|
|
// 课程相册
|
|
photo: [],
|
|
isLogin: false,
|
|
disabled: true,
|
|
options: [
|
|
{
|
|
icon: 'headphones',
|
|
text: '客服'
|
|
},
|
|
{
|
|
icon: 'upload',
|
|
text: '分享'
|
|
}
|
|
],
|
|
buttonGroup: [
|
|
{
|
|
text: '立即报名',
|
|
backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
|
|
color: '#fff'
|
|
}
|
|
],
|
|
radio2: 0,
|
|
sex: [
|
|
{
|
|
text: '幼儿基础班(10次课，10天连续上课)',
|
|
value: 0
|
|
},
|
|
{
|
|
text: '少年基础班(10次课，10天连续上课)',
|
|
value: 1
|
|
},
|
|
{
|
|
text: '少年基础班(10次课，10天连续上课)',
|
|
value: 2
|
|
},
|
|
{
|
|
text: '成人基础班(10次课，10天连续上课)',
|
|
value: 3
|
|
}
|
|
],
|
|
teacher: [
|
|
{
|
|
text: '姚教练',
|
|
value: 0
|
|
}
|
|
],
|
|
student: [
|
|
{
|
|
text: '全红婵',
|
|
value: 0
|
|
}
|
|
]
|
|
};
|
|
},
|
|
onLoad(option) {
|
|
this.id = option.id;
|
|
this.reload();
|
|
},
|
|
onShow() {
|
|
// 登录状态
|
|
if (uni.getStorageSync('user_id') && uni.getStorageSync('access_token')) {
|
|
this.isLogin = true;
|
|
}
|
|
},
|
|
methods: {
|
|
async reload() {
|
|
const app = this;
|
|
|
|
// 请求数据
|
|
Promise.all([app.getCourse()]).then((res) => {
|
|
const course = res[0];
|
|
app.course = course;
|
|
|
|
// 修改标题
|
|
uni.setNavigationBarTitle({
|
|
title: course.courseName
|
|
});
|
|
// 加载课程相册
|
|
if (course.files) {
|
|
app.photo = JSON.parse(course.files);
|
|
}
|
|
// 更新购物车状态
|
|
// carStore.setMerchant(merchant)
|
|
// carStore.merchantId = course.merchantId
|
|
// carStore.merchantName = course.merchantName
|
|
// carStore.merchantCode = course.merchantCode
|
|
});
|
|
},
|
|
getCourse() {
|
|
return new Promise((resolve, reject) => {
|
|
CourseApi.getCourse(this.id)
|
|
.then((result) => {
|
|
resolve(result);
|
|
})
|
|
.catch(reject);
|
|
});
|
|
},
|
|
onDisabled() {
|
|
this.disabled = !this.disabled;
|
|
},
|
|
navTo(url) {
|
|
uni.navigateTo({
|
|
url
|
|
});
|
|
},
|
|
onClick(e) {
|
|
const app = this;
|
|
const { course } = app;
|
|
console.log('e: ', e);
|
|
if (e.index == 0) {
|
|
// 企业微信客服
|
|
// #ifdef H5
|
|
window.open(`setting.config.wxqykf.url`);
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
wx.openCustomerServiceChat({
|
|
extInfo: { url: `` },
|
|
corpId: `setting.config.wxqykf.corpId`,
|
|
success(res) {}
|
|
});
|
|
// #endif
|
|
// #ifdef APP-PLUS
|
|
uni.share({
|
|
provider: 'weixin',
|
|
scene: 'WXSceneSession',
|
|
type: 0,
|
|
openCustomerServiceChat: true,
|
|
corpid: `setting.config.wxqykf.corpId`,
|
|
customerUrl: `setting.config.wxqykf.url`,
|
|
success(res) {
|
|
console.log('success:' + JSON.stringify(res));
|
|
},
|
|
fail(e) {
|
|
console.log('errCode', e.errCode, e);
|
|
if (e.errCode === -8) {
|
|
app.$toast('很抱歉，您的手机没有安装微信~');
|
|
}
|
|
}
|
|
});
|
|
// #endif
|
|
|
|
}
|
|
if (e.index == 1) {
|
|
uni.share({
|
|
provider: 'weixin',
|
|
scene: "WXSceneSession",
|
|
type: 5,
|
|
imageUrl: '',
|
|
title: course.name,
|
|
miniProgram: {
|
|
id: 'gh_abcdefg',
|
|
path: 'package/course/detail?id=' + app.id,
|
|
type: 0,
|
|
webUrl: 'http://apps.gxwebsoft.com/gxtyzx-h5/#/package/course/detail?id=' + app.id
|
|
},
|
|
success: ret => {
|
|
console.log(JSON.stringify(ret));
|
|
}
|
|
});
|
|
}
|
|
// uni.showToast({
|
|
// title: `点击${e.content.text}`,
|
|
// icon: 'none'
|
|
// });
|
|
},
|
|
mapTo(item) {
|
|
// console.log('item: ',item.lngAndLat);
|
|
const arr = item.lngAndLat.split(',');
|
|
// console.log('arr: ',arr);
|
|
uni.openLocation({
|
|
latitude: parseFloat(arr[1]),
|
|
longitude: parseFloat(arr[0]),
|
|
success: function () {
|
|
console.log('success');
|
|
}
|
|
});
|
|
},
|
|
openBookingTel() {
|
|
uni.navigateTo({
|
|
url: '/package/course/checkout?id=' + this.id
|
|
})
|
|
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
|
|
// this.$refs.popup.open('bottom');
|
|
},
|
|
closeBookingTel() {
|
|
this.$refs.popup.close();
|
|
},
|
|
callPhone(phone) {
|
|
uni.makePhoneCall({
|
|
phoneNumber: phone
|
|
});
|
|
},
|
|
onMap() {
|
|
uni.getLocation({
|
|
type: 'gcj02', //返回可以用于uni.openLocation的经纬度
|
|
success: function (res) {
|
|
console.log('返回可以用于uni.openLocation的经纬度: ', res);
|
|
const latitude = this.course.latitude;
|
|
const longitude = this.course.longitude;
|
|
uni.openLocation({
|
|
latitude: latitude,
|
|
longitude: longitude,
|
|
success: function () {
|
|
console.log('success');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
openUrl(url) {
|
|
uni.navigateTo({
|
|
url
|
|
});
|
|
},
|
|
save() {
|
|
if (!this.disabled) {
|
|
uni.showToast({
|
|
title: '请先阅读并同意订票协议',
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
uni.navigateTo({
|
|
url: '/package/course/checkout?id=' + this.id
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
page {
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
background-color: #f0f2f5;
|
|
width: 750rpx;
|
|
overflow-x: hidden;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
}
|
|
|
|
.merchant-name {
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.save-btn {
|
|
width: 750rpx;
|
|
background-color: #ffffff;
|
|
position: fixed;
|
|
padding-bottom: 30rpx;
|
|
bottom: 0;
|
|
}
|
|
|
|
.booking-tel {
|
|
position: fixed;
|
|
z-index: 1;
|
|
top: 270px;
|
|
right: 0;
|
|
width: 80px;
|
|
height: 38px;
|
|
border-radius: 50px 0 0 50px;
|
|
background: linear-gradient(to right, #ccff66, #008e04);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #ffffff;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.popup-checkout {
|
|
background-color: #ffffff;
|
|
width: 100vw;
|
|
height: 60vh;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
margin: auto;
|
|
z-index: 9999;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
font-size: 38rpx;
|
|
text-align: center;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.desc {
|
|
line-height: 2rem;
|
|
}
|
|
}
|
|
|
|
.popup-close {
|
|
display: flex;
|
|
margin-top: 24rpx;
|
|
justify-content: center;
|
|
}
|
|
.booking-content {
|
|
padding: 10px;
|
|
font-size: 30rpx;
|
|
line-height: 1.5rem;
|
|
}
|
|
.xieyi {
|
|
margin-bottom: 80rpx;
|
|
padding: 0 30rpx;
|
|
|
|
.text {
|
|
margin-left: 5rpx;
|
|
|
|
.link {
|
|
color: #0f80ff;
|
|
}
|
|
}
|
|
}
|
|
.teacher-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.teacher-item {
|
|
margin: 20rpx 12rpx;
|
|
display: flex;
|
|
width: 160rpx;
|
|
height: 200rpx;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: #f3f3f3;
|
|
border-radius: 12rpx;
|
|
padding: 16rpx;
|
|
.teacher-info {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.checkout-car {
|
|
width: 700rpx;
|
|
left: 25rpx;
|
|
position: fixed;
|
|
z-index: 9999;
|
|
bottom: 30rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background-color: #000000;
|
|
border-radius: 100px;
|
|
align-items: center;
|
|
|
|
.car-selected {
|
|
color: #ccc;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
.car-total {
|
|
display: flex;
|
|
color: #ebcf00;
|
|
align-items: center;
|
|
padding-left: 40rpx;
|
|
|
|
.save-btn {
|
|
}
|
|
}
|
|
}
|
|
</style>
|