feat: 平台兼容性调整

feat: 兼容微信小程序 h5
2024-09-14 16:08:23 +08:00 · 2024-09-14 14:16:32 +08:00
12 changed files with 359 additions and 273 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -3,7 +3,23 @@ import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";

 onLaunch(() => {
  //隐藏官方的tabBar
-  // uni.hideTabBar();
+  // #ifdef MP-ALIPAY
+  my.hideTabBar({
+    animation: false, // 是否需要动画效果，alipay 1.95.0支持此参数
+    success: (res) => {
+      // 隐藏成功的回调
+      console.log("TabBar has been hidden", res);
+    },
+    fail: (err) => {
+      // 隐藏失败的回调
+      console.error("Failed to hide TabBar", err);
+    },
+  });
+  // #endif
+
+  // #ifndef MP-ALIPAY
+  uni.hideTabBar();
+  // #endif
 });
 onShow(() => {
  console.log("App Show");
--- a/src/components/Layout/index.vue
+++ b/src/components/Layout/index.vue
@ -16,7 +16,7 @@
    }"
    class="bottom"
  >
-    <Tabbar :select="select"/>
+    <Tabbar :select="select" />
  </view>
 </template>

@ -37,6 +37,7 @@ const navbarRect = reactive({
  layoutHeight: 0,
 });

+// #ifndef H5
 const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
 navbarRect.height = menuButtonInfo.height;
 navbarRect.top = menuButtonInfo.top;
@ -53,6 +54,7 @@ uni.getSystemInfo({
      50;
  },
 });
+// #endif
 </script>

 <style lang="scss" scoped>
