MoeJue/douyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

商城

Browse Source
This commit is contained in:
zyronon 2023-02-15 01:40:38 +08:00
parent 90cf07a4d5
commit 9e965fa486
5 changed files with 166 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -42,9 +42,6 @@
<script crossorigin="anonymous" <script crossorigin="anonymous"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script> src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script src= "https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.js"></script>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

1
package.json
View File

@ -19,6 +19,7 @@
"swiper": "^8.4.6", "swiper": "^8.4.6",
"vconsole": "^3.15.0", "vconsole": "^3.15.0",
"vue": "3.2.45", "vue": "3.2.45",
"vue-masonry": "^0.16.0",
"vue-router": "4.0.14", "vue-router": "4.0.14",
"vue-switches": "2.0.1", "vue-switches": "2.0.1",
"vuex": "4.0.2" "vuex": "4.0.2"

72
pnpm-lock.yaml
View File

@ -18,6 +18,7 @@ specifiers:
vconsole: ^3.15.0 vconsole: ^3.15.0
vite: 4.0.4 vite: 4.0.4
vue: 3.2.45 vue: 3.2.45
vue-masonry: ^0.16.0
vue-router: 4.0.14 vue-router: 4.0.14
vue-switches: 2.0.1 vue-switches: 2.0.1
vuex: 4.0.2 vuex: 4.0.2
@ -35,6 +36,7 @@ dependencies:
swiper: 8.4.6 swiper: 8.4.6
vconsole: 3.15.0 vconsole: 3.15.0
vue: 3.2.45 vue: 3.2.45
vue-masonry: 0.16.0_vue@3.2.45
vue-router: 4.0.14_vue@3.2.45 vue-router: 4.0.14_vue@3.2.45
vue-switches: 2.0.1 vue-switches: 2.0.1
vuex: 4.0.2_vue@3.2.45 vuex: 4.0.2_vue@3.2.45
@ -946,6 +948,10 @@ packages:
dev: false dev: false
optional: true optional: true
/desandro-matches-selector/2.0.2:
resolution: {integrity: sha512-+1q0nXhdzg1IpIJdMKalUwvvskeKnYyEe3shPRwedNcWtnhEKT3ZxvFjzywHDeGcKViIxTCAoOYQWP1qD7VNyg==}
dev: false
/detect-libc/2.0.1: /detect-libc/2.0.1:
resolution: {integrity: sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w==} resolution: {integrity: sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w==}
engines: {node: '>=8'} engines: {node: '>=8'}
@ -1019,6 +1025,16 @@ packages:
/estree-walker/2.0.2: /estree-walker/2.0.2:
resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
/ev-emitter/1.1.1:
resolution: {integrity: sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q==}
dev: false
/fizzy-ui-utils/2.0.7:
resolution: {integrity: sha512-CZXDVXQ1If3/r8s0T+v+qVeMshhfcuq0rqIFgJnrtd+Bu8GmDmqMjntjUePypVtjHXKJ6V4sw9zeyox34n9aCg==}
dependencies:
desandro-matches-selector: 2.0.2
dev: false
/follow-redirects/1.15.2: /follow-redirects/1.15.2:
resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==} resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
engines: {node: '>=4.0'} engines: {node: '>=4.0'}
@ -1075,6 +1091,10 @@ packages:
engines: {node: '>=6.9.0'} engines: {node: '>=6.9.0'}
dev: true dev: true
/get-size/2.0.3:
resolution: {integrity: sha512-lXNzT/h/dTjTxRbm9BXb+SGxxzkm97h/PCIKtlN/CBCxxmkkIVV21udumMS93MuVTDX583gqc94v3RjuHmI+2Q==}
dev: false
/gl-matrix/3.4.3: /gl-matrix/3.4.3:
resolution: {integrity: sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==} resolution: {integrity: sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==}
dev: false dev: false
@ -1151,6 +1171,12 @@ packages:
dev: true dev: true
optional: true optional: true
/imagesloaded/4.1.4:
resolution: {integrity: sha512-ltiBVcYpc/TYTF5nolkMNsnREHW+ICvfQ3Yla2Sgr71YFwQ86bDwV9hgpFhFtrGPuwEx5+LqOHIrdXBdoWwwsA==}
dependencies:
ev-emitter: 1.1.1
dev: false
/inflight/1.0.6: /inflight/1.0.6:
resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==} resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
dependencies: dependencies:
@ -1261,6 +1287,13 @@ packages:
dev: false dev: false
optional: true optional: true
/masonry-layout/4.2.2:
resolution: {integrity: sha512-iGtAlrpHNyxaR19CvKC3npnEcAwszXoyJiI8ARV2ePi7fmYhIud25MHK8Zx4P0LCC4d3TNO9+rFa1KoK1OEOaA==}
dependencies:
get-size: 2.0.3
outlayer: 2.1.1
dev: false
/mime/1.6.0: /mime/1.6.0:
resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==} resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
engines: {node: '>=4'} engines: {node: '>=4'}
@ -1420,6 +1453,14 @@ packages:
dev: false dev: false
optional: true optional: true
/outlayer/2.1.1:
resolution: {integrity: sha512-+GplXsCQ3VrbGujAeHEzP9SXsBmJxzn/YdDSQZL0xqBmAWBmortu2Y9Gwdp9J0bgDQ8/YNIPMoBM13nTwZfAhw==}
dependencies:
ev-emitter: 1.1.1
fizzy-ui-utils: 2.0.7
get-size: 2.0.3
dev: false
/parse-node-version/1.0.1: /parse-node-version/1.0.1:
resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==} resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==}
engines: {node: '>= 0.10'} engines: {node: '>= 0.10'}
@ -1704,6 +1745,37 @@ packages:
fsevents: 2.3.2 fsevents: 2.3.2
dev: true dev: true
/vue-demi/0.13.11_vue@3.2.45:
resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
engines: {node: '>=12'}
hasBin: true
requiresBuild: true
peerDependencies:
'@vue/composition-api': ^1.0.0-rc.1
vue: ^3.0.0-0 || ^2.6.0
peerDependenciesMeta:
'@vue/composition-api':
optional: true
dependencies:
vue: 3.2.45
dev: false
/vue-masonry/0.16.0_vue@3.2.45:
resolution: {integrity: sha512-0Wi/BH4iYYRrAAFY/wokczz0lWWPg1vmOvFW4aC2nKybKf6kVqUvFfR9/+izDfzG657/vY+Om0gqOB5YPxPxuQ==}
peerDependencies:
'@vue/composition-api': ^1.0.0-rc.1
vue: ^2.0.0 || >=3.0.0
peerDependenciesMeta:
'@vue/composition-api':
optional: true
dependencies:
imagesloaded: 4.1.4
masonry-layout: 4.2.2
mitt: 3.0.0
vue: 3.2.45
vue-demi: 0.13.11_vue@3.2.45
dev: false
/vue-router/4.0.14_vue@3.2.45: /vue-router/4.0.14_vue@3.2.45:
resolution: {integrity: sha512-wAO6zF9zxA3u+7AkMPqw9LjoUCjSxfFvINQj3E/DceTt6uEz1XZLraDhdg2EYmvVwTBSGlLYsUw8bDmx0754Mw==} resolution: {integrity: sha512-wAO6zF9zxA3u+7AkMPqw9LjoUCjSxfFvINQj3E/DceTt6uEz1XZLraDhdg2EYmvVwTBSGlLYsUw8bDmx0754Mw==}
peerDependencies: peerDependencies:

