ieplus-app/src/pagesMain/pages/index/components/index-popup.vue

<template>
  <!-- #ifdef H5 -->
  <teleport to="body">
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <root-portal externalClass="theme-ie">
      <!-- #endif -->
      <uv-popup ref="popupRef" mode="bottom" :round="16" :closeOnClickOverlay="false">
        <view class="popup-content relative">
          <ie-image :is-oss="true" src="/study-bg15.png" custom-class="absolute top-0 left-0 w-full h-392 z-0"
            mode="aspectFill" />
          <view class="relative z-1">
            <view class="px-88 pt-60 pb-60">
              <view class="text-40 text-fore-title font-bold">请确认信息</view>
              <view class="mt-16 text-32 text-fore-light">让我们开始体验升学备考之旅吧！</view>
            </view>
            <view class="mx-46 pb-50">
              <view class="flex items-center px-42 bg-back rounded-15 h-104 box-border">
                <view class="flex-shrink-0">所在省份</view>
                <ie-picker ref="pickerRef" v-model="form.location" :list="provinceList" :customStyle="customStyle"
                  placeholder="请选择" key-label="areaName" key-value="shortName">
                </ie-picker>
              </view>
              <view class="mt-30 flex items-center px-42 bg-back rounded-15 h-104 box-border">
                <view class="flex-shrink-0">考生类别</view>
                <ie-picker ref="pickerRef" v-model="form.examType" :list="examTypeList" :disabled="!form.location"
                  :customStyle="customStyle" placeholder="请选择" key-label="dictLabel" key-value="dictValue">
                </ie-picker>
              </view>
              <view class="mt-140">
                <ie-button type="primary" @click="handleConfirm">立即体验</ie-button>
              </view>
            </view>
          </view>
        </view>
      </uv-popup>
      <!-- #ifdef MP-WEIXIN -->
    </root-portal>
    <!-- #endif -->
    <!-- #ifdef H5 -->
  </teleport>
  <!-- #endif -->
</template>
<script lang="ts" setup>
import { useExamType } from '@/composables/useExamType';
import { useUserStore } from '@/store/userStore';
const userStore = useUserStore();
const popupRef = ref();
const { form, provinceList, examTypeList } = useExamType();

const customStyle = {
  textAlign: 'right'
}
const handleConfirm = () => {
  const { location, examType } = form.value
  if (!location) {
    uni.$ie.showToast('请选择省份');
    return;
  }
  if (!examType) {
    uni.$ie.showToast('请选择考生类别');
    return;
  }
  userStore.tempInfo = {
    location,
    examType
  }
  popupRef.value.close();
}
const open = () => {
  if (userStore.tempInfo) {
    console.log()
    form.value.location = userStore.tempInfo.location;
    setTimeout(() => {
      form.value.examType = userStore.tempInfo!.examType;
    }, 0);
  }
  popupRef.value.open();
}
const close = () => {
  popupRef.value.close();
}
defineExpose({ open, close })
</script>
<style lang="scss" scoped></style>