diff --git a/package.json b/package.json index 4bd5800..2716b4d 100644 --- a/package.json +++ b/package.json @@ -64,6 +64,7 @@ "@dcloudio/uni-stacktracey": "3.0.0-4060420250429001", "@dcloudio/vite-plugin-uni": "3.0.0-4060420250429001", "@vue/runtime-core": "^3.4.21", + "sass": "^1.89.0", "vite": "5.2.8" } } diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue index 70a5acf..c5a437a 100644 --- a/src/pages/index/index.vue +++ b/src/pages/index/index.vue @@ -1,7 +1,11 @@ @@ -10,5 +14,7 @@ onLoad(() => {}); diff --git a/src/uni.scss b/src/uni.scss index 288300d..78fed93 100644 --- a/src/uni.scss +++ b/src/uni.scss @@ -1,76 +1,103 @@ -/** - * 这里是uni-app内置的常用样式变量 - * - * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量 - * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App - * - */ +/* uniapp 全局样式 */ +$mColor: #009874; -/** - * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能 - * - * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件 - */ +/* 水平flex */ +@mixin ctf($justtify: flex-start){ + display: flex; + align-items: center; + justify-content: $justtify; +} -/* 颜色变量 */ +/* 文字样式 */ +@mixin flcw($size: 28upx, $height: 40upx, $color: #333, $weight: 400){ + font-size: $size; + line-height: $height; + color: $color; + font-weight: $weight; +} -/* 行为相关颜色 */ -$uni-color-primary: #007aff; -$uni-color-success: #4cd964; -$uni-color-warning: #f0ad4e; -$uni-color-error: #dd524d; +@mixin tHide($line: 1) { + display: -webkit-box; + word-break: break-all; + text-overflow: ellipsis; + overflow: hidden; + -webkit-box-orient: vertical; + -webkit-line-clamp:$line; +} -/* 文字基本颜色 */ -$uni-text-color: #333; // 基本色 -$uni-text-color-inverse: #fff; // 反色 -$uni-text-color-grey: #999; // 辅助灰色，如加载更多的提示信息 -$uni-text-color-placeholder: #808080; -$uni-text-color-disable: #c0c0c0; +@mixin isPd($height: 0){ + padding-bottom: $height; + padding-bottom: calc( $height + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ + padding-bottom: calc( $height + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ +} -/* 背景颜色 */ -$uni-bg-color: #fff; -$uni-bg-color-grey: #f8f8f8; -$uni-bg-color-hover: #f1f1f1; // 点击状态颜色 -$uni-bg-color-mask: rgba(0, 0, 0, 0.4); // 遮罩颜色 +@mixin fBot{ + position: fixed; + left: 0; + bottom: 0; + width: 100%; + padding: 10upx 20upx; + @include isPd(10upx); +} -/* 边框颜色 */ -$uni-border-color: #c8c7cc; +@mixin cirBtn($color: #FF873D){ + text-align: center; + border-radius: 56upx; + background: $color; + @include flcw(32upx, 92upx, #fff, 500); +} -/* 尺寸变量 */ +@mixin clearBtn{ + margin: 0; + padding: 0; + line-height: 0; + background-color: transparent; + border-radius: 0; + &::after{ + position: unset !important; + border: unset; + } +} -/* 文字尺寸 */ -$uni-font-size-sm: 12px; -$uni-font-size-base: 14px; -$uni-font-size-lg: 16; +@mixin FixedLineBtn($color: #FF873D) { + position: fixed; + left: 0; + bottom: 0; + width: 100%; + padding-top: 18upx; + padding-bottom: 20upx; + padding-bottom: calc( 20upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ + padding-bottom: calc( 20upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ + border-top: 2upx solid #D8D8D8; + background-color: #fff; + >view{ + margin: 0 auto; + width: 702upx; + height: 88upx; + line-height: 88upx; + text-align: center; + font-size: 32upx; + border-radius: 44upx; + color: #fff; + background-color: $color; + } +} -/* 图片尺寸 */ -$uni-img-size-sm: 20px; -$uni-img-size-base: 26px; -$uni-img-size-lg: 40px; +@mixin lineBtn($color: #FF873D){ + margin: 0 auto; + width: 702upx; + text-align: center; + border-radius: 44upx; + background-color: $color; + @include flcw(32upx, 88upx, #fff, 500); +} -/* Border Radius */ -$uni-border-radius-sm: 2px; -$uni-border-radius-base: 3px; -$uni-border-radius-lg: 6px; -$uni-border-radius-circle: 50%; - -/* 水平间距 */ -$uni-spacing-row-sm: 5px; -$uni-spacing-row-base: 10px; -$uni-spacing-row-lg: 15px; - -/* 垂直间距 */ -$uni-spacing-col-sm: 4px; -$uni-spacing-col-base: 8px; -$uni-spacing-col-lg: 12px; - -/* 透明度 */ -$uni-opacity-disabled: 0.3; // 组件禁用态的透明度 - -/* 文章场景相关 */ -$uni-color-title: #2c405a; // 文章标题颜色 -$uni-font-size-title: 20px; -$uni-color-subtitle: #555; // 二级标题颜色 -$uni-font-size-subtitle: 18px; -$uni-color-paragraph: #3f536e; // 文章段落颜色 -$uni-font-size-paragraph: 15px; \ No newline at end of file +@mixin fixedMask { + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + width: 100%; + background-color: rgba(0, 0, 0, .5); +} diff --git a/src/utils/calculation.js b/src/utils/calculation.js new file mode 100644 index 0000000..2559635 --- /dev/null +++ b/src/utils/calculation.js @@ -0,0 +1,76 @@ +/** + * 加法函数 + * @param {number} arg1 数字1 + * @param {number} arg2 数字2 + * @returns {number} 返回两数相加的结果 + * */ +export function accAdd(arg1, arg2) { + var r1, r2, m, c; + try { r1 = arg1.toString().split(".")[1].length; }catch (e) { r1 = 0 }; + try { r2 = arg2.toString().split(".")[1].length }catch (e) { r2 = 0 }; + c = Math.abs(r1 - r2); + m = Math.pow(10, Math.max(r1, r2)); + if (c > 0) { + var cm = Math.pow(10, c); + if (r1 > r2) { + arg1 = Number(arg1.toString().replace(".", "")); + arg2 = Number(arg2.toString().replace(".", "")) * cm; + }else { + arg1 = Number(arg1.toString().replace(".", "")) * cm; + arg2 = Number(arg2.toString().replace(".", "")); + } + }else { + arg1 = Number(arg1.toString().replace(".", "")); + arg2 = Number(arg2.toString().replace(".", "")); + } + return (arg1 + arg2) / m; +} + +/** + * 减法函数 + * @param {number} arg1 数字1 + * @param {number} arg2 数字2 + * @returns {number} 返回两数相减的结果 + * +*/ +export function accSub(arg1, arg2) { + var r1, r2, m, n; + try { r1 = arg1.toString().split(".")[1].length }catch (e) { r1 = 0 }; + try { r2 = arg2.toString().split(".")[1].length }catch (e) { r2 = 0 }; + + m = Math.pow(10, Math.max(r1, r2)); //last modify by deeka //动态控制精度长度 + n = (r1 >= r2) ? r1 : r2; + return ((arg1 * m - arg2 * m) / m).toFixed(n); +} + +/** + * 乘法函数 + * @param {number} arg1 数字1 + * @param {number} arg2 数字2 + * @returns {number} 返回两数相乘的结果 + * +*/ +export function accMul(arg1, arg2) { + var m = 0, s1 = arg1.toString(), s2 = arg2.toString(); + try { m += s1.split(".")[1].length }catch (e) { }; + try { m += s2.split(".")[1].length }catch (e) { }; + + return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m); +} + +/** + * 除法函数 + * @param {number} arg1 数字1 + * @param {number} arg2 数字2 + * @returns {number} 返回两数相除的结果 + * +*/ +export function accDiv(arg1, arg2) { + var t1 = 0, t2 = 0, r1, r2; + try { t1 = arg1.toString().split(".")[1].length }catch (e) { } + try { t2 = arg2.toString().split(".")[1].length }catch (e) { } + + r1 = Number(arg1.toString().replace(".", "")); + r2 = Number(arg2.toString().replace(".", "")); + return (r1 / r2) * Math.pow(10, t2 - t1); +} \ No newline at end of file diff --git a/src/utils/index.js b/src/utils/index.js new file mode 100644 index 0000000..63f672b --- /dev/null +++ b/src/utils/index.js @@ -0,0 +1,81 @@ +/** + * 深拷贝 + * @param {object} obj 要拷贝的对象 + * @returns {object} 返回拷贝后的对象 +*/ +export function deepClone(obj) { + if (obj === null) return null; + if (typeof obj !== 'object') return obj; + let newObj = Array.isArray(obj) ? [] : {}; + for (let key in obj) { + if (obj.hasOwnProperty(key)) { //不遍历其原型链上的属性 + let val = obj[key]; + newObj[key] = typeof val === 'object' ? deepClone(val) : val; + } + } + return newObj; +} + + + +/** + * 节流函数 （第一次和最后一次都会执行） + * @param {function} func 回调函数 + * @param {number} delay 延迟时间 + * @returns {function} 返回客户调用函数 + * */ +export function throttle(func, delay) { + let start = 0, timer=null; + return function (...args) { + let now = Date.now(); + if (now - start < delay) { + if (timer) clearTimeout(timer); + timer = setTimeout(() => { // 保证在当前时间区间结束后，再执行一次func + start = now; + func.apply(this, args); + }, delay); + } else { + start = now; + func.apply(this, args); + } + } +} + +export function debounce(func, wait, immediate) { + let timeout, args, context, timestamp, result; + const later = function() { + // 据上一次触发时间间隔 + const last = +new Date() - timestamp; + // 上次被包装函数被调用时间间隔last小于设定时间间隔wait + if (last < wait && last > 0) { + timeout = setTimeout(later, wait - last); + } else { + timeout = null; + // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用 + if (!immediate) { + result = func.apply(context, args); + if (!timeout) context = args = null; + } + } + } + return function(...args) { + context = this; + timestamp = +new Date(); + const callNow = immediate && !timeout; + // 如果延时不存在，重新设定延时 + if (!timeout) timeout = setTimeout(later, wait); + if (callNow) { + result = func.apply(context, args); + context = args = null; + } + return result; + } +} + +export function jsonStr(data){ + return encodeURIComponent(JSON.stringify(data)) +} + +export function jsonPar(json){ + return JSON.parse(decodeURIComponent(decodeURIComponent(json))) +} \ No newline at end of file diff --git a/vite.config.js b/vite.config.js index df815a6..827bb76 100644 --- a/vite.config.js +++ b/vite.config.js @@ -17,6 +17,14 @@ export default defineConfig(({ mode = 'development' }) =>{ ], define: { __API__: JSON.stringify(env.VITE_API_BASE), + }, + // 修复控制台出现 Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0 的问题 + css: { + preprocessorOptions: { + scss: { + silenceDeprecations: ['legacy-js-api'] + } + } } } }) \ No newline at end of file