模板更新
Showing
11 changed files
with
202 additions
and
46 deletions
src/components/demo-item/demo-item.js
0 → 100644
src/components/demo-item/demo-item.scss
0 → 100644
| 1 | .comp {} |
src/components/demo-item/demo-item.vue
0 → 100644
| ... | @@ -16,14 +16,17 @@ import { | ... | @@ -16,14 +16,17 @@ import { |
| 16 | import 'amfe-flexible/index.js' | 16 | import 'amfe-flexible/index.js' |
| 17 | import vant from '@/utils/vant-util' | 17 | import vant from '@/utils/vant-util' |
| 18 | 18 | ||
| 19 | // import '@/styles/index.scss' // global css | 19 | import '@/styles/index.scss' // global css |
| 20 | import '@/styles/fonticon.scss' // 图标字体 | 20 | import '@/styles/fonticon.scss' // 图标字体 |
| 21 | import '@/assets/fonts/font.scss' // 字体引入 | 21 | import '@/assets/fonts/font.scss' // 字体引入 |
| 22 | // import '@styles/utils.scss' /*引入公共样式*/ | 22 | // import '@styles/utils.scss' /*引入公共样式*/ |
| 23 | 23 | ||
| 24 | Vue.config.productionTip = false | 24 | Vue.config.productionTip = false |
| 25 | 25 | ||
| 26 | 26 | import { | |
| 27 | Dialog, | ||
| 28 | Toast | ||
| 29 | } from "vant"; | ||
| 27 | 30 | ||
| 28 | 31 | ||
| 29 | // 原app节点请通过 document.getElementById('app') 获取 | 32 | // 原app节点请通过 document.getElementById('app') 获取 |
| ... | @@ -88,12 +91,23 @@ Vue.config.productionTip = false | ... | @@ -88,12 +91,23 @@ Vue.config.productionTip = false |
| 88 | // } | 91 | // } |
| 89 | // initVue(); | 92 | // initVue(); |
| 90 | 93 | ||
| 94 | let util = require('@/utils/utils'); | ||
| 95 | let func = require('@/utils/func'); | ||
| 96 | |||
| 97 | // let Toast = vant.Toast; | ||
| 98 | // let Dialog = vant.Dialog; | ||
| 91 | 99 | ||
| 92 | let app = new Vue({ | 100 | let app = new Vue({ |
| 93 | router, | 101 | router, |
| 94 | store, | 102 | store, |
| 95 | data: { | 103 | data: { |
| 96 | isInit: false, | 104 | isInit: false, |
| 105 | globalData: { | ||
| 106 | ui: { | ||
| 107 | colorUI: "#409EFF", | ||
| 108 | colorDanger: "#EE0A24" | ||
| 109 | }, | ||
| 110 | }, | ||
| 97 | }, | 111 | }, |
| 98 | render: h => h(VueApp) | 112 | render: h => h(VueApp) |
| 99 | }).$mount('#app') | 113 | }).$mount('#app') |
| ... | @@ -105,4 +119,10 @@ app.get = httpGet; | ... | @@ -105,4 +119,10 @@ app.get = httpGet; |
| 105 | app.post = httpPost; | 119 | app.post = httpPost; |
| 106 | app.uploadFile = formdata; | 120 | app.uploadFile = formdata; |
| 107 | app.router = router; | 121 | app.router = router; |
| 122 | app.util = util; | ||
| 123 | app.func = func; | ||
| 124 | app.vant = { | ||
| 125 | Dialog, | ||
| 126 | Toast | ||
| 127 | } | ||
| 108 | window.app = app; | 128 | window.app = app; |
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
| ... | @@ -6,14 +6,10 @@ export default { | ... | @@ -6,14 +6,10 @@ export default { |
| 6 | }, | 6 | }, |
| 7 | components: {}, | 7 | components: {}, |
| 8 | methods: { | 8 | methods: { |
| 9 | toLottery() { | 9 | async initData() {}, |
| 10 | app.router.push({ | ||
| 11 | name: "lottery" | ||
| 12 | }); | ||
| 13 | }, | 10 | }, |
| 14 | initData() {}, | 11 | mounted() { |
| 12 | this.initData(); | ||
| 15 | }, | 13 | }, |
| 16 | mounted() {}, | 14 | created() {} |
| 17 | created() { | ||
| 18 | } | ||
| 19 | } | 15 | } |
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
| ... | @@ -6,7 +6,7 @@ | ... | @@ -6,7 +6,7 @@ |
| 6 | <div class="app__content main"> | 6 | <div class="app__content main"> |
| 7 | <div class="top-space"></div> | 7 | <div class="top-space"></div> |
| 8 | <div class="content"> | 8 | <div class="content"> |
| 9 | <div @click="toLottery">Index</div> | 9 | Index |
| 10 | </div> | 10 | </div> |
| 11 | </div> | 11 | </div> |
| 12 | </div> | 12 | </div> | ... | ... |
| ... | @@ -23,21 +23,6 @@ div { | ... | @@ -23,21 +23,6 @@ div { |
| 23 | margin: 20px; | 23 | margin: 20px; |
| 24 | } | 24 | } |
| 25 | 25 | ||
| 26 | .app__title { | ||
| 27 | font-size: $fontSize; | ||
| 28 | line-height: $fontSize + 4px; | ||
| 29 | font-weight: bold; | ||
| 30 | padding-bottom: 10px; | ||
| 31 | margin-bottom: 20px; | ||
| 32 | border-bottom: 0.5px solid #eeeeee; | ||
| 33 | } | ||
| 34 | |||
| 35 | .app__desc { | ||
| 36 | font-size: $fontSizeSmaller; | ||
| 37 | line-height: $fontSizeSmaller + 2px; | ||
| 38 | margin-bottom: 20px; | ||
| 39 | color: $colorGray; | ||
| 40 | } | ||
| 41 | 26 | ||
| 42 | .app__bgc { | 27 | .app__bgc { |
| 43 | position: fixed; | 28 | position: fixed; |
| ... | @@ -63,3 +48,16 @@ div { | ... | @@ -63,3 +48,16 @@ div { |
| 63 | .app__content { | 48 | .app__content { |
| 64 | position: relative; | 49 | position: relative; |
| 65 | } | 50 | } |
| 51 | |||
| 52 | |||
| 53 | .box { | ||
| 54 | @extend .bb; | ||
| 55 | @extend .shadow; | ||
| 56 | position: relative; | ||
| 57 | width: $contentWid; | ||
| 58 | margin: 24px auto; | ||
| 59 | position: relative; | ||
| 60 | background-color: #fff; | ||
| 61 | border-radius: 10px; | ||
| 62 | padding: 28px 24px; | ||
| 63 | } | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
| 1 | $fontSizeFix:0px; // 用于整体字号放大 | ||
| 2 | |||
| 1 | // Font 文字 | 3 | // Font 文字 |
| 2 | 4 | ||
| 3 | // 大标题 Medium 26pt 34H 500 | 5 | // 大标题 Medium 26pt 34H 500 |
| ... | @@ -7,7 +9,7 @@ $fontSizeTitleLarger: 52px; | ... | @@ -7,7 +9,7 @@ $fontSizeTitleLarger: 52px; |
| 7 | $fontSizeTitleLarge: 40px; | 9 | $fontSizeTitleLarge: 40px; |
| 8 | 10 | ||
| 9 | // 标准标题 Medium 18pt 24H 500 | 11 | // 标准标题 Medium 18pt 24H 500 |
| 10 | $fontSizeTitle: 36rpx; | 12 | $fontSizeTitle: 36px; |
| 11 | 13 | ||
| 12 | // 正文5 大部分正文文字+导航栏的文字 Regular 17pt 23H 400 | 14 | // 正文5 大部分正文文字+导航栏的文字 Regular 17pt 23H 400 |
| 13 | $fontSizeNavLarge: 34px; | 15 | $fontSizeNavLarge: 34px; |
| ... | @@ -38,7 +40,9 @@ $fontSizeData: 16px; | ... | @@ -38,7 +40,9 @@ $fontSizeData: 16px; |
| 38 | $color: #323233; // 文字色,指主文字1 | 40 | $color: #323233; // 文字色,指主文字1 |
| 39 | $colorText: #646566; // 文字色,指主文字2 | 41 | $colorText: #646566; // 文字色,指主文字2 |
| 40 | $colorLight: #969799; // 文字色,指辅助、说明文字 | 42 | $colorLight: #969799; // 文字色,指辅助、说明文字 |
| 41 | $colorTips: #969799; // 文字色,指 disable、提示文字等 | 43 | $colorDesc: #969799; // 文字色,指 disable、提示文字等 |
| 44 | $colorTips: #999; // 文字色,指 disable、提示文字等 | ||
| 45 | $colorDisable: #bbb; // 文字色,指 disable、提示文字等 | ||
| 42 | $colorBorder: #DCDEE0; // 边框、线色 | 46 | $colorBorder: #DCDEE0; // 边框、线色 |
| 43 | $colorBorderLight: #EBEDF0; // 边框、线色 | 47 | $colorBorderLight: #EBEDF0; // 边框、线色 |
| 44 | $colorBg: #F2F3F5; // 深色背景 | 48 | $colorBg: #F2F3F5; // 深色背景 |
| ... | @@ -48,11 +52,13 @@ $colorBlack: #000000; // 黑色 | ... | @@ -48,11 +52,13 @@ $colorBlack: #000000; // 黑色 |
| 48 | $colorWhite: #ffffff; // 白色 | 52 | $colorWhite: #ffffff; // 白色 |
| 49 | 53 | ||
| 50 | // 功能色 | 54 | // 功能色 |
| 55 | $colorGray: #969799; | ||
| 56 | $colorGrayLight: #C8C9CC; | ||
| 57 | |||
| 51 | $colorLink:#576B95; // 文字链颜色 | 58 | $colorLink:#576B95; // 文字链颜色 |
| 52 | $colorSuccess: #07C160; // 成功色 | 59 | $colorSuccess: #07C160; // 成功色 |
| 53 | $colorDanger: #EE0A24; // 报错色 | 60 | $colorDanger: #ee0a24; // 报错色 |
| 54 | $colorWarning: #ED6A0C; // 通知消息中的文本颜色 | 61 | $colorWarning: #ED6A0C; // 通知消息中的文本颜色 |
| 55 | $colorWarning: #FFFBE8; // 通知消息中的背景颜色 | ||
| 56 | $colorInfo: #FAAB0C; // 文字辅助颜色 | 62 | $colorInfo: #FAAB0C; // 文字辅助颜色 |
| 57 | 63 | ||
| 58 | 64 | ||
| ... | @@ -81,7 +87,9 @@ $paddingSmall: 16px; | ... | @@ -81,7 +87,9 @@ $paddingSmall: 16px; |
| 81 | $paddingSmaller: 8px; | 87 | $paddingSmaller: 8px; |
| 82 | 88 | ||
| 83 | // 页面样式 | 89 | // 页面样式 |
| 84 | $pageBottom: 160px; // 页面底部 | 90 | $pageBottomTabBar: 160px; // 页面底部 |
| 91 | $pageBottom: 40px; // 页面底部 | ||
| 92 | $popupWid: 610px; //内容宽度 (由间距为8的倍数所得) | ||
| 85 | $contentWid: 690px; //内容宽度 (由间距为8的倍数所得) | 93 | $contentWid: 690px; //内容宽度 (由间距为8的倍数所得) |
| 86 | $contentWidth: 710px; //内容宽度 (由间距为8的倍数所得) | 94 | $contentWidth: 710px; //内容宽度 (由间距为8的倍数所得) |
| 87 | $screenWidth: 750px; // 屏幕宽度 | 95 | $screenWidth: 750px; // 屏幕宽度 |
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
src/utils/func.js
0 → 100644
File mode changed
| 1 | // 正在表达式 | 1 | // 验证手机 以1开头的11位数字 |
| 2 | export const REGEXPS = { | 2 | export function checkMobile(str) { |
| 3 | "mobile": /^1\d{10}$/ | 3 | var pattern = /^1\d{10}$/; |
| 4 | return pattern.test(str); | ||
| 4 | } | 5 | } |
| 5 | 6 | ||
| 6 | // 验证手机 | 7 | |
| 7 | export function checkMobile(str) { | 8 | // 验证邮箱 |
| 8 | return REGEXPS.mobile.test(str); | 9 | export function checkEmail(email) { |
| 10 | var pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | ||
| 11 | return pattern.test(email); | ||
| 9 | } | 12 | } |
| 10 | 13 | ||
| 14 | |||
| 11 | // 判断是否微信环境 | 15 | // 判断是否微信环境 |
| 12 | export function isWeiXin() { | 16 | export function isWeiXin() { |
| 13 | var ua = window.navigator.userAgent.toLowerCase(); | 17 | var ua = window.navigator.userAgent.toLowerCase(); |
| ... | @@ -40,6 +44,107 @@ export function param2Obj(url) { | ... | @@ -40,6 +44,107 @@ export function param2Obj(url) { |
| 40 | 44 | ||
| 41 | 45 | ||
| 42 | /** | 46 | /** |
| 47 | * 分转元 | ||
| 48 | * @param {*} fen | ||
| 49 | * @returns | ||
| 50 | */ | ||
| 51 | export function regFenToYuan(fen) { | ||
| 52 | var num = fen; | ||
| 53 | num = fen * 0.01; | ||
| 54 | num += ''; | ||
| 55 | var reg = num.indexOf('.') > -1 ? /(\d{1,3})(?=(?:\d{3})+\.)/g : /(\d{1,3})(?=(?:\d{3})+$)/g; | ||
| 56 | num = num.replace(reg, '$1'); | ||
| 57 | num = toDecimal2(num) | ||
| 58 | return num | ||
| 59 | }; | ||
| 60 | |||
| 61 | /** | ||
| 62 | * 元转分 | ||
| 63 | * @param {*} yuan | ||
| 64 | * @param {*} digit | ||
| 65 | * @returns | ||
| 66 | */ | ||
| 67 | export function regYuanToFen(yuan, digit = 100) { | ||
| 68 | var m = 0, | ||
| 69 | s1 = yuan.toString(), | ||
| 70 | s2 = digit.toString(); | ||
| 71 | try { | ||
| 72 | m += s1.split(".")[1].length | ||
| 73 | } catch (e) {} | ||
| 74 | try { | ||
| 75 | m += s2.split(".")[1].length | ||
| 76 | } catch (e) {} | ||
| 77 | return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m) | ||
| 78 | } | ||
| 79 | |||
| 80 | |||
| 81 | /** | ||
| 82 | * 强制保留2位小数,如:2,会在2后面补上00.即2.00 | ||
| 83 | * @param {*} x | ||
| 84 | * @returns | ||
| 85 | */ | ||
| 86 | export function toDecimal2(x) { | ||
| 87 | var f = parseFloat(x); | ||
| 88 | if (isNaN(f)) { | ||
| 89 | return false; | ||
| 90 | } | ||
| 91 | var f = Math.round(x * 100) / 100; | ||
| 92 | var s = f.toString(); | ||
| 93 | var rs = s.indexOf('.'); | ||
| 94 | if (rs < 0) { | ||
| 95 | rs = s.length; | ||
| 96 | s += '.'; | ||
| 97 | } | ||
| 98 | while (s.length <= rs + 2) { | ||
| 99 | s += '0'; | ||
| 100 | } | ||
| 101 | return s; | ||
| 102 | } | ||
| 103 | |||
| 104 | // 格式化星期几 | ||
| 105 | export function formatWeek(week) { | ||
| 106 | let result = ""; | ||
| 107 | switch (week) { | ||
| 108 | case 1: | ||
| 109 | result = "一"; | ||
| 110 | break; | ||
| 111 | case 2: | ||
| 112 | result = "二"; | ||
| 113 | break; | ||
| 114 | case 3: | ||
| 115 | result = "三"; | ||
| 116 | break; | ||
| 117 | case 4: | ||
| 118 | result = "四"; | ||
| 119 | break; | ||
| 120 | case 5: | ||
| 121 | result = "五"; | ||
| 122 | break; | ||
| 123 | case 6: | ||
| 124 | result = "六"; | ||
| 125 | break; | ||
| 126 | case 0: | ||
| 127 | result = "日"; | ||
| 128 | break; | ||
| 129 | |||
| 130 | default: | ||
| 131 | break; | ||
| 132 | } | ||
| 133 | return result; | ||
| 134 | } | ||
| 135 | |||
| 136 | // 数组去重 | ||
| 137 | export function uniqueArr(arr, key) { | ||
| 138 | let obj = {}; | ||
| 139 | let newArr = arr.reduce((cur, next) => { | ||
| 140 | obj[next[key]] ? "" : obj[next[key]] = true && cur.push(next); | ||
| 141 | return cur; | ||
| 142 | }, []) | ||
| 143 | return newArr | ||
| 144 | } | ||
| 145 | |||
| 146 | |||
| 147 | /** | ||
| 43 | * 从数组中获取 key未value的对象 | 148 | * 从数组中获取 key未value的对象 |
| 44 | * @param {*} value | 149 | * @param {*} value |
| 45 | * @param {*} key | 150 | * @param {*} key |
| ... | @@ -211,9 +316,9 @@ export function formatDate(date, fmt) { | ... | @@ -211,9 +316,9 @@ export function formatDate(date, fmt) { |
| 211 | * @param wait 延迟执行毫秒数 | 316 | * @param wait 延迟执行毫秒数 |
| 212 | * @param immediate true 表立即执行,false 表非立即执行 | 317 | * @param immediate true 表立即执行,false 表非立即执行 |
| 213 | */ | 318 | */ |
| 214 | let debounceTimeout; | 319 | let debounceTimeout; |
| 215 | 320 | ||
| 216 | export function debounce(func, wait, immediate) { | 321 | export function debounce(func, wait, immediate) { |
| 217 | return function () { | 322 | return function () { |
| 218 | let context = this; | 323 | let context = this; |
| 219 | let args = arguments; | 324 | let args = arguments; |
| ... | @@ -231,19 +336,19 @@ export function formatDate(date, fmt) { | ... | @@ -231,19 +336,19 @@ export function formatDate(date, fmt) { |
| 231 | }, wait); | 336 | }, wait); |
| 232 | } | 337 | } |
| 233 | }(); | 338 | }(); |
| 234 | } | 339 | } |
| 235 | 340 | ||
| 236 | /** | 341 | /** |
| 237 | * @desc 函数节流 | 342 | * @desc 函数节流 |
| 238 | * @param func 函数 | 343 | * @param func 函数 |
| 239 | * @param wait 延迟执行毫秒数 | 344 | * @param wait 延迟执行毫秒数 |
| 240 | * @param type 1 表时间戳版,2 表定时器版 | 345 | * @param type 1 表时间戳版,2 表定时器版 |
| 241 | * 时间戳版的函数触发是在时间段内开始的时候,而定时器版的函数触发是在时间段内结束的时候。 | 346 | * 时间戳版的函数触发是在时间段内开始的时候,而定时器版的函数触发是在时间段内结束的时候。 |
| 242 | */ | 347 | */ |
| 243 | let throttleTimeout; | 348 | let throttleTimeout; |
| 244 | let throttlePrevious; | 349 | let throttlePrevious; |
| 245 | 350 | ||
| 246 | export function throttle(func, wait, type) { | 351 | export function throttle(func, wait, type) { |
| 247 | if (type === 1) { | 352 | if (type === 1) { |
| 248 | throttlePrevious = 0; | 353 | throttlePrevious = 0; |
| 249 | } else if (type === 2) { | 354 | } else if (type === 2) { |
| ... | @@ -268,5 +373,4 @@ export function formatDate(date, fmt) { | ... | @@ -268,5 +373,4 @@ export function formatDate(date, fmt) { |
| 268 | } | 373 | } |
| 269 | } | 374 | } |
| 270 | }(); | 375 | }(); |
| 271 | } | ||
| 272 | |||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 376 | } | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
-
Please register or sign in to post a comment