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

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

diff --git a/flower_user_front/src/views/DetailView.vue b/flower_user_front/src/views/DetailView.vue
new file mode 100644
index 0000000..92bd855
--- /dev/null
+++ b/flower_user_front/src/views/DetailView.vue
@@ -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>
\ No newline at end of file