246 lines
6.7 KiB
Vue
246 lines
6.7 KiB
Vue
<script setup lang="ts">
|
|
import { reactive } from 'vue';
|
|
import { getFindAppCourseSchoolTime, getFindAppCourseType } from "../../../common/request/api/api";
|
|
import tools from '../../../tools/index';
|
|
|
|
const state = reactive({
|
|
dialogVisible: false,
|
|
moduleData: {},
|
|
pageData: {},
|
|
scheduleId: '',
|
|
schoolTimeId: '',
|
|
courseTypeId: '',
|
|
originalPrice: 0,
|
|
typeItem: {}
|
|
})
|
|
|
|
function openComponent(specification, pageData) {
|
|
state.moduleData = specification;
|
|
state.pageData = pageData;
|
|
state.dialogVisible = true
|
|
}
|
|
|
|
function destoryComponent() {
|
|
state.dialogVisible = false;
|
|
}
|
|
|
|
const complete = (item) => {
|
|
state.typeItem = item
|
|
state.originalPrice = item.typeCoursePrice
|
|
state.courseTypeId = item.courseTypeId
|
|
state.pageData.coursePrice = item.typeCoursePrice
|
|
}
|
|
//课程时间进度
|
|
const findAppCourseSchoolTime = (val) => {
|
|
state.scheduleId = val
|
|
// state.pageData.coursePrice = state.originalPrice
|
|
state.schoolTimeId = ''
|
|
state.courseTypeId = ''
|
|
getFindAppCourseSchoolTime({ courseId: val }).then((res : any) => {
|
|
if (res.code === 200) {
|
|
state.moduleData.schoolTime = res.data
|
|
}
|
|
})
|
|
}
|
|
//课程类型进度
|
|
const findAppCourseType = (val) => {
|
|
state.schoolTimeId = val
|
|
state.courseTypeId = ''
|
|
// state.pageData.coursePrice = state.originalPrice
|
|
getFindAppCourseType({ courseId: val }).then((res : any) => {
|
|
if (res.code === 200) {
|
|
state.moduleData.courseType = res.data
|
|
}
|
|
})
|
|
}
|
|
const submit = (val : any, type : any) => {
|
|
if (state.scheduleId === '') {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '请选择课程进度',
|
|
});
|
|
return
|
|
}
|
|
if (state.schoolTimeId === '') {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '请选择上课时间',
|
|
});
|
|
return
|
|
}
|
|
if (state.courseTypeId === '') {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '请选择课程类型',
|
|
});
|
|
return
|
|
}
|
|
tools.jumpTo(val, {
|
|
...state.pageData,
|
|
...state.typeItem,
|
|
scheduleId: state.scheduleId,
|
|
schoolTimeId: state.schoolTimeId,
|
|
courseTypeId: state.courseTypeId,
|
|
type
|
|
}, null)
|
|
}
|
|
// /pages/service/customer/alone?type=2&groupID=532a9baf01dcce2fb5fd5b9552327c66&conversationID=C2C532a9baf01dcce2fb5fd5b9552327c66&title=助教981
|
|
const toAssistant = () => {
|
|
uni.$u.route({
|
|
url: '/pages/service/customer/alone',
|
|
params: {
|
|
type: 2,
|
|
groupID: state.pageData.assistantId,
|
|
conversationID: 'C2C' + state.pageData.assistantId,
|
|
title: state.pageData.assistantNickname
|
|
}
|
|
})
|
|
}
|
|
defineExpose({
|
|
openComponent,
|
|
destoryComponent
|
|
})
|
|
</script>
|
|
<template>
|
|
<u-popup :show="state.dialogVisible" @close="destoryComponent()" closeable round="24">
|
|
<view class="course-modal">
|
|
<view class="course-intro u-border-bottom" style="position: relative">
|
|
<image class="course-intro__img" :src="state.pageData.courseImg" mode="aspectFill"></image>
|
|
<view class="course-intro__column flex-column">
|
|
<text class="w50 u-line-1 f-medium">{{ state.pageData.courseName }}</text>
|
|
<view class="flex-row u-m-t-8">
|
|
<u-tag :text="state.pageData.courseType === 0 ? $t('PublicCourse'):$t('OneToOne')" plain class="u-m-r-8" color="#666" borderColor="#666"></u-tag>
|
|
</view>
|
|
<l-price class="u-m-t-auto" :count="state.pageData.coursePrice" size="42rpx"></l-price>
|
|
</view>
|
|
</view>
|
|
<view class="course-pattern">
|
|
<view class="pattern-wrap">
|
|
<text class="u-font-30 f-medium">{{ $t('progress') }}</text>
|
|
<view class="pattern-grids u-m-t-26">
|
|
<view class="pattern-tag" v-for="(item,index) in state.moduleData.schedule" :class="{'active':item.scheduleId === state.scheduleId}" :key="index" @click="findAppCourseSchoolTime(item.scheduleId)">
|
|
{{ item.scheduleName }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="pattern-wrap" v-if="state.moduleData.schoolTime">
|
|
<text class="u-font-30 f-medium">{{ $t('time') }}</text>
|
|
<text style="color: #878787;margin-left: 40rpx;" @tap="toAssistant">{{ $t('Contact') }}</text>
|
|
<view class="pattern-grids u-m-t-26">
|
|
<view class="pattern-tag" v-for="(item,index) in state.moduleData.schoolTime" :class="{'active':item.schoolTimeId === state.schoolTimeId}" :key="index" @click="findAppCourseType(item.schoolTimeId)">
|
|
{{ $t('every') }}{{ item.schoolName }}~~{{ item.schoolTime !== '' ? item.schoolTime : $t('determined')}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="pattern-wrap" v-if="state.moduleData.courseType">
|
|
<text class="u-font-30 f-medium">{{ $t('type') }}</text>
|
|
<view class="pattern-grids u-m-t-26">
|
|
<view class="pattern-tag" v-for="(item,index) of state.moduleData.courseType" :class="{'active':item.courseTypeId === state.courseTypeId}" @click="complete(item)" :key="index">{{ item.courseTypeName }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="modal-footer">
|
|
<view class="modal-button plain " @tap="submit('/pages/service/order/createdOrder',0)">{{ $t('alone') }}</view>
|
|
<!-- <view class="modal-button active" @tap="submit('/pages/service/order/spliceOrder',1)">邀人参团</view>-->
|
|
<view class="modal-button active" @tap="submit('/pages/service/order/createdOrder',1)">{{ $t('group') }}</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</template>
|
|
|
|
|
|
<style lang="scss">
|
|
.course-modal {
|
|
width: 100vw;
|
|
max-height: 100vh;
|
|
padding-top: var(--status-bar-height);
|
|
background-color: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: 24rpx 24rpx 0 0;
|
|
|
|
.course-intro {
|
|
padding: 32rpx;
|
|
display: flex;
|
|
|
|
&__img {
|
|
width: 216rpx;
|
|
height: 154rpx;
|
|
border-radius: 16rpx;
|
|
margin-right: 32rpx;
|
|
}
|
|
}
|
|
|
|
.course-pattern {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 32rpx;
|
|
|
|
.pattern-wrap {
|
|
margin-bottom: 32rpx;
|
|
|
|
&:last-child {
|
|
margin-bottom: unset;
|
|
}
|
|
|
|
.pattern-grids {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 24rpx 32rpx;
|
|
|
|
.pattern-tag {
|
|
min-width: 172rpx;
|
|
border-radius: 12rpx;
|
|
//height: 48rpx;
|
|
background-color: #f7f7f7;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
font-family: Medium;
|
|
padding: 8rpx 24rpx;
|
|
|
|
&.active {
|
|
border: 1px solid $color;
|
|
background-color: rgba(160, 40, 49, 0.10);
|
|
color: $color;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-footer {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16rpx 32rpx;
|
|
|
|
.modal-button {
|
|
padding: 26rpx 100rpx;
|
|
border-radius: 48rpx;
|
|
height: 88rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: Medium;
|
|
font-size: 32rpx;
|
|
|
|
&.plain {
|
|
border: 2rpx solid $color;
|
|
color: $color;
|
|
}
|
|
|
|
&.active {
|
|
background-color: $color;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |