lxp_Maxcess/components/projects/course/courseSpecModal.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>