freight-ts-dy-web/src/pagesHome/profile.vue

<template>
  <Layout :select="'我的'">
    <view class="profile">
      <view class="baseinfo">
        <view class="head">
          <image :src="`${url}/static/img/profile/user.png`" class="user"></image>
          <view>
            <view>
              <text class="name">{{ '用户' || "-" }}</text>
            </view>
            <view>
              <text class="company">{{ '-' || "-" }}</text>
            </view>
          </view>
        </view>
        <view class="content">
          <u-list :height="'200px'">
            <u-list-item v-for="(item, index) in list" :key="index">
              <u-cell
                :title="item.name"
                arrow-direction="right"
                isLink
                :url="item.path"
                :border="false"
                @click="hanldeClick(item)"
              >
                <template #icon>
                  <view style="width: 40rpx">
                    <image
                      :src="`${url}/static/img/profile/${item.icon}`"
                      mode="widthFix"
                    />
                  </view>
                </template>
              </u-cell>
            </u-list-item>
          </u-list>
        </view>
      </view>
    </view>
  </Layout>
</template>

<script setup lang="ts">
import Layout from "@/components/Layout/index.vue";
import { url } from "@/utils/data";
const list = reactive([
  {
    name: "用户协议",
    icon: "4.png",
  },
  {
    name: "隐私政策",
    icon: "5.png",
  },
]);

const hanldeClick = (item: any) => {
  if (item.name === "用户协议") {
    openDoc("在生万有用户协议");
  } else if (item.name === "隐私政策") {
    openDoc("在生万有隐私政策");
  }
};

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/${isWX && (item === '在生万有隐私政策') ? 'weixin/' : ''}${item}.docx`,
    success: function (res) {
      setTimeout(
        () =>
          uni.openDocument({
            filePath: res.tempFilePath,
            showMenu: false,
            success: function () {
              console.log("打开文档成功");
            },
            fail: function () {
              uni.showToast({
                title: "暂不支持此类型",
                duration: 2000,
                icon: "none",
              });
            },
          }),
        100
      );
    },
    fail: function (res) {
      console.log(res); //失败
    },
  });
};

  //隐藏官方的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>
.profile {
  .bg {
    width: 100%;
    position: absolute;
    top: 0rpx;
    z-index: -1;
  }
  .baseinfo {
    padding: 25.64rpx;
    .head {
      display: flex;
      align-items: center;
      margin-left: 41rpx;
      .user {
        width: 110.9rpx;
        height: 110.9rpx;
        margin-right: 20.51rpx;
      }
      .name {
        font-size: 27rpx;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #000000;
      }
      .company {
        font-size: 21rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #000000;
      }
    }
    .content {
      background: #ffffff;
      box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
      border-radius: 13rpx;
      padding: 28.21rpx 21.15rpx;
      margin-top: 24.36rpx;
      image:nth-child(1) {
        width: 100%;
      }
    }
  }
}
</style>