zm/taimed-international-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新：登录功能

Browse Source
This commit is contained in:
chenghuan
2025-11-04 12:37:04 +08:00
commit a21fb92916
897 changed files with 51500 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
uni_modules/wot-design-uni/components/wd-swiper/index.scss Normal file
View File

@@ -0,0 +1,53 @@
@import '../common/abstracts/variable';
@import '../common/abstracts/mixin';
@include b(swiper) {
position: relative;
@include e(track) {
border-radius: $-swiper-radius;
overflow: hidden;
transform: translateY(0);
}
@include e(item) {
display: flex;
align-items: center;
box-sizing: border-box;
padding: $-swiper-item-padding;
@include m(slot) {
// 问题来自 https://github.com/dcloudio/uni-app/issues/4629，支付宝小程序不支持属性选择器
/* #ifdef MP */
:deep() {
/* #ifdef MP-WEIXIN */
view:not([class]) {
width: 100%;
height: 100%;
}
/* #endif */
/* #ifndef MP-WEIXIN */
view {
width: 100%;
height: 100%;
}
/* #endif */
}
/* #endif */
}
}
@include e(image, video) {
width: 100%;
transition: all 0.3s ease;
}
@include e(text) {
// 随便搞个样式，反正用户还是会覆盖的
position: absolute;
right: 24rpx;
top: 24rpx;
color: $-swiper-item-text-color;
font-size: $-swiper-item-text-fs;
}
}

264
uni_modules/wot-design-uni/components/wd-swiper/types.ts Normal file
View File

