sulibao-mini/pages/mine/mine.vue

<template>
  <view class="mine tn-safe-area-inset-bottom">

    <!-- 顶部自定义导航 -->
    
    
    <view class="top-backgroup">
      <image src='../../static/bg4.png' mode='widthFix' class='backgroud-image'></image>
    </view>
    
    <view class="about__wrap" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <!-- 图标logo/头像 -->
      <view class="tn-flex   tn-flex-col-center tn-margin-bottom" @click="tn('/minePages/set')" style="margin-top: -450rpx;justify-content: center;">
        <view class="justify-content-item" >
          <view class="tn-flex tn-flex-col-center tn-flex-row-left">
            <view class="logo-pic tn-shadow">
				
              <view class="logo-image">
				  <!-- <tn-avatar src="../../static/me2.png" :badge="true" size="xl" badgeIcon="star"></tn-avatar> -->

				 <image v-if="personInfo.profilePhotoUrl" class="tn-shadow-blur" style="width: 140rpx;height: 140rpx;background-size: cover;" :src="personInfo.profilePhotoUrl"></image>
                 <image v-if="!personInfo.profilePhotoUrl" class="tn-shadow-blur" style="width: 140rpx;height: 140rpx;background-size: cover;" src="../../static/me2.png"></image>
			   <!-- <view class="tn-shadow-blur" style="background-image:url('https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1664005699053-assets/web-upload/8645ea3a-e0a9-4422-8364-cc5ede305c9f.jpeg');width: 110rpx;height: 110rpx;background-size: cover;">
                </view> -->
              </view>
            </view>
			 

          </view>
        </view>
        
      </view>
      
      <!-- 没有授权，则显示这个授权按钮-->
      <view class="tn-flex tn-flex-row-between" @click="tn('/pages/login/login')" v-if="showLogin">
        <view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
          <tn-button shape="round" backgroundColor="#1d60b1" fontColor="#ffffff" padding="20rpx 0" width="40%" shadow>
            <text class="tn-icon-wechat tn-padding-right-xs tn-text-xl"></text>
            <text class="">立即登录</text>
          </tn-button>
        </view>
      </view>
	  
	  <view class="about-shadow tn-margin-top-lg tn-padding-top-sm tn-padding-bottom-sm tn-bg-white" v-if="!showLogin">
	    
		<view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding" @click="showModal1">
		  <view class="justify-content-item">
		    <view class="tn-text-bold tn-text-lg">
		      用户名
		    </view>
		    
		  </view>
		  <view class="justify-content-item tn-text-lg tn-color-grey">
		    <view class="tn-color-gray tn-padding-top-xs">
		      {{personInfo.accountName||(personInfo.userName?'用户'+personInfo.userName.slice(-4):'')||'未登录'}}
		    </view>
 
		  </view>
		</view>
		<view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding" @click="showModal1">
		  <view class="justify-content-item">
		    <view class="tn-text-bold tn-text-lg">
		      联系方式
		    </view>
		    
		  </view>
		  <view class="justify-content-item tn-text-lg tn-color-grey">
		    <view class="tn-color-gray tn-padding-top-xs">
		       {{personInfo.contactMethod||personInfo.userName||''}}
		    </view>
		 
		  </view>
		</view>
		
		<view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding" @click="showModal1">
		  <view class="justify-content-item">
		    <view class="tn-text-bold tn-text-lg">
		      手机号
		    </view>
		    
		  </view>
		  <view class="justify-content-item tn-text-lg tn-color-grey">
		    <view class="tn-color-gray tn-padding-top-xs">
		     {{personInfo.userName||'未登录'}}
		    </view>
		 
		  </view>
		</view>
		
		<!-- <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding" @click="showModal1">
		  <view class="justify-content-item">
		    <view class="tn-text-bold tn-text-lg">
		      所属公司
		    </view>
		    
		  </view>
		  <view class="justify-content-item tn-text-lg tn-color-grey">
		    <view class="tn-color-gray tn-padding-top-xs">
		      未绑定
		    </view>
		 
		  </view>
		</view> -->
		
		
		 
	  </view>
      
       
      
      <!-- 方式15 start-->
      <view class="tn-flex tn-flex-row-between tn-bg-white about-shadow tn-margin-top-xl">
        <view class="tn-padding-sm tn-margin-xs" @click="tn('/pages/mine/need')">
          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center tn-margin-left">
            <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" style="background-color: #F3F2F7;color: #7C8191;">
              <view class="tn-icon-like"></view>
            </view>  
            <view class="tn-text-center">
              <text class="tn-text-ellipsis">我的需求</text>
            </view>
          </view>
        </view>
        <view class="tn-padding-sm tn-margin-xs" @click="tn('/pages/mine/share')">
          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
            <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" style="background-color: #F3F2F7;color: #7C8191;">
              <view class="tn-icon-share-triangle"></view>
            </view>  
            <view class="tn-text-center">
              <text class="tn-text-ellipsis">我的共享</text>
            </view>
          </view>
        </view>
        <view class="tn-padding-sm tn-margin-xs" @click="tn('/pages/mine/coll')">
          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center tn-margin-right">
            <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" style="background-color: #F3F2F7;color: #7C8191;">
              <view class="tn-icon-star"></view>
            </view>  
            <view class="tn-text-center">
              <text class="tn-text-ellipsis">我的收藏</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 方式15 end-->
      
      
       
      
      <view class="about-shadow tn-margin-top-lg tn-margin-bottom-lg tn-padding-top-sm tn-padding-bottom-sm">
        
		 
		
        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
          <button class="tn-flex tn-flex-col-center tn-button--clear-style" @click="showFeedback">
            <view
              class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #7C8191;">
              <view class="tn-icon-message-fill"></view>
            </view>
            <view class="tn-flex tn-flex-row-between" style="width: 100%;">
              <view class="tn-margin-left-sm">我有问题</view>
              <view class="tn-color-gray tn-icon-right"></view>
            </view>
          </button>
        </tn-list-cell>
        <!-- <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="callPhoneNumber" data-number="18266666666">
          <view class="tn-flex tn-flex-col-center">
            <view
              class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #7C8191;">
              <view class="tn-icon-tel-circle-fill"></view>
            </view>
            <view class="tn-margin-left-sm tn-flex-1">技术支持</view>
            <view
              class="tn-margin-left-sm tn-color-cat tn-text-sm tn-padding-left-xs tn-padding-right-xs tn-bg-gray--light tn-round">
              158****8888</view>
          </view>
        </tn-list-cell> -->
		<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="showInfo()">
		  <view class="tn-flex tn-flex-col-center">
		    <view
		      class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #7C8191;">
		      <view class="tn-icon-safe-fill"></view>
		    </view>
		    <view class="tn-margin-left-sm tn-flex-1">协议展示</view>
		    <view class="tn-color-gray tn-icon-right"></view>
		  </view>
		</tn-list-cell>
		<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click=showAbout()>
		  <view class="tn-flex tn-flex-col-center">
		    <view
		      class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #7C8191;">
		      <view class="tn-icon-help"></view>
		    </view>
		    <view class="tn-margin-left-sm tn-flex-1">了解速立保</view>
		    <view class="tn-color-gray tn-icon-right"></view>
		  </view>
		</tn-list-cell>
      </view>

    </view>

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

  </view>
