From b565a8a1d99ed15c313dff9ace86eb0c406139bb Mon Sep 17 00:00:00 2001
From: pjhmizn49 <zhangjiadi2008@126.com>
Date: Fri, 13 Dec 2024 09:26:23 +0800
Subject: [PATCH] ADD file via upload

---
 flower_user_front/src/views/VisitorView.vue | 524 ++++++++++++++++++++
 1 file changed, 524 insertions(+)
 create mode 100644 flower_user_front/src/views/VisitorView.vue

diff --git a/flower_user_front/src/views/VisitorView.vue b/flower_user_front/src/views/VisitorView.vue
new file mode 100644
index 0000000..7957cc7
--- /dev/null
+++ b/flower_user_front/src/views/VisitorView.vue
@@ -0,0 +1,524 @@
+<template>
+    <div class="home" style="height: 100vh;">
+        <div class="header">
+            <div class="header-top">
+                <div class="top-left">
+                    <span style="font-size: 14px;margin-left: 30px">鲜花定制好花网，提供鲜花定制预定和送花上门服务！</span>
+                    <span style="color: red; font-weight: bold;">123-456-7890</span>
+                </div>
+                <div class="top-right">
+                    <el-button class="top-button" @click="navTo('/cart')" type="text">
+                        <i class="el-icon-shopping-cart-2" style="font-weight: bold;font-size: 16px"></i>
+                        购物车
+                    </el-button>
+                    <el-button class="top-button" @click="navTo('/user')" type="text">
+                        <i class="el-icon-user" style="font-weight: bold;font-size: 16px"></i>
+                        个人中心
+                    </el-button>
+                    <el-button class="top-button" @click="navTo('/chat')" type="text">
+                        <i class="el-icon-chat-dot-round" style="font-weight: bold;font-size: 16px"></i>
+                        联系客服定制鲜花
+                    </el-button>
+                </div>
+            </div>
+            <div class="header-bottom">
+                <div class="bottom-left">
+                    <a href="/home"><img src="@/assets/homeLogo.png" style="width: 400px;height: 400px;margin-left: 50px"></a>
+                </div>
+                <div class="bottom-center" style="display: flex">
+                    <el-input placeholder="请输入搜索内容" v-model="input"></el-input>
+                    <el-button @click="navTo('/search?key=' + input)" type="danger" icon="el-icon-search" round ></el-button>
+                </div>
+                <div class="bottom-right">
+                    <img src="@/assets/phone.png" style="width: 280px;height: 70px;margin-right: 50px">
+                </div>
+            </div>
+        </div>
+        <!--  头部导航    -->
+        <div class="headNav" style="display: flex;margin-left: 13px;border-bottom:2px solid #ff3134">
+            <div style="height:60px;width:300px;background-color:#ff3134;color:white;line-height:60px;">
+                <el-link @click="navTo('/search?key=' + '')" style="font-size:20px;font-weight:bold;" :underline="false" type="text">全部商品导航</el-link>
+            </div>
+            <div style="height:60px;width:180px;line-height:60px">
+                <el-link @click="navTo('/search?key=' + '鲜花')" class="navButton" :underline="false" type="text">鲜花</el-link>
+            </div>
+            <div style="height:60px;width:180px;line-height:60px">
+                <el-link @click="navTo('/search?key=' + '爱情鲜花')" class="navButton" :underline="false" type="text">爱情鲜花</el-link>
+            </div>
+            <div style="height:60px;width:180px;line-height:60px">
+                <el-link @click="navTo('/search?key=' + '开业鲜花')" class="navButton" :underline="false" type="text">开业鲜花</el-link>
+            </div>
+            <div style="height:60px;width:180px;line-height:60px">
+                <el-link @click="navTo('/search?key=' + '节日鲜花')" class="navButton" :underline="false" type="text">节日鲜花</el-link>
+            </div>
+            <div style="height:60px;width:180px;line-height:60px">
+                <el-link @click="navTo('/search?key=' + '商务鲜花')" class="navButton" :underline="false" type="text">商务鲜花</el-link>
+            </div>
+            <div style="height:60px;width:180px;line-height:60px">
+                <el-link @click="navTo('/search?key=' + '长辈鲜花')" class="navButton" :underline="false" type="text">长辈鲜花</el-link>
+            </div>
+        </div>
+        <!--  分类、轮播图、用户中心    -->
+        <div style="display: flex">
+            <!--分类-->
+            <div class="menu" style="flex: 2;">
+                <div class="menu-item">
+                    <div class="item-title">鲜花用途</div>
+                    <div class="item">
+                        <el-link @click="navTo('/search?key=' + '爱情')" :underline="false" class="menu-button" type="text">爱情鲜花</el-link>
+                        <el-link @click="navTo('/search?key=' + '生日')" :underline="false" class="menu-button" type="text">生日鲜花</el-link>
+                        <el-link @click="navTo('/search?key=' + '婚庆')" :underline="false" class="menu-button" type="text">婚庆鲜花</el-link>
+                        <el-link @click="navTo('/search?key=' + '长辈')" :underline="false" class="menu-button" type="text">问候长辈</el-link>
+                        <el-link @click="navTo('/search?key=' + '慰问')" :underline="false" class="menu-button" type="text">探病慰问</el-link>
+                        <el-link @click="navTo('/search?key=' + '商务')" :underline="false" class="menu-button" type="text">商务鲜花</el-link>
+                    </div>
+                </div>
+                <div class="menu-item">
+                    <div class="item-title">鲜花花材</div>
+                    <div class="item">
+                        <el-link @click="navTo('/search?key=' + '玫瑰')" :underline="false" class="menu-button" type="text">玫瑰花</el-link>
+                        <el-link @click="navTo('/search?key=' + '康乃馨')" :underline="false" class="menu-button" type="text">康乃馨</el-link>
+                        <el-link @click="navTo('/search?key=' + '百合')" :underline="false" class="menu-button" type="text">百合花</el-link>
+                        <el-link @click="navTo('/search?key=' + '向日葵')" :underline="false" class="menu-button" type="text">向日葵</el-link>
+                        <el-link @click="navTo('/search?key=' + '满天星')" :underline="false" class="menu-button" type="text">满天星</el-link>
+                        <el-link @click="navTo('/search?key=' + '紫罗兰')" :underline="false" class="menu-button" type="text">紫罗兰</el-link>
+                    </div>
+                </div>
+                <div class="menu-item">
+                    <div class="item-title">鲜花类别</div>
+                    <div class="item">
+                        <el-link @click="navTo('/search?key=' + '花束')" :underline="false" class="menu-button" type="text">日常花束</el-link>
+                        <el-link @click="navTo('/search?key=' + '花盒')" :underline="false" class="menu-button" type="text">创意花盒</el-link>
+                        <el-link @click="navTo('/search?key=' + '永生花')" :underline="false" class="menu-button" type="text">永生瓶花</el-link>
+                        <el-link @click="navTo('/search?key=' + '手提花篮')" :underline="false" class="menu-button" type="text">手提花篮</el-link>
+                        <el-link @click="navTo('/search?key=' + '开业花篮')" :underline="false" class="menu-button" type="text">开业花篮</el-link>
+                        <el-link @click="navTo('/search?key=' + '会议桌花')" :underline="false" class="menu-button" type="text">会议桌花</el-link>
+                    </div>
+                </div>
+            </div>
+            <!--轮播图-->
+            <div style="flex: 6">
+                <el-carousel height="500px">
+                    <el-carousel-item v-for="item in carousel_pic" :key="item">
+                        <img :src="item" style="width: 100%;height:500px" alt="">
+                    </el-carousel-item>
+                </el-carousel>
+            </div>
+            <!--用户中心-->
+            <div class="user-center" style="flex: 2">
+                <el-card shadow="hover" style="margin-top: 10px;margin-left:10px;border-radius: 10px;height: 490px">
+                    <!--用户信息-->
+                    <div style="margin-top: 30px">
+                        <el-avatar :size="80" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
+                        <h3>你好！欢迎来到好花</h3>
+                    </div>
+                    <div class="visitor-hello" style="margin-top: 80px;display: flex">
+                        <el-button class="visitor-button" @click="navToTrue('/register')" style="margin-left: 20px;font-size: 16px;font-weight: bold" type="danger" plain>注册</el-button>
+                        <el-button class="visitor-button" @click="navToTrue('/login')" style="margin-left: 20px;font-size: 16px;font-weight: bold" type="danger">登录</el-button>
+                    </div>
+                </el-card>
+            </div>
+        </div>
+        <!--  公告    -->
+        <div style="margin:50px 10px 20px 10px;text-align: left;height: 20px">
+            <i class="el-icon-bell" style="font-size: 18px;font-weight: bold"></i>
+            <span style="font-weight: bolder;margin-left: 5px">公告： </span>
+            <span>{{topNotice}}</span>
+        </div>
+        <!--  商品专区    -->
+        <div>
+            <div class="product-zone">
+                <div class="zone-top">
+                    <span class="zone-title">爱情鲜花</span>
+                    <span class="zone-detail">送·让你怦然心动的人</span>
+                </div>
+                <div class="zone-bottom" style="display: flex">
+                    <div class="zone-left" style="flex:2;height: 830px;background-color: #f7f7f7">
+                        <img src="@/assets/product_zone1.jpg" style="width: 100%" alt="">
+                        <div class="zone-title2">爱情鲜花专区</div>
+                        <div class="zone-detail2">结婚鲜花订制花店爱情鲜花，精选适合送给爱人</div>
+                        <button @click="navTo('/search?key=' + '爱情鲜花')" class="zone-button">进入专区</button>
+                    </div>
+                    <div class="zone-main" style="flex:7;height: 830px">
+                        <el-row :gutter="30">
+                            <el-col class="product-col" :span="8" v-for="item in this.flowers_m">
+                                <el-card style="margin: 5px auto" shadow="always">
+                                    <el-link @click="navTo('/detail?id=' + item.flower_id)" :underline="false" style="color:#333">
+                                        <img :src="require('/Users/zhangjiadi/IdeaProjects/毕业设计/picFiles'+item.flower_pic)" style="height: 280px;width: 280px" alt="">
+                                        <div class="product-name">{{ item.flower_name }}</div>
+                                        <div style="color: red" class="product-price">
+                                            ￥{{ item.flower_price.toFixed(2) }}
+                                            <span style="margin-left: 150px;font-size: 14px;color: #8c8c8c">已售：{{ item.flower_sale }}</span>
+                                        </div>
+                                    </el-link>
+                                </el-card>
+                            </el-col>
+                        </el-row>
+                    </div>
+                </div>
+            </div>
+            <div class="product-zone">
+                <div class="zone-top">
+                    <span class="zone-title">送长辈鲜花</span>
+                    <span class="zone-detail">赠·父母/恩师/长辈</span>
+                </div>
+                <div class="zone-bottom" style="display: flex">
+                    <div class="zone-left" style="flex:2;height: 830px;background-color: #f7f7f7">
+                        <img src="@/assets/product_zone2.jpg" style="width: 100%" alt="">
+                        <div class="zone-title2">长辈鲜花专区</div>
+                        <div class="zone-detail2">网上订制鲜花，送父母，送亲人，送恩师</div>
+                        <button @click="navTo('/search?key=' + '长辈鲜花')" class="zone-button">进入专区</button>
+                    </div>
+                    <div class="zone-main" style="flex:7;height: 830px">
+                        <el-row :gutter="30">
+                            <el-col class="product-col" :span="8" v-for="item in this.flowers_k">
+                                <el-card style="margin: 5px auto" shadow="always">
+                                    <el-link @click="navTo('/detail?id=' + item.flower_id)" :underline="false" style="color:#333">
+                                        <img :src="require('/Users/zhangjiadi/IdeaProjects/毕业设计/picFiles'+item.flower_pic)" style="height: 280px;width: 280px" alt="">
+                                        <div class="product-name">{{ item.flower_name }}</div>
+                                        <div class="product-price" style="color: red">
+                                            ￥{{ item.flower_price.toFixed(2) }}
+                                            <span style="margin-left: 150px;font-size: 14px;color: #8c8c8c">已售：{{ item.flower_sale }}</span>
+                                        </div>
+                                    </el-link>
+                                </el-card>
+                            </el-col>
+                        </el-row>
+                    </div>
+                </div>
+            </div>
+            <img src="../assets/break.jpg" alt="">
+            <div class="product-zone">
+                <div class="zone-top">
+                    <span class="zone-title">商务鲜花</span>
+                    <span class="zone-detail">贺·生意兴隆/财源滚滚</span>
+                </div>
+                <div class="zone-bottom" style="display: flex">
+                    <div class="zone-left" style="flex:2;height: 830px;background-color: #f7f7f7">
+                        <img src="@/assets/product_zone3.jpg" style="width: 100%" alt="">
+                        <div class="zone-title2">商务鲜花专区</div>
+                        <div class="zone-detail2">鲜花订制开业花篮、会议鲜花，鲜花批发量大从优</div>
+                        <button @click="navTo('/search?key=' + '商务鲜花')" class="zone-button">进入专区</button>
+                    </div>
+                    <div class="zone-main" style="flex:7;height: 830px">
+                        <el-row :gutter="30">
+                            <el-col class="product-col" :span="8" v-for="item in this.flowers_s">
+                                <el-card style="margin: 5px auto" shadow="always">
+                                    <el-link @click="navTo('/detail?id=' + item.flower_id)" :underline="false" style="color:#333">
+                                        <img :src="require('/Users/zhangjiadi/IdeaProjects/毕业设计/picFiles'+item.flower_pic)" style="height: 280px;width: 280px" alt="">
+                                        <div class="product-name">{{ item.flower_name }}</div>
+                                        <div class="product-price" style="color: red">
+                                            ￥{{ item.flower_price.toFixed(2) }}
+                                            <span style="margin-left: 150px;font-size: 14px;color: #8c8c8c">已售：{{ item.flower_sale }}</span>
+                                        </div>
+                                    </el-link>
+                                </el-card>
+                            </el-col>
+                        </el-row>
+                    </div>
+                </div>
+            </div>
+            <div class="product-zone">
+                <div class="zone-top">
+                    <span class="zone-title">永生花</span>
+                    <span class="zone-detail">许·一生承诺</span>
+                </div>
+                <div class="zone-bottom" style="display: flex">
+                    <div class="zone-left" style="flex:2;height: 830px;background-color: #f7f7f7">
+                        <img src="@/assets/product_zone4.jpg" style="width: 100%" alt="">
+                        <div class="zone-title2">永生花专区</div>
+                        <div class="zone-detail2">订制鲜花店永生花进口花材精心雕琢，情谊永不凋谢</div>
+                        <button @click="navTo('/search?key=' + '永生花')" class="zone-button">进入专区</button>
+                    </div>
+                    <div class="zone-main" style="flex:7;height: 830px">
+                        <el-row :gutter="30">
+                            <el-col class="product-col" :span="8" v-for="item in this.flowers_y">
+                                <el-card style="margin: 5px auto" shadow="always">
+                                    <el-link @click="navTo('/detail?id=' + item.flower_id)" :underline="false" style="color:#333">
+                                        <img :src="require('/Users/zhangjiadi/IdeaProjects/毕业设计/picFiles'+item.flower_pic)" style="height: 280px;width: 280px" alt="">
+                                        <div class="product-name">{{ item.flower_name }}</div>
+                                        <div class="product-price" style="color: red">
+                                            ￥{{ item.flower_price.toFixed(2) }}
+                                            <span style="margin-left: 150px;font-size: 14px;color: #8c8c8c">已售：{{ item.flower_sale }}</span>
+                                        </div>
+                                    </el-link>
+                                </el-card>
+                            </el-col>
+                        </el-row>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!--   页脚   -->
+        <div style="margin-top: 150px;background-color: #f7f7f7;height: 150px">
+            <common-footer />
+        </div>
+    </div>
+</template>
+
+<script>
+import Cookie from "js-cookie";
+import CommonFooter from "@/components/CommonFooter.vue";
+
+export default {
+    components:{
+        CommonFooter
+    },
+    data(){
+        return{
+            carousel_pic:[
+                require('@/assets/home1.jpg'),
+                require('@/assets/home2.jpg'),
+                require('@/assets/home3.jpg'),
+                require('@/assets/home4.jpg')
+            ],
+            notices:[{
+                notice_id:1,
+                notice_title:'',
+                notice_content:'',
+                notice_time:''
+            }],
+            topNotice:'好花网自成立以来，销量连年增长，规模和影响力也在逐年增大，在鲜花礼品网站中占有一席之地。',
+            flowers_m:[{
+                flower_id:1,
+                flower_name:'',
+                flower_pic:'',
+                flower_price:1.00,
+                flower_sale:1
+            }],
+            flowers_k:[{
+                flower_id:1,
+                flower_name:'',
+                flower_pic:'',
+                flower_price:1.00,
+                flower_sale:1
+            }],
+            flowers_s:[{
+                flower_id:1,
+                flower_name:'',
+                flower_pic:'',
+                flower_price:1.00,
+                flower_sale:1
+            }],
+            flowers_y:[{
+                flower_id:1,
+                flower_name:'',
+                flower_pic:'',
+                flower_price:1.00,
+                flower_sale:1
+            }],
+            input:''
+        }
+    },
+    mounted() {
+        this.getFlowerRecommend(100001);
+        this.getFlowerRecommend(100002);
+        this.getFlowerRecommend(100016);
+        this.getFlowerRecommend(100018);
+        this.getNotice();
+    },
+    methods:{
+        getNotice(){
+            const _this=this;
+            try {
+                axios({
+                    method: 'post',
+                    url: 'http://localhost:8181/notice/list',
+                    headers: {
+                        Authorization: Cookie.get('token'),
+                        'Content-Type': 'application/json'
+                    },
+                    data:{
+                        page:1,
+                        page_size:10
+                    }
+                }).then(function (response){
+                    if (response.data.code===200){
+                        //查询所有信息成功
+                        _this.notices=response.data.data.notices;
+
+                        //实现公告的轮播
+                        let i = 0;
+                        if(_this.notices && _this.notices.length){
+                            _this.topNotice = _this.notices[0].notice_content
+                            setInterval(() => {
+                                _this.topNotice = _this.notices[i].notice_content
+                                i++
+                                if(i === _this.notices.length){
+                                    i = 0
+                                }
+                            },5000)
+                        }
+
+                    }
+                    if (response.data.code===401){
+                        _this.$message.warning('身份验证失败,请重新登录!')
+                    }
+                    if (response.data.code===403){
+                        const message = response.data.msg;
+                        this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
+                            confirmButtonText: '确定'
+                        })
+                    }
+                });
+            }catch (error){
+                this.$message.warning('页面加载出错,请重试!')
+            }
+        },
+        navTo(url){
+            location.href = '/login'
+        },
+        navToTrue(url){
+            location.href = url
+        },
+        getFlowerRecommend(class_id){
+            const _this=this;
+            try {
+                axios({
+                    method: 'post',
+                    url: 'http://localhost:8181/flower/recommend',
+                    headers: {
+                        Authorization: Cookie.get('token'),
+                        'Content-Type': 'application/json'
+                    },
+                    data:{
+                        class_id: class_id
+                    }
+                }).then(function (response){
+                    if (response.data.code===200){
+                        //查询信息成功
+                        if(class_id === 100001){ //玫瑰系列
+                            _this.flowers_m = response.data.data.flowers;
+                        }
+                        else if(class_id === 100002){ //康乃馨系列
+                            _this.flowers_k = response.data.data.flowers;
+                        }
+                        else if(class_id === 100016){ //永生花系列
+                            _this.flowers_y = response.data.data.flowers;
+                        }
+                        else if(class_id === 100018){ //商务花篮系列
+                            _this.flowers_s = response.data.data.flowers;
+                        }
+                    }
+                    if (response.data.code===401){
+                        _this.$message.warning('身份验证失败,请重新登录!')
+                    }
+                    if (response.data.code===403){
+                        const message = response.data.msg;
+                        this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
+                            confirmButtonText: '确定'
+                        })
+                    }
+                });
+            }catch (error){
+                this.$message.warning('页面加载出错,请重试!')
+            }
+        }
+    }
+}
+</script>
+<style>
+.headNav .navButton{
+    font-size: 18px;
+    font-weight:bold;
+    color: #333;
+}
+.headNav .navButton:hover{
+    color: red;
+}
+.menu-item{
+    margin: 30px 0 40px 20px;
+    text-align: left;
+    font-weight: bolder;
+    font-size: 18px;
+}
+.menu-item:hover{
+    color: red;
+    box-shadow: 0 0 50px #f9f9f9;
+}
+.item .menu-button{
+    margin:15px 10px 10px 15px;
+    font-size: 16px;
+    color: #8c8c8c;
+}
+.item .menu-button:hover{
+    color: red;
+}
+.el-carousel__item h3 {
+    color: #475669;
+    font-size: 18px;
+    opacity: 0.75;
+    line-height: 300px;
+    margin: 0;
+}
+.visitor-hello .visitor-button{
+    width: 100px;
+    height: 45px;
+}
+.product-zone{
+    margin-bottom: 60px;
+}
+.zone-top{
+    text-align: left;
+    margin-left: 70px;
+    margin-top: 80px;
+    margin-bottom: 20px;
+}
+.zone-title{
+    font-weight: bolder;
+    font-size: 30px;
+    margin-right: 20px;
+    margin-left: 10px;
+    color: #ac0b2a;
+}
+.zone-detail{
+    color: #848484;
+    font-weight: bold;
+}
+.zone-left{
+    margin-left: 80px;
+}
+.zone-main{
+    margin-left: 50px;
+    margin-right: 80px;
+}
+.zone-title2{
+    font-size: 25px;
+    margin-top: 30px;
+    color: #ac0b2a;
+}
+.zone-detail2{
+    color: #848484;
+    margin: 20px 20px 40px 20px;
+}
+.zone-button{
+    font-size: 18px;
+    font-weight: bold;
+    height: 40px;
+    width: 120px;
+    color: #ac0b2a;
+    border: 2px solid #ac0b2a;
+    background-color: #f7f7f7;
+}
+.zone-button:hover{
+    color: #f7f7f7;
+    background-color: #ac0b2a;
+}
+.product-col{
+    padding-bottom: 20px;
+    text-align: left;
+}
+.product-name:hover{
+    color: red;
+}
+.product-name , .product-price{
+    font-weight: bold;
+    font-size: 16px;
+    padding: 5px 0;
+    width: 300px;
+    /*  超出字数省略  */
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+</style>
\ No newline at end of file