yunshangxie/pages/index/my_card.vue

<template>
  <view class="page-c">
    <tn-nav-bar :isBack="false" backTitle="" :bottomShadow="true" backgroundColor="#FFFFFF">
      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
        <view style="padding-left: 15rpx;" @click="goBack()">
          <text class="tn-icon-left" style="font-size: 40rpx;"></text>
        </view>
        <view class="tn-margin-top"
              style=";text-shadow:  1rpx 0 0 #FFF, 0 1rpx 0 #FFF, -1rpx 0 0 #FFF , 0 -1rpx 0 #FFF;">
          <tn-tabs :list="[{name:'我的名片'}]" :current="topCurrent" activeColor="#000" :bold="false"
                   :fontSize="36"></tn-tabs>
        </view>
      </view>
    </tn-nav-bar>
    <!-- 顶部 -->
    <view :style="{paddingTop: vuex_custom_bar_height +20+'px'}">
      <view class="tn-strip-bottom">
        <view class="slideshow">
          <image :src="apiImgUrl+userThisInfo.photo_image" style="width: 300rpx;height: 300rpx;border-radius: 50%;"></image>
        </view>
        <view class='tn-margin'>
          <view class="tn-text-bold">
            <text class='tn-text-xxl tn-padding-right'>{{ userThisInfo.nikename }}</text>
            <text class='tn-text-lg tn-color-gray'>{{ userThisInfo.enterprise_name }}</text>
          </view>
          <template v-if="userThisInfo.association_id==userInfo.association_id || is">
            <view class="tn-margin-top-lg">
              <text class="tn-text-lg">微信：{{ userThisInfo.wx_number }}</text>
              <text class="tn-icon-copy tn-color-blue tn-padding-left-xs"></text>
            </view>
            <view class="tn-margin-top-xs" @click="callPhone">
              <text class="tn-text-lg">电话：{{ userThisInfo.phone }}</text>
              <text class="tn-icon-phone tn-color-orange tn-padding-left-xs"></text>
            </view>
          </template>
          <template v-if="userThisInfo.association_id!=userInfo.association_id && !is">
            <view class="tn-margin-top-lg">
              <text class="tn-text-lg">微信：加入协会后查看</text>
              <text class="tn-icon-copy tn-color-blue tn-padding-left-xs"></text>
            </view>
            <view class="tn-margin-top-xs">
              <text class="tn-text-lg">电话：加入协会后查看</text>
              <text class="tn-icon-phone tn-color-orange tn-padding-left-xs"></text>
            </view>
          </template>
        </view>
      </view>
      <view class="king-list tn-margin-top-sm">

        <view class="king-icon">
          <text class='tn-icon-creative tn-color-white tn-text-lg tn-bg-blue tn-round tn-padding-xs'></text>
          <text class='tn-text-xl tn-margin-left'>自我介绍</text>
        </view>
        <view class='king-item tn-color-red tn-icon-circle-fill'>
          <view class="resume2">
            <text class="">
             {{userThisInfo.introduction}}
            </text>
          </view>

        </view>

        <view class="king-icon">
          <text class='tn-icon-company tn-color-white tn-text-lg tn-bg-blue tn-round tn-padding-xs'></text>
          <text class='tn-text-xl tn-margin-left'>公司介绍</text>
        </view>
        <view class='king-item tn-color-red tn-icon-circle-fill'>
          <view>
            <view class="resume2">
              <text>{{userThisInfo.enterprise_name}}</text>
            </view>
            <view class="resume2">
              <text>
                {{userThisInfo.enterprise_Introduction}}
              </text>
            </view>
          </view>
        </view>


      </view>
    </view>

    <view class="">
      <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur button-2">
        <button class="tn-button--clear-style" open-type="share" style="border-radius: 0;">
          <view class="tn-icon-send-fill tn-color-white"></view>
        </button>
        <!-- <view class="tn-icon-send-fill tn-color-white"></view> -->
      </view>
    </view>


    <view class='tn-tabbar-height'></view>

    <view class="bg-tabbar-shadow"></view>

  </view>
</template>

<script>
import {getUserIndex} from "@/util/api";
import store from "@/store";

export default {
  data() {
    return {
      topCurrent: 0,
      uid: 0,
      this_uid: 0,
      userInfo: {},
      userThisInfo: {},
      apiImgUrl: this.$store.state.imgUrl,
      is:false
    }
  },
  onLoad(d) {
    var uid = uni.getStorageSync('uid');
    this.uid = uid;
    this.this_uid = d.id;
    this.getUserInfo();
  },
  onShareAppMessage(res) {
    var info = this.info;
    console.log(info);
    return {
      title: this.userThisInfo.nikename,
      path: '/pages/index/my_card?id=' + this.userThisInfo.member_id,
      imageUrl: this.apiImgUrl+this.userThisInfo.photo_image
    }
  },
  methods: {
    callPhone(){
      // 电话号码为示例，请替换为实际需要拨打的号码
      const phoneNumber = this.userThisInfo.phone;
      uni.makePhoneCall({
            phoneNumber: phoneNumber, // 电话号码
            success: function () {
              console.log('拨打电话成功');
            },
            fail: function () {
              console.log('拨打电话失败');
            }
            });
    },
    getThisUserInfo() {
      getUserIndex({member_id: this.this_uid})
          .then(res => {
            if (res.code == 1) {
              this.userThisInfo = res.data;
            }
          })
          .catch(error => {
            uni.showToast({
              title: error,
              icon: 'none',
              duration: 2000
            });
          })
    },
    getUserInfo() {
      getUserIndex({member_id: this.uid})
          .then(res => {
            if (res.code == 1) {
              if (this.this_uid != this.uid) {
                this.getThisUserInfo();
              }else{
                this.is=true;
                this.userInfo = res.data;
                this.userThisInfo = res.data;
              }

            }
          })
          .catch(error => {
            uni.showToast({
              title: error,
              icon: 'none',
              duration: 2000
            });
          })
    },
    openUrl(url) {
      uni.navigateTo({
        url: url
      })
    },
    goBack() {
      if (getCurrentPages().length > 1) {
        uni.navigateBack()
      } else {
        uni.redirectTo({
          url: '/pages/index/index'
        })

      }
    }

  }
}
</script>

