|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<title>Personal Center</title>
|
|
|
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
|
|
|
<script src="/static/js/jquery-3.6.0.js" type="text/javascript" charset="UTF-8"></script>
|
|
|
<script src="/static/bootstrap/js/bootstrap.min.js" type="text/javascript" charset="UTF-8"></script>
|
|
|
<style>
|
|
|
body{
|
|
|
background-color: #d9edf7;
|
|
|
}
|
|
|
.header{
|
|
|
top:0;
|
|
|
left: 0;
|
|
|
margin:0;
|
|
|
padding: 0;
|
|
|
width: 100%;
|
|
|
height: 50px;
|
|
|
background: rgba(1,1,1,.9);
|
|
|
z-index: 99;
|
|
|
position:fixed;
|
|
|
}
|
|
|
.title{
|
|
|
margin-left: 50px;
|
|
|
color: white;
|
|
|
font-size: 20px;
|
|
|
line-height: 50px;
|
|
|
font-size: x-large;
|
|
|
}
|
|
|
.main{
|
|
|
width: 1200px;
|
|
|
height: 800px;
|
|
|
margin: 70px auto 0;
|
|
|
}
|
|
|
.left{
|
|
|
float: left;
|
|
|
width: 300px;
|
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
.left_info{
|
|
|
width: 300px;
|
|
|
height: 230px;
|
|
|
background-color: #9d9d9d;
|
|
|
}
|
|
|
.userphoto{
|
|
|
width: 80px;
|
|
|
height: 80px;
|
|
|
border-radius: 50%;
|
|
|
margin:0 auto 0;
|
|
|
display: block;
|
|
|
}
|
|
|
.user_vip{
|
|
|
width: 300px;
|
|
|
height: 120px;
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
|
|
|
}
|
|
|
.userphoto img{
|
|
|
width: 80px;
|
|
|
height: 80px;
|
|
|
border-radius: 50%;
|
|
|
margin-top:20px;
|
|
|
}
|
|
|
.username{
|
|
|
width: 300px;
|
|
|
height: 30px;
|
|
|
font-size: 16px;
|
|
|
line-height: 30px;
|
|
|
margin-top: 20px;
|
|
|
text-align: center;
|
|
|
color: white;
|
|
|
list-style: none;
|
|
|
}
|
|
|
.user_power{
|
|
|
margin-top:10px;
|
|
|
width: 300px;
|
|
|
height: 50px;
|
|
|
font-size: 16px;
|
|
|
line-height: 25px;
|
|
|
}
|
|
|
.user_power li{
|
|
|
width: 100px;
|
|
|
height: 50px;
|
|
|
text-align: center;
|
|
|
color: white;
|
|
|
list-style: none;
|
|
|
}
|
|
|
.left_nav{
|
|
|
background: white;
|
|
|
height: 570px;
|
|
|
background-color: #b9def0;
|
|
|
}
|
|
|
.left_nav ul li{
|
|
|
width: 250px;
|
|
|
height: 50px;
|
|
|
margin-left:25px;
|
|
|
line-height:50px;
|
|
|
font-size: 20px;
|
|
|
list-style: none;
|
|
|
|
|
|
}
|
|
|
.right{
|
|
|
margin-left: 320px;
|
|
|
width: 850px;
|
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
.basic{
|
|
|
float: left;
|
|
|
margin-left: 10px;
|
|
|
padding-left: 40px;
|
|
|
width: 100%;
|
|
|
min-height: 100%;
|
|
|
|
|
|
}
|
|
|
.basic_title{
|
|
|
padding: 26px 0;
|
|
|
color: #ec443f;
|
|
|
font-size: 18px;
|
|
|
border-bottom: 1px solid #e1e1e1;
|
|
|
margin-bottom: 30px;
|
|
|
}
|
|
|
.hp{
|
|
|
text-align: center;
|
|
|
float: left;
|
|
|
color: #333;
|
|
|
background: #d9edf7;
|
|
|
width: 220px;
|
|
|
|
|
|
}
|
|
|
.hp_content{
|
|
|
text-align: center;
|
|
|
float: left;
|
|
|
color: #333;
|
|
|
background: #fff;
|
|
|
width: 220px;
|
|
|
}
|
|
|
.hp_change{
|
|
|
position: relative;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
.hp_bt{
|
|
|
cursor: pointer;
|
|
|
margin: 20px auto 0;
|
|
|
width: 182px;
|
|
|
height: 56px;
|
|
|
line-height: 56px;
|
|
|
color: #5b5b5b;
|
|
|
background-color: #9acfea;
|
|
|
border-radius: 10px;
|
|
|
border: 1px;
|
|
|
font-size: 18px;
|
|
|
padding: 0;
|
|
|
}
|
|
|
.dm{
|
|
|
float: right;
|
|
|
width: 495px;
|
|
|
margin-left: 58px;
|
|
|
}
|
|
|
.dm_name{
|
|
|
color: #666;
|
|
|
position: relative;
|
|
|
margin: 20px 0;
|
|
|
padding-left: 90px;
|
|
|
height: 30px;
|
|
|
line-height: 30px;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
.dm_name-text{
|
|
|
width: 240px;
|
|
|
font-size: 12px;
|
|
|
height: 30px;
|
|
|
padding-left: 10px;
|
|
|
}
|
|
|
.dm_gender{
|
|
|
width: 40px;
|
|
|
font-size: 12px;
|
|
|
height: 30px;
|
|
|
padding-left: 10px;
|
|
|
|
|
|
}
|
|
|
.dm_bri{
|
|
|
width: 50px;
|
|
|
font-size: 12px;
|
|
|
height: 30px;
|
|
|
padding-left: 10px;
|
|
|
}
|
|
|
|
|
|
|
|
|
.save{
|
|
|
cursor: pointer;
|
|
|
border-radius: 5px;
|
|
|
width: 100px;
|
|
|
height: 40px;
|
|
|
color: #fff;
|
|
|
font-size: 18px;
|
|
|
line-height: 40px;
|
|
|
border: none;
|
|
|
background-color: #ed3931;
|
|
|
padding: 0;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="col-md-2 col-md-offset-1">
|
|
|
<div class="row">
|
|
|
<span style="font-size: xx-large">第三组影院</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-md-8">
|
|
|
<div class="row">
|
|
|
<div class="col-md-2" style="margin-top: 7px;margin-left: 50px">
|
|
|
<a href="/" style="font-size: x-large">首页</a>
|
|
|
</div>
|
|
|
<div class="col-md-2" style="margin-top: 7px;margin-left: 10px">
|
|
|
<a href="/" style="font-size: x-large">电影</a>
|
|
|
</div>
|
|
|
<div class="col-md-2" style="margin-top: 7px;margin-left: 10px">
|
|
|
<a href="/mall" style="font-size: x-large">商城</a>
|
|
|
</div>
|
|
|
<div class="col-md-2" style="margin-top: 7px;margin-left: 10px">
|
|
|
<a href="" style="font-size: x-large" onclick="Charge()">充值</a>
|
|
|
<script>
|
|
|
function Charge(){
|
|
|
var money = prompt("请输入充值金额");
|
|
|
$.ajax({
|
|
|
url: '/user/charge/',
|
|
|
type: "GET",
|
|
|
data:{'money':money},
|
|
|
success: function (data) {
|
|
|
if (data.msg == "pass"){
|
|
|
alert("充值成功！！！")
|
|
|
}
|
|
|
else {
|
|
|
alert("非数字！！充值失败！！！")
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
</script>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="main" style="display: inline-block">
|
|
|
<div class="left">
|
|
|
<div class="left_info">
|
|
|
<ul class="user_vip">
|
|
|
<li class="userphoto"><img src="/static/img/{{ user.image }}" alt=""></li>
|
|
|
<li class="username"><span style="color: gold">{{ user.vip.level }}</span></li>
|
|
|
</ul>
|
|
|
<ul class="user_power">
|
|
|
<li>
|
|
|
<sapn>我的积分</sapn>
|
|
|
<br>
|
|
|
<span style="margin-left: 50px">{{ user.vip.score }}</span>
|
|
|
</li>
|
|
|
<li>
|
|
|
<sapn>我的余额</sapn>
|
|
|
<br>
|
|
|
<span style="margin-left: 50px">{{ user.vip.money }}</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="left_nav">
|
|
|
<ul>
|
|
|
<li><a style="text-decoration:none" href="/user/center/userinfo"><font color="black">基 本 信 息</font></a></li>
|
|
|
<li><a style="text-decoration:none" href="/user/center/movieorder?type=2" ><font color="black">电 影 订 单 信 息</font></a></li>
|
|
|
<li><a style="text-decoration:none" href="/user/center/mallorder?type=2" ><font color="black">商 城 订 单 信 息</font></a></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="right" >
|
|
|
<div class="basic" style="display: inline-block">
|
|
|
<div class="basic_title">用户个人信息</div>
|
|
|
<div class="hp">
|
|
|
<img class="hp_content" src="/static/img/{{ user.image }}" alt="" height="225" width="224">
|
|
|
<div class="hp_change">
|
|
|
<form>
|
|
|
{% csrf_token %}
|
|
|
<input type="file" name="image" id="file" style="display: none">
|
|
|
<input type="button" class="hp_bt" id="choose_image" value="更换头像">
|
|
|
</form>
|
|
|
|
|
|
<script>
|
|
|
$(document).ready(function(){
|
|
|
$("#choose_image").click(function(){
|
|
|
$("#file").trigger("click");
|
|
|
});
|
|
|
});
|
|
|
|
|
|
$('#file').change(function(){
|
|
|
FileUpload();
|
|
|
var imgfile = $(this)[0].files[0];
|
|
|
var reader = new FileReader();
|
|
|
reader.readAsDataURL(imgfile);
|
|
|
reader.onload = function (){
|
|
|
$("#file").attr("src",reader.result)
|
|
|
};
|
|
|
{#alert(formFile);#}
|
|
|
})
|
|
|
|
|
|
function FileUpload() {
|
|
|
var formdata = new FormData;
|
|
|
formdata.append("image",$("#file")[0].files[0]);
|
|
|
formdata.append("csrfmiddlewaretoken",$("[name='csrfmiddlewaretoken']").val());
|
|
|
$.ajax({
|
|
|
processData:false,
|
|
|
contentType:false,
|
|
|
url: '/user/upload/',
|
|
|
type: 'post',
|
|
|
data: formdata,
|
|
|
dataType:'json',
|
|
|
success:function (arg){
|
|
|
if(arg.state == 1){
|
|
|
alert('上传成功！！！')
|
|
|
window.location.href="/user/upload/";
|
|
|
}else{
|
|
|
alert('上传失败！！！')
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
</script>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<form class="dm" style="display: inline-block" method="post" action="/user/center/userinfo">
|
|
|
{% csrf_token %}
|
|
|
<div class="dm_name" style="display: inline-block">
|
|
|
<p style="display: inline-block">昵称：</p>
|
|
|
<span style="display: inline-block">
|
|
|
<input type="text" name="username" id="dm_Nikename" class="dm_name-text" placeholder="2-15个字，支持中文，英文，字符，数字" value="{{ user.username }}">
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="dm_name" style="display: inline-block">
|
|
|
<p style="display: inline-block">姓名：</p>
|
|
|
<span style="display: inline-block">
|
|
|
<input type="text" name="realname" id="dm_Nikename" class="dm_name-text" placeholder="2-15个字，支持中文，英文，字符，数字" value="{{ user.realname }}">
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="dm_name">
|
|
|
<p style="display: inline-block">性别：</p>
|
|
|
<span style="display:inline-block;">
|
|
|
<input class="dm_name-text" type="text" name="gender" value="{{ user.gender }}">
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="dm_name">
|
|
|
<p style="display: inline-block">年龄：</p>
|
|
|
<span style="display:inline-block;">
|
|
|
<input class="dm_name-text" type="text" name="age" value="{{ user.age }}">
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="dm_name">
|
|
|
<p style="display: inline-block">手机：</p>
|
|
|
<span style="display:inline-block;">
|
|
|
<input class="dm_name-text" type="text" name="phonenumber" value="{{ user.phonenumber }}">
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="dm_name">
|
|
|
<p style="display: inline-block">邮箱：</p>
|
|
|
<span style="display:inline-block;">
|
|
|
<input class="dm_name-text" type="text" name="email" value="{{ user.email }}">
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="dm_name">
|
|
|
<p style="display: inline-block">生日：</p>
|
|
|
<span style="display: inline-block">
|
|
|
<input class="dm_bri" type="text" name="year" id="dm_Year" value="{{ user.birthday.year }}">
|
|
|
<span style="display:inline-block;">年</span>
|
|
|
</span>
|
|
|
<span style="display: inline-block">
|
|
|
<input class="dm_bri" type="text" name="month" id="dm_Year" value="{{ user.birthday.month }}">
|
|
|
<span style="display:inline-block;">月</span>
|
|
|
</span>
|
|
|
<span style="display: inline-block">
|
|
|
<input class="dm_bri" type="text" name="day" id="dm_Year" value="{{ user.birthday.day }}">
|
|
|
<span style="display:inline-block;">日</span>
|
|
|
</span>
|
|
|
</div>
|
|
|
{# <div class="dm_name">#}
|
|
|
{# <p style="display: inline-block">生活状态：</p>#}
|
|
|
{# <span style="display:inline-block;">#}
|
|
|
{# <label class="radio-inline">#}
|
|
|
{# <input type="radio" name="statu" id="statu-love" value="option1">热恋#}
|
|
|
{# </label>#}
|
|
|
{# <label class="radio-inline">#}
|
|
|
{# <input type="radio" name="statu" id="statu-single" value="option2">单身#}
|
|
|
{# </label>#}
|
|
|
{# <label class="radio-inline">#}
|
|
|
{# <input type="radio" name="statu" id="gender-married" value="option2">已婚#}
|
|
|
{# </label>#}
|
|
|
{# </span>#}
|
|
|
{# </div>#}
|
|
|
|
|
|
<div class="dm_name" style="display: inline-block">
|
|
|
<p style="display: inline-block">个性签名</p>
|
|
|
<span style="display: inline-block">
|
|
|
<input type="text" name="personality" id="dm_Sign" class="dm_name-text" placeholder="20个字以内" value="{{ user.personality }}">
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="dm_name">
|
|
|
<input type="submit" class="save" value="保存">
|
|
|
</div>
|
|
|
</form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</body>
|
|
|
</html> |
