太湖公益

This commit is contained in:
@fawn-nine
2024-06-07 15:04:50 +08:00
parent 62282727ff
commit 9befb5c111
22 changed files with 620 additions and 130 deletions

View File

@@ -130,7 +130,7 @@
page { page {
height: 100%; height: 100%;
background-color: #f7faf9; background-color: #fff;
} }
/* #endif */ /* #endif */

View File

@@ -54,7 +54,7 @@
"text": "购物车" "text": "购物车"
}, },
{ {
"pagePath": "pages/library/library", "pagePath": "pages/taihu/index",
"iconPath": "static/tab/tab_nor_03.png", "iconPath": "static/tab/tab_nor_03.png",
"selectedIconPath": "static/tab/tab_cur_03.png", "selectedIconPath": "static/tab/tab_cur_03.png",
"text": "太湖公益" "text": "太湖公益"
@@ -80,7 +80,7 @@
"text": "购物车" "text": "购物车"
}, },
{ {
"pagePath": "pages/library/library", "pagePath": "pages/taihu/index",
"iconPath": "static/tab/tab_nor_03.png", "iconPath": "static/tab/tab_nor_03.png",
"selectedIconPath": "static/tab/tab_cur_03.png", "selectedIconPath": "static/tab/tab_cur_03.png",
"text": "太湖公益" "text": "太湖公益"

View File

@@ -260,7 +260,7 @@
"path" : "pages/course/courseSet", "path" : "pages/course/courseSet",
"style" : "style" :
{ {
"navigationBarTitleText" : "课程设置" "navigationBarTitleText" : "课程说明"
} }
}, },
{ {
@@ -277,6 +277,30 @@
{ {
"navigationBarTitleText" : "课程大纲" "navigationBarTitleText" : "课程大纲"
} }
},
{
"path" : "pages/course/coursePrice",
"style" :
{
"navigationBarTitleText" : "课程价格",
"enablePullDownRefresh": true
}
},
{
"path" : "pages/course/platformInfo",
"style" :
{
"navigationBarTitleText" : "平台说明",
"enablePullDownRefresh": true
}
},
{
"path" : "pages/taihu/index",
"style" :
{
"navigationBarTitleText" : "太湖公益"
// "enablePullDownRefresh": true
}
} }
], ],
"globalStyle": { "globalStyle": {
@@ -307,7 +331,7 @@
"text": "购物车" "text": "购物车"
}, },
{ {
"pagePath": "pages/peanut/shopping", "pagePath": "pages/taihu/index",
"iconPath": "static/tab/tab_nor_03.png", "iconPath": "static/tab/tab_nor_03.png",
"selectedIconPath": "static/tab/tab_cur_03.png", "selectedIconPath": "static/tab/tab_cur_03.png",
"text": "太湖公益" "text": "太湖公益"

View File

@@ -11,7 +11,7 @@
<view class="courseTitle" v-if="course.id"> <view class="courseTitle" v-if="course.id">
<text class="title">{{course.title}}</text> <text class="title">{{course.title}}</text>
</view> </view>
<view class="containerBg"> <view class="containerBg" v-if="course.content && course.content != ''">
<view class="prof"> <view class="prof">
<uni-section style="background: transparent;" title="课程介绍" type="line"></uni-section> <uni-section style="background: transparent;" title="课程介绍" type="line"></uni-section>
<view class="" v-html="course.content"> <view class="" v-html="course.content">
@@ -313,8 +313,8 @@
.item { .item {
font-size: 26rpx; font-size: 26rpx;
height: 80rpx; height: 96rpx;
line-height: 80rpx; line-height: 96rpx;
border-bottom: 1px solid #ececec; border-bottom: 1px solid #ececec;
text { text {

View File

@@ -6,26 +6,35 @@
<view class="container"> <view class="container">
<view class="" v-if="courseList.length > 0"> <view class="" v-if="courseList.length > 0">
<uni-collapse accordion> <uni-collapse accordion>
<uni-collapse-item v-for="(item,index) in courseList" :key="index" :title="item.medical.title" <uni-collapse-item v-for="(item,index) in courseList" :key="index" :title="item.medical.title"
:thumb="item.medical.icon"> :thumb="item.medical.icon">
<view class="content"> <view class="content">
<view class="" v-for="(item1, index1) in item.courseList" :key="index1"> <view class="courseItemleve1" v-for="(item1, index1) in item.courseList" :key="index1">
<view class="text courseItem flexbox"><u-icon name="pushpin" color="#2979ff" size="24"></u-icon><text>{{item1.title}}--</text></view> <view class="text courseItem flexbox"><u-icon name="pushpin" color="#2979ff"
size="24"></u-icon><text>{{item1.title}}--</text></view>
<view class="" v-for="(item2, index2) in item1.courseCatalogueEntityList" :key="index2"> <view class="" v-for="(item2, index2) in item1.courseCatalogueEntityList" :key="index2">
<view class="priceItem"> <view class="priceItem flexbox">
<text class="text" v-if="item1.courseCatalogueEntityList.length > 1" style="font-weight: bold; margin-right: 20rpx;">{{item2.title}}</text> <text class="text mname" v-if="item1.courseCatalogueEntityList.length > 1"
<text class="text">半年{{item2.halfFee}}</text><text class="text" style="margin-left: 20rpx;">整年{{item2.fee}}</text> style="font-weight: bold; margin-right: 20rpx;">{{item2.title}}</text>
<!-- <view class="pbox flexbox"> -->
<text class="text">半年{{item2.halfFee}} </text><text class="text"
</view> style="margin-left: 20rpx;">整年{{item2.fee}} </text>
<!-- </view> -->
</view>
</view> </view>
</view> <view class="buyBox">
<view class="saveBtn buybtn flexbox" @click="goBuy('halfFee')">
<u-icon name="bag" color="#fff" size="24"></u-icon>
<text>立即购买</text>
</view>
</view>
</view>
</view> </view>
</uni-collapse-item> </uni-collapse-item>
</uni-collapse> </uni-collapse>
</view> </view>
<u-divider v-else text="暂无数据"></u-divider> <u-divider v-if="status == 1" text="暂无数据"></u-divider>
<u-divider v-if="status == 0" text="加载中..."></u-divider>
</view> </view>
<z-navigation></z-navigation> <z-navigation></z-navigation>
<!-- <music-play :playData="playData"></music-play> --> <!-- <music-play :playData="playData"></music-play> -->
@@ -43,7 +52,8 @@
data() { data() {
return { return {
playData: {}, playData: {},
courseList: [] courseList: [],
status:0,
}; };
}, },
//第一次加载 //第一次加载
@@ -75,12 +85,15 @@
.then(res => { .then(res => {
if (res.code == 0 && res.list.length > 0) { if (res.code == 0 && res.list.length > 0) {
this.courseList = res.list this.courseList = res.list
this.status = 2
} else { } else {
this.courseList = [] this.courseList = []
this.status = 1
} }
}).catch(e => { }).catch(e => {
console.log(e, '报错') console.log(e, '报错')
this.courseList = [] this.courseList = []
this.status = 1
}); });
}, },
itemClick(op) { itemClick(op) {
@@ -95,13 +108,70 @@
.flexbox { .flexbox {
display: flex; display: flex;
} }
.priceItem{margin-bottom:20rpx; font-size: 28rpx;} .buyBox{
.courseItem{ background: $containerColor; border-radius: 20rpx; .saveBtn{ margin: 0 auto;}
align-items: center;margin-bottom:20rpx; display: block; padding: 10rpx 0; width: 100%;
.u-icon{display: inline-block;}
text{font-size: 28rpx; padding-left: 10rpx;}
} }
.saveBtn {
width: 260rpx;
align-items: center;
justify-content: center;
@include theme("btn_bg");
height: 60rpx;
// width: 46%;
overflow: hidden;
border-radius: 30rpx;
text {
padding-left: 10rpx;
font-size: 28rpx;
color: #fff;
}
}
.courseItemleve1 {
padding: 20rpx;
border-radius: 20rpx;
border: 1px solid #eee;
overflow: hidden;
margin-bottom: 20rpx;
background: $containerColor;
}
.priceItem {justify-content: center;
margin-bottom: 20rpx;
font-size: 28rpx;
background-color: #82aee2;
border-radius: 20rpx; padding:10rpx;
// border: 1px solid #ff5500;
.pbox{ justify-content: center; width: 100%; text-align: center;}
text{
color: #fff;
}
.mname{padding: 2rpx 10rpx; background: #00e1ec ; border-radius: 20rpx;}
}
.courseItem {
background: $containerColor; font-weight: bold; border-bottom: 1px dotted #e1e1e1;
border-radius: 20rpx;
align-items: center;
margin-bottom: 20rpx;
display: block;
padding: 10rpx 0;
width: 100%;
.u-icon {
display: inline-block;
}
text {
font-size: 28rpx;
padding-left: 10rpx;
}
}
.container { .container {
.content{padding: 0 20rpx;} .content {
padding: 0 20rpx;
}
} }
</style> </style>

View File

@@ -10,10 +10,10 @@
<!-- <button type="primary" @click="showDrawer('showRight')"><text class="word-btn-white">全部课程</text> <!-- <button type="primary" @click="showDrawer('showRight')"><text class="word-btn-white">全部课程</text>
</button> --> </button> -->
<uni-drawer ref="showRight" mode="right" :width="320" @change="changeD($event,'showRight')"> <uni-drawer ref="showRight" mode="right" :width="320" @change="changeD($event,'showRight')">
<!-- <view class="close"> <view class="close">
<button @click="closeDrawer('showRight')"><text <view class="zhan" style="width: 100%;"></view>
class="word-btn-white">关闭Drawer</text></button> <u-icon name="close" @click="closeDrawer('showRight')" color="#2979ff" size="28"></u-icon>
</view> --> </view>
<view class="proTitle"> <view class="proTitle">
<text>点击课程名称即可查看对应的课程说明</text> <text>点击课程名称即可查看对应的课程说明</text>
</view> </view>
@@ -168,7 +168,7 @@
if(e){ if(e){
this.tagId = this.treeList[e].id this.tagId = this.treeList[e].id
this.getCourseInfo(this.tagId) this.getCourseInfo(this.tagId)
this.closeDrawer('showRight') // this.closeDrawer('showRight')
} }
}, },
changeD(e, type) { changeD(e, type) {
@@ -293,6 +293,12 @@
video{width: 100% !important; } video{width: 100% !important; }
} }
.close {
display: flex;
justify-content: right;
padding-top: 60rpx;
padding-right: 20px;
}
.infoBox { .infoBox {
padding: 20rpx; padding: 20rpx;
font-size: 26rpx; font-size: 26rpx;

View File

@@ -2,24 +2,24 @@
<view> <view>
<!-- 公共组件-每个页面必须引入 --> <!-- 公共组件-每个页面必须引入 -->
<public-module></public-module> <public-module></public-module>
<z-nav-bar :title="courseInfo.id ? courseTitle : '课程说明'"> <z-nav-bar :title="courseInfo.id ? courseTitle : '课程说明'">
<uni-icons type="bars" class="topRight" slot="right" @click="showDrawer('showRight')" size="22"></uni-icons> <uni-icons type="bars" class="topRight" slot="right" @click="showDrawer('showRight')" size="22"></uni-icons>
</z-nav-bar> </z-nav-bar>
<view class="containerBg"> <view class="containerBg">
<view class="example-body"> <view class="example-body">
<!-- <button type="primary" @click="showDrawer('showRight')"><text class="word-btn-white">全部课程</text> <!-- <button type="primary" @click="showDrawer('showRight')"><text class="word-btn-white">全部课程</text>
</button> --> </button> -->
<uni-drawer ref="showRight" mode="right" :width="320" @change="changeD($event,'showRight')"> <uni-drawer ref="showRight" mode="right" :width="320" @change="changeD($event,'showRight')">
<!-- <view class="close"> <view class="close">
<button @click="closeDrawer('showRight')"><text <view class="zhan" style="width: 100%;"></view>
class="word-btn-white">关闭Drawer</text></button> <u-icon name="close" @click="closeDrawer('showRight')" color="#2979ff" size="28"></u-icon>
</view> --> </view>
<view class="proTitle"> <view class="proTitle">
<text>点击课程名称即可查看对应的课程说明</text> <text>点击课程名称即可查看对应的课程说明</text>
</view> </view>
<uni-collapse accordion v-model="accordionVal" v-if="treeList.length > 0" @change="collapseChange"> <uni-collapse accordion v-model="accordionVal" v-if="treeList.length > 0" @change="collapseChange">
<uni-collapse-item v-for="(item, index) in treeList" :key="index" :title="item.title" <uni-collapse-item v-for="(item, index) in treeList" :key="index" :title="item.title"
:show-animation="true" > :show-animation="true">
<view class="content"> <view class="content">
<!-- <text class="text">{{item.title}}</text> --> <!-- <text class="text">{{item.title}}</text> -->
<view class="sub1List"> <view class="sub1List">
@@ -59,8 +59,9 @@
</view> </view>
<view> <view>
<view v-if="courseInfo.mediaType ==1 && courseInfo.media != ''" style="width: 100%;height: 100%;text-align: center;" v-html="videoHTML"> <view v-if="courseInfo.mediaType ==1 && courseInfo.media != ''"
</view> style="width: 100%;height: 100%;text-align: center;" v-html="videoHTML">
</view>
<!-- 视频播放器样式 --> <!-- 视频播放器样式 -->
<!-- <view class="videoTemp" v-show="showTemp"> <!-- <view class="videoTemp" v-show="showTemp">
<u-icon name="play-circle" color="#fff" size="40" @click="clickToPlay"></u-icon> <u-icon name="play-circle" color="#fff" size="40" @click="clickToPlay"></u-icon>
@@ -101,7 +102,7 @@
pid: null, pid: null,
courseInfo: {}, courseInfo: {},
poster:'../../static/videoF.jpg', //封面图 poster: '../../static/videoF.jpg', //封面图
current: { current: {
poster: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png', poster: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png',
name: '致爱丽丝', name: '致爱丽丝',
@@ -113,9 +114,9 @@
}, },
curId: null, curId: null,
courseTitle: '', courseTitle: '',
showTemp:true, showTemp: true,
videoContext:null, videoContext: null,
videoUrl:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4' videoUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'
}; };
}, },
//第一次加载 //第一次加载
@@ -130,9 +131,9 @@
computed: { computed: {
...mapState(['userInfo']), ...mapState(['userInfo']),
videoHTML() { videoHTML() {
return `<video class="video-box" poster="http://ehh-public-01.oss-cn-beijing.aliyuncs.com/wumenyishu-image/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240606110049.jpg" src="${this.videoUrl}" enable-danmu danmu-btn controls style="width:100%;height:320rpx"></video>` return `<video class="video-box" poster="http://ehh-public-01.oss-cn-beijing.aliyuncs.com/wumenyishu-image/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240606110049.jpg" src="${this.videoUrl}" enable-danmu danmu-btn controls style="width:100%;height:320rpx"></video>`
} }
}, },
//页面显示 //页面显示
onShow() { onShow() {
// 隐藏原生的tabbar // 隐藏原生的tabbar
@@ -147,7 +148,7 @@
this.showTemp = true this.showTemp = true
this.videoContext = null this.videoContext = null
}, },
onPullDownRefresh(){ onPullDownRefresh() {
uni.stopPullDownRefresh() uni.stopPullDownRefresh()
}, },
components: { components: {
@@ -163,42 +164,42 @@
}, },
// 关闭窗口 // 关闭窗口
closeDrawer(e) { closeDrawer(e) {
this.$refs[e].close() this.$refs[e].close()
}, },
changeD(e, type) { changeD(e, type) {
// console.log((type === 'showRight' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭')); // console.log((type === 'showRight' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
this[type] = e this[type] = e
if(!e){ if (!e) {
this.showTemp = false this.showTemp = false
console.log('关闭弹窗') console.log('关闭弹窗')
this.videoContext.play() this.videoContext.play()
} }
}, },
formatRichText(html) { //控制图片大小 formatRichText(html) { //控制图片大小
let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) { let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, ''); match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, ''); match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, ''); match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
return match; return match;
}); });
newContent = newContent.replace(/style="[^"]+"/gi, function (match, capture) { newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
'max-width:100%;'); 'max-width:100%;');
return match; return match;
}); });
newContent = newContent.replace(/<br[^>]*\/>/gi, ''); newContent = newContent.replace(/<br[^>]*\/>/gi, '');
newContent = newContent.replace(/\<img/gi, newContent = newContent.replace(/\<img/gi,
'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"'); '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
return newContent; return newContent;
}, },
collapseChange(e){ collapseChange(e) {
console.log(e,'折叠面板点击'); console.log(e, '折叠面板点击');
if(e){ if (e) {
this.tagId = this.treeList[e].id this.tagId = this.treeList[e].id
this.getCourseInfo(this.tagId) this.getCourseInfo(this.tagId)
this.closeDrawer('showRight') // this.closeDrawer('showRight')
} }
}, },
getData() { getData() {
@@ -231,15 +232,15 @@
this.courseInfo = res.course this.courseInfo = res.course
this.courseTitle = this.courseInfo.title + '课程说明' this.courseTitle = this.courseInfo.title + '课程说明'
this.curId = id this.curId = id
if(this.courseInfo.mediaType == 1 && this.courseInfo.media != ''){ if (this.courseInfo.mediaType == 1 && this.courseInfo.media != '') {
// this.videoUrl = this.courseInfo.media // this.videoUrl = this.courseInfo.media
// this.poster = this.videoUrl + // this.poster = this.videoUrl +
// "?x-oss-process=video/snapshot,t_0,f_jpg" // "?x-oss-process=video/snapshot,t_0,f_jpg"
}else{ } else {
// this.videoUrl = '' // this.videoUrl = ''
this.poster = '' this.poster = ''
} }
// console.log(id, 'id') // console.log(id, 'id')
} else { } else {
this.courseInfo = {} this.courseInfo = {}
@@ -256,14 +257,14 @@
}); });
}, },
clickCourseInfo(item) { clickCourseInfo(item) {
this.getCourseInfo(item.id) this.getCourseInfo(item.id)
this.closeDrawer('showRight') this.closeDrawer('showRight')
}, },
playEnd(){ playEnd() {
this.showTemp = true this.showTemp = true
}, },
clickToPlay(){ clickToPlay() {
this.showTemp = false this.showTemp = false
this.videoContext.play() this.videoContext.play()
} }
@@ -288,9 +289,20 @@
// } // }
// } // }
#myVideo { #myVideo {
width: 100% !important; width: 100% !important;
} }
video{width: 100% !important; }
video {
width: 100% !important;
}
}
.close {
display: flex;
justify-content: right;
padding-top: 60rpx;
padding-right: 20px;
} }
.infoBox { .infoBox {
@@ -338,7 +350,7 @@
background-color: rgba(0, 0, 0, .5); background-color: rgba(0, 0, 0, .5);
z-index: 1; z-index: 1;
} }
.proTitle { .proTitle {
text-align: center; text-align: center;
@@ -365,7 +377,8 @@
text { text {
padding-left: 20rpx; padding-left: 20rpx;
} }
.item:last-child{
.item:last-child {
border-bottom: 0; border-bottom: 0;
} }
} }
@@ -375,25 +388,47 @@
color: #fff; color: #fff;
background-image: linear-gradient(90deg, #258feb 0%, #00e1ec 100%) !important; background-image: linear-gradient(90deg, #258feb 0%, #00e1ec 100%) !important;
} }
.textss{display: inline-block; width: 100%; border-bottom: 1px solid #ebeef5;}
.leve2{ .textss {
.textss{padding-left: 20rpx;} display: inline-block;
width: 100%;
border-bottom: 1px solid #ebeef5;
} }
.leve2{
.textss{padding-left: 40rpx;} .leve2 {
.textss {
padding-left: 20rpx;
}
} }
.leve3{
.textss{padding-left: 60rpx;} .leve2 {
.textss {
padding-left: 40rpx;
}
} }
.leve4{
.textss{padding-left: 80rpx;} .leve3 {
.textss {
padding-left: 60rpx;
}
} }
}
.leve4 {
.textss {
padding-left: 80rpx;
}
}
}
// .textss:last-child{ // .textss:last-child{
// border-bottom: 0; // border-bottom: 0;
// } // }
.topRight{margin-right: 20rpx; font-size: 28rpx; display: flex;} .topRight {
margin-right: 20rpx;
font-size: 28rpx;
display: flex;
}
audio { audio {
width: 100% !important; width: 100% !important;

View File

@@ -361,16 +361,16 @@
} }
.subCate { .subCate {
margin-top: 10px; padding-top:10px;
margin-bottom: 5px; padding-bottom: 10px;
.item { .item {
font-size: 26rpx; font-size: 26rpx;
background-color: #fff; background-color: #fff;
border-radius: 10px; border-radius: 10px;
color: #333; color: #333;
margin-right: 30rpx; margin-right: 16rpx;
padding: 10rpx 12rpx; padding: 14rpx 30rpx;
} }
.item:last-child() { .item:last-child() {

View File

@@ -3,8 +3,11 @@
<!-- 公共组件-每个页面必须引入 --> <!-- 公共组件-每个页面必须引入 -->
<public-module></public-module> <public-module></public-module>
<z-nav-bar title="课程大纲"></z-nav-bar> <z-nav-bar title="课程大纲"></z-nav-bar>
<view class="container flexbox"> <view class="container">
<view class="imagebg">
</view>
<view class="ss" >
<view class="box"> <view class="box">
<view class="item flexbox" @click="itemClick('jiage')"> <view class="item flexbox" @click="itemClick('jiage')">
@@ -15,7 +18,7 @@
<view class="type"> <view class="type">
<image src="/static/priceIcon.png" mode="widthFix"></image> <image src="/static/priceIcon.png" mode="widthFix"></image>
</view> </view>
<text>课程价格</text> <text>课程价格 > </text>
</view> </view>
</view> </view>
@@ -27,7 +30,7 @@
<view class="type"> <view class="type">
<image src="/static/shuomingIcon.png" mode="aspectFill"></image> <image src="/static/shuomingIcon.png" mode="aspectFill"></image>
</view> </view>
<text>课程说明</text> <text>课程说明 > </text>
</view> </view>
</view> </view>
<view class="item flexbox" @click="itemClick('jianjie')"> <view class="item flexbox" @click="itemClick('jianjie')">
@@ -38,10 +41,10 @@
<view class="type"> <view class="type">
<image src="/static/jianjieIcon.png" mode="widthFix"></image> <image src="/static/jianjieIcon.png" mode="widthFix"></image>
</view> </view>
<text>平台简介</text> <text>平台简介 > </text>
</view> </view>
</view> </view>
</view> </view></view>
</view> </view>
<z-navigation></z-navigation> <z-navigation></z-navigation>
<!-- <music-play :playData="playData"></music-play> --> <!-- <music-play :playData="playData"></music-play> -->
@@ -109,17 +112,23 @@
.flexbox { .flexbox {
display: flex; display: flex;
} }
.imagebg{
.container { width: 100%;
align-items: center;
min-height: calc(100vh - 270rpx); background:#fff url(@/static/pageBg.jpg) top no-repeat;
@include pleft_right(10px); background-size:cover;
background: url(@/static/pageBg.jpg) center no-repeat; height:45vh
background-size: cover; }
.container {
min-height: calc(100vh - 270rpx);
align-items: end !important;
position: relative; background-color: #fff;
} }
.ss{@include pleft_right(10px); }
.box { .box { overflow: hidden;
// position: absolute; left: 20rpx; bottom: 0rpx;
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;
@@ -132,15 +141,15 @@
margin: 20rpx 0; margin: 20rpx 0;
position: relative; position: relative;
padding: 16rpx; padding: 16rpx;
@include mshadow(10px, 1); // @include mshadow(10px, 1);
.tt{ .tt{
align-items: center; align-items: center;
} }
.logo { .logo {
image { image {
width: 150rpx; width: 100rpx;
height: 150rpx; height: 100rpx;
} }
} }
} }
@@ -153,8 +162,8 @@
// position: absolute; right: 0; // position: absolute; right: 0;
image { image {
width: 50rpx; width: 40rpx;
height: 60rpx; height: 50rpx;
} }
} }
@@ -162,14 +171,14 @@
width: 100%; width: 100%;
font-size: 40rpx; font-size: 40rpx;
color: #fff; color: #fff;
line-height: 150rpx; line-height: 100rpx;
text-align: right; text-align: right;
padding-right: 20rpx; padding-right: 20rpx;
} }
} }
.title { .title {
font-size: 32rpx; font-size: 30rpx;
font-weight: bold; font-weight: bold;
display: block; display: block;
text-align: center; text-align: center;

View File

@@ -117,8 +117,8 @@
}, },
formatRichText(html) { formatRichText(html) {
if(html == ''){ if(html == '' || !html){
return '暂无内容'; html = '暂无内容';
} }
//控制图片大小 //控制图片大小
let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) { let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
@@ -148,6 +148,7 @@
@import '@/style/mixin.scss'; @import '@/style/mixin.scss';
.tabs { .tabs {
background-color: $containerColor; background-color: $containerColor;
padding-bottom: 20rpx; padding-bottom: 20rpx;
} }
@@ -155,8 +156,7 @@
.box { .box {
background-color: #fff; background-color: #fff;
@include pleft_right(10px); @include pleft_right(10px);
min-height: calc(100vh - 270rpx);
padding-top: 20rpx; padding-top: 20rpx;
} }
@@ -172,4 +172,7 @@
line-height: 48rpx; line-height: 48rpx;
margin-top: 10rpx; margin-top: 10rpx;
} }
::v-deep body{
background-color: #fff;
}
</style> </style>

