nbjk-xcx/src/otherPages/examRoadVideo/index.vue

<template>
  <view>
    <view class="header">
      <view class="rect">
        <van-search
          :value="value"
          shape="round"
          background=""
          placeholder="输入系列课标题"
        />
        <view
          style="display: flex; padding: 30rpx; justify-content: space-between"
        >
          <input
            readonly
            v-model="provice.province"
            @click="
              () => {
                proviceShow = true;
              }
            "
            placeholder="省份"
            class="header-provice"
            type="text"
          />
          <input
            readonly
            @click="
              () => {
                cityShow = true;
              }
            "
            v-model="city.city"
            placeholder="地市"
            class="header-city"
            type="text"
          />
        </view>
      </view>
      <van-popup round position="bottom" :show="proviceShow">
        <van-picker
          show-toolbar
          title="考场省份"
          :columns="examProviceList"
          value-key="province"
          @confirm="getExamCityAndProviceName"
          @cancel="
            () => {
              proviceShow = 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">
        <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,
      proviceShow: false,
      examProviceList: [],
      examCityList: [],
      examRoomList: [],
      provice: { provinceId: "", province: "" },
      city: { cityId: "", city: "" },
    };
  },
  methods: {
    goCourseCatalog(item) {
      uni.navigateTo({
        url: "/otherPages/courseCatalog/index?examId=" + item.id+'&price='+item.price,
      });
    },
    getCityName(e) {
      this.city = e.detail.value;
      this.cityShow = false;
      api.exam
        .studentExamInfoList({
          ...this.city,
        })
        .then((res) => {
          this.examRoomList = res.rows;
        });
    },
    getExamCityAndProviceName(e) {
      this.proviceShow = false;
      this.provice = e.detail.value;
      api.exam
        .studentExamInfoCityProviceId(e.detail.value.provinceId)
        .then((res) => {
          this.examCityList = res.data;
        });
      console.log(e);
    },
  },
  onLoad(query) {
    this.query = query;
    api.exam.studentExamInfoIp()
    api.exam.studentExamInfoGetProvice().then((res) => {
      this.examProviceList = res.data;
    });
    api.exam
      .studentExamInfoList({
        ...this.city,
      })
      .then((res) => {
        this.examRoomList = res.rows;
      });
  },
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: auto;

  border-radius: 0px 0px 45px 45px;
  .rect {
    width: 100%;
    height: 406rpx;
    background-image: url("https://ct.zzxcx.net/ctjk/mp-wx/buyVideo/headerBg.png");
    background-size: 100%;
  }
  .arc {
    width: 100%;
    height: 100rpx;
  }
  .header-provice {
    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>