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">{{ profile.name || "-" }}</text>
            </view>
            <view>
              <text class="company">{{ profile.phone || "-" }}</text>
            </view>
          </view>
        </view>
        <view class="entry-card">
          <uni-card
            :shadow="'0rpx 0rpx 10rpx 0rpx rgba(5,68,37,0.12)'"
            :padding="'10px'"
            :margin="'10px 0px'"
            :border="false"
          >
            <view class="title">我的订单</view>
            <uni-grid :column="3" :showBorder="false" :square="false">
              <uni-grid-item
                v-for="(item, index) in entryItemList"
                :key="index"
              >
                <view class="item">
                  <view @click="handleClickEntry(item)">
                    <view>
                      <image :src="`${url}/static/img/${item.path}`"></image>
                    </view>
                    <view>
                      <text class="text">{{ item.name }}</text>
                    </view>
                  </view>
                </view>
              </uni-grid-item>
            </uni-grid>
          </uni-card>
        </view>
        <view class="content">
          <u-list :height="'200px'">
            <u-list-item
              v-for="(item, index) in isHasToken() ? list : list1"
              :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>
    <SmallModal
      :title="'确认退出吗？'"
      :content="'退出后将返回至登陆页'"
      :okText="'确认退出'"
      :isMain="true"
      :show="isShowCancelModal"
      @handleModal="(v:boolean) => {handleModal(v)}"
      @handleOk="handleOk()"
    />
  </Layout>
</template>

<script setup lang="ts">
import Layout from "@/components/Layout/index.vue";
import { useMemberStore } from "@/store/index";
import pinia from "@/store";
import { url } from "@/utils/data";
import { UserApi } from "@/services";
import SmallModal from "@/components/Modal/smallModal.vue";
const store = useMemberStore(pinia);
const profile = store.profile.userInfo;
function isHasToken () {
  return store.profile.token !== ""
}
const list = reactive<any>([
  {
    name: "收款信息",
    icon: "pay.png",
  },
  {
    name: "用户协议",
    icon: "4.png",
  },
  {
    name: "隐私政策",
    icon: "5.png",
  },
  {
    name: "退出登录",
    icon: "3.png",
    path: "",
  },
]);
const list1 = reactive<any>([
  {
    name: "收款信息",
    icon: "pay.png",
  },
  {
    name: "用户协议",
    icon: "4.png",
  },
  {
    name: "隐私政策",
    icon: "5.png",
  }
]);

const entryItemList = ref([
  {
    path: "p1.png",
    name: "报废车辆回收",
    url: "/pagesOrder/vehicle/index",
  },
  {
    path: "p2.png",
    name: "电池回收",
    url: "/pagesOrder/battery/index",
  },
  {
    path: "p3.png",
    name: "加入我们",
    url: "/pagesOrder/joinus/index",
  },
]);

const handleClickEntry = (item: any) => {
  uni.navigateTo({
    url: item.url, // 要跳转到的页面路径
  });
};

const hanldeClick = (item: any) => {
  if (item.name === "用户协议") {
    openDoc("在生万有用户协议");
  } else if (item.name === "隐私政策") {
    openDoc("在生万有隐私政策");
  } else if (item.name === "收款信息") {
    uni.navigateTo({
      url: "/pagesOrder/collection", // 要跳转到的页面路径
    });
  } else if (item.name === "退出登录") {
    handleModal(true);
  }
};

const isShowCancelModal = ref(false);
const handleModal = (v: boolean) => {
  isShowCancelModal.value = v;
};

const handleOk = () => {
  UserApi.logOut({}).then((res: any) => {
    if (res.code === 200) {
      store.clearProfile();
      uni.reLaunch({
        url: "/pagesLogin/index", // 要跳转到的页面路径
      });
    }
  });
};
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

// #ifdef MP-WEIXN || MP-TOUTIAO || H5
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%;
      }
    }

    .entry-card {
      .title {
        font-weight: 500;
        font-size: 32rpx;
        color: #000000;
        margin-bottom: 30rpx;
      }
      .item {
        text-align: center;
        image {
          width: 74rpx;
          height: 76rpx;
        }
        .text {
          font-size: 28rpx;
          font-weight: 400;
          line-height: 42rpx;
        }
      }
    }
  }
}
</style>