fixed

src/main.js

@@ -15,3 +15,5 @@ app.use(createPinia())
 app.use(router)
 
 app.mount('#app')
+
+

src/router/index.js

@@ -4,28 +4,22 @@ import Pure from "@/layout/Pure.vue";
 
 const router = createRouter({
     history: createWebHashHistory(import.meta.env.BASE_URL),
-    routes: [
+    routes: [{
-        {
         path: '/',
         component: Default,
-            children: [
+        children: [{
-                {
             path: '',
             name: 'home',
             component: () => import('../views/HomeView.vue')
-                },
+        }, {
-                {
             path: 'calc',
             name: 'calc',
             component: () => import('../views/CalcView.vue')
-                },
+        }, {
-                {
             path: 'webview/:page',
             component: () => import('../views/Webview.vue'),
-                },
+        }]
-            ]
+    }, {
-        },
-        {
         path: '/pure',
         name: 'pure',
         component: Pure, // 多嵌套了一层组件，方便对webview组件进行统一管理
@@ -33,9 +27,12 @@ const router = createRouter({
             path: 'cart',
             name: "cart",
             component: () => import('../views/CartView.vue')
+        }, {
+            path: 'cart_fixed',
+            name: "cart_fixed",
+            component: () => import('../views/CartViewFixed.vue')
         }],
-        }
+    }]
-    ]
 })
 
 export default router

src/router/menu.js

@@ -2,4 +2,5 @@ export default [
     {title: "首页", path: '/'},
     {title: "计算器", path: '/calc'},
     {title: "购物车", path: '/webview/cart'},
+    {title: "购物车（改）", path: '/webview/cart_fixed'},
 ]

src/views/CartViewFixed.vue

@@ -0,0 +1,85 @@
+<template>
+
+  <template v-for="(item,index) in data.list">
+    <card
+        :num="item.num"
+        :price="item.price"
+        :desc="item.desc"
+        :title="item.title"
+        thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
+      <template #footer>
+        <button size="mini" @click="sub(item)">-</button>
+        <button size="mini" @click="add(item)">+</button>
+      </template>
+    </card>
+  </template>
+
+  <submit-bar :price="price*100" button-text="提交订单" @submit="onSubmit">
+    <checkbox v-model="checked">全选</checkbox>
+    <template #tip>
+      你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
+    </template>
+  </submit-bar>
+</template>
+
+<script setup>
+import {ref, reactive} from 'vue'
+import {showToast, Card, Button, Tag, SubmitBar, Checkbox, CheckboxGroup} from 'vant';
+import {onMounted, onBeforeMount, onUpdated} from "vue";
+
+const data = reactive({
+  list: []
+})
+const price = ref(0)
+const sub = (item) => {
+  if (item.num < 1) return
+  else {
+    item.num--
+    price.value -= item.price
+  }
+}
+
+const add = (item) => {
+  item.num++
+  price.value += item.price
+}
+
+onMounted(() => {
+
+  setTimeout(() => {
+    data.list = [{
+      title: "手机",
+      desc: "xxxxxxx",
+      price: 1999,
+      num: 0
+    },
+      {
+        title: "电脑",
+        desc: "xxxxxxx",
+        price: 6999,
+        num: 0
+      },
+      {
+        title: "包包",
+        desc: "xxxxxxx",
+        price: 12999,
+        num: 0
+      }]
+  }, 1200)
+  // axios.get()
+
+})
+
+onBeforeMount(() => {
+  console.log("beforeMounted")
+})
+
+const checked = ref(false)
+const onSubmit = () => showToast('点击按钮');
+const onClickLink = () => showToast('修改地址');
+
+</script>
+
+<style scoped>
+
+</style>