NewZkgj/pages/index/personal.vue

<template>
  <view class="main">
    <view  class="backTop"></view>
    <!-- 头部开始 -->
    <view class="header box">
      <u-avatar :src="photo?photo:'https://qufang.oss-cn-beijing.aliyuncs.com/upload/icon/xcx/jjycrm/my/headPicture.png'"
        size="174"></u-avatar>
      <view class="userName">{{name}}</view>
      <view class="mobile">{{mobile}}</view>
    </view>
    <view class="settingGroup box">
		
      <view class="line">
        <view class="title">
          <image src="/static/images/password.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
          修改密码
        </view>
        <view class="right">
          <image src="/static/images/arrow.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
        </view>
      </view>
	  
	  
      <navigator class="line" url="/pages/my/set/index">
        <view class="title">
          <image src="/static/images/setting.png" style="width: 44rpx;height: 42rpx;" mode=""></image>
          我的设置
        </view>
        <view class="right">
          <image src="/static/images/arrow.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
        </view>
      </navigator>
	  
      <view class="line" @click="phone">
        <view class="title">
          <image src="/static/images/Customer.png" style="width: 48rpx;height: 46rpx;" mode=""></image>
          客服电话
        </view>
        <view class="right">
           <image src="/static/images/arrow.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
        </view>
      </view>
	  
      <view class="line" @click="logout" style="border: none;">
        <view class="title">
          <image src="/static/images/exit.png" style="width: 46rpx;height: 46rpx;" mode=""></image>
          退出登录
        </view>
      </view>
	  
    </view>
  </view>
</template>

<script>
  var app = getApp();
  var util = require("../../utils/util.js");
  var config = require("../../config");

  export default {
    data() {
      return {
        name: "",
        photo: "",
        mobile: "",
		ishowAS:true,
      };
    },
    onShow: function() {
     
    },
    methods: {
      //拨打电话
      phone() {
        wx.makePhoneCall({
          phoneNumber: '4008191707,8888' //仅为示例，并非真实的电话号码
        })
      },
      logout() {
        
      }
	  
    }
  };
</script>
<style lang="scss" scoped>
  .main {
    padding: 0 30rpx;
    background: #F8F8F8;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
	padding-bottom: 40rpx;
    .backTop {
	  background: #2671E2;
      position: absolute;
      left: 0;
      top: 0;
      width: 750rpx;
      height: 352rpx;
    }

    .box {
      background: #ffffff;
    }
  }

  .header {
    z-index: 2;
    border-radius: 25upx;
    margin-top: 120upx;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30upx 0;
    .userName{
      font-size: 36upx;
      font-weight: 500;
      color: #303030;
      margin-top: 20upx;
      line-height: 50upx;
    }
    .mobile{
      font-size: 30upx;
      line-height: 42upx;
      color: #BDBDBD;
      margin-top: 6upx;
      
    }
  }
  .settingGroup{
    margin-top: 30upx;
    color: #303030;
    font-size: 30upx;
    display: flex;
    flex-direction: column;
    .line{
      height: 118upx;
      border-bottom: 1upx solid #EEEEEE;
      margin: 0 38upx 0 30upx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title{
        display: flex;
        align-items: center;
        width: 190upx;
        justify-content: space-between;
      }
    }
  }
</style>