Explorar el Código

页面UI优化

萤火科技 hace 1 año
padre
commit
037f75e524
Se han modificado 4 ficheros con 130 adiciones y 132 borrados
  1. 18 3
      core/app.js
  2. 7 17
      core/mixins/app.js
  3. 99 111
      utils/iconfont.scss
  4. 6 1
      utils/util.js

+ 18 - 3
core/app.js

@@ -10,7 +10,9 @@ export const showSuccess = (msg, callback) => {
   uni.showToast({
     title: msg,
     icon: 'success',
+    // #ifndef MP-ALIPAY
     mask: true,
+    // #endif
     duration: 1500,
     success() {
       callback && callback()
@@ -39,7 +41,9 @@ export const showToast = (msg, duration = 1500, mask = true) => {
   uni.showToast({
     title: msg, // 提示的内容
     icon: 'none',
+    // #ifndef MP-ALIPAY
     mask, // 是否显示透明蒙层,防止触摸穿透 (支付宝小程序不支持)
+    // #endif
     duration // 提示的延迟时间,单位毫秒,默认:1500	
   })
 }
@@ -92,7 +96,9 @@ export const getShareUrlParams = params => {
  * @return {object}
  */
 export const getShareParams = params => {
-  return { ...params }
+  return {
+    ...params
+  }
 }
 
 /**
@@ -231,8 +237,7 @@ export const getSceneData = query => {
  * mix: 免费版暂无该功能
  */
 export const checkModuleKey = moduleKey => {
-  // return util.inArray(moduleKey, store.getters.modules)
-  return true
+  return util.inArray(moduleKey, store.getters.modules)
 }
 
 /**
@@ -290,3 +295,13 @@ export const onLink = linkObj => {
   }
   return true
 }
+
+// style变量样式转为字符串 (因小程序端不支持styleObject语法)
+export const styleObj2Str = appTheme => {
+  let str = ''
+  for (const index in appTheme) {
+    const name = util.formatToLine(index)
+    str += `--${name}:${appTheme[index]};`
+  }
+  return str
+}

+ 7 - 17
core/mixins/app.js

@@ -1,23 +1,9 @@
 import { computed } from 'vue'
 import { useStore, mapGetters } from 'vuex'
+import { styleObj2Str } from '@/core/app'
 import store from '@/store/index'
 import platform from '@/core/platform'
 
-// 字符串驼峰转中划线
-const formatToLine = value => {
-  return value.replace(/([A-Z])/g, '-$1').toLowerCase()
-}
-
-// 主题样式 (因小程序端不支持styleObject语法,所以需要转换成字符串)
-const appTheme2Str = appTheme => {
-  let str = ''
-  for (const index in appTheme) {
-    const name = formatToLine(index)
-    str += `--${name}:${appTheme[index]};`
-  }
-  return str
-}
-
 export default {
   data() {
     return {
@@ -26,7 +12,7 @@ export default {
   },
   computed: {
     appTheme: () => store.getters.appTheme,
-    appThemeStyle: () => appTheme2Str(store.getters.appTheme)
+    appThemeStyle: () => styleObj2Str(store.getters.appTheme)
   },
   mounted() {
     // #ifdef H5
@@ -47,7 +33,11 @@ export default {
           document.body.style.setProperty('--window-top', '0px');
         }
       })
-    }
+    },
     // #endif
+    // 自定义主题样式
+    customThemeStyle(styleObj) {
+      return styleObj2Str({ ...store.getters.appTheme, ...styleObj })
+    }
   }
 }

+ 99 - 111
utils/iconfont.scss

@@ -1,382 +1,370 @@
 @font-face {
-  font-family: 'iconfont';
-  src: url('https://at.alicdn.com/t/c/font_2282770_528zm6himwn.woff2?t=1731597843561') format('woff2'),
-    url('https://at.alicdn.com/t/c/font_2282770_528zm6himwn.woff?t=1731597843561') format('woff'),
-    url('https://at.alicdn.com/t/c/font_2282770_528zm6himwn.ttf?t=1731597843561') format('truetype'),
-    url('https://at.alicdn.com/t/c/font_2282770_528zm6himwn.svg?t=1731597843561#iconfont') format('svg');
+  font-family: "iconfont"; /* Project id 2282770 */
+  src: url('https://at.alicdn.com/t/c/font_2282770_qdwmdx2z6jq.woff2?t=1742119969999') format('woff2'),
+       url('https://at.alicdn.com/t/c/font_2282770_qdwmdx2z6jq.woff?t=1742119969999') format('woff'),
+       url('https://at.alicdn.com/t/c/font_2282770_qdwmdx2z6jq.ttf?t=1742119969999') format('truetype'),
+       url('https://at.alicdn.com/t/c/font_2282770_qdwmdx2z6jq.svg?t=1742119969999#iconfont') format('svg');
 }
 
 .iconfont {
-  font-family: 'iconfont' !important;
+  font-family: "iconfont" !important;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-points-mall:before {
+  content: "\e643";
+}
+
 .icon-jiagou2:before {
-  content: '\e6df';
+  content: "\e6df";
 }
 
 .icon-jiagou1:before {
-  content: '\e690';
+  content: "\e690";
 }
 
 .icon-jiagou3:before {
-  content: '\e623';
+  content: "\e623";
 }
 
 .icon-plus:before {
-  content: '\eaf3';
+  content: "\eaf3";
 }
 
 .icon-arc:before {
-  content: '\e62e';
+  content: "\e62e";
 }
 
 .icon-share:before {
-  content: '\e6e0';
+  content: "\e6e0";
 }
 
 .icon-offline-pay:before {
-  content: '\e66d';
+  content: "\e66d";
 }
 
 .icon-collected:before {
-  content: '\e6da';
+  content: "\e6da";
 }
 
 .icon-collect:before {
-  content: '\e614';
+  content: "\e614";
 }
 
 .icon-jingli:before {
-  content: '\e6c9';
+  content: "\e6c9";
 }
 
 .icon-order-c:before {
-  content: '\e653';
+  content: "\e653";
 }
 
 .icon-shouye2:before {
-  content: '\e60d';
+  content: "\e60d";
 }
 
 .icon-youhuiquan:before {
-  content: '\e672';
-}
-
-.icon-fenxiao:before {
-  content: '\e70e';
+  content: "\e672";
 }
 
 .icon-kanjia:before {
-  content: '\e735';
+  content: "\e735";
 }
 
 .icon-pintuan:before {
-  content: '\e671';
+  content: "\e671";
 }
 
 .icon-alipay:before {
-  content: '\e6d3';
+  content: "\e6d3";
 }
 
 .icon-balance-pay:before {
-  content: '\e6d4';
+  content: "\e6d4";
 }
 
 .icon-wechat-pay:before {
-  content: '\e6d5';
+  content: "\e6d5";
 }
 
 .icon-poster:before {
-  content: '\e61a';
+  content: "\e61a";
 }
 
 .icon-weixin:before {
-  content: '\e60e';
+  content: "\e60e";
 }
 
 .icon-qzone:before {
-  content: '\e642';
+  content: "\e642";
 }
 
 .icon-link:before {
-  content: '\e613';
+  content: "\e613";
 }
 
 .icon-weibo:before {
-  content: '\e62a';
+  content: "\e62a";
 }
 
 .icon-qq:before {
-  content: '\e612';
+  content: "\e612";
 }
 
 .icon-timeline:before {
-  content: '\e812';
+  content: "\e812";
 }
 
-.icon-fenxiao1:before {
-  content: '\e606';
+.icon-fenxiao:before {
+  content: "\e606";
 }
 
 .icon-delete:before {
-  content: '\e668';
+  content: "\e668";
 }
 
 .icon-edit:before {
-  content: '\e7f8';
+  content: "\e7f8";
 }
 
 .icon-daifukuan:before {
-  content: '\e65c';
+  content: "\e65c";
 }
 
 .icon-qpdingdan:before {
-  content: '\e667';
+  content: "\e667";
 }
 
 .icon-daifahuo:before {
-  content: '\e60c';
+  content: "\e60c";
 }
 
 .icon-daishouhuo:before {
-  content: '\e771';
+  content: "\e771";
 }
 
 .icon-jifen:before {
-  content: '\e628';
+  content: "\e628";
 }
 
 .icon-shouhou:before {
-  content: '\e788';
+  content: "\e788";
 }
 
 .icon-shouhuodizhi:before {
-  content: '\e67e';
+  content: "\e67e";
 }
 
 .icon-kefu:before {
-  content: '\e654';
+  content: "\e654";
 }
 
 .icon-lingquan:before {
-  content: '\e60b';
+  content: "\e60b";
 }
 
 .icon-bangzhu:before {
-  content: '\e63a';
+  content: "\e63a";
 }
 
 .icon-bianji:before {
-  content: '\e6a4';
+  content: "\e6a4";
 }
 
 .icon-fuwu:before {
-  content: '\e732';
+  content: "\e732";
 }
 
 .icon-gouwuche:before {
-  content: '\e61b';
+  content: "\e61b";
 }
 
 .icon-view-tile:before {
-  content: '\e6c8';
+  content: "\e6c8";
 }
 
 .icon-view-list:before {
-  content: '\e637';
+  content: "\e637";
 }
 
 .icon-arrow-down:before {
-  content: '\e603';
+  content: "\e603";
 }
 
 .icon-arrow-up:before {
-  content: '\e604';
+  content: "\e604";
 }
 
 .icon-cart:before {
-  content: '\e68c';
+  content: "\e68c";
 }
 
 .icon-chaping:before {
-  content: '\e68f';
+  content: "\e68f";
 }
 
 .icon-dingwei:before {
-  content: '\e698';
-}
-
-.icon-fanhuidingbu:before {
-  content: '\e69b';
+  content: "\e698";
 }
 
 .icon-haoping:before {
-  content: '\e6a5';
+  content: "\e6a5";
 }
 
 .icon-home:before {
-  content: '\e6a6';
+  content: "\e6a6";
 }
 
 .icon-help:before {
-  content: '\e6a7';
-}
-
-.icon-iconxx:before {
-  content: '\e6ae';
+  content: "\e6a7";
 }
 
 .icon-profile:before {
-  content: '\e6b6';
+  content: "\e6b6";
 }
 
 .icon-shanchu:before {
-  content: '\e6b7';
+  content: "\e6b7";
 }
 
 .icon-search:before {
-  content: '\e6bf';
+  content: "\e6bf";
 }
 
 .icon-camera:before {
-  content: '\e6c4';
+  content: "\e6c4";
 }
 
 .icon-arrow-right:before {
-  content: '\e6cb';
-}
-
-.icon-x:before {
-  content: '\e6cc';
+  content: "\e6cb";
 }
 
 .icon-wushuju:before {
-  content: '\e6ce';
+  content: "\e6ce";
 }
 
 .icon-zhongping:before {
-  content: '\e6d9';
+  content: "\e6d9";
 }
 
 .icon-radio:before {
-  content: '\e600';
+  content: "\e600";
 }
 
 .icon-dingdan:before {
-  content: '\e60f';
+  content: "\e60f";
 }
 
 .icon-erweima:before {
-  content: '\e601';
+  content: "\e601";
 }
 
 .icon-tuandui:before {
-  content: '\e6d1';
+  content: "\e6d1";
 }
 
 .icon-zhangben:before {
-  content: '\ea2c';
+  content: "\ea2c";
 }
 
 .icon-shenhezhong:before {
-  content: '\e723';
+  content: "\e723";
 }
 
 .icon-fenxiang:before {
-  content: '\e63e';
+  content: "\e63e";
 }
 
 .icon-wenhao:before {
-  content: '\e69f';
+  content: "\e69f";
 }
 
 .icon-shibai:before {
-  content: '\e6b5';
+  content: "\e6b5";
 }
 
 .icon-success:before {
-  content: '\e644';
+  content: "\e644";
 }
 
 .icon-pintuan_huaban:before {
-  content: '\e6c3';
+  content: "\e6c3";
 }
 
 .icon-cate:before {
-  content: '\e6c7';
+  content: "\e6c7";
 }
 
 .icon-daohang:before {
-  content: '\e650';
+  content: "\e650";
 }
 
 .icon-check1:before {
-  content: '\e609';
+  content: "\e609";
 }
 
 .icon-check:before {
-  content: '\e60a';
+  content: "\e60a";
 }
 
 .icon-locate:before {
-  content: '\e652';
+  content: "\e652";
 }
 
 .icon-dianhua:before {
-  content: '\e670';
+  content: "\e670";
 }
 
 .icon-shijian:before {
-  content: '\e661';
+  content: "\e661";
 }
 
 .icon-qr-extract:before {
-  content: '\e635';
+  content: "\e635";
 }
 
 .icon-qianbao:before {
-  content: '\e632';
+  content: "\e632";
 }
 
 .icon-shangcheng:before {
-  content: '\e605';
+  content: "\e605";
 }
 
 .icon-sy-yh:before {
-  content: '\e7b1';
+  content: "\e7b1";
 }
 
 .icon-naozhong:before {
-  content: '\e76e';
+  content: "\e76e";
 }
 
 .icon-shouye:before {
-  content: '\e73d';
+  content: "\e73d";
 }
 
 .icon-kefu1:before {
-  content: '\e75c';
+  content: "\e75c";
 }
 
 .icon-artboard:before {
-  content: '\e7b5';
+  content: "\e7b5";
 }
 
 .icon-miaosha-b:before {
-  content: '\e646';
+  content: "\e646";
 }
 
 .icon-shijian-s:before {
-  content: '\e6eb';
+  content: "\e6eb";
 }
 
 .icon-shipin:before {
-  content: '\e67d';
+  content: "\e67d";
 }
 
 .icon-zhibozhong:before {
-  content: '\e837';
+  content: "\e837";
 }

+ 6 - 1
utils/util.js

@@ -226,4 +226,9 @@ export const rpx = () => {
  */
 export const rpx2px = (num) => {
   return num * rpx()
-}
+}
+
+// 字符串驼峰转中划线
+export const formatToLine = value => {
+  return value.replace(/([A-Z])/g, '-$1').toLowerCase()
+}