普兆健康管家前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

130 lines
3.4 KiB

<template>
<view class="card card-detect">
<view class="flex card-header">
<view class="title">检测项目</view>
</view>
<view class="section">
<view class="table">
<view class="table-cell table-th" v-for="item in headers" :key="item.key">
{{ item.label }}
</view>
<template v-for="(row, index) in list">
<view :class="['table-cell', index % 2 ? 'is-double-row' : '']" v-for="item in headers" :key="getKey(row.id, item.key)" :style="item.style">
<template v-if="item.key === 'weight'">
<uv-rate :value="row.weight" size="48rpx" gutter="16rpx" activeColor="#F7BA1E" :allowHalf="true" :minCount="0.5" readonly></uv-rate>
</template>
<template v-else-if="item.key === 'done'">
{{ row.done ? '' : '' }}
</template>
<template v-else>
{{ row[item.key] }}
</template>
</view>
</template>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
list: {
type: Array,
default() {
return []
}
}
},
data() {
return {
headers: [
{ key: 'name', label: '医学检测项目' },
{ key: 'significance', label: '检测意义', style: 'justify-content: flex-start;' },
{ key: 'sampling', label: '采样' },
{ key: 'weight', label: '权重' },
{ key: 'done', label: '是否检测' },
],
}
},
methods: {
getKey(id, key) {
return `${id}-${key}`
},
onDownload(result) {
console.log('onDownload')
// todo
uni.downloadFile({
url: result, // 请求地址
success: (response) => {
if (response.statusCode === 200) {
console.log('下载成功');
// 继续处理文件保存
const fileManager = wx.getFileSystemManager();
fileManager.saveFile({
tempFilePath: response.tempFilePath,
success: (res) => {
console.log(res, '下载成功');
uni.hideLoading();
},
fail: (err) => {
console.error('保存文件失败', err);
}
});
}
}
});
},
},
}
</script>
<style lang="scss" scoped>
@import './style.scss';
.table {
width: auto;
overflow-x: auto;
display: grid;
grid-template-columns: 385rpx 385rpx auto auto auto;
border: 2rpx solid #E6E6E6;
border-radius: 24rpx;
&-cell {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 53rpx 8rpx;
box-sizing: border-box;
font-family: PingFang SC;
font-weight: 400;
font-size: 28rpx;
line-height: 1.5;
color: #080808;
background: #FCFBFF;
border-right: 2rpx solid #E6E6E6;
border-bottom: 2rpx solid #E6E6E6;
&:nth-child(5n) {
border-right: none;
}
&:nth-last-child(-n+5) {
border-bottom: none;
}
&.is-double-row {
background: #F7F4FF;
}
}
&-th {
white-space: nowrap;
padding: 24rpx 32rpx;
color: #252545;
background: #E6E6E6;
}
}
</style>