8
src/main.js
View File

@ -9,20 +9,24 @@ import store from "./store";
import mixin from "./utils/mixin"; import mixin from "./utils/mixin";
import VueLazyload from '@jambonn/vue-lazyload' import VueLazyload from '@jambonn/vue-lazyload'
import VConsole from 'vconsole'; import VConsole from 'vconsole';
import {VueMasonryPlugin} from "vue-masonry";
// const vConsole = new VConsole(); // const vConsole = new VConsole();
const emitter = mitt()
const app = Vue.createApp(App) const app = Vue.createApp(App)
app.config.globalProperties.$api = {...api} app.config.globalProperties.$api = {...api}
app.config.globalProperties.emitter = emitter
app.config.unwrapInjectedRef = true app.config.unwrapInjectedRef = true
const loadImage = new URL('./assets/img/icon/img-loading.png', import.meta.url).href app.provide('mitt', emitter)
app.provide('mitt', mitt())
app.mixin(mixin) app.mixin(mixin)
const loadImage = new URL('./assets/img/icon/img-loading.png', import.meta.url).href
app.use(VueLazyload, { app.use(VueLazyload, {
preLoad: 1.3, preLoad: 1.3,
loading: loadImage, loading: loadImage,
attempt: 1 attempt: 1
}) })
app.use(VueMasonryPlugin)
app.use(router) app.use(router)
app.use(store) app.use(store)
app.mount('#app') app.mount('#app')

