|
|
|
|
@ -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>
|