</template>

<script>
  import request from '../../utils/request'
  export default {
    name: 'Mine',
    data() {
      return {
		  personInfo: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')):{},
		  showLogin: false
      }
    },
	onReady() {
		 
	  this.$nextTick(() => {
		  if(!uni.getStorageSync('userNo')){
		  	this.showLogin = true;
		  }
		  console.error(JSON.parse(uni.getStorageSync('userInfo')))
	    this.getContentRectInfo()
	  })
	  
	},
	 
    methods: {
       // 获取内容容器的信息
       getContentRectInfo() {
       		  let that = this;
       		  request.post('/slbWxma/getPersonlInfo', {
       		  	 
       		  }).then(res => {
				  console.warn(res);
				  if(res&&res.success){
					  that.personInfo = res.resultMap.userInfo||{};
					  uni.setStorageSync('userInfo', JSON.stringify(res.resultMap.userInfo));
					  that.showLogin = false;
				  }
       		  	console.warn(res);
       		  })
          
       },
      // 跳转到速立保官网
      navTuniaoWebsite() {
        uni.navigateToMiniProgram({
          appId: 'wxa698b1eee960632f'
        })
      },
      // 跳转到速立保UI
      navTuniaoUI() {
        uni.navigateToMiniProgram({
          appId: 'wxf3d81a452b88ff4b'
        })
      },
      // 跳转
      tn(e) {
		if(!uni.getStorageSync('userNo')){
			uni.navigateTo({
			  url: '/pages/login/login',
			});
			return false;
		}
        uni.navigateTo({
          url: e,
        });
      },
	  showFeedback(){
		  uni.navigateTo({
		    url: '/pages/mine/addFeed',
		  });
	  },
      // 收货地址
      navAddress() {
        uni.chooseAddress({
        })
      },
      // 震动跳转
      navThanks(e) {
        wx.vibrateShort();
        uni.navigateTo({
          url: '/pages/login/login'
        })
      },
      //拨打固定电话
      callPhoneNumber() {
		  uni.navigateTo({
		    url: '/pages/login/login'
		  })
        // uni.makePhoneCall({
        //   phoneNumber: "18219128888",
        // });
      },
      // 复制开源地址
      copySource() {
        uni.setClipboardData({
          data: "等待上传插件市场",
        })
      },
	  showInfo(){
		 uni.navigateTo({
		 	url:'/pages/webview/web-view?url='+'https://test-oss.lx-device.com/userFeedback/1732866523422nfH.docx',
		 })
	  },
	  showAbout(){
		  uni.navigateTo({
		    url: '/pages/mine/about'
		  })
	  }
    }
  }
