页面效果：
代码实现：
<template>
<view class="container">
<view class="header">
<cu-custom :isBack="true" style="color:#ffffff;backgroundColor:#E93323;">
<block slot="backText"></block>
<block slot="content">购买中药</block>
</cu-custom>
</view>
<scroll-view scroll-y="true" class="main">
<view class="scroll-container">
<view class="prescription-box">
<view class="prescription-title">
{{prescriptionItem.name}}
</view>
<view class="medicine-box">
<view class="medicine-title">药材</view>
<view class="medicine-list">
<view class="medicine-item" v-for="(item,index) in medicineList" :key="index">
<view class="medicine-image">
<image :src="item.picUrl"></image>
</view>
<view class="medicine-name">{{item.name}}</view>
</view>
</view>
</view>
<view class="attribute-box">
<view class="attribute-item" v-for="(attrItem,attrIndex) in attributeList">
<view class="attribute-label">{{attrItem.label}}:</view>
<view class="attribute-value">{{attrItem.value}}</view>
</view>
</view>
</view>
</view>
</scroll-view>
<view class="footer">
<view class="btn-box padding bg-white">
<button class="flex cu-btn shadow lg " style="color:#ffffff;backgroundColor:#E93323;"
@tap="toReservation">去下单</button>
</view>
</view>
</view>
</template>
<script>
import * as PrescriptionApi from '@/api/reservation/prescription.js';
export default {
data() {
return {
gridCol: 3,
gridBorder: true,
medicineList: [],
attributeList: [],
prescriptionItem: {}
}
},
onLoad(options) {
this.prescriptionItem = JSON.parse(options.item)
this.getMedicineData(this.prescriptionItem.name);
},
methods: {
getMedicineData(prescriptionName) {
PrescriptionApi.getPrescriptionDetail(prescriptionName).then(res => {
this.medicineList = res.data[0].prescriptionDrugDOS;
this.attributeList = res.data[0].prescriptionDescribeDOS;
console.log('getMedicineData attributeList:', this.attributeList);
})
},
toReservation() {
uni.navigateTo({
url: "/pages/reservation/reservation?prescriptionItem=" + JSON.stringify(this.prescriptionItem)
})
}
}
}
</script>
<style lang="scss" scoped>
.container {
display: flex;
flex-direction: column;
height: 100vh;
.header {}
.main {
flex: 1;
overflow-y: scroll;
background-color: #E93323;
width: 100%;
.scroll-container {
display: flex;
justify-content: center;
.prescription-box {
position: relative;
width: 90%;
background-color: #fef9e2;
margin-top: 80rpx;
border-radius: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 20rpx;
margin-bottom: 60rpx;
.prescription-title {
position: absolute;
top: -40rpx;
background-image: url('@/static/images/reservation/yf-title-bg.png');
background-size: 100% 100%;
width: 450rpx;
height: 120rpx;
text-align: center;
line-height: 120rpx;
color: #ffffff;
font-size: 40rpx;
font-weight: 600;
z-index: 999;
}
.medicine-box {
width: 90%;
margin-top: 80rpx;
background-color: #ffffff;
border-radius: 20rpx;
.medicine-title {
width: 100%;
height: 80rpx;
background-color: #E93323;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
text-align: center;
line-height: 80rpx;
color: #ffffff;
font-size: 32rpx;
font-weight: 600;
}
.medicine-list {
display: flex;
flex-wrap: wrap;
padding-bottom: 20rpx;
.medicine-item {
width: 50%;
height: 200rpx;
padding: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
.medicine-image {
width: 100%;
height: 120rpx;
image {
border-radius: 20rpx;
width: 100%;
height: 120rpx;
}
}
.medicine-name {
margin-top: 20rpx;
}
}
}
}
.attribute-box {
width: 90%;
margin-top: 40rpx;
display: flex;
flex-direction: column;
.attribute-item {
display: flex;
.attribute-label {
width: 120rpx;
color: #E93323;
font-weight: 600;
}
.attribute-value {
flex: 1;
margin-left: 12rpx;
display: flex;
}
}
}
}
}
}
.footer {
display: flex;
background-color: pink;
.btn-box {
width: 100%;
}
}
}
</style>
实现要点：
1、header、bottom高度不变、main高度动态：
flex: 1;
overflow-y: scroll;
2、main布局目前用了scroll-view，但是scroll-view不支持flex：
因此：display: flex;justify-content: center;居中没有效果，所以在scroll-view多套了一层div：scroll-container，在该div实现居中
3、main布局如果使用view，background-color无法铺满指定颜色：
暂时没有找到合适解决方案，有空研究
