个人中心——open-data标签 渲染

个人中心——open-data标签 渲染

页面布局

• 用户头像和昵称
• 我的信息列表
• 我的订单
• 管理收货地址

获取头像和昵称

<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>

实例

open-data-用户中心——https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html

第一步：在src/pages下新建my文件夹

新建入口文件main.js

import Vue from 'vue'
import App from './index'

const app = new Vue(App)
app.$mount()

第二步：新建index.vue

<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <span class="iconfont icon-icon_set_up"></span>
      <div class="profile">
        <!-- 获取头像 -->
        <div class="head-img">
          <open-data type="userAvatarUrl"></open-data>
        </div>
        <!-- 昵称 -->
        <open-data type="userNickName"></open-data>
      </div>
      <span class="iconfont icon-dakaihuihua"></span>
    </div>
    
    <div class="content">
      <!-- 收藏店铺 -->
      <div class="profile-info">
        <!-- 我的信息列表 -->
        <div class="profile-item" v-for="(item, index) in profileList" :key="index">
          <p>{{item.number}}</p>
          <p>{{item.text}}</p>
        </div>
      </div>
      <!-- 我的订单 -->
      <div class="order-list">
        <div class="order-title">
          我的订单
        </div>
        <div class="order-content">
          <div class="order-item" v-for="item in orders" :key="item.index">
            <span class="iconfont" :class="item.className"></span>
            <p>{{item.text}}</p>
          </div>
        </div>
      </div>

      <!-- 管理收货地址 -->
      <div class="manage-list">
        <div class="manage-item" @click="getAddress">
          <div class="left">收货地址管理</div>
          <span class="arrow"></span>
        </div>

        <div class="manage-item" @click="getMakePhone('020-110')">
          <div class="left">联系客服</div>
          <span>110</span>
        </div>

        <div class="manage-item">
          <div class="left">意见反馈</div>
          <span class="arrow"></span>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      profileList: [
        {text: '收藏的店铺', number: 0},
        {text: '收藏的商品', number: 0},
        {text: '关注的商品', number: 0},
        {text: '我的足迹', number: 0}
      ],
      orders: [
        {text: '待付款', className: 'icon-daifukuan'},
        {text: '待收货', className: 'icon-icon3'},
        {text: '退货/退款', className: 'icon-icon5'},
        {text: '全部订单', className: 'icon-icon_order'}
      ]
    }
  },

  methods: {
    getAddress () {
      // 获取收货地址
      wx.chooseAddress({
        // 注意：使用箭头函数
        success: (res) => {
          // 拼接地址对象
          this.address = {
            name: res.userName,
            telNumber: res.telNumber
          }
          // 把地址保存到本都
          wx.setStorageSync('myAddress', this.address)
        }
      })
    },
    // 拨打电话
    getMakePhone (num) {
      wx.makePhoneCall({
        phoneNumber: num
      })
    }
  }
}
</script>

<style scoped lang="less">
  @import './main.less';
</style>

第三步：新建main.less文件

.container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  overflow: auto;
  background: #eee;
}

.header {
  background: #DD434F;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80rpx 0 110rpx;
  color: #fff;
  .profile {
    margin: 0 50rpx;
    text-align: center;
    .head-img {
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
      border: 4px #fff solid;
      margin-bottom: 10rpx;
      overflow: hidden;
    }
  }
}

.content {
  margin: -30rpx 20rpx 0;
  .profile-info {
    display: flex;
    justify-content: space-around;
    background: #fff;
    padding: 20rpx 0;
    p {
      line-height: 1.5;
      text-align: center;
      font-size: 14px;
      &:first-child {
        color: #999;
      }
    }
  }
}

.order-list {
  margin-top: 20rpx;
  background: #fff;
  .order-title {
    font-size: 18px;
    padding: 20rpx;
    border-bottom: 1px #eee solid;
  }
  .order-content {
    display: flex;
    justify-content: space-around;
    padding: 20rpx 0;
    .order-item {
      text-align: center;
      line-height: 1.5;
      font-size: 15px;
      span {
        color: red;
        margin-bottom: 10rpx;
        font-size: 32px;
      }
    }
  }
}

.manage-list {
  margin-top: 20rpx;
  background: #fff;
  .manage-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    border-bottom: 1px #eee solid;
    span {
      color: #999;
    }
    .arrow {
      display: block;
      width: 12px;
      height: 12rpx;
      border-top: 1px #999 solid;
      border-right: 1px #999 solid;
      transform: rotate(45deg);
    }
  }
}

效果