# 個人中心——資料修改
* * * * *
### win頁面
> 代碼如下
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<link rel="stylesheet" type="text/css" href="../../css/aui-win.css" />
<style type="text/css">
</style>
</head>
<body>
<header class="aui-bar aui-bar-nav aui-bar-info" id="aui-header">
<a class="aui-btn aui-btn-info aui-pull-left" tapmode onclick="closeWin()">
<span class="aui-iconfont aui-icon-left"></span>
</a>
<div class="aui-title">資料修改</div>
<a class="aui-iconfont aui-icon-menu aui-pull-right"></a>
</header>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript">
apiready = function(){
api.parseTapmode();
var header = $api.byId('aui-header');
$api.fixStatusBar(header);
var headerPos = $api.offset(header);
var body_h = $api.offset($api.dom('body')).h;
api.openFrame({
name: 'myalter_frm',
url: 'myalter_frm.html',
bounces: false,
rect: {
x: 0,
y: headerPos.h,
w: 'auto',
h: 'auto'
}
})
};
function closeWin(){
api.closeWin();
}
</script>
</html>
~~~
### frame頁面
> 代碼如下
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,demand=no">
<title>資料修改</title>
<link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
<style>
body {
height: auto;
}
.aui-card {
margin-top: 15px;
}
.aui-badge {
background-color: transparent;
color: #666;
font-size: 14px;
}
.aui-input-row .check {
padding: 8px;
color: #f1c40f;
}
.avatar {
margin-top: 13px;
}
.content {
position: absolute;
top: 50%;
right: 30px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
display: inline-block;
padding: 3px 6px;
font-size: 16px;
line-height: 1;
color: #333;
border-radius: 100px;
}
.check {
margin-top: 8px;
}
</style>
</head>
<body>
<div class="aui-content aui-card aui-noborder">
<ul class="aui-user-view my_info">
<li class="aui-user-view-cell aui-img" tapmode onclick="UpdateAvatar()">
<img class="aui-img-object aui-pull-right" id='avatarImg' src="../../image/demo1.png" style=" margin-right: 27px">
<div class="aui-img-body aui-arrow-right">
<h2 class='avatar'>頭像</h2>
</div>
</li>
<li class="aui-list-view-cell" tapmode onclick="UpdateName()">
<a class="aui-arrow-right"> 姓名 <span class="content" id="nicename"></span> </a>
</li>
<li class="aui-list-view-cell" tapmode onclick="UpdateSchool()">
<a class="aui-arrow-right"> 學校 <span class="content" id='school'></span></a>
</li>
<li class="aui-list-view-cell" tapmode onclick="UpdateMajor()">
<a class="aui-arrow-right"> 專業<span class="content" id="major"></span></a>
</li>
<li class="aui-list-view-cell" tapmode onclick="UpdateEquipment()">
<a class="aui-arrow-right"> 設備 <span class="content" id="equipment" ></span> </a>
</li>
<li class="aui-list-view-cell" tapmode onclick="UpdateSpeciality()">
<a class="aui-arrow-right">特長 <span class="content" id="speciality"></span></a>
</li>
<li class="aui-list-view-cell" tapmode onclick="UpdateTerritory()">
<a class="aui-arrow-right"> 研究領域 <span class="content" id='territory'></span> </a>
</li>
<li class="aui-list-view-cell" tapmode onclick="UpdateDetai_demand()">
<a class="aui-arrow-right"> 項目要求 <span class="content" id="demand"></span> </a>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript">
//定義變量
var territory; //研究領域
var demand; //項目要求
var nicename; //姓名
var school; //學校
var major; //專業
var speciality; //特長
apiready = function() {
api.parseTapmode();
nicename = $api.byId('nicename');
school = $api.byId('school');
major = $api.byId('major');
equipment = $api.byId('equipment');
speciality = $api.byId('speciality');
territory = $api.byId('territory');
demand = $api.byId('demand');
user = $api.getStorage('user');
}
//上傳數據
function UpdateData(field, value) {
var uid = $api.getStorage('user').id;
api.ajax({
url : 'http://www.sytest.com.cn/index.php?g=Osapp&m=My&a=update_PerInfo',
method : 'post',
cache : false,
timeout : 30,
dataType : 'json',
data : {
values : {
uid : uid,
value : value,
field : field,
}
}
}, function(ret, err) {
if(ret){
if (ret.msg == 1) {
api.toast({
msg : '修改成功！'
});
}else{
api.toast({
msg:'修改不成功！'
});
}
}else{
api.alert({
msg : ('錯誤碼:' + err.code + '錯誤信息:' + err.msg + '網絡狀態碼:' + err.statusCode)
});
return;
}
});
}
//更換頭像
function UpdateAvatar()
{
api.actionSheet({
cancleTitle : '取消',
buttons : ['拍照', '打開相冊']
}, function(ret, err) {
if (ret.buttonIndex == 3) {
return;
}
var sourceType = (ret.buttonIndex == 1) ? 'camera' : 'album';
api.getPicture({
sourceType : sourceType,
destinationType:'url',
allowEdit : true,
quality : 70,
targetWidth : 100,
targetHeight : 100
}, function(ret, err) {
if (ret.data) {
var img=ret.data;
var uid=$api.getStorage('user').id;
api.ajax({
url : 'http://www.sytest.com.cn/index.php?g=App&m=My&a=updateAvatar',
method : 'post',
cache : false,
timeout : 30,
dataType : 'json',
data : {
files : {upfile : ret.data},
values:{uid:uid}
}
}, function(ret, err) {
if (ret.msg==1) {
$api.attr($api.byId("avatarImg"), 'src', img);
var user = $api.getStorage('user');
user.avatar = img;
$api.setStorage('user', user);
} else {
alert('上傳失敗');
}
});
}else{
alert($api.jsonToStr(err));
}
});
});
}
// 更改姓名
function UpdateName() {
api.prompt({
title : '輸入姓名 ',
buttons : ['確定', '取消']
}, function(ret, err) {
if (ret.buttonIndex == 1) {
var value = ret.text; //內容
var field = 'user_nicename'; //字段名
UpdateData(field, value);
nicename.innerHTML = value;
var user = $api.getStorage('user');
user.user_nicename = value;
$api.setStorage('user', user);
}
});
}
//更改學校
function UpdateSchool() {
api.prompt({
title : '輸入學校名稱 ',
buttons : ['確定', '取消']
}, function(ret, err) {
if (ret.buttonIndex == 1) {
var value = ret.text; //內容
var field = 'user_school'; //字段名
UpdateData(field, value);
nicename.innerHTML = value;
var user = $api.getStorage('user');
user.user_nicename = value;
$api.setStorage('user', user);
}
});
}
//更改專業
function UpdateMajor() {
api.prompt({
title : '輸入專業名稱 ',
buttons : ['確定', '取消']
}, function(ret, err) {
if (ret.buttonIndex == 1) {
var value = ret.text; //內容
var field = 'user_major'; //字段名
UpdateData(field, value);
nicename.innerHTML = value;
var user = $api.getStorage('user');
user.user_nicename = value;
$api.setStorage('user', user);
}
});
}
//更改特長
function UpdateSpeciality() {
api.prompt({
title : '輸入特長 ',
buttons : ['確定', '取消']
}, function(ret, err) {
if (ret.buttonIndex == 1) {
var value = ret.text; //內容
var field = 'user_speciality'; //字段名
UpdateData(field, value);
nicename.innerHTML = value;
var user = $api.getStorage('user');
user.user_nicename = value;
$api.setStorage('user', user);
}
});
}
//更改設備
function UpdateEquipment() {
api.prompt({
title : '輸入設備名稱 ',
buttons : ['確定', '取消']
}, function(ret, err) {
if (ret.buttonIndex == 1) {
var value = ret.text; //內容
var field = 'user_equipment'; //字段名
UpdateData(field, value);
nicename.innerHTML = value;
var user = $api.getStorage('user');
user.user_nicename = value;
$api.setStorage('user', user);
}
});
}
//更改研究領域
function UpdateTerritory() {
api.prompt({
title : '輸入研究領域 ',
buttons : ['確定', '取消']
}, function(ret, err) {
if (ret.buttonIndex == 1) {
var value = ret.text; //內容
var field = 'user_territory'; //字段名
UpdateData(field, value);
nicename.innerHTML = value;
var user = $api.getStorage('user');
user.user_nicename = value;
$api.setStorage('user', user);
}
});
}
//更改項目要求
function UpdateDetai_demand() {
api.prompt({
title : '輸入項目要求 ',
buttons : ['確定', '取消']
}, function(ret, err) {
if (ret.buttonIndex == 1) {
var value = ret.text; //內容
var field = 'user_demand'; //字段名
UpdateData(field, value);
nicename.innerHTML = value;
var user = $api.getStorage('user');
user.user_nicename = value;
$api.setStorage('user', user);
}
});
}
</script>
</html>
~~~
* * * * *
> 效果如下
- APP模塊
- 歡迎頁
- 頭部模塊
- 底部模塊
- 圖文列表
- 商品展示
- 文字列表
- 內容頁一
- 評論頁
- N宮格
- 獲得上一級的欄目名稱
- 搜索模塊
- 圖標
- 幻燈模塊
- 消息頁
- 個人中心
- 個人中心—我的收藏
- 個人中心—資料修改
- 個人中心—我的錢包（賬戶）
- 咨詢頁面
- APP模板
- 注冊 頁面一
- 注冊 頁面二
- 登錄 頁面一
- 登錄 頁面二
- 忘記密碼 頁面一
- 會員中心 首頁一
- 會員中心 首頁二
- 會員中心 首頁三
- 會員中心 資料修改
- 申請審核步驟
- 商品訂單一
- 游戲頁面
- 新聞列表頁
- 圖文列表頁
- 商品列表頁
- 商品詳情頁
- 聊天
- 消息列表
- 聊天界面
- 發布需求
- 前端框架
- CSS Framework
- trim 字符處理
- dom 選擇器
- 樣式
- evt 事件
- 選擇元素
- 屬性
- 文本
- 位置
- json
- 設置
- 提示
- AJAX
- storage 本地存儲
- API對象
- 常用函數
- openWin()
- closeWin()
- apiready
- fixStatusBar(header)
- api.setRefreshHeaderInfo
- api.openFrame
- randomSwitchBtn(index,name)
- APP常用圖片
- asd