gupiao_weixin_uniapp/pages/user/user.vue

<template>
  <view class="user">
    <view class="avatar_phone">
      <view class="avatar_phone_left">
        <image :src="data.avatar" class="avatar" mode="scaleToFill" />
        <view style="margin-left: 32rpx">
          <view class="name">{{ data.name }}</view>
          <view class="phone">{{ data.phone }}</view>
        </view>
      </view>
      <image
        src="../../static/right_all.png"
        class="right_icon"
        mode="scaleToFill"
      />
    </view>
    <view class="statistics_collection">
      <view class="list" @tap="to('tradeStats')">
        <view class="list_left">
          <image
            src="../../static/user_tongji.png"
            class="list_icon"
            mode="scaleToFill"
          />
          <view>交易统计</view>
        </view>
        <view>
          <image
            src="../../static/right_all.png"
            class="right_icon"
            mode="scaleToFill"
          />
        </view>
      </view>
      <view class="list" @tap="to('collection')">
        <view class="list_left">
          <image
            src="../../static/user_collection.png"
            class="list_icon"
            mode="scaleToFill"
          />
          <view>我的收藏</view>
        </view>
        <view>
          <image
            src="../../static/right_all.png"
            class="right_icon"
            mode="scaleToFill"
          />
        </view>
      </view>
    </view>
    <view class="concerning">
      <view class="list">
        <view class="list_left">
          <image
            src="../../static/yonghuxieyi.png"
            class="list_icon"
            mode="scaleToFill"
          />
          <view>用户协议</view>
        </view>
        <view>
          <image
            src="../../static/right_all.png"
            class="right_icon"
            mode="scaleToFill"
          />
        </view>
      </view>
      <view class="list">
        <view class="list_left">
          <image
            src="../../static/yinsixieyi.png"
            class="list_icon"
            mode="scaleToFill"
          />
          <view>隐私协议</view>
        </view>
        <view>
          <image
            src="../../static/right_all.png"
            class="right_icon"
            mode="scaleToFill"
          />
        </view>
      </view>
      <view class="list">
        <view class="list_left">
          <image
            src="../../static/guanyuwomen.png"
            class="list_icon"
            mode="scaleToFill"
          />
          <view>关于我们</view>
        </view>
        <view>
          <image
            src="../../static/right_all.png"
            class="right_icon"
            mode="scaleToFill"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        data: {
          avatar: '../../static/moren_avatar.png',
          name: '用户',
          phone: '',
        },
      }
    },
onLoad() {
	this.data.phone = this.$cache.get('gupiao_phone')
	var reg = /^(\d{3})\d{4}(\d{4})$/;
	      this.data.phone = this.data.phone.replace(reg, "$1****$2");
},
    methods: {
      // 跳转到编辑页面
      toEdit() {
		  
        uni.navigateTo({
          url: `/pages/user/edit/editUser`,
        })
      },
      // 跳转到相应页面
      to(url) {
        uni.navigateTo({
          url: `/pages/user/${url}`,
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .avatar_phone {
    padding: 36rpx 24rpx;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .avatar_phone_left {
      display: flex;
      align-items: center;
    }
    .avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 100rpx;
    }
    .name {
      font-weight: bold;
      width: 400rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .phone {
      font-size: 24rpx;
      color: #999999;
      margin-top: 20rpx;
    }
  }
  .right_icon {
    width: 24rpx;
    height: 24rpx;
  }
  .statistics_collection {
    margin-top: 20rpx;
    background-color: white;
    padding: 0 24rpx;
  }
  .list {
    padding: 32rpx 0;
    border-bottom: 2rpx solid #f6f6f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .list_left {
      display: flex;
      align-items: center;
      font-size: 28rpx;
    }
    .list_icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 24rpx;
    }
  }
  .concerning {
    margin-top: 20rpx;
    background-color: white;
    padding: 0 24rpx;
  }
</style>
<style lang="scss">
  page {
    background-color: #f7f7f7;
  }
</style>