uniapp页面中使用uview ui 弹窗组件<u-toast ref=“uToast“ />

在uniapp中,可以借助uview组件库创建弹窗。首先,在页面中引入<u-toast>组件,设置ref属性为uToast。然后在JavaScript部分,通过$refs.uToast.show方法调用弹窗,传入类型如success和消息内容,例如录入成功。

uniapp页面中使用uview弹窗

拿来直接使用 直接放到当前要用的页面
下面展示一些 内联代码片

// A code block
<u-toast ref="uToast"></u-toast>
// An highlighted block
<u-toast ref="uToast"></u-toast>

在点击js调用的地方直接调用
下面展示一些 内联代码片

// A code block
_that.$refs.uToast.show({
							type: "success",
							message: "录入成功!"
						});
// An highlighted block
_that.$refs.uToast.show({
							type: "success",
							message: "录入成功!"
						});
onReachBottom触底函数用这个但是无法保证搜索框和u-tabs标签页是吸顶的,该怎么解决?<template> <view class="deliveryOrder"> <u-toast ref="uToast"></u-toast> <view class="searchBtn"> <u-search placeholder="订单号" :showAction="true" v-model="orderValue" shape="round" actionText="查询" :animation="true" @search="searchClick()" @custom="searchClick()"></u-search> <text class="screening" @click="handleScreening">筛选</text> </view> <view class="tabsBox"> <u-sticky bgColor="#fff"> <u-tabs :list="list" :is-scroll="false" :current="current" bar-width="50" active-color="orange" @change="change"> </u-tabs> <view v-if="current===0"> <scroll-view @scrolltolower="lowerBottom" @refresherrefresh="getFresh" :refresher-enabled="true" :refresher-triggered="triggered" scroll-y="true" class="scrollHeight"> <view class="scrolllist" v-if="allList&&allList.length>0"> <view class="orderscrollItem" v-for="(item,index) in allList" :key="index" @click="toDetail(item)"> <view class="itemTitle"> {{item}} </view> </view> <view class="more_text" v-if="showMoreData"> 没有更多数据了... </view> </view> <view v-else class="empty_box"> <u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/car.png" > </u-empty> </view> </scroll-view> </view> <view v-if="current===1"> 待配送 </view> <view v-if="current===2"> 配送中 </view> <view v-if="current===3"> 待签收 </view> <view v-if="current===4"> 已完成 </view> </u-sticky> </view> <u-popup :show="showPopup" :round="10" mode="top" @close="showPopup=false"> <view class="popup"> <text class="popupTitle">筛选条件</text> <view class="formBox"> <u--form :model="form" ref="uForm" labelWidth="90px"> <u-form-item label="时间范围" prop="timeValue" borderBottom @click="showCalendar=true"> <u-input v-model="form.timeValue" :disabled="true" r
03-28
<template> <view @click="handleClick"> <view class="cpdModel"> <view :class="{ popModelCon: true}"> <u-form ref="uForm" :model="form" error-type="toast" label-width="auto" label-position="left" > <u-form-item borderBottom label="請選擇2024-2025年CPD合規代碼" prop="trainingOrganization" required > <view class="input-box flex-row-sb"> <u-input v-model="form.courseName" placeholder="请选择" border="none" readonly input-align="right" @click="showCoursePicker = true" /> <u-icon name="arrow-right" color="#999" size="14"></u-icon> </view> </u-form-item> <u-form-item borderBottom label="课程名称" prop="courseName" required > <view class="input-box flex-row-sb"> <u-input v-model="form.courseName" placeholder="填写课程名称" maxlength="32" border="none" input-align="right" ></u-input> <u-icon class="m-l-4" name="edit-pen" color="#999" size="16" ></u-icon> </view> </u-form-item> <u-form-item borderBottom label="CPD分数" prop="score" required> <view class="input-box flex-row-sb"> <u-input v-model="form.score" placeholder="填写CPD分数" maxlength="320" border="none" input-align="right" ></u-input> <u-icon class="m-l-4" name="edit-pen" color="#999" size="16" ></u-icon> </view> </u-form-item> <view class="formItemTitle"> <text class="cff3">*</text>持續專業培訓聲明書<text class="f22 m-l-2" >(CPD Declaration Form)</text ></view > <view class="m-t-10 fileWrap"> <CustomerFileUpload v-if="form.certificateUrlFiles.length == 0" class="fileUpLoadBtn" type="all" :maxCount="1" :extension="['jpg', 'jpeg', 'png', 'gif', 'pdf', 'PDF']" :maxSize="200 * 1024 * 1024" @success=" (val) => handleUploadSuccess('certificateUrlFiles', val) " @exceedLimitError=" (val) => handleExceedLimitError('certificateUrlFiles', val) " /> <CustomerPreview v-for="(item, index) in form.certificateUrlFiles" class="fileItem" :key="index + item.fileUrl" :data="item" :showDelete="true" @deleteFile=" () => handleDeleteFile('certificateUrlFiles', index) " /> </view> <view v-if="!form.disabled" class="flex m-t-30"> <u-button v-if="form.ids" class="m-r-20" style="flex: 1" color="#05C4C8" plain text="删除" @click="handleDeleteRecord" ></u-button> <u-button style="flex: 3" color="#05C4C8" text="确认" @click="handleConfirmRecord" ></u-button> </view> </u-form> </view> </view> <u-datetime-picker :show="timePopObj.show" confirmColor="#05C4C8" mode="date" :value="timePopObj.defaultDate" :minDate="timePopObj.minDate" :maxDate="timePopObj.maxDate" closeOnClickOverlay @close="timePopObj.show = false" @cancel="timePopObj.show = false" @confirm="handleTimeConfirmTime" ></u-datetime-picker> <u-picker :show="showCoursePicker" :columns="courseOptions" keyName="label" @confirm="handleCourseConfirm" @cancel="showCoursePicker = false" /> </view> </template> <script> import dayjs from "@/uni_modules/uview-ui/libs/util/dayjs.js"; import CustomerFileUpload from "@/components/customerFileUpload"; import CustomerPreview from "@/components/customerPreview"; export default { name: "cpdConfirmDecision", props: { }, components: { CustomerFileUpload, CustomerPreview, }, data() { return { form:{ certificateUrlFiles:[], courseName:'', }, showCoursePicker: false, // 控制选择器显示 // 课程选项数据(示例) courseOptions: [ [ { label: '数学', value: 1 }, { label: '语文', value: 2 }, { label: '英语', value: 3 }, { label: '物理', value: 4 } ] ], timePopObj: { show: false, formKey: "", minDate: dayjs().subtract(100, "year").valueOf(), maxDate: dayjs().valueOf(), defaultDate: dayjs().valueOf(), }, }; }, methods: { dayjs, handleClick() { // let { item } = this; // this.$emit("selectItem", item); }, // 确认选择课程 handleCourseConfirm(e) { // e.value[0] 获取第一列选中项(单列选择) this.form.courseName = e.value[0].label; this.showCoursePicker = false; } }, }; </script> <style lang="scss" scoped> </style> 为什么选择框点击不出来
08-05
<template> <view class="cpdPage"> <view class="statisticsNew" v-if="hasMPFA"> <view class="flex-row-center statisticsTop"> <view :class="{ statisticsTopItem: true, statisticsTopItemActive: cpdType == item.id, }" v-for="item in cpdTypeList" :key="item.id" @click="handleChangeCpdType(item.id)" > <view>{{ item.name }}</view> </view> </view> </view> <view class="statistics"> <view class="cpdPageTop flex-row-sb"> <view class="cpdTypeWrap"> <view @click="tabIndex = 1" :class="{ cpdTypeItem: true, active: tabIndex == 1 }" > <text>年度考核</text> <view class="activeLine" v-if="tabIndex == 1" /> </view> <view @click="tabIndex = 0" :class="{ cpdTypeItem: true, active: tabIndex == 0 }" > <text>年中考核</text> <view class="activeLine" v-if="tabIndex == 0" /> </view> </view> <view class="flex selectYear" @click="showPop('selectYear', 'yearList', 'id')" > {{ formatDictName(yearList, selectYear, "id") }} <u-icon class="icon" name="arrow-down" color="#999" size="14" ></u-icon> </view> </view> <view v-if="tabIndex == 0"> <view v-if="cpdType == 1" class="flex-row-sb"> <view style="flex: 1" class="sec"> <view v-if="diffHalfRealTotal > 0" class="lack" >离目标缺<text class="lackScore">{{ diffHalfRealTotal }}</text >分</view > <view class="tc"> <text class="score">{{ halfRealTotal }}</text> <text class="f20 p-l-4">分</text> </view> <view class="tc f-w-b m-t-4">Total</view> </view> <view style="width: 10rpx" /> <view style="flex: 1" class="sec"> <view v-if="diffIaOtherHalf > 0" class="lack" >离目标缺<text class="lackScore">{{ diffIaOtherHalf }}</text >分</view > <view class="tc"> <text class="score">{{ detail.iaOtherHalfReal || 0 }}</text> <text class="f20 p-l-4">分</text> </view> <view class="tc f-w-b m-t-4">Ethics CPD</view> </view> </view> <view v-if="cpdType == 2" class="flex-row-sb"> <view style="flex: 1" class="sec"> <view v-if="mpfaDiffHalfRealTotal > 0" class="lack" >离目标缺<text class="lackScore">{{ mpfaDiffHalfRealTotal }}</text >分</view > <view class="tc"> <text class="score">{{ mpfaHalfRealTotal }}</text> <text class="f20 p-l-4">分</text> </view> <view class="tc f-w-b m-t-4">Total</view> </view> <view style="width: 10rpx" /> <view style="flex: 1" class="sec"> <view v-if="mpfaDiffBaseHalf > 0" class="lack" >离目标缺<text class="lackScore">{{ mpfaDiffBaseHalf }}</text >分</view > <view class="tc"> <text class="score">{{ detail.mpfaBaseHalfReal || 0 }}</text> <text class="f20 p-l-4">分</text> </view> <view class="tc f-w-b m-t-4">Core CPD</view> </view> </view> <view class="certificate"> <view class="flex-row-center certificateTitle"> <text v-if="cpdType == 1" class="cff3 f24" >*截止日期:{{ selectYear }}-02-28</text > <text v-if="cpdType == 2" class="cff3 f24" >*截止日期:{{ selectYear }}-06-30</text > </view> </view> </view> <view v-if="tabIndex == 1"> <view v-if="cpdType == 1" class="flex-row-sb"> <view style="flex: 1" class="sec"> <view v-if="diffRealTotal > 0" class="lack" >离目标缺<text class="lackScore">{{ diffRealTotal }}</text >分</view > <view class="tc"> <text class="score">{{ realTotal || 0 }}</text> <text class="f20 p-l-4">分</text> </view> <view class="tc f-w-b m-t-4">Total</view> </view> <view style="width: 10rpx" /> <view style="flex: 1" class="sec"> <view v-if="diffIaOtherYear > 0" class="lack" >离目标缺<text class="lackScore">{{ diffIaOtherYear || 0 }}</text >分</view > <view class="tc"> <text class="score">{{ detail.iaOtherYearReal || 0 }}</text> <text class="f20 p-l-4">分</text> </view> <view class="tc f-w-b m-t-4">Ethics CPD</view> </view> </view> <view v-if="cpdType == 2" class="flex-row-sb"> <view style="flex: 1" class="sec"> <view v-if="mpfaDiffRealTotal > 0" class="lack" >离目标缺<text class="lackScore">{{ mpfaDiffRealTotal }}</text >分</view > <view class="tc"> <text class="score">{{ mpfaRealTotal || 0 }}</text> <text class="f20 p-l-4">分</text> </view> <view class="tc f-w-b m-t-4">Total</view> </view> <view style="width: 10rpx" /> <view style="flex: 1" class="sec"> <view v-if="mpfaDiffBaseYearRealYear > 0" class="lack" >离目标缺<text class="lackScore">{{ mpfaDiffBaseYearRealYear || 0 }}</text >分</view > <view class="tc"> <text class="score">{{ detail.mpfaBaseYearReal || 0 }}</text> <text class="f20 p-l-4">分</text> </view> <view class="tc f-w-b m-t-4">Core CPD</view> </view> </view> <view class="certificate"> <view class="flex-row-center certificateTitle"> <text v-if="cpdType == 1" class="cff3 f24" >*截止日期:{{ selectYear }}-06-30</text > <text v-if="cpdType == 2" class="cff3 f24" >*截止日期:{{ selectYear }}-11-30</text > </view> </view> </view> <u-image class="status" width="100rpx" height="100rpx" v-if="detail.status == 6" src="https://xsl-lexiang.oss-cn-shenzhen.aliyuncs.com/human_management/2025-05-28/35a6e811-867f-4a73-ba16-8166e680a01a.svg" /> <u-image class="status" width="100rpx" height="100rpx" v-if="detail.status == 5" src="https://xsl-lexiang.oss-cn-shenzhen.aliyuncs.com/human_management/2025-05-28/2c834508-3c70-4e3c-9291-05248b356381.svg" /> <u-image class="status" width="150rpx" height="150rpx" v-if="detail.status == 4" src="https://xsl-lexiang.oss-cn-shenzhen.aliyuncs.com/human_management/2025-05-28/e88f236d-8c4e-459d-be84-80ca0e5462b0.svg" /> <u-image class="status" width="100rpx" height="100rpx" v-if="detail.status == 3" src="https://xsl-lexiang.oss-cn-shenzhen.aliyuncs.com/human_management/2025-05-28/3c70ca3f-02c3-4e17-af9e-d88e0134e0a3.svg" /> <u-image class="status" width="100rpx" height="100rpx" v-if="detail.status == 2" src="https://xsl-lexiang.oss-cn-shenzhen.aliyuncs.com/human_management/2025-05-28/71dd651e-2d94-4dbf-bd88-50a2399e311c.svg" /> </view> <view class="f-w-b f30 recordTitle">申报记录</view> <scroll-view class="recordList" scroll-y="true"> <CpdRecordItem v-for="(item, index) in list" :key="index" :item="item" @selectItem="handleEditRecordList" /> <load-more v-if="list.length == 0" loading_status="none"></load-more> </scroll-view> <view v-if=" cpdType == 1 && tabIndex == 0 && detail.iaOtherYearReal > 0 && diffHalfRealTotal <= 0 && diffIaOtherHalf <= 0 && detail.status != 4 && detail.status != 5 " class="cff3 m-t-10 m-b-30 tc" >**自主申报分数已满足年中考核要求。</view > <view v-if=" cpdType == 1 && tabIndex == 1 && detail.iaBaseYearTarget > 0 && diffRealTotal <= 0 && diffIaOtherYear <= 0 && detail.status != 4 && detail.status != 5 " class="cff3 m-t-10 m-b-30 tc" >**自主申报分数已满足年度考核要求。</view > <view v-if=" cpdType == 2 && tabIndex == 0 && detail.mpfaOtherYearReal > 0 && mpfaDiffHalfRealTotal <= 0 && mpfaDiffBaseHalf <= 0 && detail.status != 4 && detail.status != 5 " class="cff3 m-t-10 m-b-30 tc" >**自主申报分数已满足年中考核要求。</view > <view v-if=" cpdType == 2 && tabIndex == 1 && detail.mpfaCoreYearTarget > 0 && mpfaDiffRealTotal <= 0 && mpfaDiffBaseYearRealYear <= 0 && detail.status != 4 && detail.status != 5 " class="cff3 m-t-10 m-b-30 tc" >**自主申报分数已满足年度考核要求。</view > <view v-if="detail.status == 3 && detail.approveRemark" class="errorMsg" style="visibility: hidden" >审批建议:{{ detail.approveRemark }}</view > <view v-if="detail.status <= 3" class="addBtnWrap"> <view v-if="detail.status == 3 && detail.approveRemark" class="errorMsg" >审批建议:{{ detail.approveRemark }}</view > <u-button class="addBtn" color="#05C4C8" icon="plus" iconColor="#fff" @click="handleAddCpd" >新增CPD学分</u-button > </view> <view v-if="detail.status == 4 && cpdType == 1" class="applyTip"> **请前往保险中介一站通申报 <u-button class="btnStyle" @click="handleGoToJj" text="确认申报" ></u-button> </view> <view v-if="detail.status == 4 && cpdType == 2" class="applyTip" > <view class="fontStyle"> **请及时前往积金局提交申报</view> </view> <view v-if="detail.status == 6" class="addBtnWrap addBtnWrapTWo"> <u-button class="addBtn" icon="plus" iconColor="#fff" @click="handleAddCpd" >新增CPD学分</u-button > <view style="width: 20px" /> <u-button class="addBtn" color="#05C4C8" iconColor="#fff" @click="handleCpdSuppleMater" >补处分材料上传</u-button > </view> <view class="popup-wrap"> <u-picker :show="popObj.show" :columns="[popObj.selectColumns]" :defaultIndex="[0]" confirmColor="#00AAAE" keyName="name" closeOnClickOverlay @confirm="onPickerConfirm" @close="popObj.show = false" @cancel="popObj.show = false" ></u-picker> </view> <u-popup :show="showModel" mode="bottom" closeable @close="showModel = false" > <view class="cpdModel"> <view class="popModelTitle f30" >{{ form.disabled ? "查看" : form.ids ? "编辑" : "新增" }}CPD学分</view > <view :class="{ popModelCon: true, 'form-disable': form.disabled }"> <u-form ref="uForm" :model="form" error-type="toast" label-width="auto" label-position="left" > <view class="formItemTitle"> <text class="cff3">*</text>请上传CPD文件<text class="f22 m-l-2" >(图片或者PDF)</text ></view > <view class="m-t-10 fileWrap"> <CustomerFileUpload v-if="form.certificateUrlFiles.length == 0" class="fileUpLoadBtn" type="all" :maxCount="1" :extension="['jpg', 'jpeg', 'png', 'gif', 'pdf', 'PDF']" :maxSize="200 * 1024 * 1024" @success=" (val) => handleUploadSuccess('certificateUrlFiles', val) " @exceedLimitError=" (val) => handleExceedLimitError('certificateUrlFiles', val) " /> <CustomerPreview v-for="(item, index) in form.certificateUrlFiles" class="fileItem" :key="index + item.fileUrl" :data="item" :showDelete="true" @deleteFile=" () => handleDeleteFile('certificateUrlFiles', index) " /> </view> <u-form-item label="上传的分数类型" prop="cpdType" required> </u-form-item> <view class="input-box flex-row-sb"> <view>IA CPD</view> <view class="customerRadioGroup"> <CustomerRadioGroup v-model="form.iaType" :options="IASCROELIST" /> </view> </view> <view v-if="hasMPFA" class="input-box flex-row-sb"> <view>MPFA CPD</view> <view class="customerRadioGroup"> <CustomerRadioGroup v-model="form.mpfaType" :options="MPFASCROELIST" /> </view> </view> <view class="gapLine"></view> <u-form-item borderBottom label="培训机构" prop="trainingOrganization" required > <view class="input-box flex-row-sb"> <u-input v-model="form.trainingOrganization" placeholder="填写培训机构" maxlength="32" border="none" input-align="right" ></u-input> <u-icon class="m-l-4" name="edit-pen" color="#999" size="16" ></u-icon> </view> </u-form-item> <u-form-item borderBottom label="课程名称" prop="courseName" required > <view class="input-box flex-row-sb"> <u-input v-model="form.courseName" placeholder="填写课程名称" maxlength="32" border="none" input-align="right" ></u-input> <u-icon class="m-l-4" name="edit-pen" color="#999" size="16" ></u-icon> </view> </u-form-item> <u-form-item borderBottom label="CPD分数" prop="score" required> <view class="input-box flex-row-sb"> <u-input v-model="form.score" placeholder="填写CPD分数" maxlength="320" border="none" input-align="right" ></u-input> <u-icon class="m-l-4" name="edit-pen" color="#999" size="16" ></u-icon> </view> </u-form-item> <u-form-item @click="showTimePop('completeTime')" label="课程完成时间" prop="score" required > <view class="input-box flex-row-sb"> <view></view> <view class="flex"> <view>{{ form.completeTime }}</view> <u-icon name="arrow-right" color="#999" size="14"></u-icon> </view> </view> </u-form-item> <view v-if="!form.disabled" class="flex m-t-30"> <u-button v-if="form.ids" class="m-r-20" style="flex: 1" color="#05C4C8" plain text="删除" @click="handleDeleteRecord" ></u-button> <u-button style="flex: 3" color="#05C4C8" text="确认" @click="handleConfirmRecord" ></u-button> </view> </u-form> </view> </view> <u-datetime-picker :show="timePopObj.show" confirmColor="#05C4C8" mode="date" :value="timePopObj.defaultDate" :minDate="timePopObj.minDate" :maxDate="timePopObj.maxDate" closeOnClickOverlay @close="timePopObj.show = false" @cancel="timePopObj.show = false" @confirm="handleTimeConfirmTime" ></u-datetime-picker> </u-popup> </view> </template> <script> import dayjs from "@/uni_modules/uview-ui/libs/util/dayjs.js"; import { formatDictName, Validator, trimObject } from "@/config/utils"; import loadMore from "@/components/loadMore/loadMore.vue"; import CustomerFileUpload from "@/components/customerFileUpload"; import CustomerPreview from "@/components/customerPreview"; import CustomerRadioGroup from "@/components/customerRadioGroup"; import CpdRecordItem from "./components/cpdRecordItem/index.vue"; export default { name: "cpd", components: { loadMore, CpdRecordItem, CustomerFileUpload, CustomerPreview, CustomerRadioGroup, }, data() { return { cpdConfirmdec: false, cpdType: "1", // 是否有MPFA hasMPFA: false, IASCROELIST: [ { name: "IA CPD(Non-Ethics)", id: "1" }, { name: "IA Ethics CPD", id: "2" }, ], MPFASCROELIST: [ { name: "MPFA Non-core CPD", id: "4" }, { name: "MPFA Core CPD", id: "3" }, ], selectYear: "", currentYear: "", yearList: [], popObj: { show: false, formKey: "", selectColumns: [], valueWay: "", }, loading_status: "", list: [], cpdInfoId: "", page: 0, tabIndex: 1, cpdTypeList: [ { name: "IA CPD", id: "1", }, { name: "MPFA CPD", id: "2", }, ], tabList: [ { name: "年度考核", id: "1", }, { name: "年中考核", id: "0", }, ], showModel: false, form: { certificateUrlFiles: [], iaType: "", mpfaType: "", trainingOrganization: "", courseName: "", score: "", completeTime: "", disabled: false, }, timePopObj: { show: false, formKey: "", minDate: dayjs().subtract(100, "year").valueOf(), maxDate: dayjs().valueOf(), defaultDate: dayjs().valueOf(), }, detail: { aBaseHalfReal: "", iaBaseHalfTarget: "", iaBaseYearReal: "", iaOtherHalfReal: "", iaEthicsHalfTarget: "", iaOtherYearReal: "", iaEthicsYearTarget: "", }, }; }, computed: { diffBaseHalf() { let { detail } = this; return new BigNumber(detail.iaBaseHalfTarget || 0).minus( detail.iaBaseHalfReal || 0 ); }, diffBaseYear() { let { detail } = this; return new BigNumber(detail.iaBaseYearTarget || 0).minus( detail.iaBaseYearReal || 0 ); }, diffIaOtherHalf() { let { detail } = this; return new BigNumber(detail.iaEthicsHalfTarget || 0).minus( detail.iaOtherHalfReal || 0 ); }, diffIaOtherYear() { let { detail } = this; return new BigNumber(detail.iaEthicsYearTarget || 0).minus( detail.iaOtherYearReal || 0 ); }, // 年中实际分值 halfRealTotal() { let { detail } = this; return new BigNumber(detail.iaBaseHalfReal || 0).plus( detail.iaOtherHalfReal || 0 ); }, diffHalfRealTotal() { let { halfRealTotal, detail } = this; return new BigNumber(detail.iaTotalHalfTarget || 0).minus( halfRealTotal || 0 ); }, diffIaOtherYear() { let { detail } = this; return new BigNumber(detail.iaEthicsYearTarget || 0).minus( detail.iaOtherYearReal || 0 ); }, // 年度实际分值 realTotal() { let { detail } = this; return new BigNumber(detail.iaOtherYearReal || 0).plus( detail.iaBaseYearReal || 0 ); }, diffRealTotal() { let { realTotal, detail } = this; return new BigNumber(detail.iaTotalYearTarget || 0).minus(realTotal || 0); }, // mpfa mpfaDiffBaseHalf() { let { detail } = this; return new BigNumber(detail.mpfaCoreHalfTarget || 0).minus( detail.mpfaBaseHalfReal || 0 ); }, mpfaDiffBaseYear() { let { detail } = this; return new BigNumber(detail.mpfaCoreYearTarget || 0).minus( detail.mpfaBaseYearReal || 0 ); }, mpfaDiffBaseHalf() { let { detail } = this; return new BigNumber(detail.mpfaCoreHalfTarget || 0).minus( detail.mpfaBaseHalfReal || 0 ); }, // mpfaDiffBaseYearRealYear() { // let { detail } = this; // return new BigNumber(detail.mpfaOtherYearTarget || 0).minus( // detail.mpfaOtherYearReal || 0 // ); // }, // 年中实际分值 mpfaHalfRealTotal() { let { detail } = this; return new BigNumber(detail.mpfaBaseHalfReal || 0).plus( detail.mpfaOtherHalfReal || 0 ); }, mpfaDiffHalfRealTotal() { let { mpfaHalfRealTotal, detail } = this; return new BigNumber(detail.mpfaTotalHalfTarget || 0).minus( mpfaHalfRealTotal || 0 ); }, mpfaDiffBaseYearRealYear() { let { detail } = this; return new BigNumber(detail.mpfaCoreYearTarget || 0).minus( detail.mpfaBaseYearReal || 0 ); }, // 年度实际分值 mpfaRealTotal() { let { detail } = this; return new BigNumber(detail.mpfaOtherYearReal || 0).plus( detail.mpfaBaseYearReal || 0 ); }, mpfaDiffRealTotal() { let { mpfaRealTotal, detail } = this; return new BigNumber(detail.mpfaTotalYearTarget || 0).minus( mpfaRealTotal || 0 ); }, }, async onLoad() { this.init(); const { data } = await uni.$u.http.get("/app/user/queryHomeInfo"); if (data && data.licenseeType) { this.hasMPFA = data.licenseeType.indexOf("4") > -1; // this.hasMPFA = true; // 测试用 } }, methods: { handleGoToJj() { // 拼接参数到 url,假设 cpdInfoId 是数字或字符串 const url = `/pages/cpd/cpdConfirmDecision?cpdInfoId=${this.cpdInfoId}`; uni.navigateTo({ url: url, }); }, formatDictName, async init() { let { cpdType } = this; const { data } = await uni.$u.http.get("/app/cpd/yearPeriod/list", { params: { cpdType: cpdType }, }); let yearList = []; if (data && data.length > 0) { data.map((item, index) => { if (cpdType == 1) { let tempList = item.split("-"); if (index == 0) { this.selectYear = tempList[1]; this.currentYear = tempList[1]; } yearList.push({ name: `${item}年`, id: tempList[1] }); } else { this.selectYear = item; this.currentYear = item; yearList.push({ name: `${item}年`, id: item }); } }); } this.yearList = yearList; this.reset(); }, reset() { this.page = 0; this.list = []; this.getDetail(); }, handleChangeCpdType(val) { this.cpdType = val; this.init(); }, async getDetail() { let { cpdType } = this; var yearPeriod = ""; if (cpdType == 1) { yearPeriod = `${this.selectYear - 1}-${this.selectYear}`; } else { yearPeriod = `${this.selectYear}`; } let { data = {} } = await uni.$u.http.get("/app/cpd/home", { params: { cpdType, yearPeriod, }, }); this.list = (data.iaSubimtList || data.mpfaSubimtList || []).map( (ele) => { let cpdTypes = (ele.cpdTypes || "").split(","); let idsList = (ele.ids || "").split(","); let iaTypeList = cpdTypes.filter((ele) => ele == 1 || ele == 2); let iaType = ""; if (iaTypeList.length > 0) { iaType = iaTypeList[0]; } let mpfaTypeList = cpdTypes.filter((ele) => ele == 3 || ele == 4); let mpfaType = ""; if (mpfaTypeList.length > 0) { mpfaType = mpfaTypeList[0]; } return { ...ele, idsList, iaType, mpfaType, }; } ); console.log("this.list", this.list); this.detail = data; this.cpdInfoId = data.id; console.log("this.222222222222", this.cpdInfoId); // this.reset(); }, // 弹出弹窗 showPop(formKey, selectColumnsKey, valueWay) { let selectColumns = this[selectColumnsKey]; console.log("selectColumns", selectColumns); this.popObj = { show: true, formKey, selectColumns, valueWay, }; }, onPickerConfirm(e) { let vm = this; this.popObj = { show: false, formKey: "", selectColumns: [], valueWay: "", }; this.$set(this, vm.popObj.formKey, e.value[0][this.popObj.valueWay]); this.getDetail(); }, async getRecordList() { return; let vm = this; let { loading_status, selectYear } = this; if (loading_status == "loading" || loading_status == "nomore") { return; } this.loading_status = "loading"; vm.page = vm.page + 1; const { data } = await uni.$u.http.get( "/app/productInfo/listPageProductInfo", { params: { pageNum: vm.page, pageSize: 50, selectYear }, } ); this.list = this.list.concat(data.list); if (Number(data.total) === 0) { this.loading_status = "none"; } else if (Number(data.total) > this.list.length) { this.loading_status = "hasLoading"; } else { this.loading_status = "nomore"; } }, handleScrollToLower() { this.getRecordList(); }, handleAddCpd() { this.form = { certificateUrlFiles: [], iaType: "", mpfaType: "", trainingOrganization: "", courseName: "", score: "", completeTime: "", disabled: false, }; this.showModel = true; }, handleUploadSuccess(key, fileData) { let { form } = this; var targetList = form[key] || []; targetList.push({ fileName: fileData.fileName, fileUrl: fileData.fileUrl, }); this.$set(this.form, key, targetList); }, showTimePop(key) { this.timePopObj.formKey = key; this.timePopObj.show = true; }, handleExceedLimitError(key, fileData) { uni.showToast({ title: `文件CPD超出最大限制200M`, icon: "none", }); }, handleDeleteFile(key, index) { console.log("key", key, index); let { form } = this; var targetList = form[key] || []; targetList.splice(index, 1); this.$set(this.form, key, targetList); }, handleTimeConfirmTime(e) { let { timePopObj } = this; this.$set( this.form, timePopObj.formKey, uni.$u.timeFormat(e.value, "yyyy-mm-dd") ); this.timePopObj.formKey = ""; this.timePopObj.show = false; }, handleDeleteRecord() { let vm = this; uni.showModal({ title: "提示", content: "确定删除吗?", success: async (res) => { if (res.confirm) { await uni.$u.http.get("/app/cpd/del", { params: { ids: vm.form.ids, }, }); vm.showModel = false; vm.reset(); } }, }); }, async handleConfirmRecord() { let vm = this; let { form, cpdType } = this; var tempData = trimObject(form); var validator = new Validator(); validator.add(tempData.certificateUrlFiles, [ { strategy: "isNonEmpty", errorMsg: "请上传CPD文件", }, ]); let tempCpdTypeList = []; if (form.iaType) { tempCpdTypeList.push(form.iaType); } if (form.mpfaType) { tempCpdTypeList.push(form.mpfaType); } validator.add(tempCpdTypeList, [ { strategy: "isNonEmpty", errorMsg: "请上传分数类型", }, ]); validator.add(tempData.trainingOrganization, [ { strategy: "isNonEmpty", errorMsg: "请输入培训机构名称", }, ]); validator.add(tempData.courseName, [ { strategy: "isNonEmpty", errorMsg: "请输入课程名称", }, ]); validator.add(tempData.score, [ { strategy: "isNonEmpty", errorMsg: "请输入CPD分数", }, { strategy: "customerFunc", func: () => tempData.score > 0 && tempData.score <= 8, errorMsg: `CPD分值最小0.5 最大8`, }, { strategy: "customerFunc", func: () => tempData.score % 0.5 == 0, errorMsg: `CPD分值为0.5的整数倍`, }, ]); validator.add(tempData.completeTime, [ { strategy: "isNonEmpty", errorMsg: "请选择课程完成时间", }, ]); const errorMsg = validator.check(); if (errorMsg) { uni.showToast({ icon: "none", title: errorMsg, }); return false; } form.certificateUrl = form.certificateUrlFiles.map((item) => { return item.fileUrl; })[0]; let tempPostData = []; // 要删除的id 判定 // let deleteId = ""; // // ids存在 说明是修改 可能需要删除 // if (form.ids) { // if(form.cpdTypes.length != tempCpdTypeList.length) { // } // } tempCpdTypeList.map((ele) => { var yearPeriod = ""; if (ele == 1 || ele == 2) { yearPeriod = `${vm.selectYear - 1}-${vm.selectYear}`; } else { yearPeriod = vm.selectYear; } let postData = _.clone(form); let id = postData.ids; let ids = postData.ids; // 两个的修改 if ( form.idsList && form.idsList.length > 1 && tempCpdTypeList.length == 2 ) { if (ele == 1 || ele == 2) { id = form.idsList[0]; } else { id = form.idsList[1]; } } else if ( form.idsList && form.idsList.length == 1 && tempCpdTypeList.length == 2 ) { // 一个变两个 0表示 第一个是新增的 1 表示第二个是新增的 let addType = ""; // cpdTypes 1 2 说明新增的是 3或4 if (form.cpdTypes == 1 || form.cpdTypes == 2) { addType = 1; } else { addType = 0; } if (ele == 1 || ele == 2) { if (addType == 0) { id = ""; } } else { if (addType == 1) { id = ""; } } } else if ( form.idsList && form.idsList.length == 2 && tempCpdTypeList.length == 1 ) { // 两个变一个 if (ele == 1 || ele == 2) { id = form.idsList[0]; ids = form.idsList[0]; } else { id = form.idsList[1]; ids = form.idsList[0]; } } tempPostData.push({ ...postData, cpdType: ele, yearPeriod, id: id, ids, completeTime: dayjs(form.completeTime).format("YYYY-MM-DD hh:mm:ss"), }); delete tempPostData.idsList; }); await uni.$u.http.post("/app/cpd/submit", tempPostData); this.showModel = false; this.getDetail(); }, handleEditRecordList(item) { let { selectYear, currentYear } = this; let certificateUrlFiles = []; if (item.certificateUrl) { certificateUrlFiles = [ { fileName: item.certificateUrl, fileUrl: item.certificateUrl, }, ]; } item.completeTime = dayjs(item.completeTime).format("YYYY-MM-DD"); this.form = { certificateUrlFiles, trainingOrganization: "", courseName: "", score: "", completeTime: "", disabled: selectYear != currentYear, idsList: [], ...item, }; console.log("this.form", this.form); this.showModel = true; }, // 补充材料 handleCpdSuppleMater() { let vm = this; let { cpdType, detail } = this; var yearPeriod = ""; if (cpdType == 1) { yearPeriod = `${vm.selectYear - 1}-${vm.selectYear}`; } else { yearPeriod = vm.selectYear; } this.$u.route({ url: "/pages/cpd/cpdSuppleMater", params: { cpdType: cpdType, yearPeriod, id: detail.id, }, }); }, }, }; </script> <style lang="scss" scoped> .cpdPage { position: relative; z-index: 1; padding: 20rpx 20rpx 200rpx; min-height: 100vh; background: #f4f6f9; .selectYear { background: #fff; padding: 4rpx 10rpx; border-radius: 4rpx; .icon { margin-left: 8rpx; } } .recordList { // overflow-y: auto; max-height: 60vh; background: #f3f5f8; } } .cpdPageTop { margin-bottom: 10rpx; font-size: 30rpx; } .statisticsNew { .statisticsTop { margin: 0 40rpx 20rpx; border: 1px solid #05c4c8; border-radius: 10rpx; font-size: 28rpx; } .statisticsTopItem { flex: 1; display: flex; justify-content: center; align-content: center; align-items: center; padding: 10rpx 0; } .statisticsTopItemActive { background: #05c4c8; color: #fff; } } .statistics { position: relative; background: #fff; border-radius: 10rpx; padding: 20rpx; margin-top: 20rpx; .sec { position: relative; padding: 50rpx 0 20rpx; background: #f4f6f9; border-radius: 4rpx; } .status { position: absolute; right: 0; bottom: 0; } } .certificate { transform: translateY(14rpx); } .certificateTitle { margin-bottom: 10rpx; } .score { font-size: 40rpx; font-weight: bold; } .lack { position: absolute; right: 0; top: 0; display: inline-flex; align-content: center; align-items: center; padding: 4rpx 10rpx; background: rgba(237, 79, 83, 0.08); border-radius: 0 4rpx 4rpx 0; font-size: 22rpx; .lackScore { padding: 0 4rpx; color: #ed4f53; font-size: 30rpx; } } .recordTitle { margin-top: 20rpx; } .addBtnWrap { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; } .addBtnWrapTWo { left: 10rpx; right: 10rpx; display: flex; justify-content: space-between; align-content: center; align-items: center; } .addBtn { width: 710rpx; margin: 10rpx auto 20rpx; } .cpdModel { padding: 30rpx 50rpx; .popModelTitle { text-align: center; margin-bottom: 40rpx; padding-bottom: 20rpx; border-bottom: 1rpx solid rgb(200, 201, 204); } .popModelCon { // margin-bottom: 50rpx; } .input-box { flex-grow: 1; } } .fileWrap { display: flex; justify-content: flex-start; align-content: center; align-items: center; flex-wrap: wrap; .fileItem { margin-right: 20rpx; margin-bottom: 20rpx; } } .customerRadioGroup { margin-bottom: 20rpx; width: 500rpx; /deep/ .options-item { white-space: nowrap; font-size: 24rpx; } } .fileUpLoadBtn { margin-right: 20rpx; margin-bottom: 20rpx; } /deep/ uni-modal .uni-modal { position: fixed; z-index: 9999; /* 确保模态框位于最上层 */ } .cpdTypeWrap { display: flex; .cpdTypeItem { position: relative; color: #000; margin-right: 20rpx; } .active { font-weight: bold; color: #05c4c8; } .activeLine { position: absolute; left: 0; right: 0; bottom: -8rpx; height: 4px; background: #05c4c8; } } .gapLine { height: 1rpx; background: rgb(214, 215, 217); } .applyTip { position: fixed; left: 20rpx; right: 20rpx; bottom: 20rpx; padding: 10rpx 0; background: #f4f6f9; text-align: center; color: #ed4f53; } .errorMsg { margin: 10rpx 20rpx; padding: 20rpx; color: #ff3141; background: rgba($color: #ff3141, $alpha: 0.2); } .fontStyle { padding: 10rpx 0; background: #f0f0f0; } .btnStyle { // margin: 0 auto; margin-top: 20rpx; width: 60%; color: #f3f5f8; background: #05c4c8; // font-size: 28rpx; border-radius: 8rpx !important; } </style> 上面的时间无法被选中
最新发布
08-06
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值