新增功能
This commit is contained in:
Your Name
@@ -59,12 +59,65 @@
|
||||
<text class="label">糖尿病期数</text>
|
||||
<text class="value">{{ getDiabetesTypeName() || '-' }}</text>
|
||||
</view>
|
||||
|
||||
<view class="info-item">
|
||||
<text class="label">婚姻状态</text>
|
||||
<text class="value">{{ getMaritalStatusName() || '-' }}</text>
|
||||
</view>
|
||||
|
||||
<view class="info-item">
|
||||
<text class="label">身高</text>
|
||||
<text class="value">{{ formData.height ? formData.height + ' cm' : '-' }}</text>
|
||||
</view>
|
||||
|
||||
<view class="info-item">
|
||||
<text class="label">体重</text>
|
||||
<text class="value">{{ formData.weight ? formData.weight + ' kg' : '-' }}</text>
|
||||
</view>
|
||||
|
||||
<view class="info-item">
|
||||
<text class="label">地区</text>
|
||||
<text class="value">{{ formData.region || '-' }}</text>
|
||||
</view>
|
||||
|
||||
<view class="info-item">
|
||||
<text class="label">收缩压</text>
|
||||
<text class="value">{{ formData.systolic_pressure ? formData.systolic_pressure + ' mmHg' : '-' }}</text>
|
||||
</view>
|
||||
|
||||
<view class="info-item">
|
||||
<text class="label">舒张压</text>
|
||||
<text class="value">{{ formData.diastolic_pressure ? formData.diastolic_pressure + ' mmHg' : '-' }}</text>
|
||||
</view>
|
||||
|
||||
<view class="info-item">
|
||||
<text class="label">空腹血糖</text>
|
||||
<text class="value">{{ formData.fasting_blood_sugar ? formData.fasting_blood_sugar + ' mmol/L' : '-' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 现病史 -->
|
||||
<view class="section">
|
||||
<view class="section-title">现病史</view>
|
||||
|
||||
<view class="info-item">
|
||||
<text class="label">患病年数</text>
|
||||
<text class="value">{{ formData.diabetes_discovery_year ? formData.diabetes_discovery_year + ' 年' : '-' }}</text>
|
||||
</view>
|
||||
|
||||
<view class="info-item">
|
||||
<text class="label">当地诊断结果</text>
|
||||
<view class="tag-list">
|
||||
<text v-for="item in (formData.local_hospital_diagnosis || [])" :key="item" class="tag">{{ item }}</text>
|
||||
<text v-if="!formData.local_hospital_diagnosis || formData.local_hospital_diagnosis.length === 0" class="value">-</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-item">
|
||||
<text class="label">当地就诊医院</text>
|
||||
<text class="value">{{ formData.local_hospital_name || '-' }}</text>
|
||||
</view>
|
||||
|
||||
<view class="info-item">
|
||||
<text class="label">口腔感觉</text>
|
||||
<text class="value">{{ getAppetiteName() || '-' }}</text>
|
||||
@@ -108,6 +161,62 @@
|
||||
<text v-if="getSleepConditionNames().length === 0" class="value">-</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-item">
|
||||
<text class="label">眼睛情况</text>
|
||||
<view class="tag-list">
|
||||
<text v-for="item in getMultiNames(formData.eye_condition, eyeConditionOptions)" :key="item" class="tag">{{ item }}</text>
|
||||
<text v-if="getMultiNames(formData.eye_condition, eyeConditionOptions).length === 0" class="value">-</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-item">
|
||||
<text class="label">头部感觉</text>
|
||||
<view class="tag-list">
|
||||
<text v-for="item in getMultiNames(formData.head_feeling, headFeelingOptions)" :key="item" class="tag">{{ item }}</text>
|
||||
<text v-if="getMultiNames(formData.head_feeling, headFeelingOptions).length === 0" class="value">-</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-item">
|
||||
<text class="label">出汗情况</text>
|
||||
<view class="tag-list">
|
||||
<text v-for="item in getMultiNames(formData.sweat_condition, sweatConditionOptions)" :key="item" class="tag">{{ item }}</text>
|
||||
<text v-if="getMultiNames(formData.sweat_condition, sweatConditionOptions).length === 0" class="value">-</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-item">
|
||||
<text class="label">皮肤情况</text>
|
||||
<view class="tag-list">
|
||||
<text v-for="item in getMultiNames(formData.skin_condition, skinConditionOptions)" :key="item" class="tag">{{ item }}</text>
|
||||
<text v-if="getMultiNames(formData.skin_condition, skinConditionOptions).length === 0" class="value">-</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-item">
|
||||
<text class="label">小便情况</text>
|
||||
<view class="tag-list">
|
||||
<text v-for="item in getMultiNames(formData.urine_condition, urineConditionOptions)" :key="item" class="tag">{{ item }}</text>
|
||||
<text v-if="getMultiNames(formData.urine_condition, urineConditionOptions).length === 0" class="value">-</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-item">
|
||||
<text class="label">大便情况</text>
|
||||
<view class="tag-list">
|
||||
<text v-for="item in getMultiNames(formData.stool_condition, stoolConditionOptions)" :key="item" class="tag">{{ item }}</text>
|
||||
<text v-if="getMultiNames(formData.stool_condition, stoolConditionOptions).length === 0" class="value">-</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-item">
|
||||
<text class="label">腰肾情况</text>
|
||||
<view class="tag-list">
|
||||
<text v-for="item in getMultiNames(formData.kidney_condition, kidneyConditionOptions)" :key="item" class="tag">{{ item }}</text>
|
||||
<text v-if="getMultiNames(formData.kidney_condition, kidneyConditionOptions).length === 0" class="value">-</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 既往史 -->
|
||||
@@ -141,6 +250,16 @@
|
||||
<text class="label">过敏史</text>
|
||||
<text class="value">{{ formData.allergy_history === 1 ? '有' : '无' }}</text>
|
||||
</view>
|
||||
|
||||
<view class="info-item">
|
||||
<text class="label">家族病史</text>
|
||||
<text class="value">{{ formData.family_history === 1 ? '有' : '无' }}</text>
|
||||
</view>
|
||||
|
||||
<view class="info-item">
|
||||
<text class="label">妊娠哺乳史</text>
|
||||
<text class="value">{{ formData.pregnancy_history === 1 ? '有' : '无' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 诊断信息 -->
|
||||
@@ -190,6 +309,25 @@
|
||||
<text class="label">医嘱</text>
|
||||
<text class="value multi-line">{{ formData.doctor_advice || '-' }}</text>
|
||||
</view>
|
||||
|
||||
<view class="info-item" v-if="formData.report_files && formData.report_files.length > 0">
|
||||
<text class="label">检查报告</text>
|
||||
<view class="image-list">
|
||||
<image
|
||||
v-for="(img, index) in formData.report_files"
|
||||
:key="index"
|
||||
:src="img"
|
||||
class="tongue-image"
|
||||
mode="aspectFill"
|
||||
@click="previewImage(img)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-item">
|
||||
<text class="label">备注</text>
|
||||
<text class="value multi-line">{{ formData.remark || '-' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
@@ -230,24 +368,45 @@ const formData = ref({
|
||||
diagnosis_type: '',
|
||||
syndrome_type: '',
|
||||
diabetes_type: '',
|
||||
marital_status: '',
|
||||
height: '',
|
||||
weight: '',
|
||||
region: '',
|
||||
systolic_pressure: '',
|
||||
diastolic_pressure: '',
|
||||
fasting_blood_sugar: '',
|
||||
diabetes_discovery_year: '',
|
||||
local_hospital_diagnosis: [],
|
||||
local_hospital_name: '',
|
||||
appetite: '',
|
||||
water_intake: '',
|
||||
diet_condition: [],
|
||||
weight_change: '',
|
||||
body_feeling: [],
|
||||
sleep_condition: [],
|
||||
eye_condition: [],
|
||||
head_feeling: [],
|
||||
sweat_condition: [],
|
||||
skin_condition: [],
|
||||
urine_condition: [],
|
||||
stool_condition: [],
|
||||
kidney_condition: [],
|
||||
fatty_liver_degree: '',
|
||||
past_history: [],
|
||||
trauma_history: 0,
|
||||
surgery_history: 0,
|
||||
allergy_history: 0,
|
||||
family_history: 0,
|
||||
pregnancy_history: 0,
|
||||
tongue_images: [],
|
||||
report_files: [],
|
||||
symptoms: '',
|
||||
tongue_coating: '',
|
||||
pulse: '',
|
||||
treatment_principle: '',
|
||||
prescription: '',
|
||||
doctor_advice: ''
|
||||
doctor_advice: '',
|
||||
remark: ''
|
||||
});
|
||||
let dingdan_ok=ref(false)
|
||||
// 字典选项
|
||||
@@ -262,6 +421,13 @@ const weightChangeOptions = ref([]);
|
||||
const bodyFeelingOptions = ref([]);
|
||||
const sleepConditionOptions = ref([]);
|
||||
const fattyLiverDegreeOptions = ref([]);
|
||||
const eyeConditionOptions = ref([]);
|
||||
const headFeelingOptions = ref([]);
|
||||
const sweatConditionOptions = ref([]);
|
||||
const skinConditionOptions = ref([]);
|
||||
const urineConditionOptions = ref([]);
|
||||
const stoolConditionOptions = ref([]);
|
||||
const kidneyConditionOptions = ref([]);
|
||||
|
||||
onMounted(() => {
|
||||
getDictOptions();
|
||||
@@ -282,7 +448,14 @@ const getDictOptions = async () => {
|
||||
weightChange,
|
||||
bodyFeeling,
|
||||
sleepCondition,
|
||||
fattyLiverDegree
|
||||
fattyLiverDegree,
|
||||
eyeCondition,
|
||||
headFeeling,
|
||||
sweatCondition,
|
||||
skinCondition,
|
||||
urineCondition,
|
||||
stoolCondition,
|
||||
kidneyCondition
|
||||
] = await Promise.all([
|
||||
getDictData('diagnosis_type'),
|
||||
getDictData('syndrome_type'),
|
||||
@@ -294,7 +467,14 @@ const getDictOptions = async () => {
|
||||
getDictData('weight_change'),
|
||||
getDictData('body_feeling'),
|
||||
getDictData('sleep_condition'),
|
||||
getDictData('fatty_liver_degree')
|
||||
getDictData('fatty_liver_degree'),
|
||||
getDictData('eye_condition'),
|
||||
getDictData('head_feeling'),
|
||||
getDictData('sweat_condition'),
|
||||
getDictData('skin_condition'),
|
||||
getDictData('urine_condition'),
|
||||
getDictData('stool_condition'),
|
||||
getDictData('kidney_condition')
|
||||
]);
|
||||
|
||||
diagnosisTypeOptions.value = diagnosisType?.diagnosis_type || [];
|
||||
@@ -308,6 +488,13 @@ const getDictOptions = async () => {
|
||||
bodyFeelingOptions.value = bodyFeeling?.body_feeling || [];
|
||||
sleepConditionOptions.value = sleepCondition?.sleep_condition || [];
|
||||
fattyLiverDegreeOptions.value = fattyLiverDegree?.fatty_liver_degree || [];
|
||||
eyeConditionOptions.value = eyeCondition?.eye_condition || [];
|
||||
headFeelingOptions.value = headFeeling?.head_feeling || [];
|
||||
sweatConditionOptions.value = sweatCondition?.sweat_condition || [];
|
||||
skinConditionOptions.value = skinCondition?.skin_condition || [];
|
||||
urineConditionOptions.value = urineCondition?.urine_condition || [];
|
||||
stoolConditionOptions.value = stoolCondition?.stool_condition || [];
|
||||
kidneyConditionOptions.value = kidneyCondition?.kidney_condition || [];
|
||||
} catch (error) {
|
||||
console.error('获取字典数据失败:', error);
|
||||
}
|
||||
@@ -487,17 +674,31 @@ const getSleepConditionNames = () => {
|
||||
|
||||
const getPastHistoryNames = () => {
|
||||
if (!formData.value.past_history || formData.value.past_history.length === 0) return [];
|
||||
// 处理字符串类型（逗号分隔）或数组类型
|
||||
const values = Array.isArray(formData.value.past_history)
|
||||
? formData.value.past_history
|
||||
: formData.value.past_history.split(',');
|
||||
|
||||
return values.map(val => {
|
||||
const item = pastHistoryOptions.value.find(i => i.value === val);
|
||||
return item ? item.name : val;
|
||||
}).filter(Boolean);
|
||||
};
|
||||
|
||||
// 通用多选名称获取
|
||||
const getMultiNames = (fieldValues, options) => {
|
||||
if (!fieldValues || fieldValues.length === 0) return [];
|
||||
const values = Array.isArray(fieldValues) ? fieldValues : fieldValues.split(',');
|
||||
return values.map(val => {
|
||||
const item = options.find(i => i.value === val);
|
||||
return item ? item.name : val;
|
||||
}).filter(Boolean);
|
||||
};
|
||||
|
||||
const getMaritalStatusName = () => {
|
||||
const map = { 0: '未婚', 1: '已婚', 2: '离异' };
|
||||
const v = formData.value.marital_status;
|
||||
return (v !== '' && v !== undefined && v !== null) ? (map[v] || '-') : '';
|
||||
};
|
||||
|
||||
// 预览图片
|
||||
const previewImage = (current) => {
|
||||
uni.previewImage({
|
||||
@@ -553,6 +754,7 @@ const confirmDiagnosis = async () => {
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
dingdan_ok.value=res.data.is_view?true:false
|
||||
uni.setStorageSync('dingdan_ok', true);
|
||||
dingdan_ok.value=true;
|
||||
setTimeout(() => {
|
||||
@@ -573,34 +775,37 @@ const confirmDiagnosis = async () => {
|
||||
<style lang="scss">
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.form-wrapper {
|
||||
padding: 20rpx;
|
||||
padding-bottom: 140rpx; /* 为底部按钮留出空间 */
|
||||
padding: 24rpx;
|
||||
padding-bottom: 180rpx; /* 为底部按钮留出空间 */
|
||||
}
|
||||
|
||||
.section {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 40rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-size: 40rpx; /* 大字体，老年人易读 */
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 30rpx;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 36rpx;
|
||||
padding-bottom: 24rpx;
|
||||
border-bottom: 3rpx solid #e0e0e0;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
margin-bottom: 24rpx;
|
||||
line-height: 1.6;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 36rpx; /* 加大行间距，减少视觉拥挤 */
|
||||
line-height: 1.8;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
@@ -609,21 +814,23 @@ const confirmDiagnosis = async () => {
|
||||
|
||||
.label {
|
||||
flex-shrink: 0;
|
||||
width: 180rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
width: 200rpx;
|
||||
font-size: 34rpx; /* 放大标签字体 */
|
||||
color: #555;
|
||||
font-weight: 600;
|
||||
padding-top: 2rpx;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-size: 34rpx; /* 放大内容字体 */
|
||||
color: #111; /* 深色，高对比度 */
|
||||
word-break: break-all;
|
||||
line-height: 1.8;
|
||||
|
||||
&.multi-line {
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.8;
|
||||
line-height: 2.0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -631,29 +838,32 @@ const confirmDiagnosis = async () => {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
padding: 8rpx 20rpx;
|
||||
background-color: #f0f5ff;
|
||||
color: #1890ff;
|
||||
font-size: 24rpx;
|
||||
border-radius: 8rpx;
|
||||
padding: 12rpx 28rpx; /* 更大的点击区域 */
|
||||
background-color: #e8f4ff;
|
||||
color: #0066cc; /* 深蓝，对比度更高 */
|
||||
font-size: 32rpx; /* 标签字体也放大 */
|
||||
font-weight: 500;
|
||||
border-radius: 10rpx;
|
||||
border: 1rpx solid #b3d9ff;
|
||||
}
|
||||
|
||||
.image-list {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20rpx;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.tongue-image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 8rpx;
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
border-radius: 12rpx;
|
||||
border: 2rpx solid #e0e0e0;
|
||||
}
|
||||
|
||||
.fixed-bottom {
|
||||
@@ -661,22 +871,23 @@ const confirmDiagnosis = async () => {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20rpx 30rpx;
|
||||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||||
padding: 24rpx 40rpx;
|
||||
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
||||
background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.95) 80%, rgba(255, 255, 255, 0) 100%);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
height: 110rpx; /* 更高的按钮，老年人更容易点击 */
|
||||
background: linear-gradient(135deg, #2e7d32 0%, #43a047 100%); /* 绿色，更直观 */
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
border-radius: 44rpx;
|
||||
font-size: 40rpx; /* 按钮字体放大 */
|
||||
font-weight: bold;
|
||||
border-radius: 55rpx;
|
||||
border: none;
|
||||
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
|
||||
box-shadow: 0 8rpx 24rpx rgba(46, 125, 50, 0.35);
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
/* 确认成功页面样式 */
|
||||
@@ -685,16 +896,16 @@ const confirmDiagnosis = async () => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background: linear-gradient(135deg, #2e7d32 0%, #43a047 100%);
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.success-content {
|
||||
width: 100%;
|
||||
max-width: 600rpx;
|
||||
max-width: 620rpx;
|
||||
background: #fff;
|
||||
border-radius: 32rpx;
|
||||
padding: 80rpx 40rpx 60rpx;
|
||||
padding: 90rpx 50rpx 70rpx;
|
||||
text-align: center;
|
||||
box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
|
||||
animation: successFadeIn 0.5s ease-out;
|
||||
@@ -712,19 +923,19 @@ const confirmDiagnosis = async () => {
|
||||
}
|
||||
|
||||
.success-icon-wrapper {
|
||||
margin-bottom: 40rpx;
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.success-icon-circle {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
margin: 0 auto;
|
||||
background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
|
||||
background: linear-gradient(135deg, #2e7d32 0%, #66bb6a 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 12rpx 40rpx rgba(82, 196, 26, 0.3);
|
||||
box-shadow: 0 12rpx 40rpx rgba(46, 125, 50, 0.35);
|
||||
animation: successScale 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
@@ -743,18 +954,19 @@ const confirmDiagnosis = async () => {
|
||||
}
|
||||
|
||||
.success-icon-check {
|
||||
font-size: 100rpx;
|
||||
font-size: 110rpx;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-size: 48rpx;
|
||||
font-size: 56rpx; /* 成功标题大字 */
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 24rpx;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 28rpx;
|
||||
animation: successSlideIn 0.6s ease-out 0.2s both;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
@keyframes successSlideIn {
|
||||
@@ -769,16 +981,16 @@ const confirmDiagnosis = async () => {
|
||||
}
|
||||
|
||||
.success-message {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
font-size: 36rpx; /* 提示文字也放大 */
|
||||
color: #444;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 16rpx;
|
||||
animation: successSlideIn 0.6s ease-out 0.3s both;
|
||||
}
|
||||
|
||||
.success-tips {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
font-size: 30rpx;
|
||||
color: #777;
|
||||
animation: successSlideIn 0.6s ease-out 0.4s both;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,535 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 加载中 -->
|
||||
<view v-if="loading" class="loading-wrapper">
|
||||
<view class="loading-spinner"></view>
|
||||
<text class="loading-text">加载中...</text>
|
||||
</view>
|
||||
|
||||
<!-- 支付成功 -->
|
||||
<view v-else-if="paySuccess" class="success-container">
|
||||
<view class="success-content">
|
||||
<view class="success-icon-wrapper">
|
||||
<view class="success-icon-circle">
|
||||
<text class="success-icon-check">✓</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="success-title">支付成功</view>
|
||||
<view class="success-amount">¥ {{ orderInfo.amount }}</view>
|
||||
<view class="success-message">订单号：{{ orderInfo.order_no }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单不存在 / 错误 -->
|
||||
<view v-else-if="errorMsg" class="error-wrapper">
|
||||
<view class="error-icon">!</view>
|
||||
<text class="error-text">{{ errorMsg }}</text>
|
||||
<button class="retry-btn" @click="loadOrderDetail">重试</button>
|
||||
</view>
|
||||
|
||||
<!-- 订单详情 & 付款 -->
|
||||
<view v-else-if="orderInfo" class="pay-wrapper">
|
||||
<!-- 商户信息 -->
|
||||
<view class="merchant-info">
|
||||
<text class="merchant-title">付款给甄养堂医院</text>
|
||||
</view>
|
||||
|
||||
<!-- 金额区域 -->
|
||||
<view class="amount-section">
|
||||
<text class="amount-label">付款金额</text>
|
||||
<view class="amount-row">
|
||||
<text class="amount-symbol">¥</text>
|
||||
<text class="amount-value">{{ formatAmount(orderInfo.amount) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="divider"></view>
|
||||
|
||||
<!-- 订单信息 -->
|
||||
<view class="order-info-section">
|
||||
<view class="info-row">
|
||||
<text class="info-label">订单号</text>
|
||||
<text class="info-value">{{ orderInfo.order_no }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">订单类型</text>
|
||||
<text class="info-value">{{ orderInfo.order_type_desc }}</text>
|
||||
</view>
|
||||
<view class="info-row" v-if="orderInfo.remark">
|
||||
<text class="info-label">备注</text>
|
||||
<text class="info-value">{{ orderInfo.remark }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="divider"></view>
|
||||
|
||||
<!-- 订单状态 -->
|
||||
<view v-if="orderInfo.status == 2" class="paid-notice">
|
||||
<view class="paid-icon">✓</view>
|
||||
<text class="paid-text">该订单已支付</text>
|
||||
</view>
|
||||
|
||||
<!-- 付款按钮 -->
|
||||
<view v-else class="pay-btn-wrapper">
|
||||
<button
|
||||
class="pay-btn"
|
||||
:disabled="paying"
|
||||
:loading="paying"
|
||||
@click="handlePay"
|
||||
>
|
||||
{{ paying ? '支付中...' : '付款' }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, getCurrentInstance } from 'vue'
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
const loading = ref(true)
|
||||
const paying = ref(false)
|
||||
const paySuccess = ref(false)
|
||||
const errorMsg = ref('')
|
||||
const orderInfo = ref(null)
|
||||
const orderNo = ref('')
|
||||
|
||||
onMounted(() => {
|
||||
loadOrderDetail()
|
||||
})
|
||||
|
||||
const parsePageParams = (options) => {
|
||||
const params = {}
|
||||
if (options.scene) {
|
||||
try {
|
||||
const decodedScene = decodeURIComponent(options.scene)
|
||||
decodedScene.split('&').forEach(item => {
|
||||
const [key, value] = item.split('=')
|
||||
if (key && value) {
|
||||
params[key] = value
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('解析scene参数失败:', error)
|
||||
}
|
||||
}
|
||||
Object.keys(options).forEach(key => {
|
||||
if (key !== 'scene' && options[key]) {
|
||||
params[key] = options[key]
|
||||
}
|
||||
})
|
||||
return params
|
||||
}
|
||||
|
||||
const loadOrderDetail = async () => {
|
||||
loading.value = true
|
||||
errorMsg.value = ''
|
||||
|
||||
const pages = getCurrentPages()
|
||||
const currentPage = pages[pages.length - 1]
|
||||
const params = parsePageParams(currentPage.options || {})
|
||||
orderNo.value = params.order_no || ''
|
||||
|
||||
if (!orderNo.value) {
|
||||
loading.value = false
|
||||
errorMsg.value = '缺少订单号'
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await proxy.apiUrl({
|
||||
url: '/api/tcm/getOrderByNo',
|
||||
method: 'GET',
|
||||
data: { order_no: orderNo.value }
|
||||
}, false)
|
||||
|
||||
if (res.code === 1) {
|
||||
orderInfo.value = res.data
|
||||
} else {
|
||||
errorMsg.value = res.msg || '订单加载失败'
|
||||
}
|
||||
} catch (err) {
|
||||
errorMsg.value = '网络请求失败'
|
||||
console.error('加载订单失败:', err)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const formatAmount = (amount) => {
|
||||
const num = parseFloat(amount)
|
||||
if (isNaN(num)) return '0.00'
|
||||
return num.toFixed(2)
|
||||
}
|
||||
|
||||
const ensureLogin = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const token = uni.getStorageSync('token')
|
||||
if (token) {
|
||||
resolve(token)
|
||||
return
|
||||
}
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: async (loginRes) => {
|
||||
try {
|
||||
const res = await proxy.apiUrl({
|
||||
url: '/api/login/mnpLogin',
|
||||
method: 'POST',
|
||||
data: { code: loginRes.code }
|
||||
}, false)
|
||||
if (res.code === 1 && res.data && res.data.token) {
|
||||
uni.setStorageSync('token', res.data.token)
|
||||
uni.setStorageSync('userData', res.data)
|
||||
resolve(res.data.token)
|
||||
} else {
|
||||
reject(new Error(res.msg || '登录失败'))
|
||||
}
|
||||
} catch (e) {
|
||||
reject(e)
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const handlePay = async () => {
|
||||
if (paying.value || !orderInfo.value) return
|
||||
if (orderInfo.value.status == 2) {
|
||||
uni.showToast({ title: '订单已支付', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
paying.value = true
|
||||
|
||||
try {
|
||||
await ensureLogin()
|
||||
|
||||
const res = await proxy.apiUrl({
|
||||
url: '/api/pay/prepay',
|
||||
method: 'POST',
|
||||
data: {
|
||||
from: 'order',
|
||||
order_id: orderInfo.value.id,
|
||||
pay_way: 2,
|
||||
redirect: '/pages/order/order'
|
||||
}
|
||||
}, false)
|
||||
|
||||
if (res.code !== 1 || !res.data) {
|
||||
uni.showToast({ title: res.msg || '发起支付失败', icon: 'none' })
|
||||
paying.value = false
|
||||
return
|
||||
}
|
||||
|
||||
const payParams = res.data
|
||||
wx.requestPayment({
|
||||
timeStamp: payParams.timeStamp,
|
||||
nonceStr: payParams.nonceStr,
|
||||
package: payParams.package,
|
||||
signType: payParams.signType || 'RSA',
|
||||
paySign: payParams.paySign,
|
||||
success: () => {
|
||||
paySuccess.value = true
|
||||
paying.value = false
|
||||
},
|
||||
fail: (err) => {
|
||||
paying.value = false
|
||||
if (err.errMsg && err.errMsg.includes('cancel')) {
|
||||
uni.showToast({ title: '已取消支付', icon: 'none' })
|
||||
} else {
|
||||
uni.showToast({ title: '支付失败，请重试', icon: 'none' })
|
||||
}
|
||||
console.error('支付失败:', err)
|
||||
}
|
||||
})
|
||||
} catch (err) {
|
||||
paying.value = false
|
||||
uni.showToast({ title: '支付异常，请重试', icon: 'none' })
|
||||
console.error('支付异常:', err)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.loading-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border: 6rpx solid #e0e0e0;
|
||||
border-top-color: #1989fa;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
margin-top: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 错误页 */
|
||||
.error-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
line-height: 120rpx;
|
||||
text-align: center;
|
||||
font-size: 70rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
background-color: #ff4d4f;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
font-size: 32rpx;
|
||||
color: #666;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
width: 320rpx;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
text-align: center;
|
||||
background-color: #1989fa;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
border-radius: 44rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 付款主体 */
|
||||
.pay-wrapper {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.merchant-info {
|
||||
padding: 30rpx 0;
|
||||
}
|
||||
|
||||
.merchant-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 金额区域 */
|
||||
.amount-section {
|
||||
padding: 40rpx 0 50rpx;
|
||||
}
|
||||
|
||||
.amount-label {
|
||||
font-size: 28rpx;
|
||||
color: #888;
|
||||
margin-bottom: 16rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.amount-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.amount-symbol {
|
||||
font-size: 44rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.amount-value {
|
||||
font-size: 80rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1rpx;
|
||||
background-color: #e8e8e8;
|
||||
margin: 10rpx 0 30rpx;
|
||||
}
|
||||
|
||||
/* 订单信息 */
|
||||
.order-info-section {
|
||||
padding: 10rpx 0 20rpx;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 28rpx;
|
||||
color: #888;
|
||||
flex-shrink: 0;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
text-align: right;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* 已支付提示 */
|
||||
.paid-notice {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40rpx 0;
|
||||
}
|
||||
|
||||
.paid-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
background-color: #52c41a;
|
||||
border-radius: 50%;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.paid-text {
|
||||
font-size: 32rpx;
|
||||
color: #52c41a;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 付款按钮 */
|
||||
.pay-btn-wrapper {
|
||||
padding: 60rpx 40rpx 0;
|
||||
}
|
||||
|
||||
.pay-btn {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
background-color: #1989fa;
|
||||
color: #fff;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
border-radius: 16rpx;
|
||||
border: none;
|
||||
letter-spacing: 4rpx;
|
||||
|
||||
&[disabled] {
|
||||
background-color: #a0cfff;
|
||||
}
|
||||
}
|
||||
|
||||
/* 支付成功页 */
|
||||
.success-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #1989fa 0%, #4da6ff 100%);
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.success-content {
|
||||
width: 100%;
|
||||
max-width: 620rpx;
|
||||
background: #fff;
|
||||
border-radius: 32rpx;
|
||||
padding: 90rpx 50rpx 70rpx;
|
||||
text-align: center;
|
||||
box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
|
||||
animation: fadeIn 0.5s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(-40rpx); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.success-icon-wrapper {
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.success-icon-circle {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
margin: 0 auto;
|
||||
background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 12rpx 40rpx rgba(82, 196, 26, 0.35);
|
||||
animation: scaleIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
0% { transform: scale(0); opacity: 0; }
|
||||
50% { transform: scale(1.1); }
|
||||
100% { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
.success-icon-check {
|
||||
font-size: 110rpx;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-size: 52rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.success-amount {
|
||||
font-size: 56rpx;
|
||||
font-weight: bold;
|
||||
color: #1989fa;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user