saas_pc/src/pages/goodsTopic/components/buyDialog.vue

<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.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 || []
                    if (this.courseSku.length) {
                        this.skuItem = this.courseSku[0]
                        this.skuIndex = 0
                    }
                } else {
                    this.$message.warning(res.msg)
                }
                console.log('---courseSku： ', this.courseSku)
                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: 18px;
            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>