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

ADD file via upload

Browse Source
main
pjhmizn49 1 year ago
parent 21f9d7070f
commit 02375d0154
1 changed files with 500 additions and 0 deletions
Show Stats Download Patch File Download Diff File

500
flower_user_front/src/views/DetailView.vue
Unescape View File

@ -0,0 +1,500 @@
<template>
<div style="width: 90%;min-height: 800px;margin: 50px auto 0 auto">
<!-- 头部导航 -->
<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 class="detail-top" style="margin-top: 30px">
<el-row :gutter="20">
<el-col :span="12" style="text-align: left">
<img :src="require('/Users/zhangjiadi/IdeaProjects/毕业设计/picFiles'+this.good.flower_pic)" style="width: 80%;height: 600px;border: 1px solid #8c8c8c;margin-left: 15px" alt="">
</el-col>
<el-col :span="12" style="margin-top:30px;height: 700px;text-align: left;">
<div class="flower-name">
{{this.good.flower_name}}
<div class="flower-class"> — {{this.good.flower_class}}</div>
</div>
<div class="flower-price">￥ {{this.good.flower_price.toFixed(2)}}</div>
<div class="flower-sale">销量：{{ this.good.flower_sale }}</div>
<el-divider></el-divider>
<div class="flower-pack">
包装辅材：<span style="font-size: 14px;color: #8c8c8c">花束包装默认雾面纸，自选装饰花材增加额外费用</span>
<!--自选花材-->
<div style="margin-top: 30px">
<el-checkbox-group class="pack-check" v-model="flower_pack">
<el-checkbox-button v-for="pack in packs" :label="pack.pack_id" :key="pack.pack_id" style="margin-bottom: 20px">
{{pack.pack_name}} ￥{{pack.pack_price.toFixed(2)}}
</el-checkbox-button>
</el-checkbox-group>
</div>
</div>
<el-divider></el-divider>
<div class="flower-num">数量：
<el-input-number v-model="flower_number" :min="1" style="margin-left: 20px"></el-input-number>
</div>
<div>
<button @click="pay" class="flower-button1">立即购买</button>
<button @click="addToCart" class="flower-button2">加入购物车</button>
</div>
</el-col>
</el-row>
</div>
<img src="@/assets/break.jpg" alt="" style="margin: 50px auto">
<!-- 详情、评价 -->
<div class="detail-bottom" style="display: flex;margin-top: 50px">
<!--猜你喜欢 -->
<div class="detail-left" style="flex: 3;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: 280px" 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="detail-right" style="flex: 7">
<el-tabs v-model="activeName" @tab-click="handleTabClick">
<el-tab-pane label="好花详情" name="first">
<img src="@/assets/detail1.jpg" style="width: 100%;" alt="">
<img src="@/assets/detail2.jpg" style="width: 100%;" alt="">
<img src="@/assets/detail3.jpg" style="width: 100%;" alt="">
<img src="@/assets/detail4.jpg" style="width: 100%;" alt="">
<img src="@/assets/detail5.jpg" style="width: 100%;" alt="">
<img src="@/assets/detail6.jpg" style="width: 100%;" alt="">
<img src="@/assets/detail7.jpg" style="width: 100%;" alt="">
<img src="@/assets/detail8.jpg" style="width: 100%;" alt="">
</el-tab-pane>
<el-tab-pane label="好花评价" name="second">
<div style="margin-top: 20px;text-align: left">
<div style="margin-bottom: 50px" v-for="item in comments">
<div style="display: flex">
<div><el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar></div>
<div style="margin-left: 10px">
<div style="font-weight: bold;font-size: 18px">用户 {{ item.user_id }}</div>
<div style="color:#7a7a7a;font-size: 14px">{{ item.comment_time }}</div>
</div>
</div>
<div style="margin-top: 15px;margin-left: 10px">{{ item.comment_content }}</div>
</div>
</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: 30px"
@current-change="handleCurrentChange">
</el-pagination>
</el-tab-pane>
</el-tabs>
</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(){
//商品id
let good_id = this.$route.query.id
return{
good_id: good_id,
good:{
// flower_id:1,
// flower_name:'',
// flower_class:'',
// flower_price:1.00,
// flower_sale:1,
// flower_pic:'',
// pack:[{
// pack_id:1,
// pack_name:'',
// pack_price:1.00
// }]
},
flower_number:1,
activeName:'first', //标签页
//自选花材
flower_pack: [],
packs: [{
pack_id:1,
pack_name:'',
pack_price:1.00,
}],
//评价
comments:[{
comment_id:1,
comment_content:'',
user_id:1,
flower_id:1,
comment_time:''
}],
//分页相关
currentPage:1,
pageSize:20,
page_number:1,//总页数
total:10,//总条数
//猜你喜欢
flowerYouLike:[{}]
}
},
created() {
this.getFlowerDetail()
this.getPackList()
this.getYouLike()
},
methods:{
getFlowerDetail(){
const _this=this;
try {
axios({
method: 'post',
url: 'http://localhost:8181/flower/info',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
flower_id: _this.good_id
}
}).then(function (response){
if (response.data.code===200){
//查询信息成功
_this.good = response.data.data;
}
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('页面加载出错,请重试!')
}
},
getPackList(){
const _this=this;
try {
axios({
method: 'post',
url: 'http://localhost:8181/pack/list',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
page:1,
page_size:100
}
}).then(function (response){
if (response.data.code===200){
//查询信息成功
_this.packs=response.data.data.packs;
}
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 = url
},
handleTabClick(tab){
this.activeName = tab.name
if(tab.name==='second')
this.getComment()
},
addToCart(){
const _this=this;
try {
axios({
method: 'post',
url: 'http://localhost:8181/cart/add',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
flower_id: _this.good_id,
pack_ids: _this.flower_pack.toString(),
number: _this.flower_number
}
}).then(function (response){
if (response.data.code===200){
// 添加购物车成功
_this.$message.success('添加购物车成功！')
}
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('页面加载出错,请重试!')
}
},
pay(){
let selectedData=[{}]
selectedData[0].cart_id=1
selectedData[0].flower_id=this.good_id
selectedData[0].flower_name=this.good.flower_name
selectedData[0].flower_price=this.good.flower_price
selectedData[0].flower_pic=this.good.flower_pic
selectedData[0].number=this.flower_number
selectedData[0].pack=""
selectedData[0].single_price = this.good.flower_price
if(this.flower_pack.length!==0)
selectedData[0].pack=[{}]
for(let i=0;i<this.flower_pack.length;i++){
axios({
method: 'post',
url: 'http://localhost:8181/pack/info',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
pack_id:this.flower_pack[i]
}
}).then(function (response){
if (response.data.code===200){
selectedData[0].pack[i]=response.data.data
selectedData[0].single_price += response.data.data.pack_price
}});
}
// 跳转到pay页面
let timer = setInterval(() => {
let total_price = selectedData[0].single_price * selectedData[0].number
this.$router.push({name: 'pay', params: {
data: selectedData,
type:0,
total_price:total_price
}})
}, 1000);
// 离开当前页面时销毁定时器
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
timer = null;
})
},
//分页
handleCurrentChange(page) {
this.currentPage = page;
this.getComment();
},
getComment(){
const _this=this;
try {
axios({
method: 'post',
url: 'http://localhost:8181/comment/list',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
page:_this.currentPage,
page_size:_this.pageSize,
flower_id: _this.good_id
}
}).then(function (response){
if (response.data.code===200){
_this.comments = response.data.data.comments;
_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('页面加载出错,请重试!')
}
},
//猜你喜欢
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>
.flower-name{
font-size: 30px;
font-weight: bold;
}
.flower-name .flower-class{
font-size: 18px;
color: #8c8c8c;
}
.flower-price{
margin-top: 20px;
font-size: 35px;
font-weight: bold;
color: #ff3134;
}
.flower-sale{
margin-top: 10px;
font-size: 18px;
}
.flower-pack{
margin-top: 20px;
font-size: 20px;
font-weight: bold;
}
.flower-num{
margin-top: 60px;
font-size: 20px;
font-weight: bold;
}
.flower-button1{
margin-top: 60px;
margin-left: 30px;
font-size: 20px;
font-weight: bold;
height: 60px;
width: 200px;
color: #f7f7f7;
border: 1px solid #ff3134;
background-color: #ff3134;
border-radius: 20px
}
.flower-button1:hover{
color: #f7f7f7;
background-color: #fd7b6d;
}
.flower-button2{
margin-top: 60px;
margin-left: 30px;
font-size: 20px;
font-weight: bold;
height: 60px;
width: 200px;
color: #ff3134;
border: 1px solid #ff3134;
background-color: white;
border-radius: 20px
}
.flower-button2:hover{
color: #f7f7f7;
background-color: #fd7b6d;
}
.el-tabs__item{
height: 50px;
color: #505050 !important;
text-align: center;
font-size: 25px !important;
}
.is-active{
color: #000 !important;
}
.el-tabs__active-bar{
background-color: red !important;
}
.pack-check .el-checkbox-button__inner:hover{
color: red;
}
.pack-check .el-checkbox-button.is-checked .el-checkbox-button__inner{
color: #FFF;
background-color: #ff3134;
border-color: #ff3134;
box-shadow: -1px 0 0 0 #d66760;
}
.pack-check .el-checkbox-button.is-checked:first-child .el-checkbox-button__inner {
border-left-color: #ff3134;
}
.pack-check .el-checkbox-button.is-focus .el-checkbox-button__inner{
border-color: #ff3134;
}
</style>
Write Preview
Loading…
Cancel
Save