公众号今日市场页面收藏功能实现,政策资讯页面

yifengdian-company-report/package.json

@@ -32,7 +32,8 @@
     "less": "^4.0.0",
     "less-loader": "^8.0.0",
     "vue-template-compiler": "^2.6.14",
-    "vue-seamless-scroll": "^1.1.23"
+    "vue-seamless-scroll": "^1.1.23",
+    "dayjs": "^1.11.7"
   },
   "eslintConfig": {
     "root": true,

yifengdian-company-report/src/assets/css/index.less

@@ -156,6 +156,9 @@ body #app {
   &-right4{
     margin-right: 4px;
   }
+  &-right15{
+    margin-right: 15px;
+  }
 }
 
 .p-18{

yifengdian-company-report/src/router/router_modular/index.js

@@ -1,3 +1,4 @@
+import { title } from 'vue-carousel-3d'
 
 const router_modular = [
     {
@@ -18,18 +19,27 @@ const router_modular = [
     {
         path: '/home',
         name: 'home',
-        component: () => import(/* webpackChunkName: "about" */ '@/views/home.vue')
+        component: () => import(/* webpackChunkName: "about" */ '@/views/home.vue'),
+        title:'首页'
     },
     {
         path: '/vegetable',
         name: 'vegetable',
-        component: () => import(/* webpackChunkName: "about" */ '@/views/vegetable.vue')
+        component: () => import(/* webpackChunkName: "about" */ '@/views/vegetable.vue'),
+        title:'移风菜篮子'
     },
     {
         path: '/bazaar',
         name: 'bazaar',
-        component: () => import(/* webpackChunkName: "about" */ '@/views/bazaar.vue')
+        component: () => import(/* webpackChunkName: "about" */ '@/views/bazaar.vue'),
+        title:'今日市场'
     },
+    {
+        path: '/policy',
+        name: 'policy',
+        component: () => import(/* webpackChunkName: "about" */ '@/views/policy.vue'),
+        title:'政策资讯'
+    }
     
 ]
 export default router_modular

yifengdian-company-report/src/views/bazaar.vue

@@ -2,7 +2,7 @@
     <div>
         <div class="search flex flex-mean bg-fff m-bot10 flex-center2">
             <div class="date">
-                <div :class="{ 'date-input': true, 'flex': true, 'flex-center2': true, 'gray': currentDate }"
+                <div :class="{ 'date-input': true, 'flex': true, 'flex-center2': true, 'gray': !currentDate }"
                     @click="showDate = true">
                     {{ currentDate ? currentDate : '请选择日期' }}
                 </div>
@@ -11,6 +11,19 @@
                 <van-search v-model="searchKey" placeholder="请输入品种" background="#ffffff" shape="round" />
             </div>
         </div>
+        <div class="collect m-bot10">
+            <div class="title flex flex-center2 ">
+                <img src="@/assets/images/icons/collect.png" alt="">
+                <span>收藏品种</span>
+                <img src="@/assets/images/icons/add.png" @click="handelClickAddCollect" class="m-right15" alt="">
+                <img src="@/assets/images/icons/del.png" alt="" @click="handelClickDelCollect">
+            </div>
+            <div class="tags">
+                <van-tag color="#dbdbdb" size="large" round text-color="#000000" plain :closeable="closeable"
+                    v-for="(item, index) in collectList" :key="index" @close="handelClickClose(item)">{{ item
+                    }}</van-tag>
+            </div>
+        </div>
         <div class="card m-top10 list">
             <div class="title">
                 <span class=""><img src="@/assets/images/icons/date-blue.png" alt=""
@@ -39,6 +52,9 @@
             <van-datetime-picker @confirm="handelCLickConfirmDate" @cancel="showDate = false" v-model="currentDate"
                 type="date" title="选择年月日" />
         </van-popup>
+        <van-popup v-model="showAdd" position="bottom" :style="{ height: '40%' }">
+            <van-checkbox v-model="checked" shape="square" v-for="(item,index) in collectList" :key="index">{{item}}</van-checkbox>
+        </van-popup>
     </div>
 </template>
 
@@ -48,7 +64,7 @@ export default {
         return {
             searchKey: null,
             showDate: false,
-            currentDate: new Date(),
+            currentDate: null,
             priceList: [
                 {
                     name: '哇啊哇擦哇啊哇擦哇啊哇擦哇啊哇擦',
@@ -106,7 +122,11 @@ export default {
                     price: 100,
                     old: '1.1'
                 },
-            ]
+            ],
+            collectList: ['白菜', '白菜', '白菜', '白菜', '白菜', '白菜', '豆角', '西红柿', '西红柿', '黄瓜', '茄子', '洋葱', '彩椒'],
+            closeable: false,
+            showAdd:false,
+            checked:[]
         };
     },
     created() {
@@ -134,9 +154,18 @@ export default {
                 }
             }, 1000);
         },
-        handelCLickConfirmDate() {
+        handelCLickConfirmDate(val) {
             this.currentDate = this.$dayjs(val).format('YYYY-MM-DD');
             this.showDate = false;
+        },
+        handelClickClose(val) {
+            console.log(val);
+        },
+        handelClickAddCollect(){
+            this.showAdd = true;
+        },
+        handelClickDelCollect() {
+            this.closeable = true;
         }
     },
     components: {},
@@ -161,6 +190,9 @@ export default {
             border-radius: 17px;
             width: 100%;
             position: relative;
+            padding: 0 10px;
+            box-sizing: border-box;
+            font-size: 14px;
 
             &::after {
                 content: '';
@@ -224,4 +256,31 @@ export default {
     width: calc(100% - 20px);
     margin: 0 auto;
 }
+
+.collect {
+    background-color: #ffffff;
+    width: 100%;
+    font-family: pingfang-bold;
+    font-size: 17px;
+    padding: 15px 0 15px 10px;
+    box-sizing: border-box;
+
+    img {
+        width: 20px;
+        height: 20px;
+    }
+
+    span {
+        margin: 0 16px 0 6px;
+    }
+
+    .tags {
+        margin-top: 10px;
+    }
+}
+
+:deep(.van-tag) {
+    font-family: none;
+    margin-top: 8px !important;
+}
 </style>

yifengdian-company-report/src/views/home.vue

@@ -69,7 +69,7 @@
             <div class="card m-top10">
                 <div class="title">
                     <span>政策资讯</span>
-                    <span>更多 <img class="img-12" src="@/assets/images/home/right.png" alt=""></span>
+                    <span  @click="$router.push('/policy')">更多 <img class="img-12" src="@/assets/images/home/right.png" alt=""></span>
                 </div>
                 <div class="flex-y">
                     <div class="van-multi-ellipsis--l2 font-bold" style="font-weight: 500;">

yifengdian-company-report/src/views/policy.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class=''>
+       <div class="flex flex-center" style="background-color: #ffffff;">
+        <van-search
+        v-model="searchKey"
+        shape="round"
+        background="#ffffff"
+        placeholder="请输入搜索关键词"
+        class="flex1"
+        />
+        <div class="collect flex flex-center2" style="width: 100px;">
+            <img  class="img-15" src="@/assets/images/icons/collect.png" alt="">
+            <span>个人收藏</span>
+            
+        </div>
+       </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            searchKey:'',
+        };
+    },
+    created() {},
+    methods: {},
+    components:{},
+    computed:{},
+    watch: {},
+}
+</script>
+
+<style lang='scss' scoped>
+
+</style>