@@ -0,0 +1,264 @@
import type { ExtractPropTypes, PropType } from 'vue'
import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
import type { SwiperNavProps } from '../wd-swiper-nav/types'
import type { ImageMode } from '../wd-img/types'
/**
* 轮播滑动方向
*/
export type DirectionType = 'horizontal' | 'vertical'
/**
* 切换动画
*/
export type EasingType = 'default' | 'linear' | 'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic'
/**
* 指示器位置
*/
export type IndicatorPositionType = 'left' | 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right' | 'right'
/**
* first：第一个滑块。
* current：实时的当前滑块。
* highest：高度最大的滑块。
* none：不根据滑块调整高度，容器高度取决于自身样式。
*/
export type AdjustHeightType = 'first' | 'current' | 'highest' | 'none'
// 资源类型
export type SwiperItemType = 'image' | 'video'
export interface SwiperList {
[key: string]: any
// 图片、视频等资源地址
value?: string
// 视频资源的封面
poster?: string
// 资源文件类型，可选值：'image' | 'video'
type?: SwiperItemType
}
export const swiperProps = {
...baseProps,
/**
* 是否自动播放轮播图
* 类型：boolean
* 默认值：true
*/
autoplay: makeBooleanProp(true),
/**
* 当前轮播在哪一项（下标）
* 类型：number
* 默认值：0
*/
current: makeNumberProp(0),
/**
* 轮播滑动方向，可选值：'horizontal'（水平）或'vertical'（垂直）
* 类型：string
* 默认值：'horizontal'
*/
direction: makeStringProp<DirectionType>('horizontal'),
/**
* 同时显示的滑块数量
* 类型：number
* 默认值：1
*/
displayMultipleItems: makeNumberProp(1),
/**
* 滑动动画时长，单位为毫秒
* 类型：number
* 默认值：300
*/
duration: makeNumberProp(300),
/**
* 指定 swiper 切换缓动动画类型
* 类型：string
* 默认值：'default'
*/
easingFunction: makeStringProp<EasingType>('default'),
/**
* 轮播的高度
* 类型：number 或 string（数字或可转换为数字的字符串）
* 默认值：'192'
*/
height: makeNumericProp('192'),
/**
* 轮播间隔时间，单位为毫秒
* 类型：number
* 默认值：5000
*/
interval: makeNumberProp(5000),
/**
* 图片列表，可以是一个图片对象数组或字符串数组
* 类型：array
* 默认值：空数组
*/
list: {
type: Array as PropType<SwiperList[] | string[]>,
default: () => []
},
/**
* 是否循环播放轮播图
* 类型：boolean
* 默认值：true
*/
loop: makeBooleanProp(true),
/**
* 视频是否循环播放
* 类型：boolean
* 默认值：true
*/
videoLoop: makeBooleanProp(true),
/**
* 视频是否静音播放
* 类型：boolean
* 默认值：true
*/
muted: makeBooleanProp(true),
/**
* 后边距
* 类型：number 或 string（数字或可转换为数字的字符串）
* 默认值：'0'
*/
nextMargin: makeNumericProp('0'),
/**
* 页码信息展示位置，可选值：'left' | 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right' | 'right'
* 类型：string
* 默认值：'bottom'
*/
indicatorPosition: makeStringProp<IndicatorPositionType>('bottom'),
/**
* 前边距
* 类型：number 或 string（数字或可转换为数字的字符串）
* 默认值：'0'
*/
previousMargin: makeNumericProp('0'),
/**
* 是否应用边距到第一个、最后一个元素
* 类型：boolean
* 默认值：false
*/
snapToEdge: makeBooleanProp(false),
/**
* 指示器全部配置，可以是布尔值或指示器配置对象
* 类型：boolean 或 object
* 默认值：true
*/
indicator: {
type: [Boolean, Object] as PropType<boolean | Partial<SwiperNavProps>>,
default: true
},
/**
* 图片裁剪、缩放的模式
* 类型：string
* 默认值：'aspectFill'
*/
imageMode: makeStringProp<ImageMode>('aspectFill'),
/**
* 选项对象中，value 对应的 key
*/
valueKey: makeStringProp('value'),
/**
* 选项对象中，标题 text 对应的 key
*/
textKey: makeStringProp('text'),
/**
* 视频是否自动播放
* 类型：boolean
* 默认值：true
*/
autoplayVideo: makeBooleanProp(true),
/**
* 切换轮播项时是否停止上一个视频的播放
* 类型：boolean
* 默认值：true
*/
stopPreviousVideo: makeBooleanProp(true),
/**
* 视频播放时是否停止自动轮播
* 类型：boolean
* 默认值：false
*/
stopAutoplayWhenVideoPlay: makeBooleanProp(false),
/**
* 自动以指定滑块的高度为整个容器的高度。当 vertical 为 true 时，默认不调整
* 仅支付宝小程序支持
* 类型：'first' | 'current' | 'highest' | 'none'
* 默认值：false
*/
adjustHeight: makeStringProp<AdjustHeightType>('highest'),
/**
* vertical 为 true 时强制使 adjust-height 生效。
* 仅支付宝小程序支持
* 类型：boolean
* 默认值：false
*/
adjustVerticalHeight: makeBooleanProp(false),
/**
* 自定义指示器类名
* 类型：string
*/
customIndicatorClass: makeStringProp(''),
/**
* 自定义图片类名
* 类型：string
*/
customImageClass: makeStringProp(''),
/**
* 自定义上一个图片类名
* 类型：string
*/
customPrevImageClass: makeStringProp(''),
/**
* 自定义下一个图片类名
* 类型：string
*/
customNextImageClass: makeStringProp(''),
/**
* 自定义swiper子项类名
* 类型：string
*/
customItemClass: makeStringProp(''),
/**
* 自定义上一个子项类名
* 类型：string
*/
customPrevClass: makeStringProp(''),
/**
* 自定义下一个子项类名
* 类型：string
*/
customNextClass: makeStringProp(''),
/**
* 自定义文字标题类名
* 类型：string
*/
customTextClass: makeStringProp(''),
/**
* 自定义文字标题样式
* 类型：string
*/
customTextStyle: makeStringProp('')
}
export type SwiperProps = ExtractPropTypes<typeof swiperProps>

318
uni_modules/wot-design-uni/components/wd-swiper/wd-swiper.vue Normal file
View File

