|
|
@@ -0,0 +1,353 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view class="BanContain">
|
|
|
+ <view
|
|
|
+ class="status_bar"
|
|
|
+ :style="{ height: statusBarHeight + 'px' }"
|
|
|
+ ></view>
|
|
|
+ <view class="navBar" :style="{ height: titleBarHeight + 'px' }">
|
|
|
+ <image class="back-img" src="" mode="" @click="backPre"></image>
|
|
|
+ <text class="bans-title"> 我的考场 </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="header">
|
|
|
+ <view class="rect">
|
|
|
+ <!-- <van-search
|
|
|
+ shape="round"
|
|
|
+ background=""
|
|
|
+ placeholder="输入考场名称"
|
|
|
+ @search="searchRoadExamRoom"
|
|
|
+ /> -->
|
|
|
+ <!-- <view
|
|
|
+ style="display: flex; padding: 30rpx; justify-content: space-between"
|
|
|
+ >
|
|
|
+ <input
|
|
|
+ readonly
|
|
|
+ disabled
|
|
|
+ v-model="province.province"
|
|
|
+ @click="
|
|
|
+ () => {
|
|
|
+ provinceShow = true;
|
|
|
+ }
|
|
|
+ "
|
|
|
+ placeholder="省份"
|
|
|
+ class="header-province"
|
|
|
+ type="text"
|
|
|
+ />
|
|
|
+ <input
|
|
|
+ disabled
|
|
|
+ readonly
|
|
|
+ @click="isShowCity()"
|
|
|
+ v-model="city.city"
|
|
|
+ placeholder="地市"
|
|
|
+ class="header-city"
|
|
|
+ type="text"
|
|
|
+ />
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+ <van-popup round position="bottom" :show="provinceShow">
|
|
|
+ <van-picker
|
|
|
+ show-toolbar
|
|
|
+ title="考场省份"
|
|
|
+ :columns="examProviceList"
|
|
|
+ value-key="province"
|
|
|
+ @confirm="getExamCityAndProviceName"
|
|
|
+ @cancel="
|
|
|
+ () => {
|
|
|
+ provinceShow = false;
|
|
|
+ }
|
|
|
+ "
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ <van-popup round position="bottom" :show="cityShow">
|
|
|
+ <van-picker
|
|
|
+ show-toolbar
|
|
|
+ title="考场地市"
|
|
|
+ :columns="examCityList"
|
|
|
+ value-key="city"
|
|
|
+ @confirm="getCityName"
|
|
|
+ @cancel="
|
|
|
+ () => {
|
|
|
+ cityShow = false;
|
|
|
+ }
|
|
|
+ "
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ <view class="list">
|
|
|
+ <van-empty
|
|
|
+ v-if="examRoomList.length == 0"
|
|
|
+ class="custom-image"
|
|
|
+ image="https://img.yzcdn.cn/vant/custom-empty-image.png"
|
|
|
+ description="无视频"
|
|
|
+ />
|
|
|
+ <view
|
|
|
+ class="list-item"
|
|
|
+ v-for="(item, index) in examRoomList"
|
|
|
+ @click="goCourseCatalog(item)"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <image mode="widthFx" :src="item.image" class="list-item-image">
|
|
|
+ </image>
|
|
|
+ <view
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ align-items: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ width: 355rpx;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <view class="list-item-text1">{{ item.name }}</view>
|
|
|
+ <view class="list-item-text2">共3节</view>
|
|
|
+ </view>
|
|
|
+ <view class="list-item-border"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import api from "@/api";
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ query: {},
|
|
|
+ cityShow: false,
|
|
|
+ provinceShow: false,
|
|
|
+ examProviceList: [],
|
|
|
+ examCityList: [],
|
|
|
+ examRoomList: [],
|
|
|
+ province: uni.getStorageSync("roadExamProvince") || {
|
|
|
+ provinceId: "",
|
|
|
+ province: "",
|
|
|
+ },
|
|
|
+ statusBarHeight: 0,
|
|
|
+ titleBarHeight: 0,
|
|
|
+ city: uni.getStorageSync("roadExamCity") || {
|
|
|
+ cityId: "",
|
|
|
+ city: "",
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ backPre() {
|
|
|
+ uni.navigateBack();
|
|
|
+ },
|
|
|
+ searchRoadExamRoom(e) {
|
|
|
+ console.log(e.detail);
|
|
|
+ api.exam
|
|
|
+ .studentExamInfoMylist({
|
|
|
+ name: e.detail,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.examRoomList = res.rows;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getCurrentCity(e) {
|
|
|
+ console.log(e);
|
|
|
+ // uni.choosePoi({
|
|
|
+ // success(res){
|
|
|
+ // console.log(res)
|
|
|
+ // }
|
|
|
+
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ isShowCity() {
|
|
|
+ if (this.province.provinceId && this.province.province) {
|
|
|
+ this.cityShow = true;
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: "请先选择省份",
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ goCourseCatalog(item) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url:
|
|
|
+ "/otherPages/courseCatalog/index?examId=" +
|
|
|
+ item.id +
|
|
|
+ "&price=" +
|
|
|
+ item.price,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getCityName(e) {
|
|
|
+ this.city = e.detail.value;
|
|
|
+ uni.setStorageSync("roadExamCity", e.detail.value);
|
|
|
+ this.cityShow = false;
|
|
|
+ api.exam
|
|
|
+ .studentExamInfoMylist({
|
|
|
+ ...this.city,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.examRoomList = res.rows;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getExamCityAndProviceName(e) {
|
|
|
+ this.provinceShow = false;
|
|
|
+ this.province = e.detail.value;
|
|
|
+ uni.setStorageSync("roadExamProvince", e.detail.value);
|
|
|
+ api.exam
|
|
|
+ .studentExamInfoCityProviceId(e.detail.value.provinceId)
|
|
|
+ .then((res) => {
|
|
|
+ this.examCityList = res.data;
|
|
|
+ });
|
|
|
+ console.log(e);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onLoad(query) {
|
|
|
+ let systemInfo = uni.getSystemInfoSync();
|
|
|
+ this.statusBarHeight = systemInfo.statusBarHeight;
|
|
|
+ let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
|
|
+ this.titleBarHeight =
|
|
|
+ (menuButtonInfo.top - this.statusBarHeight) * 2 + menuButtonInfo.height;
|
|
|
+ this.query = query;
|
|
|
+ // api.user.studentVipExamList().then((res) => {
|
|
|
+ // uni.setStorageSync("examRoom", res.rows);
|
|
|
+ // });
|
|
|
+ // api.exam.studentExamInfoIp().then((res) => {
|
|
|
+ // this.city.city = res.data.cityName;
|
|
|
+ // this.city.cityId = Number(res.data.city);
|
|
|
+ // this.province.province = res.data.provinceName;
|
|
|
+ // this.province.provinceId = Number(res.data.province);
|
|
|
+ // api.exam
|
|
|
+ // .studentExamInfoMylist({
|
|
|
+ // ...this.city,
|
|
|
+ // })
|
|
|
+ // .then((result) => {
|
|
|
+ // this.examRoomList = result.rows;
|
|
|
+ // if (result.rows.length == 0) {
|
|
|
+ // this.city.city = "";
|
|
|
+ // this.city.cityId = "";
|
|
|
+ // this.province.province = "";
|
|
|
+ // this.province.provinceId = "";
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // api.exam.studentExamInfoGetProvice().then((res) => {
|
|
|
+ // this.examProviceList = res.data;
|
|
|
+ // });
|
|
|
+ // if (this.city.cityId && this.province.provinceId) {
|
|
|
+ // api.exam
|
|
|
+ // .studentExamInfoCityProviceId(this.province.provinceId)
|
|
|
+ // .then((res) => {
|
|
|
+ // this.examCityList = res.data;
|
|
|
+ // });
|
|
|
+ api.exam.studentExamInfoMylist({}).then((res) => {
|
|
|
+ this.examRoomList = res.rows;
|
|
|
+ });
|
|
|
+ // }
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.bans-title {
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 222rpx;
|
|
|
+ color: transparent;
|
|
|
+}
|
|
|
+.BanContain {
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ top: 0;
|
|
|
+ z-index: 1000;
|
|
|
+}
|
|
|
+.back-img {
|
|
|
+ width: 34px;
|
|
|
+ height: 34px;
|
|
|
+ margin-left: 18rpx;
|
|
|
+}
|
|
|
+.navBar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ /* padding-bottom: 10rpx; */
|
|
|
+ background-color: transparent;
|
|
|
+}
|
|
|
+.status_bar {
|
|
|
+ height: var(--status-bar-height);
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+.header {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+
|
|
|
+ border-radius: 0px 0px 45px 45px;
|
|
|
+ .rect {
|
|
|
+ width: 100%;
|
|
|
+ height: 624rpx;
|
|
|
+ background-image: url("https://ct.zzxcx.net/ctjk/mp-wx/myExamRoadVideo/header_bg.png");
|
|
|
+ background-size: 100%;
|
|
|
+ }
|
|
|
+ .arc {
|
|
|
+ width: 100%;
|
|
|
+ height: 100rpx;
|
|
|
+ }
|
|
|
+ .header-province {
|
|
|
+ width: 336rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .header-city {
|
|
|
+ width: 336rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+}
|
|
|
+.content {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0rpx 30rpx;
|
|
|
+ transform: translateY(-80px);
|
|
|
+
|
|
|
+ .list {
|
|
|
+ width: 100%;
|
|
|
+ background: #edf4ff;
|
|
|
+ height: 1200rpx;
|
|
|
+ box-shadow: 0px 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.1);
|
|
|
+
|
|
|
+ border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
+ .list-item {
|
|
|
+ width: 100%;
|
|
|
+ padding: 30rpx;
|
|
|
+ padding-top: 30rpx;
|
|
|
+ padding-bottom: 0rpx;
|
|
|
+ display: flex;
|
|
|
+ height: 220rpx;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+ .list-item-image {
|
|
|
+ width: 248rpx;
|
|
|
+ height: 138rpx;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ }
|
|
|
+ .list-item-border {
|
|
|
+ width: 100%;
|
|
|
+ background: #e0e0e0;
|
|
|
+ height: 2rpx;
|
|
|
+ }
|
|
|
+ .list-item-text1 {
|
|
|
+ width: 305rpx;
|
|
|
+ color: #0a1a33;
|
|
|
+ font-size: 30rpx;
|
|
|
+ padding-top: 10rpx;
|
|
|
+ }
|
|
|
+ .list-item-text2 {
|
|
|
+ width: 305rpx;
|
|
|
+ color: #8a9099;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