View File

@@ -68,6 +68,9 @@
} }
},
onPullDownRefresh() {
uni.stopPullDownRefresh()
}, },
components: { components: {
// musicPlay // musicPlay

View File

@@ -493,22 +493,7 @@
}); });
}, },
newsClick(item) { newsClick(item) {
// if (item.type == 1) { // url跳转
// if (item.url != '') {
// // this.openURL(item.url)
// this.surl = item.url
// this.urlVisible = true
// } else {
// }
// } else { // 内部跳转
// uni.navigateTo({
// url: 'pages/news/news'
// });
// uni.navigateTo({
// url: `/pages/news/news?newsId=1&title=1`
// });
console.log('item',item) console.log('item',item)
uni.navigateTo({ uni.navigateTo({
url: `/pages/news/news?newsId=${item.id}&url=${item.url}&type=${item.type}` url: `/pages/news/news?newsId=${item.id}&url=${item.url}&type=${item.type}`

355
pages/taihu/index.vue Normal file
View File

@@ -0,0 +1,355 @@
<template>
<view>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<z-nav-bar title="太湖公益"></z-nav-bar>
<view class="top">
<view class="logo">
<image src="../../static/logo.png" mode="widthFix"></image>
</view>
<view class="bg">
<image src="../../static/gongyitop.jpg" mode="widthFix"></image>
</view>
</view>
<view :class="['tabs',fixed ? 'fixed' : '']">
<u-tabs :class="['tabList']" @click="tabClick" :activeStyle="activeStyle" :scrollable="scrollable"
:list="tabList" itemStyle="padding-left: 15px; padding-right: 15px; height: 50px;"></u-tabs>
</view>
<view class="proBox" v-show="tabId == 1">
<view class="proBoxItem flexbox" v-if="productList.length > 0">
<view class="item" v-for="(item, index) in productList" :key="index" @click="proClick(item)">
<view class="img flexbox">
<image :src="item.productImages" mode="widthFix"></image>
</view>
<text>{{item.productName}}</text>
</view>
</view>
<!-- <view class="" v-else> -->
<u-divider v-show="pObj.status == 2" text="已加载全部"></u-divider>
<u-divider v-show="pObj.status == 3" text="暂无数据"></u-divider>
<u-divider v-show="pObj.status == 1" text="加载中..."></u-divider>
<!-- </view> -->
</view>
<view class="newsBox" v-show="tabId == 2">
<view class="newsBoxItem" v-if="newsList.length > 0">
<view class="">
<view class="flexbox item" v-for="(item, index) in newsList" :key="index" @click="newsClick(item)">
<text class="title">{{item.title}}</text><text class="time">{{item.createTime}}</text>
</view>
</view>
</view>
<!-- <view class="" v-else> -->
<u-divider v-show="nObj.status == 2" text="已加载全部"></u-divider>
<u-divider v-show="nObj.status == 3" text="暂无数据"></u-divider>
<u-divider v-show="nObj.status == 1" text="加载中..."></u-divider>
<!-- </view> -->
</view>
<u-back-top :scroll-top="scrollTop" bottom="150" :customStyle='bgiStyle' :iconStyle="iconStyle"></u-back-top>
<!-- <music-play :playData="playData"></music-play> -->
<z-navigation></z-navigation>
</view>
</template>
<script>
// import musicPlay from '@/components/music.vue'
import $http from '@/config/requestConfig.js';
var clear;
import {
mapState
} from 'vuex';
export default {
data() {
return {
playData: {},
productList: [],
newsList: [],
activeStyle: {
color: '#333',
fontWeight: 'bold',
transform: 'scale(1.2)',
// backgroundColor: '#258feb'
},
scrollTop: 0,
fixed: false,
bgiStyle: {
background: '#fff'
},
iconStyle: {
fontSize: '40rpx',
fontWeight: 'bold',
color: '#258feb',
},
tabId: 1,
scrollable: false,
tabList: [{
id: 1,
name: '太湖商品'
},
{
id: 2,
name: '太湖之光'
},
],
pObj: { // 商品列表请求相关
pFlag: true,
page: 1,
status: 88
},
nObj: { // 新闻列表请求相关
nFlag: true,
page: 1,
status: 88
}
};
},
//第一次加载
onLoad(e) {
// 隐藏原生的tabbar
uni.hideTabBar();
this.getProData();
this.getnewsData()
},
computed: {
...mapState(['userInfo'])
},
//页面显示
onShow() {
// 隐藏原生的tabbar
uni.hideTabBar();
},
onReachBottom() {
console.log('触底加载')
if (this.tabId == 1) { // 商品
if (this.pObj.status != 2) {
this.pObj.page++
this.getProData()
} else {
console.log('没有更多了')
}
}
if (this.tabId == 2) { // 资讯
if (this.nObj.status != 2) {
this.nObj.page++
this.getnewsData()
} else {
console.log('没有更多了')
}
}
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
if (this.scrollTop > 500) {
this.fixed = true
} else {
this.fixed = false
}
// console.log(this.scrollTop,'this.scrollTop')
},
onPullDownRefresh() {
uni.stopPullDownRefresh()
},
components: {
// musicPlay
},
//方法
methods: {
proClick(item) {
uni.navigateTo({
url: `/pages/bookShop/commodityDetail?id=${item.productId}&title=${item.productName}`
});
},
newsClick(item) {
console.log(454545)
uni.navigateTo({
url: `/pages/news/news?newsId=${item.id}&url=${item.url}&type=${item.type}`
})
},
getProData() {
if (!this.pObj.pFlag) {
return
}
this.pObj.pFlag = false
this.pObj.status = 1
$http.request({
url: "common/taihuWelfare/getTaihuWelfareProductList",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: {
"page": this.pObj.page,
"limit": 14
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
}).then(res => {
if (res.code == 0 && res.page.records.length > 0) {
var _list = res.page.records
this.productList = this.productList.concat(_list)
if (res.page.pages > this.pObj.page) {
this.pObj.status = 88
} else {
// 加载完毕
this.pObj.status = 2
}
}
this.pObj.pFlag = true
}).catch(e => {
console.log(e, '商品列表')
this.pObj.status = 88
this.pObj.pFlag = true
});
},
getnewsData() {
if (!this.nObj.nFlag) {
return
}
this.nObj.nFlag = false
this.nObj.status = 1
$http.request({
url: "common/taihuWelfare/getTaihuWelfareArticleList",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: {
"page": this.nObj.page,
"limit": 14
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
}).then(res => {
if (res.code == 0 && res.page.records.length > 0) {
var _list = res.page.records
this.newsList = this.newsList.concat(_list)
if (res.page.pages > this.nObj.page) {
this.nObj.status = 88
} else {
// 加载完毕
this.nObj.status = 2
}
}
this.nObj.nFlag = true
}).catch(e => {
console.log(e, '资讯列表')
this.nObj.status = 88
this.nObj.nFlag = true
});
},
tabClick(e) {
if (this.tabId == e.id) {
return
}
this.tabId = e.id
console.log(e, '点击')
}
},
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.top {
overflow: hidden;
position: relative;
.logo {
width: 110rpx;
height: 110rpx;
position: absolute;
z-index: 1;
left: calc(50% - 50rpx);
top: 30rpx;
}
.bg {
width: 100%;
height: auto;
}
image {
width: 100%;
}
}
.newsBoxItem {
padding: 20rpx;
.item {
line-height: 80rpx;
border-bottom: 1px solid #eee;
justify-content: space-between;
align-items: center;
.time { display: block; width: 300rpx;
font-size: 26rpx;
color: #bebebe;width: 35%;
}
.title {
width: 60%;
font-size: 28rpx;
display: inline-block;
@include toe()
}
}
}
.fixed {
top: 88rpx;
position: fixed;
z-index: 1;
width: 100%;
background-color: #fff !important;
}
.tabs {
background-color: $containerColor;
padding-bottom: 20rpx;
}
.flexbox {
display: flex;
}
.proBoxItem {
flex-wrap: wrap;
padding: 20rpx;
justify-content: space-between;
.item {
width: 48%;
overflow: hidden;
text {
display: block;
@include toe();
font-size: 26rpx;
padding: 20rpx 0;
}
.img {
height: 400rpx;
align-items: center;
overflow: hidden;
background-color: $imgBg ;
image {
width: 100%;
height: 80rpx;
}
}
}
}
.content {
font-size: 26rpx;
line-height: 48rpx;
margin-top: 10rpx;
}
</style>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.8 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
static/gongyitop.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 48 KiB