YXGJ/cloud/businessCard/index.vue

<template>
  <view class="self-card" :style="{ '--height': tovw(+CustomBar + 10) }">
    <view
      class="footer"
      :style="{
        height: (tovw(CustomBar).replace('vw', '') * 375) / 100 + 'px',
      }"
      style="
        background: linear-gradient(225deg, #f43a50 0%, #c30d23 100%);
        top: 0;
      "
    >
      <view
        class="custom"
        :style="{
          height: (tovw(Custom.height).replace('vw', '') * 375) / 100 + 'px',
          top: (tovw(Custom.top).replace('vw', '') * 375) / 100 + 'px',
        }"
      >
        <view v-if="userInfo.name">{{ userInfo.name }}的名片</view>
        <view v-else>暂无信息</view>
        <view
          class="back"
          :style="{
            lineHeight:
              (tovw(Custom.height).replace('vw', '') * 375) / 100 + 'px',
          }"
          @click="onBack"
        >
          <text class="iconfont icon-a-wodetiaozhuan" />
        </view>
      </view>
    </view>
    <view
      class="head"
      :style="[{ height: tovw(+CustomBar + 184) }]"
      style="background: linear-gradient(225deg, #f43a50 0%, #c30d23 100%)"
    >
      <image
        class="bg-bottom"
        mode="aspectFill"
        src="/static/workbench/减去.svg"
      >
      </image>
      <view class="card">
        <view class="header">
          <view class="left">
            <view class="title">
              <text>{{ userInfo.name || "暂无" }}</text>
              <text>{{ userInfo.rolenames || "暂无" }}</text>
            </view>
            <text class="phone">{{ userInfo.phonebumber || "暂无" }}</text>
            <view class="redline"></view>
          </view>
          <navigator class="right">
            <image
              :src="
                userInfo.headpic ||
                'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202406011717209838416B6150695f.webp'
              "
              mode="aspectFill"
            >
            </image>
          </navigator>
        </view>
        <view class="bottom">
          <view class="left">
            <view>
              <i class="iconfont icon-qiye-hui"></i>
              <view class="text">{{ userInfo.enterprisename || "暂无" }}</view>
            </view>
            <view>
              <i class="iconfont icon-youxiang"></i>
              <view class="text">{{ userInfo.email || "暂无" }}</view>
            </view>
            <view style="margin-bottom: 0 !important">
              <i class="iconfont icon-dizhi_xian"></i>
              <view class="text u-line-2">{{
                userInfo.address || "暂无"
              }}</view>
            </view>
          </view>
          <navigator
            class="right"
            :url="'/cloud/businessCard/share?id=' + userid"
          >
            <image class="code" src="/static/workbench/二维码.svg" />
            <text>名片码</text>
          </navigator>
        </view>
      </view>
    </view>
    <view class="card-handle">
      <view class="top">
        <view class="left">
          <view class="avatar">
            <block v-for="item in userInfo.readusers" :key="item.rowindex">
              <image
                :src="
                  item.headpic ||
                  'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202406011717209838416B6150695f.webp'
                "
                v-if="item.rowindex < 4"
                :key="item.rowindex"
              />
            </block>
            <text style="color: #bbbbbb">...</text>
          </view>
          <view class="readcount">浏览了{{ userInfo.count_read }}</view>
        </view>
        <navigator url="#" class="right" @click="goodClick">
          <i
            :class="[
              'iconfont',
              userInfo.islike == 1 ? ' icon-yidianzan' : ' icon-weidianzan',
            ]"
            :style="{ color: userInfo.islike ? '#C30D23' : '#666666' }"
          ></i>
          <text>点赞{{ userInfo.count_like }}</text>
        </navigator>
      </view>
      <view class="bottom">
        <view class="but" hover-class="navigator-hover" @click="copy">
          <i class="iconfont icon-fuzhi" style="color: #c30d23"></i>
          复制电话
        </view>
        <view class="but" hover-class="navigator-hover" @click="shareClick">
          <i class="iconfont icon-zhuanfa"></i>
          转发名片
        </view>
      </view>
    </view>

    <view class="user-info">
      <text class="title-max">简介</text>
      <view class="tag-box">
        <text class="title-min">印象标签</text>
        <view class="tag-list" v-if="userInfo.tag.length">
          <view
            class="tag"
            v-for="(item, index) in userInfo.tag"
            :key="index"
            >{{ item }}</view
          >
        </view>
        <text v-else style="font-weight: 500; font-size: 14px; color: #666666"
          >暂无</text
        >
      </view>
      <view class="descript-box">
        <text class="title-min">自我介绍</text>
        <text class="descript">{{ userInfo.remarks || "暂无" }}</text>
      </view>
      <view class="image-box">
        <text class="title-min">照片墙</text>
        <block v-if="userInfo.images.length">
          <view
            class="image"
            v-for="item in userInfo.images"
            :key="item.attachmentid"
            @click="preview(item.url)"
          >
            <u--image
              width="100%"
              :lazy-load="true"
              :src="item.url"
              radius="5"
            ></u--image>
          </view>
        </block>
        <text v-else style="font-weight: 500; font-size: 14px; color: #666666"
          >暂无</text
        >
      </view>
    </view>

    <view class="footer2">
      <navigator
        class="but"
        :url="'/cloud/businessCard/edit?id=' + userid"
        @click="goEditPage"
      >
        <text>修改名片</text>
      </navigator>
    </view>

    <u-popup :show="shareShow" mode="bottom" @close="shareShow = false">
      <view class="share-box">
        <contact openType="share">
          <view class="item" hover-class="navigator-hover" @click="shareWx">
            <image mode="widthFix" src="/static/workbench/微信好友.svg" />
            <text>微信好友</text>
          </view>
        </contact>

        <navigator class="item" :url="'/cloud/businessCard/share?id=' + userid">
          <image mode="widthFix" src="/static/workbench/名片海报.svg" />
          <text>名片海报</text>
        </navigator>
      </view>
    </u-popup>
  </view>
