yanghao
/
chanyishenghuo-uniapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页，课程列表页UI修改

chanyi2.0
yanghao 3 years ago
parent
19ab1980ba
commit
bcdb86f31c
18 changed files with 1886 additions and 1580 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 887
      pages/course/index.vue
  2. 108
      pages/home/components/ArticleList.vue
  3. 124
      pages/home/components/CourseList.vue
  4. 428
      pages/home/components/FirstNewProduct.vue
  5. 54
      pages/home/components/ListTitleBox.vue
  6. 95
      pages/home/components/StadyList.vue
  7. 7
      pages/home/index-copy.vue
  8. 1763
      pages/home/index.vue
  9. BIN
      static/bangdanbg.png
  10. BIN
      static/idx-icon1.png
  11. BIN
      static/ji.png
  12. BIN
      static/tit1.png
  13. BIN
      static/tit2.png
  14. BIN
      static/tit3.png
  15. BIN
      static/tit4.png
  16. BIN
      static/tit5.png
  17. BIN
      static/tit6.png
  18. BIN
      static/yi.png

887
pages/course/index.vue
Unescape View File

@ -1,440 +1,465 @@
<template> <template>
<view class="konwledge-index index"> <view class="konwledge-index index">
<!-- <view class="header header-search acea-row row-center-wrapper"> --> <view class="content-box">
<!-- <view @click="goGoodSearch()" class="search acea-row row-middle"> <view class="tab-box" :class="isFixedTop ? 'fixed' : ''">
<text class="iconfont icon-xiazai5"></text> <view class="tabs">
搜索商品 <scroll-view class="scroll-view_H" scroll-x="true" scroll-with-animation :scroll-left='scrollLeft'>
</view> --> <view class="tab-item scroll-item" :class="index == tabSelect ? 'tab-item-active' : ''" v-for="(item,index) in tabList"
<!-- #ifndef H5 --> :key="item.id" @click="tabChange(item,index)">{{item.categoryName}}</view>
<!-- <view class="qr" @click="startQr()" v-if="$deviceType !== 'weixin'"> </scroll-view>
<image src="../../static/saoyisao-icon.png" /> </view>
</view> --> <SecondMenu :menuList="secondMenu" :active.sync="active" @secondMenuClick="secondMenuClick" v-if="secondMenu.length > 0">
<!-- #endif --> </SecondMenu>
<!-- </view> --> </view>
<view class="content-box"> <view class="bangdan-box" v-if="studyList.length > 0">
<view class="tab-box" :class="isFixedTop ? 'fixed' : ''"> <view class="active-word"><image src="../../static/tit5.png" mode=""></image></view>
<!-- <wuc-tab :tab-list="tabList" :tabCur.sync="TabCur" @change="tabChange" <view class="bangdan-list">
tab-class="text-center text-black bg-white" select-class="text-orange text-xl"> <scroll-view class="scroll-view_H" scroll-x="true" v-if="studyList.length > 0">
</wuc-tab> --> <view class="bangdan-item" v-for="(item,index) in studyList" :key="index"
<view class="tabs"> @click="toStudyDetail(item.id)">
<scroll-view class="scroll-view_H" scroll-x="true" scroll-with-animation :scroll-left='scrollLeft'> <view>
<view class="tab-item scroll-item" :class="index == tabSelect ? 'tab-item-active' : ''" <view class="name">{{item.listName}}</view>
v-for="(item,index) in tabList" :key="item.id" <view class="time">{{item.listStartTime.split(' ')[0]}} 至 {{item.listEndTime.split(' ')[0]}}</view>
</view>
@click="tabChange(item,index)">{{item.categoryName}}</view> <view class="acea-row row-between-wrapper" style="width: 100%;margin-top: 30rpx;">
</scroll-view> <view class="jifen">
</view> <text class="fz44">{{item.integral}}</text>
<SecondMenu :menuList="secondMenu" :active.sync="active" @secondMenuClick="secondMenuClick" v-if="secondMenu.length > 0"> 积分
</SecondMenu> </view>
</view> <view class="signin-btn">报名参加</view>
<view class="bangdan-box" v-if="studyList.length > 0"> </view>
<view class="active-word">打卡榜</view> </view>
<view class="bangdan-list"> </scroll-view>
<scroll-view class="scroll-view_H" scroll-x="true" v-if="studyList.length > 0"> <!-- <view class="no-content" v-if="studyList.length == 0">暂无内容...</view> -->
<view class="bangdan-item" </view>
:class="index%2 !== 0 ? 'bgR' : ''" </view>
v-for="(item,index) in studyList" :key="index" <view class="knowledge-list">
@click="toStudyDetail(item.id)"> <view class="active-word2"><image src="../../static/tit6.png"></image></view>
<view> <view class="no-content" v-if="courseList.length == 0">暂无内容...</view>
<view>{{item.listName}}</view> <view class="knowledge-item acea-row" v-for="(item,index) in courseList" :key="index" @click="toDetail(item.id)">
<view class="time">{{item.listStartTime.split(' ')[0]}} 至 {{item.listEndTime.split(' ')[0]}}</view> <view class="img-box">
</view> <image :src="item.coverImg" mode="aspectFill"></image>
<view class="acea-row row-between-wrapper" style="width: 100%;margin-top: 30rpx;"> </view>
<view class="jifen">{{item.integral}}积分</view> <view class="knowledge-info-box">
<view class="signin-btn">报名参加</view> <view class="title line1">{{item.courseName}}</view>
</view> <view class="time">{{utils.spl(item.courseStartTime)[0]}}至{{utils.spl(item.courseEndTime)[0]}}</view>
</view> <view class="address">{{item.coursePlace}}</view>
</scroll-view> <view class="type-box acea-row row-between row-middle">
<!-- <view class="no-content" v-if="studyList.length == 0">暂无内容...</view> --> <!-- <view class="price">￥{{item.courseCharge}}</view> -->
</view> <!-- <view class="price">{{item.levelName}}</view> -->
</view> <view></view>
<view class="knowledge-list"> <!-- <view class="price colG" v-if="item.chargeType == 0">免费</view> -->
<view class="active-word">课程</view> <view class="signin-btn yellow">去报名</view>
<view class="no-content" v-if="courseList.length == 0">暂无内容...</view> </view>
<view class="knowledge-item acea-row" v-for="(item,index) in courseList" :key="index" @click="toDetail(item.id)"> </view>
<view class="img-box"> </view>
<image :src="item.coverImg" mode="aspectFill"></image> </view>
</view> </view>
<view class="knowledge-info-box"> </view>
<view class="title line1">{{item.courseName}}</view> </template>
<view class="time">{{utils.spl(item.courseStartTime)[0]}}至{{utils.spl(item.courseEndTime)[0]}}</view> <script module="utils" lang="wxs" src="../../utils/subutil.wxs"></script>
<view class="address">{{item.coursePlace}}</view> <script>
<view class="type-box acea-row row-between row-middle"> import WucTab from '@/components/wuc-tab/wuc-tab.vue';
<!-- <view class="price">￥{{item.courseCharge}}</view> --> import SecondMenu from '../knowledge/components/secondMenu.vue';
<!-- <view class="price">{{item.levelName}}</view> --> import {
<view></view> mapState,
<!-- <view class="price colG" v-if="item.chargeType == 0">免费</view> --> mapGetters,
<view class="signin-btn yellow">去报名</view> mapMutations,
</view> mapActions
</view> } from 'vuex'
</view> import {
</view> getCategory,
</view> getArticle,
</view> getStudyList,
</template> getCourses
<script module="utils" lang="wxs" src="../../utils/subutil.wxs"></script> } from '@/api/knowledge';
<script> export default {
import WucTab from '@/components/wuc-tab/wuc-tab.vue'; computed: mapGetters(['userInfo']),
import SecondMenu from '../knowledge/components/secondMenu.vue'; data() {
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex' return {
import { windowWidth: '',
getCategory, isFixedTop: false,
getArticle, currentTab: null,
getStudyList, tabSelect: 0,
getCourses scrollLeft: 200,
} from '@/api/knowledge'; tabList: [],
export default { secondMenu: [],
computed: mapGetters(['userInfo']), active: null,
data() { courseList: [],
return { studyList: [],
windowWidth:'', categoryTitle: '',
isFixedTop: false, }
currentTab:null, },
tabSelect:0, components: {
scrollLeft:200, WucTab,
tabList: [], SecondMenu
secondMenu: [], },
active: null, onLoad() {
courseList: [], //获取节点距离顶部的距离
studyList:[], uni.createSelectorQuery().select('.tab-box').boundingClientRect((res) => {
categoryTitle:'', if (res && res.top > 0) {
} this.tabInitTop = res.top;
}, }
components: { }).exec();
WucTab, getCategory().then((res) => {
SecondMenu this.tabList = res.data
}, this.$set(this, 'secondMenu', res.data[0].categoryList)
onLoad() { this.$set(this, 'currentTab', res.data[0])
//获取节点距离顶部的距离 this.categoryTitle = res.data[0].categoryName;
uni.createSelectorQuery().select('.tab-box').boundingClientRect((res) => { if (res.data[0].categoryList.length > 0) {
if (res && res.top > 0) { this.$set(this, 'active', res.data[0].categoryList[0].id)
this.tabInitTop= res.top; this.categoryTitle = this.categoryTitle + '·' + res.data[0].categoryList[0].categoryName
} } else {
}).exec(); // this.$set(this, 'tabSelect', 0)
getCategory().then((res) => { // this.scrollLeft = 0
this.tabList = res.data }
this.$set(this, 'secondMenu', res.data[0].categoryList) }).then(() => {
this.$set(this, 'currentTab', res.data[0]) this.getStudyList()
this.categoryTitle = res.data[0].categoryName; this.getCourses()
if (res.data[0].categoryList.length > 0) { })
this.$set(this, 'active', res.data[0].categoryList[0].id) },
this.categoryTitle = this.categoryTitle +'·'+res.data[0].categoryList[0].categoryName onShow() {
} else{
// this.$set(this, 'tabSelect', 0) },
// this.scrollLeft = 0 mounted() {
} uni.getSystemInfo({
}).then(() => { success: (res) => {
this.getStudyList() this.windowWidth = res.windowWidth;
this.getCourses() }
}) })
}, },
onShow() { methods: {
onPageScroll(res) {
}, let scrollTop = res.scrollTop;
mounted() { var isSatisfy = scrollTop >= this.tabInitTop ? true : false;
uni.getSystemInfo({ //只有处于吸顶的临界值才会不相等
success:(res)=>{ if (this.isFixedTop === isSatisfy) {
this.windowWidth = res.windowWidth; return false;
} }
}) this.isFixedTop = isSatisfy
}, },
methods: { toStudyDetail(id) {
onPageScroll(res) { this.$yrouter.push({
let scrollTop = res.scrollTop; path: '/pages/study/detail',
var isSatisfy = scrollTop >= this.tabInitTop? true : false; query: {
//只有处于吸顶的临界值才会不相等 id: id,
if (this.isFixedTop === isSatisfy) { },
return false; })
} },
this.isFixedTop = isSatisfy toDetail(id) {
}, this.$yrouter.push({
toStudyDetail(id) { path: '/pages/course/detail',
this.$yrouter.push({ query: {
path: '/pages/study/detail', id: id,
query: { },
id: id, })
}, },
}) getStudyList() {
}, uni.showLoading({
toDetail(id) { title: '正在加载中...'
this.$yrouter.push({ })
path: '/pages/course/detail', var cid = null;
query: { this.active == null ? cid = this.currentTab.id : cid = this.active
id: id, getStudyList({
}, categoryId: cid,
}) listState: 0
}, }).then((res) => {
getStudyList() { if (res.success) {
uni.showLoading({ this.studyList = res.data
title:'正在加载中...' }
}) uni.hideLoading()
var cid = null; })
this.active == null ? cid = this.currentTab.id : cid = this.active },
getStudyList({categoryId: cid,listState:0}).then((res) => { getCourses() {
if (res.success) { uni.showLoading({
this.studyList = res.data title: '正在加载中...'
} })
uni.hideLoading() var cid = null;
}) this.active == null ? cid = this.currentTab.id : cid = this.active
}, getCourses({
getCourses() { categoryId: cid,
uni.showLoading({ listState: 0
title:'正在加载中...' }).then((res) => {
}) if (res.success) {
var cid = null; this.courseList = res.data
this.active == null ? cid = this.currentTab.id : cid = this.active }
getCourses({categoryId: cid,listState:0}).then((res) => { uni.hideLoading()
if (res.success) { uni.stopPullDownRefresh()
this.courseList = res.data })
} },
uni.hideLoading() tabChange(item, index) {
uni.stopPullDownRefresh() this.tabSelect = index
}) this.currentTab = item
}, this.moveTo(index)
tabChange(item,index) { this.categoryTitle = item.categoryName;
this.tabSelect = index if (item.categoryList.length > 0) {
this.currentTab = item this.$set(this, 'active', item.categoryList[0].id)
this.moveTo(index) this.categoryTitle = item.categoryList[0].categoryName;
this.categoryTitle = item.categoryName; }
if (item.categoryList.length > 0) { this.secondMenu = item.categoryList;
this.$set(this, 'active', item.categoryList[0].id) this.getStudyList()
this.categoryTitle = item.categoryList[0].categoryName; this.getCourses()
} },
this.secondMenu = item.categoryList; // 将点击元素移动到中间
this.getStudyList() moveTo(index) {
this.getCourses() const query = uni.createSelectorQuery().in(this)
}, query.selectAll(`.scroll-item`).boundingClientRect(rect => {
// 将点击元素移动到中间 const windowWidth = this.windowWidth // 屏幕宽度
moveTo(index) { let width = 0
const query = uni.createSelectorQuery().in(this) // 循环获取计算当前点击的标签项距离左侧的距离
query.selectAll(`.scroll-item`).boundingClientRect(rect => { for (let i = 0; i < index; i++) {
const windowWidth = this.windowWidth // 屏幕宽度 width += rect[i].width
let width = 0 }
// 循环获取计算当前点击的标签项距离左侧的距离 // 当大于屏幕一半的宽度则滚动，否则就设置位置为0
for (let i = 0; i < index; i++) { if (width > windowWidth / 2) {
width += rect[i].width this.scrollLeft = width + rect[index].width / 2 - windowWidth / 2
} } else {
// 当大于屏幕一半的宽度则滚动，否则就设置位置为0 this.scrollLeft = 0
if (width > windowWidth / 2) { }
this.scrollLeft = width + rect[index].width / 2 - windowWidth / 2 }).exec()
} else { },
this.scrollLeft = 0 secondMenuClick(item) {
} this.active = item.id;
}).exec() this.categoryTitle = item.categoryName;
}, this.getStudyList()
secondMenuClick(item) { this.getCourses()
this.active = item.id; },
this.categoryTitle = item.categoryName; onPullDownRefresh() {
this.getStudyList() this.getStudyList()
this.getCourses() this.getCourses()
}, }
onPullDownRefresh() { }
this.getStudyList() }
this.getCourses() </script>
}
} <style scoped lang="less">
} page{
</script> background: #fff;
}
<style scoped lang="less"> .content-box {
.header{ width: 100%;
.qr { box-sizing: border-box;
width: 36rpx; .tab-box {
height: 38rpx; height: 96rpx;
image{ box-shadow: 0px 6px 12px 0px rgba(227, 227, 227, 0.29);
width: 36rpx; .tabs{
height: 38rpx; width:100%;
}
}
}
.header-search {
transition: all linear 0.3s;
background: #fff;
.search {
border: 2rpx solid #EA533E;
background-color: #fff;
}
}
.colG{
color: #8FB85B !important;
}
.content-box{
width: 100%;
box-sizing: border-box;
.tab-box{
box-shadow: 0px 6px 12px 0px rgba(227,227,227,0.29);
.tabs{
width:auto;
height: 96rpx;
padding-left: 20rpx;
background: #fff;
.scroll-view_H{
white-space: nowrap;
width: 100%;
height: 96rpx;
}
.tab-item{
height: 96rpx; height: 96rpx;
line-height: 96rpx; padding-left: 20rpx;
display: inline-block; position: fixed;
margin-right: 40rpx; top: 0;
font-size: 32rpx; background: #fff;
color: #999999; z-index: 10;
} .scroll-view_H{
.tab-item-active{ white-space: nowrap;
color: #F99C10;
border-bottom: 2px solid #F99C10;
font-weight: bold;
}
}
}
/deep/.second-menu-box{
padding: 30rpx 32rpx;
}
.fixed{
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 99;
}
}
.active-word{
font-size: 34rpx;
}
.no-content{
font-size: 28rpx;
color: #666666;
text-align: center;
padding: 30rpx 0;
}
.bangdan-box{
width: 100%;
box-sizing: border-box;
padding-left: 30rpx;
margin-top: 30rpx;
.scroll-view_H{
white-space: nowrap;
width: 100%;
}
.bangdan-list{
padding: 16rpx 0 0;
}
.bangdan-item{
width: 514rpx;
height: 234rpx;
box-sizing: border-box;
padding: 20rpx;
color: #fff;
display: inline-block;
background: linear-gradient(165deg, #3ABFB8 0%, #7CE1DD 100%);
border-radius: 10rpx;
font-size: 34rpx;
margin-right: 20rpx;
display: inline-block;
.time{
font-size: 24rpx;
color: #FFFFFF;
line-height: 40rpx;
margin:10rpx 0 18rpx;
}
.jifen{
font-size: 46rpx;
font-weight: 500;
}
.signin-btn{
width: 180rpx;
height: 68rpx;
background: #FFFFFF;
border-radius: 40rpx;
text-align: center;
line-height: 68rpx;
color: #222222;
font-size: 26rpx;
}
}
.bgR{
background: linear-gradient(165deg, #FF7563 0%, #FEABA0 100%);
}
}
.konwledge-index {
min-height: 100%;
width: 100%;
background: #fff;
.knowledge-list {
width: 100%;
padding:0 32rpx;
margin-top: 30rpx;
.knowledge-item {
background: #fff;
padding: 16rpx 0;
border-bottom: 1px solid #ECECEC;
.img-box {
width: 204rpx;
height: 200rpx;
margin-right: 30rpx;
image {
width: 100%; width: 100%;
height: 100%; height: 96rpx;
border-radius: 10rpx;
} }
} .tab-item{
.knowledge-info-box { height: 96rpx;
width: calc(100% - 234rpx); line-height: 96rpx;
.title { display: inline-block;
margin-right: 40rpx;
font-size: 32rpx; font-size: 32rpx;
color: #333;
font-size: 500;
line-height: 40rpx;
}
.time,.address{
color: #999;
font-size: 24rpx;
margin-top: 5rpx;
line-height: 34rpx;
}
.intro {
font-size: 28rpx;
color: #999999; color: #999999;
line-height: 40rpx;
margin: 8rpx 0 36rpx;
} }
.type-box { .tab-item-active{
font-size: 24rpx; color: #F99C10;
color: #999; border-bottom: 2px solid #F99C10;
margin-top: 20rpx; font-weight: bold;
.price{
font-size: 28rpx;
color: #EA533E;
}
.signin-btn{
width: 156rpx;
height: 60rpx;
text-align: center;
line-height: 60rpx;
background: #FFEAE7;
border-radius: 12rpx;
font-size: 32rpx;
}
.red{
background: #FFEAE7;
color: #EE7060;
}
.blue {
color: #6E85EB;
background: #ECEFFD;
}
.yellow {
color: #F99C10;
background: #FFEDCC;
}
} }
} }
} }
.knowledge-item:nth-last-child(1){
border: none; /deep/.second-menu-box {
} padding: 30rpx 32rpx;
}
.fixed {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 99;
}
}
.active-word {
image {
width: 136rpx;
height: 46rpx;
}
} }
} .active-word2{
image{
width: 108rpx;
height: 46rpx;
}
}
.no-content {
font-size: 28rpx;
color: #666666;
text-align: center;
padding: 30rpx 0;
}
.bangdan-box {
width: 100%;
box-sizing: border-box;
padding-left: 30rpx;
margin: 80rpx 0;
.scroll-view_H {
white-space: nowrap;
width: 100%;
}
.bangdan-list {
padding: 16rpx 0 0;
}
.bangdan-item {
width: 412rpx;
height: 224rpx;
box-sizing: border-box;
padding: 34rpx;
color: #191919;
display: inline-block;
background: url('https://download.cyjyyjy.com/bangdanbg.png');
background-size: 100% 100%;
font-size: 28rpx;
margin-right: 20rpx;
display: inline-block;
.name{
font-weight: bold;
}
.time {
font-size: 24rpx;
line-height: 34rpx;
margin: 8rpx 0 10rpx;
}
.jifen {
font-size: 24rpx;
font-weight: 500;
color: #FCB047;
.fz44{
font-size: 44rpx;
}
}
.signin-btn {
width: 122rpx;
height: 48rpx;
background: linear-gradient(180deg, #FEECCB 0%, #FCAB3B 100%);
border-radius: 8rpx;
text-align: center;
line-height: 48rpx;
font-size: 24rpx;
color: #fff;
}
}
}
.konwledge-index {
min-height: 100%;
width: 100%;
background: #fff;
.knowledge-list {
width: 100%;
padding: 0 32rpx;
margin-top: 80rpx;
.knowledge-item {
width: 100%;
height: 208rpx;
margin-top: 20rpx;
background: #fff;
border-bottom: 1rpx solid #ECECEC;
position: relative;
.img-box {
width: 204rpx;
height: 200rpx;
margin-right: 30rpx;
image {
width: 100%;
height: 100%;
border-radius: 10rpx;
}
}
.knowledge-info-box {
width: calc(100% - 234rpx);
.title {
font-size: 38rpx;
color: #333;
font-size: 500;
line-height: 52rpx;
}
.time,
.address {
color: #999;
font-size: 28rpx;
margin: 10rpx 0;
line-height: 38rpx;
}
.intro {
font-size: 28rpx;
color: #999999;
line-height: 40rpx;
margin: 8rpx 0 36rpx;
}
.type-box {
font-size: 24rpx;
color: #999;
margin-top: 20rpx;
.price {
font-size: 28rpx;
color: #EA533E;
}
.signin-btn {
width: 156rpx;
height: 60rpx;
text-align: center;
line-height: 60rpx;
background: #FFEAE7;
border-radius: 12rpx;
font-size: 32rpx;
position: absolute;
right: 4rpx;
bottom: 4rpx;
}
.red {
background: #FFEAE7;
color: #EE7060;
}
.blue {
color: #6E85EB;
background: #ECEFFD;
}
.yellow {
color: #F99C10;
background: #FFEDCC;
}
}
}
}
.knowledge-item:nth-last-child(1) {
border: none;
}
}
}
</style> </style>

108
pages/home/components/ArticleList.vue
Unescape View File

@ -0,0 +1,108 @@
<template>
<view class="article-list">
<view class="article-item" v-for="(item,index) in list" :key="index" @click="toArticleDetail(item.id)">
<image :src="item.imageInput" mode="aspectFill"></image>
<view class="article-content">
<view class="article-title line1">{{item.title}}</view>
<view class="article-desc line1">{{item.synopsis}}</view>
<view class="author-box acea-row row-between">
<view class="acea-row">
<view class="author">{{item.author}}</view>
<view class="time">{{item.addTime.split(' ')[0]}}</view>
<view>{{item.visit}}人阅读</view>
</view>
<view class="tips"
:class="item.chargeType == 0 ? 'free-bg' : item.chargeType == 1 ? '' : 'jifen'">
{{item.chargeType == 0 ? '免费' : item.chargeType == 1 ? '收费' : '积分'}}
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default{
props:{
list: {
type: Array,
default: []
}
},
methods:{
toArticleDetail(id){
this.$yrouter.push({
path: '/pages/knowledge/detail',
query: {
id:id,
},
})
},
}
}
</script>
<style lang="less">
.article-list{
width: 100%;
margin-top: 20rpx;
.article-item{
width: 100%;
background: #fff;
box-sizing: border-box;
margin-bottom: 52rpx;
box-shadow: 0px 2rpx 8rpx rgba(0, 0, 0, 0.16);
image{
width: 100%;
height: 266rpx;
border-radius: 10rpx;
margin-bottom: 20rpx;
}
.article-content{
padding: 28rpx 32rpx;
}
.article-title{
font-size: 36rpx;
font-weight: 500;
color: #333333;
line-height: 50rpx;
margin-bottom: 8rpx;
}
.article-desc{
font-size: 24rpx;
font-weight: 400;
color: #999999;
line-height: 40rpx;
margin-bottom: 30rpx;
}
.author-box{
font-size: 24rpx;
color: #999;
.author{
color: #EA533E;
}
.time{
margin: 0 12rpx;
}
.tips{
width: 100rpx;
font-size: 20rpx;
color: #FFAD3A;
height: 34rpx;
text-align: center;
line-height: 34rpx;
background: #fcd391;
border-radius: 44rpx;
}
.free-bg{
background: #8FB85B;
color: #D7FFA4;
}
.jifen{
background: #AAC8FA;
color: #5693F9;
}
}
}
}
</style>

124
pages/home/components/CourseList.vue
Unescape View File

@ -0,0 +1,124 @@
<template>
<view class="recommend-list-box acea-row row-between">
<view class="recommend-item" v-for="(item,index) in list" :key="index" @click="toCourseDetail(item.id)">
<view class="img-box"><image :src="item.coverImg" mode="aspectFill"></image></view>
<view class="course-content">
<view class="course-title line1">{{item.courseName}}</view>
<view class="course-tips-box acea-row">
<view class="course-tip-item blue">{{item.categoryName}}</view>
</view>
<!-- <view class="price" v-if="item.level > 2">{{item.level}}级课程</view>
<view class="price" v-if="item.level == 2">￥{{item.courseCharge}}</view>
<view class="price colG" v-if="item.chargeType == 0 || item.level == 1">免费</view> -->
<view class="course-address acea-row row-between-wrapper">
<view class="address">{{item.coursePlace}}</view>
<view class="course-time">{{item.enterStartTime}}-{{item.enterEndTime}}</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default{
props: {
list: {
type: Array,
default: []
}
},
data(){
return {
titImg: '../../../static/tit1.png',
titleWord: '查看更多课程'
}
},
methods:{
toCourseDetail(id){
this.$yrouter.push({
path: '/pages/course/detail',
query: {
id:id,
},
})
},
seeMoreClick(){
uni.switchTab({
url: "/pages/course/index"
})
},
}
}
</script>
<style lang="less">
.recommend-list-box{
width: 100%;
.recommend-item{
width: 334rpx;
background: #fff;
border-radius: 10rpx;
font-size: 28rpx;
color: #333;
margin-right: 22rpx;
margin-bottom: 22rpx;
box-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.16);
image{
width: 334rpx;
height: 216rpx;
border-top-left-radius: 10rpx;
border-top-right-radius: 10rpx;
}
.course-content{
width: 100%;
box-sizing: border-box;
padding:0 10rpx 20rpx;
}
.course-title{
line-height: 40rpx;
}
.course-tips-box{
margin: 12rpx 0 24rpx;
font-size: 24rpx;
color: #999;
.course-tip-item{
min-width: 60rpx;
height: 34rpx;
line-height: 32rpx;
text-align: center;
background: #EDEFF8;
border-radius: 4rpx;
border: 1px solid #6E85EB;
padding: 0 6rpx;
font-size: 22rpx;
margin-right: 20rpx;
box-sizing: border-box;
margin-right: 10rpx;
}
.blue{
color: #6E85EB;
background: #EDEFF8;
border-color: #6E85EB;
}
.yellow{
color: #F99C10;
background: #FFEDCC;
border-color: #F99C10;
}
}
.price{
font-size: 32rpx;
color: #EA533E;
font-weight: 500;
margin: 16rpx 0;
}
.course-address{
font-size: 24rpx;
color: #999999;
}
}
.recommend-item:nth-child(2n){
margin-right: 0;
}
}
</style>

428
pages/home/components/FirstNewProduct.vue
Unescape View File

@ -1,216 +1,214 @@
<template> <template>
<view class="group-goods pa20 mx20 mb10" v-if="detail.length>0"> <view class="group-goods pa20 mx20 mb10" v-if="detail.length>0">
<view class="title-box x-bc" @tap="$yrouter.push({ path: '/pages/shop/HotNewGoods/index',query:{type:3} })"> <view class="title-box x-bc" @tap="$yrouter.push({ path: '/pages/shop/HotNewGoods/index',query:{type:3} })">
<text class="title">首发新品</text> <text class="title">首发新品</text>
<view class="group-people x-f"> <view class="group-people x-f">
<text class="tip">更多</text> <text class="tip">更多</text>
<text class="cuIcon-right"></text> <text class="cuIcon-right"></text>
</view> </view>
</view> </view>
<view class="goods-box swiper-box x-f"> <view class="goods-box swiper-box x-f">
<swiper class="carousel" circular @change="swiperChange" :autoplay="true" duration="2000"> <swiper class="carousel" circular @change="swiperChange" :autoplay="true" duration="2000">
<swiper-item v-for="(goods, index) in goodsList" :key="index" class="carousel-item"> <swiper-item v-for="(goods, index) in goodsList" :key="index" class="carousel-item">
<view class="goods-list-box x-f"> <view class="goods-list-box x-f">
<block v-for="mgoods in goods" :key="mgoods.id"> <block v-for="mgoods in goods" :key="mgoods.id">
<view class="min-goods" <view class="min-goods" @tap="$yrouter.push({ path: '/pages/shop/GoodsCon/index',query:{id:mgoods.id} })">
@tap="$yrouter.push({ path: '/pages/shop/GoodsCon/index',query:{id:mgoods.id} })"> <view class="img-box">
<view class="img-box"> <view class="tag">new</view>
<view class="tag">new</view> <image class="img" :src="mgoods.image" mode="widthFix"></image>
<image class="img" :src="mgoods.image" mode="widthFix"></image> </view>
</view> <view class="price-box">
<view class="price-box"> <view class="y-f">
<view class="y-f"> <text class="seckill-current">￥{{ mgoods.price }}</text>
<text class="seckill-current">￥{{ mgoods.price }}</text> <text class="original">销量{{ mgoods.sales }}{{mgoods.unitName}}</text>
<text class="original">销量{{ mgoods.sales }}{{mgoods.unitName}}</text> </view>
</view> </view>
</view> <view class="title">
<view class="title"> <slot name="titleText"></slot>
<slot name="titleText"></slot> </view>
</view> </view>
</view> </block>
</block> </view>
</view> </swiper-item>
</swiper-item> </swiper>
</swiper> <view class="swiper-dots" v-if="goodsList.length > 1">
<view class="swiper-dots" v-if="goodsList.length > 1"> <text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length" :key="index"></text>
<text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length" </view>
:key="index"></text> </view>
</view> </view>
</view> </template>
</view>
</template> <script>
import shActivityGoods from '@/components/sh-activity-goods.vue';
<script>
import shActivityGoods from '@/components/sh-activity-goods.vue'; export default {
name: "FirstNewProduct",
export default { components: {
name: "FirstNewProduct", shActivityGoods
components: { },
shActivityGoods data() {
}, return {
data() { goodsList: [],
return { swiperCurrent: 0
goodsList: [], };
swiperCurrent: 0 },
}; props: {
}, detail: Array
props: { },
detail: Array computed: {},
}, created() {},
computed: {}, watch: {
created() {}, detail(next) {
watch: { this.goodsList = this.sortData(next, 4);
detail(next) { }
this.goodsList = this.sortData(next, 4); },
} methods: {
}, swiperChange(e) {
methods: { this.swiperCurrent = e.detail.current;
swiperChange(e) { },
this.swiperCurrent = e.detail.current; // 数据分层
}, sortData(oArr, length) {
// 数据分层 let arr = [];
sortData(oArr, length) { let minArr = [];
let arr = []; oArr.forEach(c => {
let minArr = []; if (minArr.length === length) {
oArr.forEach(c => { minArr = [];
if (minArr.length === length) { }
minArr = []; if (minArr.length === 0) {
} arr.push(minArr);
if (minArr.length === 0) { }
arr.push(minArr); minArr.push(c);
} });
minArr.push(c);
}); return arr;
},
return arr; jump(path, query) {
}, this.$yrouter.push({
jump(path, query) { path,
this.$yrouter.push({ query,
path, });
query, },
}); }
}, }
} </script>
}
</script>
<style lang="scss" scoped>
.group-goods {
<style lang="scss" scoped> position: relative;
.group-goods { z-index: 9;
position: relative; }
z-index: 9;
} .swiper-box,
.carousel {
.swiper-box, width: 700rpx;
.carousel { height: 240upx;
width: 700rpx; position: relative;
height: 240upx; border-radius: 20rpx;
position: relative;
border-radius: 20rpx; .carousel-item {
width: 100%;
.carousel-item { height: 100%;
width: 100%; // padding: 0 28upx;
height: 100%; overflow: hidden;
// padding: 0 28upx; }
overflow: hidden;
} .swiper-image {
width: 100%;
.swiper-image { height: 100%;
width: 100%; // border-radius: 10upx;
height: 100%; background: #ccc;
// border-radius: 10upx; }
background: #ccc; }
}
} .swiper-dots {
display: flex;
.swiper-dots { position: absolute;
display: flex; left: 50%;
position: absolute; transform: translateX(-50%);
left: 50%; bottom: 0rpx;
transform: translateX(-50%); z-index: 66;
bottom: 0rpx;
z-index: 66; .dot {
width: 45rpx;
.dot { height: 3rpx;
width: 45rpx; background: #eee;
height: 3rpx; border-radius: 50%;
background: #eee; margin-right: 10rpx;
border-radius: 50%; }
margin-right: 10rpx;
} .dot-active {
width: 45rpx;
.dot-active { height: 3rpx;
width: 45rpx; background: #a8700d;
height: 3rpx; border-radius: 50%;
background: #a8700d; margin-right: 10rpx;
border-radius: 50%; }
margin-right: 10rpx; }
}
} // 今日必拼+限时抢购
.group-goods {
// 今日必拼+限时抢购 background: #fff;
.group-goods { border-radius: 20rpx;
background: #fff; overflow: hidden;
border-radius: 20rpx;
overflow: hidden; .title-box {
padding-bottom: 20rpx;
.title-box {
padding-bottom: 20rpx; .title {
font-size: 32rpx;
.title { font-weight: bold;
font-size: 32rpx; }
font-weight: bold;
} .group-people {
.time-box {
.group-people { font-size: 26rpx;
.time-box { color: #edbf62;
font-size: 26rpx;
color: #edbf62; .count-text-box {
width: 30rpx;
.count-text-box { height: 34rpx;
width: 30rpx; background: #edbf62;
height: 34rpx; text-align: center;
background: #edbf62; line-height: 34rpx;
text-align: center; font-size: 24rpx;
line-height: 34rpx; border-radius: 6rpx;
font-size: 24rpx; color: rgba(#fff, 0.9);
border-radius: 6rpx; margin: 0 8rpx;
color: rgba(#fff, 0.9); }
margin: 0 8rpx; }
}
} .head-box {
.head-img {
.head-box { width: 40rpx;
.head-img { height: 40rpx;
width: 40rpx; border-radius: 50%;
height: 40rpx; background: #ccc;
border-radius: 50%; }
background: #ccc; }
}
} .tip {
font-size: 28rpx;
.tip { padding-left: 30rpx;
font-size: 28rpx; color: #666;
padding-left: 30rpx; }
color: #666;
} .cuIcon-right {
font-size: 30rpx;
.cuIcon-right { line-height: 28rpx;
font-size: 30rpx; color: #666;
line-height: 28rpx; }
color: #666; }
} }
}
} .goods-box {
.goods-item {
.goods-box { margin-right: 22rpx;
.goods-item {
margin-right: 22rpx; &:nth-child(4n) {
margin-right: 0;
&:nth-child(4n) { }
margin-right: 0; }
} }
} }
}
}
</style> </style>

54
pages/home/components/ListTitleBox.vue
Unescape View File

@ -0,0 +1,54 @@
<template>
<view class="title-box acea-row row-between-wrapper">
<view class="title"><image :src="titImg"></image></view>
<view class="more" @click="seeMoreClick">{{titWord}}</view>
</view>
</template>
<script>
export default{
name: 'ListTitleBox',
props:{
// 标题图片
titImg:{
type: String,
default: ''
},
// 标题内容
titWord: {
type: String,
default: ''
},
// 图片尺寸
width: {
type: String,
default: ''
},
height: {
type: String,
default: ''
}
},
methods:{
seeMoreClick(){
this.$emit('seeMoreClick')
}
}
}
</script>
<style lang="less">
.title-box{
width: 100%;
margin-bottom: 28rpx;
image{
width: 206rpx;
height: 58rpx;
}
.more{
font-size: 28rpx;
color: #999;
}
}
</style>

95
pages/home/components/StadyList.vue
Unescape View File

@ -0,0 +1,95 @@
<template>
<view class="study-list uni-padding-wrap uni-common-mt">
<scroll-view class="scroll-view_H" scroll-x="true">
<view class="study-item scroll-view-item_H" v-for="(item,index) in list" :key="index" @click="toStudyDetail(item.id)">
<view class="day-box acea-row row-middle">
<image src="../../../static/date-icon.png" v-if="index%2 == 0"></image>
<image src="../../../static/date-icon2.png" v-if="index%2 != 0"></image>
<text>{{item.clockTimes}}</text>
</view>
<view class="study-content">
<view class="study-title line1">{{item.listName}}</view>
<view class="study-time acea-row-nowrap row-between-wrapper">
<view>{{item.listStartTime}}开始</view>
<view>{{item.enterNum}}人已参与</view>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default{
props:{
list: {
type: Array,
default: []
}
},
methods:{
toStudyDetail(id){
this.$yrouter.push({
path: '/pages/study/detail',
query: {
id:id,
},
})
},
}
}
</script>
<style lang="less">
.study-list{
width: 100%;
.scroll-view_H{
white-space: nowrap;
width: 100%;
}
.study-item{
width: 334rpx;
height: 180rpx;
display: inline-block;
background: linear-gradient(143deg, #FDAF97 0%, #ED5E48 100%);
box-shadow: 0px 4rpx 8rpx 4rpx rgba(250,194,183,0.32);
border-radius: 10rpx;
margin-right: 20rpx;
.day-box{
color: #E73D21;
font-size: 48rpx;
line-height: 58rpx;
margin-left: 10rpx;
image{
width: 34rpx;
height: 34rpx;
margin-right: 10rpx;
}
}
.study-content{
width: calc(100% - 12rpx);
background: #fff;
font-size: 24rpx;
color: #999;
box-shadow: 0px 4rpx 8rpx 4rpx rgba(250,194,183,0.32);
border-radius: 10rpx;
margin: 2rpx auto;
padding:16rpx 10rpx 10rpx;
box-sizing: border-box;
.study-title{
font-size: 28rpx;
font-weight: 500;
color: #222222;
line-height: 40rpx;
margin-bottom: 12rpx;
}
}
}
.study-item:nth-child(2n){
background: linear-gradient(143deg, #C4DBFF 0%, #7FAAF2 100%);
.day-box{
color: #557AB3;
}
}
}
</style>

7
pages/home/index-copy.vue
Unescape View File

@ -12,13 +12,6 @@
<!-- #endif --> <!-- #endif -->
</view> </view>
<view v-for="(item, index) in homeData" :key="index"> <view v-for="(item, index) in homeData" :key="index">
<!-- <view class="head_box" v-if="item.type == 'header'" :style="{ background: bgcolor }" :class="{ active: bgcolor }">
<cu-custom :isBack="true" :bgColor="bgcolor">
<block slot="backText">
<text class="nav-title shopro-selector-rect">{{ item.componentContent.title }}</text>
</block>
</cu-custom>
</view> -->
<Banner v-if="item.type == 'banner'" :detail="item.componentContent.bannerData" @getbgcolor="getbgcolor"></Banner> <Banner v-if="item.type == 'banner'" :detail="item.componentContent.bannerData" @getbgcolor="getbgcolor"></Banner>
<uni-notice-bar v-if="item.type == 'noticeBar'" scrollable="true" @click="goRoll(item.componentContent.roll[0])" single="true" :speed="10" showIcon="true" :text="item.componentContent.roll[0].info"></uni-notice-bar> <uni-notice-bar v-if="item.type == 'noticeBar'" scrollable="true" @click="goRoll(item.componentContent.roll[0])" single="true" :speed="10" showIcon="true" :text="item.componentContent.roll[0].info"></uni-notice-bar>
<view class="content_box home_content_box" v-if="item.type == 'menu' && item.componentContent.menus"> <view class="content_box home_content_box" v-if="item.type == 'menu' && item.componentContent.menus">

1763
pages/home/index.vue
View File

File diff suppressed because it is too large Load Diff

BIN
static/bangdanbg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
static/idx-icon1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
static/ji.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
static/tit1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
static/tit2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
static/tit3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

BIN
static/tit4.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
static/tit5.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
static/tit6.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
static/yi.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

Write Preview
Loading…
Cancel
Save