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

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

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