lxui-uni 0.0.2 → 0.0.4

package/theme.scss

@@ -0,0 +1,228 @@
+/*============================= 文字尺寸 =============================*/
+$font-size-20: 20rpx;
+$font-size-22: 22rpx;
+$font-size-24: 24rpx;
+$font-size-26: 26rpx;
+$font-size-28: 28rpx;
+$font-size-30: 30rpx;
+$font-size-32: 32rpx;
+$font-size-34: 34rpx;
+$font-size-36: 36rpx;
+$font-size-38: 38rpx;
+$font-size-40: 40rpx;
+// 主题颜色
+$main-color: #ff8d1a;
+
+image {
+    width: 100%;
+    height: 100%;
+}
+
+@mixin btn-line {
+    font-size: $font-size-32;
+    color: $main-color;
+    padding: 16rpx 26rpx;
+    border: 2rpx solid $main-color;
+    text-align: center;
+    border-radius: 180rpx;
+    box-sizing: border-box;
+}
+
+@mixin btn-solid {
+    font-size: $font-size-32;
+    color: #fff;
+    background-color: $main-color;
+    padding: 16rpx 26rpx;
+    border: 2rpx solid $main-color;
+    text-align: center;
+    border-radius: 8rpx;
+    box-sizing: border-box;
+}
+
+// 间隔线
+.line_box {
+    width: 100%;
+    height: 16rpx;
+    background-color: #f2f2f2;
+}
+
+
+
+// 弹框公用
+.dialog_content_lx {
+    .dialog_icon_lx {
+        margin: 0 auto;
+        width: 116rpx;
+        height: 116rpx;
+    }
+
+    .dialog_txt_lx {
+        text-align: center;
+        margin-top: 20rpx;
+        font-size: $font-size-34;
+        color: rgba(0, 0, 0, 1);
+    }
+}
+
+.dialog_sub_btns_lx {
+    padding: 0 36rpx;
+
+    .dialog_submit_btn_lx {
+        @include btn-line;
+        background-color: $main-color;
+        color: #fff;
+        margin-bottom: 20rpx;
+    }
+
+    .dialog_cancel_btn_lx {
+        @include btn-line;
+        color: rgba(128, 128, 128, 1);
+        border-color: rgba(128, 128, 128, 1);
+    }
+}
+
+// 弹框公用
+
+/*============================= 弹性盒子 =============================*/
+@mixin displayFlex($align: center, $justify: center) {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    align-items: $align;
+    justify-content: $justify;
+}
+
+@mixin alignItems($align: center) {
+    @include displayFlex($align, center);
+
+    &-start {
+        @include displayFlex($align, flex-start);
+    }
+
+    &-center {
+        @include displayFlex($align, center);
+    }
+
+    &-end {
+        @include displayFlex($align, flex-end);
+    }
+
+    &-between {
+        @include displayFlex($align, space-between);
+    }
+
+    &-around {
+        @include displayFlex($align, space-around);
+    }
+
+    &-evenly {
+        @include displayFlex($align, space-evenly);
+    }
+}
+
+.flex {
+    @include displayFlex;
+
+    &-center {
+        @include alignItems(center);
+    }
+
+    &-start {
+        @include alignItems(flex-start);
+    }
+
+    &-end {
+        @include alignItems(flex-end);
+    }
+}
+
+/* #ifdef MP-TOUTIAO */
+.row {
+    flex-direction: row;
+}
+
+.row-reverse {
+    flex-direction: row-reverse;
+}
+
+.column {
+    flex-direction: column;
+}
+
+.column-reverse {
+    flex-direction: column-reverse;
+}
+
+.wrap {
+    flex-wrap: wrap;
+}
+
+.nowrap {
+    flex-wrap: nowrap;
+}
+/* #endif */
+
+[class*="flex-"],
+[class^="flex"] {
+    &.row {
+        flex-direction: row;
+    }
+
+    &.row-reverse {
+        flex-direction: row-reverse;
+    }
+
+    &.column {
+        flex-direction: column;
+    }
+
+    &.column-reverse {
+        flex-direction: column-reverse;
+    }
+
+    &.wrap {
+        flex-wrap: wrap;
+    }
+
+    &.nowrap {
+        flex-wrap: nowrap;
+    }
+}
+
+// 生成flex1等占位
+@for $i from 1 through 5 {
+    .flex#{$i} {
+        flex: #{$i};
+    }
+}
+
+/*============================= 文字溢出 =============================*/
+
+%text-ellipsis-lint {
+    text-overflow: ellipsis;
+    white-space: normal;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.text-ellipsis {
+    --line: 1;
+    @extend %text-ellipsis-lint;
+    -webkit-line-clamp: var(--line);
+
+    &-1 {
+        @extend %text-ellipsis-lint;
+        -webkit-line-clamp: 1;
+    }
+
+    &-2 {
+        @extend %text-ellipsis-lint;
+        -webkit-line-clamp: 2;
+    }
+
+    &-3 {
+        @extend %text-ellipsis-lint;
+        -webkit-line-clamp: 3;
+    }
+}

package/types/components.d.ts

@@ -0,0 +1,23 @@
+import lxHeader from '../components/lx-header/lx-header.vue'
+import lxHello from '../components/lx-hello/lx-hello.vue'
+import lxImage from '../components/lx-image/lx-image.vue'
+import lxList from '../components/lx-list/lx-list.vue'
+import lxListState from '../components/lx-list-state/lx-list-state.vue'
+import lxOperateBottom from '../components/lx-operate-bottom/lx-operate-bottom.vue'
+import lxSubmitBtn from '../components/lx-submit-btn/lx-submit-btn.vue'
+import lxUpload from '../components/lx-upload/lx-upload.vue'
+
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        "lx-header": typeof lxHeader,
+        "lx-hello": typeof lxHello,
+        "lx-image": typeof lxImage,
+        "lx-list": typeof lxList,
+        "lx-list-state": typeof lxListState,
+        "lx-operate-bottom": typeof lxOperateBottom,
+        "lx-submit-btn": typeof lxSubmitBtn,
+        "lx-upload": typeof lxUpload,
+    }
+}
+

