Browse Source

首页,课程列表页UI修改

chanyi2.0
yanghao 3 years ago
parent
commit
bcdb86f31c
  1. 489
      pages/course/index.vue
  2. 108
      pages/home/components/ArticleList.vue
  3. 124
      pages/home/components/CourseList.vue
  4. 412
      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. 1529
      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

489
pages/course/index.vue

@ -1,46 +1,31 @@
<template> <template>
<view class="konwledge-index index"> <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="content-box">
<view class="tab-box" :class="isFixedTop ? 'fixed' : ''"> <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"> <view class="tabs">
<scroll-view class="scroll-view_H" scroll-x="true" scroll-with-animation :scroll-left='scrollLeft'> <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' : ''" <view class="tab-item scroll-item" :class="index == tabSelect ? 'tab-item-active' : ''" v-for="(item,index) in tabList"
v-for="(item,index) in tabList" :key="item.id" :key="item.id" @click="tabChange(item,index)">{{item.categoryName}}</view>
@click="tabChange(item,index)">{{item.categoryName}}</view>
</scroll-view> </scroll-view>
</view> </view>
<SecondMenu :menuList="secondMenu" :active.sync="active" @secondMenuClick="secondMenuClick" v-if="secondMenu.length > 0"> <SecondMenu :menuList="secondMenu" :active.sync="active" @secondMenuClick="secondMenuClick" v-if="secondMenu.length > 0">
</SecondMenu> </SecondMenu>
</view> </view>
<view class="bangdan-box" v-if="studyList.length > 0"> <view class="bangdan-box" v-if="studyList.length > 0">
<view class="active-word">打卡榜</view> <view class="active-word"><image src="../../static/tit5.png" mode=""></image></view>
<view class="bangdan-list"> <view class="bangdan-list">
<scroll-view class="scroll-view_H" scroll-x="true" v-if="studyList.length > 0"> <scroll-view class="scroll-view_H" scroll-x="true" v-if="studyList.length > 0">
<view class="bangdan-item" <view class="bangdan-item" v-for="(item,index) in studyList" :key="index"
:class="index%2 !== 0 ? 'bgR' : ''" @click="toStudyDetail(item.id)">
v-for="(item,index) in studyList" :key="index"
@click="toStudyDetail(item.id)">
<view> <view>
<view>{{item.listName}}</view> <view class="name">{{item.listName}}</view>
<view class="time">{{item.listStartTime.split(' ')[0]}} {{item.listEndTime.split(' ')[0]}}</view> <view class="time">{{item.listStartTime.split(' ')[0]}} {{item.listEndTime.split(' ')[0]}}</view>
</view> </view>
<view class="acea-row row-between-wrapper" style="width: 100%;margin-top: 30rpx;"> <view class="acea-row row-between-wrapper" style="width: 100%;margin-top: 30rpx;">
<view class="jifen">{{item.integral}}积分</view> <view class="jifen">
<text class="fz44">{{item.integral}}</text>
积分
</view>
<view class="signin-btn">报名参加</view> <view class="signin-btn">报名参加</view>
</view> </view>
</view> </view>
@ -49,7 +34,7 @@
</view> </view>
</view> </view>
<view class="knowledge-list"> <view class="knowledge-list">
<view class="active-word">课程</view> <view class="active-word2"><image src="../../static/tit6.png"></image></view>
<view class="no-content" v-if="courseList.length == 0">暂无内容...</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="knowledge-item acea-row" v-for="(item,index) in courseList" :key="index" @click="toDetail(item.id)">
<view class="img-box"> <view class="img-box">
@ -76,7 +61,12 @@
<script> <script>
import WucTab from '@/components/wuc-tab/wuc-tab.vue'; import WucTab from '@/components/wuc-tab/wuc-tab.vue';
import SecondMenu from '../knowledge/components/secondMenu.vue'; import SecondMenu from '../knowledge/components/secondMenu.vue';
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex' import {
mapState,
mapGetters,
mapMutations,
mapActions
} from 'vuex'
import { import {
getCategory, getCategory,
getArticle, getArticle,
@ -87,17 +77,17 @@
computed: mapGetters(['userInfo']), computed: mapGetters(['userInfo']),
data() { data() {
return { return {
windowWidth:'', windowWidth: '',
isFixedTop: false, isFixedTop: false,
currentTab:null, currentTab: null,
tabSelect:0, tabSelect: 0,
scrollLeft:200, scrollLeft: 200,
tabList: [], tabList: [],
secondMenu: [], secondMenu: [],
active: null, active: null,
courseList: [], courseList: [],
studyList:[], studyList: [],
categoryTitle:'', categoryTitle: '',
} }
}, },
components: { components: {
@ -108,7 +98,7 @@
// //
uni.createSelectorQuery().select('.tab-box').boundingClientRect((res) => { uni.createSelectorQuery().select('.tab-box').boundingClientRect((res) => {
if (res && res.top > 0) { if (res && res.top > 0) {
this.tabInitTop= res.top; this.tabInitTop = res.top;
} }
}).exec(); }).exec();
getCategory().then((res) => { getCategory().then((res) => {
@ -118,8 +108,8 @@
this.categoryTitle = res.data[0].categoryName; this.categoryTitle = res.data[0].categoryName;
if (res.data[0].categoryList.length > 0) { if (res.data[0].categoryList.length > 0) {
this.$set(this, 'active', res.data[0].categoryList[0].id) this.$set(this, 'active', res.data[0].categoryList[0].id)
this.categoryTitle = this.categoryTitle +'·'+res.data[0].categoryList[0].categoryName this.categoryTitle = this.categoryTitle + '·' + res.data[0].categoryList[0].categoryName
} else{ } else {
// this.$set(this, 'tabSelect', 0) // this.$set(this, 'tabSelect', 0)
// this.scrollLeft = 0 // this.scrollLeft = 0
} }
@ -133,15 +123,15 @@
}, },
mounted() { mounted() {
uni.getSystemInfo({ uni.getSystemInfo({
success:(res)=>{ success: (res) => {
this.windowWidth = res.windowWidth; this.windowWidth = res.windowWidth;
} }
}) })
}, },
methods: { methods: {
onPageScroll(res) { onPageScroll(res) {
let scrollTop = res.scrollTop; let scrollTop = res.scrollTop;
var isSatisfy = scrollTop >= this.tabInitTop? true : false; var isSatisfy = scrollTop >= this.tabInitTop ? true : false;
// //
if (this.isFixedTop === isSatisfy) { if (this.isFixedTop === isSatisfy) {
return false; return false;
@ -166,11 +156,14 @@
}, },
getStudyList() { getStudyList() {
uni.showLoading({ uni.showLoading({
title:'正在加载中...' title: '正在加载中...'
}) })
var cid = null; var cid = null;
this.active == null ? cid = this.currentTab.id : cid = this.active this.active == null ? cid = this.currentTab.id : cid = this.active
getStudyList({categoryId: cid,listState:0}).then((res) => { getStudyList({
categoryId: cid,
listState: 0
}).then((res) => {
if (res.success) { if (res.success) {
this.studyList = res.data this.studyList = res.data
} }
@ -179,11 +172,14 @@
}, },
getCourses() { getCourses() {
uni.showLoading({ uni.showLoading({
title:'正在加载中...' title: '正在加载中...'
}) })
var cid = null; var cid = null;
this.active == null ? cid = this.currentTab.id : cid = this.active this.active == null ? cid = this.currentTab.id : cid = this.active
getCourses({categoryId: cid,listState:0}).then((res) => { getCourses({
categoryId: cid,
listState: 0
}).then((res) => {
if (res.success) { if (res.success) {
this.courseList = res.data this.courseList = res.data
} }
@ -191,7 +187,7 @@
uni.stopPullDownRefresh() uni.stopPullDownRefresh()
}) })
}, },
tabChange(item,index) { tabChange(item, index) {
this.tabSelect = index this.tabSelect = index
this.currentTab = item this.currentTab = item
this.moveTo(index) this.moveTo(index)
@ -208,18 +204,18 @@
moveTo(index) { moveTo(index) {
const query = uni.createSelectorQuery().in(this) const query = uni.createSelectorQuery().in(this)
query.selectAll(`.scroll-item`).boundingClientRect(rect => { query.selectAll(`.scroll-item`).boundingClientRect(rect => {
const windowWidth = this.windowWidth // const windowWidth = this.windowWidth //
let width = 0 let width = 0
// //
for (let i = 0; i < index; i++) { for (let i = 0; i < index; i++) {
width += rect[i].width width += rect[i].width
} }
// 0 // 0
if (width > windowWidth / 2) { if (width > windowWidth / 2) {
this.scrollLeft = width + rect[index].width / 2 - windowWidth / 2 this.scrollLeft = width + rect[index].width / 2 - windowWidth / 2
} else { } else {
this.scrollLeft = 0 this.scrollLeft = 0
} }
}).exec() }).exec()
}, },
secondMenuClick(item) { secondMenuClick(item) {
@ -237,204 +233,233 @@
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.header{ page{
.qr { background: #fff;
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;
} }
} .content-box {
.colG{ width: 100%;
color: #8FB85B !important; box-sizing: border-box;
} .tab-box {
.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; height: 96rpx;
padding-left: 20rpx; box-shadow: 0px 6px 12px 0px rgba(227, 227, 227, 0.29);
background: #fff; .tabs{
.scroll-view_H{ width:100%;
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; width: 100%;
border-bottom: 2px solid #F99C10; height: 96rpx;
font-weight: bold; }
.tab-item{
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;
}
} }
/deep/.second-menu-box{
padding: 30rpx 32rpx; .active-word {
image {
width: 136rpx;
height: 46rpx;
}
} }
.fixed{ .active-word2{
position: -webkit-sticky; image{
position: sticky; width: 108rpx;
top: 0; height: 46rpx;
z-index: 99; }
} }
} .no-content {
.active-word{ font-size: 28rpx;
font-size: 34rpx; color: #666666;
} text-align: center;
.no-content{ padding: 30rpx 0;
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;
.bangdan-box {
width: 100%;
box-sizing: border-box;
padding-left: 30rpx;
margin: 80rpx 0;
.scroll-view_H {
white-space: nowrap;
width: 100%;
} }
.jifen{
font-size: 46rpx; .bangdan-list {
font-weight: 500; padding: 16rpx 0 0;
} }
.signin-btn{
width: 180rpx; .bangdan-item {
height: 68rpx; width: 412rpx;
background: #FFFFFF; height: 224rpx;
border-radius: 40rpx; box-sizing: border-box;
text-align: center; padding: 34rpx;
line-height: 68rpx; color: #191919;
color: #222222; display: inline-block;
font-size: 26rpx; 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;
}
} }
} }
.bgR{
background: linear-gradient(165deg, #FF7563 0%, #FEABA0 100%); .konwledge-index {
} min-height: 100%;
}
.konwledge-index {
min-height: 100%;
width: 100%;
background: #fff;
.knowledge-list {
width: 100%; width: 100%;
padding:0 32rpx; background: #fff;
margin-top: 30rpx;
.knowledge-item { .knowledge-list {
background: #fff; width: 100%;
padding: 16rpx 0; padding: 0 32rpx;
border-bottom: 1px solid #ECECEC; margin-top: 80rpx;
.img-box { .knowledge-item {
width: 204rpx; width: 100%;
height: 200rpx; height: 208rpx;
margin-right: 30rpx; margin-top: 20rpx;
image { background: #fff;
width: 100%; border-bottom: 1rpx solid #ECECEC;
height: 100%; position: relative;
border-radius: 10rpx; .img-box {
} width: 204rpx;
} height: 200rpx;
.knowledge-info-box { margin-right: 30rpx;
width: calc(100% - 234rpx);
.title { image {
font-size: 32rpx; width: 100%;
color: #333; height: 100%;
font-size: 500; border-radius: 10rpx;
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; .knowledge-info-box {
text-align: center; width: calc(100% - 234rpx);
line-height: 60rpx;
background: #FFEAE7; .title {
border-radius: 12rpx; font-size: 38rpx;
font-size: 32rpx; color: #333;
font-size: 500;
line-height: 52rpx;
} }
.red{
background: #FFEAE7; .time,
color: #EE7060; .address {
color: #999;
font-size: 28rpx;
margin: 10rpx 0;
line-height: 38rpx;
} }
.blue {
color: #6E85EB; .intro {
background: #ECEFFD; font-size: 28rpx;
color: #999999;
line-height: 40rpx;
margin: 8rpx 0 36rpx;
} }
.yellow {
color: #F99C10; .type-box {
background: #FFEDCC; 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){ .knowledge-item:nth-last-child(1) {
border: none; border: none;
}
} }
} }
}
</style> </style>

108
pages/home/components/ArticleList.vue

@ -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

@ -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>

412
pages/home/components/FirstNewProduct.vue

@ -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>
</view>
</template> </template>
<script> <script>
import shActivityGoods from '@/components/sh-activity-goods.vue'; import shActivityGoods from '@/components/sh-activity-goods.vue';
export default { export default {
name: "FirstNewProduct", name: "FirstNewProduct",
components: { components: {
shActivityGoods shActivityGoods
}, },
data() { data() {
return { return {
goodsList: [], goodsList: [],
swiperCurrent: 0 swiperCurrent: 0
}; };
}, },
props: { props: {
detail: Array detail: Array
}, },
computed: {}, computed: {},
created() {}, created() {},
watch: { watch: {
detail(next) { detail(next) {
this.goodsList = this.sortData(next, 4); this.goodsList = this.sortData(next, 4);
} }
}, },
methods: { methods: {
swiperChange(e) { swiperChange(e) {
this.swiperCurrent = e.detail.current; this.swiperCurrent = e.detail.current;
}, },
// //
sortData(oArr, length) { sortData(oArr, length) {
let arr = []; let arr = [];
let minArr = []; let minArr = [];
oArr.forEach(c => { oArr.forEach(c => {
if (minArr.length === length) { if (minArr.length === length) {
minArr = []; minArr = [];
} }
if (minArr.length === 0) { if (minArr.length === 0) {
arr.push(minArr); arr.push(minArr);
} }
minArr.push(c); minArr.push(c);
}); });
return arr; return arr;
}, },
jump(path, query) { jump(path, query) {
this.$yrouter.push({ this.$yrouter.push({
path, path,
query, query,
}); });
}, },
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.group-goods { .group-goods {
position: relative; position: relative;
z-index: 9; z-index: 9;
} }
.swiper-box, .swiper-box,
.carousel { .carousel {
width: 700rpx; width: 700rpx;
height: 240upx; height: 240upx;
position: relative; position: relative;
border-radius: 20rpx; border-radius: 20rpx;
.carousel-item { .carousel-item {
width: 100%; width: 100%;
height: 100%; height: 100%;
// padding: 0 28upx; // padding: 0 28upx;
overflow: hidden; overflow: hidden;
} }
.swiper-image { .swiper-image {
width: 100%; width: 100%;
height: 100%; height: 100%;
// border-radius: 10upx; // border-radius: 10upx;
background: #ccc; background: #ccc;
} }
} }
.swiper-dots { .swiper-dots {
display: flex; display: flex;
position: absolute; position: absolute;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
bottom: 0rpx; bottom: 0rpx;
z-index: 66; z-index: 66;
.dot { .dot {
width: 45rpx; width: 45rpx;
height: 3rpx; height: 3rpx;
background: #eee; background: #eee;
border-radius: 50%; border-radius: 50%;
margin-right: 10rpx; margin-right: 10rpx;
} }
.dot-active { .dot-active {
width: 45rpx; width: 45rpx;
height: 3rpx; height: 3rpx;
background: #a8700d; background: #a8700d;
border-radius: 50%; border-radius: 50%;
margin-right: 10rpx; margin-right: 10rpx;
} }
} }
// + // +
.group-goods { .group-goods {
background: #fff; background: #fff;
border-radius: 20rpx; border-radius: 20rpx;
overflow: hidden; overflow: hidden;
.title-box { .title-box {
padding-bottom: 20rpx; padding-bottom: 20rpx;
.title { .title {
font-size: 32rpx; font-size: 32rpx;
font-weight: bold; font-weight: bold;
} }
.group-people { .group-people {
.time-box { .time-box {
font-size: 26rpx; font-size: 26rpx;
color: #edbf62; color: #edbf62;
.count-text-box { .count-text-box {
width: 30rpx; width: 30rpx;
height: 34rpx; height: 34rpx;
background: #edbf62; background: #edbf62;
text-align: center; text-align: center;
line-height: 34rpx; line-height: 34rpx;
font-size: 24rpx; font-size: 24rpx;
border-radius: 6rpx; border-radius: 6rpx;
color: rgba(#fff, 0.9); color: rgba(#fff, 0.9);
margin: 0 8rpx; margin: 0 8rpx;
} }
} }
.head-box { .head-box {
.head-img { .head-img {
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
border-radius: 50%; border-radius: 50%;
background: #ccc; background: #ccc;
} }
} }
.tip { .tip {
font-size: 28rpx; font-size: 28rpx;
padding-left: 30rpx; padding-left: 30rpx;
color: #666; color: #666;
} }
.cuIcon-right { .cuIcon-right {
font-size: 30rpx; font-size: 30rpx;
line-height: 28rpx; line-height: 28rpx;
color: #666; color: #666;
} }
} }
} }
.goods-box { .goods-box {
.goods-item { .goods-item {
margin-right: 22rpx; margin-right: 22rpx;
&:nth-child(4n) { &:nth-child(4n) {
margin-right: 0; margin-right: 0;
} }
} }
} }
} }
</style> </style>

54
pages/home/components/ListTitleBox.vue

@ -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

@ -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

@ -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">

1529
pages/home/index.vue

File diff suppressed because it is too large Load Diff

BIN
static/bangdanbg.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
static/idx-icon1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
static/ji.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
static/tit1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
static/tit2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
static/tit3.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.0 KiB

BIN
static/tit4.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
static/tit5.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
static/tit6.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
static/yi.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Loading…
Cancel
Save