340 lines
9.4 KiB
Vue
340 lines
9.4 KiB
Vue
<template>
|
||
<view>
|
||
<view v-if="prouctList.length>0">
|
||
<view class="ftitle">
|
||
<text>实物商品</text>
|
||
</view>
|
||
<!-- 横向滚动的 grid 容器 -->
|
||
<view
|
||
class="scroll-view_H"
|
||
|
||
>
|
||
<!-- grid 布局的包裹层，设置为 inline-grid 使其能在滚动容器内横向排列 -->
|
||
<view
|
||
class="grid-wrapper"
|
||
>
|
||
<view
|
||
class="item"
|
||
v-for="(item, index) in prouctList"
|
||
:key="index"
|
||
@click="goGoodsDetail(item, 1)"
|
||
>
|
||
<view class="imgcontainer" style="position: relative">
|
||
<view
|
||
v-if="item.isVipPrice == 1 && item.vipPrice != 0 && item.vipPrice != null"
|
||
style="z-index: 10;position: absolute;top: 10rpx;left: 10px;text-align: center;font-size: 22rpx;background-color: #f94f04;color: #fff;font-weight: bold;border-radius:4px;width: 120rpx; padding:4rpx;box-sizing: border-box;"
|
||
>
|
||
VIP优惠
|
||
</view>
|
||
<image :src="item.productImages" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="name">
|
||
{{ item.productName }}
|
||
</view>
|
||
<view>
|
||
<text
|
||
class="price"
|
||
v-if="item.isVipPrice == 1 && item.vipPrice != 0 && item.vipPrice != null"
|
||
>
|
||
<text style="color: #e97512; font-size: 12px; font-weight: bold">￥{{ item.vipPrice }}</text>
|
||
<text style="color: #8a8a8a;font-size: 10px;margin-left: 4px;font-weight: bold;text-decoration: line-through;">￥{{ Number(item.price) }}</text>
|
||
</text>
|
||
<text
|
||
v-else-if="item.activityPrice && item.activityPrice > 0"
|
||
class="price"
|
||
>
|
||
<text style="color: #e97512; font-size: 12px; font-weight: bold">￥{{ item.activityPrice }}</text>
|
||
<text style="color: #8a8a8a;font-size: 10px;margin-left: 4px;font-weight: bold;text-decoration: line-through;">￥{{ Number(item.price) }}</text>
|
||
</text>
|
||
<text
|
||
v-else
|
||
class="price"
|
||
style="color: #e97512; font-size: 12px; font-weight: bold"
|
||
>
|
||
￥{{ Number(item.price) }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="courseList.length>0" style="margin-top: 40rpx;">
|
||
<view class="ftitle">
|
||
<text>课程信息</text>
|
||
</view>
|
||
<!-- 横向滚动的 grid 容器 -->
|
||
<view style="margin-top: 20rpx;"
|
||
class="scroll-view_H"
|
||
|
||
>
|
||
<!-- grid 布局的包裹层，设置为 inline-grid 使其能在滚动容器内横向排列 -->
|
||
<view
|
||
|
||
>
|
||
<view class="learnBox box">
|
||
<view class="newBox">
|
||
<view class="item flexbox" v-for="(item, index) in courseList" :key="index" @click="onPageJump('/pages/course/courseDetail',item.id)">
|
||
<view class="imgcontainer">
|
||
<image :src="item.squareImage" style="height: 100%;"></image>
|
||
</view>
|
||
<view class="buyItems">
|
||
<view class="txt555" style="font-weight: bold !important;">
|
||
<text>{{item.title}}</text>
|
||
</view>
|
||
<view class="jianjie" v-html="item.content">
|
||
|
||
</view>
|
||
<view class="tag-view" style="margin-top:20rpx">
|
||
<uni-tag v-if="item.level != 0" style="margin-right: 10rpx;" :text="item.level == 1 ? '初级':'高级'" type="primary" size="small" />
|
||
<uni-tag v-if="item.selective != 0 && item.selective == 1" style="margin-right: 10rpx;" text="必修" size="small" type="warning" />
|
||
<uni-tag v-if="item.selective != 0 && item.selective == 2" style="margin-right: 10rpx;" text="选修" size="small" type="success" />
|
||
</view>
|
||
</view>
|
||
<view class="btn_box">
|
||
<view class="btn_box_price" v-if="item.courseCatalogueEntityList.length==1">
|
||
<text v-if="item.courseCatalogueEntityList[0].halfFee==0">免费</text>
|
||
<text v-else>¥{{item.courseCatalogueEntityList[0].halfFee}}/{{item.courseCatalogueEntityList[0].fee}}</text>
|
||
</view>
|
||
|
||
<view class="btn_box_price" v-if="item.courseCatalogueEntityList.length>1">
|
||
<text v-for="(v,i) in item.courseCatalogueEntityList" :key="i">
|
||
{{formatContent(v.title)}}<text v-if="i !== item.courseCatalogueEntityList.length - 1">/</text>
|
||
</text>
|
||
<text v-if="item.courseCatalogueEntityList[0].halfFee==0" style="padding-left: 20rpx;">免费</text>
|
||
<text v-else style="margin-left: 20rpx;">各{{item.courseCatalogueEntityList[0].halfFee}}/{{item.courseCatalogueEntityList[0].fee}}</text>
|
||
</view>
|
||
<!-- <text class="btn_box_btn" v-if="item.valid==0&&item.expired==0">了解课程</text>
|
||
<text class="btn_box_btn" v-if="item.valid==0&&item.expired>0">复读</text>
|
||
<text class="btn_box_btn" v-if="item.valid>0">观看课程</text> -->
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
|
||
|
||
import $http from "@/config/requestConfig.js";
|
||
|
||
import { mapState, mapMutations } from "vuex";
|
||
export default {
|
||
props: ['prouctList', 'courseList'],
|
||
data() {
|
||
return {
|
||
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
//判断显示‘上/中/下’
|
||
formatContent(content) {
|
||
const keywords = ["上部", "中部", "下部"];
|
||
let result = [];
|
||
|
||
// 判断是否包含关键字
|
||
keywords.forEach((keyword) => {
|
||
if (content.includes(keyword)) {
|
||
result.push(keyword.substring(0, 1));
|
||
}
|
||
});
|
||
return result.join("");
|
||
},
|
||
// 跳转
|
||
onPageJump(url,id) {
|
||
uni.navigateTo({
|
||
url: `${url}?id=${id}`
|
||
});
|
||
},
|
||
goGoodsDetail(v) {
|
||
uni.navigateTo({
|
||
url: `/pages/goods/index/index?navTitle=${v.title}&title=${v.title}&id=${v.productId}`,
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@import "@/style/mixin.scss";
|
||
.ftitle {
|
||
font-size: 40rpx;
|
||
color: #1E40AF ;
|
||
font-weight: bold;
|
||
letter-spacing: 2rpx;
|
||
text-shadow: 0 2rpx 4rpx rgba(0, 122, 255, 0.6); /* 文字阴影，与卡片阴影风格统一 */
|
||
}
|
||
.imgcontainer {
|
||
background-color: #f0f0f0;
|
||
}
|
||
/* 横向滚动容器，设置固定高度和溢出横向滚动 */
|
||
.scroll-view_H {
|
||
margin-top: 30rpx;
|
||
|
||
}
|
||
/* grid 布局包裹层，设置为 inline-grid 使其横向排列，同时设置 grid 布局 */
|
||
.grid-wrapper {
|
||
display: inline-grid;
|
||
/* 每行 3 列，每列最小 210rpx，剩余空间平均分配（自适应宽度） */
|
||
grid-template-columns: repeat(3, minmax(210rpx, 1fr));
|
||
grid-column-gap: 20rpx; /* 列间距用 rpx 保持一致性 */
|
||
grid-row-gap: 20rpx;
|
||
|
||
width: auto; /* 确保 grid 容器宽度随内容自适应，不强制占满父容器 */
|
||
}
|
||
.flexbox {
|
||
display: flex;
|
||
}
|
||
.item {
|
||
background-color: #fff;
|
||
border-radius: 10rpx;
|
||
padding: 14rpx;
|
||
// 去掉 inline-block，grid 子项不需要
|
||
// display: inline-block;
|
||
overflow: hidden;
|
||
|
||
.name {
|
||
font-size: 24rpx;
|
||
@include toe();
|
||
margin-top: 10rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.price {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
padding-top: 10rpx;
|
||
}
|
||
|
||
.fall {
|
||
background-image: linear-gradient(90deg, #e70503 0%, #e7a535 100%);
|
||
border-radius: 10px;
|
||
color: #fff;
|
||
padding: 4rpx;
|
||
padding-bottom: 8rpx;
|
||
height: 50rpx;
|
||
line-height: 40rpx;
|
||
position: relative;
|
||
margin-top: 50rpx;
|
||
font-size: 24rpx;
|
||
|
||
.mprice {
|
||
width: 52%;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 220rpx;
|
||
}
|
||
}
|
||
|
||
.newBox {
|
||
.flexbox{
|
||
padding-bottom: 100rpx !important;
|
||
}
|
||
.item {
|
||
position: relative;
|
||
margin-bottom: 20rpx;
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
@include ptop_bottm(20px);
|
||
@include pleft_right(10px);
|
||
|
||
@include mshadow(10px, 1) .imgcontainer {
|
||
width: 250rpx;
|
||
height: 250rpx;
|
||
margin-right: 20rpx;
|
||
|
||
image {
|
||
width: 100%;
|
||
}
|
||
}
|
||
.btn_box{
|
||
position: absolute;
|
||
bottom: 20rpx;
|
||
right: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
.btn_box_price{
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
// margin-right: 30rpx;
|
||
color: red;
|
||
line-height: 54rpx;
|
||
}
|
||
.btn_box_btn{
|
||
width: 140rpx;
|
||
height: 54rpx;
|
||
text-align: center;
|
||
line-height: 54rpx;
|
||
border-radius: 20rpx;
|
||
@include theme("btn_bg");
|
||
font-size: 28rpx; color: #fff;
|
||
}
|
||
}
|
||
.buyItems {
|
||
width: 60%;
|
||
}
|
||
|
||
.jianjie {
|
||
line-height: 30rpx; height: 60rpx; overflow: hidden;
|
||
overflow: hidden!important;
|
||
margin-top: 10rpx;
|
||
font-size: 24rpx;
|
||
@include bov();
|
||
color: #9c9c9c;
|
||
}
|
||
|
||
.txt555 {
|
||
font-size: 30rpx;
|
||
color: #000;
|
||
@include bov()
|
||
}
|
||
}
|
||
}
|
||
.learnBox {
|
||
margin-bottom: 10px;
|
||
padding-top: 10px;
|
||
|
||
.learn {
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
margin-top: 20rpx;
|
||
|
||
.item {
|
||
width: 48%;
|
||
margin-bottom: 16px;
|
||
|
||
overflow: hidden;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 200rpx;
|
||
}
|
||
|
||
.txt555 {
|
||
display: block;
|
||
text-align: center;
|
||
height: 40rpx;
|
||
width: 100%;
|
||
line-height: 40rpx;
|
||
@include bov(1);
|
||
margin-top: 10rpx;
|
||
font-size: 24rpx;
|
||
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
</style> |