代码优化 — 智慧饭堂小程序订餐详情页

修改之前数据结构格式处理：
image.png
修改之前数据结构格式显示：
image.png
修改之前页面显示处理：
image.png

修改之后数据结构格式处理：
image.png

修改之后数据结构格式显示：
image.png

修改之后页面显示处理：
image.png
修改之后页面代码：

  1. <template>
  2.   <view class="pi-pd-top-16">
  3.     <view v-for="dateMeal in menuListDto" :key="dateMeal.date" class="pi-mg-bottom-16">
  4.       <pi-card padding="24rpx 24rpx 0">
  5.         <template slot="body">
  6.           <view
  7.             class="date pi-h-56 pi-bg-primary pi-radius-8 pi-flex-row-center pi-white pi-mg-bottom-32 pi-mg-top-18"
  8.             style="width: 160rpx;"
  9.           >
  10.             {{ $dayjs(dateMeal.date).format('MM.DD') }}
  11.             <text class="pi-mg-left-8">{{ $dayjs(dateMeal.date).format('ddd') }}</text>
  12.           </view>
  14.           <view v-for="meal in dateMeal.meal" :key="meal.id" class="pi-flex">
  15.             <view
  16.               v-for="mealTime in dateMeal.mealTime"
  17.               :key="mealTime.key"
  18.               class="meal-time pi-flex"
  19.               :class="[mealTime.key === meal.mealTime ? 'pi-mg-right-24' : '']"
  20.             >
  21.               <template v-if="mealTime.key === meal.mealTime">
  22.                 <view
  23.                   class="pi-w-12 pi-h-12 pi-radius-round pi-mg-right-16 pi-mg-top-8"
  24.                   :style="[{ background: mealTime.color }]"
  25.                 />
  26.                 {{ mealTime.name }}
  27.               </template>
  28.             </view>
  30.             <view class="menu-package pi-flex-sub">
  31.               <view class="pi-fz-28 pi-fw-600 pi-mg-bottom-16 pi-flex-sub">
  32.                 {{ meal.id ? meal.menuName : '此餐不选' }}
  33.               </view>
  34.               <view class="pi-light-gray pi-fz-24 pi-mg-bottom-32" style="line-height: 1.5;">
  35.                 <view style="line-height: 1.3;">
  36.                   {{ meal.id ? meal.packageName : '' }}
  37.                 </view>
  38.               </view>
  39.             </view>
  41.             <view class="price pi-text-right" style="width: 104rpx;">
  42.               {{ (meal.id ? meal.price : 0) | moneyFormat }}
  43.             </view>
  44.           </view>
  45.         </template>
  46.       </pi-card>
  47.     </view>
  48.   </view>
  49. </template>
  51. <script>
  52. const TAG_NAME = 'PackageDetail'
  53. import groupBy from 'lodash/groupBy'
  54. export default {
  55.   name: TAG_NAME,
  56.   props: {
  57.     daysInfo: {
  58.       default() {
  59.         return []
  60.       }
  61.     }
  62.   },
  63.   computed: {
  64.     menuListDto() {
  65.       const groupByDate = groupBy(this.daysInfo, meal => meal.date)
  66.       const menuListDto = Object.keys(groupByDate)
  67.         .map(date => ({
  68.           date,
  69.           menuList: groupBy(groupByDate[date], meal => meal.mealTime)
  70.         }))
  71.         .map(date => ({
  72.           ...date,
  73.           meal: Object.values(date.menuList).flat(),
  74.           mealTime: Object.keys(date.menuList).map(mealTime => this.$consts.MEAL_TIMES[mealTime])
  75.         }))
  76.       return menuListDto
  77.     }
  78.   }
  79. }
  80. </script>

总结：
1、需要先分析好页面需要呈现的数据结构格式，然后按照格式对已有数据进行组装，最终将组合好的格式
在页面进行显示
2、将页面多余的代码删除
3、style样式绑定使用数组形式，兼容微信小程序
4、需要加强熟悉页面的作用和页面布局和数据处理