优化：页面设计组件px改写rpx

components/page/diyComponents/blank/index.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 辅助空白 -->
-  <view class="diy-blank" :style="{ height: `${itemStyle.height}px`, background: itemStyle.background }">
+  <view class="diy-blank" :style="{ height: `${itemStyle.height * 2}rpx`, background: itemStyle.background }">
   </view>
 </template>
 

components/page/diyComponents/coupon/index.vue

@@ -1,10 +1,10 @@
 <template>
   <!-- 优惠券组 -->
-  <view v-if="couponList.length" class="diy-coupon" :style="{ padding: `${itemStyle.paddingTop}px 0`, background: itemStyle.background }">
+  <view v-if="couponList.length" class="diy-coupon" :style="{ padding: `${itemStyle.paddingTop * 2}rpx 0`, background: itemStyle.background }">
     <scroll-view :scroll-x="true">
       <view class="coupon-wrapper">
         <view class="coupon-item" :class="{ disable: !dataItem.state.value }" v-for="(dataItem, index) in couponList" :key="index"
-          :style="{ marginRight: `${itemStyle.marginRight}px` }">
+          :style="{ marginRight: `${itemStyle.marginRight * 2}rpx` }">
           <text class="before" :style="{ background: itemStyle.background }"></text>
           <view class="left-content" :style="{ background: itemStyle.couponBgColor, color: itemStyle.couponTextColor }">
             <view class="content-top">

components/page/diyComponents/guide/index.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 辅助线 -->
-  <view class="diy-guide" :style="{ padding: `${itemStyle.paddingTop}px 0`, background: itemStyle.background }">
-    <view class="line" :style="{ borderTop: `${itemStyle.lineHeight}px ${itemStyle.lineStyle} ${itemStyle.lineColor}` }">
+  <view class="diy-guide" :style="{ padding: `${itemStyle.paddingTop * 2}rpx 0`, background: itemStyle.background }">
+    <view class="line" :style="{ borderTop: `${itemStyle.lineHeight * 2}rpx ${itemStyle.lineStyle} ${itemStyle.lineColor}` }">
     </view>
   </view>
 </template>

components/page/diyComponents/notice/index.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 店铺公告 -->
-  <view class="diy-notice" :style="{ paddingTop: `${itemStyle.paddingTop}px`, paddingBottom: `${itemStyle.paddingTop}px` }"
+  <view class="diy-notice" :style="{ paddingTop: `${itemStyle.paddingTop * 2}rpx`, paddingBottom: `${itemStyle.paddingTop * 2}rpx` }"
     @click="onLink(params.link)">
     <u-notice-bar padding="10rpx 24rpx" :volume-icon="params.showIcon" :autoplay="params.scrollable"
       :bg-color="itemStyle.background" :color="itemStyle.textColor" :list="[params.text]"></u-notice-bar>

components/page/diyComponents/richText/index.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 富文本 -->
   <view class="diy-richText"
-    :style="{ padding: `${itemStyle.paddingTop}px ${itemStyle.paddingLeft}px`, background: itemStyle.background }">
+    :style="{ padding: `${itemStyle.paddingTop * 2}rpx ${itemStyle.paddingLeft * 2}rpx`, background: itemStyle.background }">
     <mp-html :content="params.content" />
   </view>
 </template>

components/page/diyComponents/service/index.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 在线客服 -->
-  <view v-if="isShow" class="diy-service" :style="{ '--right': `${right}px`, '--bottom': `${bottom}px` }">
+  <view v-if="isShow" class="diy-service" :style="{ '--right': `${itemStyle.right * 2}rpx`, '--bottom': `${itemStyle.bottom * 2}rpx` }">
     <!-- 拨打电话 -->
     <block v-if="params.type === 'phone'">
       <view class="service-icon" @click="onMakePhoneCall">
@@ -20,7 +20,7 @@
 
 <script>
   import CustomerBtn from '@/components/customer-btn'
-  import { rpx2px } from '@/utils/util'
+  // import { rpx2px } from '@/utils/util'
   import SettingModel from '@/common/model/Setting'
 
   export default {
@@ -36,14 +36,14 @@
         isShow: false
       }
     },