</template>

<script>
import contact from "../../components/contact";
import { viewImage } from "../../utils/settleFiles.js";
import { winTheCustomer } from "../../utils/share";
export default {
  components: { contact },
  data() {
    return {
      userInfo: { tag: [], images: [], readusers: [] },
      userid: uni.getStorageSync("userMsg").userid,
      shareShow: false,
    };
  },
  onUnload() {
    delete this.$Http.refreshUserInfoData;
  },
  methods: {
    preview(url) {
      viewImage(url);
    },
    goEditPage() {
      this.$Http.editUser = function (id) {
        this.getuserInfo(id);
        delete this.$Http.editUser;
      }.bind(this);
    },
    async getuserInfo(id) {
      let res = await this.$Http.basic({
        id: 20240514161502,
        content: {
          userid: id,
        },
      });
      if (this.cutoff(res.msg)) return;
      this.userInfo = res.data;
      this.userInfo.headpic =
        (this.userInfo.attinfos.find((v) => v.usetype == "headportrait") &&
          this.userInfo.attinfos.find((v) => v.usetype == "headportrait")
            .url) ||
        "";
      this.userInfo.images = this.userInfo.attinfos.filter(
        (v) => v.usetype != "headportrait"
      );
      console.log(this.userInfo, "用户信息");
    },
    shareClick() {
      this.shareShow = true;
    },
    onBack() {
      let curPages = getCurrentPages();
      if (curPages.length == 1) {
        uni.redirectTo({
          url: "/pages/index/index",
        });
      } else {
        uni.navigateBack();
      }
    },
    async goodClick() {
      let res = await this.$Http.basic({
        id: 20240416133702,
        content: {
          ownertable: "sys_users",
          ownerid: this.userid,
          type: 2, //1:收藏，2：点赞
        },
      });
      if (this.cutoff(res.msg)) return;
      this.getuserInfo(this.userid);
    },
    copy() {
      uni.setClipboardData({
        data: this.userInfo.phonenumber,
        success: (result) => {
          uni.showToast({
            title: "已复制",
            icon: "none",
            duration: 1500,
          });
        },
      });
    },
  },
  onShareAppMessage(res) {
    return {
      title: this.userInfo.name,
      path:
        "/cloud/businessCard/index?id=" +
        this.userid +
        "&shareUserid=" +
        this.shareUserid,
      imageUrl: "",
    };
  },
  onLoad(options) {
    this.isInitializeLogin(render.bind(this));
    function render() {
      if (options.q) {
        let params = this.getUrlParams(options.q);
        this.userid = params.userid;
      }
      this.getuserInfo(this.userid);
      this.shareUserid = winTheCustomer(options.shareUserid || 0, "个人名片");
    }
  },
};
</script>