</script>

<style lang="scss" scoped>
  .mine{
    max-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-color-cat{
    color: #1D2541;
  }
  .tn-bg-cat{
    background-color: #1D2541;
  }

  
  /* 自定义导航栏内容 start */
  .custom-nav {
    height: 100%;
    
    &__back {
      margin: auto 5rpx;
      font-size: 40rpx;
      margin-right: 10rpx;
      flex-basis: 5%;
      width: 100rpx;
      position: absolute;
    }
  }
  /* 自定义导航栏内容 end */


  /* 顶部背景图 end */
  

  /* 用户头像 start */
  .logo-image {
    width: 140rpx;
    height: 140rpx;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
  }

  .logo-pic {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: top;
    border: 8rpx solid rgba(255,255,255,0.05);
    box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    overflow: hidden;
    // background-color: #FFFFFF;
  }

  /* 页面 start*/
  .about-shadow {
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  }

  .about {

    &__wrap {
      position: relative;
      z-index: 1;
      margin: 20rpx 30rpx;
    }
  }

  /* 页面 end*/
  
  /* 图标容器15 start */
  .icon15 {
    &__item {
      width: 30%;
      background-color: #FFFFFF;
      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: 60rpx;
        border-radius: 50%;
        margin-bottom: 18rpx;
        position: relative;
        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%;
  
            
        }
      }
    }
  }
  
  /* 图标容器12 start */
  .tn-three{
      position: absolute;
      top: 50%;
      right: 50%;
      bottom: 50%;
      left: 50%;
      transform: translate(-38rpx, -16rpx) rotateX(30deg) rotateY(20deg) rotateZ(-30deg);
      text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
  }
  .icon20 {
    &__item {
      width: 30%;
      background-color: #FFFFFF;
      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: 60rpx;
        border-radius: 50%;
        margin-bottom: 18rpx;
        position: relative;
        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%;
          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
        }
      }
    }
  }
  


  .button-vip {
    width: 100%;
    height: 150rpx;
    border-radius: 15rpx;
    position: relative;
    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%;
      background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
    }    
  }
  

  /* 图标容器12 start */
  .icon12 {
    &__item {
      width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;

      &--icon {
        width: 15rpx;
        height: 15rpx;
        font-size: 50rpx;
        border-radius: 50%;
        margin-bottom: 38rpx;
        position: relative;
        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%;
            
        }
      }
    }
  }
  
  /* 图标容器1 start */
  .icon1 {
    &__item {
      // width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
  
      &--icon {
        width: 40rpx;
        height: 40rpx;
        font-size: 40rpx;
        border-radius: 50%;
        position: relative;
        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%;
          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
        }
      }
    }
  }
  
  /* 图标容器1 end */
  
  
  /* 顶部背景图 start */
  .top-backgroup {
    height: 450rpx;
    z-index: -1;
  
    .backgroud-image {
      width: 100%;
      height: 450rpx;
      // z-index: -1;
    }
  }
  
  /* 顶部背景图 end */


</style>