@ -65,7 +67,7 @@ uni.getSystemInfo({
  background-color: bisque;
 }
 .layout {
-  background-color: #FFF;
+  background-color: #fff;
 }
 .bottom {
  position: fixed;
--- a/src/components/Tabbar/index.vue
+++ b/src/components/Tabbar/index.vue
@ -1,17 +1,22 @@
 <template>
  <!-- 工作台底部菜单 -->
  <view class="custom-tabbar">
-    <view v-for="item in state.list" :key="item.text" @click="handleClick(item)">
+    <view
+      v-for="item in state.list"
+      :key="item.text"
+      @click="handleClick(item)"
+    >
      <view>
        <image
-        :src="`${url}/static/img/tabbar/${select === item.text ? item.activeIcon : item.icon}`"
+          :src="`${url}/static/img/tabbar/${
+            select === item.text ? item.activeIcon : item.icon
+          }`"
          class="custom-img"
        ></image>
      </view>
-      <view :class="{'active': select === item.text}">
+      <view :class="{ active: select === item.text }">
        {{ item.text }}
      </view>
-     
    </view>
    <!-- <view v-for="item in state.list" :key="item.text">
      <image
@ -69,8 +74,7 @@ const handleClick = (item: tabBar) => {
 };

 onLaunch(() => {
-  //隐藏官方的tabBar
-  uni.hideTabBar();
+  
 });
 </script>

@ -79,7 +83,7 @@ onLaunch(() => {
  background: #ffffff;
  // box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 56, 93, 0.12);
  border-radius: 13rpx 13rpx 0rpx 0rpx;
-  border-top: 1px solid rgba(0,0,0,0.05);
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-around;
--- a/src/manifest.json
+++ b/src/manifest.json
@ -86,7 +86,8 @@
        "lazyCodeLoading" : "requiredComponents"
    },
    "mp-alipay" : {
-        "usingComponents" : true
+        "usingComponents" : true,
+        "styleIsolation":"apply-shared"
    },
    "mp-baidu" : {
        "usingComponents" : true
--- a/src/pages.json
+++ b/src/pages.json
@ -15,14 +15,14 @@
    {
      "path": "pagesHome/index",
      "style": {
-        "navigationStyle": "custom", // 控制头部是否显示
+        // "navigationStyle": "custom", // 控制头部是否显示
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pagesHome/profile",
      "style": {
-        "navigationStyle": "custom", // 控制头部是否显示
+        // "navigationStyle": "custom", // 控制头部是否显示
        "navigationBarTitleText": "我的"
      }
    }
@ -113,11 +113,11 @@
    "list": [
      {
        "pagePath": "pagesHome/index",
-        "text": "工作台"
+        "text": ""
      },
      {
        "pagePath": "pagesHome/profile",
-        "text": "我的"
+        "text": ""
      }
    ]
  },
--- a/src/pagesBattery/index.vue
+++ b/src/pagesBattery/index.vue
@ -2,8 +2,8 @@
  <!-- 轮播图 -->
  <CustomSwiper :list="bannerList"> </CustomSwiper>
  <!-- 入口 -->
+  <view class="entry-card">
    <uni-card
-    class="entry-card"
      :shadow="'0rpx 0rpx 10rpx 0rpx rgba(5,68,37,0.12)'"
      :padding="'20px 10px'"
      :border="false"
@ -23,9 +23,11 @@
        </view>
      </view>
    </uni-card>
+  </view>
+
  <!-- 介绍 -->
+  <view class="avatar-card">
    <uni-card
-    class="avatar-card"
      :shadow="'0rpx 0rpx 10rpx 0rpx rgba(5,68,37,0.12)'"
      :padding="'20px 10px'"
      :border="false"
@ -43,11 +45,8 @@
      <up-gap height="10" bgColor="#F8F8F8"></up-gap>
      <view class="title mt-20">回收物品</view>
      <uni-grid :column="2" :showBorder="false" :square="false">
-      <uni-grid-item
-        class="item"
-        v-for="(item, index) in serviceItemList"
-        :key="index"
-      >
+        <uni-grid-item v-for="(item, index) in serviceItemList" :key="index">
+          <view class="item">
            <uni-card
              :shadow="'0rpx 0rpx 10rpx 0rpx rgba(5,68,37,0.12)'"
              :padding="'0px'"
@ -64,6 +63,7 @@
                <text class="text">{{ item.name }}</text>
              </view>
            </uni-card>
+          </view>
        </uni-grid-item>
      </uni-grid>

@ -80,9 +80,14 @@

      <view class="other">
        <view>其他问题请咨询客服电话</view>
-      <view><text @click="callNumber('15150231777')" class="active">15150231777&nbsp;&nbsp;欢迎咨询</text></view>
+        <view
+          ><text @click="callNumber('15150231777')" class="active"
+            >15150231777&nbsp;&nbsp;欢迎咨询</text
+          ></view
+        >
      </view>
    </uni-card>
+  </view>
 </template>

 <script setup lang="ts">
@ -181,7 +186,7 @@ const handleClick = (item: any) => {
  });
 };

-const callNumber = (number) => {
+const callNumber = (number:any) => {
  // 判断是否为移动端
  if (
    uni.getSystemInfoSync().platform === "android" ||
--- a/src/pagesHome/index.vue
+++ b/src/pagesHome/index.vue
@ -3,18 +3,15 @@
    <!-- 轮播图 -->
    <CustomSwiper> </CustomSwiper>
    <!-- 入口 -->
+    <view class="entry-card">
      <uni-card
-      class="entry-card"
        :shadow="'0rpx 0rpx 10rpx 0rpx rgba(5,68,37,0.12)'"
        :padding="'20px 10px'"
        :border="false"
      >
        <uni-grid :column="3" :showBorder="false" :square="false">
-        <uni-grid-item
-          class="item"
-          v-for="(item, index) in entryItemList"
-          :key="index"
-        >
+          <uni-grid-item v-for="(item, index) in entryItemList" :key="index">
+            <view class="item">
              <view @click="handleClick(item)">
                <view>
                  <image :src="`${url}/static/img/${item.path}`"></image>
@ -23,12 +20,15 @@
                  <text class="text">{{ item.name }}</text>
                </view>
              </view>
+            </view>
          </uni-grid-item>
        </uni-grid>
      </uni-card>
+    </view>
+
    <!-- 介绍 -->
+    <view class="avatar-card">
      <uni-card
-      class="avatar-card"
        :shadow="'0rpx 0rpx 10rpx 0rpx rgba(5,68,37,0.12)'"
        :padding="'10px 10px'"
        :border="false"
@ -60,6 +60,7 @@
          style="width: 100%"
        />
      </uni-card>
+    </view>
  </Layout>
 </template>

@ -136,7 +137,7 @@ const handleClick = (item: any) => {
    padding: 0px !important;
  }
  image + image {
-    margin-top: -12rpx;
+    margin-top: -14rpx;
  }
 }
 </style>
--- a/src/pagesHome/profile.vue
+++ b/src/pagesHome/profile.vue
@ -6,7 +6,7 @@
          <image :src="`${url}/static/img/profile/user.png`" class="user"></image>
          <view>
            <view>
-              <text class="name">{{ '抖音用户' || "-" }}</text>
+              <text class="name">{{ '用户' || "-" }}</text>
            </view>
            <view>
              <text class="company">{{ '-' || "-" }}</text>
@ -65,8 +65,10 @@ const hanldeClick = (item: any) => {

 const openDoc = (item: string) => {
  //文件预览
+  const isWX = uni.getSystemInfoSync().uniPlatform === 'mp-weixin'
+  console.log(`${url}/static/${isWX && (item === '在生万有隐私政策') ? 'weixin/' : ''}${item}.docx`)
  uni.downloadFile({
-    url: `${url}/static/${item}.docx`,
+    url: `${url}/static/${isWX && (item === '在生万有隐私政策') ? 'weixin/' : ''}${item}.docx`,
    success: function (res) {
      setTimeout(
        () =>
@ -92,6 +94,25 @@ const openDoc = (item: string) => {
    },
  });
 };
+
+  //隐藏官方的tabBar
+  // #ifdef MP-ALIPAY
+  my.hideTabBar({
+    animation: false, // 是否需要动画效果，alipay 1.95.0支持此参数
+    success: (res) => {
+      // 隐藏成功的回调
+      console.log("TabBar has been hidden", res);
+    },
+    fail: (err) => {
+      // 隐藏失败的回调
+      console.error("Failed to hide TabBar", err);
+    },
+  });
+  // #endif
+
+  // #ifndef MP-ALIPAY
+  uni.hideTabBar();
+  // #endif
 </script>

 <style lang="scss" scoped>
--- a/src/pagesScrapSteel/index.vue
+++ b/src/pagesScrapSteel/index.vue
@ -2,8 +2,8 @@
  <!-- 轮播图 -->
  <CustomSwiper :list="bannerList"> </CustomSwiper>
  <!-- 介绍 -->
+  <view class="avatar-card">
    <uni-card
-    class="avatar-card"
      :shadow="'0rpx 0rpx 10rpx 0rpx rgba(5,68,37,0.12)'"
      :padding="'20px 10px'"
      :border="false"
@ -22,7 +22,11 @@
            <view>货场名称：{{ item.name }}</view>
            <view>货场地址：{{ item.address }}</view>
            <view
-            >联系电话：{{item.owner}} &nbsp;&nbsp;<text  @click="callNumber(item.phone)" class="active">{{ item.phone }} &nbsp;&nbsp;欢迎询价</text></view
+              >联系电话：{{ item.owner }} &nbsp;&nbsp;<text
+                @click="callNumber(item.phone)"
+                class="active"
+                >{{ item.phone }} &nbsp;&nbsp;欢迎询价</text
+              ></view
            >
          </view>
        </view>
@ -54,12 +58,12 @@
                >加入爱梵达</u-button
              ></view
            >
-          
          </view>
          <view class="mt-30 mb-30">爱梵达智能过磅系统，提升您的经营效率</view>
        </uni-grid>
      </view>
    </uni-card>
+  </view>
 </template>

 <script setup lang="ts">
@ -79,7 +83,7 @@ const list = ref([
      "长期回收废钢（轻一、轻二、轻三、重废、钢板料等）、废纸、泡沫、塑料等，量大价优，欢迎来电咨询。",
    name: "在生万有-中悦犇站",
    address: "上海市奉贤区川南奉公路8598号",
-    owner: '刘先生',
+    owner: "刘先生",
    phone: "13651779998",
  },
  {
@ -88,7 +92,7 @@ const list = ref([
      "长期回收重废、中废、轻废、小废、岩棉板、花盒等，量大价优，欢迎来电咨询。",
    name: "上海宽钢公司",
    address: "上海市宝山区兰岗路2号门",
-    owner: '李女士',
+    owner: "李女士",
    phone: "13601647155",
  },
 ]);
@ -122,13 +126,14 @@ const handleJoin = () => {
  });
 };

-const callNumber = (number) => {
+const callNumber = (number:any) => {
  // 判断是否为移动端
  if (
    uni.getSystemInfoSync().platform === "android" ||
    uni.getSystemInfoSync().platform === "ios"
  ) {
    // 在移动端使用内置拨号程序进行拨号
+    // my.makePhoneCall({ number: '1111111' }); 支付宝
    uni.makePhoneCall({
      phoneNumber: number, // 电话号码
      success: function () {
--- a/src/pagesVehicle/index.vue
+++ b/src/pagesVehicle/index.vue
@ -2,18 +2,15 @@
  <!-- 轮播图 -->
  <CustomSwiper :list="bannerList"> </CustomSwiper>
  <!-- 入口 -->
+  <view class="entry-card">
    <uni-card
-    class="entry-card"
      :shadow="'0rpx 0rpx 10rpx 0rpx rgba(5,68,37,0.12)'"
      :padding="'20px 10px'"
      :border="false"
    >
      <uni-grid :column="4" :showBorder="false" :square="false">
-      <uni-grid-item
-        class="item"
-        v-for="(item, index) in entryItemList"
-        :key="index"
-      >
+        <uni-grid-item v-for="(item, index) in entryItemList" :key="index">
+          <view class="item">
            <view @click="handleClick(item)">
              <view>
                <image :src="`${url}/static/img/vehicle/${item.path}`"></image>
@ -22,12 +19,14 @@
                <text class="text">{{ item.name }}</text>
              </view>
            </view>
+          </view>
        </uni-grid-item>
      </uni-grid>
    </uni-card>
+  </view>
  <!-- 介绍 -->
+  <view class="avatar-card">
    <uni-card
-    class="avatar-card"
      :shadow="'0rpx 0rpx 10rpx 0rpx rgba(5,68,37,0.12)'"
      :padding="'20px 10px'"
      :border="false"
@ -39,6 +38,7 @@
          v-for="(item, index) in serviceItemList"
          :key="index"
        >
+          <view class="item">
            <uni-card
              :shadow="'0rpx 0rpx 10rpx 0rpx rgba(5,68,37,0.12)'"
              :padding="'0px'"
@ -55,6 +55,7 @@
                <text class="text">{{ item.name }}</text>
              </view>
            </uni-card>
+          </view>
        </uni-grid-item>
      </uni-grid>

@ -69,9 +70,14 @@

      <view class="other">
        <view>其他问题请咨询客服电话</view>
-      <view><text @click="callNumber('15150231777')" class="active">15150231777 &nbsp;&nbsp;欢迎咨询</text></view>
+        <view
+          ><text @click="callNumber('15150231777')" class="active"
+            >15150231777 &nbsp;&nbsp;欢迎咨询</text
+          ></view
+        >
      </view>
    </uni-card>
+  </view>
 </template>

 <script setup lang="ts">
@ -177,7 +183,7 @@ const handleClick = (item: any) => {
  });
 };

-const callNumber = (number) => {
+const callNumber = (number: any) => {
  // 判断是否为移动端
  if (
    uni.getSystemInfoSync().platform === "android" ||
--- a/src/pagesVehicle/recycleFlow.vue
+++ b/src/pagesVehicle/recycleFlow.vue
@ -4,10 +4,8 @@
    :padding="'0px'"
    :margin="'20px'"
    :border="false"
-    :cover="'cover'"
  >
    <image
-      slot="cover"
      style="height: 680rpx"
      :src="`${url}/static/img/vehicle/flow.png`"
      mode="'aspectFit'"
--- a/src/static/style/common.scss
+++ b/src/static/style/common.scss
@ -72,3 +72,30 @@ body {
 .u-empty {
  margin-bottom: 10px !important;
 }
+
+.uni-tabbar {
+  bottom: -10px !important;
+}
+
+
+.custom-tabbar {
+  background: #ffffff;
+  // box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 56, 93, 0.12);
+  border-radius: 13rpx 13rpx 0rpx 0rpx;
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  font-weight: 500;
+  font-size: 30rpx;
+  color: #999;
+  text-align: center;
+  padding-top: 20rpx;
+  .custom-img {
+    width: 48rpx;
+    height: 48rpx;
+  }
+  .active {
+    color: $u-primary;
+  }
+}
Author	SHA1	Message	Date
admin	fc1a36ef3b	feat: 平台兼容性调整	2024-09-14 16:08:23 +08:00
admin	35735c1d80	feat: 兼容微信小程序 h5	2024-09-14 14:16:32 +08:00