saas_miniprogram/pages2/wd/class.vue

<template>
	<view style="padding: 0 30rpx 30rpx">
		<nav-bar title="我的网课"></nav-bar>
		<view class="class" v-for="(item, index) in goodsList" :key="index">
			<view class="class_item" @click.stop="studyIn(item.goodsId, item.gradeId, item, index)">
				<image :src="$method.splitImgHost(item.coverUrl, true)" class="class_img"></image>
				<view class="class_text">
					<view class="class_title">{{ item.goodsName }}</view>
					<view class="content_box">
						<image src="/static/icon/wk_icon1.png" class="wk_icon"></image>
						共
						<text class="content">{{ item.courseNum }}</text>
						课程
						<text class="content">{{ item.secAllNum + item.examNum }}</text>
						节
						<text class="content">{{ item.classHours || "-" }}</text>
						学时
					</view>
					<view class="content_box" v-if="item.serviceStartTime && item.serviceEndTime">
						<image src="/static/icon/wk_icon2.png" class="wk_icon"></image>
						学习服务期：
						<text class="content">{{ $method.timestampToTime(item.serviceStartTime, true, true) }}
							-
							{{
                $method.timestampToTime(item.serviceEndTime, true, true)
              }}</text>
					</view>
				</view>

				<!-- 不在学习服务期 -->
				<template v-if="
            item.serviceStartTime &&
            (sysTime < item.serviceStartTime || sysTime > item.serviceEndTime)
          ">
					<view class="class-warm" v-if="item.gradeId != 0 && item.gradeStatus == 1">
						<view class="class-warm__text">
							<view class="date"> 不在学习服务期，不可以学习了哦 </view>
						</view>
					</view>
				</template>

				<template v-else>
					<!-- 班级有效期过了 -->
					<template v-if="item.classEndTime && item.classEndTime < sysTime">
						<view class="class-warm">
							<u-icon class="class-warm__icon" size="30" color="#FF3B30" name="error-circle-fill">
							</u-icon>
							<view class="class-warm__text">
								<view class="date">班级有效期：{{
                    $method.timestampToTime(item.classStartTime, true, true)
                  }}
									-
									{{
                    $method.timestampToTime(item.classEndTime, true, true)
                  }}
								</view>
								<view class="state">班级状态：已过期</view>
								<!-- <view class="state"
                  >班级状态：已过期，有疑问请联系
                  <text @click="call">020-87085982</text></view
                > -->
							</view>
						</view>
					</template>

					<!-- 班级有效期之前 -->
					<template v-else-if="item.classStartTime && item.classStartTime > sysTime">
						<view class="class-warm">
							<u-icon class="class-warm__icon" size="30" color="#FF3B30" name="error-circle-fill">
							</u-icon>
							<view class="class-warm__text">
								<view class="date">班级有效期：{{
                    $method.timestampToTime(item.classStartTime, true, true)
                  }}
									-
									{{
                    $method.timestampToTime(item.classEndTime, true, true)
                  }}
								</view>
								<view class="state">班级状态：未到学习时间</view>
								<!-- <view class="state"
                  >班级状态：未到学习时间，有疑问请联系
                  <text @click="call">020-87085982</text></view
                > -->
							</view>
						</view>
					</template>

					<!-- 在班级有效期之间或者没有班级有效期 -->
					<template v-else>
						<view class="class-warm" v-if="
                item.gradeId != 0 &&
                item.gradeStatus == 1 &&
                item.classStatus != null
              ">
							<view class="class-warm__text">
								<view class="date">
									班级状态：
									<text v-if="item.classStatus == 1">已开班</text>
									<text v-if="item.classStatus == 0">未开班</text>
								</view>
								<view class="state" v-if="item.classStatus == 0">教务处正在为您开通班级，请耐心等待</view>
								<view class="state" v-if="
                    item.classStatus == 1 &&
                    item.classStartTime &&
                    item.classEndTime
                  ">
									班级有效期：{{
                    $method.timestampToTime(item.classStartTime, true, true)
                  }}-{{
                    $method.timestampToTime(item.classEndTime, true, true)
                  }}
								</view>
							</view>
						</view>
						<!-- 学时审核状态不可审核 -->
						<template v-if="item.periodStatus == -1 || item.periodStatus == 2">
							<view class="class-warm" v-if="item.classStatus == 1 || item.classStatus === null">
								<view class="class-warm__text">
									<view class="date">
										<template v-if="
                        sysTime >= item.serviceStartTime &&
                        sysTime <= item.serviceEndTime
                      ">
											学习状态：
											<text v-if="item.stuAllNum + item.recordNum == 0">未学习</text>
											<text v-else-if="
                          item.stuAllNum + item.recordNum > 0 &&
                          item.stuAllNum + item.recordNum <
                            item.secAllNum + item.examNum
                        ">学习中</text>
											<text v-else-if="
                          item.stuAllNum + item.recordNum >=
                          item.secAllNum + item.examNum
                        ">已学完</text>
										</template>
										<template v-else>
											<template v-if="item.serviceStartTime">已过学习服务期，不可以学习了哦！</template>
										</template>
									</view>
								</view>
							</view>

							<!-- <view class="class-warm" v-if="item.profileTpStatus == 1">
								<view class="class-warm__text">
									<view class="date">
										资料审核状态：
										<text v-if="item.profileStatus == null">未提交资料</text>
										<text v-else-if="item.profileStatus == 1">已通过</text>
										<text v-else-if="item.profileStatus == 2">审核中</text>
										<text v-else-if="item.profileStatus == 3">待完善</text>
									</view>
								</view>
							</view> -->
						</template>

						<!-- 学时审核状态可以审核 -->
						<template v-if="item.periodStatus != -1">
							<view class="class-warm">
								<view class="class-warm__text">
									<view class="date">
										<text v-if="item.periodStatus == 0">机构审核：学时审核不通过</text>
										<!-- <text v-else-if="item.periodStatus == 2">学时待审核</text> -->
										<text v-else-if="item.periodStatus == 3">学时审核中</text>
										<text v-else-if="item.periodStatus == 1">
											<text v-if="item.periodPlush > 0">学时已上报信息中心</text>
											<text v-else>机构审核：学时审核通过</text>
										</text>
									</view>
								</view>
							</view>

							<view class="class-warm" v-if="item.subscribeId != null && item.periodStatus == 1">
								<view class="class-warm__text">
									<view class="date">
										<view v-if="item.subExamStatus === null">待预约考试</view>
										<view v-else-if="
                        item.subExamStatus === 0 &&
                        sysTime <
                          $method.TimeTotimestamp(
                            $method.timestampToTime(
                              item.subApplySiteExamTime,
                              true
                            ) +
                              ' ' +
                              item.subApplySiteStartTime
                          )
                      ">
											待考试，考试时间：
											{{
                        $method.timestampToTime(
                          item.subApplySiteExamTime,
                          true
                        ) +
                        " " +
                        item.subApplySiteStartTime
                      }}
											-
											{{
                        $method.timestampToTime(
                          item.subApplySiteExamTime,
                          true
                        ) +
                        " " +
                        item.subApplySiteEndTime
                      }}
										</view>
										<view v-else-if="item.subExamStatus === 0">待出考试结果</view>
										<view v-else-if="item.subExamStatus === 1">
											<text v-if="item.subResult === null">待出考试结果</text>
											<text v-if="item.subResult === 0">考试结果：不通过，需补考</text>
											<text v-else-if="item.subResult === 1">考试结果：通过，考试成绩为{{
                          item.subPerformance
                        }}</text>
										</view>
										<view v-else-if="item.subExamStatus === 2">缺考，无成绩，需补考</view>
										<view v-else-if="item.subExamStatus === 3">作弊，无成绩，需补考</view>
										<view v-else-if="item.subExamStatus === 4">替考，无成绩，需补考</view>
									</view>
								</view>
							</view>
						</template>
					</template>
				</template>
			</view>

			<view class="bottomBox">
				<template v-if="
            item.gradeStatus == 1 &&
            item.status == 1 &&
            item.serviceEndTime > sysTime &&
            item.serviceStartTime < sysTime &&
            item.classEndTime &&
            item.classEndTime < sysTime &&
            (item.periodStatus == 0 || item.periodStatus == -1) &&
            item.studyCount > 0
          ">
					<view class="restart" @click.stop="selectClass(item, index)">
						选班重学
					</view>
				</template>

				<template v-else>
					<view class="content_box">
						<image src="/static/icon/wk_icon3.png" class="wk_icon"></image>
						学习进度：{{ item.stuAllNum + item.recordNum }}/{{
              item.secAllNum + item.examNum
            }}
					</view>
					<view class="box_progress">
						<view style="width: 60%">
							<u-line-progress :showText="false" height="22" active-color="#ff9900" :show-percent="false"
								:percent="
                  ((item.stuAllNum + item.recordNum) /
                    (item.secAllNum + item.examNum)) *
                  100
                "></u-line-progress>
						</view>

						<view>
							<u-button :class="{
                  disabled:
                    (item.serviceStartTime &&
                      (sysTime <= item.serviceStartTime ||
                        sysTime >= item.serviceEndTime)) ||
                    (item.classStartTime && sysTime <= item.classStartTime) ||
                    (item.classEndTime && sysTime >= item.classEndTime) ||
                    item.learningStatus == 2 ||
                    item.classStatus == 0 ||
                    (item.learningStatus == 3 &&
                      sysTime < item.learningTimeStart),
                }" type="warning" size="mini" @click.stop="studyIn(item.goodsId, item.gradeId, item, index)">
								进入学习</u-button>
						</view>
					</view>
					<template v-for="(appoint, appointIndex) in item.examApplyGoodsList">
						<view class="box_progress" :key="appointIndex" v-if="
                item.applyStatus === 1 &&
                !(
                  sysTime <= item.serviceStartTime ||
                  sysTime >= item.serviceEndTime ||
                  (item.classStartTime && sysTime <= item.classStartTime) ||
                  (item.classEndTime && sysTime >= item.classEndTime) ||
                  item.learningStatus == 2 ||
                  item.classStatus == 0 ||
                  (item.learningStatus == 3 && sysTime < item.learningTimeStart)
                )
              ">
							<view style="flex: 1; margin-right: 10rpx">
								<text style="color: #333333">{{ appoint.applyName }}</text>
							</view>
							<view>
								<u-button :plain="true" type="primary" size="mini"
									@click.stop="appointment(item, appoint)">预约考试
								</u-button>
							</view>
						</view>
					</template>
					<view class="box_progress" v-if="
              item.beforeStatus === 1 &&
              !(
                sysTime <= item.serviceStartTime ||
                sysTime >= item.serviceEndTime ||
                (item.classStartTime && sysTime <= item.classStartTime) ||
                (item.classEndTime && sysTime >= item.classEndTime) ||
                item.learningStatus == 2 ||
                item.classStatus == 0 ||
                (item.learningStatus == 3 && sysTime < item.learningTimeStart)
              )
            ">
						<view style="flex: 1; margin-right: 10rpx">
							<text style="color: #2979ff">{{ item.beforeName }}</text>
						</view>
						<view>
							<u-button type="primary" size="mini"
								@click="appBeforeAddress(item.goodsId, item)">进入刷题</u-button>
						</view>
					</view>
				</template>
			</view>
		</view>

		<view v-if="goodsList.length == 0">
			<u-empty text="暂无网课" margin-top="500" mode="list"></u-empty>
		</view>
		<u-popup v-model="selectClassModal" @close="gradeValue = -1" mode="bottom" border-radius="40">
			<view class="popup_box">
				<view style="margin-bottom: 20rpx">
					<view class="line1"></view>
					<view class="grade">选择班级1</view>
				</view>
				<u-line color="#D6D6DB" />
				<view>
					<scroll-view scroll-y="true" style="height: 500rpx">
						<view>
							<u-radio-group v-model="gradeValue" @change="radioGroupChange">
								<view v-for="(item, index) in gradeList" :key="index">
									<view style="display: flex; align-items: center; padding: 20rpx">
										<view>
											<u-radio shape="circle" :name="index" :disabled="
                          item.studentNum > 0 &&
                          item.studentNum == item.studentUpper
                        ">
												<view :class="
                            item.checked ? 'white-box blue-box' : 'white-box'
                          ">
													<view>
														<view class="blackTxt">{{ item.className }}</view>
														<Class-time-tip :classInfo="item"></Class-time-tip>
													</view>
												</view>
											</u-radio>
										</view>
									</view>
								</view>
							</u-radio-group>
						</view>
					</scroll-view>
				</view>
				<view class="confrim-btn">
					<view class="okBtn" @click="okPopup()">确定</view>
				</view>
			</view>
		</u-popup>
		<u-modal v-model="showMark" title="提示" @confirm="markConfirm" confirm-text="复制学习网址" :show-cancel-button="true"
			cancel-text="关闭">
			<view class="slot-content">
				<view>您的学习账号已经开通，请按照步骤操作，进行学习。</view>
				<view>1.复制学习地址:{{ markContent }}</view>
				<view>2.在【浏览器中】打开复制的学习网址</view>
				<view>3.打开学习网址后，选择【个人用户】进行登录</view>
				<view>(1)账号：您个人的身份证号码</view>
				<view>(2)密码：身份证号码，再加111111</view>
			</view>
		</u-modal>

		<u-modal v-model="showUserConfirmInfo" @confirm="confirmUserConfirm" ref="uModal" :async-close="true"
			@cancel="cancelUserConfirm" :confirm-text="
        '确认' + (confirmCount > 0 ? '(' + confirmCount + ')' : '')
      " :confirm-color="confirmCount > 0 ? '#999' : '#2979ff'" class="confirm-modal" title="实名验证确认" cancel="取消"
			:show-cancel-button="true">
			<view class="slot-content">
				<view class="content">
					<!-- ，立刻联系020-38946666 -->
					为避免个人信息不正确导致您的学习时长无效，请认真核对以下信息是否正确，如信息有误请取消当前操作。
					<view class="msg-list">
						<view class="item">
							<text class="item__left">姓名：</text>
							<text class="item__right">{{ userInfo.realname }}</text>
						</view>
						<view class="item">
							<text class="item__left">手机号：</text>
							<text class="item__right">{{ userInfo.telphone }}</text>
						</view>
						<view class="item">
							<text class="item__left">身份号：</text>
							<text class="item__right">{{ userInfo.idCard }}</text>
						</view>
						<view class="item">
							<u-checkbox v-model="confirmChecked" :label-disabled="false">确认个人信息无误</u-checkbox>
						</view>
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from "vuex";
	import ClassTimeTip from "../../components/common/ClassTimeTip.vue";
	export default {
		computed: {
			...mapGetters(["userInfo"]),
		},
		data() {
			return {
				activeItem: {},
				confirmTimer: null,
				confirmCount: 10,
				confirmChecked: false,
				showUserConfirmInfo: false,
				showMark: false,
				list: [1, 2, 3],
				goodsList: [],
				selectClassModal: false,
				gradeList: [],
				gradeValue: -1,
				param: {
					pageNum: 1,
					pageSize: 10,
				},
				total: 0,
				sysTime: 0,
				itemIndex: "",
				selectItem: {},
			};
		},
		onLoad(option) {
			// this.sysTime = +this.$method.timest();
			this.courseGoodsList();
		},
		async onShow() {
			this.getUserInfo();
			if (this.itemIndex !== "") {
				this.refreshByIndex();
			}
			await this.commonSystemTime();
			this.sysTime = +this.$method.timest();
		},
		onReachBottom() {
			if (this.goodsList.length < this.total) {
				this.param.pageNum++;
				this.courseGoodsList();
			}
		},
		methods: {
			...mapActions(["getUserInfo"]),
			/**
			 * 复制网址
			 */
			markConfirm() {
				uni.setClipboardData({
					data: this.markContent,
					success: function() {
						console.log("success");
					},
				});
			},
			/**
			 * 返回刷新之前进入的课程数据
			 */
			refreshByIndex() {
				let self = this;
				this.$api
					.courseGoodsList({
						pageNum: this.itemIndex + 1,
						pageSize: 1,
					})
					.then((res) => {
						if (res.data.code == 200) {
							this.$set(this.goodsList, this.itemIndex, res.data.rows[0]);
						}
					});
			},
			commonSystemTime() {
				return new Promise((resolve) => {
					this.$api.commonSystemTime().then((res) => {
						this.sysTime = res.data.data;
					});
				});
			},
			selectClass(item, index) {
				console.log(item);
				this.itemIndex = index;
				this.selectItem = item;
				this.selectClassModal = true;
				this.goodsGradeList(item.goodsId);
			},
			radioGroupChange(e) {
				console.log(e);
			},
			userConfirmInfoDetail() {
				return new Promise((resolve) => {
					this.$api
						.userConfirmInfoDetail({
							orderGoodsId: this.activeItem.orderGoodsId,
						})
						.then((res) => {
							if (!res.data.data) {
								clearInterval(this.confirmTimer);
								this.confirmCount = 10;
								this.showUserConfirmInfo = true;
								this.confirmTimer = setInterval(() => {
									if (this.confirmCount > 0) {
										this.confirmCount--;
									} else {
										clearInterval(this.confirmTimer);
									}
								}, 1000);
							} else {
								if (res.data.data.pushInfo) {
									resolve(true);
								} else {
									// ，请联系020-87085982
									uni.showModal({
										showCancel: false,
										title: "提示",
										content: "开通信息推送不成功，无法进入学习！",
									});
									resolve(false);
								}
							}
						});
				});
			},
			confirmUserConfirm() {
				this.$refs.uModal.clearLoading();
				if (this.confirmCount <= 0) {
					if (this.confirmChecked) {
						let infoJson = {
							realname: this.userInfo.realname,
							idCard: this.userInfo.idCard,
							telphone: this.userInfo.telphone,
						};
						this.$api
							.userConfirminfo({
								orderGoodsId: this.activeItem.orderGoodsId,
								infoJson: JSON.stringify(infoJson),
							})
							.then((res) => {
								if (res.data.data.pushInfo) {
									uni.showToast({
										icon: "none",
										title: "提交成功",
									});
								} else {
									// ，请联系020-87085982
									uni.showModal({
										showCancel: false,
										title: "提示",
										content: "开通信息推送不成功，无法进入学习！",
									});
								}
								this.showUserConfirmInfo = false;
							});
					} else {
						uni.showToast({
							icon: "none",
							title: "请勾选确认个人信息无误",
						});
					}
				} else {
					return;
				}
			},

			cancelUserConfirm() {
				clearInterval(this.confirmTimer);
			},
			goodsGradeList(id) {
				let self = this;
				this.$api
					.goodsGradeList({
						goodsId: id,
					})
					.then((res) => {
						if (res.data.code == 200) {
							self.gradeList = res.data.rows;
							if (self.gradeList.length == 0) {
								let item = {
									className: "系统分班",
									gradeId: 0,
								};
								self.gradeList.push(item);
							} else {
								let isGradeFull = self.gradeList.every(
									(item) =>
									item.studentNum > 0 && item.studentNum == item.studentUpper
								);
								//所有班级都满了
								if (isGradeFull) {
									let item = {
										className: "系统分班",
										gradeId: 0,
									};
									self.gradeList.unshift(item);
								}
							}
						}
					});
			},
			appBeforeAddress(goodsId, item) {
				this.$api
					.appBeforeAddress({
						// goodsId,
						orderGoodsId: item.orderGoodsId,
					})
					.then((res) => {
						if (res.data.code == 200) {
							uni.navigateToMiniProgram({
								appId: res.data.data.url,
								success(res) {
									// 打开成功
								},
							});
						} else {
							uni.showModal({
								title: "提示",
								content: res.data.msg,
								showCancel: false,
							});
						}
					});
			},
			courseGoodsList() {
				let self = this;
				// /course/goodsList 查询用户拥有的商品
				this.$api.courseGoodsList(this.param).then((res) => {
					if (res.data.code == 200) {
						self.goodsList.push.apply(self.goodsList, res.data.rows);
						self.total = res.data.total;
					}
				});
			},
			async studyIn(v, i, item, index) {
				this.activeItem = item;
				if (item.interfaceAccountId > 0) {
					//学习账号已开通

					if (item.learnStatus > 0) {
						//跳转第三方h5
						// this.showMark = true;
						uni.navigateTo({
						  url: `/pages3/polyv/detail?goodsId=${item.goodsId}&orderGoodsId=${item.orderGoodsId}&isOther=1`,
						});
						return;
						// uni.navigateTo({
						// 	url:'/pages5/webview/index?url='+item.officialLearningUrl
						// })
						// return;
					} else {
						// ，请联系020-87085982
						uni.showModal({
							showCancel: false,
							content: "您的学习账号未开通，请稍后再尝试，有疑问！",
						});
						return;
					}

					return;
				}

				if (
					item.serviceStartTime &&
					(this.sysTime <= item.serviceStartTime ||
						this.sysTime >= item.serviceEndTime)
				) {
					uni.showToast({
						icon: "none",
						title: "不在学习服务期，不能进入学习",
					});
					return;
				}

				if (
					(item.classStartTime && this.sysTime <= item.classStartTime) ||
					(item.classEndTime && this.sysTime >= item.classEndTime)
				) {
					uni.showToast({
						icon: "none",
						title: "不在班级有效期，不能进入学习",
					});
					return;
				}

				if (item.learningStatus == 2) {
					uni.showToast({
						icon: "none",
						title: "开放学习时间待定，不能进入学习",
					});
					return;
				}

				if (item.classStatus == 0) {
					uni.showToast({
						icon: "none",
						title: "尚未开班，不能进入学习",
					});
					return;
				}
				console.log(this.sysTime, item.learningTimeStart);
				console.log(this.sysTime < item.learningTimeStart);
				if (item.learningStatus == 3 && this.sysTime < item.learningTimeStart) {
					uni.showToast({
						icon: "none",
						title: "不在开放学习时间,不能进入学习",
					});
					return;
				}

				var confirmDetail = true;
				if (item.educationName == "继续教育") {
					if (
						item.officialName &&
						item.businessName == "二级" &&
						item.projectName == "建造师"
					) {
						confirmDetail = await this.userConfirmInfoDetail();
					}
				}

				if (!confirmDetail) {
					return;
				}

				// //内部系统
				// if (item.interfacePushId > 0 && item.officialStatus != 1) {
				// 	uni.showModal({
				// 		showCancel: false,
				// 		content: '机构正在为您报名中，请耐心等待，有疑问请联系020-87085982！'
				// 	});
				// 	return;
				// }

				this.itemIndex = index;

				if (
					item.gradeStatus == 1 &&
					item.status == 1 &&
					item.serviceEndTime > this.sysTime &&
					item.classEndTime &&
					item.classEndTime < this.sysTime &&
					(item.periodStatus == 0 || item.periodStatus == -1) &&
					item.studyCount > 0
				) {
					this.selectClass(item, index);
					return;
				}

				let rebuildStatus = await this.courseGoodsRebuildStatus(
					item.goodsId,
					item.gradeId
				);

				if (rebuildStatus == 0) {
					this.$navTo.togo("/pages2/learn/details", {
						gradeId: item.gradeId,
						goodsId: item.goodsId,
						orderGoodsId: item.orderGoodsId,
					});
					return;
				}

				// if (item.educationName == '继续教育') {
				this.$method.checkLock("jxjy").then((res) => {
					//可以学习
					if (item.courseNum == 1) {
						this.$api
							.courseCourseList({
								pageNum: 1,
								pageSize: 1,
								goodsId: item.goodsId,
								gradeId: item.gradeId,
								orderGoodsId: item.orderGoodsId,
							})
							.then((res) => {
								if (res.data.code == 200) {
									uni.navigateTo({
										url: `/pages3/polyv/detail?id=${res.data.rows[0].courseId}&goodsId=${item.goodsId}&orderGoodsId=${item.orderGoodsId}`,
									});
								}
							});
						return;
					}
					this.$navTo.togo(
						`/pages2/wd/course?id=${v}&gid=${i}&orderGoodsId=${item.orderGoodsId}`
					);
				});
			},
			/**
			 * @param {Object} goodsId 商品id
			 * 查询商品重修状态
			 */
			courseGoodsRebuildStatus(goodsId, gradeId) {
				return new Promise((resolve) => {
					this.$api
						.courseGoodsRebuildStatus({
							goodsId: goodsId,
							gradeId: gradeId,
						})
						.then((res) => {
							resolve(res.data.data);
						});
				});
			},
			appointment(item, appoint) {
				var data = {
					goodsId: item.goodsId,
					gradeId: item.gradeId,
					applyId: appoint.applyId,
					orderGoodsId: item.orderGoodsId,
				};
				this.$api.getApplysubscribe(data).then((res) => {
					if (res.data.code === 500) {
						uni.showModal({
							showCancel: false,
							content: res.data.msg,
						});
					}
					if (res.data.code === 200) {
						this.$navTo.togo("/pages2/appointment/index", {
							goodsId: item.goodsId,
							gradeId: item.gradeId,
							orderGoodsId: item.orderGoodsId,
							applyId: appoint.applyId,
						});
					}
				});
			},
			okPopup() {
				if (this.gradeValue == -1) {
					uni.showToast({
						icon: "none",
						title: "请选择班级",
					});
					return;
				}
				this.$api
					.changeGrade({
						goodsId: this.selectItem.goodsId,
						gradeId: this.gradeValue,
						oldGradeId: this.selectItem.gradeId,
						orderGoodsId: this.selectItem.orderGoodsId,
						userId: this.selectItem.userId,
					})
					.then((res) => {
						if (res.data.code == 200) {
							if (this.itemIndex !== "") {
								this.refreshByIndex();
							}
							this.selectClassModal = false;
							uni.showToast({
								title: "选班成功",
							});
						} else {
							uni.showToast({
								icon: "none",
								title: res.data.msg,
							});
						}
					});
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: "020-87085982", //仅为示例
				});
			},
		},
		components: {
			ClassTimeTip
		},
	};
