mirror of
https://github.com/sunniejs/vue-h5-template.git
synced 2025-04-06 03:57:50 +08:00
feat: 完善页面
This commit is contained in:
fonghehe
parent
42e3f5d55a
commit
4b4bd9ade9
@ -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>
|
||||
|
||||
59
src/views/list/data.ts
Normal file
59
src/views/list/data.ts
Normal file
@ -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: '苏泊尔官方自营店',
|
||||
},
|
||||
];
|
||||
@ -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({
|
||||
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: '阳澄湖大闸蟹自营店>',
|
||||
});
|
||||
let details = reactive<any>({ data: {} });
|
||||
|
||||
watch(
|
||||
() => router,
|
||||
(val) => {
|
||||
details.data = detailsData.find((_item, index) => index == parseInt(val.currentRoute.value.query.id as string));
|
||||
},
|
||||
{ deep: true, immediate: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -1,31 +1,33 @@
|
||||
<template>
|
||||
<nut-card
|
||||
:img-url="state.imgUrl"
|
||||
:title="state.title"
|
||||
:price="state.price"
|
||||
:vip-price="state.vipPrice"
|
||||
:shop-name="state.shopName"
|
||||
:shopDesc="state.shopDesc"
|
||||
:delivery="state.delivery"
|
||||
@click="toDetails"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:img-url="item.imgUrl"
|
||||
:title="item.title"
|
||||
:price="item.price"
|
||||
:vip-price="item.vipPrice"
|
||||
:shop-name="item.shopName"
|
||||
: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({
|
||||
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: '阳澄湖大闸蟹自营店>',
|
||||
});
|
||||
let list = ref(listData);
|
||||
|
||||
const toDetails = () => {
|
||||
router.push('/details');
|
||||
const toDetails = (index) => {
|
||||
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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user