feat: 完善页面

src/views/demo/index.vue

@@ -2,7 +2,8 @@
   <section>
     <span class="title">varlet</span>
     <var-space :size="[10, 10]" class="space">
-      <var-button>demo</var-button><var-button type="primary">主要按钮</var-button>
+      <var-button>默认按钮</var-button>
+      <var-button type="primary">主要按钮</var-button>
       <var-button type="info">信息按钮</var-button>
       <var-button type="success">成功按钮</var-button>
       <var-button type="warning">警告按钮</var-button>

src/views/list/data.ts

@@ -0,0 +1,59 @@
+export const listData = [
+  {
+    imgUrl: '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
+    title: '【活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水',
+    price: '388',
+    vipPrice: '378',
+    shopDesc: '自营',
+    delivery: '厂商配送',
+    shopName: '阳澄湖大闸蟹自营店>',
+  },
+  {
+    imgUrl: '//m.360buyimg.com/mobilecms/s240x240_jfs/t1/181328/3/31476/203233/63b66ef1F60f5f0f8/f4e8c4b6df4194d6.jpg!q70.dpg.webp',
+    title: '【礼券】湖塘烟雨 海鲜卡券海产提货礼品卡春节年夜饭年货生鲜过年海鲜礼盒大礼包8888',
+    price: '598',
+    vipPrice: '378',
+    shopDesc: '自营',
+    delivery: '厂商配送',
+    shopName: '阳澄湖大闸蟹自营店>',
+  },
+  {
+    imgUrl: '//m.360buyimg.com/mobilecms/s240x240_jfs/t1/214199/39/25134/127357/63c2b3adFed9c98f4/54126e85c23d0893.jpg!q80.dpg',
+    title: '苏泊尔（SUPOR） 电饭煲远红外加热IH本釜内胆 电饭锅4L智能预约家用煮饭锅一键柴火饭SF40HC81【送礼优选】',
+    price: '1759',
+    vipPrice: '1749',
+    shopDesc: '自营',
+    delivery: '厂商配送',
+    shopName: '苏泊尔官方自营店',
+  },
+];
+
+export const detailsData = [
+  {
+    imgUrl: '//img10.360buyimg.com/n2/s400x400_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
+    title: '【活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水',
+    price: '388',
+    vipPrice: '378',
+    shopDesc: '自营',
+    delivery: '厂商配送',
+    shopName: '阳澄湖大闸蟹自营店>',
+  },
+  {
+    imgUrl: '//m.360buyimg.com/mobilecms/s400x400_jfs/t1/181328/3/31476/203233/63b66ef1F60f5f0f8/f4e8c4b6df4194d6.jpg!q70.dpg.webp',
+    title: '【礼券】湖塘烟雨 海鲜卡券海产提货礼品卡春节年夜饭年货生鲜过年海鲜礼盒大礼包8888',
+    price: '598',
+    vipPrice: '378',
+    shopDesc: '自营',
+    delivery: '厂商配送',
+    shopName: '阳澄湖大闸蟹自营店>',
+  },
+  {
+    imgUrl: '//m.360buyimg.com/mobilecms/s400x400_jfs/t1/214199/39/25134/127357/63c2b3adFed9c98f4/54126e85c23d0893.jpg!q80.dpg',
+    title: '苏泊尔（SUPOR） 电饭煲远红外加热IH本釜内胆 电饭锅4L智能预约家用煮饭锅一键柴火饭SF40HC81【送礼优选】',
+    price: '1759',
+    vipPrice: '1749',
+    shopDesc: '自营',
+    delivery: '厂商配送',
+    shopName: '苏泊尔官方自营店',
+  },
+];

src/views/list/details/index.vue

@@ -1,34 +1,36 @@
 <template>
   <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
     <nut-swiper-item>
-      <img src="//img10.360buyimg.com/n2/s400x400_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg" alt="" />
+      <img :src="details.data.imgUrl" />
     </nut-swiper-item>
   </nut-swiper>
 
   <section class="info">
     <div>
       <span class="price">
-        ￥<em>{{ state.price }}.00</em>
+        ￥<em>{{ details.data?.price }}.00</em>
       </span>
     </div>
     <div>
-      <span>{{ state.title }}}</span>
+      <span>{{ details.data?.title }}}</span>
     </div>
   </section>
 </template>
 
 <script setup lang="ts">
+  import { detailsData } from '../data';
+  const router = useRouter();
   const page = ref(1);
 
-  let state = reactive({
+  let details = reactive<any>({ data: {} });
-    imgUrl: '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
+
-    title: '【活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水',
+  watch(
-    price: '388',
+    () => router,
-    vipPrice: '378',
+    (val) => {
-    shopDesc: '自营',
+      details.data = detailsData.find((_item, index) => index == parseInt(val.currentRoute.value.query.id as string));
-    delivery: '厂商配送',
+    },
-    shopName: '阳澄湖大闸蟹自营店>',
+    { deep: true, immediate: true },
-  });
+  );
 </script>
 
 <style lang="scss" scoped>

src/views/list/index.vue

@@ -1,31 +1,33 @@
 <template>
   <nut-card
-    :img-url="state.imgUrl"
+    v-for="(item, index) in list"
-    :title="state.title"
+    :key="index"
-    :price="state.price"
+    :img-url="item.imgUrl"
-    :vip-price="state.vipPrice"
+    :title="item.title"
-    :shop-name="state.shopName"
+    :price="item.price"
-    :shopDesc="state.shopDesc"
+    :vip-price="item.vipPrice"
-    :delivery="state.delivery"
+    :shop-name="item.shopName"
-    @click="toDetails"
+    :shopDesc="item.shopDesc"
+    :delivery="item.delivery"
+    @click="(_e) => toDetails(index)"
   />
 </template>
 
 <script lang="ts" setup name="ListPage">
-  import { reactive } from 'vue';
+  import { listData } from './data';
   const router = useRouter();
 
-  let state = reactive({
+  let list = ref(listData);
-    imgUrl: '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
-    title: '【活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水',
-    price: '388',
-    vipPrice: '378',
-    shopDesc: '自营',
-    delivery: '厂商配送',
-    shopName: '阳澄湖大闸蟹自营店>',
-  });
 
-  const toDetails = () => {
+  const toDetails = (index) => {
-    router.push('/details');
+    console.log(index);
+    router.push({ path: '/details', query: { id: index } });
   };
 </script>
+
+<style lang="scss" scoped>
+  .nut-card {
+    padding: 15px;
+    border-bottom: 1px solid #e5e5e5;
+  }
+</style>