<style lang="scss">
.self-card {
  .head {
    position: relative;
    width: 100vw;

    .bg-bottom {
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100vw;
    }

    .custom {
      position: absolute;
      width: 100vw;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 17px;
      color: #ffffff;

      .back {
        position: absolute;
        padding: 0 10px;
        left: 0;
        color: #fff;
        font-size: 12px;
        transform: rotateY(180deg);
      }
    }

    .card {
      width: 355px;
      height: 220px;
      box-sizing: border-box;
      background: #ffffff;
      box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.16);
      border-radius: 8px 8px 8px 8px;
      position: absolute;
      top: var(--height);
      left: 10px;
      padding: 20px;
      font-family: Source Han Sans SC, Source Han Sans SC;

      .header {
        display: flex;
        justify-content: space-between;
        .left {
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .title {
            display: flex;
            align-items: center;

            text {
              &:first-child {
                font-weight: 500;
                font-size: 18px;
                color: #333333;
              }

              &:last-child {
                font-weight: 400;
                font-size: 12px;
                color: #999999;
                margin-left: 10px;
              }
            }

            margin-bottom: 5px;
          }

          .phone {
            font-weight: 500;
            font-size: 16px;
            color: #333333;
          }

          .redline {
            width: 24px;
            height: 2px;
            background: #c30d23;
            margin-top: 15px;
          }
        }

        .right {
          width: 56px;
          height: 56px;
          background: #dcebf8;
          box-shadow: 0px 3px 6px 1px #e0d6d7;
          border: 2px solid #ffffff;
          border-radius: 50%;
          image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
      }

      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: 400;
        font-size: 12px;
        color: #666666;
        margin-top: 22px;

        .left {
          display: flex;
          flex-direction: column;

          > view {
            margin-bottom: 13px;
            display: flex;
            align-content: center;
            align-items: center;

            i {
              font-size: 16px;
            }

            .text {
              margin-left: 10px;
              max-width: 211px;
            }
          }
        }

        .right {
          display: flex;
          flex-direction: column;
          align-items: center;
          align-content: center;
          padding: 3px;
          border-radius: 5px;
          text {
            font-weight: 400;
            font-size: 12px;
            color: #666666;
          }

          .code {
            width: 32px;
            height: 32px;
            margin-bottom: 4px;
          }
        }
      }
    }
  }

  .card-handle {
    padding: 50px 10px 20px 10px;
    background: #ffffff;
    margin-top: 15px;

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      align-content: center;
      font-family: Source Han Sans SC, Source Han Sans SC;
      font-size: 12px;
      color: #999999;

      .left {
        display: flex;
        flex-direction: column;

        .avatar {
          display: flex;
          align-items: flex-start;
          align-content: center;

          image {
            margin-right: 5px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
          }

          text {
            transform: scale(1.5);
          }
        }

        .readcount {
          margin-top: 5px;
          display: block;
        }
      }

      .right {
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
        width: 35px;
        height: 40px;
        border-radius: 3px;
        i {
          display: block;
          color: #666666;
        }

        text {
          margin-top: 5px;
          display: block;
        }
      }
    }

    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      align-content: center;
      margin-top: 25px;

      .but {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        border-radius: 8px 8px 8px 8px;
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: 400;
        font-size: 16px;
        width: 173px;
        height: 50px;
        line-height: 50px;
        text-align: center;

        &:nth-child(1) {
          background: #ffffff;
          border: 1px solid #cccccc;
          color: #666666;
        }

        &:nth-child(2) {
          background: #c30d23;
          color: #ffffff;
        }

        view {
          margin-right: 10px;
        }
      }
    }
  }

  .user-info {
    padding: 12px 10px 70px 10px;
    font-family: PingFang SC, PingFang SC;
    background: #ffffff;
    margin-top: 10px;

    .title-min {
      margin-bottom: 10px;
      font-weight: 500;
      font-size: 14px;
      color: #666666;
      display: block;
    }

    .title-max {
      margin-bottom: 21px;
      font-weight: 500;
      font-size: 16px;
      color: #333333;
      display: block;
    }

    .tag-box {
      display: flex;
      flex-direction: column;
      margin-bottom: 20px;

      .title-min {
      }

      .tag-list {
        display: flex;
        align-content: center;
        align-items: center;
        flex-wrap: wrap;

        .tag {
          margin-right: 10px;
          padding: 6px 10px;
          background: #f2f2f2;
          border-radius: 5px 5px 5px 5px;
          margin-right: 10px;
          font-weight: 400;
          font-size: 14px;
          color: #333333;

          &:last-child {
            margin-right: 0;
          }
        }
      }
    }

    .descript-box {
      margin-bottom: 20px;
      display: flex;
      flex-direction: column;

      .descript {
        font-weight: 400;
        font-size: 14px;
        color: #666666;
      }
    }

    .image-box {
      display: flex;
      flex-direction: column;

      .image {
        width: 100%;
        height: 240px;
        margin-bottom: 10px;
      }
    }
  }

  .footer {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 375px;
    height: 64px;
    background: #ffffff;
    box-shadow: 0px -2px 6px 1px rgba(0, 0, 0, 0.16);
    box-sizing: border-box;
    z-index: 9;
    padding: 5px 10px;

    .custom {
      position: absolute;
      width: 100vw;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 17px;
      color: #ffffff;

      .back {
        position: absolute;
        padding: 0 10px;
        left: 0;
        color: #fff;
        font-size: 12px;
        transform: rotateY(180deg);
      }
    }

    .but {
      width: 355px;
      height: 45px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #ffffff;
      background: #c30d23;
      border-radius: 5px 5px 5px 5px;
      border: 1px solid #ffffff;
      display: flex;
      align-items: center;
      align-content: center;
      justify-content: space-evenly;
    }
  }
}

.footer2 {
  position: fixed;
  bottom: 0;
  width: 100vw;
  height: 65px;
  background: #ffffff;
  box-shadow: 0px -2px 6px 1px rgba(0, 0, 0, 0.16);
  box-sizing: border-box;
  padding: 5px 10px;
  display: flex;

  .but {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 45px;
    background: #c30d23;
    border-radius: 5px;
    font-family: PingFang SC, PingFang SC;
    font-size: 14px;
    color: #ffffff;
  }

  .forbidden {
    opacity: 0.6;
  }
}

.share-box {
  padding: 30px 0;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-evenly;

  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    border-radius: 5px;
    image {
      width: 50px;
      height: 50px;
    }

    text {
      margin-top: 5px;
      font-family: Source Han Sans SC, Source Han Sans SC;
      font-weight: 400;
      font-size: 12px;
      color: #333333;
    }
  }
}
</style>