pages_order/product/detectPackageCard.vue

@@ -0,0 +1,125 @@
+<template>
+  <view class="flex package" @click="jumpToProductDetail(data.id)">
+    <view class="flex flex-column package-info">
+      <view class="package-info-title">{{ data.name }}</view>
+      <!-- todo: check key -->
+      <!-- <view class="package-info-desc">{{ data.desc }}</view> -->
+    </view>
+    <view class="package-detail">
+      <view class="package-detail-item" v-for="item in data.packages" :key="item.id">
+        <view class="package-detail-item-img">
+          <image class="img" :src="getCoverImg(item)" mode="aspectFill"></image>
+        </view>
+        <view class="package-detail-item-label">{{ item.titile }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    props: {
+      data: {
+        type: Object,
+        default() {
+          return {}
+        }
+      }
+    },
+    methods: {
+      jumpToProductDetail(id) {
+        this.$utils.navigateTo(`/pages_order/product/productDetail?id=${id}`)
+      },
+      getCoverImg(data) {
+        const { image } = data
+        
+        return image?.split(',')?.[0] || '' 
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+
+  .package {
+    width: 100%;
+    padding: 8rpx 8rpx 8rpx 16rpx;
+    box-sizing: border-box;
+    background: #FAFAFF;
+    border: 2rpx solid #FFFFFF;
+    border-radius: 24rpx;
+
+    & + & {
+      margin-top: 32rpx;
+    }
+
+    &-info {
+      flex: none;
+      display: inline-flex;
+      align-items: flex-start;
+      width: 200rpx;
+      font-family: PingFang SC;
+      line-height: 1.4;
+
+      &-title {
+        font-weight: 600;
+        font-size: 28rpx;
+        color: #000000;
+      }
+
+      &-desc {
+        margin-top: 8rpx;
+        font-weight: 400;
+        font-size: 24rpx;
+        color: #8B8B8B;
+      }
+    }
+
+    &-detail {
+      flex: 1;
+      white-space: nowrap;
+      overflow-x: auto;
+      padding: 16rpx;
+      background-image: linear-gradient(#FAFAFF, #F3F3F3);
+      border-radius: 16rpx;
+
+      &-item {
+        $size: 120rpx;
+
+        & + & {
+          margin-left: 16rpx;
+        }
+
+        display: inline-block;
+        width: $size;
+
+        &-img {
+          width: $size;
+          height: $size;
+          border: 2rpx solid #E6E6E6;
+          border-radius: 8rpx;
+          overflow: hidden;
+
+          .img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+
+        &-label {
+          margin-top: 8rpx;
+          font-family: PingFang SC;
+          font-weight: 400;
+          font-size: 24rpx;
+          line-height: 1;
+          color: #8B8B8B;
+          width: 100%;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+        }
+      }
+    }
+  }
+
+</style>

pages_order/product/productCustomView.vue

@@ -54,7 +54,16 @@
         ></uv-tabs>
       </view>
     </view>
-    <view v-if="list.length" class="content">
+    <view v-if="list.length" :class="['content', isMeal ? 'is-meal' : '']">
+      <template v-if="isMeal">
+        <view v-for="item in list" :key="item.id" style="min-width: 0;">
+          <detectPackageCard 
+            :data="item"
+
+          ></detectPackageCard>
+        </view>
+      </template>
+      <template v-else>
         <view v-for="item in list" :key="item.id" style="min-width: 0;">
           <productCard 
             :data="item"
@@ -62,6 +71,7 @@
             imgStyle="width: 100%; height: 110px;"
           ></productCard>
         </view>
+      </template>
     </view>
     <template v-else>
       <uv-empty mode="list"></uv-empty>
@@ -71,10 +81,12 @@
 
 <script>
   import productCard from '@/pages_order/product/productCard.vue'
+  import detectPackageCard from './detectPackageCard.vue'
 
   export default {
 		components: {
       productCard,
+      detectPackageCard,
     },
     props: {
       type: {
@@ -87,6 +99,10 @@
           return []
         }
       },
+      isMeal: {
+        type: Boolean,
+        default: false
+      }
     },
     data() {
       return {
@@ -154,5 +170,9 @@
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 32rpx;
+
+  &.is-meal {
+    grid-template-columns: 1fr;
+  }
 }
 </style>

pages_order/product/productDetail.vue

@@ -7,7 +7,7 @@
 
       <view class="summary">
         <view class="card info">
-          <view class="name">{{ detail.content || data.name }}</view>
+          <view class="name">{{ detail.content || detail.name }}</view>
           <!-- todo: check key -->
           <view class="flex tags" v-if="detail.tags">
             <view class="tag" v-for="(tag, tIdx) in detail.tags" :key="tIdx">

pages_order/product/productList.vue

@@ -23,7 +23,7 @@
       ></uv-search>
     </view>
     <view class="content">
-      <productCustomView :type="queryParams.type" :list="list" @categoryChange="onCategoryChange"></productCustomView>
+      <productCustomView :type="queryParams.type" :isMeal="queryParams.isMeal === 'Y'" :list="list" @categoryChange="onCategoryChange"></productCustomView>
     </view>
   </view>
 </template>
@@ -51,7 +51,7 @@
       }
     },
     onLoad(arg) {
-      const { title, type, homeRecommend, search } = arg
+      const { title, type, homeRecommend, search, isMeal } = arg
 
       if (title) {
         this.title = title
@@ -67,6 +67,10 @@
         this.queryParams.homeRecommend = homeRecommend
       }
 
+      if (isMeal) [
+        this.queryParams.isMeal = isMeal
+      ]
+      
       this.search()
     },
     methods: {

pages_order/product/tabDetect/detectPackageView.vue

@@ -1,67 +1,44 @@
 <template>
   <view class="package__view">
-    <view class="flex package" v-for="packageItem in list" :key="packageItem.id">
-      <view class="flex flex-column package-info">
-        <view class="package-info-title">{{ packageItem.title }}</view>
-        <view class="package-info-desc">{{ packageItem.desc }}</view>
-      </view>
-      <view class="package-detail">
-        <view class="package-detail-item" v-for="item in packageItem.children" :key="item.id">
-          <view class="package-detail-item-img">
-            <image class="img" :src="item.url" mode="aspectFill"></image>
-          </view>
-          <view class="package-detail-item-label">{{ item.label }}</view>
-        </view>
-      </view>
+    <view v-for="packageItem in list" :key="packageItem.id">
+      <detectPackageCard :data="packageItem"></detectPackageCard>
     </view>
   </view>
 </template>
 
 <script>
-export default {
+  import detectPackageCard from '../detectPackageCard.vue'
+
+  export default {
+    components: {
+      detectPackageCard,
+    },
     data() {
       return {
         list: [],
       }
     },
-  mounted() {
-    this.list = [
-      { 
-        id: '001', 
-        title: '儿童体检套餐', 
-        desc: '适合3-12岁的儿童',
-        children: [
-          { id: '0011', label: '腹部超声', url: '',  },
-          { id: '0012', label: '视力检查', url: '',  },
-          { id: '0013', label: '骨龄检测', url: '',  },
-          { id: '0014', label: '生长激素水平检测', url: '',  },
-        ],
-      },
-      { 
-        id: '002', 
-        title: '青少年体检套餐', 
-        desc: '适用于13-18岁的青少年',
-        children: [
-          { id: '0021', label: '身高', url: '',  },
-          { id: '0022', label: '血常规', url: '',  },
-          { id: '0023', label: '胸部 X 光', url: '',  },
-          { id: '0024', label: '心电图检查', url: '',  },
-        ],
+    created() {
+      this.getData()
     },
-      { 
-        id: '003', 
-        title: '孕产妇体检套餐', 
-        desc: '适用于孕期女性',
-        children: [
-          { id: '0031', label: '胎儿超声检查', url: '',  },
-          { id: '0032', label: '唐氏筛查', url: '',  },
-          { id: '0033', label: '糖筛查试验', url: '',  },
-          { id: '0034', label: '血压', url: '',  },
-        ],
+    methods: {
+      async getData() {
+        console.log('getData')
+        try {
+          const queryParams = {
+            pageNo: 1,
+            // todo: check
+            pageSize: 3,
+            type: 1, // 产品类型（0营养剂，1预约，2课程）
+            isMeal: 'Y',
+          }
+          this.list = (await this.$fetch('getProductList', queryParams))?.records || []
+        } catch (err) {
+          console.log('getData err', err)
+        }
       },
-    ]
     },
-}
+  }
 </script>
 
 <style scoped lang="scss">
@@ -71,84 +48,4 @@ export default {
   box-sizing: border-box;
 }
 
-.package {
-  width: 100%;
-  padding: 8rpx 8rpx 8rpx 16rpx;
-  box-sizing: border-box;
-  background: #FAFAFF;
-  border: 2rpx solid #FFFFFF;
-  border-radius: 24rpx;
-
-  & + & {
-    margin-top: 32rpx;
-  }
-
-  &-info {
-    flex: none;
-    display: inline-flex;
-    align-items: flex-start;
-    width: 200rpx;
-    font-family: PingFang SC;
-    line-height: 1.4;
-
-    &-title {
-      font-weight: 600;
-      font-size: 28rpx;
-      color: #000000;
-    }
-
-    &-desc {
-      margin-top: 8rpx;
-      font-weight: 400;
-      font-size: 24rpx;
-      color: #8B8B8B;
-    }
-  }
-
-  &-detail {
-    flex: 1;
-    white-space: nowrap;
-    overflow-x: auto;
-    padding: 16rpx;
-    background-image: linear-gradient(#FAFAFF, #F3F3F3);
-    border-radius: 16rpx;
-
-    &-item {
-      $size: 120rpx;
-
-      & + & {
-        margin-left: 16rpx;
-      }
-
-      display: inline-block;
-      width: $size;
-
-      &-img {
-        width: $size;
-        height: $size;
-        border: 2rpx solid #E6E6E6;
-        border-radius: 8rpx;
-        overflow: hidden;
-
-        .img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-
-      &-label {
-        margin-top: 8rpx;
-        font-family: PingFang SC;
-        font-weight: 400;
-        font-size: 24rpx;
-        line-height: 1;
-        color: #8B8B8B;
-        width: 100%;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-      }
-    }
-  }
-}
 </style>

pages_order/product/tabDetect/index.vue

@@ -43,7 +43,7 @@
     </view>
     <view class="section">
       <view class="section-header">
-        <sectionHeader title="个性化检测包" @showAll="jumpToPersonalDetect"></sectionHeader>
+        <sectionHeader title="个性化检测包" @showAll="jumpToPackageDetect"></sectionHeader>
       </view>
       <detectPackageViewVue></detectPackageViewVue>
     </view>
@@ -85,10 +85,9 @@
 					url: `/pages_order/product/productList?type=1&homeRecommend=Y&title=推荐检测`
 				})
       },
-      jumpToPersonalDetect() {
-        // todo
+      jumpToPackageDetect() {
 				uni.navigateTo({
-					url: `/pages_order/product/productList?type=1&title=自选检测`
+					url: `/pages_order/product/productList?type=1&isMeal=Y&title=个性化检测包`
 				})
       },
       jumpToCustomDetect() {

pages_order/report/test/answer.vue

@@ -149,17 +149,6 @@
         return ['select-box-multiple', 'select-multiple','input', 'input-group'].includes(this.currentQuestion?.component)
       },
     },
-    watch: {
-      tabs: {
-        handler(val) {
-        console.log('watch-tabs', val)
-        },
-        deep: true
-      },
-      current(val) {
-        console.log('watch-current', val)
-      },
-    },
     onLoad(arg) {
       this.step = parseInt(arg.step)
       // this.current = parseInt(arg.current || 0)
@@ -323,6 +312,8 @@
             answer = JSON.stringify(answer)
           } else if (multiple && Array.isArray(this.value)) { // 多选题
             answer = this.value.join(',')
+          } else {
+            answer = this.value
           }
 
           let params = {