zc_saas_h5/pages4/courseTopic/goodsTopic.vue

<template>
    <view class="goods_topic">
        <nav-bar title="选课中心"></nav-bar>
        <view class="banner_header">
            <image class="ban_img" src="../static/topic/banner_bg.png"></image>
            <view class="selects" @click="back()">
                <view class="titles">
                    考前培训：二级建造师
                </view>
                <view class="icons">
                    <u-icon name="arrow-right" color="#3E4055" size="26"></u-icon>
                </view>
            </view>
            <view class="imgs">
                <image class="banner" src="../static/topic/banner.png"></image>
            </view>
        </view>
        <view class="mains">
            <view class="titles">
                <image class="code" src="@/static/learn/act_icon.png" ></image>
                <text class="title">免费试听</text>
            </view>
            <view class="pictures" @click="toDetail()">
                <view class="pic_imgs">
                    <image v-if="goodsInfo.goodsCoverUrl" :src="$method.splitImgHost(goodsInfo.goodsCoverUrl, true)" class="basic_img"></image>
                    <image v-else class="basic_img" src="../static/topic/basic.png" ></image>
                </view>
                <view class="pic_title">{{ goodsInfo.goodsName }}</view>
            </view>
            <view class="titles">
                <image class="code" src="@/static/learn/act_icon.png" ></image>
                <text class="title">推荐课程</text>
            </view>
            <view class="courses">
                <view v-for="(item, index) in  courseName" :key="index" class="cou_items"
                 :class="{nactive: courseNum == index}" @click="tochangeCourse(item, index)">{{ item.name }}</view>
            </view>
            <view class="lines"></view>
            <view class="course_list">
                <view class="clist_item">
                    <image v-if="courseNum == 0" class="type_img" src="../static/topic/type1_one.png" ></image>
                    <image v-if="courseNum == 1" class="type_img" src="../static/topic/type2_two.png" ></image>
                    <image v-if="courseNum == 2" class="type_img" src="../static/topic/type3_three.png" ></image>
                    <view class="type_right">
                        <view class="type_title">全科</view>
                        <view class="type_down">
                            <view class="prices">￥980</view>
                            <view class="tobuy" @click="togoBuy(1)">立即购买</view>
                        </view>
                    </view>
                </view>
                <view class="clist_item">
                    <image v-if="courseNum == 0" class="type_img" src="../static/topic/type1_one.png" ></image>
                    <image v-if="courseNum == 1" class="type_img" src="../static/topic/type2_two.png" ></image>
                    <image v-if="courseNum == 2" class="type_img" src="../static/topic/type3_three.png" ></image>
                    <view class="type_right">
                        <view class="type_title">公共单科</view>
                        <view class="type_down">
                            <view class="prices">￥350</view>
                            <view class="tobuy" @click="togoBuy(2)">立即购买</view>
                        </view>
                    </view>
                </view>
                <view class="clist_item">
                    <image v-if="courseNum == 0" class="type_img" src="../static/topic/type1_one.png" ></image>
                    <image v-if="courseNum == 1" class="type_img" src="../static/topic/type2_two.png" ></image>
                    <image v-if="courseNum == 2" class="type_img" src="../static/topic/type3_three.png" ></image>
                    <view class="type_right">
                        <view class="type_title">实务单科</view>
                        <view class="type_down">
                            <view class="prices">￥500</view>
                            <view class="tobuy" @click="togoBuy(3)">立即购买</view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="titles">
                <image class="code" src="@/static/learn/act_icon.png" ></image>
                <text class="title">详情</text>
            </view>
            <view class="details">
                <image v-if="courseNum == 0" class="detail_img" src="../static/topic/type1_detail.png" ></image>
                <image v-if="courseNum == 1" class="detail_img" src="../static/topic/type2_detail.png" ></image>
                <image v-if="courseNum == 2" class="detail_img" src="../static/topic/type3_detail.png" ></image>
            </view>
        </view>

        <!-- 弹窗 -->
        <u-popup v-model="toggleCourseShow" mode="bottom" border-radius="40">
			<view class="popup_box">
                <view class="check_head">
                    <view class="headers">
                    <view class="grade">选择课程</view>
                        <u-icon name="close" color="#9C9C9C" size="40" @click="closePop()"></u-icon>
                    </view>
                </view>
                <view class="pop_prices">
                    <text class="price">￥ {{ skuItem.standPrice || 0 }}</text>
                    <text v-if="skuItem.linePrice" class="lin_price">{{ skuItem.linePrice }}</text>
                </view>
                <view class="check_con">
                    <scroll-view scroll-y="true" style="height: 550rpx;">
                        <view class="course_items" v-for="(item, index) in courseSku" :key="index" :class="{nactive: skuIndex == index}" @click="selectSku(item, index)">
                            {{ item.goodsName }}
                        </view>
                    </scroll-view>
                </view>
                <view class="right_now" @click="rightNowBuy()">立即购买</view>
			</view>
		</u-popup>
    </view>
