This commit is contained in:
liuyuan
2025-10-17 18:15:48 +08:00
parent 39e5105cb2
commit 192f00c069
11 changed files with 7414 additions and 5752 deletions

View File

@@ -0,0 +1,340 @@
<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-blockgrid 子项不需要
// 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>

View File

@@ -1909,11 +1909,11 @@ export default {
.topSearch_box {
image {
width: 48rpx;
height: 48rpx;
width: 58rpx;
height: 58rpx;
position: absolute;
top: 60rpx;
right: 30rpx;
left: 30rpx;
}
}

View File

@@ -1,8 +1,11 @@
<template>
<view style=" height: 100vh; background: #f7faf9;">
<view style=" height: 100vh; background: #f7faf9;" :style="`background:${show==1?'#f4f7ff':''}`">
<z-nav-bar>
<u-search :clearabled="true" bgColor="#fff" borderColor="#54a966" focus v-model="bookScreen.bookName"
@custom='souBook' @clear="clear"></u-search>
<div style="width: 480rpx">
<u-search :clearabled="true" bgColor="#fff" borderColor="#54a966" focus v-model="bookScreen.bookName"
@custom='souBook' @clear="clear" style="width: 100%;"></u-search>
</div>
</z-nav-bar>
<view class="sear_ch" v-if="this.show==0">
<view class="sear_ch_tit">
@@ -13,8 +16,8 @@
</view>
</view>
<view class="sear_list" v-if="this.show==1">
<view class="flexbox" style="display: flex; flex-wrap: wrap;">
<commonSearchFor :prouctList="bookList" :courseList="courseList"></commonSearchFor>
<!-- <view class="flexbox" style="display: flex; flex-wrap: wrap;">
<view class="bl_tioa" v-for="(item,index) in bookList" @click="onpageJump(item)">
<view class="bl_tioa_bg">
<image :src="item.productImages"></image>
@@ -23,7 +26,7 @@
</view>
</view>
</view>
</view>
</view> -->
<view style="height: 1px;"></view>
<view>
@@ -49,6 +52,8 @@
</template>
<script>
import $http from "@/config/requestConfig.js";
import commonSearchFor from './commonSearchFor.vue'
import musicPlay from '@/components/music.vue'
export default {
data() {
@@ -59,6 +64,7 @@
status: 3,
show: 0,
bookList: [],
courseList: [],
historyList: [],
bookScreen: {
authorName: '', //作者
@@ -104,23 +110,12 @@
// 下拉刷新
onReachBottom() {
this.status = 0
if (this.bookScreen.page < this.totalPage) {
this.bookScreen.page = this.bookScreen.page + 1
setTimeout(() => {
this.$http
// .post('book/book/list', this.bookScreen)
.post('book/shopproduct/selectList?limit=8&page=1&key='+this.bookScreen.bookName)
.then(res => {
this.totalPage = res.page.totalPage
for (let i in res.page.list) {
this.bookList.push(res.page.list[i])
}
});
this.getData()
}, 1000)
} else {
this.status = 1
}
},
@@ -135,31 +130,56 @@
this.getHistory()
},
components:{
musicPlay
musicPlay,
commonSearchFor
},
//方法
methods: {
// 获取缓存
getHistory() {
this.historyList = uni.getStorageSync('hisRecords')
if (this.historyList.length > 10) {
this.historyList.splice(10, this.historyList.length)
var historyList = uni.getStorageSync('hisRecords')? uni.getStorageSync('hisRecords'):[]
historyList=[...new Set(historyList)]
if (historyList.length > 10) {
historyList= historyList.splice(10, historyList.length)
}
this.historyList=historyList
uni.setStorageSync('hisRecords', this.historyList);
}
},
// 获取列表数据
getData() {
this.$http
// .post('book/book/list', this.bookScreen)
.post('book/shopproduct/selectList?limit=8&page=1&key='+ this.bookScreen.bookName)
$http
.request({
url: "common/homeSearch/searchData",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: {
keyWord:this.bookScreen.bookName,
"appName":"wmys",
},
header: {
//默认 无 说明:请求头
"Content-Type": "application/json",
},
})
.then(res => {
console.log(res)
this.bookList = res.page.list
this.totalPage = res.page.totalPage
this.status = 3
if(res.code==0){
this.bookList = res.shopProductList
this.courseList = res.courseEntities
this.status = 3
this.show = 1
});
}else{
this.bookList=[]
this.courseList=[]
}
}).catch(err=>{
})
},
// 清空
@@ -277,7 +297,7 @@
}
.sear_list {
margin: 50rpx 30rpx 0 30rpx;
margin: 50rpx 24rpx 0 24rpx;
.bl_tioa {
width: 33.3%;