feat(fittingRoom): 新增试衣间功能
- 添加 fittingRoom 存储模块，用于管理试衣间状态和数据 - 实现试衣间页面布局和基础功能，包括轮播图、标签页、衣服网格等组件 - 开发选择模特和上传衣服功能 - 优化页面样式和交互
This commit is contained in:
liguigong
@@ -0,0 +1,100 @@
|
||||
export default {
|
||||
value: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
modelValue: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
tabs: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
},
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
padding: {
|
||||
type: String,
|
||||
default: '0'
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#333'
|
||||
},
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#2979ff'
|
||||
},
|
||||
fontSize: {
|
||||
type: String,
|
||||
default: '28rpx'
|
||||
},
|
||||
activeFontSize: {
|
||||
type: String,
|
||||
default: '32rpx'
|
||||
},
|
||||
bold: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
scroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '70rpx'
|
||||
},
|
||||
lineColor: {
|
||||
type: String,
|
||||
default: '#2979ff'
|
||||
},
|
||||
lineHeight: {
|
||||
type: [String, Number],
|
||||
default: '10rpx'
|
||||
},
|
||||
lineScale: {
|
||||
type: Number,
|
||||
default: 0.5
|
||||
},
|
||||
lineRadius: {
|
||||
type: String,
|
||||
default: '10rpx'
|
||||
},
|
||||
pills: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
pillsColor: {
|
||||
type: String,
|
||||
default: '#2979ff'
|
||||
},
|
||||
pillsBorderRadius: {
|
||||
type: String,
|
||||
default: '10rpx'
|
||||
},
|
||||
field: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
fixed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
paddingItem: {
|
||||
type: String,
|
||||
default: '0 22rpx'
|
||||
},
|
||||
lineAnimation: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 1993
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
/**
|
||||
* 启动一个微任务。
|
||||
*
|
||||
* 该函数旨在兼容不同环境下的微任务调度。微任务是一种在主任务（如事件循环中的回调）之后，但在下一次渲染之前执行的JavaScript任务。
|
||||
* 它们对于异步编程和性能优化非常重要。此函数尝试使用三种不同的方法来调度微任务，取决于环境的支持情况。
|
||||
*
|
||||
* @param {Function} callback - 待执行的微任务回调函数。
|
||||
*/
|
||||
export function startMicroTask(callback) {
|
||||
// 如果队列微任务是可用的，直接使用队列微任务的方法来调度回调。
|
||||
if (typeof queueMicrotask === 'function') {
|
||||
queueMicrotask(callback)
|
||||
} else if (typeof MutationObserver === 'function') {
|
||||
// 如果MutationObserver可用，使用它来创建一个微任务。
|
||||
// 这是一种旧的兼容性方法，因为MutationObserver在较早的浏览器版本中就已经支持。
|
||||
const node = document.createElement('div')
|
||||
const observer = new MutationObserver(callback)
|
||||
observer.observe(node, { childList: true })
|
||||
node.textContent = 'xfjpeter'
|
||||
} else {
|
||||
// 如果以上两种方法都不可用，退回到使用setTimeout来模拟微任务。
|
||||
// 这是最后的选择，因为setTimeout不是真正的微任务，但它可以在不支持微任务的环境中提供类似的功能。
|
||||
setTimeout(callback, 0)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 函数节流器。
|
||||
* 通过限制函数调用的频率，防止在高频率事件（如窗口滚动或鼠标移动）中过多调用给定的函数，从而优化性能。
|
||||
*
|
||||
* @param {Function} fn 要节流的函数。
|
||||
* @param {number} delay 延迟的毫秒数，在这段时间内只能调用一次给定的函数。
|
||||
* @returns {Function} 返回一个新的节流函数，它将控制原始函数的调用频率。
|
||||
*/
|
||||
/**
|
||||
* 函数节流器
|
||||
* @param {Function} fn 要节流的函数
|
||||
* @param {number} delay 延迟的毫秒数
|
||||
* @returns {Function} 返回节流后的函数
|
||||
*/
|
||||
export function throttle(fn, delay) {
|
||||
// 用于存储定时器ID
|
||||
let timeoutId
|
||||
// 用于记录上一次函数执行的时间
|
||||
let lastExecuted = 0
|
||||
|
||||
// 返回一个节流函数
|
||||
return function () {
|
||||
// 保存当前上下文和参数
|
||||
const context = this
|
||||
const args = arguments
|
||||
// 获取当前时间
|
||||
const now = Date.now()
|
||||
// 计算剩余时间
|
||||
const remaining = delay - (now - lastExecuted)
|
||||
|
||||
// 实际执行函数的内部函数
|
||||
function execute() {
|
||||
lastExecuted = now
|
||||
// 在当前上下文中调用原始函数，并传入参数
|
||||
fn.apply(context, args)
|
||||
}
|
||||
|
||||
// 如果剩余时间小于等于0，表示可以执行函数
|
||||
if (remaining <= 0) {
|
||||
// 如果存在定时器，则清除定时器
|
||||
if (timeoutId) {
|
||||
clearTimeout(timeoutId)
|
||||
timeoutId = null
|
||||
}
|
||||
// 执行函数
|
||||
execute()
|
||||
} else {
|
||||
// 如果不存在定时器，则设置定时器
|
||||
if (!timeoutId) {
|
||||
timeoutId = setTimeout(() => {
|
||||
timeoutId = null
|
||||
// 执行函数
|
||||
execute()
|
||||
}, remaining)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 函数防抖动封装。
|
||||
* 函数防抖（debounce）是指在事件被触发n秒后，才执行回调，如果在这n秒内事件又被触发，则重新计时。
|
||||
* 主要用于限制函数调用的频率，常用于输入事件处理函数（如输入框的keyup事件）和窗口大小调整事件等。
|
||||
*
|
||||
* @param {Function} fn 需要被延迟执行的函数。
|
||||
* @param {number} delay 延迟执行的时间，单位为毫秒。
|
||||
* @returns {Function} 返回一个经过防抖动处理的函数。
|
||||
*/
|
||||
export function debounce(fn, delay) {
|
||||
// 用于存储定时器的变量
|
||||
let timer = null
|
||||
|
||||
// 返回一个封装函数
|
||||
return function () {
|
||||
// 如果定时器存在，则清除之前的定时器
|
||||
if (timer) clearTimeout(timer)
|
||||
|
||||
// 设置新的定时器，延迟执行原函数
|
||||
timer = setTimeout(() => {
|
||||
// 使用apply确保函数在正确的上下文中执行，并传递所有参数
|
||||
fn.apply(this, arguments)
|
||||
}, delay)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,296 @@
|
||||
<template>
|
||||
<view class="v-tabs">
|
||||
<scroll-view
|
||||
:id="getDomId"
|
||||
:scroll-x="scroll"
|
||||
:scroll-left="scroll ? scrollLeft : 0"
|
||||
:scroll-with-animation="scroll"
|
||||
:style="{ position: fixed ? 'fixed' : 'relative', zIndex, width: '100%' }">
|
||||
<view
|
||||
class="v-tabs__container"
|
||||
:style="{
|
||||
display: scroll ? 'inline-flex' : 'flex',
|
||||
whiteSpace: scroll ? 'nowrap' : 'normal',
|
||||
background: bgColor,
|
||||
height,
|
||||
padding
|
||||
}">
|
||||
<view
|
||||
:class="['v-tabs__container-item', { disabled: !!v.disabled }, { active: current == i }]"
|
||||
v-for="(v, i) in tabs"
|
||||
:key="i"
|
||||
:style="{
|
||||
color: current == i ? activeColor : color,
|
||||
fontSize: current == i ? fontSize : fontSize,
|
||||
fontWeight: bold && current == i ? 'bold' : '',
|
||||
justifyContent: !scroll ? 'center' : '',
|
||||
flex: scroll ? '' : 1,
|
||||
padding: paddingItem
|
||||
}"
|
||||
@click="change(i)">
|
||||
<slot :row="v" :index="i">{{ field ? v[field] : v }}</slot>
|
||||
</view>
|
||||
<template v-if="!!tabs.length">
|
||||
<view
|
||||
v-if="!pills"
|
||||
:class="['v-tabs__container-line', { animation: lineAnimation }]"
|
||||
:style="{
|
||||
background: lineColor,
|
||||
width: lineWidth + 'px',
|
||||
height: lineHeight,
|
||||
borderRadius: lineRadius,
|
||||
transform: `translate3d(${lineLeft}px, 0, 0)`
|
||||
}" />
|
||||
<view
|
||||
v-else
|
||||
:class="['v-tabs__container-pills', { animation: lineAnimation }]"
|
||||
:style="{
|
||||
background: pillsColor,
|
||||
borderRadius: pillsBorderRadius,
|
||||
width: currentWidth + 'px',
|
||||
transform: `translate3d(${pillsLeft}px, 0, 0)`,
|
||||
height
|
||||
}" />
|
||||
</template>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- fixed 的站位高度 -->
|
||||
<view class="v-tabs__placeholder" :style="{ height: fixed ? height : '0', padding }"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { startMicroTask, throttle } from './utils'
|
||||
import props from './props'
|
||||
/**
|
||||
* v-tabs
|
||||
* @property {Number} value 选中的下标
|
||||
* @property {Array} tabs tabs 列表
|
||||
* @property {String} bgColor = '#fff' 背景颜色
|
||||
* @property {String} color = '#333' 默认颜色
|
||||
* @property {String} activeColor = '#2979ff' 选中文字颜色
|
||||
* @property {String} fontSize = '28rpx' 默认文字大小
|
||||
* @property {String} activeFontSize = '28rpx' 选中文字大小
|
||||
* @property {Boolean} bold = [true | false] 选中文字是否加粗
|
||||
* @property {Boolean} scroll = [true | false] 是否滚动
|
||||
* @property {String} height = '60rpx' tab 的高度
|
||||
* @property {String} lineHeight = '10rpx' 下划线的高度
|
||||
* @property {String} lineColor = '#2979ff' 下划线的颜色
|
||||
* @property {Number} lineScale = 0.5 下划线的宽度缩放比例
|
||||
* @property {String} lineRadius = '10rpx' 下划线圆角
|
||||
* @property {Boolean} pills = [true | false] 是否胶囊样式
|
||||
* @property {String} pillsColor = '#2979ff' 胶囊背景色
|
||||
* @property {String} pillsBorderRadius = '10rpx' 胶囊圆角大小
|
||||
* @property {String} field 如果是对象，显示的键名
|
||||
* @property {Boolean} fixed = [true | false] 是否固定
|
||||
* @property {String} paddingItem = '0 22rpx' 选项的边距
|
||||
* @property {Boolean} lineAnimation = [true | false] 下划线是否有动画
|
||||
* @property {Number} zIndex = 1993 默认层级
|
||||
*
|
||||
* @event {Function(current)} change 改变标签触发
|
||||
*/
|
||||
export default {
|
||||
name: 'VTabs',
|
||||
props,
|
||||
// #ifdef VUE3
|
||||
emits: ['update:modelValue', 'change'],
|
||||
// #endif
|
||||
data() {
|
||||
return {
|
||||
lineWidth: 30,
|
||||
currentWidth: 0, // 当前选项的宽度
|
||||
lineLeft: 0, // 滑块距离左侧的位置
|
||||
pillsLeft: 0, // 胶囊距离左侧的位置
|
||||
scrollLeft: 0, // 距离左边的位置
|
||||
container: { width: 0, height: 0, left: 0, right: 0 }, // 容器的宽高，左右距离
|
||||
current: 0, // 当前选中项
|
||||
scrollWidth: 0 // 可以滚动的宽度
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getDomId() {
|
||||
const len = 16
|
||||
const $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
|
||||
const maxPos = $chars.length
|
||||
let pwd = ''
|
||||
for (let i = 0; i < len; i++) {
|
||||
pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
|
||||
}
|
||||
return `xfjpeter_${pwd}`
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// #ifdef VUE3
|
||||
modelValue: {
|
||||
// #endif
|
||||
// #ifdef VUE2
|
||||
value: {
|
||||
// #endif
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
this.current = newVal > -1 && newVal < this.tabs.length ? newVal : 0
|
||||
this.$nextTick(this.update)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 切换事件
|
||||
change: throttle(function(index) {
|
||||
const isDisabled = !!this.tabs[index].disabled
|
||||
if (this.current !== index && !isDisabled) {
|
||||
this.current = index
|
||||
// #ifdef VUE3
|
||||
this.$emit('update:modelValue', index)
|
||||
// #endif
|
||||
// #ifdef VUE2
|
||||
this.$emit('input', index)
|
||||
// #endif
|
||||
this.$emit('change', index)
|
||||
}
|
||||
}, 300),
|
||||
createQueryHandler() {
|
||||
let query
|
||||
// #ifndef MP-ALIPAY
|
||||
query = uni.createSelectorQuery().in(this)
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
query = uni.createSelectorQuery()
|
||||
// #endif
|
||||
|
||||
return query
|
||||
},
|
||||
update() {
|
||||
const _this = this
|
||||
startMicroTask(() => {
|
||||
// 没有列表的时候，不执行
|
||||
if (!this.tabs.length) return
|
||||
_this
|
||||
.createQueryHandler()
|
||||
.select(`#${this.getDomId}`)
|
||||
.boundingClientRect(data => {
|
||||
const { width, height, left, right } = data || {}
|
||||
// 获取容器的相关属性
|
||||
this.container = { width, height, left, right: right - width }
|
||||
_this.calcScrollWidth()
|
||||
_this.setScrollLeft()
|
||||
_this.setLine()
|
||||
})
|
||||
.exec()
|
||||
})
|
||||
},
|
||||
// 计算可以滚动的宽度
|
||||
calcScrollWidth(callback) {
|
||||
const view = this.createQueryHandler().select(`#${this.getDomId}`)
|
||||
view.fields({ scrollOffset: true })
|
||||
view
|
||||
.scrollOffset(res => {
|
||||
if (typeof callback === 'function') {
|
||||
callback(res)
|
||||
} else {
|
||||
// 获取滚动条的宽度
|
||||
this.scrollWidth = res.scrollWidth
|
||||
}
|
||||
})
|
||||
.exec()
|
||||
},
|
||||
// 设置滚动条滚动的进度
|
||||
setScrollLeft() {
|
||||
this.calcScrollWidth(res => {
|
||||
// 动态读取 scrollLeft
|
||||
let scrollLeft = res.scrollLeft
|
||||
this.createQueryHandler()
|
||||
.select(`#${this.getDomId} .v-tabs__container-item.active`)
|
||||
.boundingClientRect(data => {
|
||||
if (!data) return
|
||||
// 除开当前选项外容器的一半宽度
|
||||
let curHalfWidth = (this.container.width - data.width) / 2
|
||||
let scrollDiff = this.scrollWidth - this.container.width
|
||||
// 在原有滚动条的基础上 + (当前元素距离左侧的距离 - 计算的一半宽度) - 容器的外边距之类的
|
||||
scrollLeft += data.left - curHalfWidth - this.container.left
|
||||
// 已经滚动在左侧了
|
||||
if (scrollLeft < 0) scrollLeft = 0
|
||||
// 已经超出右侧了
|
||||
else if (scrollLeft > scrollDiff) scrollLeft = scrollDiff
|
||||
this.scrollLeft = scrollLeft
|
||||
})
|
||||
.exec()
|
||||
})
|
||||
},
|
||||
setLine() {
|
||||
this.calcScrollWidth(res => {
|
||||
const scrollLeft = res.scrollLeft
|
||||
this.createQueryHandler()
|
||||
.select(`#${this.getDomId} .v-tabs__container-item.active`)
|
||||
.boundingClientRect(data => {
|
||||
if (!data) return
|
||||
if (this.pills) {
|
||||
this.currentWidth = data.width
|
||||
this.pillsLeft = scrollLeft + data.left - this.container.left
|
||||
} else {
|
||||
this.lineWidth = data.width * this.lineScale
|
||||
this.lineLeft = scrollLeft + data.left + (data.width - data.width * this.lineScale) / 2 - this.container.left
|
||||
}
|
||||
})
|
||||
.exec()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.v-tabs {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
||||
/* #ifdef H5 */
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
&__container {
|
||||
min-width: 100%;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
&-item {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
transition: all 0.3s;
|
||||
white-space: nowrap;
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
&-line {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&-pills {
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
&-line,
|
||||
&-pills {
|
||||
&.animation {
|
||||
transition: all 0.3s linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user