package/util/index.ts

@@ -0,0 +1,294 @@
+/**
+ * 公共跳转方法
+ * @author liux
+ * @date 2023-08-15 14:17
+ * @param { string } url 跳转路径
+ * @param { "navigateTo" | "redirectTo" | "reLaunch" | "switchTab" } [mode=navigateTo] 跳转模式
+ * @param { object } params 跳转传参
+ * @example
+ * goToPage({ url: 'pages/index/index', mode: 'navigateTo', params: {'id': 1} })
+ * @returns { void }
+ */
+type pageMode = 'navigateTo' | 'redirectTo' | 'reLaunch' | 'switchTab'
+
+interface goToPageInt {
+    url: string
+    mode?: pageMode
+    params?: {
+        [n: string]: string | number | boolean
+    }
+}
+
+export const goToPage = ({ url, mode = 'navigateTo', params = {} }: goToPageInt): void => {
+    if (!url || url.length === 0) {
+        throw Error('"url" is a required parameter')
+    }
+
+    const urlEncode = (params: any = {}) => {
+        const result :string[] = []
+        for (const k in params) {
+            if (!params[k]) continue
+            result.push(k + '=' + params[k])
+        }
+
+        return result.join('&')
+    }
+    // const storage = JSON.parse(uni.getStorageSync('LX_user'))
+    // const token = storage?.userInfo?.token
+    // if(!token) {
+    // 	url = 'pages/login/loginXcx'
+    // 	mode = 'navigateTo'
+    // }
+    const queryStr = !isEmpty(params) ? '?' + urlEncode(params) : ''
+    const obj = { url: `/${url}${queryStr}` }
+    console.log('obj', obj)
+    switch (mode) {
+        case 'navigateTo':
+            uni.navigateTo(obj)
+            break
+        case 'redirectTo':
+            uni.redirectTo(obj)
+            break
+        case 'reLaunch':
+            uni.reLaunch(obj)
+            break
+        case 'switchTab':
+            uni.switchTab(obj)
+            break
+        default:
+            throw Error(`${mode} does not exist`)
+    }
+}
+
+/**
+ * 判断是否为空对象
+ * @author liux
+ * @date 2023-08-15 14:17
+ * @license MIT
+ * @param {*} object 源对象
+ * @returns { boolean }
+ */
+export const isEmptyObject = (object: any): boolean => {
+    return Object.keys(object).length === 0
+}
+
+/**
+ * 判断是否为对象
+ * @author liux
+ * @date 2023-08-15 14:17
+ * @license MIT
+ * @param {*} object 源对象
+ * @returns { boolean }
+ */
+export const isObject = (object: any): boolean => {
+    return Object.prototype.toString.call(object) === '[object Object]'
+}
+
+/**
+ * 判断是否为数组
+ * @author liux
+ * @license MIT
+ * @param {*} object 源对象
+ * @returns { boolean }
+ */
+export const isArray = (object: any): boolean => {
+    return Object.prototype.toString.call(object) === '[object Array]'
+}
+
+/**
+ * 判断是否为空
+ * @author liux
+ * @license MIT
+ * @param {*} value 源对象
+ * @returns { boolean }
+ */
+export const isEmpty = (value: any): boolean => {
+    if (isArray(value)) {
+        return value.length === 0
+    }
+    if (isObject(value)) {
+        return isEmptyObject(value)
+    }
+    return !value
+}
+
+/**
+ * 格式化时间戳（多格式）
+ * @author liux
+ * @license MIT
+ * @param { number } time 长度为 10 | 13 的时间戳
+ * @param { string } [format=yyyy-MM-dd] format 转换格式
+ * @example
+ * formatTime(1691744378556, 'yyyy-MM-dd HH:mm:ss')
+ * @returns { string }
+ */
+
+export const formatTime = (time: number, format: string = 'yyyy-MM-dd HH:mm:ss'): string => {
+    const len = time.toString().trim().length
+    if (len !== 10 && len !== 13) {
+        throw Error('"time" is a error parameter')
+    }
+
+    time = len !== 13 ? time * 1000 : time
+
+    if (!time) return ''
+    const date = new Date(time)
+    const M = (date.getMonth() + 1).toString()
+    const d = date.getDate().toString()
+    const H = date.getHours().toString()
+    const m = date.getMinutes().toString()
+    const s = date.getSeconds().toString()
+    const timeObject: {
+        [n: string]: string
+    } = {
+        yyyy: date.getFullYear().toString(),
+        MM: M.padStart(2, '0'),
+        dd: d.padStart(2, '0'),
+        HH: H.padStart(2, '0'),
+        mm: m.padStart(2, '0'),
+        ss: s.padStart(2, '0'),
+        M: M,
+        d: d,
+        H: H,
+        m: m,
+        s: s
+    }
+    const reg = new RegExp(Object.keys(timeObject).join('|'), 'g')
+    const res = format.replace(reg, (k) => {
+        return timeObject[k]
+    })
+    return res
+}
+
+// 判断当前时间是否在一个时间区间内
+export const isTimeIn = (start: string, end: string) => {
+    // 获取当前时间
+    const currentTime = new Date()
+    const startArr = start.split(':').map(Number)
+    // 设置开始时间为10:00
+    const startTime = new Date()
+    startTime.setHours(startArr[0], startArr[1])
+
+    // 设置结束时间为20:00
+    const endArr = end.split(':').map(Number)
+    const endTime = new Date()
+    endTime.setHours(endArr[0], endArr[1])
+
+    // 检查当前时间是否在10:00到20:00之间
+    if (currentTime >= startTime && currentTime <= endTime) {
+        // console.log('当前时间在之间')
+    } else {
+        // console.log('当前时间不在之间')
+    }
+}
+
+/**
+ * 防抖函数
+ * @author liux
+ * @license MIT
+ * @param {function} fn
+ * @param {umber} [wait=1000] wait
+ * @returns { void }
+ */
+export const debounce = <T extends (...args: any[]) => any>(fn: T, wait: number = 1000): ((...args: Parameters<T>) => void) => {
+    let timer: number | null
+
+    return function (this: any, ...args: Parameters<T>) {
+        if (timer) clearTimeout(timer)
+
+        timer = setTimeout(() => {
+            fn.apply(this, args)
+        }, wait)
+    }
+}
+
+/**
+ * 节流函数
+ * @author liux
+ * @date 2023-08-15 14:17
+ * @license MIT
+ * @param { function } fn
+ * @param { number } [wait=1000] wait
+ */
+export const throttle = <T extends (...args: any[]) => any>(fn: T, wait: number = 1000) => {
+    let timer: number = Date.now()
+    return function (this: any, ...args: Parameters<T>) {
+        if (Date.now() - timer >= wait) {
+            fn.apply(this, args)
+            timer = Date.now()
+        }
+    }
+}
+
+/**
+ * 保存图片到本地
+ * @author liux
+ * @param { string } url 需要下载的图片
+ * @example
+ * saveImgData('/upload/images/img.png')
+ * @returns
+ */
+export const saveImgData = debounce((url: string) => {
+    uni.showLoading({ title: '图片保存中...', mask: true })
+    // 判断图片地址是否有http
+    if (url.indexOf('http') === -1) {
+        url = import.meta.env.VITE_APP_BASE_URL + url
+    }
+    uni.downloadFile({
+        url,
+        success: (res: any) => {
+            if (res.statusCode === 200) {
+                uni.saveImageToPhotosAlbum({
+                    filePath: res.tempFilePath,
+                    success: () => {
+                        uni.showToast({
+                            title: '保存成功~',
+                            icon: 'none',
+                            duration: 2000
+                        })
+                    },
+                    fail: () => {
+                        uni.showToast({
+                            title: '保存失败~',
+                            icon: 'none',
+                            duration: 2000
+                        })
+                    },
+                    complete: () => {
+                        uni.hideLoading()
+                    }
+                })
+            }
+        }
+    })
+})
+
+/**
+ * 设置剪贴板
+ * @author liux
+ * @param { string } data 需要复制的内容
+ * @example
+ * setClipboardData('123456')
+ * @returns
+ */
+export const setClipboardData = (data: string) => {
+    uni.setClipboardData({
+        data: data,
+        success: () => {
+            uni.showToast({
+                title: '复制成功',
+                icon: 'none',
+                duration: 2000
+            })
+        }
+    })
+}
+
+export default {
+    goToPage,
+    formatTime,
+    debounce,
+    throttle,
+    saveImgData,
+    setClipboardData
+}

