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

<template>
  <ie-popup title="" mode="bottom" ref="popupRef" :showToolbar="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>
  </ie-popup>
</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',
  justifyContent: 'flex-end'
}
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>