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

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

diff --git a/flower_user_front/src/views/SearchView.vue b/flower_user_front/src/views/SearchView.vue
new file mode 100644
index 0000000..8745e59
--- /dev/null
+++ b/flower_user_front/src/views/SearchView.vue
@@ -0,0 +1,215 @@
+<template>
+    <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;margin-top: 50px">
+            <div class="you-like" style="flex: 2;margin-right:60px;height: 160vh;width: 100%;background-color:#f7f7f7;border-radius: 30px">
+                <div style="font-weight: bold;font-size: 20px;margin: 30px auto">猜你喜欢</div>
+                <div>
+                    <el-row>
+                        <el-col :span="24" v-for="item in flowerYouLike">
+                            <el-card style="margin: 20px auto;width: 240px" 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: 100px;width: 100px" alt="">
+                                    <div class="youLike-name">{{ item.flower_name }}</div>
+                                    <div style="color: red" class="youLike-price">
+                                        ￥{{ item.flower_price.toFixed(2) }}
+                                    </div>
+                                </el-link>
+                            </el-card>
+                        </el-col>
+                    </el-row>
+                </div>
+            </div>
+            <div class="search-content" style="flex: 8;margin-right: 30px">
+                <img src="@/assets/break.jpg" alt="">
+                <div style="text-align: left;font-weight: bold;font-size: 20px;margin: 30px auto">
+                    <span v-if="good_key_show===1">全部商品</span>
+                    <span v-if="good_key_show===0">" {{this.good_key}} "相关商品</span>
+                </div>
+                <div class="search-main">
+                    <el-row :gutter="20">
+                        <el-col :span="8" v-for="item in this.flowers">
+                            <el-card style="margin: 10px 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>
+                <el-pagination
+                    background
+                    :current-page="currentPage"
+                    :page-size="pageSize"
+                    layout="total, prev, pager, next, jumper"
+                    :total="total"
+                    :page-count="page_number"
+                    style="margin-top: 50px"
+                    @current-change="handleCurrentChange">
+                </el-pagination>
+            </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(){
+        //搜索关键字
+        let good_key = this.$route.query.key
+        let good_key_show
+        if(good_key === '')
+            good_key_show = 1
+        else
+            good_key_show = 0
+
+        return{
+            good_key: good_key,
+            good_key_show:good_key_show,
+            flowers:[{
+                flower_id:1,
+                flower_name:'',
+                flower_class:'',
+                flower_price:1.00,
+                flower_sale:1,
+                flower_pic:''
+            }],
+            //分页相关
+            currentPage:1,
+            pageSize:15,
+            page_number:1,//总页数
+            total:10,//总条数
+            //猜你喜欢
+            flowerYouLike:[{
+                flower_id:1,
+                flower_name:'',
+                flower_price:1.00,
+                flower_pic:''
+            }]
+        }
+    },
+    created() {
+        this.searchFlower()
+        this.getYouLike()
+    },
+    methods:{
+        navTo(url){
+            location.href = url
+        },
+        searchFlower(){
+            const _this = this
+            try {
+                axios({
+                    method: 'post',
+                    url: 'http://localhost:8181/flower/query',
+                    headers: {
+                        Authorization: Cookie.get('token'),
+                        'Content-Type': 'application/json'
+                    },
+                    data:{
+                        page:_this.currentPage,
+                        page_size:_this.pageSize,
+                        flower_name:_this.good_key
+                    }
+                }).then(function (response){
+                    if (response.data.code===200){
+                        _this.flowers=response.data.data.flowers;
+                        _this.page_number=response.data.data.page_number;
+                        _this.total=response.data.data.total;
+                    }
+                    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('页面加载出错,请重试!')
+            }
+        },
+        //分页
+        handleCurrentChange(page) {
+            this.currentPage = page;
+            this.searchFlower();
+        },
+        //猜你喜欢
+        getYouLike(){
+            const _this=this;
+            try {
+                axios({
+                    method: 'post',
+                    url: 'http://localhost:8181/flower/youLike',
+                    headers: {
+                        Authorization: Cookie.get('token'),
+                        'Content-Type': 'application/json'
+                    }
+                }).then(function (response){
+                    if (response.data.code===200){
+                        _this.flowerYouLike = 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>
+.youLike-name:hover{
+    color: red;
+}
+.youLike-name , .youLike-price{
+    font-weight: bold;
+    /*font-size: 16px;*/
+    /*padding: 5px 0;*/
+    width: 200px;
+}</style>
\ No newline at end of file