aidlab/lanecarford_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branches 'master' and 'master' of https://gitee.com/lvYeJu/lane-crawford-3

Browse Source
This commit is contained in:
zhangyh
2025-10-16 17:09:12 +08:00
parent 3256c6ba9d c560cb56e6
commit ee99f301e3
4 changed files with 117 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/FooterNavigation.vue
View File

@@ -27,7 +27,7 @@
.catch(() => {})
}
const navs = [
{ label: 'Home', icon: 'home', size: 73, path: '/welcome', on: onHome },
{ label: 'Home', icon: 'home', size: 73, path: '/stylist/customer', on: onHome },
{ label: 'Library', icon: 'library', size: 53, path: '/workshop/library' },
{ label: 'Profile', icon: 'profile', size: 55, path: '' }
]

50
src/components/MyList.vue Normal file
View File

@@ -0,0 +1,50 @@
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
const props = defineProps({
loading: { default: false, type: Boolean },
finish: { default: false, type: Boolean },
pel: { default: () => {}, type: Function }
})
const emit = defineEmits(['load'])
const el = ref()
const placeholder = ref()
const observer = ref()
onMounted(() => {
observer.value = new IntersectionObserver(
(entries, observer) => {
if (!entries[0].intersectionRatio || props.loading || props.finish) return
emit('load')
},
{ root: props.pel() || el.value }
).observe(placeholder.value)
})
onBeforeUnmount(() => {
observer.value?.disconnect()
})
</script>
<template>
<div class="my-list" ref="el">
<slot></slot>
<div class="footer">
<p v-show="!loading" class="placeholder" ref="placeholder"></p>
<span class="loading" v-show="loading">Loading...</span>
<span class="nomore" v-show="finish">Mo more</span>
</div>
</div>
</template>
<style lang="less" scoped>
.my-list {
width: 100%;
height: 100%;
overflow-y: auto;
> .footer {
width: 100%;
font-size: 3rem;
color: #000;
text-align: center;
> .placeholder {
height: 1px;
}
}
}
</style>

62
src/views/Workshop/creation.vue
View File

@@ -1,7 +1,8 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ref, reactive, onMounted } from 'vue'
import HeaderTitle from '@/components/HeaderTitle.vue'
import FooterNavigation from '@/components/FooterNavigation.vue'
import MyList from '@/components/myList.vue'
import { useRouter } from 'vue-router'
const router = useRouter()
@@ -17,6 +18,19 @@
const onContinue = () => {
router.push({ name: 'end' })
}
const list = reactive([{},{},{},{},{},{}])
const loading = ref(false)
const finish = ref(false)
const onLoad = () => {
loading.value = true
setTimeout(() => {
list.push({},{},{},{},{},{})
loading.value = false
if (list.length >= 20) {
finish.value = true
}
}, 1500)
}
</script>
<template>
@@ -24,9 +38,11 @@
<div class="creation">
<div class="title">Your Creation</div>
<div class="list">
<div class="item" v-for="i in 10" :key="i">
<img src="@/assets/images/workshop/posture/posture_1.png" />
</div>
<my-list v-model:loading="loading" v-model:finish="finish" @load="onLoad">
<div class="item" v-for="(v,i) in list" :key="i">
<img src="@/assets/images/workshop/posture/posture_1.png" />
</div>
</my-list>
</div>
<div class="btns">
<button @click="onSave">Save</button>
@@ -57,25 +73,27 @@
}
> .list {
flex: 1;
overflow-y: auto;
padding: 0 6rem;
margin: 0 3.8rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
// justify-content: space-around;
> .item {
width: 47%;
height: 52.9rem;
overflow: hidden;
border-radius: 2rem;
background-color: #fff;
margin-bottom: 4rem;
border: 0.1rem solid #000;
> img {
width: 100%;
height: 100%;
object-fit: contain;
overflow: hidden;
> .my-list {
padding: 0 6rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
// justify-content: space-around;
.item {
width: 47%;
height: 52.9rem;
overflow: hidden;
border-radius: 2rem;
background-color: #fff;
margin-bottom: 4rem;
border: 0.1rem solid #000;
> img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
}

41
src/views/Workshop/customize.vue
View File

@@ -16,7 +16,6 @@
console.log('发送消息:', text)
}
const onLove = () => {
console.log('love')
isLoved.value = !isLoved.value
}
const onReload = () => {
@@ -25,6 +24,9 @@
const onDownload = () => {
console.log('download')
}
const onRetry = () => {
router.back()
}
const onContinue = () => {
router.push({ name: 'creation' })
}
@@ -58,7 +60,10 @@
<div @click="onDownload"><SvgIcon name="download" size="35" /></div>
</div>
</div>
<button class="continue-btn" @click="onContinue">Continue</button>
<div class="btns">
<button @click="onRetry">Re-try?</button>
<button @click="onContinue">Continue</button>
</div>
</div>
<footer-navigation />
</template>
@@ -175,19 +180,25 @@
}
}
}
> .continue-btn {
box-sizing: content-box;
font-family: satoshiRegular;
margin: 2.5rem 2.5rem 0 auto;
width: 35rem;
height: 7rem;
border-radius: 1.3rem;
background: #000;
font-weight: 400;
font-size: 4.2rem;
color: #fff;
&:active {
opacity: 0.7;
> .btns {
margin-top: 2.5rem;
width: 100%;
display: flex;
justify-content: center;
> button {
box-sizing: content-box;
font-family: satoshiRegular;
margin: 0 2rem;
width: 35rem;
height: 6rem;
border-radius: 1.3rem;
background: #000;
font-weight: 400;
font-size: 3.6rem;
color: #fff;
&:active {
opacity: 0.7;
}
}
}
}