@@ -0,0 +1,318 @@
<template>
<view :class="`wd-swiper ${customClass}`" :style="customStyle">
<!-- #ifdef MP-WEIXIN -->
<scroll-view scroll-x scroll-y style="width: 100%; height: 100%">
<!-- #endif -->
<swiper
:adjust-height="adjustHeight"
:adjust-vertical-height="adjustVerticalHeight"
class="wd-swiper__track"
:autoplay="autoplay && !videoPlaying"
:current="navCurrent"
:interval="interval"
:duration="duration"
:circular="loop"
:vertical="direction == 'vertical'"
:easing-function="easingFunction"
:previous-margin="addUnit(previousMargin)"
:next-margin="addUnit(nextMargin)"
:snap-to-edge="snapToEdge"
:display-multiple-items="displayMultipleItems"
:style="{ height: addUnit(height) }"
@change="handleChange"
@animationfinish="handleAnimationfinish"
>
<swiper-item v-for="(item, index) in list" :key="index" :class="swiperItemClass">
<slot :item="item" :index="index">
<video
v-if="isVideo(item)"
:id="`video-${index}-${uid}`"
:style="{ height: addUnit(height) }"
:src="isObj(item) ? item[valueKey] : item"
:poster="isObj(item) ? item.poster : ''"
:class="`wd-swiper__video ${customItemClass} ${getCustomItemClass(currentValue, index, list)}`"
@play="handleVideoPaly"
@pause="handleVideoPause"
:enable-progress-gesture="false"
:loop="videoLoop"
:muted="muted"
:autoplay="autoplayVideo"
objectFit="cover"
@click="handleClick(index, item)"
/>
<image
v-else
:src="isObj(item) ? item[valueKey] : item"
:class="`wd-swiper__image ${customImageClass} ${customItemClass} ${getCustomItemClass(currentValue, index, list)}`"
:style="{ height: addUnit(height) }"
:mode="imageMode"
@click="handleClick(index, item)"
/>
<text v-if="isObj(item) && item[textKey]" :class="`wd-swiper__text ${customTextClass}`" :style="customTextStyle">
{{ item[textKey] }}
</text>
</slot>
</swiper-item>
</swiper>
<!-- #ifdef MP-WEIXIN -->
</scroll-view>
<!-- #endif -->
<template v-if="indicator">
<slot name="indicator" :current="currentValue" :total="list.length"></slot>
<wd-swiper-nav
v-if="!$slots.indicator"
:custom-class="customIndicatorClass"
:type="swiperIndicator.type"
:current="swiperIndicator.current"
:total="swiperIndicator.total"
:direction="swiperIndicator.direction"
:indicator-position="swiperIndicator.indicatorPosition"
:min-show-num="swiperIndicator.minShowNum"
:show-controls="swiperIndicator.showControls"
@change="handleIndicatorChange"
/>
</template>
</view>
</template>
<script lang="ts">
export default {
name: 'wd-swiper',
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
}
</script>
<script lang="ts" setup>
import wdSwiperNav from '../wd-swiper-nav/wd-swiper-nav.vue'
import { computed, watch, ref, getCurrentInstance, useSlots } from 'vue'
import { addUnit, isObj, isImageUrl, isVideoUrl, uuid, isDef } from '../common/util'
import { swiperProps, type SwiperList } from './types'
import type { SwiperNavProps } from '../wd-swiper-nav/types'
const slots = useSlots()
const props = defineProps(swiperProps)
const emit = defineEmits(['click', 'change', 'animationfinish', 'update:current'])
const navCurrent = ref<number>(props.current) // 当前滑块 swiper使用
const currentValue = ref<number>(props.current) // 当前滑块
/**
* 更新当前滑块
* @param current 当前滑块索引
* @param force 是否强制更新swiper绑定的的current
*/
const updateCurrent = (current: number, force: boolean = false) => {
currentValue.value = current
if (force) {
navCurrent.value = current
}
emit('update:current', current)
}
const videoPlaying = ref<boolean>(false) // 当前是否在播放视频
const { proxy } = getCurrentInstance() as any
const uid = ref<string>(uuid())
watch(
() => props.current,
(val) => {
if (val < 0) {
props.loop ? goToEnd() : goToStart()
} else if (val >= props.list.length) {
props.loop ? goToStart() : goToEnd()
} else {
navTo(val)
}
}
)
const swiperItemClass = computed(() => {
return `wd-swiper__item ${slots.default ? 'wd-swiper__item--slot' : ''}`
})
const swiperIndicator = computed(() => {
const { list, direction, indicatorPosition, indicator } = props
const swiperIndicator: Partial<SwiperNavProps> = {
current: currentValue.value || 0,
total: list.length || 0,
direction: direction || 'horizontal',
indicatorPosition: indicatorPosition || 'bottom'
}
if (isObj(indicator)) {
swiperIndicator.type = indicator.type || 'dots'
swiperIndicator.minShowNum = indicator.minShowNum || 2
swiperIndicator.showControls = indicator.showControls || false
}
return swiperIndicator
})
const getMediaType = (item: string | SwiperList, type: 'video' | 'image') => {
const checkType = (url: string) => (type === 'video' ? isVideoUrl(url) : isImageUrl(url))
if (isObj(item)) {
return item.type && ['video', 'image'].includes(item.type) ? item.type === type : checkType(item[props.valueKey])
} else {
return checkType(item)
}
}
const isVideo = (item: string | SwiperList) => {
return getMediaType(item, 'video')
}
const isImage = (item: string | SwiperList) => {
return getMediaType(item, 'image')
}
function navTo(index: number) {
if (index === currentValue.value) return
updateCurrent(index, true)
}
function goToStart() {
navTo(0)
}
function goToEnd() {
navTo(props.list.length - 1)
}
// 视频播放
function handleVideoPaly() {
props.stopAutoplayWhenVideoPlay && (videoPlaying.value = true)
}
// 视频暂停
function handleVideoPause() {
videoPlaying.value = false
}
/**
* 是否为当前滑块的前一个滑块
* @param current
* @param index
* @param list
*/
function isPrev(current: number, index: number, list: string[] | SwiperList[]) {
return (current - 1 + list.length) % list.length === index
}
/**
* 是否为当前滑块的后一个滑块
* @param current
* @param index
* @param list
*/
function isNext(current: number, index: number, list: string[] | SwiperList[]) {
return (current + 1 + list.length) % list.length === index
}
function getCustomItemClass(current: number, index: number, list: string[] | SwiperList[]) {
let customItemClass: string = ''
if (isPrev(current, index, list)) {
customItemClass = props.customPrevClass || props.customPrevImageClass
}
if (isNext(current, index, list)) {
customItemClass = props.customNextClass || props.customNextImageClass
}
return customItemClass
}
/**
* 轮播滑块切换时触发
*/
function handleChange(e: { detail: { current: number; source: string } }) {
const { current, source } = e.detail
const previous = currentValue.value
emit('change', { current, source })
if (current !== currentValue.value) {
const forceUpdate = source === 'autoplay' || source === 'touch'
updateCurrent(current, forceUpdate)
}
handleVideoChange(previous, current)
}
/**
* 处理视频切换
*/
function handleVideoChange(previous: number, current: number) {
handleStopVideoPaly(previous)
handleStartVideoPaly(current)
}
/**
* 开始播放指定视频
* @param index
*/
function handleStartVideoPaly(index: number) {
if (props.autoplayVideo) {
const currentItem = props.list[index]
if (isDef(currentItem) && isVideo(currentItem)) {
const video = uni.createVideoContext(`video-${index}-${uid.value}`, proxy)
video.play()
}
}
}
/**
* 停止播放指定视频
* @param index
*/
function handleStopVideoPaly(index: number) {
if (props.stopPreviousVideo) {
const previousItem = props.list[index]
if (isDef(previousItem) && isVideo(previousItem)) {
const video = uni.createVideoContext(`video-${index}-${uid.value}`, proxy)
video.pause()
}
} else if (props.stopAutoplayWhenVideoPlay) {
handleVideoPause()
}
}
/**
* 滑块动画结束
*/
function handleAnimationfinish(e: { detail: { current: any; source: string } }) {
const { current, source } = e.detail
if (current !== currentValue.value) {
const forceUpdate = source === 'autoplay' || source === 'touch'
updateCurrent(current, forceUpdate)
}
/**
* 滑块动画结束时触发
*/
emit('animationfinish', { current, source })
}
/**
* 点击滑块事件
* @param index 点击的滑块下标
* @param item 点击的滑块内容
*/
function handleClick(index: number, item: string | SwiperList) {
emit('click', { index, item })
}
function handleIndicatorChange({ dir }: { dir: 'prev' | 'next' }) {
const { list, loop } = props
const total = list.length
let nextPos = dir === 'next' ? currentValue.value + 1 : currentValue.value - 1
if (loop) {
nextPos = dir === 'next' ? (currentValue.value + 1) % total : (currentValue.value - 1 + total) % total
} else {
nextPos = nextPos < 0 || nextPos >= total ? currentValue.value : nextPos
}
if (nextPos === currentValue.value) return
navTo(nextPos)
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>