百宝箱菜单修改

src/api/ebiz/goodStart/index.js

@@ -0,0 +1,11 @@
+import request from '@/assets/js/utils/request'
+import getUrl from '@/assets/js/utils/get-url'
+
+// 百宝箱菜单查询
+export function getTreasureMenus(data) {
+  return request({
+    url: getUrl('/app/code/getCodeValue', 1),
+    method: 'post',
+    data
+  })
+}

src/router/ebiz/goodStart.js

@@ -1,6 +1,15 @@
 // 开门红专区
 const Prefecture = () => import('@/views/ebiz/goodStart/Prefecture')
 const Treasure = () => import('@/views/ebiz/goodStart/Treasure')
+const TreasureDetail = () => import('@/views/ebiz/goodStart/TreasureDetail')
+
+const spreadParams = function(route) {
+  const params = {}
+  for (let key in route.query) {
+    params[key] = route.query[key]
+  }
+  return params
+}
 
 export default [
   {
@@ -18,5 +27,11 @@ export default [
     meta: {
       title: '百宝箱'
     }
+  },
+  {
+    path: '/goodStart/treasureDetail',
+    name: 'TreasureDetail',
+    component: TreasureDetail,
+    props: route => spreadParams(route)
   }
 ]

src/views/ebiz/goodStart/Treasure.vue

@@ -1,22 +1,63 @@
 <template>
-  <div>
-    <img :src="treasureDetail" />
+  <div class="treasure bg-white">
+    <van-grid :border="false">
+      <van-grid-item v-for="(menu, index) in menus" :key="index" @click="toDetail(menu)">
+        <img :src="$assetsUrl + menu.iconUrl" />
+        <span>{{ menu.name }}</span>
+      </van-grid-item>
+    </van-grid>
   </div>
 </template>
 
 <script>
-import treasureDetail from '@/assets/images/goodStart/treasureDetail.png'
+import { Grid, GridItem } from 'vant'
+import { getTreasureMenus } from '@/api/ebiz/goodStart'
 export default {
+  name: 'Treasure',
+  components: {
+    [Grid.name]: Grid,
+    [GridItem.name]: GridItem
+  },
   data() {
     return {
-      treasureDetail
+      menus: []
     }
+  },
+  methods: {
+    toDetail(menu) {
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + `/#/goodStart/treasureDetail?img=${menu.detailImgUrl}`
+        },
+        routerInfo: {
+          path: `/goodStart/treasureDetail?img=${menu.detailImgUrl}`
+        }
+      })
+    },
+    async getMenus() {
+      const param = { operateType: 'treasure_menus' }
+      const result = await getTreasureMenus(param)
+      console.dir(result)
+      if (result.result === '0') {
+        this.menus = result.content
+      } else {
+        this.$toast(result.resultMessage)
+      }
+    }
+  },
+  mounted() {
+    this.getMenus()
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.treasure {
+  min-height: 100vh;
+}
+
 img {
-  max-width: 100%;
+  max-width: 80%;
 }
 </style>

src/views/ebiz/goodStart/TreasureDetail.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <img :src="$assetsUrl + img" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TreasureDetail',
+  props: {
+    img: {
+      type: String
+    }
+  },
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+img {
+  max-width: 100%;
+}
+</style>