tripdemoPC/header.html at master · ArmandAlbert/tripdemoPC · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!-- 头部 start -->
<div id="header-app">
    <header id="header">

        <div class="top_banner">
            <img src="images/top_banner.jpg" alt="">
        </div>
        <div class="shortcut" v-on="">
            <!-- 未登录状态  -->
            <div class="login_out" v-if="!isLogin">
                <a href="login.html">登录</a>
                <a href="register.html">注册</a>
            </div>
            <!-- 登录状态  -->
            <div class="login" v-if="isLogin">
                <span>欢迎回来, {{username}}</span>
                <!-- <img :src="avatarUrl" style="border-radius: 50%; height: 40px;"></img> -->
                <a href="changeinfo.html" class="collection">修改信息</a>
                <a href="myfavors.html" class="collection">我的收藏</a>
                <a href="myfavorite.html" class="collection">我的订单</a>
                <a class="logout" @click="clearLocal">退出</a>
            </div>
        </div>
        <div class="header_wrap">
            <div class="topbar">
                <div class="logo">
                    <a href="/"><img src="images/logo.jpg" alt=""></a>
                </div>
                <div class="search">
                    <input name="" type="text" @keydown="keydownDel" placeholder="请输入路线名称" v-model="search_keyword"
                        class="search_input" autocomplete="off">
                    <button class="search-button" @click="search_all_imgs" style="cursor: pointer;">搜索</button>
                </div>
                <div class="hottel">
                    <div class="hot_pic">
                        <img :src="avatarUrl" style="border-radius: 50%; height: 45px;" alt="">
                    </div>
                    <div class="hot_tel">
                        <p class="hot_time">客服热线(24h)</p>
                        <p class="hot_num">+86-1008611</p>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- 头部 end -->
    <!-- 首页导航 -->
    <div class="navitem">
        <ul class="nav">
            <li class="nav-active"><a href="index.html">首页</a></li>
            <li><a href="route_list.html">门票</a></li>
            <li><a href="route_list.html">酒店</a></li>
            <li><a href="route_list.html">香港车票</a></li>
            <li><a href="route_list.html">出境游</a></li>
            <li><a href="route_list.html">国内游</a></li>
            <li><a href="route_list.html">港澳游</a></li>
            <li><a href="route_list.html">抱团定制</a></li>
            <li><a href="route_list.html">全球自由行</a></li>
            <li><a href="favoriterank.html">收藏排行榜</a></li>
        </ul>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/common.js"></script>
<script>
    let mv = new Vue({
        el: "#header-app",
        data: {
            username: '',
            password: '',
            loginflag: false,
            isLogin: false,
            search_keyword: "",
            all_img_header: "",
            avatarUrl: "",
        },
        created() {
            let self = this;
            if (localStorage.getItem("username") != null) {
                this.username = localStorage.getItem("username");
                this.isLogin = true;
            };
            self.avatarUrl = window.domain + window.localStorage.getItem("userAvatar");
            console.log(self.avatarUrl);
        },
        methods: {
            // 处理键盘事件
            keydownDel: function (event) {
                // 判断是否按下回车
                if (event.key == "Enter") {
                    // 按下Enter即搜索
                    this.search_all_imgs()
                }
            },
            //搜索当前项目
            search_all_imgs: function () {
                //搜索当前项目
                let self = this;
                axios.get(window.domain + '/items', {       // 还可以直接把参数拼接在url后边
                    params: { "name": self.search_keyword }
                }).then(function (res) {
                    // console.log(res.data.data);
                    self.all_img_header = res.data.data;
                    // console.log(self.all_img_header);
                    window.localStorage.removeItem("all_img_header");
                    window.localStorage.setItem("all_img_header", JSON.stringify(self.all_img_header));
                    window.location.href = "route_list.html";
                }).catch(function (error) {
                    console.log(error);
                });
            },
            clearLocal: function () {
                localStorage.clear();
                window.location.reload();
            }
        }
    })
</script>
<style>
    .logout {
        color: aqua;
        cursor: pointer;
    }
</style>