pjhmizn49
/
softwareEngineeringPractice
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ADD file via upload

Browse Source
main
pjhmizn49 1 year ago
parent 331e4ea319
commit b565a8a1d9
1 changed files with 524 additions and 0 deletions
Show Stats Download Patch File Download Diff File

524
flower_user_front/src/views/VisitorView.vue
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save