-    computed: {
-      right() {
-        return rpx2px(2 * this.itemStyle.right)
-      },
-      bottom() {
-        return rpx2px(2 * this.itemStyle.bottom)
-      }
-    },
+    // computed: {
+    //   right() {
+    //     return rpx2px(2 * this.itemStyle.right)
+    //   },
+    //   bottom() {
+    //     return rpx2px(2 * this.itemStyle.bottom)
+    //   }
+    // },
     async created() {
       if (this.params.type === 'phone') {
         this.isShow = true

components/page/diyComponents/special/index.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 头条快报 -->
-  <view class="diy-special" :style="{ padding: `${itemStyle.paddingTop}px 0`, background: itemStyle.background }">
+  <view class="diy-special" :style="{ padding: `${itemStyle.paddingTop * 2}rpx 0`, background: itemStyle.background }">
     <view class="special-left" @click="handleNavMore()">
       <image class="image" mode="widthFix" :src="params.image" />
     </view>

components/page/diyComponents/video/index.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 视频组 -->
-  <view class="diy-video" :style="{ padding: `${itemStyle.paddingTop}px 0` }">
-    <video class="video" :style="{ height: `${itemStyle.height}px` }" :src="params.videoUrl" :poster="params.poster"
+  <view class="diy-video" :style="{ padding: `${itemStyle.paddingTop * 2}rpx 0` }">
+    <video class="video" :style="{ height: `${itemStyle.height * 2}rpx` }" :src="params.videoUrl" :poster="params.poster"
       :autoplay="params.autoplay == 1" controls></video>
   </view>
 </template>

components/page/diyComponents/window/index.vue

@@ -1,9 +1,9 @@
 <template>
   <!-- 图片橱窗 -->
-  <view class="diy-window" :style="{ background: itemStyle.background, padding: `${itemStyle.paddingTop}px ${itemStyle.paddingLeft}px` }">
+  <view class="diy-window" :style="{ background: itemStyle.background, padding: `${itemStyle.paddingTop * 2}rpx ${itemStyle.paddingLeft * 2}rpx` }">
     <!-- matrix -->
     <view v-if="itemStyle.layout > -1" class="data-list" :class="[`avg-sm-${itemStyle.layout}`]">
-      <view v-for="(dataItem, index) in dataList" :key="index" class="data-item" :style="{ padding: `${itemStyle.paddingTop}px ${itemStyle.paddingLeft}px` }">
+      <view v-for="(dataItem, index) in dataList" :key="index" class="data-item" :style="{ padding: `${itemStyle.paddingTop * 2}rpx ${itemStyle.paddingLeft * 2}rpx` }">
         <view class="item-image" @click="onLink(dataItem.link)">
           <image class="image" mode="widthFix" :src="dataItem.imgUrl"></image>
         </view>
@@ -11,18 +11,18 @@
     </view>
     <!-- display -->
     <view v-else class="display">
-      <view class="display-left" :style="{ padding: `${itemStyle.paddingTop}px ${itemStyle.paddingLeft}px` }">
+      <view class="display-left" :style="{ padding: `${itemStyle.paddingTop * 2}rpx ${itemStyle.paddingLeft * 2}rpx` }">
         <image class="image" @click="onLink(dataList[0].link)" :src="dataList[0].imgUrl"></image>
       </view>
       <view class="display-right">
-        <view v-if="dataList.length >= 2 " class="display-right1" :style="{ padding: `${itemStyle.paddingTop}px ${itemStyle.paddingLeft}px` }">
+        <view v-if="dataList.length >= 2 " class="display-right1" :style="{ padding: `${itemStyle.paddingTop * 2}rpx ${itemStyle.paddingLeft * 2}rpx` }">
           <image class="image" @click="onLink(dataList[1].link)" :src="dataList[1].imgUrl"></image>
         </view>
         <view class="display-right2">
-          <view v-if="dataList.length >= 3 " class="left" :style="{ padding: `${itemStyle.paddingTop}px ${itemStyle.paddingLeft}px` }">
+          <view v-if="dataList.length >= 3 " class="left" :style="{ padding: `${itemStyle.paddingTop * 2}rpx ${itemStyle.paddingLeft * 2}rpx` }">
             <image class="image" @click="onLink(dataList[2].link)" :src="dataList[2].imgUrl"></image>
           </view>
-          <view v-if="dataList.length >= 4 " class="right" :style="{ padding: `${itemStyle.paddingTop}px ${itemStyle.paddingLeft}px` }">
+          <view v-if="dataList.length >= 4 " class="right" :style="{ padding: `${itemStyle.paddingTop * 2}rpx ${itemStyle.paddingLeft * 2}rpx` }">
             <image class="image" @click="onLink(dataList[3].link)" :src="dataList[3].imgUrl"></image>
           </view>
         </view>

components/shortcut/index.vue

@@ -1,23 +1,23 @@
 <template>
-  <view class="shortcut" :style="{ '--right': `${rightPx}px`, '--bottom': `${bottomPx}px` }">
+  <view class="shortcut" :style="{ '--right': `${rightPx}rpx`, '--bottom': `${bottomPx}rpx` }">
     <!-- 首页 -->
-    <view class="nav-item" :class="[isShow ? 'show_80' : (transparent ? '' : 'hide_80')]" @click="onTargetPage(0)">
+    <view class="nav-item" :class="[isShow ? 'show_80' : (transparent ? '' : 'hide_80')]" @click="handleItem(0)">
       <text class="iconfont icon-home"></text>
     </view>
     <!-- 分类页 -->
-    <view class="nav-item" :class="[isShow ? 'show_60' : (transparent ? '' : 'hide_60')]" @click="onTargetPage(1)">
+    <view class="nav-item" :class="[isShow ? 'show_60' : (transparent ? '' : 'hide_60')]" @click="handleItem(1)">
       <text class="iconfont icon-cate"></text>
     </view>
     <!-- 购物车 -->
-    <view class="nav-item" :class="[isShow ? 'show_40' : (transparent ? '' : 'hide_40')]" @click="onTargetPage(2)">
+    <view class="nav-item" :class="[isShow ? 'show_40' : (transparent ? '' : 'hide_40')]" @click="handleItem(2)">
       <text class="iconfont icon-cart"></text>
     </view>
     <!-- 个人中心 -->
-    <view class="nav-item" :class="[isShow ? 'show_20' : (transparent ? '' : 'hide_20')]" @click="onTargetPage(3)">
+    <view class="nav-item" :class="[isShow ? 'show_20' : (transparent ? '' : 'hide_20')]" @click="handleItem(3)">
       <text class="iconfont icon-profile"></text>
     </view>
     <!-- 显示隐藏开关 -->
-    <view class="nav-item nav-item__switch" :class="{ shortcut_click_show: isShow }" @click="onToggleShow()">
+    <view class="nav-item nav-item__switch" :class="{ shortcut_click_show: isShow }" @click="handleToggleShow()">
       <text class='iconfont icon-daohang'></text>
     </view>
   </view>
@@ -27,11 +27,6 @@
   import { getTabBarLinks } from '@/core/app'
 
   export default {
-
-    /**
-     * 组件的属性列表
-     * 用于组件自定义设置
-     */
     props: {
       right: {
         type: Number,
@@ -42,7 +37,6 @@
         default: 100
       }
     },
-
     data() {
       return {
         // 弹窗显示控制
@@ -50,34 +44,17 @@
         transparent: true
       }
     },
-
-    computed: {
-      rightPx() {
-        return uni.upx2px(this.right)
-      },
-      bottomPx() {
-        return uni.upx2px(this.bottom)
-      }
-    },
-
     methods: {
 
-
-
-
-      /**
-       * 导航菜单切换事件
-       */
-      onToggleShow() {
+      // 导航菜单切换事件
+      handleToggleShow() {
         const app = this
         app.isShow = !app.isShow
         app.transparent = false
       },
 
-      /**
-       * 导航页面跳转
-       */
-      onTargetPage(index = 0) {
+      // 导航页面跳转
+      handleItem(index = 0) {
         const tabLinks = getTabBarLinks()
         this.$navTo(tabLinks[index])
       }
@@ -87,7 +64,7 @@
 </script>
 
 <style lang="scss" scoped>
-  /* 快捷导航 */
+  // 快捷导航
   .shortcut {
     position: fixed;
     right: calc(var(--window-right) + var(--right));
@@ -99,7 +76,7 @@
     border-radius: 50%;
   }
 
-  /* 导航菜单元素 */
+  // 导航菜单元素
   .nav-item {
     position: absolute;
     bottom: 0;
@@ -120,8 +97,7 @@
     font-size: 40rpx;
   }
 
-  /* 导航开关 */
-
+  // 导航开关
   .nav-item__switch {
     opacity: 1;
   }
@@ -131,8 +107,7 @@
     background: #ff5454;
   }
 
-  /* 显示动画 */
-
+  // 显示动画
   .show_80 {
     bottom: 384rpx;
     animation: show_80 0.3s forwards;
@@ -209,8 +184,7 @@
     }
   }
 
-  /* 隐藏动画 */
-
+  // 隐藏动画
   .hide_80 {
     bottom: 0;
     animation: hide_80 0.3s;
@@ -290,4 +264,4 @@
       opacity: 0;
     }
   }
-</style>
+</style>