111
src/pages/slideHooks/Shop.vue
View File

@ -29,10 +29,30 @@
<div class="nav" v-for="i in 20">推荐</div> <div class="nav" v-for="i in 20">推荐</div>
</div> </div>
</div> </div>
<div class="goods-list"> <div v-masonry class="goods-list"
<div class="goods" v-for="item in state.list"> transition-duration="0s"
<!-- <img class="poster" v-lazy="Utils.$imgPreview(item.src)"/>--> item-selector=".goods">
<img class="poster" :src="Utils.$imgPreview(item.src)"/> <div v-masonry-tile class="goods" v-for="(item, index) in state.list">
<div class="card">
<!-- <img class="poster" v-lazy="Utils.$imgPreview(item.src)"/>-->
<img class="poster" :src="Utils.$imgPreview(item.src)"/>
<div class="bottom">
<div class="desc">
2022新款Apple/苹果iPhone 14 Plus手机6.7
</div>
<div class="discounts">满4减3</div>
<div class="info">
<div class="price">
￥
<div class="big">6099</div>
</div>
<div class="num">已售223件</div>
</div>
<div class="low">
近30天低价
</div>
</div>
</div>
</div> </div>
</div> </div>
</Scroll> </Scroll>
@ -45,7 +65,8 @@ import Utils from "@/utils";
import Scroll from "@/components/Scroll.vue"; import Scroll from "@/components/Scroll.vue";
const state = reactive({ const state = reactive({
list: [] list: [],
listEl: null
}) })
function loadData() { function loadData() {
@ -67,23 +88,6 @@ onMounted(() => {
} }
state.list.push(temp) state.list.push(temp)
} }
setTimeout(() => {
// var $grid = $('.goods-list').imagesLoaded( function() {
// // init Isotope after all images have loaded
// $grid.isotope({
// itemSelector: '.goods',
// });
// });
let $grid = $('.goods-list').isotope({
// options...
itemSelector: '.goods',
});
console.log('$grid', $grid)
$grid.imagesLoaded().progress(function () {
$grid.isotope('layout');
});
})
}) })
</script> </script>
@ -176,13 +180,72 @@ onMounted(() => {
} }
.goods-list { .goods-list {
.goods {
width: 50%; }
.goods {
width: 50%;
padding: 10rem;
box-sizing: border-box;
.card {
border-radius: 8rem;
overflow: hidden; overflow: hidden;
background: white;
img { img {
width: 100%; width: 100%;
} }
.bottom {
padding: 10rem;
.desc {
color: black;
font-size: 16rem;
margin-bottom: 8rem;
}
.discounts {
display: inline-block;
@c: rgb(199, 89, 106);
border: 1rem solid @c;
padding: 0 4rem;
color: @c;
font-size: 12rem;
margin-bottom: 4rem;
}
.info {
display: flex;
align-items: flex-end;
.price {
color: rgb(248, 38, 74);
display: flex;
align-items: flex-end;
font-size: 14rem;
margin-right: 5rem;
.big {
font-size: 22rem;
font-weight: bold;
transform: translateY(2rem);
}
}
.num {
color: darkgray;
font-size: 12rem;
}
}
.low {
margin-top: 2rem;
color: rgb(230, 153, 92);
}
}
} }
} }
} }