package/util/useListLoadClass.ts

@@ -0,0 +1,143 @@
+/*
+ * @description: 分页请求
+ * @fileName: useListLoadClass.ts
+ * @author: lxx
+ * @date: 2023-07-08 08:55:52
+ * @version: V1.0.0
+ */
+import { reactive, ref, computed } from "vue"
+class LoadDataClass {
+    // 请求参数
+    static queryParams = reactive({
+        page: 1,
+        limit: 10
+    })
+    // 列表数据
+    list = ref<any[]>([])
+    total = ref(0)
+    // 前置处理方法
+    afterLoadData: Function | undefined
+    // 请求方法
+    Query: Function
+    // 加载状态参数
+    isLoading = ref(false)
+    // 无更多数据了
+    isNoData = computed(() => {
+        if (LoadDataClass.queryParams.page * LoadDataClass.queryParams.limit >= this.total.value) {
+            return true
+        } else {
+            return false
+        }
+    })
+    // 显示暂无数据
+    isEmpty = computed(() => {
+        if (this.total.value === 0) {
+            return true
+        } else {
+            return false
+        }
+    })
+
+    constructor(apiFunctions: Function, afterLoadData?: Function, options: any = {}) {
+        this.queryParamsReset()
+        this.Query = apiFunctions
+        this.afterLoadData = afterLoadData
+        // console.log('options', options)
+        // 存在额外参数拼接
+        this.setParams(options)
+    }
+    // 加载数据
+    LoadData = async () => {
+        uni.showLoading({
+            title: '加载中...'
+        })
+        this.isLoading.value = true
+        const res = await this.Query(LoadDataClass.queryParams)
+        this.afterLoadData && this.afterLoadData(res)
+        this.total.value = res.data.total
+        this.list.value = this.list.value.concat(res.data.items)
+
+        uni.hideLoading()
+        uni.stopPullDownRefresh()
+        this.isLoading.value = false
+    }
+    /**
+     * 添加额外参数刷新
+     * @param options: 参数
+     * @param isClear: 是否清空数据 false
+     */
+    setParams = (options: any, isClear: boolean = false) => {
+        if (isClear) {
+            this.queryParamsReset()
+        } else {
+            LoadDataClass.queryParams.page = 1
+        }
+        this.list.value = []
+        LoadDataClass.queryParams = Object.assign(LoadDataClass.queryParams, options)
+        // 加载数据
+        this.LoadData()
+    }
+    // 加载更多
+    LoadMore = () => {
+        if (this.isNoData.value || this.isLoading.value) return // 无数据或者加载中不进行加载
+        LoadDataClass.queryParams.page += 1
+        this.LoadData()
+    }
+    // 重置参数
+    queryParamsReset = () => {
+        LoadDataClass.queryParams = reactive({
+            page: 1,
+            limit: 10
+        })
+    }
+
+    /**
+     * 刷新
+     * @param isClear: 是否清空数据
+     */
+    ReLoad = (isClear: boolean = false) => {
+        this.isLoading.value = false
+        this.list.value = []
+        if (isClear) {
+            this.queryParamsReset()
+        } else {
+            LoadDataClass.queryParams.page = 1
+        }
+        this.LoadData()
+    }
+}
+/**
+ * 分页加载数据方法
+ * @param api: ListAPI 方法
+ * @param afterLoadData: res数据前置处理方法
+ * @returns
+ */
+interface LoadDataInt {
+    api: Function
+    afterLoadData?: Function
+    options?: any
+    isNeedReachBottom?: boolean
+}
+
+export function LoadData({ api, afterLoadData, options, isNeedReachBottom = true }: LoadDataInt) {
+    const data = new LoadDataClass(api, afterLoadData, options)
+
+    // 下拉加载
+    if (isNeedReachBottom) {
+        onReachBottom(() => {
+            console.log('onReachBottom')
+            data.LoadMore()
+        })
+    }
+
+    return {
+        list: data.list,
+        isLoading: data.isLoading,
+        isNoData: data.isNoData,
+        isEmpty: data.isEmpty,
+        ReLoad: data.ReLoad,
+        setParams: data.setParams,
+        LoadMore: data.LoadMore
+    }
+}
+

package/vite.config.ts

@@ -0,0 +1 @@
+{}