首页 > 小程序教程 > 微信小程序账户管理页面设置教程下载

微信小程序账户管理页面设置教程下载

上一篇 下一篇
本文给大家带来的是微信小程序账户管理页面设置教程,制作好以后效果图如下:
一、wxml页面代码如下:
<import src="../common/head.wxml" />
<import src="../common/foot.wxml" />

<view class="container">
  <template is="head" data="{{title: UI[index].title}}"/>

  <view  class="userinfo">
      <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <!--<text class="userinfo-nickname">{{UI[uindex].greeting}}n{{userInfo.nickName}}</text>-->
      <text class="userinfo-nickname" wx:if="{{user !== null}}">You are logged in as, {{user.username}}</text>
      <text class="userinfo-nickname" wx:if="{{user == null}}">Please bind with your Employee ID</text>
  </view>

  <view class="page-section">
    
    <view class="weui-cells__title">{{UI[index].accountMg}}</view>
    <navigator wx:if="{{user == null}}" url="../user/user" class="navigator user">{{UI[index].bind}}</navigator>
    <navigator wx:if="{{user !== null}}" bindtap="unbind" class="navigator user">{{UI[index].unbind}}</navigator>

      <view class="weui-cells__title">{{UI[index].language}}</view>
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_input">
          <view class="weui-cell__hd">
            <view class="weui-label">{{UI[index].currentLan}}</view>
          </view>
          <view class="weui-cell__bd">
            <picker bindchange="bindPickerChange" value="{{index}}" range="{{languages}}">
              <view class="weui-input">{{languages[index]}}</view>
            </picker>
          </view>
        </view>
      </view>
    <!--</view>-->

    <view class="btn-area" id="buttonContainer">
      <button bindtap="save" type="primary">{{UI[index].save}}</button>
    </view>
  </view>    
  <!--<template is="foot" />-->
</view>
 
二、wxss样式文件代码如下:
/* pages/settings/settings.wxss */
@import "../common/lib/weui.wxss";

.picker{
  padding: 19rpx 26rpx;
  background-color: #FFFFFF;
}

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
  text-align: center
}

.navigator {
  background: white;
  border-bottom: 1px solid #eee;
  padding: 0 12px;
  height: 46px;
  line-height: 46px;
}

三、js页面代码如下:
// pages/settings/settings.js
//获取应用实例
const AV = require('../../utils/av-weapp-min');
const { User } = require('../../utils/av-weapp-min');

var app = getApp()
Page({
  data:{
    user: null,
    userInfo: {},
    employeeId: '',
    inputStatus: false,
    languages: ["简体中文", "English", "日本語"], // "繁体中文", "日本語" may be supported in the future
    index: 0,                                    // current default selected item
    UI: [ 
      {title: "设置", language: "选择语言", currentLan: "当前选择", employeeIdTitle: "雇员编号", currentId: "如有疑问请联系人事部门", employeeId: 'EMP10086RD', save: "保存", accountMg: "账户管理", bind: "绑定COMPANY账户", unbind: "解除绑定", unbindMsgTitle: "解除账户绑定" , unbindMsgContent: "我已知晓解除与COMPANY账户的绑定后,将导致部分功能不可用。"},
      {title: "Settings", language: "Change Language", currentLan: "Current", employeeIdTitle: "Employee ID", currentId: "Contact HR Dept.", employeeId: 'EMP10086RD', save: "Save Changes", accountMg: "Account Manage", bind: "Bind with COMPANY ID", unbind: "Unbind COMPANY ID", unbindMsgTitle: "Unbind Account" , unbindMsgContent: "I am aware unbinding COMPANY ID will cause some features to be unavailable."},
      {title: "設定", language: "言語変更", currentLan: "選択項目", employeeIdTitle: "社員番号", currentId: "人事部に連絡してください.", employeeId: 'EMP10086RD', save: "保存", accountMg: "账户管理", bind: "绑定COMPANY账户", unbind: "解除绑定", unbindMsgTitle: "解除账户绑定" , unbindMsgContent: "我已知晓解除与COMPANY账户的绑定后,将导致部分功能不可用。"}
      ]
  },
  bindPickerChange: function(e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
    
    //储存用户对语言的选择
    try {
      wx.setStorageSync('selectedLanguage', e.detail.value);
      app.globalData.settings.language = e.detail.value; //setting global value for app language
    } catch (e) {    
      console.log('储存用户语言选择失败!');
    }
  },
  onLoad:function(options){
    // 设置app语言的全局变量
    var selectedLanguage = app.globalData.settings.language;
    var employeeId = app.globalData.settings.employeeId;
    if(employeeId !== null){
      status = true 
    }


    this.setData({      
      index: selectedLanguage,
      employeeId: employeeId,
      inputStatus: status    
    })
  },
  onShow:function(){
    // 页面显示
    var that = this
    wx.getStorage({
      key: 'userInfo',
      success: function(res) {        
        that.setData({
          user: User.current(),
          userInfo: res.data
        })
      }
    })
  },
  bindKeyInput: function (e) {
    this.setData({
      employeeId: e.detail.value
    })
  },
  save:function(){
    var selectedLanguage = app.globalData.settings.language;
    var title = ["已保存", "Saved", "保存完了"][selectedLanguage];
    wx.setStorageSync('employeeId', this.data.employeeId);
    app.globalData.settings.employeeId = this.data.employeeId;
    wx.showToast({      
      title: title,
      icon: "success",
      duration: 1500
    })
    // 更新视图
    this.setData({
      inputStatus: true,
      employeeId: this.data.employeeId
    })
  },
  unbind:function(){
    var that = this;
    var index = that.data.index;
    var UI = that.data.UI;
    var title = UI[index].unbindMsgTitle;
    var content = UI[index].unbindMsgContent;
    
    wx.showModal({
      title: title,
      content: content,
      success: function(res) {
        if (res.confirm) {
          console.log(AV.User.current());
          AV.User.logOut().then(console.log('Log out'));
          
          console.log(AV.User.current());
          that.setData({
            user: AV.User.current()
          })
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  }
})

模板简介:该模板名称为【微信小程序账户管理页面设置教程下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 29,571次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 06-25
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信图片 微信模板 微信公众平台 html5 企业网站 响应式 微信文章 单页式简历模板 自适应 微信素材
您可能会喜欢的其他模板