xkyy/xk-doctor-wx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e9966af14d7eb189dd388e54f1b95a75753b125f
xk-doctor-wx/subPackages/sub_reception/reception_prescription.vue

968 lines
26 KiB
Vue
Raw Normal View History

1. 医生端开方2.0测试
2026-03-06 13:59:22 +08:00
<template>
<view class="safe-area-inset-bottom">
<u-navbar class="navbar" :is-back="true" title="转接方开方" :custom-back="customBack" title-color="#000">
</u-navbar>
<!-- 患者信息 -->
<view class="patient-info white p-32 m-t-2" v-if="patientInfo">
<view class="flex-row flex-jus-sp flex-ali-center">
<d-text :text="patientInfo.name || '--'" className="fs-4 content-c" :bold="true"></d-text>
<d-text :text="patientInfo.mobile || '--'" className="fs-3 tips-c"></d-text>
</view>
</view>
<!-- 分类切换 -->
<view class="tabs flex p-32 flex-ali-center flex-jus-sp">
<u-button
:throttle-time="0"
:plain="true"
:type="activeCategory==1?'success':'default'"
:custom-style="tabsBtnStyle"
@click="switchCategory(1)"
:hairline="true">
中药
</u-button>
<u-button
:throttle-time="0"
:plain="true"
:type="activeCategory==2?'success':'default'"
:custom-style="tabsBtnStyle"
@click="switchCategory(2)"
:hairline="true">
西药
</u-button>
</view>
<!-- 临床诊断 -->
<view class="top white p-32 flex-col m-t-2">
<view class="top_title flex-row flex-ali-center">
<image :src="require('@/static/image/js.png')" class="size-32"></image>
<d-text text="诊断" className="light-c fs-32 m-l-16"></d-text>
</view>
<view class="m-t-16 flex flex-wrap">
<view class="m-r-2 m-t-16" v-for="(item,i) in diagnoses" :key="item.id ? item.id : `diag_${i}`">
<u-tag
shape="circle"
:text="item.name"
bg-color="#6ACDBB"
color="#fff"
close-color="#fff"
:closeable="true"
@close="removeDiagnosis(i)" />
</view>
</view>
<view class="m-t-24">
<u-input
placeholder="请输入疾病"
:custom-style="illnessStyle"
:value="diagnosisText"
@click="openDiagnosisModal" />
</view>
</view>
<!-- 药品列表 -->
<scroll-view :style="scrollStyle" scroll-y="true">
<!-- 西药 -->
<view class="m-t-2 b-r-8 white p-32 flex-col" v-if="activeCategory==2">
<view class="flex-row flex-jus-sp flex-ali-center">
<d-text text="R：" className="main-c fs-4" :bold="true"></d-text>
<view class="flex-row m-l-163" style="height: 50rpx;">
<view class="m-l-16">
<u-button
:throttle-time="0"
shape="circle"
size="mini"
:custom-style="{ backgroundColor:'#6ACDBB',color:'#fff' }"
@click="goAddDrug">
添加商品
</u-button>
</view>
</view>
</view>
<view class="bottom-border p-col-32" v-for="(item,index) in currentDrugs" :key="index">
<view class="drug-item-content flex-row">
<image
v-if="item.image"
:src="item.image"
class="drug-image"
mode="aspectFill"
></image>
<view class="drug-info-wrapper flex-1">
<view class="flex-row flex-jus-sp flex-ali-center">
<d-text :text="`${index+1}、${item.drug_name}`" className="fs-3 content-c"></d-text>
<d-text :text="`￥${parseFloat(item.price || 0).toFixed(2)}`" className="error-c fs-3"></d-text>
</view>
<view class="flex-row flex-ali-center flex-jus-sp m-t-16">
<view class="flex-row flex-ali-center m-t-16">
<d-text text="规格：" color="#6C7380"></d-text>
<d-text :text="item.specification || '--'" color="#6C7380"></d-text>
</view>
<view class="flex-row flex-ali-center m-t-16">
<d-text :text="(item.select_number || item.number) + '盒'" color="#6C7380"></d-text>
</view>
</view>
<view class="flex-row flex-ali-center">
<d-text text="用法：" color="#6C7380"></d-text>
<d-text :text="item.usage || '未设置用法用量'" color="#6C7380"></d-text>
</view>
</view>
</view>
<view class="m-t-24 flex-row flex-jus-sa btnBox">
<view @click="changeInfo(item, index)" class="btn left">调整用量</view>
<view class="btn right" @click="removeDrug(index)">删除</view>
</view>
</view>
<view class="flex-row flex-jus-center" v-if="currentDrugs.length==0">
<d-empty @click="goAddDrug"></d-empty>
</view>
</view>
<!-- 中药 -->
<view class="white b-r-8 p-32 p-b-0 m-t-2" v-if="activeCategory==1">
<view class="flex-row flex-jus-sp flex-ali-center">
<view class="flex-row flex-ali-end">
<d-text text="R" className="main-c fs-4" :bold="true"></d-text>
<d-text text="：" className="main-c fs-4" :bold="true"></d-text>
</view>
<view class="flex-row" style="height: 50rpx;">
<view class="m-l-16">
<u-button
:throttle-time="0"
:custom-style="{ backgroundColor:'#6ACDBB',color:'#fff' }"
shape="circle"
size="mini"
@click="goAddDrug">
添加商品
</u-button>
</view>
</view>
</view>
<view class="p-col-32" v-if="currentDrugs.length>0">
<view class="label">药材：</view>
<view class="mBox">
<view class="grid-tem-col-2 rp">
<view class="" v-for="(it) in currentDrugs" :key="it.id">
<view class="flex-row flex-jus-sp flex-ali-center m-t-12 delBox">
<d-text :text="it.drug_name||it.name" className="fs-3 content-c"></d-text>
<d-text :text="String(it.number)+(it.unit?it.unit.name:'g')" className="fs-3 tips-c"></d-text>
</view>
</view>
</view>
</view>
<view class="m-t-24 flex-row flex-jus-sa btnBox">
<view @click="goAddDrug" class="btn left">调整用量</view>
<view class="btn right" @click="removeAllDrugs">删除</view>
</view>
</view>
<view class="flex-row flex-jus-center" v-else>
<d-empty @click="goAddDrug"></d-empty>
</view>
</view>
<!-- 医嘱 -->
<view class="flex-col b-r-8 white p-32 m-t-2">
<view class="flex-jus-sp flex-row flex-ali-center">
<d-text text="医嘱" color="#6C7380"></d-text>
<d-text @click="openDoctorOrderModal" text="常用医嘱" color="#6ACDBB"></d-text>
</view>
<u-input
v-model="entrust"
placeholder="请输入"
:custom-style="entrustStyle" />
</view>
<!-- 诊疗费 -->
<view class="flex-row p-2 flex-jus-end m-t-2">
<view class="flex-row flex-ali-center" style="margin-right: 20rpx">
<text>诊疗费：</text>
<u-input
v-model="treatement_price"
placeholder="请输入"
:custom-style="entrustStyle2"
style="width: 200rpx" />
</view>
<view class="flex-row flex-ali-center">
<d-text text="商品计费：" className="m-r-16 tips-c"></d-text>
<d-text :text="`￥${totalProductCost.toFixed(2)}`" color="#F44336" :bold="true"></d-text>
</view>
</view>
<!-- 总价显示 -->
<view class="flex-row p-2 flex-jus-end m-t-2" v-if="currentDrugs.length > 0">
<view class="flex-row flex-ali-center">
<d-text text="总价：" className="m-r-16 tips-c fs-32"></d-text>
<d-text :text="`￥${getSum}`" color="#F44336" :bold="true" className="fs-36"></d-text>
</view>
</view>
<!-- 提示信息 -->
<view class="ac m-t-2 p-32">
<d-text text="请确认患者已在实体医院就诊，并有明确诊断" className="tips-c fs-24"></d-text>
</view>
</scroll-view>
1. 开方2.0优化重构，线下接诊已完成
2026-05-12 10:10:38 +08:00
<!-- 底部按钮（另存常用方未对接保存接口，不展示） -->
1. 医生端开方2.0测试
2026-03-06 13:59:22 +08:00
<view class="bottom flex-jus-sp flex-ali-center safe-area-inset-bottom">
<u-button
:throttle-time="0"
@click="sendPrescription"
shape="circle"
1. 开方2.0优化重构，线下接诊已完成
2026-05-12 10:10:38 +08:00
:custom-style="{backgroundColor:buttonLodging?'#A5DCD2':'#6ACDBB',color:'#fff',height:'86rpx', width: '686rpx'}"
1. 医生端开方2.0测试
2026-03-06 13:59:22 +08:00
:disabled="buttonLodging">
发送处方
</u-button>
</view>
<!-- 常用诊断弹窗 -->
<DiagnosisModal
v-model="showDiagnosisModal"
:selectedDiagnosis="diagnosisText"
@confirm="handleDiagnosisConfirm"
/>
<!-- 常用医嘱弹窗 -->
<DoctorOrderModal
v-model="showDoctorOrderModal"
:selectedDoctorOrder="entrust"
@confirm="handleDoctorOrderConfirm"
/>
<!-- 西药用法用量设置弹窗 -->
<WesternMedicineUsageModal
v-model="showWesternUsageModal"
:drug="editingDrug"
@confirm="handleConfirmWesternUsage"
/>
</view>
</template>
<script>
import { req } from '@/common/js/index.js';
import {
addWestPrescription,
checkChineseMedicineConflictApi,
getDiseaseList,
getDrugUseList,
getProductListDoctorReception,
getPatientItem
} from '@/api/reception.js';
import DiagnosisModal from './components/DiagnosisModal.vue';
import DoctorOrderModal from './components/DoctorOrderModal.vue';
import WesternMedicineUsageModal from './components/WesternMedicineUsageModal.vue';
export default {
components: {
DiagnosisModal,
DoctorOrderModal,
WesternMedicineUsageModal
},
data() {
return {
registerId: '',
patientId: '',
patientInfo: null,
activeCategory: 2, // 1=中药，2=西药
diagnoses: [],
diagnosisText: '', // 诊断文本（用于显示）
currentDrugs: [],
entrust: '',
treatement_price: '',
buttonLodging: false,
// 用法用量弹窗
showWesternUsageModal: false,
editingDrug: null,
editingDrugIndex: -1,
showDiagnosisModal: false,
showDoctorOrderModal: false,
// 中药相关字段
ruleType: 1, // 1=包法，2=制剂
dosage: 7, // 剂数
dayDosage: 2, // 每日次数
packageMethodId: null, // 包法ID
processRuleId: null, // 加工规则ID
processRuleNoteId: null, // 加工规则备注ID
childProcessRuleId: null, // 子加工规则ID
illnessStyle: {
fontSize: '28rpx',
backgroundColor: '#F3F4F5',
borderRadius: '66rpx',
height: '66rpx',
padding: '8rpx 32rpx'
},
entrustStyle: {
fontSize: '30rpx',
backgroundColor: '#F3F4F5',
height: '74rpx',
padding: '16rpx',
borderRadius: '8rpx',
marginTop: '16rpx'
},
entrustStyle2: {
fontSize: '30rpx',
backgroundColor: '#F3F4F5',
height: '52rpx',
padding: '0 16rpx',
borderRadius: '8rpx',
},
tabsBtnStyle: {
padding: '8rpx 16px',
height: '58rpx',
fontSize: '30rpx',
width: '212rpx'
},
scrollStyle: {
height: 'calc(100vh - 600rpx)',
marginBottom: '200rpx'
}
};
},
computed: {
// 商品总价（参考PC端计算逻辑）
totalProductCost() {
if (this.currentDrugs.length === 0) return 0;
// 中药：药品价格 * 用量 * 剂数
if (this.activeCategory === 1) {
return this.currentDrugs.reduce((sum, drug) => {
return sum + (parseFloat(drug.price || 0) * parseFloat(drug.number || 1) * parseFloat(this.dosage || 1));
}, 0);
}
// 西药：药品价格 * 数量
return this.currentDrugs.reduce((sum, drug) => {
return sum + (parseFloat(drug.price || 0) * parseInt(drug.select_number || drug.number || 1));
}, 0);
},
// 加工费（仅中药，参考PC端计算逻辑）
processingFee() {
if (this.activeCategory !== 1 || this.ruleType === 1) return 0;
// TODO: 根据加工规则计算加工费
return 0;
},
// 总价
getSum() {
return (this.totalProductCost + this.processingFee + parseFloat(this.treatement_price || 0)).toFixed(2);
}
},
onLoad(options) {
this.registerId = options.register_id || '';
this.patientId = options.patient_id || '';
// 从本地存储恢复数据
this.restoreFromLocalStorage();
// 获取患者信息
this.getPatientInfo();
},
onShow() {
// 从本地存储恢复当前分类的药品数据
this.getCurrentDrugs();
},
methods: {
/**
* 获取存储key（完全参考PC端结构，添加doctorReceptionWx-前缀）
*/
getStorageKey(category) {
return `doctorReceptionWx-prescriptionData_${category}_${this.patientId}`;
},
/**
* 从本地存储恢复数据
*/
restoreFromLocalStorage() {
// 恢复当前选中的患者ID
const savedPatientId = uni.getStorageSync('doctorReceptionWx-id');
if (savedPatientId) {
this.patientId = savedPatientId;
}
// 恢复当前激活的分类
const savedCategory = uni.getStorageSync(`doctorReceptionWx-activeCategory${this.patientId}`);
if (savedCategory) {
this.activeCategory = parseInt(savedCategory);
} else {
// 检查哪个分类有数据
const chineseData = uni.getStorageSync(this.getStorageKey(1));
const westData = uni.getStorageSync(this.getStorageKey(2));
if (chineseData && JSON.parse(chineseData).length > 0) {
this.activeCategory = 1;
} else if (westData && JSON.parse(westData).length > 0) {
this.activeCategory = 2;
}
}
},
/**
* 获取当前药品数据
*/
getCurrentDrugs() {
const key = this.getStorageKey(this.activeCategory);
const data = uni.getStorageSync(key);
this.currentDrugs = data ? JSON.parse(data) : [];
},
/**
* 保存到本地存储
*/
saveToLocalStorage() {
const key = this.getStorageKey(this.activeCategory);
uni.setStorageSync(key, JSON.stringify(this.currentDrugs));
// 保存当前激活的分类
uni.setStorageSync(`doctorReceptionWx-activeCategory${this.patientId}`, this.activeCategory.toString());
// 保存当前患者ID
uni.setStorageSync('doctorReceptionWx-id', this.patientId);
},
/**
* 切换分类
*/
switchCategory(category) {
this.activeCategory = category;
this.getCurrentDrugs();
},
/**
* 获取患者信息
*/
async getPatientInfo() {
if (!this.patientId) return;
try {
const res = await getPatientItem(this.patientId);
this.patientInfo = res;
if (res && res.user_patient) {
this.patientInfo = {
name: res.user_patient.name,
mobile: res.user_patient.mobile
};
}
} catch (error) {
console.error('获取患者信息失败:', error);
}
},
/**
* 打开诊断弹窗
*/
openDiagnosisModal() {
this.showDiagnosisModal = true;
},
/**
* 处理诊断确认
*/
handleDiagnosisConfirm(diagnosisText) {
this.diagnosisText = diagnosisText;
// 将诊断文本转换为诊断数组
if (diagnosisText) {
const diagnosisNames = diagnosisText.split('，').filter(Boolean);
this.diagnoses = diagnosisNames.map((name, index) => ({
id: `temp_${index}`,
name: name
}));
} else {
this.diagnoses = [];
}
},
/**
* 打开医嘱弹窗
*/
openDoctorOrderModal() {
this.showDoctorOrderModal = true;
},
/**
* 处理医嘱确认
*/
handleDoctorOrderConfirm(doctorOrderText) {
this.entrust = doctorOrderText;
},
/**
* 删除诊断
*/
removeDiagnosis(index) {
this.diagnoses.splice(index, 1);
},
/**
* 去添加药品
*/
goAddDrug() {
uni.navigateTo({
url: `/subPackages/sub_reception/add_drug?category=${this.activeCategory}&patient_id=${this.patientId}&register_id=${this.registerId}`
});
},
/**
* 调整用量
*/
changeInfo(item, index) {
// 仅西药支持调整用量
if (this.activeCategory !== 2) {
this.$toast('当前仅支持西药用法用量设置');
return;
}
this.editingDrug = JSON.parse(JSON.stringify(item));
this.editingDrugIndex = index;
this.showWesternUsageModal = true;
},
/**
* 确认西药用法用量（接诊页）
* @param {Object} usageData - 用法用量数据
*/
handleConfirmWesternUsage(usageData) {
if (this.editingDrugIndex >= 0) {
const drug = this.currentDrugs[this.editingDrugIndex];
drug.time_id = usageData.time_id;
drug.type_id = usageData.type_id;
drug.frequency_id = usageData.frequency_id;
drug.unit_id = usageData.unit_id;
drug.number = usageData.number;
drug.select_number = usageData.select_number || drug.select_number || 1;
drug.use_num = usageData.use_num;
drug.use_type = usageData.use_type;
drug.use_frequency = usageData.use_frequency;
drug.unit = usageData.unit;
// 同步显示字段
if (usageData.use_type && usageData.use_num && usageData.unit) {
drug.usage = `${usageData.use_type.name}，${usageData.use_num.name}，每次${usageData.number}${usageData.unit.name}`;
}
this.saveToLocalStorage();
}
this.editingDrug = null;
this.editingDrugIndex = -1;
},
/**
* 删除药品
*/
removeDrug(index) {
uni.showModal({
title: '删除药品',
content: '是否要删除？',
success: ({ confirm }) => {
if (confirm) {
this.currentDrugs.splice(index, 1);
this.saveToLocalStorage();
}
}
});
},
/**
* 删除所有药品（中药）
*/
removeAllDrugs() {
uni.showModal({
title: '删除药品',
content: '是否要删除所有药品？',
success: ({ confirm }) => {
if (confirm) {
this.currentDrugs = [];
this.saveToLocalStorage();
}
}
});
},
/**
* 发送处方
*/
async sendPrescription() {
if (this.buttonLodging) {
this.$toast('正在处理中，请勿重复提交');
return;
}
// 验证
if (this.currentDrugs.length === 0) {
this.$toast('请添加药品');
return;
}
if (this.diagnoses.length === 0) {
this.$toast('请添加诊断');
return;
}
if (!this.entrust) {
this.$toast('请输入医嘱');
return;
}
this.buttonLodging = true;
try {
// 如果是中药，先检查相冲
if (this.activeCategory === 1) {
const names = this.currentDrugs.map((item) => item.drug_name || item.name);
const checkRes = await checkChineseMedicineConflictApi({ names: names });
if (checkRes && checkRes.is_exist === true) {
uni.showModal({
title: '药物相冲提示',
content: checkRes.message || '检测到该处方内具有药物相冲，是否继续开方？',
showCancel: true,
success: ({ confirm }) => {
if (confirm) {
this.doAddWestPrescription(1);
} else {
this.buttonLodging = false;
}
}
});
return;
}
}
// 发送处方
await this.doAddWestPrescription(0);
} catch (e) {
console.error('发送处方失败:', e);
this.$toast('发送处方失败，请重试');
this.buttonLodging = false;
}
},
/**
* 执行发送处方（参考PC端参数结构）
*/
async doAddWestPrescription(doctorSecondSign = 0) {
const clinical_diagnose = this.diagnosisText || this.diagnoses.map((item) => item.name).join(',');
// 发送前参数校验（仅西药相关）
if (this.activeCategory === 2) {
if (!this.patientInfo || !this.patientId) {
this.$toast('患者信息缺失，无法发送处方');
return;
}
const invalidDrug = this.currentDrugs.find((drug) => {
return !(
drug.id &&
(drug.select_number || drug.number) &&
drug.time_id &&
drug.type_id &&
drug.frequency_id &&
drug.unit_id &&
drug.use_type && drug.use_type.name &&
drug.use_num && drug.use_num.name &&
drug.unit && drug.unit.name
);
});
if (invalidDrug) {
this.$toast('请先为西药设置完整的用法用量');
return;
}
}
// 参考PC端的参数结构
const params = {
patient: this.patientInfo ? { id: this.patientId, ...this.patientInfo } : { id: this.patientId },
drugs: this.currentDrugs,
diagnosis: clinical_diagnose,
medicalAdvice: this.entrust,
total: parseFloat(this.getSum),
category: 1, // 1-自费，2-医保，TODO: 从配置获取
drug_type: 2, // TODO: 根据实际需求设置
register_id: parseInt(this.registerId),
treatment_price: parseFloat(this.treatement_price || 0),
prescription_type: this.activeCategory, // 1=中药，2=西药
doctor_second_sign: doctorSecondSign,
// 中药特有字段
package_method_id: this.activeCategory === 1 ? (this.packageMethodId || null) : null,
process_rule_id: this.activeCategory === 1 ? (this.processRuleId || null) : null,
process_rule_note_id: this.activeCategory === 1 ? (this.processRuleNoteId || null) : null,
child_process_rule_id: this.activeCategory === 1 ? (this.childProcessRuleId || null) : null,
process_rule_type: this.activeCategory === 1 ? (this.ruleType || 1) : null,
processing_fee: this.activeCategory === 1 ? this.processingFee : 0,
dosage: this.activeCategory === 1 ? (this.dosage || 7) : null,
day_dosage: this.activeCategory === 1 ? (this.dayDosage || 2) : null
};
try {
const res = await addWestPrescription(params);
if (res && (res.code === 0 || res.errcode === 0)) {
uni.showToast({ title: '发送成功', icon: 'success' });
// 清空当前数据
this.currentDrugs = [];
this.diagnoses = [];
this.diagnosisText = '';
this.entrust = '';
this.treatement_price = '';
// 清空本地存储
uni.removeStorageSync(this.getStorageKey(1));
uni.removeStorageSync(this.getStorageKey(2));
uni.removeStorageSync(`doctorReceptionWx-activeCategory${this.patientId}`);
setTimeout(() => {
uni.navigateBack();
}, 1500);
} else {
uni.showToast({ title: res.msg || res.message || '发送失败', icon: 'none' });
}
} catch (e) {
console.error('发送处方失败:', e);
uni.showToast({ title: '发送处方失败，请重试', icon: 'none' });
} finally {
this.buttonLodging = false;
}
},
/**
* 返回
*/
customBack() {
uni.navigateBack();
}
}
};
</script>
<style lang="scss" scoped>
.patient-info {
border-radius: 8rpx;
}
.tabs {
background: #fff;
}
.top {
border-radius: 8rpx;
}
.top_title {
margin-bottom: 16rpx;
}
.size-32 {
width: 32rpx;
height: 32rpx;
}
.m-t-2 {
margin-top: 16rpx;
}
.p-32 {
padding: 32rpx;
}
.m-t-16 {
margin-top: 16rpx;
}
.m-t-24 {
margin-top: 24rpx;
}
.m-r-2 {
margin-right: 16rpx;
}
.flex {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-row {
display: flex;
flex-direction: row;
}
.flex-col {
display: flex;
flex-direction: column;
}
.flex-jus-sp {
justify-content: space-between;
}
.flex-ali-center {
align-items: center;
}
.white {
background: #fff;
}
.b-r-8 {
border-radius: 8rpx;
}
.bottom-border {
border-bottom: 1px solid #f0f0f0;
padding: 32rpx 0;
}
.p-col-32 {
padding: 0 32rpx;
}
.btnBox {
display: flex;
justify-content: space-around;
}
.btn {
padding: 16rpx 32rpx;
border-radius: 8rpx;
border: 1px solid #6ACDBB;
color: #6ACDBB;
font-size: 28rpx;
}
.btn.left {
border-color: #6ACDBB;
color: #6ACDBB;
}
.btn.right {
border-color: #FC3636;
color: #FC3636;
}
.bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 32rpx;
background: #fff;
border-top: 1px solid #f0f0f0;
}
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
z-index: 9999;
}
.plr20 {
padding: 0 40rpx;
}
.listBox {
padding: 32rpx;
max-height: 60vh;
overflow-y: auto;
}
.listItem {
padding: 24rpx 0;
border-bottom: 1px solid #f0f0f0;
}
.icon {
width: 32rpx;
height: 32rpx;
margin-right: 16rpx;
}
.btnBox2 {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 32rpx;
background: #fff;
border-top: 1px solid #f0f0f0;
}
.commentModal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10000;
}
.mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
}
.main {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-radius: 20rpx 20rpx 0 0;
max-height: 80vh;
}
.mainTop {
display: flex;
justify-content: space-between;
align-items: center;
padding: 32rpx;
border-bottom: 1px solid #f0f0f0;
}
.mainTop .l,
.mainTop .r {
color: #6ACDBB;
font-size: 32rpx;
}
.mainTop .c {
font-size: 36rpx;
font-weight: bold;
}
.body {
padding: 32rpx;
max-height: 60vh;
overflow-y: auto;
}
.item {
padding: 24rpx;
border-bottom: 1px solid #f0f0f0;
}
.item.act {
background: #f0f9ff;
color: #6ACDBB;
}
.label {
font-size: 28rpx;
color: #6C7380;
margin-bottom: 16rpx;
}
.mBox {
margin-top: 16rpx;
}
.grid-tem-col-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16rpx;
}
.rp {
padding: 16rpx;
}
.delBox {
padding: 16rpx;
background: #f9f9f9;
border-radius: 8rpx;
}
</style>
Reference in New Issue Copy Permalink