专题页选择科目

src/axios.js

@@ -3,8 +3,8 @@ import store from './store'
 import { Message } from 'element-ui'
 // export const BASE_URL = 'https://api.xyyxt.net'   //release
 // export const BASE_URL = 'http://42.192.164.187:19005'    //test
-export const BASE_URL = 'https://test.xyyxt.net'   //预发布
-// export const BASE_URL = 'http://192.168.1.7:5055'    //dev
+// export const BASE_URL = 'https://test.xyyxt.net'   //预发布
+export const BASE_URL = 'http://192.168.1.7:5055'    //dev
 // export const BASE_URL = 'http://120.79.166.78:19012'    //测试-外网
 // export const BASE_URL = 'http://42.192.164.187:19005'    //test
 // export const BASE_URL = 'http://192.168.1.222:5055'    //测试

src/pages/goodsTopic/components/buyDialog.vue

@@ -0,0 +1,217 @@
+<template>
+    <div class="buyDialog">
+        <el-dialog
+            :title="titles"
+            :visible.sync="buyModal"
+            width="452px"
+            class="appoint-modal"
+            :close-on-click-modal="false"
+            :close-on-press-escape="false"
+            :before-close="cancel"
+        >
+            <div v-loading="loading" class="contentts">
+                <div class="pop_prices">
+                    <span v-if="skuItem.standPrice || skuItem.standPrice == 0" class="price">￥ {{ skuItem.standPrice || 0 }}</span>
+                    <span v-if="skuItem.linePrice" class="lin_price">￥ {{ skuItem.linePrice }}</span>
+                </div>
+                <div v-if="courseSku.length" class="checks">
+                    请在下方
+                    <span>选择科目：</span>
+                </div>
+                <div v-if="courseSku.length" class="check_con">
+                    <div class="course_items" v-for="(item, index) in courseSku" :key="index" :class="{nactive: skuIndex == index}" @click="selectSku(item, index)">
+                        {{ item.goodsName }}
+                    </div>
+                </div>
+                <div v-else class="nodata">暂无科目选择</div>
+            </div>
+            <span v-if="courseSku.length" slot="footer" class="dialog-footer">
+                <el-button type="primary" size="small" @click="rightNowBuy()">立即购买</el-button>
+            </span>
+        </el-dialog>
+
+        <BuyCourseModal ref="selectClassModal"></BuyCourseModal>
+    </div>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from "vuex";
+import BuyCourseModal from "@/components/buyCourseModal/index";
+export default {
+    name: 'buyDialog',
+    components: { BuyCourseModal },
+    props: {
+        buyModal: {
+            type: Boolean,
+            default: false,
+        },
+        subjectType: {
+            type: Number,
+            default: 1
+        },
+        type: { // 1黄金班，2钻石班，3至尊班
+            type: Number,
+            default: 1
+        },
+        topicId: {
+            type: [String, Number],
+            default: '1'
+        }
+    },
+    data() {
+        return {
+            applyId: "",
+            courseSku: [],
+            skuItem: {},
+            skuIndex: -1,
+            loading: false,
+            titles: '黄金班',
+        }
+    },
+    watch: {
+        buyModal(newV, oldV) {
+            if (newV) {
+                console.log('监听')
+                this.titles = ['黄金班', '钻石班', '至尊班'][this.type - 1]
+                this.getDetail()
+            }
+        },
+    },
+    methods: {
+        ...mapMutations(["setCurrentRouter", "getCartCount"]),
+        cancel() {
+            this.$emit('update:buyModal', false)
+        },
+        selectSku(item, index) {
+            console.log('defhd', item, index)
+            this.skuItem = item
+            this.skuIndex = index
+        },
+        getDetail() {
+            this.loading = true
+            this.skuItem = {}
+            this.skuIndex = -1
+            this.$axios({
+                url: '/app/common/get/goodsList',
+                method: 'get',
+                noToken: true,
+                params: {
+                    subjectType: this.subjectType,
+                    topicId: this.topicId || 1,
+                    type: this.type
+                }
+            }).then((res) => {
+                if (res.code == 200) {
+                    this.courseSku = res.data || []
+                } else {
+                    this.$message.warning(res.msg)
+                }
+                this.loading = false
+            }).catch(err => {
+                this.loading = false
+            })
+        },
+        rightNowBuy() {
+            if (Object.keys(this.skuItem).length == 0) {
+                this.$message.warning('请选择科目')
+                return
+            }
+            console.log('this.$tools.isLogin()', this.$tools.isLogin())
+            if (!this.$tools.isLogin()) {
+                this.setCurrentRouter(this.$route)
+                this.$router.push({
+                    path: "/login",
+                })
+                return
+            }
+
+            this.getGoodsDetail(this.skuItem.goodsId).then((res) => {
+                console.log('res.templateType', res,res.templateType)
+                if (res.templateType) {
+                    if (res.goodsType === 1) {
+                        this.$refs.selectClassModal.showModal(res);
+                    }
+                    if (res.goodsType === 2 || res.goodsType === 6) {
+                        let selectGoodsList = JSON.parse(JSON.stringify([res]));
+                        localStorage.setItem(
+                            "checkGoodsList",
+                            JSON.stringify(selectGoodsList)
+                        );
+                        this.$router.push({
+                            path: "/payment",
+                        });
+                    }
+                } else {
+                    let selectGoodsList = JSON.parse(JSON.stringify([res]));
+                    localStorage.setItem(
+                        "checkGoodsList",
+                        JSON.stringify(selectGoodsList)
+                    );
+                    this.$router.push({
+                        path: "/payment",
+                    });
+                }
+            });
+        },
+
+        getGoodsDetail(goodsId) {
+            return new Promise((resolve) => {
+                this.$request.commonGoodsDetail(goodsId).then((res) => {
+                    resolve(res.data);
+                });
+            });
+        },
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.contentts {
+    width: 100%;
+    .pop_prices {
+        .price {
+            font-size: 28px;
+            font-weight: 500;
+            color: #FC3F3F;
+        }
+        .lin_price {
+            color: #999999;
+            font-size: 24px;
+            text-decoration:line-through;
+            margin-left: 5px;
+        }
+    }
+    .checks {
+        font-size: 14px;
+        color: #606266;
+        margin: 31px 0px 16px 0px;
+        >span {
+            color: #409EFF;
+        }
+    }
+    .check_con {
+        display: flex;
+        .course_items {
+            min-width: 190px;
+            padding: 13px 16px;
+            border-radius: 8px;
+            margin-right: 16px;
+            margin-bottom: 16px;
+            background: #F8F8F8;
+            font-size: 14px;
+            font-weight: 500;
+            color: #222222;
+            text-align: center;
+            cursor: pointer;
+            &.nactive {
+                background: #D5E4FF;
+                color: #3F8DFD;
+            }
+        }
+    }
+    .nodata {
+        text-align: center;
+        margin-bottom: 20px;
+    }
+}
+</style>

src/pages/goodsTopic/index.vue

@@ -30,24 +30,131 @@
                     <div class="min_title">2023年二级建造师考前培训</div>
                     <div class="details">
                         <div class="detail_one">
+                            <div class="deatil_titles">黄金基础班</div>
+                            <div class="detail_mid">
+                                <div class="mid_item">
+                                    <div class="lefts">全科</div>
+                                    <div class="rights">
+                                        <span class="price">￥980</span>
+                                        <div class="right_buy"  @click="togoBuy(1, 1)">立即购买</div>
+                                    </div>
+                                </div>
+                                <div class="mid_item">
+                                    <div class="lefts">公共单科</div>
+                                    <div class="rights">
+                                        <span class="price">￥350</span>
+                                        <div class="right_buy"  @click="togoBuy(2, 1)">立即购买</div>
+                                    </div>
+                                </div>
+                                <div class="mid_item">
+                                    <div class="lefts">实务单科</div>
+                                    <div class="rights">
+                                        <span class="price">￥500</span>
+                                        <div class="right_buy"  @click="togoBuy(3, 1)">立即购买</div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="down_img">
+                                <img class="l_img" src="@/assets/topic/detail_one.png" alt="" />
+                            </div>
+                        </div>
+                        <div class="detail_one">
+                            <div class="deatil_titles two">钻石强化班</div>
+                            <div class="detail_mid">
+                                <div class="mid_item">
+                                    <div class="lefts">全科</div>
+                                    <div class="rights">
+                                        <span class="price">￥1280</span>
+                                        <div class="right_buy"  @click="togoBuy(1, 2)">立即购买</div>
+                                    </div>
+                                </div>
+                                <div class="mid_item">
+                                    <div class="lefts">公共单科</div>
+                                    <div class="rights">
+                                        <span class="price">￥450</span>
+                                        <div class="right_buy"  @click="togoBuy(2, 2)">立即购买</div>
+                                    </div>
+                                </div>
+                                <div class="mid_item">
+                                    <div class="lefts">实务单科</div>
+                                    <div class="rights">
+                                        <span class="price">￥700</span>
+                                        <div class="right_buy"  @click="togoBuy(3, 2)">立即购买</div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="down_img">
+                                <img class="l_img" src="@/assets/topic/detail_two.png" alt="" />
+                            </div>
+                        </div>
 
+                        <div class="detail_one">
+                            <div class="deatil_titles three">至尊私塾班</div>
+                            <div class="detail_mid">
+                                <div class="mid_item">
+                                    <div class="lefts">全科</div>
+                                    <div class="rights">
+                                        <span class="price">￥1980</span>
+                                        <div class="right_buy"  @click="togoBuy(1, 3)">立即购买</div>
+                                    </div>
+                                </div>
+                                <div class="mid_item">
+                                    <div class="lefts">公共单科</div>
+                                    <div class="rights">
+                                        <span class="price">￥700</span>
+                                        <div class="right_buy"  @click="togoBuy(2, 3)">立即购买</div>
+                                    </div>
+                                </div>
+                                <div class="mid_item">
+                                    <div class="lefts">实务单科</div>
+                                    <div class="rights">
+                                        <span class="price">￥900</span>
+                                        <div class="right_buy"  @click="togoBuy(3, 3)">立即购买</div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="down_img">
+                                <img class="l_img" src="@/assets/topic/detail_three.png" alt="" />
+                            </div>
                         </div>
+                        
                     </div>
                 </div>
             </div>
 
         </section>
+
+        <!-- 弹窗 -->
+        <buy-dialog :buyModal.sync="buyModal" :topicId="topicId" :subjectType="subjectType" :type="type"></buy-dialog>
+        <ToolBar></ToolBar>
+        <Footer></Footer>
     </div>
 </template>
 
 <script>
-import Header from "@/components/header/index";
+import Header from "@/components/header/index.vue";
+import Footer from "@/components/footer/index.vue";
+import ToolBar from "@/components/toolbar/index.vue";
+import buyDialog from './components/buyDialog.vue'
 export default {
     name: '',
-    components: { Header },
+    components: { Header, Footer, ToolBar, buyDialog },
     data() {
         return {
-            
+            buyModal: false,
+            topicId: '',
+            subjectType: 0,
+            type: 0,
+        }
+    },
+    created() {
+        this.topicId = this.$route.query.topicId
+    },
+    methods: {
+        togoBuy(subjectType, type) {
+            this.subjectType = subjectType
+            this.type = type
+            this.buyModal = true
         }
     }
 }
@@ -89,7 +196,8 @@ export default {
             flex-direction: column;
             align-items: center;
             width: 100%;
-            height: 3444px;
+            // height: 3444px;
+            height: 3100px;
             background: url('../../assets/topic/topic_bg.png') center center no-repeat;
             background-size: 100% 100%;
             
@@ -112,9 +220,83 @@ export default {
                 font-weight: 500;
                 color: #363543;
             }
-            .details {
-                .detail_one {
-                    
+            
+        }
+        .details {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .detail_one {
+                width: 358px;
+                height: 2753px;
+                background-color: #fff;
+                border-radius: 8px;
+                margin-right: 20px;
+            }
+            .deatil_titles {
+                width: 358px;
+                height: 110px;
+                line-height: 110px;
+                text-align: center;
+                border-radius: 8px 8px 0px 0px;
+                background: linear-gradient(45deg, #71A9F6 0%, #1658DA 100%);
+                font-size: 32px;
+                font-weight: bold;
+                color: #FFFFFF;
+                &.two {
+                    background: linear-gradient(45deg, #FE8D6D 0%, #ED3531 100%);
+                }
+                &.three {
+                    background: linear-gradient(45deg, #E3BC79 0%, #BF7D2E 100%);
+                }
+            }
+            .detail_mid {
+                width: 358px;
+                padding: 0px 24px;
+                
+                .mid_item {
+                    width: 100%;
+                    height: 74px;
+                    border-bottom: 1px solid #EAEAEA;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                }
+                .lefts {
+                    font-size: 18px;
+                    font-weight: bold;
+                    color: #363543;
+                }
+                .rights {
+                    display: flex;
+                }
+                .price {
+                    font-size: 18px;
+                    font-weight: 500;
+                    color: #FC3F3F;
+                    margin-right: 20px;
+                }
+                .right_buy {
+                    width: 76px;
+                    height: 28px;
+                    line-height: 28px;
+                    text-align: center;
+                    background: #FC3F3F;
+                    border-radius: 50px;
+                    font-size: 13px;
+                    font-weight: 500;
+                    color: #FFFFFF;
+                    cursor: pointer;
+                }
+            }
+
+            .down_img {
+                width: 358px;
+                height: 2369px;
+                >.l_img {
+                    width: 100%;
+                    height: 100%;
+                    display: block;
                 }
             }
         }

src/pages/home/index.vue

@@ -1146,11 +1146,9 @@ export default {
       console.log('sdsf', item)
       this.$router.push({
         path: "/goodsTopic",
-        // query: {
-        //   educationId: item.educationId ? item.educationId : item.id || "",
-        //   projectId: item.projectId || "",
-        //   businessId: item.educationId ? item.id : "",
-        // },
+        query: {
+          topicId: item.topicId,
+        },
       })
       return
       this.$router.push({