<style lang="scss" scoped>
.page-c {
  background-color: #EBF4F7;
  height: 100vh;
}

/* 底部安全边距 start*/
.tn-tabbar-height {
  min-height: 120rpx;
  height: calc(140rpx + env(safe-area-inset-bottom) / 2);
  height: calc(140rpx + constant(safe-area-inset-bottom));
}

.tn-footerfixed {
  position: fixed;
  width: 100%;
  bottom: calc(180rpx + env(safe-area-inset-bottom));
  z-index: 1024;
  box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);

}

/* 按钮 */
.button-1 {
  background-color: rgba(0, 0, 0, 0.15);
  position: fixed;
  /* bottom:200rpx;
    right: 20rpx; */
  bottom: 27%;
  right: 30rpx;
  z-index: 1001;
  border-radius: 100px;
}

.button-2 {
  background-color: rgba(0, 0, 0, 0.15);
  position: fixed;
  /* bottom:200rpx;
    right: 20rpx; */
  bottom: 18%;
  right: 30rpx;
  z-index: 1001;
  border-radius: 100px;
}

/* 图标容器15 start */
.icon15 {
  &__item {
    width: 30%;

    border-radius: 10rpx;
    padding: 30rpx;
    margin: 20rpx 10rpx;
    transform: scale(1);
    transition: transform 0.3s linear;
    transform-origin: center center;

    &--icon {
      width: 100rpx;
      height: 100rpx;
      font-size: 50rpx;
      border-radius: 50%;
      margin-bottom: 18rpx;
      z-index: 1;

      &::after {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: inherit;
        opacity: 1;
        transform: scale(1, 1);
        background-size: 100% 100%;


      }
    }
  }
}


/* 相册 */
.slideshow {
  overflow: hidden;
  text-align: center;
}


/* 简历内容 */
.king-list {
  display: block;
  // background-color: #ffffff;
}

.king-list .king-icon {
  width: 100%;
  text-align: left;
  padding: 20rpx 0 20rpx 37rpx;
  font-size: 26rpx;
  color: #888;
  display: block;
}

.king-list > .king-item {
  padding: 30rpx 30rpx 30rpx 120rpx;
  position: relative;
  display: block;
  z-index: 0;
}

.king-list > .king-item::after {
  content: "";
  display: block;
  position: absolute;
  width: 1rpx;
  background-color: #E6E6E6;
  left: 60rpx;
  height: 100%;
  top: 0;
  z-index: 8;
}

.king-list > .king-item::before {
  display: block;
  position: absolute;
  top: 36rpx;
  z-index: 9;
  background-color: #ffffff;
  width: 50rpx;
  height: 50rpx;
  text-align: center;
  border: none;
  line-height: 50rpx;
  left: 36rpx;
}


/* 名片微调 */
.img-solid {
  border: 1rpx solid #eee;
}

.share-img {
  position: fixed;
  /* padding: 10rpx; */
  width: 100rpx;
  height: 100rpx;
  /* top: 680rpx; */
  bottom: 200rpx;
  right: 20rpx;
  z-index: 1024;
  opacity: 0.8;
  box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(0, 0, 0, 0.3);
  border: none;
  border: 6rpx solid rgba(255, 255, 255, 0);
}

.resume {
  display: flex;
  justify-content: space-between;
  padding-top: 10rpx;
  border-radius: 6rpx;
  color: #666;
  line-height: 1.6;
}

.resume + .resume {
  margin-top: 20rpx;
}

.resume2 {
  padding-top: 10rpx;
  border-radius: 6rpx;
  display: block;
  color: #666;
  line-height: 1.6;
  text-align: justify;
}

/* 间隔线 start*/
.tn-strip-bottom {
  width: 100%;
  border-bottom: 5rpx solid #ffffff;
}

/* 间隔线 end*/


.bg-img-cont {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 350rpx;
  margin: 20rpx 0;
  border-radius: 8rpx;
}


// .button-no {
//   border: none;
//   width: 100%;
//   height: 100%;
//   background-color: rgba(0, 0, 0, 0);
// }


/* 标签内容 start*/
.tn-tag-content {
  &__item {
    display: inline-block;
    line-height: 45rpx;
    padding: 10rpx 30rpx;
    margin: 0rpx 20rpx 25rpx 0rpx;

    &--prefix {
      padding-right: 10rpx;
    }
  }
}

/* 标签内容 end*/

.see {
  display: flex;
  justify-content: space-between;
  padding-top: 10rpx;
  border-radius: 6rpx;
  color: #666;
  line-height: 1.6;
}
</style>