初始化
This commit is contained in:
246
components/projects/course/courseSpecModal.vue
Normal file
246
components/projects/course/courseSpecModal.vue
Normal file
@@ -0,0 +1,246 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user