</template>

<script>
export default {
    name: 'goodsTopic',
    data() {
        return {
            courseName: [
                {
                    name: '黄金基础班',
                    type: 1
                },
                {
                    name: '钻石强化班',
                    type: 2
                },
                {
                    name: '至尊私塾班',
                    type: 3
                }
            ],
            courseNum: 0,
            topicId: '',
            goodsInfo: {},
            toggleCourseShow: true,
            courseSku: [1],
            skuItem: {},
            skuIndex: -1,
        }
    },
    onLoad(option) {
        if (option.scene) {
            let tid = decodeURIComponent(option.scene)
            this.topicId = tid.split('=')[1]
            console.log('topicId: ', this.topicId)
        } else {
            this.topicId = option.topicId
        }
        this.getgoodsInfo()
    },
    methods: {
        getgoodsInfo() {
            this.$http({
                url: `/course/topicPage/get/goodsInfo/${this.topicId}`,
                method: 'get',
            }).then((res) => {
                if (res.data.code == 200) {
                    this.goodsInfo = res.data.data
                }
            })
        },
        tochangeCourse(item, index) {
            console.log(item, index)
            this.courseNum = index
        },
        back() {
            uni.navigateBack()
        },
        toDetail() {
            if (this.goodsInfo.goodsType == 1) {
                uni.navigateTo({
                    url: '/pages3/course/detail?id='+this.goodsInfo.goodsId
                })
            } else if (this.goodsInfo.goodsType == 2) {
                uni.navigateTo({
                    url: '/pages2/bank/detail?id='+this.goodsInfo.goodsId
                })
            } else {
                uni.navigateTo({
                    url: '/pages5/liveDetail/index?id='+this.goodsInfo.goodsId
                })
            }
        },
        closePop() {
            this.toggleCourseShow = false
        },
        togoBuy(subjectType) {
            this.skuItem = {}
            this.skuIndex = -1
            this.$http({
                url: '/course/topicPage/get/goodsList',
                method: 'get',
                data: {
                    subjectType: subjectType,
                    topicId: this.topicId,
                    type: this.courseNum + 1
                }
            }).then((res) => {
                if (res.data.code == 200) {
                    this.toggleCourseShow = true
                    this.courseSku = res.data.data || []
                } else {
                    this.$u.toast(res.data.msg)
                }
            })
        },
        selectSku(item, index) {
            this.skuItem = item
            this.skuIndex = index
        },
        rightNowBuy() {
            if (Object.keys(this.skuItem).length == 0) {
                this.$u.toast('请选择科目')
                return
            }
            if(this.$method.isGoLogin()){
				return
			}
			this.$navTo.togo('/pages2/order/confirm_list?id='+this.skuItem.goodsId)
        }
    }
}
</script>


