【愚公系列】2022年01月 Django商城项目14-用户中心-界面设计

举报
愚公搬代码 发表于 2022/01/20 01:25:03 2022/01/20
【摘要】 一、HTML页面<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <me...

一、HTML页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>小徐商城-用户中心</title>
	<link rel="stylesheet" type="text/css" href="{{ static('css/reset.css') }}" />
	<link rel="stylesheet" type="text/css" href="{{ static('css/main.css') }}" />
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
	<script type="text/javascript">
    let username = "{{ username }}";
    let mobile = "{{ mobile }}";
    let email = "{{ email }}";
    let email_active = "{{ email_active }}";
	</script>
</head>
<body>
	<div id="app" v-cloak=v-cloak>
		<div class="header_con">
			<div class="header">
				<div class="welcome fl">欢迎来到小徐商城!</div>
				<div class="fr">
					<div v-if="username" class="login_btn fl">
						欢迎您:<em>[[ username ]]</em>
						<span>|</span>
						{#                    url 本质是 reverse#}
						<a href="{{ url('users:logout') }}">退出</a>
					</div>
					<div v-else=v-else class="login_btn fl">
						<a href="{{ url('users:login') }}">登录</a>
						<span>|</span>
						<a href="{{ url('users:register') }}">注册</a>
					</div>
					<div class="user_link fl">
						<span>|</span>
						<a href="{{ url('users:center') }}">用户中心</a>
						<span>|</span>
						<a href="../static/cart.html">我的购物车</a>
						<span>|</span>
						<a href="../static/user_center_order.html">我的订单</a>
					</div>
				</div>
			</div>
		</div>

		<div class="search_bar clearfix">
			<a href="index.html" class="logo fl"><img src="{{ static('images/logo.png') }}" /></a>
			<div class="search_wrap fl">
				<form method="get" action="/search/" class="search_con">
					<input type="text" class="input_text fl" name="q" placeholder="搜索商品" />
					<input type="submit" class="input_btn fr" name="" value="搜索" />
				</form>
				<ul class="search_suggest fl">
					<li><a href="#">索尼微单</a></li>
					<li><a href="#">优惠15</a></li>
					<li><a href="#">美妆个护</a></li>
					<li><a href="#">21</a></li>
				</ul>
			</div>
		</div>

		<div class="main_con clearfix">
			<div class="left_menu_con clearfix">
				<h3>用户中心</h3>
				<ul>
					<li><a href="user_center_info.html" class="active">· 个人信息</a></li>
					<li><a href="../static/user_center_order.html">· 全部订单</a></li>
					<li><a href="../static/user_center_site.html">· 收货地址</a></li>
					<li><a href="../static/user_center_pass.html">· 修改密码</a></li>
				</ul>
			</div>
			<div class="right_content clearfix">
				<div class="info_con clearfix">
					<h3 class="common_title2">基本信息</h3>
					<ul class="user_info_list">
						<li><span>用户名:</span>小徐</li>
						<li><span>联系方式:</span>13960699696</li>
						<li>
							<span>Email:</span>
							<input type="text" name="email" class="email" />
							<input type="button" name="" value="保 存" />
							<input type="reset" name="" value="取 消" />
						</li>
					</ul>
				</div>

				<h3 class="common_title2">最近浏览</h3>
				<div class="has_view_list">
					<ul class="goods_type_list clearfix">
						<li>
							<a href="../static/detail.html"><img src="{{ static('images/goods/goods003.jpg') }}" /></a>
							<h4><a href="../static/detail.html">360手机 N6 Pro 全网通</a></h4>
							<div class="operate">
								<span class="price">2699.00</span>
								<span class="unit"></span>
								<a href="#" class="add_goods" title="加入购物车"></a>
							</div>
						</li>

						<li>
							<a href="../static/detail.html"><img src="{{ static('images/goods/goods004.jpg') }}" /></a>
							<h4><a href="#">360手机 N6 Pro 全网通</a></h4>
							<div class="operate">
								<span class="price">2699.00</span>
								<span class="unit"></span>
								<a href="#" class="add_goods" title="加入购物车"></a>
							</div>
						</li>

						<li>
							<a href="../static/detail.html"><img src="{{ static('images/goods/goods005.jpg') }}" /></a>
							<h4><a href="#">360手机 N6 Pro 全网通</a></h4>
							<div class="operate">
								<span class="price">2699.00</span>
								<span class="unit"></span>
								<a href="#" class="add_goods" title="加入购物车"></a>
							</div>
						</li>

						<li>
							<a href="../static/detail.html"><img src="{{ static('images/goods/goods006.jpg') }}" /></a>
							<h4><a href="#">360手机 N6 Pro 全网通</a></h4>
							<div class="operate">
								<span class="price">2699.00</span>
								<span class="unit"></span>
								<a href="#" class="add_goods" title="加入购物车"></a>
							</div>
						</li>

						<li>
							<a href="../static/detail.html"><img src="{{ static('images/goods/goods007.jpg') }}" /></a>
							<h4><a href="#">急速路由</a></h4>
							<div class="operate">
								<span class="price">64.5</span>
								<span class="unit">6.45/500g</span>
								<a href="#" class="add_goods" title="加入购物车"></a>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<div class="footer no-mp">
			<div class="foot_link">
				<a href="#">关于我们</a>
				<span>|</span>
				<a href="#">联系我们</a>
				<span>|</span>
				<a href="#">招聘人才</a>
				<span>|</span>
				<a href="#">友情链接</a>
			</div>
			<p>CopyRight © 2022 福建小徐网络科技有限公司 All Rights Reserved</p>
			<p>电话:13960699696ICP*******8</p>
		</div>
	</div>
	<script type="text/javascript" src="{{ static('js/host.js') }}"></script>
	<script type="text/javascript" src="{{ static('js/common.js') }}"></script>
	<script type="text/javascript" src="{{ static('js/user_center_info.js') }}"></script>
</body>
</html>

二、js文件

var vm = new Vue({
    el: '#app',
    // 修改Vue变量的读取语法,避免和django模板语法冲突
    delimiters: ['[[', ']]'],
    data: {
        host: host,
        username: '',
        mobile: mobile,
        email: email,
        email_active: email_active,
        set_email: false,
        error_email: false,
        error_email_message: '',
        send_email_btn_disabled: false,
        send_email_tip: '重新发送验证邮件',
        histories: []
    },
    // ES6语法
    mounted() {
        // 额外处理用户数据
        this.email_active = (this.email_active=='True') ? true : false;
        this.set_email = (this.email == '') ? true : false;
        this.username = getCookie('username');
        console.log(this.username)
        // 请求浏览历史记录
        //this.browse_histories();
    },
    methods: {
        // 检查email格式
        check_email(){
            var re = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/;
            if (re.test(this.email)) {
                this.error_email = false;
            } else {
                this.error_email_message = '邮箱格式错误';
                this.error_email = true;
                return;
            }
        },
        // 取消保存
        cancel_email(){
            this.email = '';
            this.error_email = false;
        },
        // 保存email
        save_email(){
            // 检查email格式
            this.check_email();

            if (this.error_email == false) {
                var url = this.host + '/emails/';
                axios.put(url, {
                        email: this.email
                    }, {
                        headers: {
                            'X-CSRFToken':getCookie('csrftoken')
                        },
                        responseType: 'json'
                    })
                    .then(response => {
                        if (response.data.code == '0') {
                            this.set_email = false;
                            this.send_email_btn_disabled = true;
                            this.send_email_tip = '已发送验证邮件';
                        } else if (response.data.code == '4101') {
                            location.href = '/login/?next=/info/';
                        } else { // 5000 5001
                            this.error_email_message = response.data.errmsg;
                            this.error_email = true;
                        }
                    })
                    .catch(error => {
                        console.log(error.response);
                    });
            }
        },
        // 请求浏览历史记录
        browse_histories(){
            var url = this.host + '/browse_histories/';
            axios.get(url, {
                    responseType: 'json'
                })
                .then(response => {
                    this.histories = response.data.skus;
                    for(var i=0; i<this.histories.length; i++){
                        this.histories[i].url = '/goods/' + this.histories[i].id + '.html';
                    }
                })
                .catch(error => {
                    console.log(error.response);
                })
        }
    }
});

三、页面效果

在这里插入图片描述

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。