</script>
<style>
	page {
		background: #eaeef1;
	}
</style>
<style scope lang="scss">
	.box_progress {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;

		.disabled {
			opacity: 0.6;
		}
	}

	.bottomBox {
		background: #ffffff;
		width: 94%;
		border-bottom-left-radius: 24rpx;
		border-bottom-right-radius: 24rpx;
		margin: 0 auto;
		padding: 20rpx;

		.restart {
			margin: 0 auto;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
			font-size: 30rpx;
			width: 440rpx;
			height: 80rpx;
			background: #ff0000;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
		}
	}

	.content_box {
		font-size: 24rpx;
		display: flex;
		align-items: center;
		color: #999999;
		margin-top: 8rpx;
	}

	.content {
		color: #000000;
		margin: 0 8rpx;
	}

	.wk_icon {
		width: 24rpx;
		height: 24rpx;
		margin-right: 8rpx;
	}

	.class {
		margin-bottom: 30rpx;

		.class_item {
			width: 100%;
			background: #ffffff;
			box-shadow: 0rpx 10rpx 9rpx 1rpx rgba(165, 196, 239, 0.1);
			border-radius: 24rpx;
			padding: 20rpx;
			z-index: 999;
			position: relative;

			.class_img {
				height: 367rpx;
				width: 100%;
				border-radius: 24rpx;
			}

			.class_text {
				padding: 0 20rpx;

				.class_title {
					color: #333333;
					font-weight: bold;
					font-size: 32rpx;
				}
			}

			.class-warm {
				padding: 10rpx 20rpx;
				display: flex;
				align-items: flex-start;

				&__icon {
					margin-right: 10rpx;
				}

				&__text {
					.date {
						font-size: 24rpx;
						font-weight: bold;
						color: #ff3b30;
					}

					.state {
						margin-top: 15rpx;
						font-size: 24rpx;
						font-weight: bold;
						color: #ff3b30;
					}
				}
			}
		}
	}

	.popup_box {
		height: 700rpx;
		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
		border-radius: 32rpx 32rpx 0rpx 0rpx;

		.line1 {
			width: 80rpx;
			height: 8rpx;
			background: #999999;
			border-radius: 4rpx;
			margin: 0 auto;
			margin-top: 15rpx;
		}

		.grade {
			height: 23rpx;
			font-size: 24rpx;
			color: #999999;
			margin: 0 auto;
			margin-top: 15rpx;
			text-align: center;
		}

		.confrim-btn {
			height: 98rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.okBtn {
				width: 200rpx;
				height: 64rpx;
				background: linear-gradient(0deg, #015eea, #00c0fa);
				border-radius: 32rpx;
				color: #ffffff;
				text-align: center;
				line-height: 64rpx;
			}
		}
	}

	.slot-content {
		padding: 0 20rpx;
	}

	.confirm-modal {
		.slot-content {
			padding: 0 20rpx;

			.content {
				color: red;

				.msg-list {
					.item {
						padding: 20rpx 0;

						&__left {
							color: #666;
							margin-right: 20rpx;
						}

						&__right {
							color: #333;
						}
					}
				}
			}
		}
	}
</style>