feat:添加浮动面板

src/router/globalRoutes.js

@@ -13,12 +13,6 @@ export default [
         component: () => import("@/views/old_mini/dev_login.vue"),
     },
     {
-        path: "/introduce",
-        name: "Introduce",
-        meta: { keepAlive: true },
-        component: () => import("@/views/old_mini/pages/introduce.vue"),
-    },
-    {
         path: "/home",
         name: "Home",
         meta: { showTabbar: true, keepAlive: true },

src/views/old_mini/home/components/farmFloatingPanel.vue

@@ -0,0 +1,16 @@
+<template>
+    <floating-panel class="floating-panel" v-model:height="height" :anchors="anchors"> 12313 </floating-panel>
+</template>
+
+<script setup>
+import { FloatingPanel } from "vant";
+import { ref } from "vue";
+
+const anchors = [310, Math.round(0.93 * window.innerHeight)];
+const height = ref(anchors[0]);
+</script>
+
+<style lang="scss" scoped>
+.floating-panel {
+}
+</style>

src/views/old_mini/home/components/gardenFloatingPanel.vue

@@ -1,308 +0,0 @@
-<template>
-    <floating-panel class="floating-panel" v-model:height="height" :anchors="anchors">
-        <div class="v-select-defalut-group">
-            <el-select class="v-select" v-model="value" placeholder="综合">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-            <el-select class="v-select" v-model="value" placeholder="品种">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-            <el-select class="v-select" v-model="value" placeholder="树龄">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-            <el-select class="v-select" v-model="value" placeholder="价格">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-        </div>
-        <div class="list">
-            <div class="list-item" v-for="(item, index) in list" :key="index">
-                <checkbox @change="changeCheck" v-model="item.checked"></checkbox>
-                <div class="defalut" :class="{ active: item.select }">
-                    <div class="item-flex" @click="handleItem(index)">
-                        <img class="img" src="@/assets/img/mine/img-photo.png" alt="" />
-                        <div class="item-text" >
-                            <div class="name">
-                                <span>{{ item.name }}</span>
-                                <div class="mark">综合评分：92分</div>
-                                <div class="age">树龄：16年</div>
-                            </div>
-                            <div class="txt">单价：<span>12元/斤</span></div>
-                            <div class="txt progress">
-                                剩余可购：
-                                <el-progress
-                                    class="bar"
-                                    :percentage="70"
-                                    :stroke-width="8"
-                                    color="#00BEDB"
-                                    :format="format"
-                                />
-                            </div>
-                        </div>
-                    </div>
-                     <div class="stepper" v-show="item.checked">
-                        <span>认养数量(斤)：</span>
-                        <stepper v-model="stepperValue" min="50" integer @plus="plus" />
-                        <div class="total">¥<span>{{12 * stepperValue}}</span></div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="footer">
-            <div class="all">
-                <checkbox v-model="checked"></checkbox>
-                <span>全选本页</span>
-            </div>
-            <div class="footer-right">
-                <div class="total">
-                    <div class="num">合计<span>¥</span><span class="value">{{12 * stepperValue}}</span></div>
-                    <div class="text">已选择 <span>{{checkedList.length}}</span> 棵树</div>
-                </div>
-                <div class="button" :class="{active:checkedList.length}">确认认养</div>
-            </div>
-        </div>
-    </floating-panel>
-</template>
-
-<script setup>
-import { FloatingPanel } from "vant";
-import { ref } from "vue";
-import { Checkbox, Stepper } from "vant";
-
-const format = (percentage) => `100/200`;
-
-const anchors = [30, Math.round(0.4 * window.innerHeight)];
-const height = ref(anchors[1]);
-
-const list = ref([
-    {
-        status: 0,
-        name: "桂味",
-        checked: false,
-        select: true,
-    },
-    {
-        status: 0,
-        name: "糯米糍",
-        checked: false,
-        select: false,
-    },
-    {
-        status: 1,
-        name: "井冈红糯",
-        checked: false,
-        select: false,
-    },
-]);
-
-const value = ref("");
-const options = [
-    {
-        value: "Option1",
-        label: "Option1",
-    },
-    {
-        value: "Option2",
-        label: "Option2",
-    }
-];
-
-const checkedList = ref([])
-const changeCheck = () => {
-    checkedList.value = list.value.filter(item =>item.checked)
-};
-
-const selectList = ref([])
-const handleItem = (index) =>{
-    list.value[index].select = !list.value[index].select
-    selectList.value = list.value.filter(item =>item.select)
-}
-
-const checked = ref(false);
-
-const stepperValue = ref(50)
-const plus = () =>{
-    console.log('12');
-}
-</script>
-
-<style lang="scss" scoped>
-.floating-panel {
-    ::v-deep {
-        .van-floating-panel__content {
-            background: #f2f3f5;
-        }
-        .van-checkbox__icon .van-icon {
-            border-color: #00bedb;
-        }
-        .van-checkbox__icon--checked .van-icon {
-            background: #00bedb;
-        }
-        .van-stepper__minus, .van-stepper__plus{
-            background: rgba(0, 190, 219, 0.2);
-            color: #00BEDB;
-        }
-        .van-stepper__input{
-            background: transparent;
-            color: #00BEDB;
-        }
-    }
-    .v-select-defalut-group {
-        border-bottom: 1px solid #f5f5f5;
-        padding: 0 12px 12px 12px;
-        background: #fff;
-        .v-select + .v-select {
-            margin-left: 4px;
-        }
-    }
-    .list {
-        width: 100%;
-        height: calc(100% - 100px);
-        overflow-y: auto;
-        .list-item {
-            padding: 12px;
-            position: relative;
-            display: flex;
-            align-items: center;
-            background: #fff;
-
-            .item-flex {
-                display: flex;
-                padding: 8px 0 8px 5px;
-                box-sizing: border-box;
-                width: 100%;
-            }
-            .img {
-                width: 68px;
-                height: 68px;
-                border-radius: 8px;
-                margin-right: 8px;
-            }
-            .defalut{
-                margin-left: 6px;
-                width: calc(100% - 24px);
-                border-radius: 8px;
-                border: 1px solid transparent;
-            }
-            .active {
-                background: rgba(0, 190, 219, 0.06);
-                border-color: rgba(0, 190, 219, 0.6);
-            }
-            .item-text {
-                color: #999999;
-                font-size: 12px;
-                line-height: 1.7;
-                .name {
-                    display: flex;
-                    align-items: center;
-                    span {
-                        font-size: 15px;
-                        color: #000;
-                        font-weight: 500;
-                        margin-right: 3px;
-                    }
-                    div {
-                        margin-left: 4px;
-                        border-radius: 4px;
-                        font-size: 12px;
-                        padding: 2px 5px;
-                        &.mark {
-                            background: rgba(50, 203, 226, 0.25);
-                            color: #00bedb;
-                        }
-                        &.age {
-                            background: rgba(255, 196, 0, 0.2);
-                            color: #f0a400;
-                        }
-                    }
-                }
-                .txt {
-                    span {
-                        color: #000;
-                    }
-                }
-                .progress {
-                    display: flex;
-                    align-items: center;
-                    .bar {
-                        width: calc(100% - 60px);
-                        ::v-deep {
-                            .el-progress__text {
-                                font-size: 12px !important;
-                                min-width: auto;
-                            }
-                        }
-                    }
-                }
-            }
-            .stepper{
-                margin-left:70px;
-                padding-bottom: 8px;
-                display: flex;
-                align-items: center;
-                .total{
-                    color: #FF6200;
-                    margin-left: 15px;
-                    span{
-                        font-size: 22px;
-                    }
-                }
-            }
-        }
-        .list-item + .list-item {
-            margin-top: 12px;
-        }
-    }
-    .footer {
-        background: #fff;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 8px 12px;
-        box-sizing: border-box;
-        .all {
-            display: flex;
-            align-items: center;
-            border: 1px solid #01bbd8;
-            border-radius: 20px;
-            color: #01bbd8;
-            padding: 8px;
-            span {
-                margin-left: 3px;
-            }
-        }
-        .footer-right {
-            display: flex;
-            align-items: center;
-            font-size: 12px;
-            .total {
-                margin-right: 12px;
-                .num{
-                    letter-spacing: 1.5px;
-                    span{
-                        color: #FF6200;
-                    }
-                    .value{
-                        font-size: 16px;
-                    }
-                }
-                .text {
-                    color: #999999;
-                    span {
-                        color: #11d9f7;
-                    }
-                }
-            }
-            .button {
-                background: #c3f1fa;
-                color: #fff;
-                font-size: 16px;
-                padding: 8px 35px;
-                border-radius: 20px;
-                &.active{
-                    background: linear-gradient(180deg,#18E0FF,#00C5E3);
-                }
-            }
-        }
-    }
-}
-</style>

src/views/old_mini/home/index.vue

@@ -6,6 +6,8 @@
         <div class="weather-mask" v-show="isExpanded"></div>
         <!-- 天气 -->
         <weather-info class="weather-info" @weatherExpanded="weatherExpanded"></weather-info>
+        <!-- 浮动面板 -->
+        <farm-floating-panel class="farm-floating-panel"></farm-floating-panel>
     </div>
 </template>
 
@@ -15,6 +17,7 @@ import { onMounted, computed, ref } from "vue";
 import { useStore } from "vuex";
 import { useRouter } from "vue-router";
 import weatherInfo from "@/components/weatherInfo.vue";
+import farmFloatingPanel from "./components/farmFloatingPanel.vue";
 const router = useRouter();
 
 const store = useStore();
@@ -57,6 +60,12 @@ const weatherExpanded = (isExpandedValue) => {
         left: 12px;
         width: calc(100% - 24px);
     }
+    .farm-floating-panel{
+        position: absolute;
+        bottom: 0;
+        left: 12px;
+        width: calc(100% - 24px);
+    }
 }
 
 </style>

src/views/old_mini/pages/introduce.vue

@@ -1,169 +0,0 @@
-<template>
-    <div class="introduce-page">
-        <div class="bg">
-            <div class="introduce-content">
-                <img class="center-img" src="@/assets/img/home/introduce.png" alt="" />
-                <img class="center-img" src="@/assets/img/home/introduce.png" alt="" />
-            </div>
-        </div>
-        <div class="main-border-btn">
-            <div class="btn-text" @click="toHome">去认养</div>
-        </div>
-    </div>
-     <!-- 邀请弹窗 -->
-    <popup class="popup" v-model:show="show" round closeable>
-        <div class="title SOURCEHANSANSCN-FONT">
-            <div class="SOURCEHANSANSCN-FONT">恭喜你</div>
-            收到一份<span> 认养邀请</span>
-        </div>
-        <div class="img">
-            <div class="name">
-                <img src="@/assets/img/home/lby-icon.png" alt="">
-                <span>荔博园</span>
-            </div>
-        </div>
-        <div class="button" @click="handleOk">立即认养</div>
-    </popup>
-</template>
-
-<script setup>
-import { useRouter } from "vue-router";
-import { ref } from "vue";
-import { Popup } from "vant";
-const router = useRouter();
-
-const show = ref(false);
-//立即认养
-const handleOk = () =>{
-    router.push('/farm')
-}
-
-
-function toHome() {
-    router.push('/home')
-}
-
-</script>
-
-<style lang="scss" scoped>
-.introduce-page {
-    position: relative;
-    height: 100vh;
-    .bg {
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: 0;
-        background-image: url("https://birdseye-img-ali-cdn.sysuimars.com/foster/detail/bg.png");
-        // background-size: 100% 100%;
-        background-size: cover;
-    }
-    .bg2 {
-        position: absolute;
-        top: 451rpx;
-        left: 30rpx;
-        z-index: 1;
-        background-image: url("https://birdseye-img-ali-cdn.sysuimars.com/foster/byl-detail/bg.png");
-        background-size: 100% 100%;
-    }
-    .introduce-content {
-        height: 100%;
-        overflow: auto;
-        padding: 0 20px;
-        box-sizing: border-box;
-        .center-img {
-            width: 100%;
-        }
-    }
-
-    .main-border-btn {
-        position: fixed;
-        bottom: 80px;
-        left: 0;
-        right: 0;
-        margin: 0 auto;
-        background: #fff;
-        border-radius: 30px;
-        padding: 1px;
-        box-sizing: border-box;
-        box-shadow: 0 2px 4px #ccc;
-        height: 49px;
-        width: 280px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        .btn-text {
-            font-size: 18px;
-            color: #fff;
-            background: linear-gradient(#18e0ff, #00c5e3);
-            width: 100%;
-            height: 100%;
-            border-radius: 30px;
-            text-align: center;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-        }
-    }
-}
-
-.popup {
-    width: 90%;
-    padding: 24px 20px;
-    background: linear-gradient(180deg, #e9fcff 0%, #fff 50%);
-    .title {
-        font-size: 24px;
-        margin-bottom: 20px;
-        text-align: center;
-        position: relative;
-        span{
-            color: #01BEDB;
-        }
-        &::before {
-            content: "";
-            position: absolute;
-            bottom: 0;
-            background: url("@/assets/img/home/popup-line.png") no-repeat center center / 100% 100%;
-            width: 97px;
-            height: 8px;
-        }
-    }
-    .img{
-        width: 100%;
-        height: 168px;
-        border-radius: 5px;
-        padding: 8px;
-        box-sizing: border-box;
-        background: url("@/assets/img/home/popup-bg.png") no-repeat center center / 100% 100%;
-        .name{
-            padding: 3px;
-            color: #fff;
-            background: rgba(0, 0, 0, 0.6);
-            border-radius: 20px;
-            width: 85px;
-            box-sizing: border-box;
-            display: flex;
-            align-items: center;
-            img{
-                width: 23px;
-                height: 23px;
-                border-radius: 50%;
-                border: 1px solid #fff;
-                margin-right: 6px;
-            }
-        }
-    }
-    .button {
-        margin-top: 20px;
-        background: linear-gradient(0deg, #18e0ff, #00c5e3);
-        border-radius: 30px;
-        font-size: 18px;
-        padding: 11px;
-        box-sizing: border-box;
-        text-align: center;
-        color: #fff;
-        font-weight: 500;
-    }
-}
-</style>