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">
          <view class="p-40">
            <view class="text-32 text-fore-title font-bold">请确认信息</view>
            <view class="mt-10 text-26 text-fore-light">让我们开始体验升学备考之旅吧！</view>
          </view>
          <view class="mx-30 pb-50">
            <view class="flex items-center px-42 bg-back rounded-40 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="dictLabel" key-value="dictValue">
              </ie-picker>
            </view>
            <view class="mt-30 flex items-center px-42 bg-back rounded-40 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>
      </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>