<style lang="scss" scoped>
@mixin dis_center {
    display: flex;
    align-items: center;
    justify-content: center;
}
@mixin dis_around {
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.goods_topic {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(223,236,253,0) 0%, #DFECFD 100%);
    .banner_header {
        height: 378rpx;
        position: relative;
        top: 0rpx;
        left: 0rpx;
        .ban_img {
            width: 100%;
            height: 378rpx;
            position: absolute;
            top: 0rpx;
            left: 0rpx;
            z-index: 99;
        }
        .selects {
            margin: 32rpx 0rpx 0rpx 40rpx;
            width: 370rpx;
            height: 64rpx;
            background: rgba(255,255,255,0.6);
            border-radius: 160rpx;
            // opacity: 0.6;
            @include dis_around();
            position: absolute;
            top: 0rpx;
            left: 0rpx;
            z-index: 100;
            .icons {
                width: 36rpx;
                height: 36rpx;
                background: #FFFFFF;
                border-radius: 50%;
                @include dis_center();
            }
        }
        .imgs {
            position: absolute;
            bottom: 0rpx;
            left: 0rpx;
            z-index: 100;
            margin-left: 40rpx;
        }
        .banner {
            width: 670rpx;
            height: 250rpx;
            border-radius: 20rpx;
        }
    }
    
    .mains {
        padding: 0rpx 40rpx 40rpx 40rpx;
        .titles {
            margin: 72rpx 0rpx 0rpx 10rpx;
            .code {
                width: 38rpx;
                height: 24rpx;
            }
            .title {
                font-size: 40rpx;
                font-family: OPPOSans-Bold, OPPOSans;
                font-weight: bold;
                color: #222222;
                margin-left: 14rpx;
            }
        }
        .pictures {
            width: 100%;
            height: 522rpx;
            margin-top: 32rpx;
            .pic_imgs {
                width: 100%;
                height: 374rpx;
                .basic_img {
                    width: 100%;
                    height: 374rpx;
                }
            }
            .pic_title {
                width: 100%;
                height: 148rpx;
                background: #FFFFFF;
                border-radius: 0rpx 0rpx 24rpx 24rpx;
                font-size: 32rpx;
                font-family: OPPOSans-Bold, OPPOSans;
                font-weight: bold;
                color: #222222;
                padding: 32rpx;
            }
        }
        .courses {
            margin-top: 44rpx;
            display: flex;
            align-items: center;
            height: 78rpx;
            .cou_items {
                font-size: 28rpx;
                color: #969696;
                margin-right: 48rpx;
                position: relative;
                top: 0rpx;
                left: 0rpx;
                &:nth-child(1) {
                    margin-left: 16rpx;
                }
                &.nactive {
                    font-size: 32rpx;
                    font-weight: bold;
                    color: #498AFE;
                    &::after {
                        content: '';
                        position: absolute;
                        bottom: -18rpx;
                        left: 60rpx;
                        width: 32rpx;
                        height: 8rpx;
                        background: #498AFE;
                        border-radius: 180rpx;
                    }
                }
                
            }
        }
        .lines {
            width: 100%;
            height: 2rpx;
            background: #FFFFFF;
        }
        .course_list {
            width: 100%;
            padding: 40rpx 32rpx;
            background: #fff;
            border-radius: 14rpx;
            margin-top: 40rpx;
            .clist_item {
                height: 120rpx;
                margin-bottom: 48rpx;
                display: flex;
                &:last-child {
                    margin-bottom: 0rpx;
                }
                .type_img {
                    width: 212rpx;
                    height: 120rpx;
                    margin-right: 24rpx;
                }
                .type_title {
                    font-size: 32rpx;
                    font-weight: 500;
                    color: #222222;
                }
                .type_down {
                    width: 370rpx;
                    margin-top: 24rpx;
                    @include dis_center();
                    justify-content: space-between;
                }
                .prices {
                    font-size: 36rpx;
                    font-weight: 500;
                    color: #F67205;
                }
                .tobuy {
                    width: 144rpx;
                    height: 52rpx;
                    line-height: 52rpx;
                    text-align: center;
                    background: #FFB102;
                    border-radius: 16rpx;
                    font-size: 26rpx;
                    font-weight: 500;
                    color: #FFFFFF;
                }
            }
        }

        .details {
            width: 100%;
            height: 5035rpx;
            margin-top: 32rpx;
            .detail_img {
                width: 100%;
                height: 100%;
                display: block;
            }
        }
    }

    // 弹窗
.popup_box {
    width: 100%;
    height: 938rpx;
    padding: 56rpx 56rpx 0rpx;
    .pop_prices {
        margin-top: 50rpx;
        margin-bottom: 40rpx;
        .types {
            font-size: 32rpx;
            font-weight: bold;
            color: #222222;
            margin-right: 24rpx;
        }
        .price {
            font-size: 36rpx;
            font-weight: 500;
            color: #F67205;
        }
        .lin_price {
            color: #999999;
            font-size: 30rpx;
            text-decoration:line-through;
        }
    }
    .headers {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .grade {
        font-size: 40rpx;
        font-weight: bold;
        color: #222222;
      }
    }
    .course_items {
        width: 100%;
        height: 96rpx;
        background: #F8F8F8;
        border-radius: 24rpx;
        padding: 30rpx 32rpx;
        font-size: 28rpx;
        color: #222222;
        margin-bottom: 32rpx;
        &.nactive {
            background: #D5E4FF;
            color: #3F8DFD;
        }
        &:last-child {
            margin-bottom: 0rpx;
        }
    }
    
    .right_now {
        width: 100%;
        height: 92rpx;
        line-height: 92rpx;
        text-align: center;
        background: #3F8DFD;
        border-radius: 120rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #FFFFFF;
    }
    
  }
}
</style>