9 changed files with 326 additions and 9 deletions
@ -0,0 +1,213 @@ |
|||
<template> |
|||
<div class="detail"> |
|||
<view class="title"> 平车信息 </view> |
|||
<view |
|||
class="car-box bor-left-lv" |
|||
:class="{ |
|||
'bor-left-lv': car.carStatus === 0, |
|||
'bor-left-zhan': car.carStatus === 1, |
|||
'bor-left-xian': car.carStatus === 2, |
|||
'bor-left-dian': car.carStatus === 3, |
|||
'bor-left-li': car.carStatus === 4, |
|||
}" |
|||
> |
|||
<view class="car-title flex items-center"> |
|||
<view class="car-no">{{ car.carNo }}</view> |
|||
<view style="margin-right: 16rpx; font-size: 32rpx">{{ car.nursesName || '患者姓名' }}</view> |
|||
<view style="margin-right: 16rpx; font-size: 32rpx">{{ car.gender === 0 ? '女' : car.gender === 1 ? '男' : '性别' }}</view> |
|||
<view>{{ car.age || '年龄' }}</view> |
|||
</view> |
|||
<view class="info-box flex items-center"> |
|||
<view class="car-no flex items-center"> |
|||
<img v-if="car.carStatus === 0" src="@/static/news/绿.png" style="width: 60rpx; height: 60rpx" alt="" /> |
|||
<img v-else-if="car.carStatus === 1" src="@/static/news/占.png" style="width: 60rpx; height: 60rpx" alt="" /> |
|||
<img v-else-if="car.carStatus === 2" src="@/static/news/闲.png" style="width: 60rpx; height: 60rpx" alt="" /> |
|||
<img v-else-if="car.carStatus === 3" src="@/static/news/电.png" style="width: 60rpx; height: 60rpx" alt="" /> |
|||
<img v-else-if="car.carStatus === 4" src="@/static/news/离.png" style="width: 60rpx; height: 60rpx" alt="" /> |
|||
</view> |
|||
<view> |
|||
<view class="flex"> |
|||
<view |
|||
class="bing" |
|||
:class="{ |
|||
lv: car.carStatus === 0, |
|||
zhan: car.carStatus === 1, |
|||
xian: car.carStatus === 2, |
|||
dian: car.carStatus === 3, |
|||
li: car.carStatus === 4, |
|||
}" |
|||
v-for="(medical, mIndex) in car.medicalHistoryList" |
|||
:key="mIndex" |
|||
> |
|||
{{ medical }} |
|||
</view> |
|||
</view> |
|||
<view class="id-card">身份证：{{ car.idcard }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="title"> 时间轴 </view> |
|||
<view class="time-line-box"></view> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'detail', |
|||
components: {}, |
|||
props: {}, |
|||
data() { |
|||
return { |
|||
car: { |
|||
age: null, |
|||
carId: '1', |
|||
carNo: '1001', |
|||
carStatus: 0, |
|||
doctorId: '0', |
|||
doctorName: null, |
|||
firstAidId: '1601126216004542464', |
|||
gender: null, |
|||
medicalHistoryList: ['家族史', '心脏病', '高血压'], |
|||
name: '', |
|||
idcard: '123123444403142235', |
|||
nursesId: '1', |
|||
nursesName: '张野', |
|||
}, |
|||
status: 0, |
|||
stepList: [], |
|||
}; |
|||
}, |
|||
computed: {}, |
|||
methods: { |
|||
async getSteps() { |
|||
try { |
|||
const params = { firstAidId: this.car.firstAidId }; |
|||
const res = await this.$u.api.getStep(params); |
|||
this.stepList = [...res]; |
|||
} catch (error) { |
|||
console.log('error: ', error); |
|||
} |
|||
}, |
|||
}, |
|||
watch: {}, |
|||
|
|||
// 页面周期函数--监听页面加载 |
|||
onLoad() { |
|||
this.getSteps(); |
|||
}, |
|||
// 页面周期函数--监听页面初次渲染完成0 |
|||
onReady() {}, |
|||
// 页面周期函数--监听页面显示(not-nvue) |
|||
onShow() {}, |
|||
// 页面周期函数--监听页面隐藏 |
|||
onHide() {}, |
|||
// 页面周期函数--监听页面卸载 |
|||
onUnload() {}, |
|||
// 页面处理函数--监听用户下拉动作 |
|||
// onPullDownRefresh() { uni.stopPullDownRefresh(); }, |
|||
// 页面处理函数--监听用户上拉触底 |
|||
// onReachBottom() {}, |
|||
// 页面处理函数--监听页面滚动(not-nvue) |
|||
// onPageScroll(event) {}, |
|||
// 页面处理函数--用户点击右上角分享 |
|||
// onShareAppMessage(options) {}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.time-line-box { |
|||
width: calc(100% - 64rpx); |
|||
height: 100rpx; |
|||
margin: 32rpx; |
|||
padding: 32rpx; |
|||
background: #ffffff; |
|||
box-shadow: 0px 4px 20px 0px rgba(39, 59, 97, 0.08); |
|||
border-radius: 24rpx; |
|||
opacity: 1; |
|||
} |
|||
.car-title { |
|||
margin-left: 42rpx; |
|||
font-size: 36rpx; |
|||
font-family: OPPOSans-Bold, OPPOSans; |
|||
font-weight: bold; |
|||
color: #70798c; |
|||
} |
|||
.car-no { |
|||
width: 140rpx; |
|||
margin-right: 10rpx; |
|||
} |
|||
.id-card { |
|||
font-size: 28rpx; |
|||
margin-top: 8rpx; |
|||
font-family: OPPOSans-Medium, OPPOSans; |
|||
font-weight: 500; |
|||
color: #70798c; |
|||
} |
|||
.lv { |
|||
background: #d2fff0; |
|||
color: #3dc195; |
|||
} |
|||
.zhan { |
|||
background: #ffece4; |
|||
color: #ff8833; |
|||
} |
|||
.xian { |
|||
background: #e4edff; |
|||
color: #5990ff; |
|||
} |
|||
.dian { |
|||
background: #ffe3dd; |
|||
color: #ff7b60; |
|||
} |
|||
.li { |
|||
background: #ececec; |
|||
color: #70798c; |
|||
} |
|||
.bing { |
|||
padding: 2rpx 8rpx; |
|||
font-size: 20rpx; |
|||
margin-right: 8rpx; |
|||
} |
|||
.info-box { |
|||
margin-left: 42rpx; |
|||
margin-top: 8rpx; |
|||
height: 80rpx; |
|||
} |
|||
.MoreCar { |
|||
height: 100vh; |
|||
overflow: hidden; |
|||
} |
|||
.car-box { |
|||
height: 188rpx; |
|||
width: calc(100% - 64rpx); |
|||
box-sizing: border-box; |
|||
margin: 32rpx 32rpx; |
|||
/* margin-bottom: 0; */ |
|||
border-radius: 8rpx; |
|||
box-shadow: 0 0 30rpx 5rpx rgba(0, 0, 0, 0.1); |
|||
padding: 24rpx 0; |
|||
} |
|||
.bor-left-lv { |
|||
border-left: 4rpx solid #1bb299; |
|||
} |
|||
.bor-left-zhan { |
|||
border-left: 4rpx solid #ff8833; |
|||
} |
|||
.bor-left-xian { |
|||
border-left: 4rpx solid #5990ff; |
|||
} |
|||
.bor-left-dian { |
|||
border-left: 4rpx solid #ff7b60; |
|||
} |
|||
.bor-left-li { |
|||
border-left: 4rpx solid #70798c; |
|||
} |
|||
.title { |
|||
margin-left: 32rpx; |
|||
margin-top: 32rpx; |
|||
font-size: 36rpx; |
|||
font-family: OPPOSans-Bold, OPPOSans; |
|||
font-weight: bold; |
|||
color: #3e3d4d; |
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
Loading…
Reference in new issue